Notification Drawer Update

src/components/Header/Tools.tsx

@@ -82,7 +82,7 @@ const Tools = () => {
   });
   const { xs } = useWindowWidth();
   const user = useSelector(({ chrome: { user } }: ReduxState) => user!);
-  const unreadNotifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data?.filter((isRead) => isRead) || []);
+  const unreadNotifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data?.filter((isRead) => !isRead) || []);
   const isDrawerExpanded = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.isExpanded);
   const dispatch = useDispatch();
   const libjwt = useContext(LibtJWTContext);

src/components/NotificationsDrawer/DrawerPanelContent.tsx

@@ -1,16 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { PopoverPosition } from '@patternfly/react-core/dist/dynamic/components/Popover';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
+import { Badge } from '@patternfly/react-core/dist/dynamic/components/Badge';
+import { Flex, FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
+import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
+import { Divider } from '@patternfly/react-core/dist/dynamic/components/Divider';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { EmptyState, EmptyStateBody, EmptyStateIcon } from '@patternfly/react-core/dist/dynamic/components/EmptyState';
-import { NotificationDrawer, NotificationDrawerHeader } from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
+import {
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerHeader,
+  NotificationDrawerList,
+} from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
 import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
 import { useDispatch, useSelector } from 'react-redux';
-import { toggleNotificationsDrawer } from '../../redux/actions';
 import FilterIcon from '@patternfly/react-icons/dist/dynamic/icons/filter-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
 import BellSlashIcon from '@patternfly/react-icons/dist/dynamic/icons/bell-slash-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-square-alt-icon';
-import { ReduxState } from '../../redux/store';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
+import orderBy from 'lodash/orderBy';
+import { useNavigate } from 'react-router-dom';
+import { NotificationData, ReduxState } from '../../redux/store';
+import NotificationItem from './NotificationItem';
+import { markAllNotificationsAsRead, markAllNotificationsAsUnread, toggleNotificationsDrawer } from '../../redux/actions';
+import { filterConfig } from './notificationDrawerUtils';
 
 export type DrawerPanelProps = {
   innerRef: React.Ref<unknown>;
@@ -39,19 +56,178 @@ const EmptyNotifications = () => (
 );
 
 const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  const [filteredNotifications, setFilteredNotifications] = useState<NotificationData[]>([]);
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const notifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data || []);
+  const isOrgAdmin = useSelector(({ chrome }: ReduxState) => chrome.user?.identity.user?.is_org_admin);
+
+  useEffect(() => {
+    const modifiedNotifications = (activeFilters || []).reduce(
+      (acc: NotificationData[], chosenFilter: string) => [...acc, ...notifications.filter(({ source }) => source === chosenFilter)],
+      []
+    );
+
+    setFilteredNotifications(modifiedNotifications);
+  }, [activeFilters]);
+
+  const onNotificationsDrawerClose = () => {
+    setActiveFilters([]);
+    dispatch(toggleNotificationsDrawer());
+  };
+
+  const onMarkAllAsRead = () => {
+    dispatch(markAllNotificationsAsRead());
+    setIsDropdownOpen(false);
+  };
+
+  const onMarkAllAsUnread = () => {
+    dispatch(markAllNotificationsAsUnread());
+    setIsDropdownOpen(false);
+  };
+
+  const onFilterSelect = (chosenFilter: string) => {
+    activeFilters.includes(chosenFilter)
+      ? setActiveFilters(activeFilters.filter((filter) => filter !== chosenFilter))
+      : setActiveFilters([...activeFilters, chosenFilter]);
+  };
+
+  const onNavigateTo = (link: string) => {
+    navigate(link);
+    onNotificationsDrawerClose();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="read all" onClick={onMarkAllAsRead} isDisabled={notifications.length === 0}>
+      Mark visible as read
+    </DropdownItem>,
+    <DropdownItem key="unread all" onClick={onMarkAllAsUnread} isDisabled={notifications.length === 0}>
+      Mark visible as unread
+    </DropdownItem>,
+    <Divider key="divider" />,
+    <DropdownItem key="event log" onClick={() => onNavigateTo('/settings/notifications/eventlog')}>
+      <Flex>
+        <FlexItem>View event log</FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Icon className="pf-v5-u-ml-auto">
+            <ExternalLinkAltIcon />
+          </Icon>
+        </FlexItem>
+      </Flex>
+    </DropdownItem>,
+    isOrgAdmin && (
+      <DropdownItem key="notification settings" onClick={() => onNavigateTo('/settings/notifications/configure-events')}>
+        <Flex>
+          <FlexItem>Configure notification settings</FlexItem>
+          <FlexItem align={{ default: 'alignRight' }}>
+            <Icon className="pf-v5-u-ml-auto">
+              <ExternalLinkAltIcon />
+            </Icon>
+          </FlexItem>
+        </Flex>
+      </DropdownItem>
+    ),
+    <DropdownItem key="notification preferences" onClick={() => onNavigateTo('/settings/notifications/user-preferences')}>
+      <Flex>
+        <FlexItem>Manage my notification preferences</FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Icon className="pf-v5-u-ml-auto">
+            <ExternalLinkAltIcon />
+          </Icon>
+        </FlexItem>
+      </Flex>
+    </DropdownItem>,
+  ];
+
+  const filterDropdownItems = () => {
+    return [
+      <DropdownGroup key="filter-label" label="Show notifications for...">
+        <DropdownList>
+          {filterConfig.map((source) => (
+            <DropdownItem
+              key={source.value}
+              onClick={() => onFilterSelect(source.value)}
+              isDisabled={notifications.length === 0}
+              isSelected={activeFilters.includes(source.value)}
+              hasCheckbox
+            >
+              {source.title}
+            </DropdownItem>
+          ))}
+          <Divider />
+          <DropdownItem key="reset-filters" isDisabled={activeFilters.length === 0} onClick={() => setActiveFilters([])}>
+            Reset filters
+          </DropdownItem>
+        </DropdownList>
+      </DropdownGroup>,
+    ];
+  };
+
+  const renderNotifications = () => {
+    if (notifications.length === 0) {
+      return <EmptyNotifications />;
+    }
+
+    const sortedNotifications = orderBy(activeFilters?.length > 0 ? filteredNotifications : notifications, ['read', 'created'], ['asc', 'asc']);
+
+    return sortedNotifications.map((notification) => (
+      <NotificationItem key={notification.id} notification={notification} onNavigateTo={onNavigateTo} />
+    ));
+  };
+
   return (
     <NotificationDrawer ref={innerRef}>
-      <NotificationDrawerHeader onClose={() => dispatch(toggleNotificationsDrawer())}>
-        <Button variant="plain" aria-label="Filter">
-          <FilterIcon />
-        </Button>
-        <Button variant="plain" aria-label="Mark as read">
-          <EllipsisVIcon />
-        </Button>
+      <NotificationDrawerHeader onClose={onNotificationsDrawerClose} title="Notifications" className="pf-u-align-items-center">
+        {activeFilters.length > 0 && <Badge isRead>{activeFilters.length}</Badge>}
+        <Dropdown
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
+              id="notifications-filter-toggle"
+              variant="plain"
+            >
+              <FilterIcon />
+            </MenuToggle>
+          )}
+          isOpen={isFilterDropdownOpen}
+          onOpenChange={setIsFilterDropdownOpen}
+          popperProps={{
+            position: PopoverPosition.right,
+          }}
+          id="notifications-filter-dropdown"
+          aria-label="Notifications filter"
+        >
+          {filterDropdownItems()}
+        </Dropdown>
+        <Dropdown
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              variant="plain"
+              id="notifications-actions-toggle"
+              isFullWidth
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+          isOpen={isDropdownOpen}
+          onOpenChange={setIsDropdownOpen}
+          popperProps={{
+            position: PopoverPosition.right,
+          }}
+          id="notifications-actions-dropdown"
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
       </NotificationDrawerHeader>
