Fixes AI buttons in the sidebar going blank after closing the metabox #21439

Jordi-PV · 2024-06-13T12:32:01Z

Context

We want to solve the bug where the sparkles icon of the AI assessments fixes buttons would go blank when closing the metabox.

Summary

This PR can be summarized in the following changelog entry:

Fixes an unreleased bug where the sparkles icon in the AI assessment fixes button would disappear when closing the metabox.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Have Yoast SEO and Yoast SEO Premium activated.
Open or create a new post. Make sure to have enough content and also add a focus keyphrase.
Use the block editor.
Add a keyphrase and ensure that the keyphrase is not included in the first paragraph/introduction and that it isn't used more than once in the content.
Open the Premium SEO analysis tab in the Yoast SEO sidebar.
Check that the Keyphrase in introduction or Keyphrase density and Keyphrase distribution assessments aren't green and show the sparkle button of the AI assessments fixes project.
Verify that the button has a sparkle icon with a gradient effect from purple to indigo.
Open also the SEO analysis tab in the metabox.
Verify that the same assessments also show the buttons.

Close the metabox from the closing triangle.

Confirm that the sparkle icons of the buttons in the Yoast SEO sidebar are still visible.

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:

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/plugins-automated-testing/issues/1621

…g the metabox #1621 Use unique gradient id for each image.

Jordi-PV · 2024-06-14T19:02:44Z

I will need to update the Snapshots test since they are failing due to the random ids. 🤔

FAMarfuaty · 2024-06-17T12:01:36Z

I will need to update the Snapshots test since they are failing due to the random ids. 🤔

I just realized your comment here means that doesn't matter how many times the snapshot is updated, the test will fail 🙈

I found a discussion in StackOverflow that discusses a similar problem. One of the solutions is:

Instead you should generate the ID outside the component and pass it in as a prop. That way you can hard-code that prop in the test, ensuring it remains consistent between test runs.

I think you can apply this suggestion:

Move const gradientId = 'gradient-${ Math.random().toString( 36 ).substr( 2, 9 ) }'; to outside the SparklesIcon component. In this PR, it means you can move it to packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js
Pass gradientId as a prop for SparklesIcon
When generating the dynamic Id, substr is deprecated. So in this case it's better to use substring or slice
Inside packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js also pass the gradientId

FAMarfuaty

Great solution! 🙌🏽 However, since the snapshot is failing and we cannot reliably test the component with the current setup, consider applying the suggestions I left in the above comment :)

…seo into ai-fixes-buttons-in-the-sidebar-go-blank

coveralls · 2024-06-18T11:11:09Z

Pull Request Test Coverage Report for Build ed05df138f626687db46901d40aacafc689ad645

Details

2 of 2 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 48.41%

Totals
Change from base Build 4041cc87ffe9c4b136e5e7a91f3eb4046bb2dad8:	0.0%
Covered Lines:	25085
Relevant Lines:	53679

💛 - Coveralls

coveralls · 2024-06-18T11:22:25Z

Pull Request Test Coverage Report for Build 89cff21698a268dc165bda2e84dc40077ff1ff5c

Details

2 of 2 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 48.41%

Totals
Change from base Build 4041cc87ffe9c4b136e5e7a91f3eb4046bb2dad8:	0.0%
Covered Lines:	25085
Relevant Lines:	53679

💛 - Coveralls

FAMarfuaty · 2024-06-18T13:20:33Z

packages/js/src/ai-assessment-fixes/components/sparkles-icon.js

@@ -5,23 +5,24 @@ import propTypes from "prop-types";
 * @param {boolean} pressed Whether the button is pressed.
 * @returns {JSX.Element} The AI Assessment Fixes button icon.
 */
