Create frontend providers and widget factory #22008

igorschoester · 2025-01-30T16:25:08Z

Context

Summary

This PR can be summarized in the following changelog entry:

Refactors the dashboard widgets to get their behavior via a widget factory.
Adds the top pages widget.

Relevant technical choices:

Remove inner knowledge of widgets from the dashboard into a widget factory that knows how to supply the widgets with what they need
Add data provider to control data knowledge.
Add remote data provider to control how to fetch data.
I added some comments on my code as food for thought

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Enable the site kit feature flag
Ensure you get Site kit data and have it connected
Go to the dashboard
Verify you see the widget for "Top 5 most popular content"
Verify you get the loading (skeleton loader)
Verify you get the no data alert when there is no data (no clue how to do that without changing code)
Verify you get the error alert when an error occurs (block in inspector?)

Regression for scores

The score fetching is refactored to go through the data providers.

Ensure the score fetching is still functioning as before
Turn of the seo analysis feature
Verify the seo scores widget is not there
Turn off the readability analysis feature
Verify the readability widget is not there
Turn both features on again
Disable indexables (using the filter: add_filter( 'Yoast\WP\SEO\should_index_indexables', '__return_false' );)
Verify both score widgets are not there

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:

regression for score widgets

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/367

igorschoester · 2025-01-30T16:31:01Z

packages/js/src/dashboard/services/widget-factory.js

+	/**
+	 * @returns {WidgetTypeInfo[]}
+	 */
+	static get widgetTypes() {
+		return [
+			{ type: "seoScores" },
+			{ type: "readabilityScores" },
+			{ type: "topPages" },
+		];
+	}


Maybe remove? As it is not needed yet, if ever

igorschoester · 2025-01-30T16:31:43Z

packages/js/src/general/initialize.js

