fix: Drop deprecated Patternfly components, make toolbar responsive

loopholelabs · May 24, 2024 · 5142192 · 5142192
1 parent 5a835ed
commit 5142192
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/pkg/frontend/src/App.tsx b/pkg/frontend/src/App.tsx
@@ -21,6 +21,10 @@ import {
   FormGroup,
   HelperText,
   HelperTextItem,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
   Modal,
   Page,
   PageSection,
@@ -32,9 +36,9 @@ import {
   Title,
   Toolbar,
   ToolbarContent,
+  ToolbarGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { PageHeader, PageHeaderTools } from "@patternfly/react-core/deprecated";
 import {
   CogIcon,
   DownloadIcon,
@@ -567,27 +571,30 @@ const App = () => {
 
       <Page
         header={
-          <PageHeader
-            logo={
-              <>
+          <Masthead display={{ default: "stack", sm: "inline" }}>
+            <MastheadMain>
+              {/* <MastheadBrand>
                 <Brand
                   src={logoDark}
                   className="pf-v6-c-brand--dark pf-v6-u-py-sm"
                   alt="LatenSee logo (dark variant)"
                 />
+              </MastheadBrand> */}
 
+              <MastheadBrand>
                 <Brand
                   src={logoLight}
-                  className="pf-v6-c-brand--light pf-v6-u-py-sm"
+                  className="pf-v6-c-brand--light"
                   alt="LatenSee logo (light variant)"
+                  heights={{ default: "36px" }}
                 />
-              </>
-            }
-            logoComponent="div"
-            headerTools={
-              <PageHeaderTools>
-                <Toolbar>
-                  <ToolbarContent className="pf-v6-u-pr-0">
+              </MastheadBrand>
+            </MastheadMain>
+
+            <MastheadContent>
+              <Toolbar>
+                <ToolbarContent>
+                  <ToolbarGroup align={{ default: "alignEnd" }}>
                     <ToolbarItem>
                       <Button
                         variant="plain"
@@ -729,11 +736,11 @@ const App = () => {
                         </span>
                       </Button>
                     </ToolbarItem>
-                  </ToolbarContent>
-                </Toolbar>
-              </PageHeaderTools>
-            }
-          />
+                  </ToolbarGroup>
+                </ToolbarContent>
+              </Toolbar>
+            </MastheadContent>
+          </Masthead>
         }
       >
         <div ref={ref} className="pf-v6-x-chart">

diff --git a/pkg/frontend/src/main.scss b/pkg/frontend/src/main.scss
@@ -26,14 +26,6 @@ body,
   border: 0;
 }
 
-.pf-v6-c-toolbar__content {
-  overflow-x: auto;
-}
-
-.pf-v6-c-toolbar__content-section {
-  flex-wrap: nowrap;
-}
-
 .pf-v6-x-text--helper {
   justify-content: center;
 }
@@ -64,3 +56,16 @@ body,
     display: none;
   }
 }
+
+.pf-v6-c-masthead__main {
+  margin-left: calc(0px - var(--pf-v6-c-masthead--ColumnGap));
+}
+
+.pf-v6-c-masthead__brand {
+  margin: 0 auto;
+}
+
+.pf-v6-c-toolbar__group {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}