From 58c149a6f73d5fa29a6f068ac4942bc9480f9547 Mon Sep 17 00:00:00 2001
From: Eric Gustavsson <egustavs@redhat.com>
Date: Sat, 24 Jun 2023 15:28:14 +0200
Subject: [PATCH] refactor: Move page header away from legacy

This changes the page header to use Masthead instead of the
legacy PageHeader component. This simplifies the structure of
the header as well as allowing us to do more things in the future
---
 frontend/src/app/AppLayout/AppLayout.tsx | 121 ++++++++++++++---------
 1 file changed, 72 insertions(+), 49 deletions(-)

diff --git a/frontend/src/app/AppLayout/AppLayout.tsx b/frontend/src/app/AppLayout/AppLayout.tsx
index c580505..9876f7c 100644
--- a/frontend/src/app/AppLayout/AppLayout.tsx
+++ b/frontend/src/app/AppLayout/AppLayout.tsx
@@ -1,26 +1,32 @@
 import { NavLink, Outlet, matchRoutes, useLocation } from "react-router-dom";
 import {
-    Brand,
     Nav,
     NavList,
     NavItem,
     Page,
-    PageHeaderTools,
-    PageHeader,
     PageSidebar,
     Button,
     SkipToContent,
     Text,
     TextContent,
     Popover,
+    Masthead,
+    MastheadBrand,
+    MastheadContent,
+    MastheadMain,
+    MastheadToggle,
+    PageToggleButton,
+    Toolbar,
+    ToolbarContent,
+    ToolbarItem,
 } from "@patternfly/react-core";
 import { routes } from "../routes";
 import packitLogo from "../../static/logo.png";
 import { useState, useEffect } from "react";
 import {
-    ExternalLinkSquareAltIcon,
     ExternalLinkAltIcon,
     CodeBranchIcon,
+    BarsIcon,
 } from "@patternfly/react-icons";
 
 const AppLayout = () => {
@@ -41,9 +47,6 @@ const AppLayout = () => {
         }
     }, [currentRouteTree]);
 
-    const logoProps = {
-        href: "/",
-    };
     const [isNavOpen, setIsNavOpen] = useState(true);
     const [isMobileView, setIsMobileView] = useState(true);
     const [isNavOpenMobile, setIsNavOpenMobile] = useState(false);
@@ -57,54 +60,74 @@ const AppLayout = () => {
         setIsMobileView(props.mobileView);
     };
 
-    const HeaderTools = (
-        <PageHeaderTools>
-            <Popover
-                headerContent={"About open source"}
-                flipBehavior={["bottom-end"]}
-                bodyContent={
-                    <TextContent>
-                        <Text>
-                            This service is open source, so all of its code is
-                            inspectable. Explore repositories to view and
-                            contribute to the source code.
-                        </Text>
+    const headerToolbar = (
+        <Toolbar id="header-toolbar">
+            <ToolbarContent>
+                <ToolbarItem alignment={{ default: "alignRight" }}>
+                    <Popover
+                        headerContent={"About open source"}
+                        flipBehavior={["bottom-end"]}
+                        bodyContent={
+                            <TextContent>
+                                <Text>
+                                    This service is open source, so all of its
+                                    code is inspectable. Explore repositories to
+                                    view and contribute to the source code.
+                                </Text>
+                                <Button
+                                    component="a"
+                                    target="_blank"
+                                    variant="link"
+                                    icon={<ExternalLinkAltIcon />}
+                                    iconPosition="right"
+                                    isInline
+                                    href={`https://github.com/packit/dashboard/commit/${
+                                        import.meta.env.VITE_GIT_SHA
+                                    }`}
+                                >
+                                    Source code
+                                </Button>
+                            </TextContent>
+                        }
+                    >
                         <Button
-                            component="a"
-                            target="_blank"
-                            variant="link"
-                            icon={<ExternalLinkAltIcon />}
-                            iconPosition="right"
-                            isInline
-                            href={`https://github.com/packit/dashboard/commit/${
-                                import.meta.env.VITE_GIT_SHA
-                            }`}
+                            variant="plain"
+                            aria-label="About Open Services"
                         >
-                            Source code
+                            <CodeBranchIcon />
                         </Button>
-                    </TextContent>
-                }
-            >
-                <Button
-                    variant="plain"
-                    aria-label="About Open Services"
-                    className="pf-u-pl-sm header-button"
-                >
-                    <CodeBranchIcon />
-                </Button>
-            </Popover>
-        </PageHeaderTools>
+                    </Popover>
+                </ToolbarItem>
+            </ToolbarContent>
+        </Toolbar>
     );
+
     const Header = (
-        <PageHeader
-            logo={<Brand src={packitLogo} alt="Packit Logo" />}
-            logoProps={logoProps}
-            showNavToggle
-            isNavOpen={isNavOpen}
-            onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
-            headerTools={HeaderTools}
-        />
+        <Masthead>
+            <MastheadToggle>
+                <PageToggleButton
+                    variant="plain"
+                    aria-label="Global navigation"
+                    isNavOpen={isNavOpen}
+                    onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
+                    id="vertical-nav-toggle"
+                >
+                    <BarsIcon />
+                </PageToggleButton>
+            </MastheadToggle>
+            <MastheadMain>
+                <MastheadBrand href="/">
+                    <img
+                        src={packitLogo}
+                        style={{ height: "60px" }}
+                        alt="Packit Logo"
+                    />
+                </MastheadBrand>
+            </MastheadMain>
+            <MastheadContent>{headerToolbar}</MastheadContent>
+        </Masthead>
     );
+
     const Navigation = (
         <Nav id="nav-primary-simple" theme="dark">
             <NavList id="nav-list-simple">