JS: Solve react/require-default-props warnings

[igorschoester]

Context

• Follow-up of the lint rule adjustment: 553 update to the new yoasteslint config version in our projects #22256
• Part of the React 19 preparations.
• In general try to improve the JSDoc, as we will be looking at removing the propTypes too.

Summary

This PR can be summarized in the following changelog entry:

• Refactors the defaultProps to be defaultArguments instead.
• Restores the Schema tab header that was accidentally removed.

Relevant technical choices:

Note

I used ESLint as source to detect all the functional defaultProps.

• See commits.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Devs: run yarn workspace @yoast/wordpress-seo eslint src --rule "{react/require-default-props: error}" -- this runs ESLint in the packages/js scope, changing the severity of the default props rule.
• Verify no errors are found
• The defaultProps that are left should all be components (I ignored one on a styled-components something)

Smoke test the files.
Keep in mind, these are mostly just refactoring the default values of the components. While we might not even hit these defaults in the way we use the components.
That said, here is everything that is touched, divided in some categories:

Editor

• ai-optimize-button: the Premium detection should still work
• AdvancedSettings: the tab/collapsible in the editors
• AnalysisCheck: used in the WP pre-publish and document sidebar screens. And in our frontend inspector
  • It seems the focus keyphrase check does not add a scoreValue there... not sure how to specifically check as I did have an "OK" in the SEO score.
• AnalysisUpsell: used in the word forms upsell in the SEO analysis. This should be true for our supported languages
  • Verify the alignment (vertical vs horizontal) is correct in the metabox and sidebar
• CollapsibleCornerstone: the section in both metabox and sidebar
• MetaboxButton: button in the metabox for the upsells (the ones that open the upsell modal and look like the collapsible)
• PluginIcon: if you add blocks, the Yoast Icon next to the Yoast block categories
• SEMrushRelatedKeyphrasesModalContent: the Get related keyphrases under the focus keyphrase field opens this in a modal
• SchemaTab: in either the metabox or sidebar, the content of the schema tab/collapsible
  • Important: here I added back the internal Header component that was accidentally removed in version 20.5
    
• SidebarButton: this is the variant of the sidebar the the MetaboxButton was for the metabox. The button that looks like a collapsible. Used to open modals instead of collapsing, mostly upsells, but also the Track SEO performance
• SidebarCollapsible: as the name suggests, the main filler of the sidebar
• SnippetPreviewSection: basically the whole search appearance with form
• TaxonomyPicker: when adding more than 1 category to a post, this component is used to select the primary one
• InclusiveLanguageAnalysis: the tab/collapsible in the metabox/sidebar, but basically the whole UI
• withYoastSidebarPriority: exposed to add-ons and used in Premium, used for a morphology warning at the top of the metabox/sidebar
  • Activate Premium and edit a post
  • Run in the JS console: wp.data.dispatch("yoast-seo-premium/editor").setLoadMorphologyDataError(["test"])
  • Deactivate Premium again
• Modal: the "old" style modal that is the base for a lot of our modals in the editor still, for example for the search and social appearance modals in the sidebar
• EditorModal: the base for editor modals, you already tested this through the Modal.
  • But specifically, you can check it the icons are there at the end of the sidebar buttons for:
    • Search appearance: magnifying glass
    • Social appearance: share symbol/connected dots
    • Insights: lightbulb
• MetaboxPortal/MetaboxSlot: already tested by interacting with the metabox
• FacebookWrapper/TwitterWrapper: basically the content of the social appearance, both metabox and sidebar. Check with and without Premium
• SEMrushRelatedKeyphrases: removed an unused prop lastRequestKeyphrase, not sure how to check
• inline: used our Gutenberg link block replacement, with the nofollow/sponsored checks
• data-model: the bars representing the amount of prominent words under insights
• insights-collapsible/insights-modal: respectively the metabox and sidebar
• ai-generate-titles-and-descriptions-upsell: when you click "Use AI" without Premium this is the content for that upsell modal
• ai-optimize-upsell: when you click a highlight button next to an analysis result which needs AI, this is the content for that upsell modal. Hint: I like the keyphrase in description one, you can just change your keyphrase to something random to get it
• error-fallback: basically every React error boundary uses this as last measure. You could cheat using the React developer tools extension again, find our MetaboxSlot's ErrorBoundary and change the error state to a string
• outbound-link: used in quite some places, for example the Use AI upsell above

