Improve experience with recoverable modules for view-only users.

assets/js/components/RecoverableModules.js

@@ -0,0 +1,84 @@
+/**
+ * RecoverableModules component.
+ *
+ * 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.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_MODULES } from '../googlesitekit/modules/datastore/constants';
+import CTA from './notifications/CTA';
+
+const { useSelect } = Data;
+
+export default function RecoverableModules( { moduleSlugs } ) {
+	const moduleNames = useSelect( ( select ) => {
+		const modules = select( CORE_MODULES ).getModules();
+
+		if ( modules === undefined ) {
+			return undefined;
+		}
+
+		return moduleSlugs.map( ( moduleSlug ) => modules[ moduleSlug ].name );
+	} );
+
+	if ( moduleNames === undefined ) {
+		return null;
+	}
+
+	const description =
+		moduleNames.length === 1
+			? sprintf(
+					/* translators: %s: Module name */
+					__(
+						'%s data was previously shared by an admin who no longer has access. Please contact another admin to restore it.',
+						'google-site-kit'
+					),
+					moduleNames[ 0 ]
+			  )
+			: sprintf(
+					/* translators: %s: List of module names */
+					__(
+						'The data for the following modules was previously shared by an admin who no longer has access: %s. Please contact another admin to restore it.',
+						'google-site-kit'
+					),
+					moduleNames.join(
+						_x( ', ', 'Recoverable modules', 'google-site-kit' )
+					)
+			  );
+
+	return (
+		<CTA
+			title={ __( 'Data Unavailable', 'google-site-kit' ) }
+			description={ description }
+		/>
+	);
+}
+
+RecoverableModules.propTypes = {
+	moduleSlugs: PropTypes.arrayOf( PropTypes.string ).isRequired,
+};

assets/js/googlesitekit/modules/datastore/modules.js

@@ -100,6 +100,29 @@ const normalizeModules = memize( ( serverDefinitions, clientDefinitions ) => {
 		}, {} );
 } );
 
+/**
+ * Gets a memoized object mapping recoverable module slugs to their corresponding
+ * module objects.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Object} modules            Module definitions.
+ * @param {Array}  recoverableModules Array of recoverable module slugs.
+ * @return {Object} Map of recoverable module slugs to their corresponding module objects.
+ */
+const calculateRecoverableModules = memize( ( modules, recoverableModules ) =>
+	Object.values( modules ).reduce( ( recoverable, module ) => {
+		if ( recoverableModules.includes( module.slug ) ) {
+			return {
+				...recoverable,
+				[ module.slug ]: module,
+			};
+		}
+
+		return recoverable;
+	}, {} )
+);
+
 const fetchGetModulesStore = createFetchStore( {
 	baseName: 'getModules',
 	controlCallback: () => {
@@ -1244,19 +1267,7 @@ const baseSelectors = {
 			return undefined;
 		}
 
-		return Object.values( modules ).reduce(
-			( recoverableModules, module ) => {
-				if ( state.recoverableModules.includes( module.slug ) ) {
-					return {
-						...recoverableModules,
-						[ module.slug ]: module,
-					};
-				}
-
-				return recoverableModules;
-			},
-			{}
-		);
+		return calculateRecoverableModules( modules, state.recoverableModules );
 	} ),
 
 	/**

assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.test.js

@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import { getByText } from '@testing-library/dom';
+
 /**
  * Internal dependencies
  */
@@ -27,6 +32,7 @@ import {
 	WIDGET_AREA_STYLES,
 } from '../datastore/constants';
 import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
+import { CORE_MODULES } from '../../modules/datastore/constants';
 import {
 	createTestRegistry,
 	render,
@@ -90,6 +96,7 @@ describe( 'WidgetAreaRenderer', () => {
 
 	beforeEach( async () => {
 		registry = createTestRegistryWithArea( areaName );
+
 		const connection = { connected: true };
 		await registry.dispatch( CORE_SITE ).receiveGetConnection( connection );
 	} );
@@ -702,4 +709,67 @@ describe( 'WidgetAreaRenderer', () => {
 			)
 		).toHaveLength( 1 );
 	} );
+
+	it( 'should combine multiple widgets in RecoverableModules state with the same metadata into a single widget', () => {
+		provideModules( registry );
+		registry
+			.dispatch( CORE_MODULES )
+			.receiveRecoverableModules( [ 'search-console' ] );
+
+		provideUserCapabilities( registry, {
+			[ PERMISSION_VIEW_DASHBOARD ]: true,
+			[ `${ PERMISSION_READ_SHARED_MODULE_DATA }::["search-console"]` ]: true,
+		} );
+
+		createWidgets( registry, areaName, [
+			{
+				Component: WidgetComponent,
+				slug: 'one',
+				modules: [ 'search-console' ],
+			},
+			{
+				Component: WidgetComponent,
+				slug: 'two',
+				modules: [ 'search-console' ],
+			},
+		] );
+
+		const { container } = render(
+			<WidgetAreaRenderer slug={ areaName } />,
+			{
+				registry,
+				viewContext: VIEW_CONTEXT_DASHBOARD_VIEW_ONLY,
+				features: [ 'dashboardSharing' ],
+			}
+		);
+
+		const visibleWidgetSelector =
+			'.googlesitekit-widget-area-widgets > .mdc-layout-grid__inner > .mdc-layout-grid__cell > .googlesitekit-widget';
+
+		// There should be a single visible widget.
+		expect(
+			container.firstChild.querySelectorAll( visibleWidgetSelector )
+		).toHaveLength( 1 );
+
+		// The visible widget should be rendered as the RecoverableModules component.
+		expect(
+			getByText(
+				container.firstChild.querySelector( visibleWidgetSelector ),
+				'Search Console data was previously shared by an admin who no longer has access. Please contact another admin to restore it.'
+			)
+		).toBeInTheDocument();
+
+		// There should also be a hidden widget.
+		expect(
+			container.firstChild.querySelectorAll(
+				'.googlesitekit-widget-area-widgets .googlesitekit-hidden .googlesitekit-widget'
+			)
+		).toHaveLength( 1 );
+
+		expect(
+			container.firstChild.querySelector(
+				'.googlesitekit-widget-area-widgets'
+			)
+		).toMatchSnapshot();
+	} );
 } );

