KMW / 7465 Implement Insufficient Permissions Error CTA on KMW Tiles

assets/js/components/KeyMetrics/MetricTileError/GetHelpLink.js

@@ -0,0 +1,42 @@
+/**
+ * GetHelpLink component.
+ *
+ * Site Kit by Google, Copyright 2023 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Link from '../../Link';
+
+export default function GetHelpLink( { linkURL } ) {
+	return createInterpolateElement(
+		/* translators: %s: get help text. */
+		__( 'Trouble getting access? <HelpLink />', 'google-site-kit' ),
+		{
+			HelpLink: (
+				<Link href={ linkURL } external>
+					{ __( 'Get help', 'google-site-kit' ) }
+				</Link>
+			),
+		}
+	);
+}

assets/js/components/KeyMetrics/MetricTileError.js → assets/js/components/KeyMetrics/MetricTileError/index.js

@@ -19,37 +19,49 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import { castArray } from 'lodash';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import CTA from '../notifications/CTA';
-import ReportErrorActions from '../ReportErrorActions';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import CTA from '../../notifications/CTA';
+import ReportErrorActions from '../../ReportErrorActions';
+import GetHelpLink from './GetHelpLink';
+import { isInsufficientPermissionsError } from '../../../util/errors';
+
 export default function MetricTileError( props ) {
 	const { error, headerText, moduleSlug } = props;
+	const hasInsufficientPermissionsError = castArray( error ).some(
+		isInsufficientPermissionsError
+	);
 
 	return (
 		<div className="googlesitekit-km-widget-tile--error">
 			<CTA
-				title={ __( 'Data loading failed', 'google-site-kit' ) }
+				title={
+					hasInsufficientPermissionsError
+						? __( 'Insufficient permissions', 'google-site-kit' )
+						: __( 'Data loading failed', 'google-site-kit' )
+				}
 				headerText={ headerText }
 				description=""
 				error
 			>
-				<ReportErrorActions moduleSlug={ moduleSlug } error={ error } />
+				<ReportErrorActions
+					moduleSlug={ moduleSlug }
+					error={ error }
+					GetHelpLink={
+						hasInsufficientPermissionsError
+							? GetHelpLink
+							: undefined
+					}
+				/>
 			</CTA>
 		</div>
 	);
 }
-
-MetricTileError.propTypes = {
-	error: PropTypes.oneOfType( [
-		PropTypes.arrayOf( PropTypes.object ),
-		PropTypes.object,
-	] ).isRequired,
-	headerText: PropTypes.string,
-	moduleSlug: PropTypes.string.isRequired,
-};

assets/js/components/ReportErrorActions.js

@@ -47,7 +47,11 @@ import Link from './Link';
 
 const { useSelect, useDispatch } = Data;
 
-export default function ReportErrorActions( { moduleSlug, error } ) {
+export default function ReportErrorActions( {
+	moduleSlug,
+	error,
+	GetHelpLink,
+} ) {
 	const isViewOnly = useViewOnly();
 	const storeName = useSelect( ( select ) =>
 		select( CORE_MODULES ).getModuleStoreName( moduleSlug )
@@ -131,9 +135,15 @@ export default function ReportErrorActions( { moduleSlug, error } ) {
 					</span>
 				</Fragment>
 			) : (
-				<Link href={ errorTroubleshootingLinkURL } external>
-					{ __( 'Get help', 'google-site-kit' ) }
-				</Link>
+				<div>
+					{ typeof GetHelpLink === 'function' ? (
+						<GetHelpLink linkURL={ errorTroubleshootingLinkURL } />
+					) : (
+						<Link href={ errorTroubleshootingLinkURL } external>
+							{ __( 'Get help', 'google-site-kit' ) }
+						</Link>
+					) }
+				</div>
 			) }
 		</div>
 	);
@@ -145,4 +155,5 @@ ReportErrorActions.propTypes = {
 		PropTypes.arrayOf( PropTypes.object ),
 		PropTypes.object,
 	] ).isRequired,
