Fix tag filter and notifications drawer PF6 migration issues (#3020)

RedHatInsights · Feb 25, 2025 · 6edb223 · 6edb223
2 parents 8316ad7 + efdd675
commit 6edb223
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/components/GlobalFilter/GlobalFilterMenu.tsx b/src/components/GlobalFilter/GlobalFilterMenu.tsx
@@ -140,6 +140,7 @@ export const GlobalFilterDropdown: React.FunctionComponent<GlobalFilterDropdownP
                 {!isDisabled && (
                   <Button
                     variant="link"
+                    className="pf-v6-u-ml-sm"
                     ouiaId="global-filter-clear"
                     onClick={() => {
                       setValue(() => ({}));

diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { memo, useContext, useEffect, useState } from 'react';
+import React, { Fragment, memo, useContext, useEffect, useState } from 'react';
 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';
@@ -59,6 +59,11 @@ const ExpandedSettingsButton = ({ settingsMenuDropdownGroups }: ExpandedSettings
   </Tooltip>
 );
 
+type NotificationBellProps = {
+  isNotificationDrawerExpanded: boolean;
+  toggleDrawer: () => void;
+};
+
 const Tools = () => {
   const [{ isDemoAcc, isInternal, isRhosakEntitled }, setState] = useState({
     isInternal: true,
@@ -237,16 +242,15 @@ const Tools = () => {
     setIsNotificationsDrawerExpanded((prev) => !prev);
   };
 
-  type NotificationBellProps = {
-    isNotificationDrawerExpanded: boolean;
-    toggleDrawer: () => void;
-  };
-
-  const drawerBellProps: ScalprumComponentProps & NotificationBellProps = {
+  const drawerBellProps: ScalprumComponentProps<Record<string, unknown>, NotificationBellProps> = {
     scope: 'notifications',
     module: './NotificationsDrawerBell',
     fallback: null,
     isNotificationDrawerExpanded,
+    // Do not show the error component if module fails to load
+    // Prevents broken layout
+    // @ts-ignore
+    ErrorComponent: Fragment,
     toggleDrawer,
   };
 

diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
@@ -22,7 +22,8 @@ const DrawerPanelBase: React.FC<DrawerPanelProps> = ({ panelRef, toggleDrawer })
   const { DrawerPanel } = useNotificationsScope();
 
   return (
-    <NotificationDrawer ref={panelRef}>
+    // Need the v5 styles here in order for pf5 nested child drawer nodes to be properly styled until pf6 migration is finished
+    <NotificationDrawer className="pf-v5-c-notification-drawer" ref={panelRef}>
       <DrawerPanel {...notificationProps} />
     </NotificationDrawer>
   );