Feature/wincher modal improvements

[KaisZaoualiWincher]

Context

• We want to improve the Track SEO performance functionality in the Yoast SEO metabox/sidebar.

Summary

This PR can be summarized in the following changelog entry:

• Improves the Track SEO performance functionality by adding a graph that plots keyphrase trends over time.
• [@yoast/babel-preset] Adds a plugin to support class properties.

Relevant technical choices:

• N/A

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Preliminary steps

• With your browser console open, go to https://app.wincher.com
  • Log in if you're not logged in already
  • In the browser's console network tab, look for a GET request to app.wincher.com/v1/account
  • In the request response, take note of the history_days value: it should be 31

Test the single keyword case

• Edit a post
• Add a focus keyphrase
• Go to Track SEO performance, a modal similar to the one below should appear
  
• Toggle Tracking on, a graph should appear
  • Please note that if you track a keyword you've never tracked before, the graph will be only a point
    
  • Conversely, if you track a keyword you've already tracked before, a segment will be shown
  
• Verify that:
  • you can only choose from the drop-down menu time frames which are lower than the history_days value (i.e., for history_days equals to 31, you should be able to choose from Last day, Last week and Last month)
  • data displayed in the table and in the chart refers to the selected time frame
  • if you toggle Tracking off the corresponding line disappears from the graph
  • if you hover on a point on the line (you should have at least one), you get information about that specific point in time
  * clicking on the mini chart of a keyphrase selects the corresponding graph in the chart

Test the multiple keywords case

• Install and activate Yoast SEO Premium
• Keep editing the post you were editing and add a related keyphrase
• Go to `Track SEO performance: you should see the additional keyphrase in the table
  
• Toggle the new keyphrase and verify a new line appears in the chart
  
• Verify that:
  • select all selects all tracked keyphrases
  • deselect all deselects all selected keyphrases.
  • deselecting all keyphrases hide the chart
  • untracking a keyphrase deselects it
  • clicking on the mini chart of a keyphrase select it, deselects any other selected keyphrase, and display chart if not already displayed.

Test keyword change over time

• Edit packages/js/src/redux/selectors/WincherSEOPerformance.js
• Substitute the getWincherTrackedKeyphrases method with the following:

export function getWincherTrackedKeyphrases( state ) {
  return {
    test: {
      id: 36381183,
      keyword: "test",
      position: {
        change: -54,
        value: 101,
        history: [
          {
            datetime: "2023-09-24T18:04:38Z",
            value: 155,
          },
          {
            datetime: "2023-09-28T06:31:22Z",
            value: 101,
          },
        ],
      },
      updated_at: "2023-09-28T06:31:22Z",
    },
  };
}

• Edit a post, click on Track SEO performance and verify the graph is as follows
  
  • specifically, verify that the caret in the Position over time column is green and points upwards
• Edit again packages/js/src/redux/selectors/WincherSEOPerformance.js
• Substitute the getWincherTrackedKeyphrases method with the following:

export function getWincherTrackedKeyphrases( state ) {
  return {
    test: {
      id: 36381183,
      keyword: "test",
      position: {
        change: 54,
        value: 155,
        history: [
          {
            datetime: "2023-09-24T18:04:38Z",
            value: 101,
          },
          {
            datetime: "2023-09-28T06:31:22Z",
            value: 155,
          },
        ],
      },
      updated_at: "2023-09-28T06:31:22Z",
    },
  };
}

• Edit a post, click on Track SEO performance and verify the graph is as follows
  
  • specifically, verify that the caret in the Position over time column is red and points downwards

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Block/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes #

[mhkuu]

Sorry, I see this PR got auto-closed when I merged the feature/plugin-fixes branch!

[pls78]

Hey @KaisZaoualiWincher 👋
I have some points about the PR I feel should be addressed:

• For some reason, the PR breaks focusing on #focus-keyword-input-sidebar when there’s no focus keyword and you try to track SEO performance: changing it to #focus-keyword-input-metabox fixed it
• @babel/plugin-proposal-class-properties has been added as dependency in packages/babel-preset/package.json: however, in npmjs it is stated that This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
• with history_days set to 31 I just get only Last day and Last week as options from the menu (following the instructions, I should also get Last month)
• This point is not clear to me: Make sure we display the correct position change, with the correct caret type
  Thanks! 🙏

[KaisZaoualiWincher]

Hey @KaisZaoualiWincher 👋 I have some points about the PR I feel should be addressed:

• For some reason, the PR breaks focusing on #focus-keyword-input-sidebar when there’s no focus keyword and you try to track SEO performance: changing it to #focus-keyword-input-metabox fixed it
• @babel/plugin-proposal-class-properties has been added as dependency in packages/babel-preset/package.json: however, in npmjs it is stated that This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
• with history_days set to 31 I just get only Last day and Last week as options from the menu (following the instructions, I should also get Last month)

Hi @pls78 👋

All the points should be addressed.

• This point is not clear to me: Make sure we display the correct position change, with the correct caret type

This means we should display a red bottom caret if there is a position lost, otherwise a green top caret:

[pls78]

Hello @KaisZaoualiWincher 👋
There are still a couple of small things to address 🙂

• When I edit a post and I'm disconnected from Wincher, I get a 400 - Bad Request console error from http://plswordpress.test/wp-json/yoast/v1/wincher/account/limit?_locale=user. the response payload is as follows:
  {"status":400,"error":"Token usage failed. Token is empty."}
• I get the following console error, too: Warning: Failed prop type: The prop 'isOpen' is marked as required in 'CollapsibleStateless', but its value is 'undefined'.

Could you please take a look ad these issues, too? 🙏

[hardikgohil7988]

The changes, bugs, and scenarios have all been validated and everything is working as expected.