+	GetHelpLink: PropTypes.elementType,
 };

assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.stories.js

@@ -21,6 +21,7 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 import { MODULES_ANALYTICS_4 } from '../../datastore/constants';
 import {
 	provideKeyMetrics,
+	provideModuleRegistrations,
 	provideModules,
 } from '../../../../../../tests/js/utils';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
@@ -31,6 +32,8 @@ import {
 	provideAnalytics4MockReport,
 } from '../../utils/data-mock';
 import { replaceValuesInAnalytics4ReportWithZeroData } from '../../../../../../.storybook/utils/zeroReports';
+import { ERROR_REASON_INSUFFICIENT_PERMISSIONS } from '../../../../util/errors';
+import { MODULES_ANALYTICS } from '../../../analytics/datastore/constants';
 
 const reportOptions = {
 	compareStartDate: '2020-07-14',
@@ -125,6 +128,40 @@ Error.scenario = {
 	delay: 250,
 };
 
+export const InsufficientPermissions = Template.bind( {} );
+InsufficientPermissions.storyName = 'Insufficient Permissions';
+InsufficientPermissions.args = {
+	setupRegistry: ( { dispatch } ) => {
+		const errorObject = {
+			code: 403,
+			message: 'Test error message. ',
+			data: {
+				status: 403,
+				reason: ERROR_REASON_INSUFFICIENT_PERMISSIONS,
+			},
+			selectorData: {
+				storeName: 'modules/analytics-4',
+				name: 'getReport',
+				args: [ reportOptions ],
+			},
+		};
+
+		dispatch( MODULES_ANALYTICS_4 ).receiveError(
+			errorObject,
+			'getReport',
+			[ reportOptions ]
+		);
+
+		dispatch( MODULES_ANALYTICS_4 ).finishResolution( 'getReport', [
+			reportOptions,
+		] );
+	},
+};
+InsufficientPermissions.scenario = {
+	label: 'KeyMetrics/EngagedTrafficSource/InsufficientPermissions',
+	delay: 250,
+};
+
 export default {
 	title: 'Key Metrics/EngagedTrafficSourceWidget',
 	decorators: [
@@ -138,6 +175,24 @@ export default {
 					},
 				] );
 
+				provideModuleRegistrations( registry );
+
+				const [ accountID, propertyID, webDataStreamID ] = [
+					'12345',
+					'34567',
+					'56789',
+				];
+
+				registry
+					.dispatch( MODULES_ANALYTICS )
+					.setAccountID( accountID );
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setPropertyID( propertyID );
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setWebDataStreamID( webDataStreamID );
+
 				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
 
 				provideKeyMetrics( registry );

assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.stories.js

@@ -21,6 +21,7 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 import { MODULES_ANALYTICS_4 } from '../../datastore/constants';
 import {
 	provideKeyMetrics,
+	provideModuleRegistrations,
 	provideModules,
 } from '../../../../../../tests/js/utils';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
@@ -31,6 +32,8 @@ import {
 	provideAnalytics4MockReport,
 } from '../../utils/data-mock';
 import { replaceValuesInAnalytics4ReportWithZeroData } from '../../../../../../.storybook/utils/zeroReports';
+import { ERROR_REASON_INSUFFICIENT_PERMISSIONS } from '../../../../util/errors';
+import { MODULES_ANALYTICS } from '../../../analytics/datastore/constants';
 
 const reportOptions = {
 	compareStartDate: '2020-07-14',
@@ -129,6 +132,41 @@ Error.scenario = {
 	delay: 250,
 };
 
+export const InsufficientPermissions = Template.bind( {} );
+InsufficientPermissions.storyName = 'Insufficient Permissions';
+InsufficientPermissions.args = {
+	setupRegistry: ( { dispatch } ) => {
+		const errorObject = {
+			code: 403,
+			message: 'Test error message. ',
+			data: {
+				status: 403,
+				reason: ERROR_REASON_INSUFFICIENT_PERMISSIONS,
+			},
+			selectorData: {
+				storeName: 'modules/analytics-4',
+				name: 'getReport',
+				args: [ reportOptions ],
+			},
+		};
+
+		dispatch( MODULES_ANALYTICS_4 ).receiveError(
+			errorObject,
+			'getReport',
+			[ reportOptions ]
+		);
+
+		dispatch( MODULES_ANALYTICS_4 ).finishResolution( 'getReport', [
+			reportOptions,
+		] );
+	},
+};
+
+InsufficientPermissions.scenario = {
+	label: 'KeyMetrics/LoyalVisitors/InsufficientPermissions',
+	delay: 250,
+};
+
 export default {
 	title: 'Key Metrics/LoyalVisitors',
 	decorators: [
@@ -142,6 +180,24 @@ export default {
 					},
 				] );
 
+				provideModuleRegistrations( registry );
+
+				const [ accountID, propertyID, webDataStreamID ] = [
+					'12345',
+					'34567',
+					'56789',
+				];
+
+				registry
+					.dispatch( MODULES_ANALYTICS )
+					.setAccountID( accountID );
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setPropertyID( propertyID );
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setWebDataStreamID( webDataStreamID );
+
 				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
 
 				provideKeyMetrics( registry );

assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.stories.js

@@ -21,6 +21,7 @@
  */
 import {
 	provideKeyMetrics,
+	provideModuleRegistrations,
 	provideModules,
 } from '../../../../../../tests/js/utils';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
@@ -33,6 +34,8 @@ import {
 } from '../../utils/data-mock';
 import { replaceValuesInAnalytics4ReportWithZeroData } from '../../../../../../.storybook/utils/zeroReports';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+import { ERROR_REASON_INSUFFICIENT_PERMISSIONS } from '../../../../util/errors';
+import { MODULES_ANALYTICS } from '../../../analytics/datastore/constants';
 
 const reportOptions = {
 	compareStartDate: '2020-07-14',
@@ -131,6 +134,41 @@ Error.scenario = {
 	delay: 250,
 };
 
+export const InsufficientPermissions = Template.bind( {} );
+InsufficientPermissions.storyName = 'Insufficient Permissions';
+InsufficientPermissions.args = {
+	setupRegistry: ( { dispatch } ) => {
+		const errorObject = {
+			code: 403,
+			message: 'Test error message. ',
+			data: {
+				status: 403,
+				reason: ERROR_REASON_INSUFFICIENT_PERMISSIONS,
+			},
+			selectorData: {
+				storeName: 'modules/analytics-4',
+				name: 'getReport',
+				args: [ reportOptions ],
+			},
+		};
+
+		dispatch( MODULES_ANALYTICS_4 ).receiveError(
+			errorObject,
+			'getReport',
+			[ reportOptions ]
+		);
+
+		dispatch( MODULES_ANALYTICS_4 ).finishResolution( 'getReport', [
+			reportOptions,
+		] );
+	},
+};
+
+InsufficientPermissions.scenario = {
+	label: 'KeyMetrics/NewVisitors/InsufficientPermissions',
+	delay: 250,
+};
+
 export default {
 	title: 'Key Metrics/NewVisitors',
 	decorators: [
@@ -144,6 +182,24 @@ export default {
 					},
 				] );
 
+				provideModuleRegistrations( registry );
+
+				const [ accountID, propertyID, webDataStreamID ] = [
+					'12345',
+					'34567',
+					'56789',
+				];
+
+				registry
+					.dispatch( MODULES_ANALYTICS )
+					.setAccountID( accountID );
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setPropertyID( propertyID );
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setWebDataStreamID( webDataStreamID );
+
 				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
 
 				provideKeyMetrics( registry );