Fixing PF5 related issues after rebasing

RedHatInsights · Aug 22, 2023 · 2957739 · 2957739
1 parent e971de9
commit 2957739
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -124,7 +124,7 @@
     "@data-driven-forms/react-form-renderer": "^3.20.2",
     "@formatjs/cli": "4.8.4",
     "@openshift/dynamic-plugin-sdk": "^3.0.0",
-    "@patternfly/patternfly": "^5.0.0",
+    "@patternfly/patternfly": "^5.0.2",
     "@patternfly/quickstarts": "^5.0.0",
     "@patternfly/react-charts": "^7.0.0",
     "@patternfly/react-core": "^5.0.0",

diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
@@ -96,8 +96,8 @@ 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 = true;
+  // const isNotificationsEnabled = useFlag('platform.chrome.notifications-drawer');
 
   /* list out the items for the settings menu */
   const settingsMenuDropdownItems = [

diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
@@ -3,16 +3,16 @@ import {
   Badge,
   Button,
   Checkbox,
+  Divider,
   Dropdown,
   DropdownGroup,
   DropdownItem,
-  DropdownPosition,
-  DropdownSeparator,
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  KebabToggle,
+  Icon,
   MenuToggle,
+  MenuToggleElement,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerHeader,
@@ -25,6 +25,7 @@ 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 { NotificationData, ReduxState } from '../../redux/store';
 import NotificationItem from './NotificationItem';
 import { markAllNotificationsAsRead, markAllNotificationsAsUnread } from '../../redux/actions';
@@ -100,14 +101,23 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
     <DropdownItem key="unread all" onClick={onMarkAllAsUnread}>
       Mark visible as unread
     </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="event log" icon={ExternalLinkSquareAltIcon}>
+    <Divider />,
+    <DropdownItem key="event log">
+      <Icon>
+        <ExternalLinkSquareAltIcon />
+      </Icon>
       View event log
     </DropdownItem>,
-    <DropdownItem key="notification settings" icon={ExternalLinkSquareAltIcon}>
+    <DropdownItem key="notification settings">
+      <Icon>
+        <ExternalLinkSquareAltIcon />
+      </Icon>
       Configure notification settings
     </DropdownItem>,
-    <DropdownItem key="notification preferences" icon={ExternalLinkSquareAltIcon}>
+    <DropdownItem key="notification preferences">
+      <Icon>
+        <ExternalLinkSquareAltIcon />
+      </Icon>
       Manage my notification preferences
     </DropdownItem>,
   ];
@@ -123,7 +133,7 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
             {source}
           </DropdownItem>
         ))}
-        <DropdownSeparator />
+        <Divider />
         <DropdownItem key="reset-filters" onClick={() => setActiveFilters([])}>
           <Button variant="link" isInline>
             Reset filters
@@ -151,25 +161,42 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
       <NotificationDrawerHeader onClose={() => onNotificationsDrawerClose()}>
         {activeFilters.length > 0 && <Badge isRead>{activeFilters.length}</Badge>}
         <Dropdown
-          toggle={
-            <MenuToggle onClick={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)} id="filter-toggle" isFullWidth variant="plainText">
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
+              id="filter-toggle"
+              isFullWidth
+              variant="plainText"
+            >
               <FilterIcon />
             </MenuToggle>
-          }
+          )}
           isOpen={isFilterDropdownOpen}
-          dropdownItems={filterDropdownItems()}
           id="filter-dropdown"
           aria-label="Notifications filter"
           isPlain
-        />
+        >
+          {filterDropdownItems()}
+        </Dropdown>
         <Dropdown
-          position={DropdownPosition.right}
-          toggle={<KebabToggle onToggle={() => setIsDropdownOpen(!isDropdownOpen)} id="kebab-toggle" />}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              variant="plainText"
+              id="kebab-toggle"
+              isFullWidth
+            >
+              <EllipsisVIcon/>
+            </MenuToggle>
+          )}
           isOpen={isDropdownOpen}
           isPlain
-          dropdownItems={dropdownItems}
           id="notification-dropdown"