@@ -75,11 +83,10 @@ domReady( () => {
 					element={
 						<SidebarLayout>
 							<Dashboard
-								contentTypes={ contentTypes }
+								widgetFactory={ widgetFactory }
+								initialWidgets={ [ "seoScores", "readabilityScores", "topPages" ] }


Need feature flag check before adding topPages

igorschoester · 2025-01-30T16:32:34Z

packages/js/src/dashboard/components/dashboard.js

+	const removeWidget = useCallback( ( type ) => {
+		setWidgets( ( currentWidgets ) => currentWidgets.filter( ( widget ) => widget.type !== type ) );
+	}, [] );
+
 	return (
 		<>
 			<PageTitle userName={ userName } features={ features } links={ links } />


Should this be a widget too?

igorschoester · 2025-01-30T16:34:06Z

packages/js/src/dashboard/services/widget-factory.js

+	 * @returns {JSX.Element|null} The widget or null.
+	 */
+	// eslint-disable-next-line no-unused-vars
+	createWidget( widget, onRemove ) {


onRemove is not yet used. Should be under the widget menu eventually, right?

Probably nice to have some RemoveWidget base that handles this in the future?

igorschoester · 2025-01-30T16:35:12Z

packages/js/src/dashboard/services/widget-factory.js

+	createWidget( widget, onRemove ) {
+		switch ( widget.type ) {
+			case "seoScores":
+				if ( ! this.#dataProvider.hasFeature( "indexables" ) && this.#dataProvider.hasFeature( "seoAnalysis" ) ) {


Should this move into the Widget? And is it worth an Widget layer if more need this?

igorschoester · 2025-02-03T09:43:38Z

packages/js/src/dashboard/scores/components/scores.js

+/**
+ * @param {ContentType?} [contentType] The selected content type.
+ * @param {Term?} [term] The selected term.
+ * @returns {{contentType: string, taxonomy?: string, term?: string}} The score query parameters.
+ */
+const getScoreQueryParams = ( contentType, term ) => { // eslint-disable-line complexity
+	const params = {
+		contentType: contentType?.name,
+	};
+	if ( contentType?.taxonomy?.name && term?.name ) {
+		params.taxonomy = contentType.taxonomy.name;
+		params.term = term.name;
+	}
+
+	return params;
+};
+
+/**
+ * @param {?{scores: Score[]}} [data] The data.
+ * @returns {?Score[]} scores The scores.
+ */
+const prepareScoreData = ( data ) => data?.scores;


These might be moved to the dataProvider or props at a later stage, to actually make it reusable

igorschoester · 2025-02-03T09:45:06Z

packages/js/src/dashboard/components/most-popular-table.js

Renamed and moved into the top-pages-widget

igorschoester · 2025-02-03T09:45:30Z

packages/js/src/dashboard/services/use-remote-data.js

Seems like a friendly hook for more data/error/isPending widgets. However, I'm not sure how caching/debouncing should be incorperated yet.

Initial setup for architecture change * move data into data provider * use widget factory to create score widgets

...for the score retrieval * use base Widget * use data provider to get the endpoint * use remote data provider to fetch the scores * remove endpoint and headers

...to use the data provider. This fixes a bug where the admin.php would be hardcoded instead of retrieved from WP. Bonus: a little safeguard against mismatching translation tags.

Add the widget only when site kit is enabled, active and connected. Though the last part is not yet available, so commented that out and replaced with true for now.

igorschoester · 2025-02-03T15:09:15Z

packages/js/src/general/initialize.js

+		get( window, "wpseoScriptData.dashboard.siteKitConfiguration.feature_enabled", false ) &&
+		get( window, "wpseoScriptData.dashboard.siteKitConfiguration.isActive", false ) &&
+		// get( window, "wpseoScriptData.dashboard.siteKitConfiguration.isConnected", false )


Needs adaptation after: d7065dd is merged

igorschoester added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Jan 30, 2025

igorschoester commented Jan 30, 2025

View reviewed changes

Fix route naming conflict

029a283

igorschoester force-pushed the 420-create-frontend-data-provider-and-wp-implementation branch 3 times, most recently from 5f59d8d to d53e0ea Compare February 3, 2025 09:42

igorschoester commented Feb 3, 2025

View reviewed changes

packages/js/src/dashboard/components/most-popular-table.js Outdated

Copy link

Member Author

igorschoester Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed and moved into the top-pages-widget

igorschoester commented Feb 3, 2025

View reviewed changes

Yoast deleted a comment from coveralls Feb 3, 2025

igorschoester force-pushed the 420-create-frontend-data-provider-and-wp-implementation branch 2 times, most recently from a5b0191 to 7d5224e Compare February 3, 2025 11:20

igorschoester added 6 commits February 3, 2025 14:41

Create services: data provider and widget factory

509e6bf

Initial setup for architecture change * move data into data provider * use widget factory to create score widgets

Add top pages widget

f9b77f8

Add remote data provider

1f7380e

Refactor Scores to use the data providers

64a0499

...for the score retrieval * use base Widget * use data provider to get the endpoint * use remote data provider to fetch the scores * remove endpoint and headers

Refactor Score support link

2cf80f3

...to use the data provider. This fixes a bug where the admin.php would be hardcoded instead of retrieved from WP. Bonus: a little safeguard against mismatching translation tags.

Add site kit configuration

272906b

Add the widget only when site kit is enabled, active and connected. Though the last part is not yet available, so commented that out and replaced with true for now.

igorschoester force-pushed the 420-create-frontend-data-provider-and-wp-implementation branch 2 times, most recently from dace88b to 3e63593 Compare February 3, 2025 14:23

igorschoester marked this pull request as ready for review February 3, 2025 14:31

igorschoester added 2 commits February 3, 2025 15:35

Add widget factory tests

936756d

Add top pages widget test

aa075c5

igorschoester force-pushed the 420-create-frontend-data-provider-and-wp-implementation branch from 3e63593 to aa075c5 Compare February 3, 2025 14:35

igorschoester commented Feb 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create frontend providers and widget factory #22008

Create frontend providers and widget factory #22008

igorschoester commented Jan 30, 2025 •

edited

Loading

igorschoester Jan 30, 2025 •

edited

Loading

igorschoester Jan 30, 2025

igorschoester Jan 30, 2025

igorschoester Jan 30, 2025

igorschoester Jan 30, 2025

igorschoester Feb 3, 2025 •

edited

Loading

igorschoester Feb 3, 2025

igorschoester Feb 3, 2025

igorschoester Feb 3, 2025

Create frontend providers and widget factory #22008

Are you sure you want to change the base?

Create frontend providers and widget factory #22008

Conversation

igorschoester commented Jan 30, 2025 • edited Loading

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Regression for scores

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

UI changes

Other environments

Documentation

Quality assurance

Innovation

igorschoester Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

igorschoester Jan 30, 2025

Choose a reason for hiding this comment

igorschoester Jan 30, 2025

Choose a reason for hiding this comment

igorschoester Jan 30, 2025

Choose a reason for hiding this comment

igorschoester Jan 30, 2025

Choose a reason for hiding this comment

igorschoester Feb 3, 2025 • edited Loading

Choose a reason for hiding this comment

igorschoester Feb 3, 2025

Choose a reason for hiding this comment

igorschoester Feb 3, 2025

Choose a reason for hiding this comment

igorschoester Feb 3, 2025

Choose a reason for hiding this comment

igorschoester commented Jan 30, 2025 •

edited

Loading

igorschoester Jan 30, 2025 •

edited

Loading

igorschoester Feb 3, 2025 •

edited

Loading