-      {notifications.length === 0 ? <EmptyNotifications /> : 'TODO'}
+      <NotificationDrawerBody>
+        <NotificationDrawerList>{renderNotifications()}</NotificationDrawerList>
+      </NotificationDrawerBody>
     </NotificationDrawer>
   );
 };

src/components/NotificationsDrawer/NotificationItem.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import {
+  NotificationDrawerList,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+} from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
+import { PopoverPosition } from '@patternfly/react-core/dist/dynamic/components/Popover';
+import { Checkbox } from '@patternfly/react-core/dist/dynamic/components/Checkbox';
+import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import EllipsisVIcon from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
+import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat';
+import { useDispatch } from 'react-redux';
+import { NotificationData } from '../../redux/store';
+import { markNotificationAsRead, markNotificationAsUnread } from '../../redux/actions';
+
+interface NotificationItemProps {
+  notification: NotificationData;
+  onNavigateTo: (link: string) => void;
+}
+const NotificationItem: React.FC<NotificationItemProps> = ({ notification, onNavigateTo }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const onCheckboxToggle = () => {
+    dispatch(!notification.read ? markNotificationAsRead(notification.id) : markNotificationAsUnread(notification.id));
+    setIsDropdownOpen(false);
+  };
+
+  const notificationDropdownItems = [
+    <DropdownItem key="read" onClick={onCheckboxToggle}>{`Mark as ${!notification.read ? 'read' : 'unread'}`}</DropdownItem>,
+    <DropdownItem key="manage-event" onClick={() => onNavigateTo('settings/notifications/configure-events')}>
+      Manage this event
+    </DropdownItem>,
+  ];
+  return (
+    <React.Fragment>
+      <NotificationDrawerList>
+        <NotificationDrawerListItem variant="info" isRead={notification.read}>
+          <NotificationDrawerListItemHeader title={notification.title} srTitle="Info notification:">
+            <Checkbox isChecked={notification.read} onChange={onCheckboxToggle} id="read-checkbox" name="read-checkbox" />
+            <Dropdown
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="Notification actions dropdown"
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  id="notification-item-toggle"
+                  isExpanded={isDropdownOpen}
+                  variant="plain"
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
+              isOpen={isDropdownOpen}
+              onOpenChange={setIsDropdownOpen}
+              popperProps={{
+                position: PopoverPosition.right,
+              }}
+              id="notification-item-dropdown"
+            >
+              <DropdownList>{notificationDropdownItems}</DropdownList>
+            </Dropdown>
+          </NotificationDrawerListItemHeader>
+          <NotificationDrawerListItemBody timestamp={<DateFormat date={notification.created} />}>
+            <Label variant="outline" isCompact className="pf-u-mb-md">
+              {notification.source}
+            </Label>
+            <span className="pf-u-display-block">{notification.description}</span>
+          </NotificationDrawerListItemBody>
+        </NotificationDrawerListItem>
+      </NotificationDrawerList>
+    </React.Fragment>
+  );
+};
+
+export default NotificationItem;

