[8.x] [Search] Refactor: abstracting classic nav items (#196579)

packages/deeplinks/search/constants.ts

@@ -21,3 +21,7 @@ export const SERVERLESS_ES_SEARCH_INFERENCE_ENDPOINTS_ID = 'searchInferenceEndpo
 export const SEARCH_HOMEPAGE = 'searchHomepage';
 export const SEARCH_INDICES_START = 'elasticsearchStart';
 export const SEARCH_INDICES = 'elasticsearchIndices';
+export const SEARCH_ELASTICSEARCH = 'enterpriseSearchElasticsearch';
+export const SEARCH_VECTOR_SEARCH = 'enterpriseSearchVectorSearch';
+export const SEARCH_SEMANTIC_SEARCH = 'enterpriseSearchSemanticSearch';
+export const SEARCH_AI_SEARCH = 'enterpriseSearchAISearch';

packages/deeplinks/search/deep_links.ts

@@ -22,6 +22,10 @@ import {
   SEARCH_HOMEPAGE,
   SEARCH_INDICES_START,
   SEARCH_INDICES,
+  SEARCH_ELASTICSEARCH,
+  SEARCH_VECTOR_SEARCH,
+  SEARCH_SEMANTIC_SEARCH,
+  SEARCH_AI_SEARCH,
 } from './constants';
 
 export type EnterpriseSearchApp = typeof ENTERPRISE_SEARCH_APP_ID;
@@ -38,6 +42,10 @@ export type SearchInferenceEndpointsId = typeof SERVERLESS_ES_SEARCH_INFERENCE_E
 export type SearchHomepage = typeof SEARCH_HOMEPAGE;
 export type SearchStart = typeof SEARCH_INDICES_START;
 export type SearchIndices = typeof SEARCH_INDICES;
+export type SearchElasticsearch = typeof SEARCH_ELASTICSEARCH;
+export type SearchVectorSearch = typeof SEARCH_VECTOR_SEARCH;
+export type SearchSemanticSearch = typeof SEARCH_SEMANTIC_SEARCH;
+export type SearchAISearch = typeof SEARCH_AI_SEARCH;
 
 export type ContentLinkId = 'searchIndices' | 'connectors' | 'webCrawlers';
 
@@ -65,4 +73,8 @@ export type DeepLinkId =
   | `${EnterpriseSearchAppsearchApp}:${AppsearchLinkId}`
   | `${EnterpriseSearchRelevanceApp}:${RelevanceLinkId}`
   | SearchStart
-  | SearchIndices;
+  | SearchIndices
+  | SearchElasticsearch
+  | SearchVectorSearch
+  | SearchSemanticSearch
+  | SearchAISearch;

packages/deeplinks/search/index.ts

@@ -17,6 +17,10 @@ export {
   ENTERPRISE_SEARCH_WORKPLACESEARCH_APP_ID,
   SERVERLESS_ES_APP_ID,
   SERVERLESS_ES_CONNECTORS_ID,
+  SEARCH_ELASTICSEARCH,
+  SEARCH_VECTOR_SEARCH,
+  SEARCH_SEMANTIC_SEARCH,
+  SEARCH_AI_SEARCH,
 } from './constants';
 
 export type {

x-pack/plugins/enterprise_search/common/constants.ts

@@ -15,6 +15,10 @@ import {
   ENTERPRISE_SEARCH_ANALYTICS_APP_ID,
   ENTERPRISE_SEARCH_APPSEARCH_APP_ID,
   ENTERPRISE_SEARCH_WORKPLACESEARCH_APP_ID,
+  SEARCH_ELASTICSEARCH,
+  SEARCH_VECTOR_SEARCH,
+  SEARCH_SEMANTIC_SEARCH,
+  SEARCH_AI_SEARCH,
 } from '@kbn/deeplinks-search';
 import { i18n } from '@kbn/i18n';
 
@@ -58,7 +62,7 @@ export const ENTERPRISE_SEARCH_CONTENT_PLUGIN = {
 };
 
 export const AI_SEARCH_PLUGIN = {
-  ID: 'enterpriseSearchAISearch',
+  ID: SEARCH_AI_SEARCH,
   NAME: i18n.translate('xpack.enterpriseSearch.aiSearch.productName', {
     defaultMessage: 'AI Search',
   }),
@@ -91,7 +95,7 @@ export const ANALYTICS_PLUGIN = {
 };
 
 export const ELASTICSEARCH_PLUGIN = {
-  ID: 'enterpriseSearchElasticsearch',
+  ID: SEARCH_ELASTICSEARCH,
   NAME: i18n.translate('xpack.enterpriseSearch.elasticsearch.productName', {
     defaultMessage: 'Elasticsearch',
   }),
@@ -167,7 +171,7 @@ export const VECTOR_SEARCH_PLUGIN = {
     defaultMessage:
       'Elasticsearch can be used as a vector database, which enables vector search and semantic search use cases.',
   }),
-  ID: 'enterpriseSearchVectorSearch',
+  ID: SEARCH_VECTOR_SEARCH,
   LOGO: 'logoEnterpriseSearch',
   NAME: i18n.translate('xpack.enterpriseSearch.vectorSearch.productName', {
     defaultMessage: 'Vector Search',
@@ -184,7 +188,7 @@ export const SEMANTIC_SEARCH_PLUGIN = {
     defaultMessage:
       'Easily add semantic search to Elasticsearch with inference endpoints and the semantic_text field type, to boost search relevance.',
   }),
-  ID: 'enterpriseSearchSemanticSearch',
+  ID: SEARCH_SEMANTIC_SEARCH,
   LOGO: 'logoEnterpriseSearch',
   NAME: i18n.translate('xpack.enterpriseSearch.SemanticSearch.productName', {
     defaultMessage: 'Semantic Search',
@@ -297,3 +301,14 @@ export const CRAWLER = {
 
 // TODO remove this once the connector service types are no longer in "example" state
 export const EXAMPLE_CONNECTOR_SERVICE_TYPES = ['opentext_documentum'];
+
+export const GETTING_STARTED_TITLE = i18n.translate('xpack.enterpriseSearch.gettingStarted.title', {
+  defaultMessage: 'Getting started',
+});
+
+export const SEARCH_APPS_BREADCRUMB = i18n.translate(
+  'xpack.enterpriseSearch.searchApplications.breadcrumb',
+  {
+    defaultMessage: 'Search Applications',
+  }
+);

x-pack/plugins/enterprise_search/public/applications/__mocks__/kea_logic/kibana_logic.mock.ts

@@ -41,6 +41,7 @@ export const mockKibanaValues = {
   data: dataPluginMock.createStartContract(),
   esConfig: { elasticsearch_host: 'https://your_deployment_url' },
   getChromeStyle$: jest.fn().mockReturnValue(of('classic')),
+  getNavLinks: jest.fn().mockReturnValue([]),
   guidedOnboarding: {},
   history: mockHistory,
   indexMappingComponent: null,

x-pack/plugins/enterprise_search/public/applications/applications/components/playground/page_template.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 React, { useLayoutEffect } from 'react';
+
+import { useValues } from 'kea';
+
+import useObservable from 'react-use/lib/useObservable';
+
+import { SEARCH_PRODUCT_NAME } from '../../../../../common/constants';
+import { KibanaLogic } from '../../../shared/kibana';
+import { SetSearchPlaygroundChrome } from '../../../shared/kibana_chrome/set_chrome';
+import { EnterpriseSearchPageTemplateWrapper, PageTemplateProps } from '../../../shared/layout';
+import { useEnterpriseSearchNav } from '../../../shared/layout';
+import { SendEnterpriseSearchTelemetry } from '../../../shared/telemetry';
+
+import { PlaygroundHeaderDocsAction } from './header_docs_action';
+
+export type SearchPlaygroundPageTemplateProps = Omit<
+  PageTemplateProps,
+  'useEndpointHeaderActions'
+> & {
+  hasSchemaConflicts?: boolean;
+  restrictWidth?: boolean;
+  searchApplicationName?: string;
+};
+
+export const SearchPlaygroundPageTemplate: React.FC<SearchPlaygroundPageTemplateProps> = ({
+  children,
+  pageChrome,
+  pageViewTelemetry,
+  searchApplicationName,
+  hasSchemaConflicts,
+  restrictWidth = true,
+  ...pageTemplateProps
+}) => {
+  const navItems = useEnterpriseSearchNav();
+
+  const { renderHeaderActions, getChromeStyle$ } = useValues(KibanaLogic);
+  const chromeStyle = useObservable(getChromeStyle$(), 'classic');
+
+  useLayoutEffect(() => {
+    renderHeaderActions(PlaygroundHeaderDocsAction);
+
+    return () => {
+      renderHeaderActions();
+    };
+  }, []);
+
+  return (
+    <EnterpriseSearchPageTemplateWrapper
+      {...pageTemplateProps}
+      solutionNav={{
+        items: chromeStyle === 'classic' ? navItems : undefined,
+        name: SEARCH_PRODUCT_NAME,
+      }}
+      restrictWidth={restrictWidth}
+      setPageChrome={pageChrome && <SetSearchPlaygroundChrome trail={pageChrome} />}
+      useEndpointHeaderActions={false}
+    >
+      {pageViewTelemetry && (
+        <SendEnterpriseSearchTelemetry action="viewed" metric={pageViewTelemetry} />
+      )}
+      {children}
+    </EnterpriseSearchPageTemplateWrapper>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/applications/components/playground/playground.tsx

@@ -12,7 +12,8 @@ import { useValues } from 'kea';
 import { i18n } from '@kbn/i18n';
 
 import { KibanaLogic } from '../../../shared/kibana';
-import { EnterpriseSearchApplicationsPageTemplate } from '../layout/page_template';
+
+import { SearchPlaygroundPageTemplate } from './page_template';
 
 export const Playground: React.FC = () => {
   const { searchPlayground } = useValues(KibanaLogic);
@@ -22,7 +23,7 @@ export const Playground: React.FC = () => {
   }
   return (
     <searchPlayground.PlaygroundProvider>
-      <EnterpriseSearchApplicationsPageTemplate
+      <SearchPlaygroundPageTemplate
         pageChrome={[
           i18n.translate('xpack.enterpriseSearch.content.playground.breadcrumb', {
             defaultMessage: 'Playground',
@@ -33,10 +34,9 @@ export const Playground: React.FC = () => {
         panelled={false}
         customPageSections
         bottomBorder="extended"
-        docLink="playground"
       >
         <searchPlayground.Playground />
-      </EnterpriseSearchApplicationsPageTemplate>
+      </SearchPlaygroundPageTemplate>
     </searchPlayground.PlaygroundProvider>
   );
 };

x-pack/plugins/enterprise_search/public/applications/elasticsearch/components/elasticsearch_guide/elasticsearch_guide.tsx

@@ -40,7 +40,7 @@ export const ElasticsearchGuide = () => {
   }, []);
 
   return (
-    <EnterpriseSearchElasticsearchPageTemplate>
+    <EnterpriseSearchElasticsearchPageTemplate pageChrome={[]}>
       {isFlyoutOpen && <CreateApiKeyFlyout onClose={() => setIsFlyoutOpen(false)} />}
       <EuiTitle size="l" data-test-subj="elasticsearchGuide">
         <h1>

x-pack/plugins/enterprise_search/public/applications/elasticsearch/components/layout/page_template.tsx

@@ -19,13 +19,14 @@ export const EnterpriseSearchElasticsearchPageTemplate: React.FC<PageTemplatePro
   pageViewTelemetry,
   ...pageTemplateProps
 }) => {
+  const navItems = useEnterpriseSearchNav();
   return (
     <EnterpriseSearchPageTemplateWrapper
       {...pageTemplateProps}
       restrictWidth
       solutionNav={{
         name: SEARCH_PRODUCT_NAME,
-        items: useEnterpriseSearchNav(),
+        items: navItems,
       }}
       setPageChrome={pageChrome && <SetElasticsearchChrome trail={pageChrome} />}
     >

x-pack/plugins/enterprise_search/public/applications/index.tsx

@@ -114,6 +114,7 @@ export const renderApp = (
     data: plugins.data,
     esConfig,
     getChromeStyle$: chrome.getChromeStyle$,
+    getNavLinks: chrome.navLinks.getAll,
     guidedOnboarding,
     history,
     indexMappingComponent,

x-pack/plugins/enterprise_search/public/applications/shared/kibana/kibana_logic.ts

@@ -55,6 +55,7 @@ export interface KibanaLogicProps {
   data?: DataPublicPluginStart;
   esConfig: ESConfig;
   getChromeStyle$: ChromeStart['getChromeStyle$'];
+  getNavLinks: ChromeStart['navLinks']['getAll'];
   guidedOnboarding?: GuidedOnboardingPluginStart;
   history: ScopedHistory;
   indexMappingComponent?: React.FC<IndexMappingProps>;
@@ -87,6 +88,7 @@ export interface KibanaValues {
   data: DataPublicPluginStart | null;
   esConfig: ESConfig;
   getChromeStyle$: ChromeStart['getChromeStyle$'];
+  getNavLinks: ChromeStart['navLinks']['getAll'];
   guidedOnboarding: GuidedOnboardingPluginStart | null;
   history: ScopedHistory;
   indexMappingComponent: React.FC<IndexMappingProps> | null;
@@ -126,6 +128,7 @@ export const KibanaLogic = kea<MakeLogicType<KibanaValues>>({
     data: [props.data || null, {}],
     esConfig: [props.esConfig || { elasticsearch_host: ELASTICSEARCH_URL_PLACEHOLDER }, {}],
     getChromeStyle$: [props.getChromeStyle$, {}],
+    getNavLinks: [props.getNavLinks, {}],
     guidedOnboarding: [props.guidedOnboarding || null, {}],
     history: [props.history, {}],
     indexMappingComponent: [props.indexMappingComponent || null, {}],

x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_breadcrumbs.ts

@@ -22,6 +22,8 @@ import {
   VECTOR_SEARCH_PLUGIN,
   WORKPLACE_SEARCH_PLUGIN,
   SEMANTIC_SEARCH_PLUGIN,
+  APPLICATIONS_PLUGIN,
+  GETTING_STARTED_TITLE,
 } from '../../../../common/constants';
 
 import { stripLeadingSlash } from '../../../../common/strip_slashes';
@@ -126,7 +128,11 @@ export const useEnterpriseSearchBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =>
   ]);
 
 export const useAnalyticsBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =>
-  useSearchBreadcrumbs([{ text: ANALYTICS_PLUGIN.NAME, path: '/' }, ...breadcrumbs]);
+  useSearchBreadcrumbs([
+    { text: APPLICATIONS_PLUGIN.NAV_TITLE },
+    { text: ANALYTICS_PLUGIN.NAME, path: '/' },
+    ...breadcrumbs,
+  ]);
 
 export const useElasticsearchBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =>
   useSearchBreadcrumbs([
@@ -161,13 +167,25 @@ export const useSearchExperiencesBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =
   useSearchBreadcrumbs([{ text: SEARCH_EXPERIENCES_PLUGIN.NAV_TITLE, path: '/' }, ...breadcrumbs]);
 
 export const useEnterpriseSearchApplicationsBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =>
-  useSearchBreadcrumbs(breadcrumbs);
+  useSearchBreadcrumbs([{ text: APPLICATIONS_PLUGIN.NAV_TITLE }, ...breadcrumbs]);
 
 export const useAiSearchBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =>
-  useSearchBreadcrumbs([{ text: AI_SEARCH_PLUGIN.NAME, path: '/' }, ...breadcrumbs]);
+  useSearchBreadcrumbs([
+    { text: GETTING_STARTED_TITLE },
+    { text: AI_SEARCH_PLUGIN.NAME, path: '/' },
+    ...breadcrumbs,
+  ]);
 
 export const useVectorSearchBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =>
-  useSearchBreadcrumbs([{ text: VECTOR_SEARCH_PLUGIN.NAV_TITLE, path: '/' }, ...breadcrumbs]);
+  useSearchBreadcrumbs([
+    { text: GETTING_STARTED_TITLE },
+    { text: VECTOR_SEARCH_PLUGIN.NAV_TITLE, path: '/' },
+    ...breadcrumbs,
+  ]);
 
 export const useSemanticSearchBreadcrumbs = (breadcrumbs: Breadcrumbs = []) =>
-  useSearchBreadcrumbs([{ text: SEMANTIC_SEARCH_PLUGIN.NAME, path: '/' }, ...breadcrumbs]);
+  useSearchBreadcrumbs([
+    { text: GETTING_STARTED_TITLE },
+    { text: SEMANTIC_SEARCH_PLUGIN.NAME, path: '/' },
+    ...breadcrumbs,
+  ]);

x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { i18n } from '@kbn/i18n';
+
 import {
   AI_SEARCH_PLUGIN,
   ANALYTICS_PLUGIN,
@@ -40,7 +42,12 @@ export const searchTitle = (page: Title = []) => generateTitle([...page, SEARCH_
 export const analyticsTitle = (page: Title = []) => generateTitle([...page, ANALYTICS_PLUGIN.NAME]);
 
 export const elasticsearchTitle = (page: Title = []) =>
-  generateTitle([...page, 'Getting started with Elasticsearch']);
+  generateTitle([
+    ...page,
+    i18n.translate('xpack.enterpriseSearch.titles.elasticsearch', {
+      defaultMessage: 'Getting started with Elasticsearch',
+    }),
+  ]);
 
 export const appSearchTitle = (page: Title = []) =>
   generateTitle([...page, APP_SEARCH_PLUGIN.NAME]);
@@ -61,3 +68,11 @@ export const semanticSearchTitle = (page: Title = []) =>
 
 export const enterpriseSearchContentTitle = (page: Title = []) =>
   generateTitle([...page, ENTERPRISE_SEARCH_CONTENT_PLUGIN.NAME]);
+
+export const searchApplicationsTitle = (page: Title = []) =>
+  generateTitle([
+    ...page,
+    i18n.translate('xpack.enterpriseSearch.titles.searchApplications', {
+      defaultMessage: 'Search Applications',
+    }),
+  ]);