✨ [WIP] Implement the Task Manager drawer

Resolves: #1938

Add a queued tasks count badge plus and item drawer.

  - Use the standard `NotificationDrawer` attached to
    the `Page` layout to render the task manager item
    drawer.

  - Add a `TaskManagerContext` to control the count indicator
    and visibility of the drawer.  This is a top level context
    so the task manager is available on all pages.

__Still Needs__:
  - Query for hitting the queued count endpoint
  - Query for pulling queued task details at a set page size (pull just
    enough so the user needs to scroll to see more)
  - Task rows in the notification drawer
  - Individual task actions
  - Infinite scroll on the task list (or at least a load more link/icon,
    maybe a visual indicator that more can be fetched on scroll or click)

Related changes:
  - Update the `HeaderApp` to handle visibility of masthead
    toolbar items at the `ToolbarGroup` level.

  - Rename `SSOMenu` to `SsoToolbarItem`.

Signed-off-by: Scott J Dickerson <[email protected]>

Author: sjd78

client/src/app/App.tsx

@@ -4,16 +4,19 @@ import { BrowserRouter } from "react-router-dom";
 import { AppRoutes } from "./Routes";
 import { DefaultLayout } from "./layout";
 import { NotificationsProvider } from "./components/NotificationsContext";
+import { TaskManagerProvider } from "./components/task-manager/TaskManagerContext";
 
 import "./app.css";
 
 const App: React.FC = () => {
   return (
     <BrowserRouter>
       <NotificationsProvider>
-        <DefaultLayout>
-          <AppRoutes />
-        </DefaultLayout>
+        <TaskManagerProvider>
+          <DefaultLayout>
+            <AppRoutes />
+          </DefaultLayout>
+        </TaskManagerProvider>
       </NotificationsProvider>
     </BrowserRouter>
   );

client/src/app/components/task-manager/TaskManagerContext.tsx

@@ -0,0 +1,48 @@
+import React, { useContext, useState } from "react";
+
+interface TaskManagerContextProps {
+  queuedCount: number;
+  setQueuedCount: (value: number) => void;
+
+  isExpanded: boolean;
+  setIsExpanded: (value: boolean) => void;
+}
+
+const TaskManagerContext = React.createContext<TaskManagerContextProps>({
+  queuedCount: 0,
+  setQueuedCount: () => undefined,
+
+  isExpanded: false,
+  setIsExpanded: () => undefined,
+});
+
+export const useTaskManagerContext = () => {
+  const values = useContext(TaskManagerContext);
+
+  return values;
+};
+
+export const TaskManagerProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [queuedCount, setQueuedCount] = useState(0);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // TODO: Setup the count query here!
+  setTimeout(() => {
+    setQueuedCount(queuedCount + 5);
+  }, 5000);
+
+  return (
+    <TaskManagerContext.Provider
+      value={{
+        queuedCount,
+        setQueuedCount,
+        isExpanded,
+        setIsExpanded,
+      }}
+    >
+      {children}
+    </TaskManagerContext.Provider>
+  );
+};

client/src/app/components/task-manager/TaskManagerDrawer.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from "react";
+import { Link } from "react-router-dom";
+import {
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerHeader,
+  NotificationDrawerList,
+} from "@patternfly/react-core";
+import { useTaskManagerContext } from "./TaskManagerContext";
+
+interface TaskManagerDrawerProps {
+  ref?: React.ForwardedRef<HTMLElement>;
+}
+
+export const TaskManagerDrawer: React.FC<TaskManagerDrawerProps> = forwardRef(
+  (_props, ref) => {
+    const { isExpanded, setIsExpanded, queuedCount } = useTaskManagerContext();
+
+    const closeDrawer = () => {
+      setIsExpanded(!isExpanded);
+    };
+
+    return (
+      <NotificationDrawer ref={ref}>
+        <NotificationDrawerHeader
+          title="Task Manager"
+          customText={`${queuedCount} queued`}
+          onClose={closeDrawer}
+        >
+          {/* TODO: proper link to task page */}
+          <Link to=".">View All Tasks</Link>
+        </NotificationDrawerHeader>
+        <NotificationDrawerBody>
+          <NotificationDrawerList></NotificationDrawerList>
+        </NotificationDrawerBody>
+      </NotificationDrawer>
+    );
+  }
+);
+
+TaskManagerDrawer.displayName = "TaskManagerDrawer";

