Fixes #38345 - Update notifications to pf5

Author: Lukshio

app/assets/stylesheets/patternfly_colors_overrides.scss

@@ -20,6 +20,7 @@
       }
     }
   }
+
   .pf-v5-c-nav__link {
     --pf-v5-c-nav__link--BackgroundColor: #{$nav-pf-vertical-bg-color};
     --pf-v5-c-nav__link--m-current--BackgroundColor: #{$nav-pf-vertical-active-bg-color};
@@ -37,4 +38,7 @@
   .pf-v5-c-nav__item {
     --pf-v5-c-nav__item--before--BorderColor: #{$nav-pf-vertical-active-bg-color};
   }
+  .pf-v5-c-notification-badge {
+    --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--palette--blue-500)
+  }
 }

test/integration/notifications_drawer_test.rb

@@ -14,35 +14,30 @@ class NotificationsDrawerIntegrationTest < IntegrationTestWithJavascript
   private
 
   def notifications_open_and_close_flow
-    within(".notifications_container") do
-      assert page.has_selector?('.fa.fa-bell-o'), "Notifications toggler was expected in the top bar, but was not found"
-      assert page.has_no_selector?('.drawer-pf'), "Notifications drawer was expected to be closed, but was found opend"
-
-      # open notifications drawer
-      page.find('.fa.fa-bell-o').click
-      assert page.has_selector?('.drawer-pf'), "Notifications drawer was expected to be opend, but was found closed"
-
-      # close notifications drawer by click on the toggler
-      page.find('.fa.fa-bell-o').click
-      assert page.has_no_selector?('.drawer-pf'), "Notifications drawer was expected to be closed, but was found opend"
-
-      # open notifications drawer
-      page.find('.fa.fa-bell-o').click
-      assert page.has_selector?('.drawer-pf'), "Notifications drawer was expected to be opend, but was found closed"
-
-      # close notifications drawer by click on close button
-      page.find('.drawer-pf-notifications').click # to remove the tooltip from the icon
-      page.find('.drawer-pf-close').click
-      assert page.has_no_selector?('.drawer-pf'), "Notifications drawer was expected to be closed, but was found opend"
-
-      # open notifications drawer
-      page.find('.fa.fa-bell-o').click
-      assert page.has_selector?('.drawer-pf'), "Notifications drawer was expected to be opend, but was found closed"
-    end
-
-    # close notifications drawer by click outside
-    page.find('body').click
-    assert page.has_no_selector?('.notifications_container .drawer-pf'), "Notifications drawer was expected to be closed, but was found opend"
+    assert page.has_selector?('#notification-badge'), "Notifications toggler was expected in the top bar, but was not found"
+    assert page.has_no_selector?('.notifications'), "Notifications drawer was expected to be closed, but was found opend"
+
+    # open notifications drawer
+    page.find('#notification-badge').click
+    assert page.has_selector?('.notifications'), "Notifications drawer was expected to be opend, but was found closed"
+
+    # close notifications drawer by click on the toggler
+    page.find('#notification-badge').click
+    assert page.has_no_selector?('.notifications'), "Notifications drawer was expected to be closed, but was found opend"
+
+    # open notifications drawer
+    page.find('#notification-badge').click
+    assert page.has_selector?('.notifications'), "Notifications drawer was expected to be opend, but was found closed"
+
+    # close notifications drawer by click on close button
+    page.find('button[aria-label="Close"]').click
+    assert page.has_no_selector?('.notifications button[aria-label="Close"]'), "Notifications drawer was expected to be closed, but was found opend"
+
+    # open notifications drawer
+    page.find('#notification-badge').click
+    assert page.has_selector?('.notifications'), "Notifications drawer was expected to be opend, but was found closed"
+
+    page.find('button[aria-label="Close"]').click
   end
 
   def navigate_somewhere_with_turbolinks

webpack/assets/javascripts/react_app/common/__mocks__/I18n.js

@@ -12,6 +12,8 @@ export const intl = {
   locale: 'en',
 };
 
