[App Search] Add small engine breadcrumb utility helper (#96917)

* Add new getEngineBreadcrumbs utility helper * Update all routes passing engineBreadcrumb as a prop to use new helper
elastic · Apr 13, 2021 · d774a41 · d774a41
1 parent 58b1d10
commit d774a41
Show file tree

Hide file tree

Showing 21 changed files with 102 additions and 92 deletions.
diff --git a/...k/plugins/enterprise_search/public/applications/app_search/__mocks__/engine_logic.mock.ts b/...k/plugins/enterprise_search/public/applications/app_search/__mocks__/engine_logic.mock.ts
@@ -6,6 +6,7 @@
  */
 
 import { EngineDetails } from '../components/engine/types';
+import { ENGINES_TITLE } from '../components/engines';
 import { generateEncodedPath } from '../utils/encode_path_params';
 
 export const mockEngineValues = {
@@ -20,11 +21,17 @@ export const mockEngineActions = {
 export const mockGenerateEnginePath = jest.fn((path, pathParams = {}) =>
   generateEncodedPath(path, { engineName: mockEngineValues.engineName, ...pathParams })
 );
+export const mockGetEngineBreadcrumbs = jest.fn((breadcrumbs = []) => [
+  ENGINES_TITLE,
+  mockEngineValues.engineName,
+  ...breadcrumbs,
+]);
 
 jest.mock('../components/engine', () => ({
   EngineLogic: {
     values: mockEngineValues,
     actions: mockEngineActions,
   },
   generateEnginePath: mockGenerateEnginePath,
+  getEngineBreadcrumbs: mockGetEngineBreadcrumbs,
 }));
diff --git a/...rise_search/public/applications/app_search/components/analytics/analytics_router.test.tsx b/...rise_search/public/applications/app_search/components/analytics/analytics_router.test.tsx
@@ -18,7 +18,7 @@ import { AnalyticsRouter } from './';
 describe('AnalyticsRouter', () => {
   // Detailed route testing is better done via E2E tests
   it('renders', () => {
-    const wrapper = shallow(<AnalyticsRouter engineBreadcrumb={['Engines', 'some-engine']} />);
+    const wrapper = shallow(<AnalyticsRouter />);
 
     expect(wrapper.find(Switch)).toHaveLength(1);
     expect(wrapper.find(Route)).toHaveLength(9);

diff --git a/...nterprise_search/public/applications/app_search/components/analytics/analytics_router.tsx b/...nterprise_search/public/applications/app_search/components/analytics/analytics_router.tsx
@@ -10,7 +10,6 @@ import { Route, Switch, Redirect } from 'react-router-dom';
 
 import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { BreadcrumbTrail } from '../../../shared/kibana_chrome/generate_breadcrumbs';
 import { NotFound } from '../../../shared/not_found';
 import {
   ENGINE_ANALYTICS_PATH,
@@ -22,7 +21,7 @@ import {
   ENGINE_ANALYTICS_QUERY_DETAILS_PATH,
   ENGINE_ANALYTICS_QUERY_DETAIL_PATH,
 } from '../../routes';
-import { generateEnginePath } from '../engine';
+import { generateEnginePath, getEngineBreadcrumbs } from '../engine';
 
 import {
   ANALYTICS_TITLE,
@@ -42,11 +41,8 @@ import {
   QueryDetail,
 } from './views';
 
-interface Props {
-  engineBreadcrumb: BreadcrumbTrail;
-}
-export const AnalyticsRouter: React.FC<Props> = ({ engineBreadcrumb }) => {
-  const ANALYTICS_BREADCRUMB = [...engineBreadcrumb, ANALYTICS_TITLE];
+export const AnalyticsRouter: React.FC = () => {
+  const ANALYTICS_BREADCRUMB = getEngineBreadcrumbs([ANALYTICS_TITLE]);
 
   return (
     <Switch>

diff --git a/...ns/enterprise_search/public/applications/app_search/components/api_logs/api_logs.test.tsx b/...ns/enterprise_search/public/applications/app_search/components/api_logs/api_logs.test.tsx
@@ -7,10 +7,11 @@
 
 import { setMockValues, setMockActions, rerender } from '../../../__mocks__';
 import '../../../__mocks__/shallow_useeffect.mock';
+import '../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
-import { shallow, ShallowWrapper } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import { EuiPageHeader } from '@elastic/eui';
 
@@ -32,16 +33,14 @@ describe('ApiLogs', () => {
     pollForApiLogs: jest.fn(),
   };
 
-  let wrapper: ShallowWrapper;
-
   beforeEach(() => {
     jest.clearAllMocks();
     setMockValues(values);
     setMockActions(actions);
-    wrapper = shallow(<ApiLogs engineBreadcrumb={['some engine']} />);
   });
 
   it('renders', () => {
+    const wrapper = shallow(<ApiLogs />);
     expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('API Logs');
     expect(wrapper.find(ApiLogsTable)).toHaveLength(1);
     expect(wrapper.find(NewApiEventsPrompt)).toHaveLength(1);
@@ -52,13 +51,14 @@ describe('ApiLogs', () => {
 
   it('renders a loading screen', () => {
     setMockValues({ ...values, dataLoading: true, apiLogs: [] });
-    rerender(wrapper);
+    const wrapper = shallow(<ApiLogs />);
 
     expect(wrapper.find(Loading)).toHaveLength(1);
   });
 
   describe('effects', () => {
     it('calls a manual fetchApiLogs on page load and pagination', () => {
+      const wrapper = shallow(<ApiLogs />);
       expect(actions.fetchApiLogs).toHaveBeenCalledTimes(1);
 
       setMockValues({ ...values, meta: { page: { current: 2 } } });
@@ -68,6 +68,7 @@ describe('ApiLogs', () => {
     });
 
     it('starts pollForApiLogs on page load', () => {
+      shallow(<ApiLogs />);
       expect(actions.pollForApiLogs).toHaveBeenCalledTimes(1);
     });
   });

diff --git a/...plugins/enterprise_search/public/applications/app_search/components/api_logs/api_logs.tsx b/...plugins/enterprise_search/public/applications/app_search/components/api_logs/api_logs.tsx
@@ -21,9 +21,9 @@ import {
 
 import { FlashMessages } from '../../../shared/flash_messages';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { BreadcrumbTrail } from '../../../shared/kibana_chrome/generate_breadcrumbs';
 import { Loading } from '../../../shared/loading';
 
+import { getEngineBreadcrumbs } from '../engine';
 import { LogRetentionCallout, LogRetentionTooltip, LogRetentionOptions } from '../log_retention';
 
 import { ApiLogFlyout } from './api_log';
@@ -32,10 +32,7 @@ import { API_LOGS_TITLE, RECENT_API_EVENTS } from './constants';
 
 import { ApiLogsLogic } from './';
 
-interface Props {
-  engineBreadcrumb: BreadcrumbTrail;
-}
-export const ApiLogs: React.FC<Props> = ({ engineBreadcrumb }) => {
+export const ApiLogs: React.FC = () => {
   const { dataLoading, apiLogs, meta } = useValues(ApiLogsLogic);
   const { fetchApiLogs, pollForApiLogs } = useActions(ApiLogsLogic);
 
@@ -51,7 +48,7 @@ export const ApiLogs: React.FC<Props> = ({ engineBreadcrumb }) => {
 
   return (
     <>
-      <SetPageChrome trail={[...engineBreadcrumb, API_LOGS_TITLE]} />
+      <SetPageChrome trail={getEngineBreadcrumbs([API_LOGS_TITLE])} />
       <EuiPageHeader pageTitle={API_LOGS_TITLE} />
 
       <FlashMessages />

diff --git a/...rise_search/public/applications/app_search/components/curations/curations_router.test.tsx b/...rise_search/public/applications/app_search/components/curations/curations_router.test.tsx
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import '../../__mocks__/engine_logic.mock';
+
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
@@ -14,7 +16,7 @@ import { CurationsRouter } from './';
 
 describe('CurationsRouter', () => {
   it('renders', () => {
-    const wrapper = shallow(<CurationsRouter engineBreadcrumb={['Engines', 'some-engine']} />);
+    const wrapper = shallow(<CurationsRouter />);
 
     expect(wrapper.find(Switch)).toHaveLength(1);
     expect(wrapper.find(Route)).toHaveLength(4);

diff --git a/...nterprise_search/public/applications/app_search/components/curations/curations_router.tsx b/...nterprise_search/public/applications/app_search/components/curations/curations_router.tsx
@@ -10,23 +10,20 @@ import { Route, Switch } from 'react-router-dom';
 
 import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { BreadcrumbTrail } from '../../../shared/kibana_chrome/generate_breadcrumbs';
 import { NotFound } from '../../../shared/not_found';
 import {
   ENGINE_CURATIONS_PATH,
   ENGINE_CURATIONS_NEW_PATH,
   ENGINE_CURATION_PATH,
 } from '../../routes';
+import { getEngineBreadcrumbs } from '../engine';
 
 import { CURATIONS_TITLE, CREATE_NEW_CURATION_TITLE } from './constants';
 import { Curation } from './curation';
 import { Curations, CurationCreation } from './views';
 
-interface Props {
-  engineBreadcrumb: BreadcrumbTrail;
-}
-export const CurationsRouter: React.FC<Props> = ({ engineBreadcrumb }) => {
-  const CURATIONS_BREADCRUMB = [...engineBreadcrumb, CURATIONS_TITLE];
+export const CurationsRouter: React.FC = () => {
+  const CURATIONS_BREADCRUMB = getEngineBreadcrumbs([CURATIONS_TITLE]);
 
   return (
     <Switch>

diff --git a/...prise_search/public/applications/app_search/components/documents/document_detail.test.tsx b/...prise_search/public/applications/app_search/components/documents/document_detail.test.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import '../../../__mocks__/react_router_history.mock';
 import { setMockValues, setMockActions } from '../../../__mocks__/kea.mock';
 import { unmountHandler } from '../../../__mocks__/shallow_useeffect.mock';
+import '../../../__mocks__/react_router_history.mock';
+import '../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 import { useParams } from 'react-router-dom';
@@ -44,17 +45,17 @@ describe('DocumentDetail', () => {
   });
 
   it('renders', () => {
-    const wrapper = shallow(<DocumentDetail engineBreadcrumb={['test']} />);
+    const wrapper = shallow(<DocumentDetail />);
     expect(wrapper.find(EuiPageContent).length).toBe(1);
   });
 
   it('initializes data on mount', () => {
-    shallow(<DocumentDetail engineBreadcrumb={['test']} />);
+    shallow(<DocumentDetail />);
     expect(actions.getDocumentDetails).toHaveBeenCalledWith('1');
   });
 
   it('calls setFields on unmount', () => {
-    shallow(<DocumentDetail engineBreadcrumb={['test']} />);
+    shallow(<DocumentDetail />);
     unmountHandler();
     expect(actions.setFields).toHaveBeenCalledWith([]);
   });
@@ -65,7 +66,7 @@ describe('DocumentDetail', () => {
       dataLoading: true,
     });
 
-    const wrapper = shallow(<DocumentDetail engineBreadcrumb={['test']} />);
+    const wrapper = shallow(<DocumentDetail />);
 
     expect(wrapper.find(Loading).length).toBe(1);
   });
@@ -80,7 +81,7 @@ describe('DocumentDetail', () => {
     };
 
     beforeEach(() => {
-      const wrapper = shallow(<DocumentDetail engineBreadcrumb={['test']} />);
+      const wrapper = shallow(<DocumentDetail />);
       columns = wrapper.find(EuiBasicTable).props().columns;
     });
 
@@ -101,7 +102,7 @@ describe('DocumentDetail', () => {
   });
 
   it('will delete the document when the delete button is pressed', () => {
-    const wrapper = shallow(<DocumentDetail engineBreadcrumb={['test']} />);
+    const wrapper = shallow(<DocumentDetail />);
     const header = wrapper.find(EuiPageHeader).dive().children().dive();
     const button = header.find('[data-test-subj="DeleteDocumentButton"]');
 

diff --git a/...enterprise_search/public/applications/app_search/components/documents/document_detail.tsx b/...enterprise_search/public/applications/app_search/components/documents/document_detail.tsx
@@ -25,6 +25,7 @@ import { FlashMessages } from '../../../shared/flash_messages';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { Loading } from '../../../shared/loading';
 import { useDecodedParams } from '../../utils/encode_path_params';
+import { getEngineBreadcrumbs } from '../engine';
 import { ResultFieldValue } from '../result';
 
 import { DOCUMENTS_TITLE } from './constants';
@@ -36,11 +37,8 @@ const DOCUMENT_DETAIL_TITLE = (documentId: string) =>
     defaultMessage: 'Document: {documentId}',
     values: { documentId },
   });
-interface Props {
-  engineBreadcrumb: string[];
-}
 
-export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
+export const DocumentDetail: React.FC = () => {
   const { dataLoading, fields } = useValues(DocumentDetailLogic);
   const { deleteDocument, getDocumentDetails, setFields } = useActions(DocumentDetailLogic);
 
@@ -77,7 +75,7 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
 
   return (
     <>
-      <SetPageChrome trail={[...engineBreadcrumb, DOCUMENTS_TITLE, documentTitle]} />
+      <SetPageChrome trail={getEngineBreadcrumbs([DOCUMENTS_TITLE, documentTitle])} />
       <EuiPageHeader
         pageTitle={DOCUMENT_DETAIL_TITLE(documentTitle)}
         rightSideItems={[

diff --git a/.../enterprise_search/public/applications/app_search/components/documents/documents.test.tsx b/.../enterprise_search/public/applications/app_search/components/documents/documents.test.tsx
@@ -6,6 +6,7 @@
  */
 
 import { setMockValues } from '../../../__mocks__/kea.mock';
+import '../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
@@ -30,7 +31,7 @@ describe('Documents', () => {
   });
 
   it('renders', () => {
-    const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+    const wrapper = shallow(<Documents />);
     expect(wrapper.find(SearchExperience).exists()).toBe(true);
   });
 
@@ -44,7 +45,7 @@ describe('Documents', () => {
         myRole: { canManageEngineDocuments: true },
       });
 
-      const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+      const wrapper = shallow(<Documents />);
       expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(true);
     });
 
@@ -54,7 +55,7 @@ describe('Documents', () => {
         myRole: { canManageEngineDocuments: false },
       });
 
-      const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+      const wrapper = shallow(<Documents />);
       expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(false);
     });
 
@@ -65,7 +66,7 @@ describe('Documents', () => {
         isMetaEngine: true,
       });
 
-      const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+      const wrapper = shallow(<Documents />);
       expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(false);
     });
   });
@@ -77,7 +78,7 @@ describe('Documents', () => {
         isMetaEngine: true,
       });
 
-      const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+      const wrapper = shallow(<Documents />);
       expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(true);
     });
 
@@ -87,7 +88,7 @@ describe('Documents', () => {
         isMetaEngine: false,
       });
 
-      const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+      const wrapper = shallow(<Documents />);
       expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(false);
     });
   });

diff --git a/...ugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx b/...ugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx
@@ -16,23 +16,19 @@ import { FlashMessages } from '../../../shared/flash_messages';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 
 import { AppLogic } from '../../app_logic';
-import { EngineLogic } from '../engine';
+import { EngineLogic, getEngineBreadcrumbs } from '../engine';
 
 import { DOCUMENTS_TITLE } from './constants';
 import { DocumentCreationButton } from './document_creation_button';
 import { SearchExperience } from './search_experience';
 
-interface Props {
-  engineBreadcrumb: string[];
-}
-
-export const Documents: React.FC<Props> = ({ engineBreadcrumb }) => {
+export const Documents: React.FC = () => {
   const { isMetaEngine } = useValues(EngineLogic);
   const { myRole } = useValues(AppLogic);
 
   return (
     <>
-      <SetPageChrome trail={[...engineBreadcrumb, DOCUMENTS_TITLE]} />
+      <SetPageChrome trail={getEngineBreadcrumbs([DOCUMENTS_TITLE])} />
       <EuiPageHeader
         pageTitle={DOCUMENTS_TITLE}
         rightSideItems={