[SharedUX] Removing TODOs from KibanaPageTemplate (#141043)

* Remove a few TODOs

* Remove TODOs from page template, first pass

* Removing TODOs, pass 2

* Trying to convert to emotion

* Fix emotion styling

* Fix emotion styling

* Fix merge conflict

* Updating test

* Update packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx

Co-authored-by: Clint Andrew Hall <[email protected]>

* Move selectors to constants

Co-authored-by: Clint Andrew Hall <[email protected]>

packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { EuiPageTemplate } from '@elastic/eui';
 
@@ -21,6 +21,9 @@ const getClasses = (template?: string, className?: string) => {
   );
 };
 
+const KIBANA_CHROME_SELECTOR = '[data-test-subj="kibanaChrome"]';
+const HEADER_GLOBAL_NAV_SELECTOR = '[data-test-subj="headerGlobalNav"]';
+
 /**
  * A thin wrapper around EuiPageTemplate with a few Kibana specific additions
  */
@@ -35,6 +38,18 @@ export const KibanaPageTemplateInner: FC<Props> = ({
 }) => {
   let header;
 
+  const [offset, setOffset] = useState<number | undefined>();
+
+  useEffect(() => {
+    const kibanaChrome = document.querySelector(KIBANA_CHROME_SELECTOR) as HTMLElement;
+    if (kibanaChrome) {
+      const kibanaChromeHeader = kibanaChrome.querySelector(
+        HEADER_GLOBAL_NAV_SELECTOR
+      ) as HTMLElement;
+      setOffset(kibanaChromeHeader?.offsetTop + kibanaChromeHeader?.offsetHeight);
+    }
+  }, []);
+
   if (isEmptyState && pageHeader && !children) {
     const { iconType, pageTitle, description, rightSideItems } = pageHeader;
     const title = pageTitle ? <h1>{pageTitle}</h1> : undefined;
@@ -54,15 +69,11 @@ export const KibanaPageTemplateInner: FC<Props> = ({
 
   let sideBar;
   if (pageSideBar) {
-    sideBar = (
-      <EuiPageTemplate.Sidebar
-        // TODO: Get `offset` from Kibana Chrome Header and pass directly to:
-        // sticky={{ offset }}
-        {...pageSideBarProps}
-      >
-        {pageSideBar}
-      </EuiPageTemplate.Sidebar>
-    );
+    const sideBarProps = { ...pageSideBarProps };
+    if (offset) {
+      sideBarProps.sticky = { offset };
+    }
+    sideBar = <EuiPageTemplate.Sidebar {...sideBarProps}>{pageSideBar}</EuiPageTemplate.Sidebar>;
   }
 
   const classes = getClasses(undefined, className);

packages/shared-ux/page/solution_nav/BUILD.bazel

@@ -78,6 +78,7 @@ TYPES_DEPS = [
   "//packages/kbn-i18n-react:npm_module_types",
   "//packages/kbn-i18n:npm_module_types",
   "//packages/shared-ux/avatar/solution:npm_module_types",
+  "//packages/shared-ux/page/kibana_template/types"
 ]
 
 jsts_transpiler(

packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiCanAnimate, EuiThemeComputed } from '@elastic/eui';
+
+export const WithSolutionNavStyles = (euiTheme: EuiThemeComputed<{}>) => {
+  return css`
+    flex: 0 1 0%;
+    overflow: hidden;
+    ${euiCanAnimate} {
+      transition: min-width ${euiTheme.animation.fast} ${euiTheme.animation.resistance};
+    }
+  `;
+};

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

@@ -8,27 +8,20 @@
 
 import React, { ComponentType, ReactNode, useState } from 'react';
 import classNames from 'classnames';
-import {
-  useIsWithinBreakpoints,
-  useEuiTheme,
-  useIsWithinMinBreakpoint,
-  EuiPageSidebarProps,
-} from '@elastic/eui';
+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';
-
-import './with_solution_nav.scss';
+import { WithSolutionNavStyles } from './with_solution_nav.styles';
 
 // https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
 function getDisplayName(Component: ComponentType<any>) {
   return Component.displayName || Component.name || 'UnnamedComponent';
 }
 
-// TODO: Would be nice to grab these from KibanaPageTemplate or vice-versa
-interface TemplateProps {
-  pageSideBar?: ReactNode;
-  pageSideBarProps?: Partial<EuiPageSidebarProps>;
+type TemplateProps = Pick<KibanaPageTemplateProps, 'pageSideBar' | 'pageSideBarProps'> & {
   children?: ReactNode;
-}
+};
 
 type Props<P> = P &
   TemplateProps & {
@@ -58,8 +51,8 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
     const { canBeCollapsed = true } = solutionNav;
     const isSidebarShrunk =
       isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop);
+    const withSolutionNavStyles = WithSolutionNavStyles(euiTheme);
     const sideBarClasses = classNames(
-      'kbnSolutionNav__sidebar',
       'kbnStickyMenu',
       {
         'kbnSolutionNav__sidebar--shrink': isSidebarShrunk,
@@ -75,11 +68,12 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
       />
     );
 
-    const pageSideBarProps: TemplateProps['pageSideBarProps'] = {
+    const pageSideBarProps: TemplateProps['pageSideBarProps'] & { css: SerializedStyles } = {
       paddingSize: 'none' as 'none',
       ...props.pageSideBarProps,
       minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,
       className: sideBarClasses,
+      css: withSolutionNavStyles,
     };
 
     return (