Add side navigation component for serverless search (elastic#156465)

## Summary

This PR implements a side navigation tree for Serverless Enterprise
Search in a way that uses the earliest deliverables from the AppEx
Shared UX team.

Technical doc for Side Nav:
https://docs.google.com/document/d/1ew8KYl6ROs_V7jeIXgeP_C9YgkYK2IPtuceo6KVF_jE/edit#

### Screenshots
**Before**
<img width="1773" alt="Screenshot 2023-05-02 at 10 32 49 PM"
src="https://user-images.githubusercontent.com/908371/235839191-5b8bbc4a-5652-4c64-897d-44801f04fcf0.png">

**After**
<img width="1773" alt="Screenshot 2023-05-02 at 10 33 04 PM"
src="https://user-images.githubusercontent.com/908371/235839209-28a9a308-d3ec-4bac-8a21-f2b45abb15ef.png">

### Known issues

1. Page scroll is not working when Chrome renders in serverless project
mode. This issue exists prior to this PR
2. Highlighting the active link in the nav, and rendering the correct
breadcrumb trail, is planned for a future PR

### Checklist

Delete any items that are not applicable to this PR.

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Sébastien Loix <[email protected]>

packages/kbn-optimizer/limits.yml

@@ -117,7 +117,7 @@ pageLoadAssetSize:
   securitySolution: 66738
   serverless: 16573
   serverlessObservability: 16582
-  serverlessSearch: 17548
+  serverlessSearch: 20555
   serverlessSecurity: 41807
   sessionView: 77750
   share: 71239

x-pack/plugins/serverless_search/public/layout/nav.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CoreStart } from '@kbn/core/public';
+import {
+  ChromeNavigationNodeViewModel,
+  Navigation,
+  NavigationKibanaProvider,
+} from '@kbn/shared-ux-chrome-navigation';
+import React from 'react';
+
+const navItems: ChromeNavigationNodeViewModel[] = [
+  {
+    title: '',
+    id: 'root',
+    items: [
+      { id: 'overview', title: 'Overview', href: '/app/enterprise_search/overview' },
+      { id: 'indices', title: 'Indices', href: '/app/enterprise_search/content/search_indices' },
+      { id: 'engines', title: 'Engines', href: '/app/enterprise_search/content/engines' },
+      { id: 'api_keys', title: 'API keys', href: '/app/management/security/api_keys' },
+      {
+        id: 'ingest_pipelines',
+        title: 'Ingest pipelines',
+        href: '/app/management/ingest/ingest_pipelines',
+      },
+    ],
+  },
+];
+
+export const createServerlessSearchSideNavComponent = (core: CoreStart) => () => {
+  // Currently, this allows the "Search" section of the side nav to render as pre-expanded.
+  // This will soon be powered from state received from core.chrome
+  const activeNavItemId = 'search_project_nav.root';
+
+  return (
+    <NavigationKibanaProvider core={core}>
+      <Navigation
+        navigationTree={[
+          {
+            id: 'search_project_nav',
+            items: navItems,
+            title: 'Search',
+            icon: 'logoEnterpriseSearch',
+          },
+        ]}
+        activeNavItemId={activeNavItemId}
+        homeHref="/app/enterprise_search/content/setup_guide"
+        linkToCloud="projects"
+      />
+    </NavigationKibanaProvider>
+  );
+};

x-pack/plugins/serverless_search/public/plugin.ts

@@ -6,6 +6,7 @@
  */
 
 import { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { createServerlessSearchSideNavComponent as createComponent } from './layout/nav';
 import {
   ServerlessSearchPluginSetup,
   ServerlessSearchPluginSetupDependencies,
@@ -24,9 +25,10 @@ export class ServerlessSearchPlugin
   }
 
   public start(
-    _core: CoreStart,
+    core: CoreStart,
     _startDeps: ServerlessSearchPluginStartDependencies
   ): ServerlessSearchPluginStart {
+    core.chrome.project.setSideNavComponent(createComponent(core));
     return {};
   }
 

x-pack/plugins/serverless_search/public/types.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { ServerlessPluginSetup, ServerlessPluginStart } from '@kbn/serverless/public';
 import { ManagementSetup, ManagementStart } from '@kbn/management-plugin/public';
 import {
   EnterpriseSearchPublicSetup,
@@ -21,11 +20,9 @@ export interface ServerlessSearchPluginStart {}
 export interface ServerlessSearchPluginSetupDependencies {
   enterpriseSearch: EnterpriseSearchPublicSetup;
   management: ManagementSetup;
-  serverless: ServerlessPluginSetup;
 }
 
 export interface ServerlessSearchPluginStartDependencies {
   enterpriseSearch: EnterpriseSearchPublicStart;
   management: ManagementStart;
-  serverless: ServerlessPluginStart;
 }

x-pack/plugins/serverless_search/tsconfig.json

@@ -19,6 +19,6 @@
     "@kbn/config-schema",
     "@kbn/enterprise-search-plugin",
     "@kbn/management-plugin",
-    "@kbn/serverless",
+    "@kbn/shared-ux-chrome-navigation",
   ]
 }