Adds lock icon to AI buttons

[mykola]

Context

• Lock icon missing on AI assessment button in free version.

Summary

This PR can be summarized in the following changelog entry:

• Adds a lock icon to the AI assessment buttons in the free version of the Yoast SEO plugin.

Relevant technical choices:

• svg icon used as a ReactComponent and placed/aligned with css.

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 activated and Yoast SEO Premium deactivated.

• Open or create a new post.

• Use the block editor.

• Add enough content and also add a focus keyphrase. 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 SEO analysis tab.

• Check that the Keyphrase density assessments aren't green and show the sparkle button of the AI assessments fixes project.

• Check that the FIx with AI button fit the Design and lock icon is present.

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:

• Please check any other Toast message that it still the same.

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.

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 of
• 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 #1622

[github-actions]

@mykola Please be aware that following packages have been abandoned and are not actively maintained anymore:

Package name	Path
@yoast/babel-preset	packages/babel-preset
@yoast/components	packages/components
@yoast/e2e-tests	packages/e2e-tests
@yoast/helpers	packages/helpers
@yoast/jest-preset	packages/jest-preset
@yoast/style-guide	packages/style-guide

Please consider using the other packages instead.

[coveralls]

Pull Request Test Coverage Report for Build 59e18d690d1ad53f7d13bcf0a1fc3302e54bd4fd

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.002%) to 48.63%

---

Totals
Change from base Build dd6e866a9e6d253114633104d9e3858d807178ba:	0.002%
Covered Lines:	25100
Relevant Lines:	53464

---

💛 - Coveralls

[Jordi-PV]

It looks good and works 👍 . @mykola should we maybe consider adding the CSS for the fix/assessments project in a separate file (ex. ai-fix-assessments.css) instead of adding it in the ai-generator.css file? 🤔

[coveralls]

Pull Request Test Coverage Report for Build 821fb4eb9314416fda4fc18946e9751e55ccb142

Details

• 1 of 1 (100.0%) changed or added relevant line in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.002%) to 48.63%

---

Totals
Change from base Build dd6e866a9e6d253114633104d9e3858d807178ba:	0.002%
Covered Lines:	25100
Relevant Lines:	53464

---

💛 - Coveralls

[coveralls]

Pull Request Test Coverage Report for Build d3fa9c0024e75451fa0abf1b1c307f627186421d

Details

• 1 of 2 (50.0%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+4.3%) to 52.949%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
admin/metabox/class-metabox.php	0	1	0.0%

Totals
Change from base Build bf40f1759bee0a9683930ebe95fbdbe02e1b5091:	4.3%
Covered Lines:	28455
Relevant Lines:	54347

---

💛 - Coveralls

[mhkuu]

Is there a reason why we're not using the import { LockClosedIcon } from "@heroicons/react/solid"; that we usually use for these cases? 🤔

[coveralls]

Pull Request Test Coverage Report for Build d29510361b44bfcf48dad0c68381ee1959378b7e

Details

• 1 of 2 (50.0%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+4.3%) to 52.949%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
admin/metabox/class-metabox.php	0	1	0.0%

Totals
Change from base Build bf40f1759bee0a9683930ebe95fbdbe02e1b5091:	4.3%
Covered Lines:	28455
Relevant Lines:	54347

---

💛 - Coveralls

[Jordi-PV]

Nice job @mykola! It works like a charm 🙌