src/components/NotificationsDrawer/notificationDrawerUtils.ts

@@ -0,0 +1,6 @@
+export const filterConfig = [
+  { title: 'Console', value: 'console' },
+  { title: 'OpenShift', value: 'openshift' },
+  { title: 'Red Hat Enterprise Linux', value: 'rhel' },
+  { title: 'Ansible Automation Platform', value: 'ansible' },
+];

src/redux/action-types.ts

@@ -41,3 +41,8 @@ export const CLEAR_QUICKSTARTS = '@@chrome/clear-quickstarts';
 export const SET_GATEWAY_ERROR = '@@chrome/set-gateway-error';
 
 export const TOGGLE_NOTIFICATIONS_DRAWER = '@@chrome/toggle-notifications-drawer';
+
+export const MARK_NOTIFICATION_AS_READ = '@@chrome/mark-notification-as-read';
+export const MARK_NOTIFICATION_AS_UNREAD = '@@chrome/mark-notification-as-unread';
+export const MARK_ALL_NOTIFICATION_AS_READ = '@@chrome/mark-all-notification-as-read';
+export const MARK_ALL_NOTIFICATION_AS_UNREAD = '@@chrome/mark-all-notification-as-unread';

src/redux/actions.ts

@@ -206,3 +206,21 @@ export const setGatewayError = (error?: ThreeScaleError) => ({
 export const toggleNotificationsDrawer = () => ({
   type: actionTypes.TOGGLE_NOTIFICATIONS_DRAWER,
 });
+
+export const markNotificationAsRead = (id: number) => ({
+  type: actionTypes.MARK_NOTIFICATION_AS_READ,
+  payload: id,
+});
+
+export const markNotificationAsUnread = (id: number) => ({
+  type: actionTypes.MARK_NOTIFICATION_AS_UNREAD,
+  payload: id,
+});
+
+export const markAllNotificationsAsRead = () => ({
+  type: actionTypes.MARK_ALL_NOTIFICATION_AS_READ,
+});
+
+export const markAllNotificationsAsUnread = () => ({
+  type: actionTypes.MARK_ALL_NOTIFICATION_AS_UNREAD,
+});