[RHCLOUD-33811] Move notification drawer to its own module (#2988)

* working drawer with websocket; needs toggle and ref fix * Made toggleDrawer() function and passed it notifications drawer * Moved notifications drawer test to notif-frontend * WIP module nonsense * Get unreadnotifications * Moving stuff out of panelcontent * Working with scope (and context from module) * Type on notificationsDrawerContext * Adding notif scope earlier and removing the context * Passing Spinner in place of DrawerContent on error * Removing unnecessary notificationProps from DOM element * Moving bell to notifications * Moving hooks to hooks dir and cleaning * Fixing tools test with scalprum context * Declaring props differently --------- Co-authored-by: Blake Holifield <[email protected]> Co-authored-by: Justin Orringer <[email protected]> Co-authored-by: Martin Maroši <[email protected]>
RedHatInsights · Feb 24, 2025 · 8316ad7 · 8316ad7
1 parent 4254d8b
commit 8316ad7
Show file tree

Hide file tree

Showing 14 changed files with 158 additions and 622 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ For more detailed information about chrome and what it provides, [look through t
 
 ## JavaScript API
 
-Insights Chrome comes with a Javacript API that allows applications to control navigation, global filters, etc.
+Insights Chrome comes with a Javascript API that allows applications to control navigation, global filters, etc.
 
 Check out the [useChrome hook docs](http://front-end-docs-insights.apps.ocp4.prod.psi.redhat.com/chrome/chrome-api#Chrome)
 
@@ -98,7 +98,7 @@ See [local search development documentation](./docs/localSearchDevelopment.md).
 
 ## LocalStorage Debugging
 
-There are some localStorage values for you to enable debuging information or enable some values that are in experimental state. If you want to enable them call `const iqe = insights.chrome.enable.iqe()` for instance to enable such service. This function will return callback to disable such feature so calling `iqe()` will remove such item from localStorage.
+There are some localStorage values for you to enable debugging information or enable some values that are in experimental state. If you want to enable them call `const iqe = insights.chrome.enable.iqe()` for instance to enable such service. This function will return callback to disable such feature so calling `iqe()` will remove such item from localStorage.
 
 Available function:
 
@@ -107,9 +107,9 @@ Available function:
 - `jwtDebug` - to enable debugging of JWT
 - `remediationsDebug` - to enable debug buttons in remediations app
 - `shortSession` - to enable short session in order to test automatic logouts
-- `forcePendo` - to force Pendo initializtion
+- `forcePendo` - to force Pendo initialization
 - `appFilter` - to enable new application filter in any environment
 
-## Futher reading
+## Further reading
 
 More detailed documentation can be found in the [docs section](https://github.com/redhatinsights/insights-chrome/tree/master/docs)
diff --git a/cypress/component/NotificationDrawer/NotificationDrawer.cy.tsx b/cypress/component/NotificationDrawer/NotificationDrawer.cy.tsx
diff --git a/docs/wsSubscription.md b/docs/wsSubscription.md
@@ -46,4 +46,4 @@ const ConsumerComponent = () => {
 }
 
 
-```
+```
diff --git a/src/components/Header/HeaderTests/Tools.test.js b/src/components/Header/HeaderTests/Tools.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Tools from '../Tools';
+import { ScalprumProvider } from '@scalprum/react-core';
 import { act, render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
@@ -26,6 +27,11 @@ jest.mock('@unleash/proxy-client-react', () => {
   };
 });
 
+beforeAll(() => {
+  global.__webpack_init_sharing__ = () => undefined;
+  global.__webpack_share_scopes__ = { default: {} };
+});
+
 describe('Tools', () => {
   let assignMock = jest.fn();
 
@@ -40,9 +46,11 @@ describe('Tools', () => {
     await act(async () => {
       container = render(
         <MemoryRouter>
-          <Provider store={createStore((state = { chrome: { user: {}, notifications: { data: [] } } }) => state)}>
-            <Tools onClick={mockClick} />
-          </Provider>
+          <ScalprumProvider config={{ notifications: { manifestLocation: '/apps/notifications/fed-mods.json' } }}>
+            <Provider store={createStore((state = { chrome: { user: {} } }) => state)}>
+              <Tools onClick={mockClick} />
+            </Provider>
+          </ScalprumProvider>
         </MemoryRouter>
       ).container;
     });

diff --git a/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap b/src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap
@@ -2,35 +2,36 @@
 
 exports[`Tools should render correctly 1`] = `
 <div
-  class="pf-v6-c-toolbar__item pf-v6-u-mx-0"
+  class="pf-v6-c-toolbar__item pf-m-hidden pf-m-visible-on-md pf-v6-u-mr-0"
 >
   <div
     style="display: contents;"
   >
     <button
       aria-disabled="false"
       aria-expanded="false"
-      aria-label="Notifications"
-      class="pf-v6-c-button pf-m-stateful pf-m-read chr-c-notification-badge"
-      data-ouia-component-id="OUIA-Generated-Button-stateful-1"
+      aria-label="Settings menu"
+      class="pf-v6-c-button pf-m-control tooltip-button-settings-cy"
+      data-ouia-component-id="OUIA-Generated-Button-control-2"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
+      id="SettingsMenu"
       type="button"
     >
       <span
-        class="pf-v6-c-button__text"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 896 1024"
+          viewBox="0 0 512 512"
           width="1em"
         >
           <path
-            d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
+            d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
           />
         </svg>
       </span>

diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
@@ -4,7 +4,6 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Divider } from '@patternfly/react-core/dist/dynamic/components/Divider';
 import { DropdownItem } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
-import { NotificationBadge } from '@patternfly/react-core/dist/dynamic/components/NotificationBadge';
 import { Switch } from '@patternfly/react-core/dist/dynamic/components/Switch';
 import { ToolbarItem } from '@patternfly/react-core/dist/dynamic/components/Toolbar';
 import { Tooltip } from '@patternfly/react-core/dist/dynamic/components/Tooltip';
@@ -20,11 +19,11 @@ import { useIntl } from 'react-intl';
 import { useFlag } from '@unleash/proxy-client-react';
 import messages from '../../locales/Messages';
 import { createSupportCase } from '../../utils/createCase';
-import BellIcon from '@patternfly/react-icons/dist/dynamic/icons/bell-icon';
 import ChromeAuthContext from '../../auth/ChromeAuthContext';
 import { isPreviewAtom, togglePreviewWithCheckAtom } from '../../state/atoms/releaseAtom';
-import { notificationDrawerExpandedAtom, unreadNotificationsAtom } from '../../state/atoms/notificationDrawerAtom';
+import { notificationDrawerExpandedAtom } from '../../state/atoms/notificationDrawerAtom';
 import useSupportCaseData from '../../hooks/useSupportCaseData';
+import { ScalprumComponent, ScalprumComponentProps } from '@scalprum/react-core';
 
 const isITLessEnv = ITLess();
 
@@ -72,8 +71,6 @@ const Tools = () => {
   const workspacesEnabled = useFlag('platform.rbac.workspaces');
   const enableGlobalLearningResourcesPage = useFlag('platform.learning-resources.global-learning-resources');
   const { user, token } = useContext(ChromeAuthContext);
-  const unreadNotifications = useAtomValue(unreadNotificationsAtom);
-  const [isNotificationDrawerExpanded, toggleNotifications] = useAtom(notificationDrawerExpandedAtom);
   const intl = useIntl();
   const isOrgAdmin = user?.identity?.user?.is_org_admin;
   const settingsPath = isITLessEnv ? `/settings/my-user-access` : enableIntegrations ? `/settings/integrations` : '/settings/sources';
@@ -84,8 +81,6 @@ const Tools = () => {
     messages.betaRelease
   )}`;
 
-  const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
-
   /* list out the items for the settings menu */
   const settingsMenuDropdownGroups = [
     {
@@ -236,23 +231,28 @@ const Tools = () => {
     );
   };
 
+  const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
+  const [isNotificationDrawerExpanded, setIsNotificationsDrawerExpanded] = useAtom(notificationDrawerExpandedAtom);
+  const toggleDrawer = () => {
+    setIsNotificationsDrawerExpanded((prev) => !prev);
+  };
+
+  type NotificationBellProps = {
+    isNotificationDrawerExpanded: boolean;
+    toggleDrawer: () => void;
+  };
+
+  const drawerBellProps: ScalprumComponentProps & NotificationBellProps = {
+    scope: 'notifications',
+    module: './NotificationsDrawerBell',
+    fallback: null,
+    isNotificationDrawerExpanded,
+    toggleDrawer,
+  };
+
   return (
     <>
-      {isNotificationsEnabled && (
-        <ToolbarItem className="pf-v6-u-mx-0">
-          <Tooltip aria="none" aria-live="polite" content={'Notifications'} flipBehavior={['bottom']} className="tooltip-inner-settings-cy">
-            <NotificationBadge
-              className="chr-c-notification-badge"
-              variant={unreadNotifications ? 'unread' : 'read'}
-              onClick={() => toggleNotifications((prev) => !prev)}
-              aria-label="Notifications"
-              isExpanded={isNotificationDrawerExpanded}
-            >
-              <BellIcon />
-            </NotificationBadge>
-          </Tooltip>
-        </ToolbarItem>
-      )}
+      {isNotificationsEnabled && <ScalprumComponent {...drawerBellProps} />}
       {localStorage.getItem('chrome:darkmode') === 'true' && (
         <ToolbarItem>
           <ThemeToggle />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,4 +46,4 @@ const ConsumerComponent = () => {
		}


		```
		```