[Enterprise Search] Add missing and remove redundant breadcrumbs (#96636)

* Workplace Search: Remove redundant Overview breadcrumb from Sources

There is "Source name" breadcrumb that is used for Overview page

* App Search: remove "Overview" breadcrumb from Engine page

So instead of `engines / national-parks-demo / overview (greyed)`
we will have just
`engines / national-parks-demo (greyed)`

* App Search: Add "Engines" breadcrumb to the main App Search page

This needs to be added to 3 states of the page: Normal, Empty and Loading

* Fix failing WS test

* App Search: DRY out SetPageChrome declaration by putting it in header

* Fix failed test "ShallowWrapper::dive() can only be called on components"

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx

@@ -37,7 +37,6 @@ import { AnalyticsRouter } from '../analytics';
 import { ApiLogs } from '../api_logs';
 import { CurationsRouter } from '../curations';
 import { DocumentDetail, Documents } from '../documents';
-import { OVERVIEW_TITLE } from '../engine_overview';
 import { EngineOverview } from '../engine_overview';
 import { ENGINES_TITLE } from '../engines';
 import { RelevanceTuning } from '../relevance_tuning';
@@ -122,7 +121,7 @@ export const EngineRouter: React.FC = () => {
         </Route>
       )}
       <Route>
-        <SetPageChrome trail={[...engineBreadcrumb, OVERVIEW_TITLE]} />
+        <SetPageChrome trail={[...engineBreadcrumb]} />
         <EngineOverview />
       </Route>
     </Switch>

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx

@@ -12,7 +12,6 @@ import { useValues, useActions } from 'kea';
 import { EuiPageContent, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
 import { EuiButtonTo } from '../../../../shared/react_router_helpers';
 import { TelemetryLogic } from '../../../../shared/telemetry';
 import { AppLogic } from '../../../app_logic';
@@ -32,7 +31,6 @@ export const EmptyState: React.FC = () => {
 
   return (
     <>
-      <SetPageChrome />
       <EnginesOverviewHeader />
       <EuiPageContent hasBorder className="emptyState">
         {canManageEngines ? (

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx

@@ -12,10 +12,13 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
+import { EuiPageHeader } from '@elastic/eui';
+
 import { EnginesOverviewHeader } from './';
 
 describe('EnginesOverviewHeader', () => {
   const wrapper = shallow(<EnginesOverviewHeader />)
+    .find(EuiPageHeader)
     .dive()
     .children()
     .dive();

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx

@@ -13,36 +13,42 @@ import { EuiPageHeader, EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { getAppSearchUrl } from '../../../../shared/enterprise_search_url';
+import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
 import { TelemetryLogic } from '../../../../shared/telemetry';
 
+import { ENGINES_TITLE } from '../constants';
+
 export const EnginesOverviewHeader: React.FC = () => {
   const { sendAppSearchTelemetry } = useActions(TelemetryLogic);
 
   return (
-    <EuiPageHeader
-      pageTitle={i18n.translate('xpack.enterpriseSearch.appSearch.enginesOverview.title', {
-        defaultMessage: 'Engines overview',
-      })}
-      rightSideItems={[
-        // eslint-disable-next-line @elastic/eui/href-or-on-click
-        <EuiButton
-          size="s"
-          iconType="popout"
-          href={getAppSearchUrl()}
-          target="_blank"
-          onClick={() =>
-            sendAppSearchTelemetry({
-              action: 'clicked',
-              metric: 'header_launch_button',
-            })
-          }
-          data-test-subj="launchButton"
-        >
-          {i18n.translate('xpack.enterpriseSearch.appSearch.productCta', {
-            defaultMessage: 'Launch App Search',
-          })}
-        </EuiButton>,
-      ]}
-    />
+    <>
+      <SetPageChrome trail={[ENGINES_TITLE]} />
+      <EuiPageHeader
+        pageTitle={i18n.translate('xpack.enterpriseSearch.appSearch.enginesOverview.title', {
+          defaultMessage: 'Engines overview',
+        })}
+        rightSideItems={[
+          // eslint-disable-next-line @elastic/eui/href-or-on-click
+          <EuiButton
+            size="s"
+            iconType="popout"
+            href={getAppSearchUrl()}
+            target="_blank"
+            onClick={() =>
+              sendAppSearchTelemetry({
+                action: 'clicked',
+                metric: 'header_launch_button',
+              })
+            }
+            data-test-subj="launchButton"
+          >
+            {i18n.translate('xpack.enterpriseSearch.appSearch.productCta', {
+              defaultMessage: 'Launch App Search',
+            })}
+          </EuiButton>,
+        ]}
+      />
+    </>
   );
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.tsx

@@ -9,14 +9,11 @@ import React from 'react';
 
 import { EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui';
 
-import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
-
 import { EnginesOverviewHeader } from './header';
 
 export const LoadingState: React.FC = () => {
   return (
     <>
-      <SetPageChrome />
       <EnginesOverviewHeader />
       <EuiPageContent hasBorder paddingSize="l">
         <EuiLoadingContent lines={5} />

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx

@@ -20,7 +20,6 @@ import {
 } from '@elastic/eui';
 
 import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { LicensingLogic } from '../../../shared/licensing';
 import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { convertMetaToPagination, handlePageChange } from '../../../shared/table_pagination';
@@ -80,7 +79,6 @@ export const EnginesOverview: React.FC = () => {
 
   return (
     <>
-      <SetPageChrome />
       <SendTelemetry action="viewed" metric="engines_overview" />
 
       <EnginesOverviewHeader />

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_router.test.tsx

@@ -88,7 +88,7 @@ describe('SourceRouter', () => {
     const contentBreadCrumb = wrapper.find(SetPageChrome).at(1);
     const settingsBreadCrumb = wrapper.find(SetPageChrome).at(2);
 
-    expect(overviewBreadCrumb.prop('trail')).toEqual([...loadingBreadcrumbs, NAV.OVERVIEW]);
+    expect(overviewBreadCrumb.prop('trail')).toEqual([...loadingBreadcrumbs]);
     expect(contentBreadCrumb.prop('trail')).toEqual([...loadingBreadcrumbs, NAV.CONTENT]);
     expect(settingsBreadCrumb.prop('trail')).toEqual([...loadingBreadcrumbs, NAV.SETTINGS]);
   });

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/source_router.tsx

@@ -98,7 +98,7 @@ export const SourceRouter: React.FC = () => {
       <Switch>
         <Route exact path={sourcePath(SOURCE_DETAILS_PATH, sourceId, isOrganization)}>
           <SendTelemetry action="viewed" metric="source_overview" />
-          <SetPageChrome trail={[NAV.SOURCES, name || '...', NAV.OVERVIEW]} />
+          <SetPageChrome trail={[NAV.SOURCES, name || '...']} />
           <Overview />
         </Route>
         <Route exact path={sourcePath(SOURCE_CONTENT_PATH, sourceId, isOrganization)}>