+export const documentLocale = jest.fn(() => 'en');
+
 const i18n = {
   translate,
   ngettext,

webpack/assets/javascripts/react_app/components/Layout/Layout.js

@@ -35,45 +35,43 @@ const Layout = ({
     }
   };
   return (
-    <>
-      <Flex
-        direction={{ default: 'column' }}
-        flexWrap={{ default: 'nowrap' }}
-        spaceItems={{ default: 'spaceItemsNone' }}
-        style={{ height: '100%' }}
-      >
-        <FlexItem>
-          <InstanceBanner data={data} />
-        </FlexItem>
-        <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
-          <Page
-            mainContainerId="foreman-main-container"
-            header={
-              <Header
-                data={data}
-                onNavToggle={onNavToggle}
-                isLoading={isLoading}
-              />
-            }
-            id="foreman-page"
-            sidebar={
-              <PageSidebar isSidebarOpen={!isCollapsed}>
-                <PageSidebarBody>
-                  <Navigation
-                    items={items}
-                    navigate={navigate}
-                    navigationActiveItem={navigationActiveItem}
-                    setNavigationActiveItem={setNavigationActiveItem}
-                  />
-                </PageSidebarBody>
-              </PageSidebar>
-            }
-          >
-            {children}
-          </Page>
-        </FlexItem>
-      </Flex>
-    </>
+    <Flex
+      direction={{ default: 'column' }}
+      flexWrap={{ default: 'nowrap' }}
+      spaceItems={{ default: 'spaceItemsNone' }}
+      style={{ height: '100%' }}
+    >
+      <FlexItem>
+        <InstanceBanner data={data} />
+      </FlexItem>
+      <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
+        <Page
+          mainContainerId="foreman-main-container"
+          header={
+            <Header
+              data={data}
+              onNavToggle={onNavToggle}
+              isLoading={isLoading}
+            />
+          }
+          id="foreman-page"
+          sidebar={
+            <PageSidebar isSidebarOpen={!isCollapsed}>
+              <PageSidebarBody>
+                <Navigation
+                  items={items}
+                  navigate={navigate}
+                  navigationActiveItem={navigationActiveItem}
+                  setNavigationActiveItem={setNavigationActiveItem}
+                />
+              </PageSidebarBody>
+            </PageSidebar>
+          }
+        >
+          {children}
+        </Page>
+      </FlexItem>
+    </Flex>
   );
 };
 

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js

@@ -8,7 +8,6 @@ import {
 } from '@patternfly/react-core';
 import TaxonomySwitcher from '../TaxonomySwitcher/TaxonomySwitcher';
 import UserDropdowns from './UserDropdowns';
