Enhancement/4807 widget associated modules

assets/js/googlesitekit/widgets/datastore/__snapshots__/widgets.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`core/widgets Widgets actions registerWidget registers the component with the given settings and component 1`] = `
+exports[`core/widgets Widgets actions registerWidget should register the component with the given settings and component 1`] = `
 <div>
   Hello 
   world
@@ -11,6 +11,7 @@ exports[`core/widgets Widgets actions registerWidget registers the component wit
 exports[`core/widgets Widgets selectors getWidget returns a widget if one exists 1`] = `
 Object {
   "Component": [Function],
+  "modules": Array [],
   "priority": 10,
   "slug": "TestWidget",
   "width": "quarter",

assets/js/googlesitekit/widgets/datastore/widgets.js

@@ -20,12 +20,13 @@
  * External dependencies
  */
 import invariant from 'invariant';
+import intersection from 'lodash/intersection';
 
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { isInactiveWidgetState } from '../util/is-inactive-widget-state';
+import { isInactiveWidgetState, normalizeWidgetModules } from '../util';
 import { CORE_WIDGETS, WIDGET_WIDTHS } from './constants';
 
 const { createRegistrySelector } = Data;
@@ -79,6 +80,7 @@ export const actions = {
 	 * @param {number}                [settings.priority]   Optional. Widget's priority for ordering (lower number is higher priority, like WordPress hooks). Default is: 10.
 	 * @param {string|Array.<string>} [settings.width]      Optional. Widget's maximum width to occupy. Default is: "quarter". One of: "quarter", "half", "full".
 	 * @param {boolean}               [settings.wrapWidget] Optional. Whether to wrap the component with the <Widget> wrapper. Default is: true.
+	 * @param {string|Array.<string>} [settings.modules]    Optional. Widget's associated moduels.
 	 * @return {Object} Redux-style action.
 	 */
 	registerWidget(
@@ -88,6 +90,7 @@ export const actions = {
 			priority = 10,
 			width = WIDGET_WIDTHS.QUARTER,
 			wrapWidget = true,
+			modules,
 		} = {}
 	) {
 		const allWidths = Object.values( WIDGET_WIDTHS );
@@ -108,6 +111,7 @@ export const actions = {
 					priority,
 					width,
 					wrapWidget,
+					modules: normalizeWidgetModules( modules ),
 				},
 			},
 			type: REGISTER_WIDGET,
@@ -305,20 +309,36 @@ export const selectors = {
 	 *
 	 * @since 1.9.0
 	 *
-	 * @param {Object} state          Data store's state.
-	 * @param {string} widgetAreaSlug Widget context to get areas for.
+	 * @param {Object}                state             Data store's state.
+	 * @param {string}                widgetAreaSlug    Widget context to get areas for.
+	 * @param {Object}                options           Widgets selection options.
+	 * @param {string|Array.<string>} [options.modules] Optional. Widget's associated moduels.
 	 * @return {Array} An ordered array of widgets for this area.
 	 */
-	getWidgets( state, widgetAreaSlug ) {
+	getWidgets( state, widgetAreaSlug, { modules } = {} ) {
 		invariant( widgetAreaSlug, 'widgetAreaSlug is required.' );
 
-		const { areaAssignments, widgets } = state;
+		const { areaAssignments } = state;
 
-		return Object.values( widgets )
-			.filter( ( widget ) =>
-				areaAssignments[ widgetAreaSlug ]?.includes( widget.slug )
-			)
-			.sort( ( a, b ) => a.priority - b.priority );
+		let widgets = Object.values( state.widgets ).filter( ( widget ) =>
+			areaAssignments[ widgetAreaSlug ]?.includes( widget.slug )
+		);
+
+		if ( modules ) {
+			const allowedModules = normalizeWidgetModules( modules );
+			widgets = widgets.filter( ( widget ) => {
+				if ( ! widget.modules?.length ) {
+					return true;
+				}
+
+				return (
+					intersection( widget.modules, allowedModules ).length ===
+					allowedModules.length
+				);
+			} );
+		}
+
+		return widgets.sort( ( a, b ) => a.priority - b.priority );
 	},
 
 	/**

assets/js/googlesitekit/widgets/datastore/widgets.test.js

@@ -183,13 +183,13 @@ describe( 'core/widgets Widgets', () => {
 				return <div>Hello { props.children }!</div>;
 			};
 
-			it( 'requires a component to be provided', () => {
+			it( 'should require a component to be provided', () => {
 				expect( () =>
 					registry.dispatch( CORE_WIDGETS ).registerWidget( slug )
 				).toThrow( 'component is required to register a widget.' );
 			} );
 
-			it( 'requires a valid width to be provided', () => {
+			it( 'should require a valid width to be provided', () => {
 				expect( () =>
 					registry.dispatch( CORE_WIDGETS ).registerWidget( slug, {
 						Component: WidgetComponent,
@@ -198,16 +198,21 @@ describe( 'core/widgets Widgets', () => {
 				).toThrow( 'Widget width should be one of' );
 			} );
 
-			it( 'registers the component with the given settings and component', () => {
+			it( 'should register the component with the given settings and component', () => {
 				registry.dispatch( CORE_WIDGETS ).registerWidget( slug, {
 					Component: WidgetComponent,
 					priority: 11,
+					modules: [ 'analytics', 'tag-manager' ],
 				} );
 
-				expect( store.getState().widgets[ slug ].Component ).toBe(
-					WidgetComponent
-				);
-				expect( store.getState().widgets[ slug ].priority ).toBe( 11 );
+				const { widgets } = store.getState();
+
+				expect( widgets[ slug ].Component ).toEqual( WidgetComponent );
+				expect( widgets[ slug ].priority ).toBe( 11 );
+				expect( widgets[ slug ].modules ).toEqual( [
+					'analytics',
+					'tag-manager',
+				] );
 
 				// Ensure we can render a component with the widget's component, verifying it's still a
 				// usable React component.
@@ -216,7 +221,7 @@ describe( 'core/widgets Widgets', () => {
 				expect( container.firstChild ).toMatchSnapshot();
 			} );
 
-			it( 'does not overwrite an existing widget', () => {
+			it( 'should not overwrite an existing widget', () => {
 				const WidgetOne = () => {
 					return <div>Hello world!</div>;
 				};
@@ -258,7 +263,7 @@ describe( 'core/widgets Widgets', () => {
 				expect( widgets ).toEqual( [] );
 			} );
 
-			it( "should return all widgets for a given widgetAreaSlug after they're registered", () => {
+			it( 'should return all widgets for a given widgetAreaSlug after they are registered', () => {
 				const PageViews = () => {
 					return <div>Ten people viewed your page!</div>;
 				};
@@ -383,6 +388,51 @@ describe( 'core/widgets Widgets', () => {
 
 				expect( widgets ).toHaveLength( 1 );
 			} );
+
+			it( 'should return widgets for provided modules', () => {
+				const Component = () => <div>Hello test.</div>;
+
+				registry
+					.dispatch( CORE_WIDGETS )
+					.assignWidgetArea( 'dashboard-header', 'dashboard' );
+
+				[
+					{
+						Component,
+						modules: [ 'analytics', 'tag-manager' ],
+					},
+					{
+						Component,
+						modules: [ 'tag-manager' ],
+					},
+					{
+						Component,
+						modules: [ 'analytics' ],
+					},
+					{
+						Component,
+					},
+				].forEach( ( widget, i ) => {
+					const slug = `TestWidget${ i }`;
+
+					registry
+						.dispatch( CORE_WIDGETS )
+						.registerWidget( slug, widget );
+					registry
+						.dispatch( CORE_WIDGETS )
+						.assignWidget( slug, 'dashboard-header' );
+				} );
+
+				const widgets = registry
+					.select( CORE_WIDGETS )
+					.getWidgets( 'dashboard-header', {
+						modules: [ 'analytics', 'tag-manager' ],
+					} );
+
+				expect( widgets ).toHaveLength( 2 );
+				expect( widgets[ 0 ].slug ).toBe( 'TestWidget0' );
+				expect( widgets[ 1 ].slug ).toBe( 'TestWidget3' );
+			} );
 		} );
 
 		describe( 'isWidgetActive', () => {

assets/js/googlesitekit/widgets/index.js

@@ -82,13 +82,14 @@ export function createWidgets( registry ) {
 		 *
 		 * @since 1.9.0
 		 *
-		 * @param {string}         slug                Widget's slug.
-		 * @param {Object}         settings            Widget's settings.
-		 * @param {WPComponent}    settings.Component  React component used to display the contents of this widget.
-		 * @param {number}         settings.priority   Optional. Widget's priority for ordering (lower number is higher priority, like WordPress hooks). Default is: 10.
-		 * @param {string}         settings.width      Optional. Widget's maximum width to occupy. Default is: "quarter". One of: "quarter", "half", "full".
-		 * @param {boolean}        settings.wrapWidget Optional. Whether to wrap the component with the <Widget> wrapper. Default is: true.
-		 * @param {(string|Array)} [widgetAreaSlugs]   Optional. Widget area slug(s).
+		 * @param {string}                slug                  Widget's slug.
+		 * @param {Object}                settings              Widget's settings.
+		 * @param {WPComponent}           settings.Component    React component used to display the contents of this widget.
+		 * @param {number}                [settings.priority]   Optional. Widget's priority for ordering (lower number is higher priority, like WordPress hooks). Default is: 10.
+		 * @param {string|Array.<string>} [settings.width]      Optional. Widget's maximum width to occupy. Default is: "quarter". One of: "quarter", "half", "full".
+		 * @param {boolean}               [settings.wrapWidget] Optional. Whether to wrap the component with the <Widget> wrapper. Default is: true.
+		 * @param {string|Array.<string>} [settings.modules]    Optional. Widget's associated moduels.
+		 * @param {(string|Array)}        [widgetAreaSlugs]     Optional. Widget area slug(s).
 		 */
 		registerWidget( slug, settings, widgetAreaSlugs ) {
 			dispatch( CORE_WIDGETS ).registerWidget( slug, settings );

assets/js/googlesitekit/widgets/util/index.js

@@ -20,3 +20,5 @@ export * from './get-widget-layout';
 export * from './combine-widgets';
 export * from './get-widget-component-props';
 export * from './constants';
+export * from './widget-modules';
+export * from './is-inactive-widget-state';

assets/js/googlesitekit/widgets/util/widget-modules.js

@@ -0,0 +1,31 @@
+/**
+ * Widget's modules utility.
+ *
+ * Site Kit by Google, Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Normalizes widget's modules by converting it to an array and filtering out all non-string values.
+ *
+ * @since n.e.x.t
+ *
+ * @param {string|Array.<string>} modules Widget's mdoules.
+ * @return {Array.<string>} Widget's modules list.
+ */
+export function normalizeWidgetModules( modules ) {
+	return ( Array.isArray( modules ) ? modules : [ modules ] ).filter(
+		( module ) => typeof module === 'string' && module.length > 0
+	);
+}

assets/js/googlesitekit/widgets/util/widget-modules.test.js

@@ -0,0 +1,55 @@
+/**
+ * Widget's modules utility tests.
+ *
+ * Site Kit by Google, Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { normalizeWidgetModules } from './widget-modules';
+
+describe( 'normalizeWidgetModules', () => {
+	it.each( [
+		[ 'undefined', undefined ],
+		[ 'an int', 10 ],
+		[ 'a boolean', true ],
+		[ 'a float', 1.0 ],
+		[ 'a function', () => {} ],
+		[ 'an object', {} ],
+		[ 'an empty string', '' ],
+		[ 'an empty array', [] ],
+	] )( 'should return an empty array for %s', ( _, modules ) => {
+		expect( normalizeWidgetModules( modules ) ).toHaveLength( 0 );
+	} );
+
+	it( 'should return an array of strings when a single string is provided', () => {
+		const modules = normalizeWidgetModules( 'analytics' );
+		expect( modules ).toHaveLength( 1 );
+		expect( modules[ 0 ] ).toBe( 'analytics' );
+	} );
+
+	it( 'should return an array with non empty modules', () => {
+		const modules = normalizeWidgetModules( [
+			'analytics',
+			'',
+			false,
+			'tag-manager',
+		] );
+		expect( modules ).toHaveLength( 2 );
+		expect( modules[ 0 ] ).toBe( 'analytics' );
+		expect( modules[ 1 ] ).toBe( 'tag-manager' );
+	} );
+} );