Made toggleDrawer() function and passed it notifications drawer

RedHatInsights · Jan 17, 2025 · af51cd5 · af51cd5
1 parent 92b96f4
commit af51cd5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
@@ -9,12 +9,10 @@ import { ScalprumComponent } from '@scalprum/react-core';
 
 export type DrawerPanelProps = {
   panelRef: React.Ref<unknown>;
-  // toggle: () => void;
+  toggleDrawer: () => void;
 };
 
-const DrawerPanelBase = ({ panelRef }: DrawerPanelProps) => {
-  // toggle drawer will be an api or prop
-
+const DrawerPanelBase: React.FC<DrawerPanelProps> = ({ panelRef, toggleDrawer }) => {
   const auth = useContext(ChromeAuthContext);
   const isOrgAdmin = auth?.user?.identity?.user?.is_org_admin;
   const { getUserPermissions } = useContext(InternalChromeContext);
@@ -23,9 +21,9 @@ const DrawerPanelBase = ({ panelRef }: DrawerPanelProps) => {
     isOrgAdmin: isOrgAdmin,
     getUserPermissions: getUserPermissions,
     panelRef: panelRef,
-    expanded: true,
-    // toggle: toggle,
+    toggleDrawer: toggleDrawer,
   };
+
   const PanelContent = () => {
     return (
       <ScalprumComponent scope="notifications" module="./NotificationsDrawer" fallback={null} ErrorComponent={<Fragment />} {...notificationProps} />
@@ -39,6 +37,8 @@ const DrawerPanelBase = ({ panelRef }: DrawerPanelProps) => {
   );
 };
 
-const DrawerPanel = React.forwardRef((props, innerRef) => <DrawerPanelBase panelRef={innerRef} {...props} />);
+const DrawerPanel = React.forwardRef<unknown, Omit<DrawerPanelProps, 'panelRef'>>((props, innerRef) => (
+  <DrawerPanelBase panelRef={innerRef} {...props} />
+));
 
 export default DrawerPanel;
diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
@@ -12,7 +12,7 @@ import isEqual from 'lodash/isEqual';
 import ChromeRoutes from '../components/Routes/Routes';
 import useOuiaTags from '../utils/useOuiaTags';
 import RedirectBanner from '../components/Stratosphere/RedirectBanner';
-import { useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
 
 import { useIntl } from 'react-intl';
 import messages from '../locales/Messages';
@@ -49,7 +49,6 @@ type DefaultLayoutProps = {
 
 const DefaultLayout: React.FC<DefaultLayoutProps> = ({ hasBanner, selectedAccountNumber, hideNav, isNavOpen, setIsNavOpen, Sidebar, Footer }) => {
   const drawerPanelRef = useRef<HTMLDivElement>(null);
-  // const toggleDrawer = useSetAtom(notificationDrawerExpandedAtom);
   useEffect(() => {
     if (drawerPanelRef.current !== null) {
       focusDrawer();
@@ -65,9 +64,12 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ hasBanner, selectedAccoun
       tabbableElement.focus();
     }
   };
+  const toggleDrawer = () => {
+    setIsNotificationsDrawerExpanded((prev) => !prev);
+  };
   const intl = useIntl();
   const { loaded, schema, noNav } = useNavigation();
-  const isNotificationsDrawerExpanded = useAtomValue(notificationDrawerExpandedAtom);
+  const [isNotificationsDrawerExpanded, setIsNotificationsDrawerExpanded] = useAtom(notificationDrawerExpandedAtom);
   const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
 
   return (
@@ -90,7 +92,7 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ hasBanner, selectedAccoun
       }
       {...(isNotificationsEnabled && {
         onNotificationDrawerExpand: focusDrawer,
-        notificationDrawer: <DrawerPanel ref={drawerPanelRef} />,
+        notificationDrawer: <DrawerPanel ref={drawerPanelRef} toggleDrawer={toggleDrawer} />,
         isNotificationDrawerExpanded: isNotificationsDrawerExpanded,
       })}
       sidebar={