Issue / 9284 Refactor AuthError Error Notification to Use New Notifications Datastore

assets/js/components/notifications/AuthError.js

@@ -26,24 +26,32 @@ import { __ } from '@wordpress/i18n';
  */
 import { useSelect } from 'googlesitekit-data';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
-import BannerNotification from './BannerNotification';
+import NotificationError from '../../googlesitekit/notifications/components/layout/NotificationError';
+import CTALink from '../../googlesitekit/notifications/components/common/CTALink';
+import Description from '../../googlesitekit/notifications/components/common/Description';
 
-export default function AuthError() {
+export default function AuthError( { id, Notification } ) {
 	const error = useSelect( ( select ) => select( CORE_USER ).getAuthError() );
-	if ( ! error ) {
-		return null;
-	}
 
 	return (
-		<BannerNotification
-			id="autherror"
-			title={ __(
-				'Site Kit can’t access necessary data',
-				'google-site-kit'
-			) }
-			description={ error.message }
-			ctaLink={ error.data.reconnectURL }
-			ctaLabel={ __( 'Redo the plugin setup', 'google-site-kit' ) }
-		/>
+		<Notification className="googlesitekit-publisher-win googlesitekit-publisher-win--win-error">
+			<NotificationError
+				title={ __(
+					'Site Kit can’t access necessary data',
+					'google-site-kit'
+				) }
+				description={ <Description text={ error.message } /> }
+				actions={
+					<CTALink
+						id={ id }
+						ctaLabel={ __(
+							'Redo the plugin setup',
+							'google-site-kit'
+						) }
+						ctaLink={ error.data.reconnectURL }
+					/>
+				}
+			/>
+		</Notification>
 	);
 }

assets/js/components/notifications/AuthError.stories.js

@@ -0,0 +1,73 @@
+/**
+ * AuthError Component Stories.
+ *
+ * Site Kit by Google, Copyright 2024 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 WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import { provideUserAuthentication } from '../../../../tests/js/utils';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import AuthError from './AuthError';
+import { withNotificationComponentProps } from '../../googlesitekit/notifications/util/component-props';
+
+const NotificationWithComponentProps =
+	withNotificationComponentProps( 'auth-error' )( AuthError );
+
+function Template() {
+	return <NotificationWithComponentProps />;
+}
+
+export const AuthenticationError = Template.bind( {} );
+AuthenticationError.storyName = 'AuthError';
+AuthenticationError.args = {
+	setupRegistry: ( registry ) => {
+		provideUserAuthentication( registry );
+
+		const authError = {
+			code: 'missing_delegation_consent',
+			status: 401,
+			message:
+				'Looks like your site is not allowed access to Google account data and can’t display stats in the dashboard.',
+			data: {
+				reconnectURL: 'https://example.com/',
+			},
+		};
+
+		registry.dispatch( CORE_USER ).setAuthError( authError );
+	},
+};
+AuthenticationError.scenario = {
+	label: 'Components/Notifications/Banners/AuthError',
+};
+
+export default {
+	title: 'Components/Notifications/Banners',
+	decorators: [
+		( Story, { args } ) => {
+			const setupRegistry = ( registry ) => {
+				args.setupRegistry( registry );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

assets/js/components/notifications/ErrorNotifications.js

@@ -24,7 +24,6 @@ import { Fragment } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import AuthError from './AuthError';
 import InternalServerError from './InternalServerError';
 import Notifications from './Notifications';
 import { NOTIFICATION_AREAS } from '../../googlesitekit/notifications/datastore/constants';
@@ -33,7 +32,6 @@ export default function ErrorNotifications() {
 	return (
 		<Fragment>
 			<InternalServerError />
-			<AuthError />
 			<Notifications areaSlug={ NOTIFICATION_AREAS.ERRORS } />
 		</Fragment>
 	);

assets/js/googlesitekit/notifications/register-defaults.js

@@ -46,6 +46,7 @@ import {
 import { isZeroReport } from '../../modules/analytics-4/utils';
 import { MODULES_SEARCH_CONSOLE } from '../../modules/search-console/datastore/constants';
 import { READ_SCOPE as TAGMANAGER_READ_SCOPE } from '../../modules/tagmanager/datastore/constants';
+import AuthError from '../../components/notifications/AuthError';
 import UnsatisfiedScopesAlert from '../../components/notifications/UnsatisfiedScopesAlert';
 import UnsatisfiedScopesAlertGTE from '../../components/notifications/UnsatisfiedScopesAlertGTE';
 import GatheringDataNotification from '../../components/notifications/GatheringDataNotification';
@@ -566,6 +567,29 @@ export const DEFAULT_NOTIFICATIONS = {
 			);
 		},
 	},
+	'auth-error': {
+		Component: AuthError,
+		priority: 130,
+		areaSlug: NOTIFICATION_AREAS.ERRORS,
+		viewContexts: [
+			VIEW_CONTEXT_MAIN_DASHBOARD,
+			VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
+			VIEW_CONTEXT_ENTITY_DASHBOARD,
+			VIEW_CONTEXT_ENTITY_DASHBOARD_VIEW_ONLY,
+			VIEW_CONTEXT_SETTINGS,
+		],
+		checkRequirements: async ( { select, resolveSelect } ) => {
+			await Promise.all( [
+				// The getAuthError() selector relies on the resolution of getAuthentication().
+				resolveSelect( CORE_USER ).getAuthentication(),
+			] );
+
+			const error = select( CORE_USER ).getAuthError();
+
+			return !! error;
+		},
+		isDismissible: false,
+	},
 };
 
 /**