-export const SparklesIcon = ( { pressed = false } ) => {
+export const SparklesIcon = ( { pressed = false, gradientId } ) => {


I guess here it would also be better to add gradientId to the JSDoc of SparklesIcon 😺

I'll commit this :D See my latest commit

Yes, good call! Thank you 🙏

coveralls · 2024-06-18T13:34:02Z

Pull Request Test Coverage Report for Build 7ad1e50ad733c5cc27a3abd4783abb841cd9e4b8

Details

2 of 2 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 48.41%

Totals
Change from base Build 4041cc87ffe9c4b136e5e7a91f3eb4046bb2dad8:	0.0%
Covered Lines:	25085
Relevant Lines:	53679

💛 - Coveralls

FAMarfuaty · 2024-06-19T08:43:12Z

Acceptance test: Works like a charm! ✨

Jordi-PV and others added 5 commits June 13, 2024 14:05

Refactors the sparkles icon

b96eb88

Adds css to try to apply the gradient

2e58666

Formats docs

becce9b

AI: AI fixes buttons in the sidebar go blank after opening and closin…

9e2f18e

…g the metabox #1621 Use unique gradient id for each image.

Adds an ID to every icon and cleans up code

c813b11

Jordi-PV marked this pull request as ready for review June 14, 2024 16:13

Jordi-PV added 2 commits June 14, 2024 20:05

Updates snapshots test

149dfd7

Adjusts the linear-gradient id

872ebc1

Jordi-PV added innovation Innovative issue. Relating to performance, memory or data-flow. bug labels Jun 14, 2024

Updates snapshots

c9a22c2

update snapshot for SparklesIcon

5af93dd

FAMarfuaty requested changes Jun 17, 2024

View reviewed changes

Jordi-PV added 3 commits June 18, 2024 12:52

Moves the sparklesIcon id to the props

08df467

Merge branch 'feature/fix-assessments' of github.com:Yoast/wordpress-…

f198a9d

…seo into ai-fixes-buttons-in-the-sidebar-go-blank

Corrects linter error

8e62532

mhkuu added this to the feature/fix-assessments milestone Jun 18, 2024

mhkuu added changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog and removed bug labels Jun 18, 2024

FAMarfuaty reviewed Jun 18, 2024

View reviewed changes

Adapt JSDoc

7e59dc9

FAMarfuaty approved these changes Jun 19, 2024

View reviewed changes

FAMarfuaty merged commit 5814dc6 into feature/fix-assessments Jun 19, 2024
16 checks passed

FAMarfuaty deleted the ai-fixes-buttons-in-the-sidebar-go-blank branch June 19, 2024 08:43

mhkuu mentioned this pull request Jul 16, 2024

Merges the feature branch feature/fix-assessments into trunk #21480

Merged

18 tasks

mhkuu changed the title ~~AI fixes buttons in the sidebar go blank~~ Fixes AI buttons in the sidebar going blank after closing the metabox Jul 16, 2024

mhkuu modified the milestones: feature/fix-assessments, 23.2 Jul 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes AI buttons in the sidebar going blank after closing the metabox #21439

Fixes AI buttons in the sidebar going blank after closing the metabox #21439

Jordi-PV commented Jun 13, 2024 •

edited by mhkuu

Loading

Jordi-PV commented Jun 14, 2024

FAMarfuaty commented Jun 17, 2024 •

edited

Loading

FAMarfuaty left a comment

coveralls commented Jun 18, 2024 •

edited

Loading

coveralls commented Jun 18, 2024 •

edited

Loading

FAMarfuaty Jun 18, 2024

FAMarfuaty Jun 18, 2024

Jordi-PV Jun 18, 2024

coveralls commented Jun 18, 2024 •

edited

Loading

FAMarfuaty commented Jun 19, 2024

Fixes AI buttons in the sidebar going blank after closing the metabox #21439

Fixes AI buttons in the sidebar going blank after closing the metabox #21439

Conversation

Jordi-PV commented Jun 13, 2024 • edited by mhkuu 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

Jordi-PV commented Jun 14, 2024

FAMarfuaty commented Jun 17, 2024 • edited Loading

FAMarfuaty left a comment

Choose a reason for hiding this comment

coveralls commented Jun 18, 2024 • edited Loading

Pull Request Test Coverage Report for Build ed05df138f626687db46901d40aacafc689ad645

Details

💛 - Coveralls

coveralls commented Jun 18, 2024 • edited Loading

Pull Request Test Coverage Report for Build 89cff21698a268dc165bda2e84dc40077ff1ff5c

Details

💛 - Coveralls

FAMarfuaty Jun 18, 2024

Choose a reason for hiding this comment

FAMarfuaty Jun 18, 2024

Choose a reason for hiding this comment

Jordi-PV Jun 18, 2024

Choose a reason for hiding this comment

coveralls commented Jun 18, 2024 • edited Loading

Pull Request Test Coverage Report for Build 7ad1e50ad733c5cc27a3abd4783abb841cd9e4b8

Details

💛 - Coveralls

FAMarfuaty commented Jun 19, 2024

Jordi-PV commented Jun 13, 2024 •

edited by mhkuu

Loading

FAMarfuaty commented Jun 17, 2024 •

edited

Loading

coveralls commented Jun 18, 2024 •

edited

Loading

coveralls commented Jun 18, 2024 •

edited

Loading

coveralls commented Jun 18, 2024 •

edited

Loading