Switching to lodash sorting, fixed visual bug

src/components/Header/Tools.tsx

@@ -96,8 +96,7 @@ const Tools = () => {
 
   const enableAuthDropdownOption = useFlag('platform.chrome.dropdown.authfactor');
   const previewEnabled = useFlag('platform.chrome.preview');
-  const isNotificationsEnabled = true;
-  // const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
+  const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
 
   /* list out the items for the settings menu */
   const settingsMenuDropdownItems = [

src/components/NotificationsDrawer/DrawerPanelContent.tsx

@@ -21,14 +21,14 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { useDispatch, useSelector } from 'react-redux';
-import { toggleNotificationsDrawer } from '../../redux/actions';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import BellSlashIcon from '@patternfly/react-icons/dist/esm/icons/bell-slash-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { orderBy } from 'lodash';
 import { NotificationData, ReduxState } from '../../redux/store';
 import NotificationItem from './NotificationItem';
-import { markAllNotificationsAsRead, markAllNotificationsAsUnread } from '../../redux/actions';
+import { toggleNotificationsDrawer, markAllNotificationsAsRead, markAllNotificationsAsUnread } from '../../redux/actions';
 
 export type DrawerPanelProps = {
   innerRef: React.Ref<unknown>;
@@ -95,13 +95,13 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="read all" onClick={onMarkAllAsRead}>
+    <DropdownItem key="read all" onClick={() => onMarkAllAsRead()}>
       Mark visible as read
     </DropdownItem>,
-    <DropdownItem key="unread all" onClick={onMarkAllAsUnread}>
+    <DropdownItem key="unread all" onClick={() => onMarkAllAsUnread()}>
       Mark visible as unread
     </DropdownItem>,
-    <Divider />,
+    <Divider key="divider" />,
     <DropdownItem key="event log">
       <Icon>
         <ExternalLinkSquareAltIcon />
@@ -148,9 +148,10 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
       return <EmptyNotifications />;
     }
 
-    // TODO: Add sorting by timestamps as primary sort, then by read/unread.
-    const sortedNotifications = (filteredNotifications?.length > 0 ? filteredNotifications : notifications).sort(
-      (currentNotification, nextNotification) => (currentNotification.read === nextNotification.read ? 0 : currentNotification.read ? 1 : -1)
+    const sortedNotifications = orderBy(
+      filteredNotifications?.length > 0 ? filteredNotifications : notifications,
+      ['read', 'created'],
+      ['asc', 'asc']
     );
 
     return sortedNotifications.map((notification, index) => <NotificationItem key={index} notification={notification} />);

src/components/NotificationsDrawer/NotificationItem.tsx

@@ -22,7 +22,7 @@ const NotificationItem = ({ notification }: { notification: NotificationData })
 
   const onCheckboxToggle = () => {
     dispatch(!notification.read ? markNotificationAsRead(notification.id) : markNotificationAsUnread(notification.id));
-    setIsDropdownOpen(!isDropdownOpen);
+    setIsDropdownOpen(false);
   };
 
   const dropdownItems = [<DropdownItem key="read" onClick={onCheckboxToggle}>{`Mark as ${!notification.read ? 'read' : 'unread'}`}</DropdownItem>];

src/hooks/useChromeServiceEvents.ts

@@ -32,8 +32,7 @@ function isGenericEvent(event: unknown): event is GenericEvent {
 const useChromeServiceEvents = () => {
   const connection = useRef<WebSocket | undefined>();
   const dispatch = useDispatch();
-  // const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
-  const isNotificationsEnabled = true;
+  const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
 
   const handlerMap: { [key in EventTypes]: (payload: Payload) => void } = useMemo(
     () => ({

src/layouts/DefaultLayout.tsx

@@ -54,8 +54,7 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ hasBanner, selectedAccoun
     const tabbableElement = drawerPanelRef.current?.querySelector('a, button') as HTMLAnchorElement | HTMLButtonElement;
     tabbableElement.focus();
   };
-  // const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
-  const isNotificationsEnabled = true;
+  const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
 
   return (
     <Page

testData.js

@@ -5,23 +5,23 @@ export const testData = [
     description: 'Testing of notification',
     read: false,
     source: 'RHEL', // the origin of the message
-    created: '5 mins ago',
+    created: '2023-08-18T12:00:00Z',
   },
   {
     id: 2,
     title: 'Test Notification 2',
     description: 'Testing of notification',
     read: false,
     source: 'RBAC', // the origin of the message
-    created: '10 mins ago',
+    created: '2023-08-18T12:05:00Z',
   },
   {
     id: 3,
     title: 'Test Notification 3',
     description: 'Testin of notification',
     read: false,
     source: 'SATURN', // the origin of the message
-    created: '15 mins ago',
+    created: '2023-08-18T12:10:00Z',
   },
 ];