add recent items

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/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/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/ui/navigation.stories.tsx

@@ -13,9 +13,10 @@ import {
   EuiPopover,
   EuiThemeProvider,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
-import { css } from '@emotion/react';
+import { BehaviorSubject } from 'rxjs';
 import { getSolutionPropertiesMock, NavigationStorybookMock } from '../../mocks';
 import mdx from '../../README.mdx';
 import { NavigationProps, NavigationServices } from '../../types';
@@ -132,7 +133,7 @@ ReducedPlatformLinks.argTypes = storybookMock.getArgumentTypes();
 export const WithRequestsLoading: ComponentStory<typeof Template> = Template.bind({});
 WithRequestsLoading.args = {
   activeNavItemId: 'example_project.root.get_started',
-  loadingCount: 1,
+  loadingCount$: new BehaviorSubject(1),
   solutions: [getSolutionPropertiesMock()],
 };
 WithRequestsLoading.argTypes = storybookMock.getArgumentTypes();

packages/shared-ux/chrome/navigation/src/ui/navigation.test.tsx

@@ -8,6 +8,7 @@
 
 import { render } from '@testing-library/react';
 import React from 'react';
+import { BehaviorSubject } from 'rxjs';
 import { getServicesMock } from '../../mocks/src/jest';
 import { PlatformConfigSet, SolutionProperties } from '../../types';
 import { Platform } from '../model';
@@ -114,7 +115,7 @@ describe('<Navigation />', () => {
   });
 
   test('shows loading state', async () => {
-    services.loadingCount = 5;
+    services.loadingCount$ = new BehaviorSubject(5);
 
     const { findByTestId } = render(
       <NavigationProvider {...services} navIsOpen={true}>

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

@@ -6,13 +6,16 @@
  * Side Public License, v 1.
  */
 
+import useObservable from 'react-use/lib/useObservable';
 import {
   EuiCollapsibleNavGroup,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHeaderLogo,
   EuiLink,
   EuiLoadingSpinner,
+  EuiSideNav,
+  EuiSideNavItemType,
   EuiSpacer,
   useEuiTheme,
 } from '@elastic/eui';
@@ -21,28 +24,35 @@ import { getI18nStrings } from './i18n_strings';
 import { NavigationBucketProps, NavigationProps } from '../../types';
 import { NavigationModel } from '../model';
 import { useNavigation } from '../services';
+import { navigationStyles as styles } from '../styles';
 import { ElasticMark } from './elastic_mark';
 import './header_logo.scss';
 import { NavigationBucket } from './navigation_bucket';
 
 export const Navigation = (props: NavigationProps) => {
-  const { loadingCount, activeNavItemId, ...services } = useNavigation();
+  const { activeNavItemId, basePath, navIsOpen, navigateToUrl, ...observables } = useNavigation();
   const { euiTheme } = useEuiTheme();
 
   const activeNav = activeNavItemId ?? props.activeNavItemId;
 
-  const nav = new NavigationModel(services, props.platformConfig, props.solutions, activeNav);
+  const nav = new NavigationModel(
+    { basePath, navigateToUrl },
+    props.platformConfig,
+    props.solutions,
+    activeNav
+  );
 
   const solutions = nav.getSolutions();
   const { analytics, ml, devTools, management } = nav.getPlatform();
 
   const strings = getI18nStrings();
 
   const NavHeader = () => {
-    const homeUrl = services.basePath.prepend(props.homeHref);
+    const loadingCount = useObservable(observables.loadingCount$, 0);
+    const homeUrl = basePath.prepend(props.homeHref);
     const navigateHome = (event: React.MouseEvent) => {
       event.preventDefault();
-      services.navigateToUrl(homeUrl);
+      navigateToUrl(homeUrl);
     };
     const logo =
       loadingCount === 0 ? (
@@ -66,9 +76,7 @@ export const Navigation = (props: NavigationProps) => {
     return (
       <>
         {logo}
-        {services.navIsOpen ? (
-          <ElasticMark className="chrHeaderLogo__mark" aria-hidden={true} />
-        ) : null}
+        {navIsOpen ? <ElasticMark className="chrHeaderLogo__mark" aria-hidden={true} /> : null}
       </>
     );
   };
@@ -100,6 +108,34 @@ export const Navigation = (props: NavigationProps) => {
     }
   };
 
+  const RecentlyAccessed = () => {
+    const recentlyAccessed = useObservable(observables.recentlyAccessed$, []);
+
+    const navItems: Array<EuiSideNavItemType<unknown>> = [
+      {
+        name: '',
+        id: 'recents_root',
+        items: recentlyAccessed.map((item) => ({
+          ...item,
+          name: item.label,
+          href: item.link,
+        })),
+      },
+    ];
+
+    return (
+      <EuiCollapsibleNavGroup
+        title={strings.recentlyAccessed}
+        iconType="clock"
+        isCollapsible={true}
+        initialIsOpen={recentlyAccessed.length > 0}
+        data-test-subj={`nav-bucket-recentlyAccessed`}
+      >
+        <EuiSideNav items={navItems} css={styles.euiSideNavItems} />
+      </EuiCollapsibleNavGroup>
+    );
+  };
+
   // higher-order-component to keep the common props DRY
   const NavigationBucketHoc = (outerProps: Omit<NavigationBucketProps, 'activeNavItemId'>) => (
     <NavigationBucket {...outerProps} activeNavItemId={activeNav} />
@@ -114,6 +150,8 @@ export const Navigation = (props: NavigationProps) => {
 
         <LinkToCloud />
 
+        <RecentlyAccessed />
+
         {solutions.map((solutionBucket, idx) => {
           return <NavigationBucketHoc {...solutionBucket} key={`solution${idx}`} />;
         })}

packages/shared-ux/chrome/navigation/types/index.ts

@@ -17,7 +17,8 @@ import { BasePathService, NavigateToUrlFn, RecentItem } from './internal';
 export interface NavigationServices {
   activeNavItemId?: string;
   basePath: BasePathService;
-  loadingCount: number;
+  loadingCount$: Observable<number>;
+  recentlyAccessed$: Observable<RecentItem[]>;
   navIsOpen: boolean;
   navigateToUrl: NavigateToUrlFn;
 }