From 3886acf8e61c854d41e01120cbea30bbb0c83e9b Mon Sep 17 00:00:00 2001
From: Maja Grubic <maja.grubic@elastic.co>
Date: Mon, 31 Oct 2022 22:20:26 +0100
Subject: [PATCH] [SharedUX][Bugfix] Solution nav with no data page

---
 .../with_solution_nav.test.tsx.snap           | 30 ++-----------------
 .../src/with_solution_nav.styles.ts           |  4 +--
 .../solution_nav/src/with_solution_nav.tsx    |  9 ++----
 3 files changed, 7 insertions(+), 36 deletions(-)

diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
index 749d0a13ad8d7..d31d61c4b8129 100644
--- a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
+++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
@@ -52,20 +52,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
   }
   pageSideBarProps={
     Object {
-      "className": "kbnStickyMenu",
-      "css": Object {
-        "map": undefined,
-        "name": "sx7fqw",
-        "next": undefined,
-        "styles": "
-    flex: 0 1 0%;
-    overflow: hidden;
-    @media screen and (prefers-reduced-motion: no-preference) {
-      transition: min-width 150ms cubic-bezier(.694, .0482, .335, 1);
-    }
-  ",
-        "toString": [Function],
-      },
+      "className": "css-c34ez9",
       "minWidth": undefined,
       "paddingSize": "none",
     }
@@ -125,20 +112,7 @@ exports[`WithSolutionNav with children 1`] = `
   }
   pageSideBarProps={
     Object {
-      "className": "kbnStickyMenu",
-      "css": Object {
-        "map": undefined,
-        "name": "sx7fqw",
-        "next": undefined,
-        "styles": "
-    flex: 0 1 0%;
-    overflow: hidden;
-    @media screen and (prefers-reduced-motion: no-preference) {
-      transition: min-width 150ms cubic-bezier(.694, .0482, .335, 1);
-    }
-  ",
-        "toString": [Function],
-      },
+      "className": "css-c34ez9",
       "minWidth": undefined,
       "paddingSize": "none",
     }
diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts b/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts
index 906f1fdd8e293..628b27ffba993 100644
--- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts
@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
+import { css } from '@emotion/css';
 import { euiCanAnimate, EuiThemeComputed } from '@elastic/eui';
 
 export const WithSolutionNavStyles = (euiTheme: EuiThemeComputed<{}>) => {
   return css`
-    flex: 0 1 0%;
+    flex: 0 1 0;
     overflow: hidden;
     ${euiCanAnimate} {
       transition: min-width ${euiTheme.animation.fast} ${euiTheme.animation.resistance};
diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
index 0c3f0359c1f6e..d35834e7cdd9d 100644
--- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
@@ -8,7 +8,6 @@
 
 import React, { ComponentType, ReactNode, useState } from 'react';
 import classNames from 'classnames';
-import { SerializedStyles } from '@emotion/serialize';
 import { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template-types';
 import { useIsWithinBreakpoints, useEuiTheme, useIsWithinMinBreakpoint } from '@elastic/eui';
 import { SolutionNav, SolutionNavProps } from './solution_nav';
@@ -37,7 +36,6 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
     const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(
       !JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY)))
     );
-
     const { solutionNav, children, ...propagatedProps } = props;
     const { euiTheme } = useEuiTheme();
 
@@ -53,11 +51,11 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
       isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop);
     const withSolutionNavStyles = WithSolutionNavStyles(euiTheme);
     const sideBarClasses = classNames(
-      'kbnStickyMenu',
       {
         'kbnSolutionNav__sidebar--shrink': isSidebarShrunk,
       },
-      props.pageSideBarProps?.className
+      props.pageSideBarProps?.className,
+      withSolutionNavStyles
     );
 
     const pageSideBar = (
@@ -68,12 +66,11 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
       />
     );
 
-    const pageSideBarProps: TemplateProps['pageSideBarProps'] & { css: SerializedStyles } = {
+    const pageSideBarProps: TemplateProps['pageSideBarProps'] = {
       paddingSize: 'none' as 'none',
       ...props.pageSideBarProps,
       minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,
       className: sideBarClasses,
-      css: withSolutionNavStyles,
     };
 
     return (