From a9f64a789b29a0f844ec387a2166eba4b1661b57 Mon Sep 17 00:00:00 2001
From: Dallas <dallas.nicol@gmail.com>
Date: Tue, 15 Aug 2023 08:05:59 -0500
Subject: [PATCH] :seedling: chore(Header): use new pf masthead (#1282)

closes #1243

---------

Signed-off-by: gitdallas <dallas.nicol@gmail.com>
Co-authored-by: Ian Bolton <ibolton@redhat.com>
---
 client/src/app/layout/HeaderApp/HeaderApp.tsx | 153 ++++---
 client/src/app/layout/HeaderApp/SSOMenu.tsx   |  14 +-
 .../__snapshots__/HeaderApp.test.tsx.snap     | 378 ++++++++++--------
 3 files changed, 320 insertions(+), 225 deletions(-)

diff --git a/client/src/app/layout/HeaderApp/HeaderApp.tsx b/client/src/app/layout/HeaderApp/HeaderApp.tsx
index f526f479fb..5e5b701fa7 100644
--- 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
index 9f1e5ff6e1..d43b08d970 100644
--- 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>
       )}
     </>
   );
diff --git a/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap b/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap
index 752b5af08d..77df778eaf 100644
--- a/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap
+++ b/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap
@@ -6,109 +6,142 @@ exports[`Test snapshot 1`] = `
   "baseElement": <body>
     <div>
       <header
-        class="pf-v5-c-page__header"
+        class="pf-v5-c-masthead pf-m-display-inline-on-md"
       >
-        <div
-          class="pf-v5-c-page__header-brand"
+        <span
+          class="pf-v5-c-masthead__toggle"
         >
-          <div
-            class="pf-v5-c-page__header-brand-toggle"
+          <button
+            aria-disabled="false"
+            aria-expanded="true"
+            aria-label="Global navigation"
+            class="pf-v5-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-1"
+            data-ouia-component-type="PF5/Button"
+            data-ouia-safe="true"
+            id="nav-toggle"
+            type="button"
           >
-            <button
-              aria-disabled="false"
-              aria-expanded="true"
-              aria-label="Global navigation"
-              class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              id="nav-toggle"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 448 512"
-                width="1em"
-              >
-                <path
-                  d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
-                />
-              </svg>
-            </button>
-          </div>
+              <path
+                d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+              />
+            </svg>
+          </button>
+        </span>
+        <div
+          class="pf-v5-c-masthead__main"
+        >
           <span
-            class="pf-v5-c-page__header-brand-link"
+            class="pf-v5-c-masthead__brand"
           >
             <img
               alt="brand"
               class="pf-v5-c-brand"
               src="test-file-stub"
+              style="--pf-v5-c-brand--Height: 60px;"
             />
           </span>
         </div>
         <div
-          class="pf-v5-c-page__header-tools"
+          class="pf-v5-c-masthead__content"
         >
           <div
-            class="pf-v5-c-page__header-tools-group pf-m-hidden pf-m-visible-on-2xl pf-m-visible-on-xl pf-m-visible-on-lg pf-m-hidden-on-md pf-m-hidden-on-sm"
-          >
-            <div
-              class="pf-v5-c-page__header-tools-item"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="about button"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="about-button"
-                type="button"
-              >
-                <test-file-stub />
-              </button>
-            </div>
-          </div>
-          <div
-            class="pf-v5-c-page__header-tools-group"
+            class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
+            data-ouia-component-id="OUIA-Generated-Toolbar-1"
+            data-ouia-component-type="PF5/Toolbar"
+            data-ouia-safe="true"
+            id="pf-random-id-0"
           >
             <div
-              class="pf-v5-c-page__header-tools-item pf-m-hidden-on-lg"
+              class="pf-v5-c-toolbar__content"
             >
               <div
-                class="pf-v5-c-dropdown pf-m-align-right"
-                data-ouia-component-id="OUIA-Generated-Dropdown-1"
-                data-ouia-component-type="PF5/Dropdown"
-                data-ouia-safe="true"
+                class="pf-v5-c-toolbar__content-section"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="Actions"
-                  class="pf-v5-c-dropdown__toggle pf-m-plain"
-                  id="pf-dropdown-toggle-id-0"
-                  type="button"
+                <div
+                  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-2xl pf-m-visible-on-xl pf-m-visible-on-lg pf-m-hidden-on-md pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
+                  <div
+                    class="pf-v5-c-toolbar__item"
                   >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </button>
+                    <button
+                      aria-disabled="false"
+                      aria-label="about button"
+                      class="pf-v5-c-button pf-m-plain"
+                      data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                      data-ouia-component-type="PF5/Button"
+                      data-ouia-safe="true"
+                      id="about-button"
+                      type="button"
+                    >
+                      <test-file-stub />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="pf-v5-c-toolbar__group"
+                >
+                  <div
+                    class="pf-v5-c-toolbar__item pf-m-hidden-on-lg"
+                  >
+                    <div
+                      class="pf-v5-c-dropdown pf-m-align-right"
+                      data-ouia-component-id="OUIA-Generated-Dropdown-1"
+                      data-ouia-component-type="PF5/Dropdown"
+                      data-ouia-safe="true"
+                    >
+                      <button
+                        aria-expanded="false"
+                        aria-haspopup="true"
+                        aria-label="Actions"
+                        class="pf-v5-c-dropdown__toggle pf-m-plain"
+                        id="pf-dropdown-toggle-id-0"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v5-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 192 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="pf-v5-c-toolbar__expandable-content"
+                id="pf-random-id-0-expandable-content-0"
+              >
+                <div
+                  class="pf-v5-c-toolbar__group"
+                />
               </div>
             </div>
+            <div
+              class="pf-v5-c-toolbar__content pf-m-hidden"
+              hidden=""
+            >
+              <div
+                class="pf-v5-c-toolbar__group"
+              />
+            </div>
           </div>
         </div>
       </header>
@@ -116,108 +149,141 @@ exports[`Test snapshot 1`] = `
   </body>,
   "container": <div>
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v5-c-masthead pf-m-display-inline-on-md"
     >