-import NotificationContainer from '../../../notifications';
 import ImpersonateIcon from '../ImpersonateIcon';
 import {
   layoutPropTypes,
@@ -18,6 +17,9 @@ import {
   userPropType,
 } from '../../LayoutHelper';
 import './HeaderToolbar.scss';
+import NotificationIcon from '../../../notifications/components/NotificationIcon';
+import { NotificationsContextWrapper } from '../../../notifications/NotificationsContext';
+import Notifications from '../../../notifications';
 
 const HeaderToolbar = ({
   locations,
@@ -37,15 +39,17 @@ const HeaderToolbar = ({
         />
       </ToolbarGroup>
       <ToolbarGroup align={{ default: 'alignRight' }}>
-        <ToolbarItem className="notifications_container">
-          <NotificationContainer data={{ url: notificationUrl }} />
+        <ToolbarItem>
+          <NotificationsContextWrapper>
+            <NotificationIcon />
+            <Notifications />
+          </NotificationsContextWrapper>
         </ToolbarItem>
         {user.impersonated_by && (
           <ToolbarItem className="impersonation-item">
             <ImpersonateIcon stopImpersonationUrl={stopImpersonationUrl} />
           </ToolbarItem>
         )}
-
         <ToolbarItem className="header-tool-item-hidden-lg user-nav-item">
           <UserDropdowns notificationUrl={notificationUrl} user={user} />
         </ToolbarItem>

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap

@@ -53,16 +53,11 @@ exports[`HeaderToolbar rendering render HeaderToolbar 1`] = `
         }
       }
     >
-      <ToolbarItem
-        className="notifications_container"
-      >
-        <Connect(OnClickOutside(notificationContainer))
-          data={
-            Object {
-              "url": "/notification_recipients",
-            }
-          }
-        />
+      <ToolbarItem>
+        <NotificationsContextWrapper>
+          <NotificationIcon />
+          <Notifications />
+        </NotificationsContextWrapper>
       </ToolbarItem>
       <ToolbarItem
         className="impersonation-item"

webpack/assets/javascripts/react_app/components/notifications/NotificationDrawerSessionStorage.js

@@ -1,9 +1,5 @@
 import { getValue, setValue } from '../../common/SessionStorage';
 
-export const getIsOpened = () => getValue('isDrawerOpen');
-export const setIsOpened = value => setValue('isDrawerOpen', value);
-export const getExpandedGroup = () => getValue('expandedGroup');
-export const setExpandedGroup = value => setValue('expandedGroup', value);
 export const getHasUnreadMessages = () => getValue('hasUnreadMessages');
 export const setHasUnreadMessages = value =>
   setValue('hasUnreadMessages', value);

webpack/assets/javascripts/react_app/components/notifications/NotificationsContext.js

@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { NotificationBadgeVariant as BadgeVariant } from '@patternfly/react-core';
+import { groupBy } from 'lodash';
+import { startNotificationsPolling } from '../../redux/actions/notifications';
+import forceSingleton from '../../common/forceSingleton';
+
+export const NotificationsContext = forceSingleton('NotificationsContext', () =>
+  React.createContext({})
+);
+
+export const NotificationsContextWrapper = ({ children }) => {
+  const dispatch = useDispatch();
+  const drawerRef = React.useRef(null);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [variant, setVariant] = useState(BadgeVariant.read);
+
+  const notificationsState = useSelector(state => state.notifications);
+  const notifications = groupBy(notificationsState.notifications, n => n.group);
+
+  const [expandedNotifications, setExpandedNotifications] = useState([]);
+  const [expandedKebab, setExpandedKebab] = useState('');
+
+  const isGroupExpanded = key => expandedNotifications.includes(key);
+  const isKebabExpanded = key => expandedKebab === key;
+
+  const toggleNotifications = key => {
+    const otherExpanded = expandedNotifications.filter(
+      arrKeys => arrKeys !== key
+    );
+    return isGroupExpanded(key)
+      ? setExpandedNotifications(otherExpanded)
+      : setExpandedNotifications([...otherExpanded, key]);
+  };
+
+  const toggleKebab = key => {
+    isKebabExpanded(key) ? setExpandedKebab('') : setExpandedKebab(key);
+  };
+
+  const closeNotificationsDrawer = () => {
+    toggleKebab('');
+    toggleExpanded();
+  };
+
+  useEffect(() => {
+    dispatch(startNotificationsPolling());
+  }, [dispatch]);
+
+  const countUnreadMessages = useMemo(() => {
+    if (notificationsState.notifications) {
+      const count = Object.values(notificationsState.notifications).filter(
+        n => !n.seen
+      ).length;
+
+      setVariant(count > 0 ? BadgeVariant.unread : BadgeVariant.read);
+      return count;
+    }
+    return 0;
+  }, [notificationsState]);
+
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <NotificationsContext.Provider
+      value={{
+        isExpanded,
+        setIsExpanded,
+        toggleExpanded,
+        variant,
+        drawerRef,
+        notifications,
+        countUnreadMessages,
+        dispatch,
+        toggleKebab,
+        isKebabExpanded,
+        isGroupExpanded,
+        closeNotificationsDrawer,
+        toggleNotifications,
+      }}
+    >
+      {children}
+    </NotificationsContext.Provider>
+  );
+};
+
+NotificationsContextWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};

webpack/assets/javascripts/react_app/components/notifications/NotificationsDrawerHelpers.js

@@ -0,0 +1,19 @@
+import { documentLocale } from '../../common/I18n';
+
+export const formatDateTime = datetime => {
+  const locale = documentLocale();
+  const options = {
+    month: 'numeric',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: true,
+  };
+  try {
+    return new Date(datetime).toLocaleDateString(locale, options);
+  } catch {
+    return new Date(datetime).toLocaleDateString('en', options);
+  }
+};