[8.13] Fix breadcrumbs and sidebar navigation for connectors/crawler …

…+ fix routes for connectors (elastic#178078) (elastic#178249) # Backport This will backport the following commits from `main` to `8.13`: - [Fix breadcrumbs and sidebar navigation for connectors/crawler + fix routes for connectors (elastic#178078)](elastic#178078)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Artem Shelkovnikov <[email protected]>
kibanamachine · Mar 7, 2024 · cc87839 · cc87839
1 parent 8f94eb0
commit cc87839
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 73 deletions.
diff --git a/...c/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx b/...c/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx
@@ -15,7 +15,7 @@ import { i18n } from '@kbn/i18n';
 import { generateEncodedPath } from '../../../shared/encode_path_params';
 import { KibanaLogic } from '../../../shared/kibana';
 import { CONNECTOR_DETAIL_TAB_PATH } from '../../routes';
-import { baseBreadcrumbs } from '../connectors/connectors';
+import { connectorsBreadcrumbs } from '../connectors/connectors';
 import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
 
 import { getHeaderActions } from '../search_index/components/header_actions/header_actions';
@@ -226,7 +226,7 @@ export const ConnectorDetail: React.FC = () => {
 
   return (
     <EnterpriseSearchContentPageTemplate
-      pageChrome={[...baseBreadcrumbs, connector?.name ?? '...']}
+      pageChrome={[...connectorsBreadcrumbs, connector?.name ?? '...']}
       pageViewTelemetry={tabId}
       isLoading={isLoading}
       pageHeader={{

diff --git a/...search/public/applications/enterprise_search_content/components/connectors/connectors.tsx b/...search/public/applications/enterprise_search_content/components/connectors/connectors.tsx
@@ -25,20 +25,16 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { INGESTION_METHOD_IDS } from '../../../../../common/constants';
-
-import { generateEncodedPath } from '../../../shared/encode_path_params';
 import { HttpLogic } from '../../../shared/http';
 import { KibanaLogic } from '../../../shared/kibana';
 import { handlePageChange } from '../../../shared/table_pagination';
 import {
-  NEW_INDEX_METHOD_PATH,
+  NEW_CRAWLER_PATH,
   NEW_INDEX_SELECT_CONNECTOR_CLIENTS_PATH,
   NEW_INDEX_SELECT_CONNECTOR_NATIVE_PATH,
   NEW_INDEX_SELECT_CONNECTOR_PATH,
 } from '../../routes';
 import { EnterpriseSearchContentPageTemplate } from '../layout';
-import { SelectConnector } from '../new_index/select_connector/select_connector';
 
 import { CannotConnect } from '../search_index/components/cannot_connect';
 
@@ -49,13 +45,20 @@ import { ConnectorsLogic } from './connectors_logic';
 import { ConnectorsTable } from './connectors_table';
 import { CrawlerEmptyState } from './crawler_empty_state';
 import { DeleteConnectorModal } from './delete_connector_modal';
+import { SelectConnector } from './select_connector/select_connector';
 
-export const baseBreadcrumbs = [
+export const connectorsBreadcrumbs = [
   i18n.translate('xpack.enterpriseSearch.content.connectors.breadcrumb', {
     defaultMessage: 'Connectors',
   }),
 ];
 
+export const crawlersBreadcrumbs = [
+  i18n.translate('xpack.enterpriseSearch.content.crawlers.breadcrumb', {
+    defaultMessage: 'Web crawlers',
+  }),
+];
+
 export interface ConnectorsProps {
   isCrawler: boolean;
 }
@@ -83,7 +86,7 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
     <>
       <DeleteConnectorModal isCrawler={isCrawler} />
       <EnterpriseSearchContentPageTemplate
-        pageChrome={baseBreadcrumbs}
+        pageChrome={!isCrawler ? connectorsBreadcrumbs : crawlersBreadcrumbs}
         pageViewTelemetry={!isCrawler ? 'Connectors' : 'Web Crawlers'}
         isLoading={isLoading}
         pageHeader={{
@@ -202,11 +205,7 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
                   iconType="plusInCircle"
                   fill
                   onClick={() => {
-                    KibanaLogic.values.navigateToUrl(
-                      generateEncodedPath(NEW_INDEX_METHOD_PATH, {
-                        type: INGESTION_METHOD_IDS.CRAWLER,
-                      })
-                    );
+                    KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH);
                   }}
                 >
                   {i18n.translate('xpack.enterpriseSearch.connectors.newCrawlerButtonLabel', {

diff --git a/...public/applications/enterprise_search_content/components/connectors/connectors_router.tsx b/...public/applications/enterprise_search_content/components/connectors/connectors_router.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 from 'react';
+
+import { Routes, Route } from '@kbn/shared-ux-router';
+
+import { CONNECTORS_PATH, NEW_INDEX_SELECT_CONNECTOR_PATH, NEW_CONNECTOR_PATH } from '../../routes';
+import { NewSearchIndexPage } from '../new_index/new_search_index_page';
+
+import { Connectors } from './connectors';
+import { SelectConnector } from './select_connector/select_connector';
+
+export const ConnectorsRouter: React.FC = () => {
+  return (
+    <Routes>
+      <Route path={NEW_INDEX_SELECT_CONNECTOR_PATH}>
+        <SelectConnector />
+      </Route>
+      <Route path={NEW_CONNECTOR_PATH}>
+        <NewSearchIndexPage type="connector" />
+      </Route>
+      <Route path={CONNECTORS_PATH}>
+        <Connectors isCrawler={false} />
+      </Route>
+    </Routes>
+  );
+};
diff --git a/...blic/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx b/...blic/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx
@@ -11,10 +11,9 @@ import { useValues } from 'kea';
 import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { generateEncodedPath } from '../../../shared/encode_path_params';
 import { HttpLogic } from '../../../shared/http';
 import { KibanaLogic } from '../../../shared/kibana';
-import { NEW_INDEX_METHOD_PATH } from '../../routes';
+import { NEW_CRAWLER_PATH } from '../../routes';
 
 export const CrawlerEmptyState: React.FC = () => {
   const { errorConnectingMessage } = useValues(HttpLogic);
@@ -46,11 +45,7 @@ export const CrawlerEmptyState: React.FC = () => {
             disabled={Boolean(errorConnectingMessage)}
             fill
             iconType="plusInCircle"
-            onClick={() =>
-              KibanaLogic.values.navigateToUrl(
-                generateEncodedPath(NEW_INDEX_METHOD_PATH, { type: 'crawler' })
-              )
-            }
+            onClick={() => KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH)}
           >
             {i18n.translate('xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel', {
               defaultMessage: 'New web crawler',

diff --git a/...h/public/applications/enterprise_search_content/components/connectors/crawlers_router.tsx b/...h/public/applications/enterprise_search_content/components/connectors/crawlers_router.tsx
@@ -0,0 +1,28 @@
+/*
+ * 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 from 'react';
+
+import { Routes, Route } from '@kbn/shared-ux-router';
+
+import { CRAWLERS_PATH, NEW_CRAWLER_PATH } from '../../routes';
+import { NewSearchIndexPage } from '../new_index/new_search_index_page';
+
+import { Connectors } from './connectors';
+
+export const CrawlersRouter: React.FC = () => {
+  return (
+    <Routes>
+      <Route path={NEW_CRAWLER_PATH}>
+        <NewSearchIndexPage type="crawler" />
+      </Route>
+      <Route path={CRAWLERS_PATH}>
+        <Connectors isCrawler />
+      </Route>
+    </Routes>
+  );
+};
diff --git a/...select_connector/connector_checkable.scss → ...select_connector/connector_checkable.scss b/...select_connector/connector_checkable.scss → ...select_connector/connector_checkable.scss
diff --git a/.../select_connector/connector_checkable.tsx → .../select_connector/connector_checkable.tsx b/.../select_connector/connector_checkable.tsx → .../select_connector/connector_checkable.tsx
diff --git a/...or/connector_description_badge_popout.tsx → ...or/connector_description_badge_popout.tsx b/...or/connector_description_badge_popout.tsx → ...or/connector_description_badge_popout.tsx
diff --git a/...index/select_connector/native_popover.tsx → ...ctors/select_connector/native_popover.tsx b/...index/select_connector/native_popover.tsx → ...ctors/select_connector/native_popover.tsx
diff --git a/...dex/select_connector/select_connector.tsx → ...ors/select_connector/select_connector.tsx b/...dex/select_connector/select_connector.tsx → ...ors/select_connector/select_connector.tsx
@@ -34,26 +34,21 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import {
-  CONNECTOR_CLIENTS_TYPE,
-  CONNECTOR_NATIVE_TYPE,
-  INGESTION_METHOD_IDS,
-} from '../../../../../../common/constants';
+import { CONNECTOR_CLIENTS_TYPE, CONNECTOR_NATIVE_TYPE } from '../../../../../../common/constants';
 
 import connectorLogo from '../../../../../assets/source_icons/network_drive.svg';
 import { BACK_BUTTON_LABEL } from '../../../../shared/constants';
-import { generateEncodedPath } from '../../../../shared/encode_path_params';
 
 import { KibanaLogic } from '../../../../shared/kibana';
 import { LicensingLogic } from '../../../../shared/licensing';
 import { parseQueryParams } from '../../../../shared/query_params';
 
-import { NEW_INDEX_METHOD_PATH, NEW_INDEX_PATH } from '../../../routes';
+import { NEW_CONNECTOR_PATH, NEW_INDEX_PATH } from '../../../routes';
 import { EnterpriseSearchContentPageTemplate } from '../../layout';
 
 import { CONNECTORS } from '../../search_index/connector/constants';
 
-import { baseBreadcrumbs } from '../../search_indices';
+import { connectorsBreadcrumbs } from '../connectors';
 
 import { ConnectorCheckable } from './connector_checkable';
 import { ConnectorDescriptionBadge } from './connector_description_badge_popout';
@@ -115,7 +110,7 @@ export const SelectConnector: React.FC = () => {
   return (
     <EnterpriseSearchContentPageTemplate
       pageChrome={[
-        ...baseBreadcrumbs,
+        ...connectorsBreadcrumbs,
         i18n.translate('xpack.enterpriseSearch.content.indices.selectConnector.breadcrumb', {
           defaultMessage: 'Select connector',
         }),
@@ -345,9 +340,7 @@ export const SelectConnector: React.FC = () => {
                       );
                     }
                     KibanaLogic.values.navigateToUrl(
-                      `${generateEncodedPath(NEW_INDEX_METHOD_PATH, {
-                        type: INGESTION_METHOD_IDS.CONNECTOR,
-                      })}?${queryParam.toString()}`
+                      `${NEW_CONNECTOR_PATH}?${queryParam.toString()}`
                     );
                   }}
                   documentationUrl={connector.docsUrl}

diff --git a/...e_search/public/applications/enterprise_search_content/components/new_index/new_index.tsx b/...e_search/public/applications/enterprise_search_content/components/new_index/new_index.tsx
@@ -16,11 +16,10 @@ import { INGESTION_METHOD_IDS } from '../../../../../common/constants';
 
 import { ProductFeatures } from '../../../../../common/types';
 
-import { generateEncodedPath } from '../../../shared/encode_path_params';
 import { HttpLogic } from '../../../shared/http';
 import { KibanaLogic } from '../../../shared/kibana/kibana_logic';
 
-import { NEW_INDEX_METHOD_PATH, NEW_INDEX_SELECT_CONNECTOR_PATH } from '../../routes';
+import { NEW_API_PATH, NEW_CRAWLER_PATH, NEW_INDEX_SELECT_CONNECTOR_PATH } from '../../routes';
 import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
 import { CannotConnect } from '../search_index/components/cannot_connect';
 import { baseBreadcrumbs } from '../search_indices';
@@ -76,10 +75,10 @@ export const NewIndex: React.FC = () => {
                     onSelect={() => {
                       if (type === INGESTION_METHOD_IDS.CONNECTOR) {
                         KibanaLogic.values.navigateToUrl(NEW_INDEX_SELECT_CONNECTOR_PATH);
+                      } else if (type === INGESTION_METHOD_IDS.CRAWLER) {
+                        KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH);
                       } else {
-                        KibanaLogic.values.navigateToUrl(
-                          generateEncodedPath(NEW_INDEX_METHOD_PATH, { type })
-                        );
+                        KibanaLogic.values.navigateToUrl(NEW_API_PATH);
                       }
                     }}
                   />

diff --git a/...h/public/applications/enterprise_search_content/components/new_index/new_index_router.tsx b/...h/public/applications/enterprise_search_content/components/new_index/new_index_router.tsx
@@ -9,27 +9,19 @@ import React from 'react';
 
 import { Routes, Route } from '@kbn/shared-ux-router';
 
-import {
-  NEW_INDEX_PATH,
-  NEW_INDEX_SELECT_CONNECTOR_PATH,
-  NEW_INDEX_METHOD_PATH,
-} from '../../routes';
+import { NEW_INDEX_PATH, NEW_API_PATH } from '../../routes';
 
 import { NewIndex } from './new_index';
 import { NewSearchIndexPage } from './new_search_index_page';
-import { SelectConnector } from './select_connector/select_connector';
 
 export const NewIndexRouter: React.FC = () => {
   return (
     <Routes>
       <Route path={NEW_INDEX_PATH} exact>
         <NewIndex />
       </Route>
-      <Route path={NEW_INDEX_SELECT_CONNECTOR_PATH} exact>
-        <SelectConnector />
-      </Route>
-      <Route path={NEW_INDEX_METHOD_PATH} exact>
-        <NewSearchIndexPage />
+      <Route path={NEW_API_PATH} exact>
+        <NewSearchIndexPage type="api" />
       </Route>
     </Routes>
   );

diff --git a/...lic/applications/enterprise_search_content/components/new_index/new_search_index_page.tsx b/...lic/applications/enterprise_search_content/components/new_index/new_search_index_page.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -20,6 +20,7 @@ import {
 } from '../../../../../common/constants';
 import { parseQueryParams } from '../../../shared/query_params';
 
+import { connectorsBreadcrumbs, crawlersBreadcrumbs } from '../connectors/connectors';
 import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
 import { CONNECTORS } from '../search_index/connector/constants';
 import { baseBreadcrumbs } from '../search_indices';
@@ -95,6 +96,44 @@ const parseIsNativeParam = (queryString: string | string[] | null): boolean | un
   return undefined;
 };
 
+const getBreadcrumb = (method: string, serviceType: string): string[] => {
+  switch (method) {
+    case INGESTION_METHOD_IDS.CONNECTOR:
+      const connector =
+        Boolean(serviceType) && CONNECTORS.find((item) => item.serviceType === serviceType);
+
+      const thisConnectorBreadcrumb = connector
+        ? i18n.translate(
+            'xpack.enterpriseSearch.content.new_connector_with_service_type.breadcrumbs',
+            {
+              defaultMessage: `New {name} connector`,
+              values: {
+                name: connector.name,
+              },
+            }
+          )
+        : i18n.translate('xpack.enterpriseSearch.content.new_connector.breadcrumbs', {
+            defaultMessage: `New connector`,
+          });
+
+      return [...connectorsBreadcrumbs, thisConnectorBreadcrumb];
+    case INGESTION_METHOD_IDS.CRAWLER:
+      return [
+        ...crawlersBreadcrumbs,
+        i18n.translate('xpack.enterpriseSearch.content.new_web_crawler.breadcrumbs', {
+          defaultMessage: 'New web crawler',
+        }),
+      ];
+    default:
+      return [
+        ...baseBreadcrumbs,
+        i18n.translate('xpack.enterpriseSearch.content.new_index.breadcrumbs', {
+          defaultMessage: 'New search index',
+        }),
+      ];
+  }
+};
+
 const getConnectorModeBadge = (isNative?: boolean) => {
   if (isNative) {
     return (
@@ -117,9 +156,10 @@ const getConnectorModeBadge = (isNative?: boolean) => {
   }
   return undefined;
 };
-
-export const NewSearchIndexPage: React.FC = () => {
-  const type = decodeURIComponent(useParams<{ type: string }>().type);
+export interface NewSearchIndexPageProps {
+  type: string;
+}
+export const NewSearchIndexPage: React.FC<NewSearchIndexPageProps> = ({ type }) => {
   const { search } = useLocation();
   const { service_type: inputServiceType, connector_type: inputConnectorType } =
     parseQueryParams(search);
@@ -131,12 +171,7 @@ export const NewSearchIndexPage: React.FC = () => {
 
   return (
     <EnterpriseSearchContentPageTemplate
-      pageChrome={[
-        ...baseBreadcrumbs,
-        i18n.translate('xpack.enterpriseSearch.content.new_index.breadcrumbs', {
-          defaultMessage: 'New search index',
-        }),
-      ]}
+      pageChrome={getBreadcrumb(type, serviceType)}
       pageViewTelemetry="New Index"
       isLoading={false}
       pageHeader={{

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/index.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/index.tsx
@@ -21,7 +21,8 @@ import { KibanaLogic } from '../shared/kibana';
 import { VersionMismatchPage } from '../shared/version_mismatch';
 
 import { ConnectorDetailRouter } from './components/connector_detail/connector_detail_router';
-import { Connectors } from './components/connectors/connectors';
+import { ConnectorsRouter } from './components/connectors/connectors_router';
+import { CrawlersRouter } from './components/connectors/crawlers_router';
 import { NotFound } from './components/not_found';
 import { SearchIndicesRouter } from './components/search_indices';
 import {
@@ -77,14 +78,14 @@ export const EnterpriseSearchContentConfigured: React.FC<Required<InitialAppData
       <Route path={SEARCH_INDICES_PATH}>
         <SearchIndicesRouter />
       </Route>
+      <Route path={CONNECTORS_PATH}>
+        <ConnectorsRouter />
+      </Route>
       <Route path={CONNECTOR_DETAIL_PATH}>
         <ConnectorDetailRouter />
       </Route>
-      <Route path={CONNECTORS_PATH}>
-        <Connectors isCrawler={false} />
-      </Route>
       <Route path={CRAWLERS_PATH}>
-        <Connectors isCrawler />
+        <CrawlersRouter />
       </Route>
       <Route>
         <NotFound />