[SharedUx] Chrome/Navigation package

.github/CODEOWNERS

@@ -583,6 +583,7 @@ packages/shared-ux/button_toolbar @elastic/appex-sharedux
 packages/shared-ux/card/no_data/impl @elastic/appex-sharedux
 packages/shared-ux/card/no_data/mocks @elastic/appex-sharedux
 packages/shared-ux/card/no_data/types @elastic/appex-sharedux
+packages/shared-ux/chrome/navigation @elastic/appex-sharedux
 packages/shared-ux/file/context @elastic/appex-sharedux
 packages/shared-ux/file/image/impl @elastic/appex-sharedux
 packages/shared-ux/file/image/mocks @elastic/appex-sharedux

package.json

@@ -584,6 +584,7 @@
     "@kbn/shared-ux-card-no-data": "link:packages/shared-ux/card/no_data/impl",
     "@kbn/shared-ux-card-no-data-mocks": "link:packages/shared-ux/card/no_data/mocks",
     "@kbn/shared-ux-card-no-data-types": "link:packages/shared-ux/card/no_data/types",
+    "@kbn/shared-ux-chrome-navigation": "link:packages/shared-ux/chrome/navigation",
     "@kbn/shared-ux-file-context": "link:packages/shared-ux/file/context",
     "@kbn/shared-ux-file-image": "link:packages/shared-ux/file/image/impl",
     "@kbn/shared-ux-file-image-mocks": "link:packages/shared-ux/file/image/mocks",

packages/shared-ux/chrome/navigation/README.mdx

@@ -0,0 +1,26 @@
+---
+id: sharedUX/Chrome/Navigation
+slug: /shared-ux/chrome/navigation
+title: Kibana Chrome Navigation
+description: Navigation container to render items for cross-app linking
+tags: ['shared-ux', 'component', 'chrome', 'navigation']
+date: 2023-02-28
+---
+
+## Description
+
+Empty package generated by @kbn/generate
+@kbn/shared-ux-chrome-navigation
+Navigation container to render items for cross-app linking
+
+## API
+
+| Export | Description |
+|---|---|
+| `NavigationProvider` | Provides contextual services to `Navigation`. |
+| `NavigationKibanaProvider` | Maps Kibana dependencies to provide contextual services to `Navigation`. |
+| `Navigation` | Uses a `Provider` to access contextual services and render the component. |
+
+## EUI Promotion Status
+
+This component is not currently considered for promotion to EUI.

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