client/src/app/components/task-manager/TaskNotificaitonBadge.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { NotificationBadge } from "@patternfly/react-core";
+import { useTaskManagerContext } from "./TaskManagerContext";
+
+export const TaskNotificationBadge: React.FC = () => {
+  const { isExpanded, setIsExpanded, queuedCount } = useTaskManagerContext();
+
+  const badgeClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <NotificationBadge
+      aria-label="Count of queued tasks"
+      variant={queuedCount > 0 ? "unread" : "read"}
+      count={queuedCount}
+      onClick={badgeClick}
+      isExpanded={isExpanded}
+    />
+  );
+};

client/src/app/layout/DefaultLayout/DefaultLayout.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Page, SkipToContent } from "@patternfly/react-core";
 
 import { HeaderApp } from "../HeaderApp";
 import { SidebarApp } from "../SidebarApp";
 import { Notifications } from "@app/components/Notifications";
 import { PageContentWithDrawerProvider } from "@app/components/PageDrawerContext";
+import { TaskManagerDrawer } from "@app/components/task-manager/TaskManagerDrawer";
+import { useTaskManagerContext } from "@app/components/task-manager/TaskManagerContext";
 
 export interface DefaultLayoutProps {}
 
@@ -14,13 +16,20 @@ export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
     <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>
   );
 
+  // TODO: Task manager ref, use to focus on the drawer when it opens
+  const drawerRef = useRef<HTMLElement | null>(null);
+
+  const { isExpanded } = useTaskManagerContext();
+
   return (
     <Page
       header={<HeaderApp />}
       sidebar={<SidebarApp />}
       isManagedSidebar
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
+      isNotificationDrawerExpanded={isExpanded}
+      notificationDrawer={<TaskManagerDrawer ref={drawerRef} />}
     >
       <PageContentWithDrawerProvider>
         {children}

client/src/app/layout/HeaderApp/HeaderApp.tsx

@@ -19,8 +19,9 @@ import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 import BarsIcon from "@patternfly/react-icons/dist/js/icons/bars-icon";
 
 import useBranding from "@app/hooks/useBranding";
+import { TaskNotificationBadge } from "@app/components/task-manager/TaskNotificaitonBadge";
 import { AppAboutModalState } from "../AppAboutModalState";
-import { SSOMenu } from "./SSOMenu";
+import { SsoToolbarItem } from "./SsoToolbarItem";
 import { MobileDropdown } from "./MobileDropdown";
 
 import "./header.css";
@@ -33,9 +34,21 @@ export const HeaderApp: React.FC = () => {
   const toolbar = (
     <Toolbar isFullHeight isStatic>
       <ToolbarContent>
+        {/* toolbar items to always show */}
         <ToolbarGroup
+          id="header-toolbar-tasks"
           variant="icon-button-group"
           align={{ default: "alignRight" }}
+        >
+          <ToolbarItem>
+            <TaskNotificationBadge />
+          </ToolbarItem>
+        </ToolbarGroup>
+
+        {/* toolbar items to show at desktop sizes */}
+        <ToolbarGroup
+          id="header-toolbar-desktop"
+          variant="icon-button-group"
           spacer={{ default: "spacerNone", md: "spacerMd" }}
           visibility={{
             default: "hidden",
@@ -62,16 +75,30 @@ export const HeaderApp: React.FC = () => {
             </AppAboutModalState>
           </ToolbarItem>
         </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem
-            visibility={{
-              lg: "hidden",
-            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-          >
+
+        {/* toolbar items to show at mobile sizes */}
+        <ToolbarGroup
+          id="header-toolbar-mobile"
+          variant="icon-button-group"
+          spacer={{ default: "spacerNone", md: "spacerMd" }}
+          visibility={{ lg: "hidden" }}
+        >
+          <ToolbarItem>
             <MobileDropdown />
           </ToolbarItem>
-          <SSOMenu />
         </ToolbarGroup>
+
+        {/* Show the SSO menu at desktop sizes */}
+        <ToolbarGroup
+          id="header-toolbar-sso"
+          visibility={{
+            default: "hidden",
+            md: "visible",
+          }}
+        >
+          <SsoToolbarItem />
+        </ToolbarGroup>
+
         {rightBrand ? (
           <ToolbarGroup>
             <ToolbarItem>