Self initialize drawer global shared state.

Author: Hyperkid123

src/components/NotificationsDrawer/DrawerBell.tsx

@@ -18,7 +18,7 @@ const DrawerBell: React.ComponentType<DrawerBellProps> = ({
     drawerActions: { toggleDrawerContent },
   } = useChrome();
   const {
-    state: { hasUnread },
+    state: { hasUnread, ready },
   } = useNotificationDrawer();
   return (
     <ToolbarItem className="pf-v6-u-mx-0">
@@ -38,6 +38,7 @@ const DrawerBell: React.ComponentType<DrawerBellProps> = ({
               module: './DrawerPanel',
             });
           }}
+          isDisabled={!ready}
           aria-label="Notifications"
           isExpanded={isNotificationDrawerExpanded}
         >

src/components/NotificationsDrawer/DrawerPanel.tsx

@@ -12,6 +12,7 @@ import {
   NotificationDrawerList,
 } from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
 import { Badge } from '@patternfly/react-core/dist/dynamic/components/Badge';
+import Spinner from '@redhat-cloud-services/frontend-components/Spinner';
 
 import orderBy from 'lodash/orderBy';
 import { useNavigate } from 'react-router-dom';
@@ -32,7 +33,7 @@ const DrawerPanelBase = ({ toggleDrawer }: DrawerPanelProps) => {
   const [isOrgAdmin, setIsOrgAdmin] = useState(false);
   const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
   const {
-    state,
+    state: { ready, ...state },
     addNotification,
     updateNotificationRead,
     updateSelectedStatus,
@@ -151,6 +152,10 @@ const DrawerPanelBase = ({ toggleDrawer }: DrawerPanelProps) => {
     ));
   };
 
+  if (!ready) {
+    return <Spinner centered />;
+  }
+
   return (
     <>
       <NotificationDrawerHeader
@@ -172,6 +177,7 @@ const DrawerPanelBase = ({ toggleDrawer }: DrawerPanelProps) => {
         />
         <BulkSelect
           id="notifications-bulk-select"
+          onSelect={(checked) => selectAllNotifications(checked)}
           items={[
             {
               title: 'Select none (0)',

src/components/NotificationsDrawer/DrawerSingleton.tsx

@@ -1,4 +1,5 @@
-import { Access } from '@redhat-cloud-services/rbac-client';
+import { Access, AccessApi } from '@redhat-cloud-services/rbac-client';
+import axios from 'axios';
 
 import { getDateDaysAgo } from '../UtcDate';
 
@@ -12,6 +13,8 @@ import {
   NotificationDrawerState,
 } from '../../types/Drawer';
 
+const rbacApi = new AccessApi(undefined, '/api/rbac/v1', axios.create());
+
 interface Bundle {
   id: string;
   name: string;
@@ -26,14 +29,29 @@ const initialState: NotificationDrawerState = {
   filterConfig: [],
   hasNotificationsPermissions: false,
   hasUnread: false,
+  ready: false,
+  initializing: false,
 };
 
 export class DrawerSingleton {
   private static _instance: DrawerSingleton;
   private static _subs: { id: string; rerenderer: () => void }[];
   private static _state: NotificationDrawerState = initialState;
+
   static subscribe(rerenderer: () => void) {
     const id = crypto.randomUUID();
+    // Run the init procedure if the state is not ready for subscriber
+    if (!DrawerSingleton._state.initializing && !DrawerSingleton._state.ready) {
+      DrawerSingleton._state.initializing = true;
+      rbacApi
+        .getPrincipalAccess('notifications', undefined, undefined, 1000)
+        .then(({ data: { data } }) => {
+          DrawerSingleton.Instance.initialize(true, data);
+          DrawerSingleton._state.initializing = false;
+          DrawerSingleton._state.ready = true;
+          DrawerSingleton._subs.push({ id, rerenderer });
+        });
+    }
     DrawerSingleton._subs.push({ id, rerenderer });
     return id;
   }

src/components/NotificationsDrawer/initNotificationScope.tsx

@@ -3,8 +3,14 @@ import DrawerPanel from './DrawerPanel';
 import useNotificationDrawer from '../../hooks/useNotificationDrawer';
 import { DrawerSingleton } from './DrawerSingleton';
 
+/**
+ * @deprecated The subscribe method checks if the state was initialized and if not, it will run the init method.
+ */
 function initNotificationScope() {
   const scope = getSharedScope();
+  console.error(
+    'This module is deprecated and will be removed in the future! Notification state is initialized if a subscription request is detected.'
+  );
   scope['@notif-module/drawer'] = {
     '1.0.0': {
       loaded: 1,

src/types/Drawer.ts

@@ -27,6 +27,8 @@ export type NotificationDrawerState = {
   filterConfig: FilterConfigItem[];
   hasNotificationsPermissions: boolean;
   hasUnread: boolean;
+  ready: boolean;
+  initializing: boolean;
 };
 
 export interface FilterConfigItem {