@@ -0,0 +1,11 @@
+/*
+ * 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 { NavigationKibanaProvider, NavigationProvider } from './src/services';
+export { Navigation } from './src/ui/navigation';
+export type { NavigationProps, NavigationServices, NavItemProps } from './types';

packages/shared-ux/chrome/navigation/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/packages/shared-ux/chrome/navigation'],
+};

packages/shared-ux/chrome/navigation/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/shared-ux-chrome-navigation",
+  "owner": "@elastic/appex-sharedux"
+}

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

@@ -0,0 +1,14 @@
+/*
+ * 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 {
+  getServicesMock as getNavigationServicesMock,
+  getSolutionPropertiesMock,
+} from './src/jest';
+export { StorybookMock as NavigationStorybookMock } from './src/storybook';
+export type { Params as NavigationStorybookParams } from './src/storybook';

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

@@ -0,0 +1,74 @@
+/*
+ * 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 { NavigationServices, SolutionProperties } from '../../types';
+
+export const getServicesMock = (): NavigationServices => {
+  const navigateToUrl = jest.fn().mockResolvedValue(undefined);
+  const basePath = { prepend: jest.fn((path: string) => `/base${path}`) };
+  const registerNavItemClick = jest.fn();
+  const loadingCount = 0;
+
+  return {
+    basePath,
+    loadingCount,
+    navIsOpen: true,
+    navigateToUrl,
+    registerNavItemClick,
+  };
+};
+
+export const getSolutionPropertiesMock = (): SolutionProperties => ({
+  id: 'example_project',
+  icon: 'logoObservability',
+  name: 'Example project',
+  items: [
+    {
+      id: 'root',
+      name: '',
+      items: [
+        {
+          id: 'get_started',
+          name: 'Get started',
+          href: '/app/example_project/get_started',
+        },
+        {
+          id: 'alerts',
+          name: 'Alerts',
+          href: '/app/example_project/alerts',
+        },
+        {
+          id: 'cases',
+          name: 'Cases',
+          href: '/app/example_project/cases',
+        },
+      ],
+    },
+    {
+      id: 'example_settings',
+      name: 'Settings',
+      items: [
+        {
+          id: 'logs',
+          name: 'Logs',
+          href: '/app/management/logs',
+        },
+        {
+          id: 'signals',
+          name: 'Signals',
+          href: '/app/management/signals',
+        },
+        {
+          id: 'tracing',
+          name: 'Tracing',
+          href: '/app/management/tracing',
+        },
+      ],
+    },
+  ],
+});

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

@@ -0,0 +1,68 @@
+/*
+ * 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 { AbstractStorybookMock } from '@kbn/shared-ux-storybook-mock';
+import { action } from '@storybook/addon-actions';
+import { BehaviorSubject } from 'rxjs';
+import { NavigationProps, NavigationServices } from '../../types';
+
+type Arguments = NavigationProps & NavigationServices;
+export type Params = Pick<
+  Arguments,
+  'activeNavItemId' | 'loadingCount' | 'navIsOpen' | 'platformConfig' | 'solutions'
+>;
+
+export class StorybookMock extends AbstractStorybookMock<NavigationProps, NavigationServices> {
+  propArguments = {};
+
+  serviceArguments = {
+    navIsOpen: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    loadingCount: {
+      control: 'number',
+      defaultValue: 0,
+    },
+  };
+
+  dependencies = [];
+
+  getServices(params: Params): NavigationServices {
+    const { navIsOpen } = params;
+
+    const navAction = action('Navigate to');
+    const navigateToUrl = (url: string) => {
+      navAction(url);
+      return Promise.resolve();
+    };
+
+    const registerNavItemClickAction = action('Register click');
+    const activeNavItemId$ = new BehaviorSubject<string | undefined>(undefined);
+    const registerNavItemClick = (id: string) => {
+      activeNavItemId$.next(id);
+      registerNavItemClickAction(id);
+    };
+
+    return {
+      ...params,
+      basePath: { prepend: (suffix: string) => `/basepath${suffix}` },
+      navigateToUrl,
+      navIsOpen,
+      registerNavItemClick,
+    };
+  }
+
+  getProps(params: Params): NavigationProps {
+    return {
+      ...params,
+      homeHref: '#',
+      linkToCloud: 'projects',
+    };
+  }
+}

packages/shared-ux/chrome/navigation/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/shared-ux-chrome-navigation",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

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

@@ -0,0 +1,78 @@
+/*
+ * 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 type { EuiSideNavItemType } from '@elastic/eui';
+import type { NavigationModelDeps } from '.';
+import type { NavItemProps, PlatformSectionConfig } from '../../types';
+
+type MyEuiSideNavItem = EuiSideNavItemType<unknown>;
+type OnClickFn = MyEuiSideNavItem['onClick'];
+
+/**
+ * Factory function to return a function that processes modeled nav items into EuiSideNavItemType
+ * The factory puts memoized function arguments in scope for iterations of the recursive item processing.
+ */
+export const createSideNavDataFactory = (
+  deps: NavigationModelDeps,
+  activeNavItemId: string | undefined
+) => {
+  const { basePath, navigateToUrl, registerNavItemClick } = deps;
+  const createSideNavData = (
+    parentIds: string | number = '',
+    navItems: NavItemProps[],
+    platformSectionConfig?: PlatformSectionConfig
+  ): Array<EuiSideNavItemType<unknown>> =>
+    navItems.reduce<MyEuiSideNavItem[]>((accum, item) => {
+      const { id, name, items: subNav, href } = item;
+      const config = platformSectionConfig?.properties?.[id];
+      if (config?.enabled === false) {
+        // return accumulated set without the item that is not enabled
+        return accum;
+      }
+
+      let onClick: OnClickFn | undefined;
+
+      const fullId = [parentIds, id].filter(Boolean).join('.');
+
+      if (href) {
+        onClick = (event: React.MouseEvent) => {
+          event.preventDefault();
+          navigateToUrl(basePath.prepend(href));
+          registerNavItemClick(fullId);
+        };
+      }
+
+      let filteredSubNav: MyEuiSideNavItem[] | undefined;
+      if (subNav) {
+        // recursion
+        const nextConfig = platformSectionConfig?.properties?.[id];
+        filteredSubNav = createSideNavData(fullId, subNav, nextConfig);
+      }
+
+      let isSelected: boolean = false;
+      let subjId = fullId;
+      if (!subNav && fullId === activeNavItemId) {
+        // if there are no subnav items and ID is current, mark the item as selected
+        isSelected = true;
+        subjId += '-selected';
+      }
+
+      const next: MyEuiSideNavItem = {
+        id: fullId,
+        name,
+        isSelected,
+        onClick,
+        href,
+        items: filteredSubNav,
+        ['data-test-subj']: `nav-item-${subjId}`,
+      };
+      return [...accum, next];
+    }, []);
+
+  return createSideNavData;
+};

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

@@ -0,0 +1,42 @@
+/*
+ * 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 { BasePathService, NavigateToUrlFn, NavItemClickFn } from '../../types/internal';
+import { analyticsItemSet } from './platform_nav/analytics';
+import { devtoolsItemSet } from './platform_nav/devtools';
+import { mlItemSet } from './platform_nav/machine_learning';
+import { managementItemSet } from './platform_nav/management';
+
+export interface NavigationModelDeps {
+  basePath: BasePathService;
+  navigateToUrl: NavigateToUrlFn;
+  registerNavItemClick: NavItemClickFn;
+}
+
+/**
+ * @public
+ */
+export enum Platform {
+  Recents = 'recents',
+  Analytics = 'analytics',
+  MachineLearning = 'ml',
+  DevTools = 'devTools',
+  Management = 'management',
+}
+
+/**
+ * @public
+ */
+export const navItemSet = {
+  [Platform.Analytics]: analyticsItemSet,
+  [Platform.MachineLearning]: mlItemSet,
+  [Platform.DevTools]: devtoolsItemSet,
+  [Platform.Management]: managementItemSet,
+};
+
+export { NavigationModel } from './model';