chore(pf5): clean up dropdown in notification center

cryostatio · Jan 4, 2024 · 8d3e551 · 8d3e551
1 parent 6d27e80
commit 8d3e551
Showing 1 changed file with 33 additions and 13 deletions.
diff --git a/src/app/AppLayout/NotificationCenter.tsx b/src/app/AppLayout/NotificationCenter.tsx
@@ -18,6 +18,11 @@ import { NotificationsContext } from '@app/Shared/Services/Notifications.service
 import useDayjs from '@app/utils/hooks/useDayjs';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerGroup,
@@ -30,7 +35,7 @@ import {
   Text,
   TextVariants,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core/deprecated';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { combineLatest } from 'rxjs';
 
@@ -126,14 +131,17 @@ export const NotificationCenter: React.FC<NotificationCenterProps> = ({ onClose
     return dayjs(timestamp).tz(datetimeContext.timeZone.full).format('L LTS z');
   };
 
-  const drawerDropdownItems = [
-    <DropdownItem key="markAllRead" onClick={handleMarkAllRead} component="button">
-      Mark all read
-    </DropdownItem>,
-    <DropdownItem key="clearAll" onClick={handleClearAll} component="button">
-      Clear all
-    </DropdownItem>,
-  ];
+  const drawerDropdownItems = React.useMemo(
+    () => [
+      <DropdownItem key="markAllRead" onClick={handleMarkAllRead} component="button">
+        Mark all read
+      </DropdownItem>,
+      <DropdownItem key="clearAll" onClick={handleClearAll} component="button">
+        Clear all
+      </DropdownItem>,
+    ],
+    [handleMarkAllRead, handleClearAll],
+  );
 
   return (
     <>
@@ -142,11 +150,23 @@ export const NotificationCenter: React.FC<NotificationCenterProps> = ({ onClose
           <Dropdown
             isPlain
             onSelect={handleToggleDropdown}
-            toggle={<KebabToggle onToggle={handleToggleDropdown} />}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                variant="plain"
+                onClick={() => setHeaderDropdownOpen((open) => !open)}
+                isExpanded={isHeaderDropdownOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isHeaderDropdownOpen}
-            position={DropdownPosition.right}
-            dropdownItems={drawerDropdownItems}
-          />
+            popperProps={{
+              position: 'right',
+            }}
+          >
+            <DropdownList>{drawerDropdownItems}</DropdownList>
+          </Dropdown>
         </NotificationDrawerHeader>
         <NotificationDrawerBody>
           <NotificationDrawerGroupList>