Add notice priorities to my jetpack notices (Automattic#36438)

* Add priority notices to My Jetpack

* Add comment to clarify condition

* changelog

projects/packages/my-jetpack/_inc/context/constants.ts

@@ -0,0 +1,3 @@
+export const NOTICE_PRIORITY_LOW = 100;
+export const NOTICE_PRIORITY_MEDIUM = 200;
+export const NOTICE_PRIORITY_HIGH = 300;

projects/packages/my-jetpack/_inc/context/notices/noticeContext.tsx

@@ -6,6 +6,7 @@ const defaultNotice: Notice = {
 	options: {
 		status: '',
 	},
+	priority: 0,
 };
 
 export const NoticeContext = createContext< NoticeContextType >( {
@@ -19,7 +20,8 @@ const NoticeContextProvider = ( { children } ) => {
 	const [ currentNotice, setCurrentNotice ] = useState< Notice >( defaultNotice );
 
 	const setNotice = ( notice: Notice ) => {
-		if ( ! currentNotice.message ) {
+		// Only update notice if there is not already a notice or the new notice has a higher priority
+		if ( ! currentNotice.message || notice.priority > currentNotice.priority ) {
 			setCurrentNotice( notice );
 		}
 	};

projects/packages/my-jetpack/_inc/context/notices/types.ts

@@ -10,6 +10,7 @@ export type Notice = {
 			noDefaultClasses?: boolean;
 		}[];
 	};
+	priority: number;
 };
 
 export type NoticeContextType< T = Notice > = {

projects/packages/my-jetpack/_inc/data/notices/use-fetching-error-notice.ts

@@ -1,5 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext, useEffect } from 'react';
+import { NOTICE_PRIORITY_LOW } from '../../context/constants';
 import { NoticeContext } from '../../context/notices/noticeContext';
 import {
 	QUERY_ACTIVATE_PRODUCT_KEY,
@@ -38,6 +39,7 @@ export const useFetchingErrorNotice = ( { infoName, isError, overrideMessage }:
 			setNotice( {
 				message,
 				options: { status: 'error' },
+				priority: NOTICE_PRIORITY_LOW,
 			} );
 		}
 	}, [ message, setNotice, isError, infoName ] );

projects/packages/my-jetpack/_inc/hooks/use-connection-watcher/index.ts

@@ -1,6 +1,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useContext } from 'react';
 import { MyJetpackRoutes } from '../../constants';
+import { NOTICE_PRIORITY_HIGH } from '../../context/constants';
 import { NoticeContext } from '../../context/notices/noticeContext';
 import { useAllProducts } from '../../data/products/use-product';
 import getProductSlugsThatRequireUserConnection from '../../data/utils/get-product-slugs-that-require-user-connection';
@@ -54,6 +55,7 @@ export default function useConnectionWatcher() {
 						},
 					],
 				},
+				priority: NOTICE_PRIORITY_HIGH,
 			} );
 		}
 	}, [

projects/packages/my-jetpack/changelog/add-priority-notices-my-jetpack

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Add notice priorities to My Jetpack