New general page: updating counters properly #21747

igorschoester · 2024-10-24T12:43:07Z

Context

Update our notification count (badges) in the Yoast menu and admin bar

Summary

This PR can be summarized in the following changelog entry:

Fixes a 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 a 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

coveralls · 2024-10-24T12:57:55Z

Pull Request Test Coverage Report for Build c567bc6e7504c436c5763eade179b8d16e3b54c1

Details

46 of 62 (74.19%) changed or added relevant lines in 13 files are covered.
113 unchanged lines in 3 files lost coverage.
Overall coverage increased (+0.07%) to 54.654%

Changes Missing Coverage	Changed/Added Lines	%
packages/js/src/first-time-configuration/tailwind-components/steps/indexation/indexation-step.js	1	0.0%
packages/js/src/general/app.js	1	0.0%
packages/js/src/first-time-configuration/first-time-configuration-steps.js	2	0.0%
admin/views/partial-notifications-errors.php	3	0.0%
packages/js/src/general/hooks/use-notification-count-sync.js	4	0.0%
inc/class-wpseo-admin-bar-menu.php	5	0.0%

Files with Coverage Reduction	New Missed Lines	%
packages/js/src/first-time-configuration/first-time-configuration-steps.js	1	0.0%
packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js	6	82.95%
packages/js/src/initializers/post-scraper.js	106	0.0%

Totals
Change from base Build a57839d8f0be346fbd154c21131a0f3e75b92398:	0.07%
Covered Lines:	29700
Relevant Lines:	54639

💛 - Coveralls

thijsoo

CR 👍

leonidasmi

Acceptance test is ✅

Just hiding it when the count is 0. This simplifies the frontend needed when a user decides to make a notification visible again.

Easier to follow in your IDE

Don't export toggleAlertStatus itself, only via actions objects

Co-authored-by: Thijs van der Heijden <[email protected]>

Co-authored-by: Igor <[email protected]>

Fix for commit: 41edad8

We already have a border to separate the title/description from the content

The hardcoded width is preventing collapsing. But it was already moving the image below it. So I really don't see a need for the width, instead lets try to take a similar amount of space if available. But don't prevent it from being smaller.

igorschoester added the changelog: bugfix Needs to be included in the 'Bugfixes' category in the changelog label Oct 24, 2024

thijsoo approved these changes Oct 28, 2024

View reviewed changes

pls78 mentioned this pull request Oct 30, 2024

New General page: Completing the SEOO doesn't hide the relevant notification #21768

Closed

leonidasmi added this to the 23.9 milestone Oct 30, 2024

leonidasmi approved these changes Oct 30, 2024

View reviewed changes

leonidasmi changed the base branch from trunk to release/23.8 October 30, 2024 13:21

leonidasmi changed the base branch from release/23.8 to trunk October 30, 2024 13:22

leonidasmi added changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog and removed changelog: bugfix Needs to be included in the 'Bugfixes' category in the changelog labels Oct 30, 2024

leonidasmi removed this from the 23.9 milestone Oct 30, 2024

igorschoester and others added 19 commits October 30, 2024 15:26

Add update notification total helper

11855a2

Refactor the admin bar to always render the notification totals

27d98d4

Just hiding it when the count is 0. This simplifies the frontend needed when a user decides to make a notification visible again.

Add notification count sync hook

c89f9cc

Remove the reindex notification from the FTC

16e67d7

Use named export instead

5cb6245

Easier to follow in your IDE

Improve test coverage

f4d6063

Don't export toggleAlertStatus itself, only via actions objects

Fix copy in the Alert center when no problems are detected

1cfb17d

Update packages/js/src/dashboard/components/problems.js

570d1b3

Co-authored-by: Thijs van der Heijden <[email protected]>

Update packages/js/src/dashboard/components/problems.js

958e42f

Co-authored-by: Thijs van der Heijden <[email protected]>

Update packages/js/src/dashboard/components/problems.js

4b5da38

Co-authored-by: Igor <[email protected]>

Update packages/js/src/dashboard/components/problems.js

ef890e1

Co-authored-by: Igor <[email protected]>

Use STORE_NAME constant instead of hard-code it

7ee252e

Remove unused localized string

a551b2e

Fix cs

7100e3d

Remove duplicate line

af9c52d

Set max width for Paper content.

7c12072

Update snapshots for general notifications and problems

40b7689

Fix for commit: 41edad8

Add null coalescing operator to avoid fatal error

83effcd

Removes other uses of matchStringWithRegex

1d449b5

mhkuu and others added 12 commits October 30, 2024 15:33

Convers the text alignment assessment to use the HTML parser

58dbaf2

Further simplifies the getLongCenterAlignedTexts research

d8b51c0

Extracts constants and functions for readability

54b7c9f

add columns to the semrush api request

155e45d

fix test

0b8192c

FTC: remove horizontal rule

dc57cb3

We already have a border to separate the title/description from the content

Make indexation step responsive

1356b74

The hardcoded width is preventing collapsing. But it was already moving the image below it. So I really don't see a need for the width, instead lets try to take a similar amount of space if available. But don't prevent it from being smaller.

Converts the list assessment to use the HTML parser

2f6bfe3

Exclude empty list

b66a78f

Add unit tests

dcd153e

Use native for loop to avoid nested check

3e4eb95

Improve check

8f217a3

leonidasmi force-pushed the 21724-new-general-page-updating-counters-properly branch from 41b6ffa to 8f217a3 Compare October 30, 2024 13:39

leonidasmi changed the base branch from trunk to release/23.8 October 30, 2024 13:39

leonidasmi mentioned this pull request Oct 30, 2024

21724 new general page updating counters properly new #21781

Merged

18 tasks

leonidasmi closed this Oct 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New general page: updating counters properly #21747

New general page: updating counters properly #21747

igorschoester commented Oct 24, 2024 •

edited by leonidasmi

Loading

coveralls commented Oct 24, 2024 •

edited

Loading

thijsoo left a comment

leonidasmi left a comment

New general page: updating counters properly #21747

New general page: updating counters properly #21747

Conversation

igorschoester commented Oct 24, 2024 • edited by leonidasmi Loading

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

UI changes

Other environments

Documentation

Quality assurance

Innovation

coveralls commented Oct 24, 2024 • edited Loading

Pull Request Test Coverage Report for Build c567bc6e7504c436c5763eade179b8d16e3b54c1

Details

💛 - Coveralls

thijsoo left a comment

Choose a reason for hiding this comment

leonidasmi left a comment

Choose a reason for hiding this comment

igorschoester commented Oct 24, 2024 •

edited by leonidasmi

Loading

coveralls commented Oct 24, 2024 •

edited

Loading