[8.8] [Dashboard] Fix styling of top nav bar (#159754) (#160088)

# Backport This will backport the following commits from `main` to `8.8`: - [[Dashboard] Fix styling of top nav bar (#159754)](https://github.com/elastic/kibana/pull/159754)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
2025-04-23 17:28:26 -04:00 · 2023-06-20 17:40:33 -06:00 · 2023-06-20 17:40:33 -06:00 · 78d76d8481
commit 78d76d8481
parent 43ff0befa1
10 changed files with 114 additions and 45 deletions
--- a/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx
+++ b/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx
@ -160,9 +160,11 @@ export function DashboardApp({
      },
      getInitialInput,
      validateLoadedSavedObject: validateOutcome,
+      isEmbeddedExternally: Boolean(embedSettings), // embed settings are only sent if the dashboard URL has `embed=true`
    });
  }, [
    history,
+    embedSettings,
    validateOutcome,
    getScopedHistory,
    isScreenshotMode,
--- a/src/plugins/dashboard/public/dashboard_app/dashboard_router.tsx
+++ b/src/plugins/dashboard/public/dashboard_app/dashboard_router.tsx
@ -90,16 +90,16 @@ export async function mountApp({ core, element, appUnMounted, mountContext }: Da
    routeParams: ParsedQuery<string>
  ): DashboardEmbedSettings | undefined => {
    return {
-      forceShowTopNavMenu: Boolean(routeParams[dashboardUrlParams.showTopMenu]),
-      forceShowQueryInput: Boolean(routeParams[dashboardUrlParams.showQueryInput]),
-      forceShowDatePicker: Boolean(routeParams[dashboardUrlParams.showTimeFilter]),
-      forceHideFilterBar: Boolean(routeParams[dashboardUrlParams.hideFilterBar]),
+      forceShowTopNavMenu: routeParams[dashboardUrlParams.showTopMenu] === 'true',
+      forceShowQueryInput: routeParams[dashboardUrlParams.showQueryInput] === 'true',
+      forceShowDatePicker: routeParams[dashboardUrlParams.showTimeFilter] === 'true',
+      forceHideFilterBar: routeParams[dashboardUrlParams.hideFilterBar] === 'true',
    };
  };

  const renderDashboard = (routeProps: RouteComponentProps<{ id?: string }>) => {
    const routeParams = parse(routeProps.history.location.search);
-    if (routeParams.embed && !globalEmbedSettings) {
+    if (routeParams.embed === 'true' && !globalEmbedSettings) {
      globalEmbedSettings = getDashboardEmbedSettings(routeParams);
    }
    return (
--- a/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss
+++ b/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss
@ -1,11 +1,26 @@
-.dashboardTopNav {
-  width: 100%;
-  position: sticky;
-  z-index: $euiZLevel2;
-  background: $euiPageBackgroundColor;
+.kbnBody {
+  .dashboardTopNav {
+    width: 100%;
+    position: sticky;
+    z-index: $euiZLevel2;
+    background: $euiPageBackgroundColor;
+  }

-  top: $kbnHeaderOffset;
-  &.dashboardTopNav-fullscreenMode {
-    top: 0;
+  &.kbnBody--noHeaderBanner {
+    &.kbnBody--chromeVisible .dashboardTopNav {
+      top: $kbnHeaderOffset;
+    }
+    &.kbnBody--chromeHidden .dashboardTopNav {
+      top: 0;
+    }
+  }
+
+  &.kbnBody--hasHeaderBanner {
+    &.kbnBody--chromeVisible .dashboardTopNav {
+      top: $kbnHeaderOffsetWithBanner;
+    }
+    &.kbnBody--chromeHidden .dashboardTopNav {
+      top: $kbnHeaderBannerHeight;
+    }
  }
 }
--- a/src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_top_nav.tsx
@ -6,7 +6,6 @@
 * Side Public License, v 1.
 */

-import classNames from 'classnames';
 import UseUnmount from 'react-use/lib/useUnmount';
 import React, { useEffect, useMemo, useRef, useState } from 'react';

@ -77,6 +76,7 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
  const fullScreenMode = dashboard.select((state) => state.componentState.fullScreenMode);
  const savedQueryId = dashboard.select((state) => state.componentState.savedQueryId);
  const lastSavedId = dashboard.select((state) => state.componentState.lastSavedId);
+
  const viewMode = dashboard.select((state) => state.explicitInput.viewMode);
  const query = dashboard.select((state) => state.explicitInput.query);
  const title = dashboard.select((state) => state.explicitInput.title);
@ -207,11 +207,7 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
  });

  return (
-    <div
-      className={classNames('dashboardTopNav', {
-        'dashboardTopNav-fullscreenMode': fullScreenMode,
-      })}
-    >
+    <div className="dashboardTopNav">
      <h1
        id="dashboardTitle"
        className="euiScreenReaderOnly"
--- a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
+++ b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
@ -172,6 +172,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
          ...DEFAULT_DASHBOARD_INPUT,
          id: initialInput.id,
        },
+        isEmbeddedExternally: creationOptions?.isEmbeddedExternally,
        animatePanelTransforms: false, // set panel transforms to false initially to avoid panels animating on initial render.
        hasUnsavedChanges: false, // if there is initial unsaved changes, the initial diff will catch them.
        lastSavedId: savedObjectId,
--- a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container_factory.tsx
+++ b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container_factory.tsx
@ -56,6 +56,7 @@ export interface DashboardCreationOptions {
  unifiedSearchSettings?: { kbnUrlStateStorage: IKbnUrlStateStorage };

  validateLoadedSavedObject?: (result: LoadDashboardFromSavedObjectReturn) => boolean;
+  isEmbeddedExternally?: boolean;
 }

 export class DashboardContainerFactoryDefinition
--- a/test/functional/apps/dashboard/group5/embed_mode.ts
+++ b/test/functional/apps/dashboard/group5/embed_mode.ts
@ -10,13 +10,19 @@ import expect from '@kbn/expect';

 import { FtrProviderContext } from '../../../ftr_provider_context';

-export default function ({ getService, getPageObjects }: FtrProviderContext) {
+export default function ({
+  getService,
+  getPageObjects,
+  updateBaselines,
+}: FtrProviderContext & { updateBaselines: boolean }) {
  const testSubjects = getService('testSubjects');
  const retry = getService('retry');
  const kibanaServer = getService('kibanaServer');
  const PageObjects = getPageObjects(['dashboard', 'common']);
  const browser = getService('browser');
  const globalNav = getService('globalNav');
+  const screenshot = getService('screenshots');
+  const log = getService('log');

  describe('embed mode', () => {
    const urlParamExtensions = [
@ -36,40 +42,88 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      });
      await PageObjects.common.navigateToApp('dashboard');
      await PageObjects.dashboard.preserveCrossAppState();
-      await PageObjects.dashboard.loadSavedDashboard('few panels');
+      await PageObjects.dashboard.loadSavedDashboard('dashboard with everything');
+
+      await browser.setWindowSize(1300, 900);
    });

-    it('hides the chrome', async () => {
-      const globalNavShown = await globalNav.exists();
-      expect(globalNavShown).to.be(true);
+    describe('default URL params', () => {
+      it('hides the chrome', async () => {
+        const globalNavShown = await globalNav.exists();
+        expect(globalNavShown).to.be(true);

-      const currentUrl = await browser.getCurrentUrl();
-      const newUrl = currentUrl + '&embed=true';
-      // Embed parameter only works on a hard refresh.
-      const useTimeStamp = true;
-      await browser.get(newUrl.toString(), useTimeStamp);
+        const currentUrl = await browser.getCurrentUrl();
+        const newUrl = currentUrl + '&embed=true';
+        // Embed parameter only works on a hard refresh.
+        const useTimeStamp = true;
+        await browser.get(newUrl.toString(), useTimeStamp);

-      await retry.try(async () => {
-        const globalNavHidden = !(await globalNav.exists());
-        expect(globalNavHidden).to.be(true);
+        await retry.try(async () => {
+          const globalNavHidden = !(await globalNav.exists());
+          expect(globalNavHidden).to.be(true);
+        });
+      });
+
+      it('expected elements are rendered and/or hidden', async () => {
+        await testSubjects.missingOrFail('top-nav');
+        await testSubjects.missingOrFail('queryInput');
+        await testSubjects.missingOrFail('superDatePickerToggleQuickMenuButton');
+        await testSubjects.existOrFail('globalQueryBar');
+      });
+
+      /**
+       * Skipping all render tests for now - there is a problem where the locally generated screenshots do not align with the
+       * CI screenshots due to (possibly) pixel density or something similar. This fix is super important to get in so we will
+       * have to resolve the issue with these new tests *after* FF for 8.9/8.8.2
+       */
+      it.skip('renders as expected', async () => {
+        await PageObjects.dashboard.waitForRenderComplete();
+        const percentDifference = await screenshot.compareAgainstBaseline(
+          'dashboard_embed_mode',
+          updateBaselines
+        );
+        expect(percentDifference).to.be.lessThan(0.02);
      });
    });

-    it('shows or hides elements based on URL params', async () => {
-      await testSubjects.missingOrFail('top-nav');
-      await testSubjects.missingOrFail('queryInput');
-      await testSubjects.missingOrFail('superDatePickerToggleQuickMenuButton');
-      await testSubjects.existOrFail('showQueryBarMenu');
+    describe('non-default URL params', () => {
+      it('shows or hides elements based on URL params', async () => {
+        const currentUrl = await browser.getCurrentUrl();
+        const newUrl = [currentUrl].concat(urlParamExtensions).join('&');
+        // Embed parameter only works on a hard refresh.
+        const useTimeStamp = true;
+        await browser.get(newUrl.toString(), useTimeStamp);

-      const currentUrl = await browser.getCurrentUrl();
-      const newUrl = [currentUrl].concat(urlParamExtensions).join('&');
-      // Embed parameter only works on a hard refresh.
-      const useTimeStamp = true;
-      await browser.get(newUrl.toString(), useTimeStamp);
+        await testSubjects.existOrFail('top-nav');
+        await testSubjects.existOrFail('queryInput');
+        await testSubjects.existOrFail('superDatePickerToggleQuickMenuButton');
+      });

-      await testSubjects.existOrFail('top-nav');
-      await testSubjects.existOrFail('queryInput');
-      await testSubjects.existOrFail('superDatePickerToggleQuickMenuButton');
+      it.skip('renders as expected', async () => {
+        await PageObjects.dashboard.waitForRenderComplete();
+        const percentDifference = await screenshot.compareAgainstBaseline(
+          'dashboard_embed_mode_with_url_params',
+          updateBaselines
+        );
+        expect(percentDifference).to.be.lessThan(0.02);
+      });
+
+      it.skip('renders as expected when scrolling', async () => {
+        const panels = await PageObjects.dashboard.getDashboardPanels();
+        const lastPanel = panels[panels.length - 1];
+        const lastPanelHeight = -parseInt(await lastPanel.getComputedStyle('height'), 10);
+        log.debug(
+          `scrolling to panel ${await lastPanel.getAttribute(
+            'data-test-embeddable-id'
+          )} with offset ${lastPanelHeight}...`
+        );
+        await lastPanel.scrollIntoViewIfNecessary(lastPanelHeight);
+        const percentDifference = await screenshot.compareAgainstBaseline(
+          'dashboard_embed_mode_scrolling',
+          updateBaselines
+        );
+        expect(percentDifference).to.be.lessThan(0.02);
+      });
    });

    after(async function () {
--- a/test/functional/screenshots/baseline/dashboard_embed_mode.png
+++ b/test/functional/screenshots/baseline/dashboard_embed_mode.png
--- a/test/functional/screenshots/baseline/dashboard_embed_mode_scrolling.png
+++ b/test/functional/screenshots/baseline/dashboard_embed_mode_scrolling.png
--- a/test/functional/screenshots/baseline/dashboard_embed_mode_with_url_params.png
+++ b/test/functional/screenshots/baseline/dashboard_embed_mode_with_url_params.png