Add top queries widget

[igorschoester]

Context

Summary

This PR can be summarized in the following changelog entry:

• Adds the top queries widget to the dashboard.
• Changes the learn more short link in the info tooltip for the top pages widget.

Relevant technical choices:

• Copied over the widget file and started renaming/adjusting. Pretty straight forward 😄
• Changed JSDoc type from our usual JSX.node to ReactNode, this seems to work nicer in my editor where it also allows for strings. Not sure if this opens a whole can of worms or not 😅

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Setup

• Enable the feature flag by adding the code:

define( 'YOAST_SEO_GOOGLE_SITE_KIT_FEATURE', true );

• Follow the Site Kit setup flow so it is all connected

Shortlink change

• In the "Top 5 most popular content" widget
• Open the tooltip on the top right, the I icon
• Verify the "learn more" link is now: https://yoa.st/dashboard-top-content-learn-more
• Verify that shortlink is the same as per Slack message

Top 5 search queries

• Notice you now have the "Top 5 search queries" widget!
• Verify it looks like the design
• Verify the tooltip "learn more" link is: https://yoa.st/dashboard-top-queries-learn-more
• Verify that shortlink is the same as per Slack message
• Open the network tab and verify you have this new request: /wp-json/yoast/v1/time_based_seo_metrics?limit=5&options%5Bwidget%5D=query
• Right click and block the URL
• Refresh the page
• The widget should now contain an error alert (currently the error is not as intended yet, but that is out of scope)
• Unblock the URL and refresh the page
• Verify the skeleton loader looks nice
• For the no data found message
  • Either use this patch: widgets-no-data.patch
  • Or change the code yourself in /src/dashboard/infrastructure/search-console/site-kit-search-console-adapter.php, in the parse_response method, adjust the code to return right after initialization:

		$search_ranking_data_container = new Data_Container();
		return $search_ranking_data_container;

• Refresh the page after applying the above
• Verify you see the message: No data to display: Your site hasn't received any visitors yet.

Setup Site Kit

• Go to the Yoast > Integrations page
• Disconnect Site Kit
• Go back to the dashboard
• Connect Site Kit again
• Verify you get both Site Kit widgets right away and that the "Top 5 most popular content" is first, followed by "Top 5 search queries"

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 (Default Block/Gutenberg/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.

QA can test this PR by following these steps:

Impact check

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

• A new widget on the dashboard
• The learn more link in the info button for the top 5 most popular content changed too

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. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

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 https://github.com/Yoast/reserved-tasks/issues/408

[coveralls]

Pull Request Test Coverage Report for Build a55e2c7e55dd0bdeea321346984137e6f5608eab

Details

• 38 of 41 (92.68%) changed or added relevant lines in 8 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.07%) to 57.874%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/dashboard/components/learn-more-link.js	1	2	50.0%
packages/js/src/general/initialize.js	0	2	0.0%

Totals
Change from base Build 787c0244d7b1317a432685d331a9705189656907:	0.07%
Covered Lines:	13692
Relevant Lines:	23293

---

💛 - Coveralls

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[vraja-pro]

CR & AC ✅