[Serverless Nav] Fix issues with sticky app menu subheader

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

@@ -203,12 +203,20 @@ export class ChromeService {
     };
 
     const headerBanner$ = new BehaviorSubject<ChromeUserBanner | undefined>(undefined);
-    const bodyClasses$ = combineLatest([headerBanner$, this.isVisible$!, chromeStyle$]).pipe(
-      map(([headerBanner, isVisible, chromeStyle]) => {
+    const bodyClasses$ = combineLatest([
+      headerBanner$,
+      this.isVisible$!,
+      chromeStyle$,
+      application.currentActionMenu$,
+    ]).pipe(
+      map(([headerBanner, isVisible, chromeStyle, actionMenu]) => {
         return [
           'kbnBody',
           headerBanner ? 'kbnBody--hasHeaderBanner' : 'kbnBody--noHeaderBanner',
           isVisible ? 'kbnBody--chromeVisible' : 'kbnBody--chromeHidden',
+          chromeStyle === 'project' && actionMenu
+            ? 'kbnBody--projectActionMenuVisible'
+            : 'kbnBody--projectActionMenuHidden',
           getKbnVersionClass(),
         ];
       })

packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx

@@ -17,6 +17,7 @@ interface AppMenuBarProps {
 }
 export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
   const { euiTheme } = useEuiTheme();
+
   return (
     <div
       className="header__actionMenu"
@@ -28,7 +29,7 @@ export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
         display: flex;
         justify-content: end;
         align-items: center;
-        padding: ${euiTheme.size.s};
+        height: var(--kbnProjectHeaderAppActionMenuHeight, ${euiTheme.size.xxxl});
         margin-bottom: -${euiTheme.border.width.thin};
         /* fixates the elements position in the viewport, removes the element from the flow of the page */
         position: sticky;

src/core/public/_css_variables.scss

@@ -5,6 +5,10 @@
   --kbnHeaderOffset: var(--euiFixedHeadersOffset, 0);
   // total height of everything when the banner is present
   --kbnHeaderOffsetWithBanner: calc(var(--kbnHeaderBannerHeight) + var(--kbnHeaderOffset));
+  // height of the action menu in the header in serverless projects
+  --kbnProjectHeaderAppActionMenuHeight: #{$euiSize * 3};
+  // total height of all fixed headers for the app container in serverless projects, dynamically changes based on whether the banner or action menu is present
+  --kbnAppHeadersOffset: var(--euiFixedHeadersOffset, 0);
 }
 
 // Quick note: This shouldn't be mixed with Sass variable declarations,

src/core/public/_mixins.scss

@@ -1,6 +1,6 @@
 @mixin kibanaFullBodyHeight($additionalOffset: 0) {
-  // The `--euiFixedHeadersOffset` CSS variable is automatically updated by
+  // The `--kbnAppHeadersOffset` CSS variable is automatically updated by
   // styles/rendering/_base.scss, based on whether the Kibana chrome has a
-  // header banner, and is visible or hidden
-  height: calc(100vh - var(--euiFixedHeadersOffset, 0) - #{$additionalOffset});
+  // header banner, app menu, and is visible or hidden
+  height: calc(100vh - var(--kbnAppHeadersOffset, 0) - #{$additionalOffset});
 }

src/core/public/styles/rendering/_base.scss

@@ -19,7 +19,7 @@
   pointer-events: none;
   visibility: hidden;
   position: fixed;
-  top: var(--euiFixedHeadersOffset, 0);
+  top: var(--kbnAppHeadersOffset, 0);
   right: 0;
   bottom: 0;
   left: 0;
@@ -38,12 +38,15 @@
 .kbnBody {
   padding-top: var(--euiFixedHeadersOffset, 0);
 }
-
 // Conditionally override :root CSS fixed header variable. Updating `--euiFixedHeadersOffset`
 // on the body will cause all child EUI components to automatically update their offsets
-
 .kbnBody--hasHeaderBanner {
   --euiFixedHeadersOffset: var(--kbnHeaderOffsetWithBanner);
+  --kbnAppHeadersOffset: var(--kbnHeaderOffsetWithBanner);
+
+  &.kbnBody--projectActionMenuVisible {
+    --kbnAppHeadersOffset: calc(var(--kbnHeaderOffsetWithBanner) + var(--kbnProjectHeaderAppActionMenuHeight));
+  }
 
   // Offset fixed EuiHeaders by the top banner
   .euiHeader[data-fixed-header] {
@@ -56,9 +59,18 @@
     top: var(--kbnHeaderBannerHeight);
   }
 }
+.kbnBody--projectActionMenuVisible {
+  --kbnAppHeadersOffset: calc(var(--kbnHeaderOffset) + var(--kbnProjectHeaderAppActionMenuHeight));
+}
 .kbnBody--chromeHidden {
   --euiFixedHeadersOffset: 0;
+  &.kbnBody--projectActionMenuVisible {
+    --kbnAppHeadersOffset: 0;
+  }
 }
 .kbnBody--chromeHidden.kbnBody--hasHeaderBanner {
   --euiFixedHeadersOffset: var(--kbnHeaderBannerHeight);
+  &.kbnBody--projectActionMenuVisible {
+    --kbnAppHeadersOffset: var(--kbnHeaderBannerHeight);
+  }
 }

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -138,14 +138,19 @@ export function TopNavMenu<QT extends AggregateQuery | Query = Query>(
       'kbnTopNavMenu__wrapper--hidden': visible === false,
     });
     if (setMenuMountPoint) {
+      const badgesEl = renderBadges();
+      const menuEl = renderMenu(menuClassName);
       return (
         <>
-          <MountPointPortal setMountPoint={setMenuMountPoint}>
-            <span className={`${wrapperClassName} kbnTopNavMenu__badgeWrapper`}>
-              {renderBadges()}
-              {renderMenu(menuClassName)}
-            </span>
-          </MountPointPortal>
+          {(badgesEl || menuEl) && (
+            <UnmountableMountPointPortal setMountPoint={setMenuMountPoint}>
+              <span className={`${wrapperClassName} kbnTopNavMenu__badgeWrapper`}>
+                {badgesEl}
+                {menuEl}
+              </span>
+            </UnmountableMountPointPortal>
+          )}
+
           {renderSearchBar()}
         </>
       );
@@ -169,3 +174,16 @@ TopNavMenu.defaultProps = {
   showFilterBar: true,
   screenTitle: '',
 };
+
+// TODO: make this a part of @kbn/react-kibana-mount ?
+const UnmountableMountPointPortal: React.FC<{
+  setMountPoint: (menuMount: MountPoint | undefined) => void;
+}> = ({ setMountPoint, children }) => {
+  React.useEffect(() => {
+    return () => {
+      setMountPoint(undefined);
+    };
+  }, [setMountPoint]);
+
+  return <MountPointPortal setMountPoint={setMountPoint}>{children}</MountPointPortal>;
+};

x-pack/plugins/observability_onboarding/public/application/app.tsx

@@ -19,7 +19,6 @@ import {
   RedirectAppLinks,
   useUiSetting$,
 } from '@kbn/kibana-react-plugin/public';
-import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { euiDarkVars, euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
@@ -183,12 +182,10 @@ export function ObservabilityOnboardingAppRoot({
           <i18nCore.Context>
             <Router history={history}>
               <EuiErrorBoundary>
-                <HeaderMenuPortal
+                <ObservabilityOnboardingHeaderActionMenu
                   setHeaderActionMenu={setHeaderActionMenu}
                   theme$={theme$}
-                >
-                  <ObservabilityOnboardingHeaderActionMenu />
-                </HeaderMenuPortal>
+                />
                 <ObservabilityOnboardingApp />
               </EuiErrorBoundary>
             </Router>

x-pack/plugins/observability_onboarding/public/components/app/header_action_menu/index.tsx

@@ -7,30 +7,43 @@
 
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
+import { AppMountParameters } from '@kbn/core-application-browser';
 import { LOGS_ONBOARDING_FEEDBACK_LINK } from '@kbn/observability-shared-plugin/common';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 
-export function ObservabilityOnboardingHeaderActionMenu() {
+export function ObservabilityOnboardingHeaderActionMenu({
+  setHeaderActionMenu,
+  theme$,
+}: {
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
+}) {
   const location = useLocation();
   const normalizedPathname = location.pathname.replace(/\/$/, '');
 
   const isRootPage = normalizedPathname === '';
 
   if (!isRootPage) {
     return (
-      <EuiButton
-        data-test-subj="observabilityOnboardingPageGiveFeedback"
-        href={LOGS_ONBOARDING_FEEDBACK_LINK}
-        size="s"
-        target="_blank"
-        color="warning"
-        iconType="editorComment"
+      <HeaderMenuPortal
+        setHeaderActionMenu={setHeaderActionMenu}
+        theme$={theme$}
       >
-        {i18n.translate('xpack.observability_onboarding.header.feedback', {
-          defaultMessage: 'Give feedback',
-        })}
-      </EuiButton>
+        <EuiButton
+          data-test-subj="observabilityOnboardingPageGiveFeedback"
+          href={LOGS_ONBOARDING_FEEDBACK_LINK}
+          size="s"
+          target="_blank"
+          color="warning"
+          iconType="editorComment"
+        >
+          {i18n.translate('xpack.observability_onboarding.header.feedback', {
+            defaultMessage: 'Give feedback',
+          })}
+        </EuiButton>
+      </HeaderMenuPortal>
     );
   }
 

x-pack/plugins/observability_onboarding/tsconfig.json

@@ -34,6 +34,7 @@
     "@kbn/share-plugin",
     "@kbn/deeplinks-observability",
     "@kbn/fleet-plugin",
+    "@kbn/core-application-browser",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx

@@ -12,7 +12,7 @@ import { useGlobalHeaderPortal } from '../../../../common/hooks/use_global_heade
 const StyledStickyWrapper = styled.div`
   position: sticky;
   z-index: ${(props) => props.theme.eui.euiZHeaderBelowDataGrid};
-  top: var(--euiFixedHeadersOffset, 0);
+  top: var(--kbnAppHeadersOffset, 0);
 `;
 
 export const GlobalKQLHeader = React.memo(() => {