assets/js/googlesitekit/widgets/components/WidgetRecoverableModules.js

@@ -0,0 +1,62 @@
+/**
+ * WidgetRecoverableModules component.
+ *
+ * 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.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useWidgetStateEffect from '../hooks/useWidgetStateEffect';
+import RecoverableModules from '../../../components/RecoverableModules';
+
+// The supported props must match `RecoverableModules` (except `widgetSlug`).
+export default function WidgetRecoverableModules( {
+	widgetSlug,
+	moduleSlugs,
+	...props
+} ) {
+	const metadata = useMemo(
+		() => ( {
+			// Here we serialize to `moduleSlug` for compatibility with the logic in
+			// `combineWidgets()`. In future we may wish to take a less "hacky" approach.
+			// See https://github.com/google/site-kit-wp/issues/5376#issuecomment-1165771399.
+			moduleSlug: [ ...moduleSlugs ].sort().join( ',' ),
+			// We also store `moduleSlugs` in the metadata in order for it to be passed back
+			// into RecoverableModules as a prop.
+			// See https://github.com/google/site-kit-wp/blob/c272c20eddcca61aae24c9812b6b11dbc15ec673/assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js#L171.
+			moduleSlugs,
+		} ),
+		[ moduleSlugs ]
+	);
+	useWidgetStateEffect( widgetSlug, RecoverableModules, metadata );
+
+	return <RecoverableModules moduleSlugs={ moduleSlugs } { ...props } />;
+}
+
+WidgetRecoverableModules.propTypes = {
+	widgetSlug: PropTypes.string.isRequired,
+	...RecoverableModules.propTypes,
+};

assets/js/googlesitekit/widgets/components/WidgetRenderer.js

@@ -20,30 +20,52 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import intersection from 'lodash/intersection';
 
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { useMemo, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
 import { CORE_WIDGETS } from '../datastore/constants';
+import { CORE_MODULES } from '../../modules/datastore/constants';
 import BaseWidget from './Widget';
+import WidgetRecoverableModules from './WidgetRecoverableModules';
 import { getWidgetComponentProps } from '../util';
 import { HIDDEN_CLASS } from '../util/constants';
+import useViewOnly from '../../../hooks/useViewOnly';
+import { useFeature } from '../../../hooks/useFeature';
 
 const { useSelect } = Data;
 
 const WidgetRenderer = ( { slug, OverrideComponent } ) => {
+	const dashboardSharingEnabled = useFeature( 'dashboardSharing' );
+
 	const widget = useSelect( ( select ) =>
 		select( CORE_WIDGETS ).getWidget( slug )
 	);
 	const widgetComponentProps = getWidgetComponentProps( slug );
 	const { Widget, WidgetNull } = widgetComponentProps;
 
+	const recoverableModules = useSelect(
+		( select ) =>
+			dashboardSharingEnabled &&
+			select( CORE_MODULES ).getRecoverableModules()
+	);
+
+	const viewOnly = useViewOnly();
+	const widgetRecoverableModules = useMemo(
+		() =>
+			widget &&
+			recoverableModules &&
+			intersection( widget.modules, Object.keys( recoverableModules ) ),
+		[ recoverableModules, widget ]
+	);
+
 	if ( ! widget ) {
 		return <WidgetNull />;
 	}
@@ -52,6 +74,15 @@ const WidgetRenderer = ( { slug, OverrideComponent } ) => {
 
 	let widgetElement = <Component { ...widgetComponentProps } />;
 
+	if ( viewOnly && widgetRecoverableModules?.length ) {
+		widgetElement = (
+			<WidgetRecoverableModules
+				widgetSlug={ slug }
+				moduleSlugs={ widgetRecoverableModules }
+			/>
+		);
+	}
+
 	if ( OverrideComponent ) {
 		// If OverrideComponent passed, render it instead of the actual widget.
 		// It always needs to be wrapped as it is expected to be a