-        />
+        >
+          {dropdownItems.map((dropdownItem) => dropdownItem)}
+        </Dropdown>
       </NotificationDrawerHeader>
       <NotificationDrawerBody>
         <NotificationDrawerList>{renderNotifications()}</NotificationDrawerList>

diff --git a/src/components/NotificationsDrawer/NotificationItem.tsx b/src/components/NotificationsDrawer/NotificationItem.tsx
@@ -3,14 +3,15 @@ import {
   Checkbox,
   Dropdown,
   DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   Label,
+  MenuToggle,
+  MenuToggleElement,
   NotificationDrawerList,
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
 } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { useDispatch } from 'react-redux';
 import { NotificationData } from '../../redux/store';
 import { markNotificationAsRead, markNotificationAsUnread } from '../../redux/actions';
@@ -32,13 +33,24 @@ const NotificationItem = ({ notification }: { notification: NotificationData })
           <NotificationDrawerListItemHeader title={notification.title} srTitle="Info notification:">
             <Checkbox isChecked={notification.read} onChange={() => onCheckboxToggle()} id="read-checkbox" name="read-checkbox" />
             <Dropdown
-              position={DropdownPosition.right}
-              toggle={<KebabToggle onToggle={() => setIsDropdownOpen(!isDropdownOpen)} id="kebab-toggle" />}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle 
+                  ref={toggleRef}
+                  aria-label="Notification actions dropdown"
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  id="kebab-toggle" 
+                  isExpanded={isDropdownOpen} 
+                  variant="plain"
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={isDropdownOpen}
               isPlain
-              dropdownItems={dropdownItems}
               id="notification-dropdown"
-            />
+            >
+              {dropdownItems.map((dropDownItem) => dropDownItem)}
+            </Dropdown>
           </NotificationDrawerListItemHeader>
           {/* TODO: Modify timestamp to only show correct "x minutes ago" */}
           <NotificationDrawerListItemBody timestamp={`${notification.created.split('GMT')[0].trim()}`}>

diff --git a/src/hooks/useChromeServiceEvents.ts b/src/hooks/useChromeServiceEvents.ts
@@ -32,8 +32,8 @@ 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 isNotificationsEnabled = true;
 
   const handlerMap: { [key in EventTypes]: (payload: Payload) => void } = useMemo(
     () => ({

diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
@@ -54,7 +54,8 @@ 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 = useFlag('platform.chrome.notifications-drawer');
+  const isNotificationsEnabled = true;
 
   return (
     <Page

diff --git a/src/redux/chromeReducers.ts b/src/redux/chromeReducers.ts
@@ -5,6 +5,7 @@ import { ChromeModule, NavItem, Navigation } from '../@types/types';
 import { ITLess, generateRoutesList, highlightItems, isBeta, levelArray } from '../utils/common';
 import { ThreeScaleError } from '../utils/responseInterceptors';
 import { AccessRequest, ChromeState, NotificationData } from './store';
+import { testData } from '../../testData';
 
 export function contextSwitcherBannerReducer(state: ChromeState): ChromeState {
   return {
@@ -338,7 +339,7 @@ export function toggleNotificationsReducer(state: ChromeState) {
     ...state,
     notifications: {
       ...state.notifications,
-      data: [],
+      data: testData,
       isExpanded: !state.notifications?.isExpanded,
     },
   };

diff --git a/testData.js b/testData.js
@@ -0,0 +1,27 @@
+export const testData = [
+  {
+    id: 1,
+    title: 'Test Notification 1',
+    description: 'Testing of notification',
+    read: false,
+    source: 'RHEL', // the origin of the message
+    created: '5 mins ago',
+  },
+  {
+    id: 2,
+    title: 'Test Notification 2',
+    description: 'Testing of notification',
+    read: false,
+    source: 'RBAC', // the origin of the message
+    created: '10 mins ago',
+  },
+  {
+    id: 3,
+    title: 'Test Notification 3',
+    description: 'Testin of notification',
+    read: false,
+    source: 'SATURN', // the origin of the message
+    created: '15 mins ago',
+  },
+];
+