[SharedUx/POC] New package for project-style navigation. Integration from Serverless Search POC

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

@@ -121,6 +121,7 @@ export class ChromeService {
     const helpSupportUrl$ = new BehaviorSubject<string>(KIBANA_ASK_ELASTIC_LINK);
     const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true');
     const chromeStyle$ = new BehaviorSubject<ChromeStyle>('classic');
+    const projectNavigation$ = new BehaviorSubject<JSX.Element | undefined>(undefined);
 
     const getKbnVersionClass = () => {
       // we assume that the version is valid and has the form 'X.X.X'
@@ -170,6 +171,10 @@ export class ChromeService {
       chromeStyle$.next(style);
     };
 
+    const setProjectNavigation = (navigation: JSX.Element) => {
+      projectNavigation$.next(navigation);
+    };
+
     const isIE = () => {
       const ua = window.navigator.userAgent;
       const msie = ua.indexOf('MSIE '); // IE 10 or older
@@ -211,14 +216,21 @@ export class ChromeService {
     }
 
     const getHeaderComponent = () => {
-      const Component = ({ style$ }: { style$: typeof chromeStyle$ }) => {
+      const Component = ({
+        style$,
+        navigation$,
+      }: {
+        style$: typeof chromeStyle$;
+        navigation$: typeof projectNavigation$;
+      }) => {
         if (style$.getValue() === 'project') {
           return (
             <ProjectHeader
               {...{
                 application,
                 globalHelpExtensionMenuLinks$,
               }}
+              navigation={navigation$.getValue() ?? null}
               actionMenu$={application.currentActionMenu$}
               breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
               helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
@@ -260,7 +272,7 @@ export class ChromeService {
           />
         );
       };
-      return <Component {...{ style$: chromeStyle$ }} />;
+      return <Component {...{ style$: chromeStyle$, navigation$: projectNavigation$ }} />;
     };
 
     return {
@@ -335,6 +347,7 @@ export class ChromeService {
       getBodyClasses$: () => bodyClasses$.pipe(takeUntil(this.stop$)),
       setChromeStyle,
       getChromeStyle$: () => chromeStyle$.pipe(takeUntil(this.stop$)),
+      setProjectNavigation,
     };
   }
 

packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { Router } from 'react-router-dom';
-import { EuiHeader, EuiHeaderLogo, EuiHeaderSection, EuiHeaderSectionItem } from '@elastic/eui';
+import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '@elastic/eui';
 import {
   ChromeBreadcrumb,
   ChromeGlobalHelpExtensionMenuLink,
@@ -33,29 +33,21 @@ interface Props {
   helpSupportUrl$: Observable<string>;
   kibanaVersion: string;
   application: InternalApplicationStart;
+  navigation: JSX.Element | null;
   navControlsRight$: Observable<ChromeNavControl[]>;
 }
 
 export const ProjectHeader = ({
   application,
   kibanaDocLink,
   kibanaVersion,
+  navigation,
   ...observables
 }: Props) => {
-  const renderLogo = () => (
-    <EuiHeaderLogo
-      iconType="logoElastic"
-      href="#"
-      onClick={(e) => e.preventDefault()}
-      aria-label="Go to home page"
-    />
-  );
-
   return (
     <>
       <EuiHeader position="fixed">
         <EuiHeaderSection grow={false}>
-          <EuiHeaderSectionItem border="right">{renderLogo()}</EuiHeaderSectionItem>
           <EuiHeaderSectionItem>
             <HeaderBreadcrumbs breadcrumbs$={observables.breadcrumbs$} />
           </EuiHeaderSectionItem>
@@ -81,9 +73,7 @@ export const ProjectHeader = ({
         </EuiHeaderSection>
       </EuiHeader>
       <Router history={application.history}>
-        <ProjectNavigation>
-          <span />
-        </ProjectNavigation>
+        <ProjectNavigation>{navigation}</ProjectNavigation>
       </Router>
     </>
   );

packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx

@@ -11,7 +11,7 @@ import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { css } from '@emotion/react';
 
 import { i18n } from '@kbn/i18n';
-import { EuiButtonIcon, EuiCollapsibleNav, EuiThemeProvider, useEuiTheme } from '@elastic/eui';
+import { EuiButtonIcon, EuiCollapsibleNav } from '@elastic/eui';
 
 const LOCAL_STORAGE_IS_OPEN_KEY = 'PROJECT_NAVIGATION_OPEN' as const;
 const SIZE_OPEN = 248;
@@ -33,8 +33,6 @@ const closedAriaLabel = i18n.translate('core.ui.chrome.projectNav.collapsibleNav
 });
 
 export const ProjectNavigation: React.FC = ({ children }) => {
-  const { euiTheme, colorMode } = useEuiTheme();
-
   const [isOpen, setIsOpen] = useLocalStorage(LOCAL_STORAGE_IS_OPEN_KEY, true);
 
   const toggleOpen = useCallback(() => {
@@ -43,34 +41,31 @@ export const ProjectNavigation: React.FC = ({ children }) => {
 
   const collabsibleNavCSS = css`
     border-inline-end-width: 1,
-    background: ${euiTheme.colors.darkestShade},
     display: flex,
     flex-direction: row,
   `;
 
   return (
-    <EuiThemeProvider colorMode={colorMode === 'DARK' ? 'LIGHT' : 'DARK'}>
-      <EuiCollapsibleNav
-        css={collabsibleNavCSS}
-        isOpen={true}
-        showButtonIfDocked={true}
-        onClose={toggleOpen}
-        isDocked={true}
-        size={isOpen ? SIZE_OPEN : SIZE_CLOSED}
-        hideCloseButton={false}
-        button={
-          <span css={buttonCSS}>
-            <EuiButtonIcon
-              iconType={isOpen ? 'menuLeft' : 'menuRight'}
-              aria-label={isOpen ? openAriaLabel : closedAriaLabel}
-              color="text"
-              onClick={toggleOpen}
-            />
-          </span>
-        }
-      >
-        {isOpen && children}
-      </EuiCollapsibleNav>
-    </EuiThemeProvider>
+    <EuiCollapsibleNav
+      css={collabsibleNavCSS}
+      isOpen={true}
+      showButtonIfDocked={true}
+      onClose={toggleOpen}
+      isDocked={true}
+      size={isOpen ? SIZE_OPEN : SIZE_CLOSED}
+      hideCloseButton={false}
+      button={
+        <span css={buttonCSS}>
+          <EuiButtonIcon
+            iconType={isOpen ? 'menuLeft' : 'menuRight'}
+            aria-label={isOpen ? openAriaLabel : closedAriaLabel}
+            color={isOpen ? 'ghost' : 'text'}
+            onClick={toggleOpen}
+          />
+        </span>
+      }
+    >
+      {isOpen && children}
+    </EuiCollapsibleNav>
   );
 };

packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts

@@ -63,6 +63,7 @@ const createStartContractMock = () => {
     getBodyClasses$: jest.fn(),
     getChromeStyle$: jest.fn(),
     setChromeStyle: jest.fn(),
+    setProjectNavigation: jest.fn(),
   };
   startContract.navLinks.getAll.mockReturnValue([]);
   startContract.getIsVisible$.mockReturnValue(new BehaviorSubject(false));

packages/core/chrome/core-chrome-browser/src/contracts.ts

@@ -161,4 +161,12 @@ export interface ChromeStart {
    * Get an observable of the current style type of the chrome.
    */
   getChromeStyle$(): Observable<ChromeStyle>;
+
+  /**
+   * Sets the project navigation to render in the chrome.
+   * @param projectNavigation The navigation to render in the chrome.
+   *
+   * @remarks Has no effect if the chrome style is not `project`.
+   */
+  setProjectNavigation(projectNavigation: JSX.Element): void;
 }

packages/shared-ux/chrome/navigation/mocks/src/jest.ts

@@ -6,18 +6,21 @@
  * Side Public License, v 1.
  */
 
+import { BehaviorSubject } from 'rxjs';
 import { NavigationServices, SolutionProperties } from '../../types';
 
 export const getServicesMock = (): NavigationServices => {
   const navigateToUrl = jest.fn().mockResolvedValue(undefined);
   const basePath = { prepend: jest.fn((path: string) => `/base${path}`) };
-  const loadingCount = 0;
+  const loadingCount$ = new BehaviorSubject(0);
+  const recentlyAccessed$ = new BehaviorSubject([]);
 
   return {
     basePath,
-    loadingCount,
     navIsOpen: true,
     navigateToUrl,
+    loadingCount$,
+    recentlyAccessed$,
   };
 };
 

packages/shared-ux/chrome/navigation/mocks/src/storybook.ts

@@ -13,7 +13,12 @@ import { NavigationProps, NavigationServices } from '../../types';
 type Arguments = NavigationProps & NavigationServices;
 export type Params = Pick<
   Arguments,
-  'activeNavItemId' | 'loadingCount' | 'navIsOpen' | 'platformConfig' | 'solutions'
+  | 'activeNavItemId'
+  | 'loadingCount$'
+  | 'recentlyAccessed$'
+  | 'navIsOpen'
+  | 'platformConfig'
+  | 'solutions'
 >;
 
 export class StorybookMock extends AbstractStorybookMock<NavigationProps, NavigationServices> {

packages/shared-ux/chrome/navigation/src/ui/i18n_strings.ts → packages/shared-ux/chrome/navigation/src/i18n_strings.ts

@@ -27,4 +27,10 @@ export const getI18nStrings = () => ({
       defaultMessage: 'My deployments',
     }
   ),
+  recentlyAccessed: i18n.translate(
+    'sharedUXPackages.chrome.sideNavigation.recentlyAccessed.title',
+    {
+      defaultMessage: 'Recent',
+    }
+  ),
 });

packages/shared-ux/chrome/navigation/src/model/index.ts

@@ -21,7 +21,6 @@ export interface NavigationModelDeps {
  * @public
  */
 export enum Platform {
-  Recents = 'recents',
   Analytics = 'analytics',
   MachineLearning = 'ml',
   DevTools = 'devTools',

packages/shared-ux/chrome/navigation/src/services.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { FC, useContext } from 'react';
-import useObservable from 'react-use/lib/useObservable';
 import { NavigationKibanaDependencies, NavigationServices } from '../types';
 
 const Context = React.createContext<NavigationServices | null>(null);
@@ -27,17 +26,16 @@ export const NavigationKibanaProvider: FC<NavigationKibanaDependencies> = ({
   ...dependencies
 }) => {
   const { core } = dependencies;
-  const { http } = core;
+  const { chrome, http } = core;
   const { basePath } = http;
   const { navigateToUrl } = core.application;
 
-  const loadingCount = useObservable(http.getLoadingCount$(), 0);
-
   const value: NavigationServices = {
     basePath,
-    loadingCount,
     navigateToUrl,
     navIsOpen: true,
+    loadingCount$: http.getLoadingCount$(),
+    recentlyAccessed$: chrome.recentlyAccessed.get$(),
   };
 
   return (

packages/shared-ux/chrome/navigation/src/ui/components/header.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 { EuiHeaderLogo, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { NavigationProps, NavigationServices } from '../../../types';
+import { getI18nStrings } from '../../i18n_strings';
+import { ElasticMark } from './elastic_mark';
+import './header_logo.scss';
+
+type Props = Pick<NavigationProps, 'homeHref'>;
+type Services = Pick<
+  NavigationServices,
+  'basePath' | 'navIsOpen' | 'navigateToUrl' | 'loadingCount$'
+>;
+
+export const NavHeader = (props: Props & Services) => {
+  const strings = getI18nStrings();
+  const { basePath, navIsOpen, navigateToUrl, loadingCount$, homeHref } = props;
+
+  const loadingCount = useObservable(loadingCount$, 0);
+  const homeUrl = basePath.prepend(homeHref);
+  const navigateHome = (event: React.MouseEvent) => {
+    event.preventDefault();
+    navigateToUrl(homeUrl);
+  };
+  const logo =
+    loadingCount === 0 ? (
+      <EuiHeaderLogo
+        iconType="logoElastic"
+        aria-label={strings.headerLogoAriaLabel}
+        onClick={navigateHome}
+        data-test-subj="nav-header-logo"
+      />
+    ) : (
+      <a href={homeUrl} onClick={navigateHome}>
+        <EuiLoadingSpinner
+          size="l"
+          aria-hidden={false}
+          onClick={navigateHome}
+          data-test-subj="nav-header-loading-spinner"
+        />
+      </a>
+    );
+
+  return (
+    <>
+      {logo}
+      {navIsOpen ? <ElasticMark className="chrHeaderLogo__mark" aria-hidden={true} /> : null}
+    </>
+  );
+};

packages/shared-ux/chrome/navigation/src/ui/components/index.tsx

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export { NavHeader } from './header';
+export { LinkToCloud } from './link_to_cloud';
+export { NavigationBucket } from './navigation_bucket';
+export { RecentlyAccessed } from './recently_accessed';