🌱 chore(Header): use new pf masthead (#1282)

closes #1243 --------- Signed-off-by: gitdallas <[email protected]> Co-authored-by: Ian Bolton <[email protected]>
konveyor · Aug 15, 2023 · a9f64a7 · a9f64a7
1 parent b086b18
commit a9f64a7
Show file tree

Hide file tree

Showing 3 changed files with 320 additions and 225 deletions.
diff --git a/client/src/app/layout/HeaderApp/HeaderApp.tsx b/client/src/app/layout/HeaderApp/HeaderApp.tsx
@@ -1,80 +1,109 @@
 import React from "react";
-import { Brand, Button, ButtonVariant, Title } from "@patternfly/react-core";
 import {
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem,
-} from "@patternfly/react-core/deprecated";
+  Brand,
+  Button,
+  ButtonVariant,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  PageToggleButton,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from "@patternfly/react-core";
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
-
+import BarsIcon from "@patternfly/react-icons/dist/js/icons/bars-icon";
 import { AppAboutModalState } from "../AppAboutModalState";
 import { SSOMenu } from "./SSOMenu";
 import { MobileDropdown } from "./MobileDropdown";
 
 import konveyorBrandImage from "@app/images/Konveyor-white-logo.svg";
-import { APP_BRAND, BrandType, isAuthRequired } from "@app/Constants";
+import { APP_BRAND, BrandType } from "@app/Constants";
 import logoRedHat from "@app/images/logoRedHat.svg";
 import "./header.css";
 
 export const HeaderApp: React.FC = () => {
   const toolbar = (
-    <PageHeaderTools>
-      <PageHeaderToolsGroup
-        visibility={{
-          default: "hidden",
-          "2xl": "visible",
-          xl: "visible",
-          lg: "visible",
-          md: "hidden",
-          sm: "hidden",
-        }}
-      >
-        <PageHeaderToolsItem>
-          <AppAboutModalState>
-            {({ toggleModal }) => {
-              return (
-                <Button
-                  id="about-button"
-                  aria-label="about button"
-                  variant={ButtonVariant.plain}
-                  onClick={toggleModal}
-                >
-                  <HelpIcon />
-                </Button>
-              );
-            }}
-          </AppAboutModalState>
-        </PageHeaderToolsItem>
-      </PageHeaderToolsGroup>
-      <PageHeaderToolsGroup>
-        <PageHeaderToolsItem
+    <Toolbar isFullHeight isStatic>
+      <ToolbarContent>
+        <ToolbarGroup
+          variant="icon-button-group"
+          align={{ default: "alignRight" }}
+          spacer={{ default: "spacerNone", md: "spacerMd" }}
           visibility={{
-            lg: "hidden",
-          }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
+            default: "hidden",
+            "2xl": "visible",
+            xl: "visible",
+            lg: "visible",
+            md: "hidden",
+          }}
         >
-          <MobileDropdown />
-        </PageHeaderToolsItem>
-        <SSOMenu />
-      </PageHeaderToolsGroup>
-      {APP_BRAND === BrandType.MTA && (
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem>
-            <img src={logoRedHat} alt="Logo" className="redhat-logo-style" />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
+          <ToolbarItem>
+            <AppAboutModalState>
+              {({ toggleModal }) => {
+                return (
+                  <Button
+                    id="about-button"
+                    aria-label="about button"
+                    variant={ButtonVariant.plain}
+                    onClick={toggleModal}
+                  >
+                    <HelpIcon />
+                  </Button>
+                );
+              }}
+            </AppAboutModalState>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <ToolbarItem
+            visibility={{
+              lg: "hidden",
+            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
+          >
+            <MobileDropdown />
+          </ToolbarItem>
+          <SSOMenu />
+        </ToolbarGroup>
+        {APP_BRAND === BrandType.MTA && (
+          <ToolbarGroup>
+            <ToolbarItem>
+              <img src={logoRedHat} alt="Logo" className="redhat-logo-style" />
+            </ToolbarItem>
+          </ToolbarGroup>
+        )}
+      </ToolbarContent>
+    </Toolbar>
+  );
+  return (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      {APP_BRAND === BrandType.Konveyor ? (
+        <MastheadMain>
+          <MastheadBrand>
+            <Brand
+              src={konveyorBrandImage}
+              alt="brand"
+              heights={{ default: "60px" }}
+            />
+          </MastheadBrand>
+        </MastheadMain>
+      ) : (
+        <MastheadContent>
+          <Title className="logo-pointer" headingLevel="h1" size="2xl">
+            Migration Toolkit for Applications
+          </Title>
+        </MastheadContent>
       )}
-    </PageHeaderTools>
+      <MastheadContent>{toolbar}</MastheadContent>
+    </Masthead>
   );
-
-  const headerLogo =
-    APP_BRAND === BrandType.Konveyor ? (
-      <Brand src={konveyorBrandImage} alt="brand" />
-    ) : (
-      <Title className="logo-pointer" headingLevel="h1" size="2xl">
-        Migration Toolkit for Applications
-      </Title>
-    );
-
-  return <PageHeader logo={headerLogo} headerTools={toolbar} showNavToggle />;
 };
diff --git a/client/src/app/layout/HeaderApp/SSOMenu.tsx b/client/src/app/layout/HeaderApp/SSOMenu.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useKeycloak } from "@react-keycloak/web";
-import { DropdownGroup, DropdownItem } from "@patternfly/react-core";
 import {
-  Dropdown,
-  DropdownToggle,
-  PageHeaderToolsItem,
-} from "@patternfly/react-core/deprecated";
+  DropdownGroup,
+  DropdownItem,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { Dropdown, DropdownToggle } from "@patternfly/react-core/deprecated";
 import { isAuthRequired, LocalStorageKey } from "@app/Constants";
 import { useHistory } from "react-router-dom";
 
@@ -27,7 +27,7 @@ export const SSOMenu: React.FC = () => {
   return (
     <>
       {keycloak && (
-        <PageHeaderToolsItem
+        <ToolbarItem
           visibility={{
             default: "hidden",
             md: "visible",
@@ -82,7 +82,7 @@ export const SSOMenu: React.FC = () => {
               </DropdownGroup>,
             ]}
           />
-        </PageHeaderToolsItem>
+        </ToolbarItem>
       )}
     </>
   );