Wincher modal improvements

[pls78]

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 in the Yoast SEO metabox/Sidebar.

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 #

[coveralls]

Pull Request Test Coverage Report for Build 6350235739

• 13 of 13 (100.0%) changed or added relevant lines in 3 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.01%) to 45.824%

---

Totals
Change from base Build 6328202055:	0.01%
Covered Lines:	12196
Relevant Lines:	26615

---

💛 - Coveralls

[pls78]

This PR is not needed, I have updated the original one with test instructions