Wincher features

Basically, all the Track SEO performance things.

• AreaChart: the "Position over time" chart in the Track SEO performance modal' table -- note: I had to change scope (last week/month) to make it work, but the same happens on trunk
• AreaChartTable: same as above, just the screen-reader part
• WincherKeyphrasesTable: the table part, if you saw the chart, that was in the table already
• WincherPerformanceReport: this is basically the yoast/wincher widget on the WP dashboard
• WincherPostPublish: after you publish a post, this appears in that publish sidebar section
• WincherSEOPerformance: this is the content of the Track SEO performance modal
• WincherSEOPerformanceModal: this is the Track SEO performance buttons (sidebar/metabox have different ones) and modal
• WincherTableRow: a row in the table
• WincherLimitReached: the error content of when you exceed the related keyphrases limit, which defaults to 10, but the actual limit seems to also be passed as 10 so 🤷
  • You can run this in the JS console to ensure you always pass the limit: wp.data.dispatch("yoast-seo/editor").setWincherSetKeyphraseLimitReached(0)
• WincherNoTrackedKeyphrasesAlert: used in the report/WP dashboard; a warning for if you have no tracked keyphrases
  • To make that happen, either untrack all manually, or cheat by changing this PHP line to $data = [];
• WincherReconnectAlert: used in both the dashboard widget and the editor modal
  • I tested on the dashboard, using the React developer tools chrome extension to change the values in the WincherPerformanceReport component (you can filter on it)
  • Changing the data => status to 401 gave the reconnect warning
• WincherUpgradeCallout: you've likely seen this already, the Keyphrases tracked: 1998/2000 or however many at the top of both dashboard and editor content
• WincherSEOPerformance:
  • removed unused historyDaysLimit prop, not sure how to check
  • removed from editor-modules, effectively removing it from our add-ons/public API -- I gave it a search in our github organization
• WincherRequest: selectors used for getting information, basically already tested this above

General page

Alert center

• alerts-list/collapsible: the problems and notifications
  • setting your site to noindex will add a problem
  • using our test helper you can Enable post types & taxonomies. which will add a notification
  • having a hidden problem/notification will show you the collapsible
• notice: the old dismissible notifications, but on this page in the new style -- the premium not active, or First time configuration
• route-error-fallback: when an error happens, not sure how to trigger, but it is just the moving of the default classname
• route-layout: used in the first time config, specifically the description
• sidebar-layout: basically the main content with the upsell on the right
• premium-upsell-card: the upsell on the right (also used in our other admin pages)
• premium-upsell-list: the upsell at the bottom, also used on other admin pages)

First time configuration

• Alert: having 2 variants of alerts, both changed: Fade in and normal -- just walking through the steps let me see both: I optimized (normal alert) and have site represent on user (fade in alert)
• combo-box: site represents user: the selecting of a user
• image-select: site representation: the logo selection
• multi-line-text: displaying of an error message, for example in the the site represents' organization name saving. Not sure how to trigger, I cheated with using the React developer tools Chrome extension and changing the TextInput (parent)' feedback.isVisible to true
• radio-group: used in the personal preferences step
• single-select: the site representation organization/user selection
• spinner: while searching a user in the site represents
• text-input: a lot of places, like the website name un site represents
• configuration-stepper-buttons: multiple buttons, when you edit a step, when you save a step, when you "continue"
• step-circle: basically all the states the step circle icon thing can have
• step-header: the circle and the text next to it
• stepper: pretty much tested now with the interactions
• configuration-indexation/indexation-step: do the indexation in the first step; use our test helper to reset if needed
• indexing-error: when an error occurs during indexing; you can fake one by registrating a pre indexation error, run this in the JS console: window.yoast.indexing.preIndexingActions.terms = function() { throw new Error("hi"); } (presuming the terms need indexation)
• newsletter-signup: in the personal preferences step
• organization-section/person-section: in the site representation step, which is showing depends on the site representation value
• site-representation-step: the transition of this step and changing website name
• user-selector: already tested with the spinner typing above
• social-field-array: in the social profiles step: the add another profile part
• social-input-section: the whole social profiles step, includes the above
• social-input: all the input fields in the above

