From 93d941b069cbfbf4253e74fe179bb2f6d81a99d6 Mon Sep 17 00:00:00 2001 From: Tim Sullivan Date: Fri, 5 May 2023 09:13:23 -0700 Subject: [PATCH] Add side navigation component for serverless search (#156465) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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** Screenshot 2023-05-02 at 10 32 49 PM **After** Screenshot 2023-05-02 at 10 33 04 PM ### 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 <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Sébastien Loix --- packages/kbn-optimizer/limits.yml | 2 +- .../serverless_search/public/layout/nav.tsx | 56 +++++++++++++++++++ .../serverless_search/public/plugin.ts | 4 +- .../plugins/serverless_search/public/types.ts | 3 - .../plugins/serverless_search/tsconfig.json | 2 +- 5 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 x-pack/plugins/serverless_search/public/layout/nav.tsx diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 13cf535a36873..895920d372ed4 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/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 diff --git a/x-pack/plugins/serverless_search/public/layout/nav.tsx b/x-pack/plugins/serverless_search/public/layout/nav.tsx new file mode 100644 index 0000000000000..9622f9dc4c2ad --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/x-pack/plugins/serverless_search/public/plugin.ts b/x-pack/plugins/serverless_search/public/plugin.ts index 62a83cff6f477..ac249642cba7d 100644 --- a/x-pack/plugins/serverless_search/public/plugin.ts +++ b/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 {}; } diff --git a/x-pack/plugins/serverless_search/public/types.ts b/x-pack/plugins/serverless_search/public/types.ts index ad66e6df85c74..254fb0d491a2c 100644 --- a/x-pack/plugins/serverless_search/public/types.ts +++ b/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; } diff --git a/x-pack/plugins/serverless_search/tsconfig.json b/x-pack/plugins/serverless_search/tsconfig.json index c8150e5a71926..0d4e06177c9e2 100644 --- a/x-pack/plugins/serverless_search/tsconfig.json +++ b/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", ] }