web: move navbar to tertiary

This was suggested and written by Joachim Schuler in [1].  It moves
the top navbar as a "tertiary" option to the page header.  This bar is
always visible and doesn't roll-up into the "top" area.  This means we
can drop the more complex grid layout that is trying to keep this bar
always visible for some much more simple styling.

As this moves the navbar location the link matching is updated to find
new elements.

[1] https://github.com/patternfly/patternfly-react/issues/7960#issuecomment-1244017295

Change-Id: I4a61a1e246ca4fe0d96f630a06be7f0264782723

3 files changed, 12 insertions, 25 deletions

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 1eec7f2e4..33cd44070 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -447,7 +447,6 @@ class App extends React.Component {
         logoProps={{ to: logoUrl }}
         logoComponent={Link}
         headerTools={pageHeaderTools}
-        topNav={nav}
       />
     )
 
@@ -455,7 +454,7 @@ class App extends React.Component {
       <React.Fragment>
         {notifications.length > 0 && this.renderNotifications(notifications)}
         {this.renderConfigErrors(configErrors)}
-        <Page className="zuul-page" header={pageHeader}>
+        <Page className="zuul-page" header={pageHeader} tertiaryNav={nav}>
           <ErrorBoundary>
             {this.renderContent()}
           </ErrorBoundary>
diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx
index 05e8d185b..5c9cb3454 100644
--- a/web/src/App.test.jsx
+++ b/web/src/App.test.jsx
@@ -122,8 +122,8 @@ it('renders single tenant', async () => {
   // Link should be white-label scoped
   const topMenuLinks = application.root.findAllByType(Link)
   expect(topMenuLinks[0].props.to).toEqual('/status')
-  expect(topMenuLinks[1].props.to.pathname).toEqual('/status')
-  expect(topMenuLinks[2].props.to.pathname).toEqual('/projects')
+  expect(topMenuLinks[4].props.to.pathname).toEqual('/status')
+  expect(topMenuLinks[5].props.to.pathname).toEqual('/projects')
   // Location should be /status
   expect(location.pathname).toEqual('/status')
   // Info should tell white label tenant openstack
diff --git a/web/src/index.css b/web/src/index.css
index d5b9a854f..da74a4a24 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -30,6 +30,15 @@ a.refresh {
     height: 40px;
 }
 
+.zuul-page .pf-c-page__header {
+    min-height: 0;
+}
+
+.zuul-page .pf-c-page__main-nav {
+    background-color: var(--pf-global--BackgroundColor--dark-300);
+    padding-top: 0;
+}
+
 .zuul-select-tz {
     /* That's the color PF4 uses for the dropdown items in the navbar */
     color: var(--pf-global--Color--dark-100);
@@ -429,27 +438,6 @@ details.foldable[open] summary::before {
     content: "less";
 }
 
-/* Overwrite PF4 navbar rules to enforce the 'lg' layout of the navbar also for
-   'xl' sized screens. This will keep the navbar stacked (like it was in Zuul
-   before) and prevent PF4 to put all elements in a single line with horizontal
-   scrolling (which would look something like:
-   ZUUL | < Status Projects Jobs Labels No... > | API Documentation Tenant */
-@media screen and (min-width: 1200px) {
-    .pf-c-page__header-nav {
-        grid-column: 1/-1;
-        grid-row: 2/3;
-    }
-
-    .pf-c-page {
-        --pf-c-page__header-nav--PaddingRight: var(
-            --pf-c-page__header-nav--lg--PaddingRight
-        );
-        --pf-c-page__header-nav--PaddingLeft: var(
-            --pf-c-page__header-nav--lg--PaddingLeft
-        );
-    }
-}
-
 /* The box size calculation compared to the text size seems off, but
    this looks better */
 .zuul-job-graph text {