[Embedded Console] Introduce kbnSolutionNavOffset CSS variable (#175348)

## Summary

This PR updates the Kibana `SolutionNav` component to set a global CSS
variable `--kbnSolutionNavOffset` with it's current width. This is
modeled off of the EUI CSS variable `--euiCollapsibleNavOffset` that can
be used in Serverless to get the current width of the side nav.

This will be used by the embedded dev console to ensure it is not
rendered over the page side navigation, at least for pages that use the
`KibanaPageTemplate` & `SolutionNav`.

### Testing

The easiest way to verify this change is to check the values of
`--kbnSolutionNavOffset` in the browser console, which can be done with
the following command:

`getComputedStyle(document.documentElement).getPropertyValue('--kbnSolutionNavOffset')`

You can check this with the solution nav open and closed or on pages
without a solution nav at all (`/app/home` for example)

packages/kbn-optimizer/limits.yml

@@ -32,7 +32,7 @@ pageLoadAssetSize:
   datasetQuality: 50624
   dataViewEditor: 28082
   dataViewFieldEditor: 27000
-  dataViewManagement: 5136
+  dataViewManagement: 5176
   dataViews: 51000
   dataVisualizer: 27530
   devTools: 38637

packages/shared-ux/page/solution_nav/src/_variables.scss

@@ -0,0 +1,4 @@
+// This size is also tracked with a variable in solution_nav.tsx, if updated
+// update there as well
+$solutionNavWidth: 248px;
+$solutionNavCollapsedWidth: $euiSizeXXL;

packages/shared-ux/page/solution_nav/src/collapse_button.scss

@@ -1,7 +1,9 @@
+@import 'variables';
+
 .kbnSolutionNavCollapseButton {
   position: absolute;
   opacity: 0;
-  left: 248px - $euiSize;
+  left: $solutionNavWidth - $euiSize;
   top: $euiSizeL;
   z-index: 2;
 
@@ -18,7 +20,7 @@
   &:hover,
   &:focus {
     opacity: 1;
-    left: 248px - $euiSizeL;
+    left: $solutionNavWidth - $euiSizeL;
   }
 
   .kbnSolutionNav__sidebar:hover & {
@@ -39,7 +41,7 @@
   top: 0;
   bottom: 0;
   height: 100%;
-  width: $euiSizeXXL;
+  width: $solutionNavCollapsedWidth;
   border-radius: 0;
   // Keep the icon at the top instead of it getting shifted to the center of the page
   padding-top: $euiSizeL + $euiSizeS;

packages/shared-ux/page/solution_nav/src/solution_nav.scss

@@ -1,5 +1,6 @@
 $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 @import '@elastic/eui/src/components/side_nav/mixins';
+@import 'variables';
 
 // Put the page background color in the flyout version too
 .kbnSolutionNav__flyout {
@@ -14,7 +15,7 @@ $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
   flex-direction: column;
 
   @include euiBreakpoint('m', 'l', 'xl') {
-    width: 248px;
+    width: $solutionNavWidth;
     padding: $euiSizeL;
   }
 

packages/shared-ux/page/solution_nav/src/solution_nav.tsx

@@ -7,7 +7,7 @@
  */
 import './solution_nav.scss';
 
-import React, { FC, useState, useMemo } from 'react';
+import React, { FC, useState, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import {
   EuiAvatarProps,
@@ -23,6 +23,8 @@ import {
   htmlIdGenerator,
   useIsWithinBreakpoints,
   useIsWithinMinBreakpoint,
+  useEuiTheme,
+  useEuiThemeCSSVariables,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -71,6 +73,7 @@ export type SolutionNavProps = Omit<EuiSideNavProps<{}>, 'children' | 'items' |
 };
 
 const FLYOUT_SIZE = 248;
+const FLYOUT_SIZE_CSS = `${FLYOUT_SIZE}px`;
 
 const setTabIndex = (items: Array<EuiSideNavItemType<{}>>, isHidden: boolean) => {
   return items.map((item) => {
@@ -174,6 +177,32 @@ export const SolutionNav: FC<SolutionNavProps> = ({
     );
   }, [children, headingID, isCustomSideNav, isHidden, items, rest]);
 
+  const { euiTheme } = useEuiTheme();
+  const navWidth = useMemo(() => {
+    if (isLargerBreakpoint) {
+      return isOpenOnDesktop ? FLYOUT_SIZE_CSS : euiTheme.size.xxl;
+    }
+    if (isMediumBreakpoint) {
+      return isSideNavOpenOnMobile || !canBeCollapsed ? FLYOUT_SIZE_CSS : euiTheme.size.xxl;
+    }
+    return '0';
+  }, [
+    euiTheme,
+    isOpenOnDesktop,
+    isSideNavOpenOnMobile,
+    canBeCollapsed,
+    isMediumBreakpoint,
+    isLargerBreakpoint,
+  ]);
+  const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
+  // Setting a global CSS variable with the nav width
+  // so that other pages have it available when needed.
+  useEffect(() => {
+    setGlobalCSSVariables({
+      '--kbnSolutionNavOffset': navWidth,
+    });
+  }, [navWidth, setGlobalCSSVariables]);
+
   return (
     <>
       {isSmallerBreakpoint && (

src/plugins/console/public/application/containers/embeddable/_embeddable_console.scss

@@ -8,7 +8,6 @@
   box-shadow: inset 0 $embeddableConsoleInitialHeight 0 $embeddableConsoleBackground, inset 0 600rem 0 $euiPageBackgroundColor;
   bottom: 0;
   right: 0;
-  left: var(--euiCollapsibleNavOffset, 0);
   transform: translateY(0);
   height: $embeddableConsoleInitialHeight;
   max-height: $embeddableConsoleMaxHeight;
@@ -18,6 +17,18 @@
     z-index: $euiZLevel1;
   }
 
+  &--projectChrome {
+    left: var(--euiCollapsibleNavOffset, 0);
+  }
+
+  &--classicChrome {
+    left: var(--kbnSolutionNavOffset, 0);
+  }
+
+  &--unknownChrome {
+    left: 0;
+  }
+
   &-isOpen {
     animation-duration: $euiAnimSpeedNormal;
     animation-timing-function: $euiAnimSlightResistance;

src/plugins/console/public/application/containers/embeddable/embeddable_console.tsx

@@ -8,6 +8,7 @@
 
 import React, { useState } from 'react';
 import classNames from 'classnames';
+import useObservable from 'react-use/lib/useObservable';
 import {
   EuiButton,
   EuiFocusTrap,
@@ -38,6 +39,7 @@ export const EmbeddableConsole = ({
 }: EmbeddableConsoleProps & EmbeddableConsoleDependencies) => {
   const [isConsoleOpen, setIsConsoleOpen] = useState<boolean>(false);
   const toggleConsole = () => setIsConsoleOpen(!isConsoleOpen);
+  const chromeStyle = useObservable(core.chrome.getChromeStyle$());
 
   const onKeyDown = (event: any) => {
     if (event.key === keys.ESCAPE) {
@@ -52,6 +54,9 @@ export const EmbeddableConsole = ({
     'embeddableConsole--large': size === 'l',
     'embeddableConsole--medium': size === 'm',
     'embeddableConsole--small': size === 's',
+    'embeddableConsole--classicChrome': chromeStyle === 'classic',
+    'embeddableConsole--projectChrome': chromeStyle === 'project',
+    'embeddableConsole--unknownChrome': chromeStyle === undefined,
     'embeddableConsole--fixed': true,
     'embeddableConsole--showOnMobile': false,
   });