21724 new general page updating counters properly new

[leonidasmi]

Context

• Update our notification count (badges) in the Yoast menu and admin bar
• Created from New general page: updating counters properly #21747, after a botched rebase.

Summary

This PR can be summarized in the following changelog entry:

• Fixes an unreleased bug where the notification count in the admin menu and bar would not update when interacting with the show/hide functionality on the general page.
• Fixes an unreleased bug where completing the SEO data optimization from within the First time configuration would not result in automatically dismissing the respective notification in the general page.

Relevant technical choices:

• I was doubting where to place the side-effect for the updates. The action is the correct place in time. But the store reducer/control seems like a bad place to add side-effects. So at first I added it to where you call the action. But then I needed the remove too, which needs the same sync after. So instead I ended up creating a sync hook and selector.
• The new helper fixes a pre-existing issue where the screen-reader text would be removed instead of updated.
• The PHP change fixes a pre-existing issue where if the initial count is 0, no count update would be possible.
• The FTC change fixes a pre-existing issue where the count would decrement even if the reindex notice would be hidden.
• Refactored the selectors a bit to use the selectActive I used for the count selector. Improved the test coverage while at it.
• About the tests, that is a bit of strange one with the JSX and React component mimicking the menus. But that is just the easiest for me to get a snapshot situation going that I could at least check a bit. Otherwise I'm just writing the same selectors again in the test, which seemed redundant.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Have some problem and notification. I used the site no-index under Settings > Reading and resetting the indexables/migrations with our test helper (which is needed anyway for the FTC check)
• Go to the new general page
• Verify the counts are correct: the sum of the problems and notifications should be reflected in the Yoast admin and menu bar badges.
  
• Play around with hiding/showing problems and notifications:
  • Go to 0, the badges should be gone
• Verify the count updates correctly each time
• Hide all the problems/notifications
• Reload the page
• Make the problems/notifications visible again
• Verify the badges appeared again
• Ensure you have the re-index notification (resetting the indexables) and that is not hidden
• Go to the first time configuration
• Run the SEO data optimization from the first step
• Verify the count went down by 1
• Without reloading, go to the alert center
• Verify the notification is totally gone
• Reset your indexables again
• Go back to the alert center
• Hide the re-index notification
• Go to the first time configuration
• Run the SEO data optimization from the first step
• Verify the count did not go down
• Without reloading, go to the alert center
• Verify the notification is totally gone

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:

• The new general page, and the SEO data optimization complete on the FTC

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 #21724

[leonidasmi]

The original PR was already approved, so I'm merging this one.

[coveralls]

Pull Request Test Coverage Report for Build 35c3767b6d7a622c82023494b9d7da1abd44f9a1

Details

• 29 of 41 (70.73%) changed or added relevant lines in 6 files are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage increased (+0.05%) to 54.638%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/general/app.js	0	1	0.0%
packages/js/src/first-time-configuration/first-time-configuration-steps.js	0	2	0.0%
packages/js/src/general/hooks/use-notification-count-sync.js	0	4	0.0%
inc/class-wpseo-admin-bar-menu.php	0	5	0.0%

Files with Coverage Reduction	New Missed Lines	%
packages/js/src/first-time-configuration/first-time-configuration-steps.js	1	0.0%

Totals
Change from base Build a57839d8f0be346fbd154c21131a0f3e75b92398:	0.05%
Covered Lines:	29706
Relevant Lines:	54655

---

💛 - Coveralls