Indexation

• IndexingError, under Yoast > Tools
  • Make sure that you need to index, you can use our test helper to reset
  • Add the following line above the return of the run_indexation_action, see code: throw Error('boo'); -- this will make it error
  • Run the indexation/start the optimization and you will see the IndexingError component at work

Settings page

• formik-autocomplete-field: used in site representation, for the number of employees (needs Premium for interaction)
• formik-flipped-toggle-field: used in a lot of places, for example the enable author archives (option is disable, hence the flipped)
• notifications: removed the "unused" (no interaction, just passing along) onDismissed prop and passing it -- already done via the prop spread. Easy way to get errors is in the site representation, the other profiles of an organization. Fill in non-urls and save
• route-layout: every page is using this, already tested by now
• site-features: the cards' header image alt should still default to an empty string
• search: no code change

Workouts page

• SlotWithDefault: it seems the cornerstone and orphaned content workouts upsells use the default there
  • Activate Premium to double check the non-default also works still
  • Deactivate Premium again?
• CornerstoneWorkoutCard: both Free and Premium (through window variable)
• OrphanedWorkoutCard: both Free and Premium (through window variable)
• WorkoutCard: inner workings of both cards
• WorkoutUpsell: removed this as I couldn't find it being used

Integrations page

• integrations-grid: the layout with the sections
• acf-integration: under plugin
• algolia-integration: under plugin
• mastodon-integration: under other
• woocommerce-integration: used in plugin and schema
• plugin-integration: as base for Elementor, Jetpack and all the Schema API integrations beside Woo
• simple-integration: as base for almost all: ACF, Mastodon, Plugin integration base ☝️ , Site Kit and Woo
• toggleable-integration: as base for other integrations (Mastodon) and recommended integrations (Semrush and Wincher)
• card: component used in Algolia, simple integrations and toggleable integrations
• site-kit-consent-modal: needs the Site Kit feature flag but then connecting shows this modal (also in the Site Kit setup widget on our General => Dashboard)

Local SEO

• ImageSelectComponent is only used in ImageSelectPortal, which is exposed to other add-ons and only used in Local SEO
  • Install & activate it
  • Enable multiple locations
  • Edit a location and there the logo editing is using ImageSelectComponent
• ImageSelectPortal: already tested through ☝️

Unreachable/untestable code

• AddonInstallation: inactive feature flag code
• linkHiddenField: unused
• withMetaboxWarningsCheck: only JSDoc change
• how-to/legacy/8.2: only added a disable lint comment

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/reserved-tasks/issues/581

[coveralls]

Pull Request Test Coverage Report for Build 7298f0f80b1d60d3dbcb5477f140308e8d87adbe

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 26 of 124 (20.97%) changed or added relevant lines in 55 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-7.9%) to 41.516%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/components/AnalysisUpsell.js	0	1	0.0%
packages/js/src/components/ImageSelectComponent.js	0	1	0.0%
packages/js/src/components/TaxonomyPicker.js	0	1	0.0%
packages/js/src/components/WincherKeyphrasesTable.js	1	2	50.0%
packages/js/src/components/WincherSEOPerformanceModal.js	0	1	0.0%
packages/js/src/components/higherorder/linkHiddenField.js	0	1	0.0%
packages/js/src/components/modals/WincherLimitReached.js	0	1	0.0%
packages/js/src/components/modals/WincherNoTrackedKeyphrasesAlert.js	0	1	0.0%
packages/js/src/components/slots/SlotWithDefault.js	0	1	0.0%
packages/js/src/first-time-configuration/tailwind-components/base/multi-line-text.js	0	1	0.0%

Totals
Change from base Build 746fea33b10507bab54594ca1fe3ceb646f3a90e:	-7.9%
Covered Lines:	22112
Relevant Lines:	49781

---

💛 - 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.

[igorschoester]

Note

Force pushed a rebase on trunk after the feature branches got merged

[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.

[igorschoester]

Note

Force pushed a rebase on trunk to solve merge conflict

[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.

[igorschoester]

Note

Force pushed a rebase on trunk to solve merge conflict

[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.

[igorschoester]

Note

Force pushed a rebase on trunk to solve merge conflict

[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 ✅