fixes

Dosant · Dosant · commit eadf52f16d0c · 2025-06-23T14:49:49.000+02:00
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/banner/layout_banner.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/banner/layout_banner.styles.ts
@@ -16,7 +16,7 @@ const root: EmotionFn = ({ euiTheme }) => css`
   position: sticky;
   width: var(--kbn-layout--banner-width);
   height: var(--kbn-layout--banner-height);
-  z-index: ${euiTheme.levels.header};
+  z-index: var(--kbn-layout--slot-zIndex);
 `;
 
 export const styles = {
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/debug/simple_debug_overlay.tsx b/src/core/packages/chrome/layout/core-chrome-layout-components/debug/simple_debug_overlay.tsx
@@ -27,7 +27,7 @@ interface SimpleDebugOverlayProps {
 
 export const SimpleDebugOverlay: React.FC<SimpleDebugOverlayProps> = ({
   label = 'Debug Overlay',
-  background = 'rgba(0,153,255,0.15)',
+  background = '#e6f4ff',
   color = '#0099ff',
   style = {},
   children,
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/footer/layout_footer.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/footer/layout_footer.styles.ts
@@ -15,6 +15,7 @@ const root = css`
   grid-area: footer;
   width: var(--kbn-layout--footer-width);
   height: var(--kbn-layout--footer-height);
+  z-index: var(--kbn-layout--slot-zIndex);
 `;
 
 export const styles = {
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/header/layout_header.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/header/layout_header.styles.ts
@@ -15,7 +15,7 @@ const root: EmotionFn = ({ euiTheme }) => css`
   overflow: hidden;
   grid-area: header;
   height: var(--kbn-layout--header-height);
-  z-index: ${euiTheme.levels.header};
+  z-index: var(--kbn-layout--slot-zIndex);
 `;
 
 export const styles = {
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/layout_global_css.tsx b/src/core/packages/chrome/layout/core-chrome-layout-components/layout_global_css.tsx
@@ -10,6 +10,7 @@
 import React from 'react';
 import { Global, css } from '@emotion/react';
 import { useLayoutState } from './layout_state_context';
+import { useEuiTheme } from '@elastic/eui';
 
 /**
  * Sets up global CSS for the layout using the CSS variables (custom properties) approach.
@@ -70,6 +71,8 @@ export const LayoutGlobalCSS = () => {
     sidebarPanelWidth,
   } = useLayoutState();
 
+  const { euiTheme } = useEuiTheme();
+
   const banner = css`
     --kbn-layout--banner-top: 0;
     --kbn-layout--banner-left: 0;
@@ -122,6 +125,13 @@ export const LayoutGlobalCSS = () => {
     --kbn-layout--footer-width: var(--kbn-layout--application-width);
   `;
 
+  // we want to place layout slots eui's flyouts
+  const common = css`
+    --kbn-layout--slot-zIndex: ${typeof euiTheme.levels.flyout === 'number'
+      ? euiTheme.levels.flyout + 50
+      : euiTheme.levels.flyout};
+  `;
+
   const styles = css`
     :root {
       ${banner}
@@ -130,6 +140,7 @@ export const LayoutGlobalCSS = () => {
       ${sidebar}
       ${application}
       ${footer}
+      ${common}
     }
   `;
 
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/navigation/layout_navigation.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/navigation/layout_navigation.styles.ts
@@ -18,6 +18,7 @@ const root: EmotionFn = ({ euiTheme }) => css`
   align-self: start;
   height: 100%;
   width: var(--kbn-layout--navigation-width);
+  z-index: var(--kbn-layout--slot-zIndex);
 `;
 
 export const styles = {
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.styles.ts
@@ -20,6 +20,7 @@ const root = css`
   align-items: center;
   height: 100%;
   width: var(--kbn-layout--sidebar-width);
+  z-index: var(--kbn-layout--slot-zIndex);
 `;
 
 export const styles = {
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar_panel.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar_panel.styles.ts
@@ -17,6 +17,7 @@ const root = css`
   overflow: hidden;
   position: sticky;
   width: var(--kbn-layout--sidebar-panel-width);
+  z-index: var(--kbn-layout--slot-zIndex);
 `;
 
 export const styles = {
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/app_containers.test.tsx b/src/core/packages/chrome/layout/core-chrome-layout/app_containers.test.tsx
@@ -18,7 +18,7 @@ describe('AppWrapper', () => {
   it('toggles the `hidden-chrome` class depending on the chrome visibility state', () => {
     const chromeVisible$ = new BehaviorSubject<boolean>(true);
     const { getByTestId, rerender } = render(
-      <AppWrapper chromeVisible$={chromeVisible$}>app-content</AppWrapper>
+      <AppWrapper chromeVisible={chromeVisible$.value}>app-content</AppWrapper>
     );
 
     // The data-test-subj attribute is used for querying
@@ -32,7 +32,7 @@ describe('AppWrapper', () => {
     `);
 
     act(() => chromeVisible$.next(false));
-    rerender(<AppWrapper chromeVisible$={chromeVisible$}>app-content</AppWrapper>);
+    rerender(<AppWrapper chromeVisible={chromeVisible$.value}>app-content</AppWrapper>);
     expect(getByTestId('kbnAppWrapper hiddenChrome')).toMatchInlineSnapshot(`
       <div
         class="kbnAppWrapper kbnAppWrapper--hiddenChrome"
@@ -43,7 +43,7 @@ describe('AppWrapper', () => {
     `);
 
     act(() => chromeVisible$.next(true));
-    rerender(<AppWrapper chromeVisible$={chromeVisible$}>app-content</AppWrapper>);
+    rerender(<AppWrapper chromeVisible={chromeVisible$.value}>app-content</AppWrapper>);
     expect(getByTestId('kbnAppWrapper visibleChrome')).toMatchInlineSnapshot(`
       <div
         class="kbnAppWrapper"
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/app_containers.tsx b/src/core/packages/chrome/layout/core-chrome-layout/app_containers.tsx
@@ -8,21 +8,18 @@
  */
 
 import React, { FC, PropsWithChildren } from 'react';
-import { Observable } from 'rxjs';
-import useObservable from 'react-use/lib/useObservable';
 import classNames from 'classnames';
 import { APP_WRAPPER_CLASS } from '@kbn/core-application-common';
 
 export const AppWrapper: FC<
   PropsWithChildren<{
-    chromeVisible$: Observable<boolean>;
+    chromeVisible: boolean;
   }>
-> = ({ chromeVisible$, children }) => {
-  const visible = useObservable(chromeVisible$);
+> = ({ chromeVisible, children }) => {
   return (
     <div
-      className={classNames(APP_WRAPPER_CLASS, { 'kbnAppWrapper--hiddenChrome': !visible })}
-      data-test-subj={`kbnAppWrapper ${visible ? 'visible' : 'hidden'}Chrome`}
+      className={classNames(APP_WRAPPER_CLASS, { 'kbnAppWrapper--hiddenChrome': !chromeVisible })}
+      data-test-subj={`kbnAppWrapper ${chromeVisible ? 'visible' : 'hidden'}Chrome`}
     >
       {children}
     </div>
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx
@@ -59,35 +59,16 @@ const globalLayoutStyles = (euiTheme: UseEuiTheme['euiTheme']) => css`
     position: relative; // This is temporary for apps that relied on this being present on \`.application\`
   }
 
-  // Conditionally override :root CSS fixed header variable.
-  .kbnBody--hasHeaderBanner {
-    // TODO: check if this is still needed, as it was added to support the legacy fixed layout
-    // Prevent banners from covering full screen data grids
-    .euiDataGrid--fullScreen {
-      height: calc(100vh - var(--kbnHeaderBannerHeight));
-      top: var(--kbnHeaderBannerHeight);
-    }
+  #kibana-body .euiDataGrid--fullScreen {
+    height: calc(100vh - var(--kbnHeaderBannerHeight));
+    top: var(--kbnHeaderBannerHeight);
   }
 
   // Set a body CSS variable for the app container to use - calculates the total
   // height of all fixed headers + the sticky action menu toolbar
   .kbnBody--hasProjectActionMenu {
     --kbnAppHeadersOffset: var(--kbnProjectHeaderAppActionMenuHeight);
   }
-
-  .euiDataGrid__restrictBody {
-    .headerGlobalNav,
-    .kbnQueryBar {
-      display: none;
-    }
-  }
-
-  .euiDataGrid__restrictBody.euiBody--headerIsFixed {
-    .euiFlyout {
-      top: 0;
-      height: 100%;
-    }
-  }
 `;
 
 // temporary hacks that need to be removed after better flyout and global sidenav customization support in EUI
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -24,7 +24,7 @@ import type {
 import { AppWrapper } from '../../app_containers';
 import { APP_FIXED_VIEWPORT_ID } from '../../app_fixed_viewport';
 
-const defaultLayoutConfig: ChromeLayoutConfig = {
+const layoutConfig: ChromeLayoutConfig = {
   headerHeight: 96,
   bannerHeight: 32,
 
@@ -63,21 +63,12 @@ export class GridLayout implements LayoutService {
       const chromeVisible = useObservable(chromeVisible$, false);
       const hasHeaderBanner = useObservable(hasHeaderBanner$, false);
 
-      const layoutConfig = React.useMemo<ChromeLayoutConfig>(
-        () => ({
-          ...defaultLayoutConfig,
-          // Use the default header height if chrome is visible, otherwise set it to 0 while displaying {chromelessHeader}
-          headerHeight: chromeVisible ? 96 : 0,
-        }),
-        [chromeVisible]
-      );
-
       return (
         <>
           <GridLayoutGlobalStyles />
           <ChromeLayoutConfigProvider value={layoutConfig}>
             <ChromeLayout
-              header={chromeVisible ? chromeHeader : chromelessHeader}
+              header={chromeVisible && chromeHeader}
               sidebar={
                 chromeVisible && debug ? <SimpleDebugOverlay label="Debug Sidebar" /> : undefined
               }
@@ -98,9 +89,12 @@ export class GridLayout implements LayoutService {
               }
             >
               <>
+                {/* If chrome is not visible, we use the chromeless header to display the*/}
+                {/* data-test-subj and fixed loading bar*/}
+                {!chromeVisible && chromelessHeader}
+
                 <div id="globalBannerList">{bannerComponent}</div>
-                <AppWrapper chromeVisible$={chromeVisible$}>
-                  {/* TODO: test and fix this */}
+                <AppWrapper chromeVisible={chromeVisible}>
                   {/* Affixes a div to restrict the position of charts tooltip to the visible viewport minus the header */}
                   <div id={APP_FIXED_VIEWPORT_ID} />
 
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/legacy-fixed/legacy_fixed_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/legacy-fixed/legacy_fixed_layout.tsx
@@ -12,6 +12,7 @@ import { LegacyFixedLayoutGlobalStyles } from './legacy_fixed_global_app_style';
 import { LayoutService, LayoutServiceStartDeps } from '../../layout_service';
 import { AppWrapper } from '../../app_containers';
 import { APP_FIXED_VIEWPORT_ID } from '../../app_fixed_viewport';
+import useObservable from 'react-use/lib/useObservable';
 
 /**
  * Service for providing layout component wired to other core services.
@@ -30,6 +31,9 @@ export class LegacyFixedLayout implements LayoutService {
     const chromeVisible$ = chrome.getIsVisible$();
 
     return React.memo(() => {
+      // TODO: optimize initial value to avoid unnecessary re-renders
+      const chromeVisible = useObservable(chromeVisible$, false);
+
       return (
         <>
           {/* Global Styles that apply across the entire app */}
@@ -41,7 +45,7 @@ export class LegacyFixedLayout implements LayoutService {
           {/* banners$.subscribe() for things like the No data banner */}
           <div id="globalBannerList">{bannerComponent}</div>
           {/* The App Wrapper outside of the fixed headers that accepts custom class names from apps */}
-          <AppWrapper chromeVisible$={chromeVisible$}>
+          <AppWrapper chromeVisible={chromeVisible}>
             {/* Affixes a div to restrict the position of charts tooltip to the visible viewport minus the header */}
             <div id={APP_FIXED_VIEWPORT_ID} />
             {/* The actual plugin/app */}
diff --git a/x-pack/test/functional/page_objects/banners_page.ts b/x-pack/test/functional/page_objects/banners_page.ts
@@ -8,7 +8,6 @@
 import { FtrService } from '../ftr_provider_context';
 
 export class BannersPageObject extends FtrService {
-  private readonly find = this.ctx.getService('find');
   private readonly testSubjects = this.ctx.getService('testSubjects');
 
   isTopBannerVisible() {