-      <div
-        class="pf-v5-c-page__header-brand"
+      <span
+        class="pf-v5-c-masthead__toggle"
       >
-        <div
-          class="pf-v5-c-page__header-brand-toggle"
+        <button
+          aria-disabled="false"
+          aria-expanded="true"
+          aria-label="Global navigation"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          id="nav-toggle"
+          type="button"
         >
-          <button
-            aria-disabled="false"
-            aria-expanded="true"
-            aria-label="Global navigation"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
-            id="nav-toggle"
-            type="button"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 448 512"
-              width="1em"
-            >
-              <path
-                d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
-              />
-            </svg>
-          </button>
-        </div>
+            <path
+              d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+            />
+          </svg>
+        </button>
+      </span>
+      <div
+        class="pf-v5-c-masthead__main"
+      >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v5-c-masthead__brand"
         >
           <img
             alt="brand"
             class="pf-v5-c-brand"
             src="test-file-stub"
+            style="--pf-v5-c-brand--Height: 60px;"
           />
         </span>
       </div>
       <div
-        class="pf-v5-c-page__header-tools"
+        class="pf-v5-c-masthead__content"
       >
         <div
-          class="pf-v5-c-page__header-tools-group pf-m-hidden pf-m-visible-on-2xl pf-m-visible-on-xl pf-m-visible-on-lg pf-m-hidden-on-md pf-m-hidden-on-sm"
+          class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
+          data-ouia-component-id="OUIA-Generated-Toolbar-1"
+          data-ouia-component-type="PF5/Toolbar"
+          data-ouia-safe="true"
+          id="pf-random-id-0"
         >
           <div
-            class="pf-v5-c-page__header-tools-item"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="about button"
-              class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              id="about-button"
-              type="button"
-            >
-              <test-file-stub />
-            </button>
-          </div>
-        </div>
-        <div
-          class="pf-v5-c-page__header-tools-group"
-        >
-          <div
-            class="pf-v5-c-page__header-tools-item pf-m-hidden-on-lg"
+            class="pf-v5-c-toolbar__content"
           >
             <div
-              class="pf-v5-c-dropdown pf-m-align-right"
-              data-ouia-component-id="OUIA-Generated-Dropdown-1"
-              data-ouia-component-type="PF5/Dropdown"
-              data-ouia-safe="true"
+              class="pf-v5-c-toolbar__content-section"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Actions"
-                class="pf-v5-c-dropdown__toggle pf-m-plain"
-                id="pf-dropdown-toggle-id-0"
-                type="button"
+              <div
+                class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-2xl pf-m-visible-on-xl pf-m-visible-on-lg pf-m-hidden-on-md pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
+              >
+                <div
+                  class="pf-v5-c-toolbar__item"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="about button"
+                    class="pf-v5-c-button pf-m-plain"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                    data-ouia-component-type="PF5/Button"
+                    data-ouia-safe="true"
+                    id="about-button"
+                    type="button"
+                  >
+                    <test-file-stub />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="pf-v5-c-toolbar__group"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 192 512"
-                  width="1em"
+                <div
+                  class="pf-v5-c-toolbar__item pf-m-hidden-on-lg"
                 >
-                  <path
-                    d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                  />
-                </svg>
-              </button>
+                  <div
+                    class="pf-v5-c-dropdown pf-m-align-right"
+                    data-ouia-component-id="OUIA-Generated-Dropdown-1"
+                    data-ouia-component-type="PF5/Dropdown"
+                    data-ouia-safe="true"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      aria-label="Actions"
+                      class="pf-v5-c-dropdown__toggle pf-m-plain"
+                      id="pf-dropdown-toggle-id-0"
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 192 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
+            <div
+              class="pf-v5-c-toolbar__expandable-content"
+              id="pf-random-id-0-expandable-content-0"
+            >
+              <div
+                class="pf-v5-c-toolbar__group"
+              />
+            </div>
+          </div>
+          <div
+            class="pf-v5-c-toolbar__content pf-m-hidden"
+            hidden=""
+          >
+            <div
+              class="pf-v5-c-toolbar__group"
+            />
           </div>
         </div>
       </div>