[Search] Fix issues with search hub and header (#173265)

## Summary This fixes a number of issues with the Search Hub and header actions. - Header actions show on all Search pages - Header adopts Kibana theme - Header button icon takes parent color - Header text corrected - Search labs banner image takes parent color - CloudID is hidden if not defined --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Dec 14, 2023 · 5067645 · 5067645
1 parent c7fabda
commit 5067645
Show file tree

Hide file tree

Showing 23 changed files with 447 additions and 280 deletions.
diff --git a/packages/kbn-search-api-panels/components/cloud_details.tsx b/packages/kbn-search-api-panels/components/cloud_details.tsx
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 import { OverviewPanel } from '..';
 import { ELASTICSEARCH_URL_PLACEHOLDER } from '../constants';
 
@@ -49,7 +50,15 @@ export const CloudDetailsPanel = ({
   const panelContent = (
     <EuiThemeProvider colorMode="dark">
       <EuiPanel paddingSize="xs">
-        <EuiCodeBlock isCopyable fontSize="m" className="serverlessSearchCloudDetailsCopyPanel">
+        <EuiCodeBlock
+          css={css`
+            overflow-wrap: anywhere;
+          `}
+          isCopyable
+          fontSize="m"
+          className="serverlessSearchCloudDetailsCopyPanel"
+          whiteSpace="pre-wrap"
+        >
           {selectedDetail === CloudDetail.CloudId && cloudId}
           {selectedDetail === CloudDetail.ElasticsearchEndpoint && elasticsearchUrl}
         </EuiCodeBlock>

diff --git a/...terprise_search/public/applications/app_search/components/curations/curation/curation.tsx b/...terprise_search/public/applications/app_search/components/curations/curation/curation.tsx
@@ -26,7 +26,7 @@ export const Curation: React.FC = () => {
   }, [curationId]);
 
   if (dataLoading) {
-    return <EnterpriseSearchPageTemplateWrapper isLoading useEndpointHeaderActions={false} />;
+    return <EnterpriseSearchPageTemplateWrapper isLoading />;
   }
   return isAutomated ? <AutomatedCuration /> : <ManualCuration />;
 };
diff --git a/...erprise_search/public/applications/app_search/components/layout/kibana_header_actions.tsx b/...erprise_search/public/applications/app_search/components/layout/kibana_header_actions.tsx
@@ -9,21 +9,14 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-
+import { EndpointsHeaderAction } from '../../../shared/layout/endpoints_header_action';
 import { EngineLogic } from '../engine';
 import { QueryTesterButton } from '../query_tester';
 
 export const KibanaHeaderActions: React.FC = () => {
   const { engineName } = useValues(EngineLogic);
 
   return (
-    <EuiFlexGroup gutterSize="s">
-      {engineName && (
-        <EuiFlexItem>
-          <QueryTesterButton />
-        </EuiFlexItem>
-      )}
-    </EuiFlexGroup>
+    <EndpointsHeaderAction>{Boolean(engineName) && <QueryTesterButton />}</EndpointsHeaderAction>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
@@ -16,6 +16,7 @@ import { isVersionMismatch } from '../../../common/is_version_mismatch';
 import { InitialAppData } from '../../../common/types';
 import { HttpLogic } from '../shared/http';
 import { KibanaLogic } from '../shared/kibana';
+import { EndpointsHeaderAction } from '../shared/layout/endpoints_header_action';
 import { VersionMismatchPage } from '../shared/version_mismatch';
 
 import { AppLogic } from './app_logic';
@@ -77,13 +78,18 @@ export const AppSearch: React.FC<InitialAppData> = (props) => {
   );
 };
 
-export const AppSearchUnconfigured: React.FC = () => (
-  <Routes>
-    <Route>
-      <Redirect to={SETUP_GUIDE_PATH} />
-    </Route>
-  </Routes>
-);
+export const AppSearchUnconfigured: React.FC = () => {
+  const { renderHeaderActions } = useValues(KibanaLogic);
+  renderHeaderActions(EndpointsHeaderAction);
+
+  return (
+    <Routes>
+      <Route>
+        <Redirect to={SETUP_GUIDE_PATH} />
+      </Route>
+    </Routes>
+  );
+};
 
 export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) => {
   const {

diff --git a/...ns/enterprise_search/public/applications/applications/components/layout/page_template.tsx b/...ns/enterprise_search/public/applications/applications/components/layout/page_template.tsx
@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
+
+import { useValues } from 'kea';
 
 import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants';
+import { KibanaLogic } from '../../../shared/kibana';
 import { SetEnterpriseSearchApplicationsChrome } from '../../../shared/kibana_chrome';
 import { EnterpriseSearchPageTemplateWrapper, PageTemplateProps } from '../../../shared/layout';
 import { useEnterpriseSearchApplicationNav } from '../../../shared/layout';
 import { SendEnterpriseSearchTelemetry } from '../../../shared/telemetry';
+import { SearchApplicationHeaderDocsAction } from '../search_application/header_docs_action';
 
 export type EnterpriseSearchApplicationsPageTemplateProps = Omit<
   PageTemplateProps,
@@ -36,6 +40,14 @@ export const EnterpriseSearchApplicationsPageTemplate: React.FC<
     pageTemplateProps.isEmptyState,
     hasSchemaConflicts
   );
+  const { renderHeaderActions } = useValues(KibanaLogic);
+  useLayoutEffect(() => {
+    renderHeaderActions(SearchApplicationHeaderDocsAction);
+
+    return () => {
+      renderHeaderActions();
+    };
+  }, []);
   return (
     <EnterpriseSearchPageTemplateWrapper
       {...pageTemplateProps}

diff --git a/...rch/public/applications/applications/components/search_application/header_docs_action.tsx b/...rch/public/applications/applications/components/search_application/header_docs_action.tsx
@@ -7,29 +7,28 @@
 
 import React from 'react';
 
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
 import { docLinks } from '../../../shared/doc_links';
+import { EndpointsHeaderAction } from '../../../shared/layout/endpoints_header_action';
 
 export const SearchApplicationHeaderDocsAction: React.FC = () => (
-  <EuiFlexGroup gutterSize="s">
-    <EuiFlexItem>
-      <EuiButtonEmpty
-        data-telemetry-id="entSearchApplications-searchApplicationHeader-documentationLink"
-        data-test-subj="search-applications-documentation-link"
-        href={docLinks.searchApplications}
-        target="_blank"
-        iconType="documents"
-      >
-        {i18n.translate(
-          'xpack.enterpriseSearch.searchApplications.searchApplication.header.searchApplicationsDoc',
-          {
-            defaultMessage: 'Search Applications Doc',
-          }
-        )}
-      </EuiButtonEmpty>
-    </EuiFlexItem>
-  </EuiFlexGroup>
+  <EndpointsHeaderAction>
+    <EuiButtonEmpty
+      data-telemetry-id="entSearchApplications-searchApplicationHeader-documentationLink"
+      data-test-subj="search-applications-documentation-link"
+      href={docLinks.searchApplications}
+      target="_blank"
+      iconType="documents"
+    >
+      {i18n.translate(
+        'xpack.enterpriseSearch.searchApplications.searchApplication.header.searchApplicationsDoc',
+        {
+          defaultMessage: 'Search Applications Doc',
+        }
+      )}
+    </EuiButtonEmpty>
+  </EndpointsHeaderAction>
 );
diff --git a/...ublic/applications/applications/components/search_application/search_application_view.tsx b/...ublic/applications/applications/components/search_application/search_application_view.tsx
@@ -5,16 +5,14 @@
  * 2.0.
  */
 
-import React, { useEffect, useLayoutEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
 
 import { useValues, useActions } from 'kea';
 
 import { Routes, Route } from '@kbn/shared-ux-router';
 
 import { Status } from '../../../../../common/types/api';
-
-import { KibanaLogic } from '../../../shared/kibana';
 import {
   SEARCH_APPLICATION_PATH,
   SEARCH_APPLICATION_CONTENT_PATH,
@@ -29,7 +27,6 @@ import { DeleteSearchApplicationModal } from '../search_applications/delete_sear
 
 import { SearchApplicationConnect } from './connect/search_application_connect';
 import { SearchApplicationDocsExplorer } from './docs_explorer/docs_explorer';
-import { SearchApplicationHeaderDocsAction } from './header_docs_action';
 import { SearchApplicationContent } from './search_application_content';
 import { SearchApplicationError } from './search_application_error';
 import { SearchApplicationViewLogic } from './search_application_view_logic';
@@ -48,15 +45,6 @@ export const SearchApplicationView: React.FC = () => {
   const { tabId = SearchApplicationViewTabs.DOCS_EXPLORER } = useParams<{
     tabId?: string;
   }>();
-  const { renderHeaderActions } = useValues(KibanaLogic);
-
-  useLayoutEffect(() => {
-    renderHeaderActions(SearchApplicationHeaderDocsAction);
-
-    return () => {
-      renderHeaderActions();
-    };
-  }, []);
 
   useEffect(() => {
     fetchSearchApplication({ name: searchApplicationName });

diff --git a/...c/applications/enterprise_search_overview/components/product_selector/icons/connector.tsx b/...c/applications/enterprise_search_overview/components/product_selector/icons/connector.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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';
+
+export const ConnectorIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2844_40475)">
+        <path d="M6.70597 13.6171L3.17046 10.0815L4.2858 9.78271L7.00483 12.5017L10.7191 11.5065L11.7143 7.79224L8.99535 5.07324L9.29421 3.95789L12.8297 7.49338L11.6851 11.7652L14.16 14.2402L14.0106 14.7978L13.4528 14.9473L10.978 12.4724L6.70597 13.6171Z" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.76772 10.5553L7.35291 11.2024L5.58514 9.43463L6.08277 7.57747L1.84016 3.33486L1.98961 2.77711L2.54722 2.6277L6.7899 6.87038L8.64701 6.37277L10.4148 8.14053L9.76772 10.5553ZM9.29942 8.43939L8.95123 9.73885L7.65177 10.087L6.7005 9.13577L7.04869 7.83631L8.34815 7.48812L9.29942 8.43939Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2844_40475">
+          <rect width="16" height="16" transform="translate(0 0.787109)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/...lic/applications/enterprise_search_overview/components/product_selector/icons/crawler.tsx b/...lic/applications/enterprise_search_overview/components/product_selector/icons/crawler.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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';
+
+export const CrawlerIcon = () => {
+  return (
+    <svg
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99996 1.28872V0.788669L8.49995 0.5L8.99996 0.788682V1.28863L14.0622 4.21131L14.4952 3.96134L14.9951 4.25V4.82738L14.5622 5.07733V10.9227L14.9951 11.1726V11.75L14.4952 12.0387L14.0622 11.7887L8.99996 14.7114V15.2113L8.49995 15.5L7.99996 15.2113V14.7113L2.93785 11.7887L2.50479 12.0387L2.00476 11.75V11.1727L2.43787 10.9226V5.07736L2.00476 4.82731V4.25L2.50479 3.96131L2.93785 4.21133L7.99996 1.28872ZM8.99996 5.28862L10.5981 6.21131L11.3302 5.78866L8.99996 4.44333V5.28862ZM11.0981 7.07732V8.92267L11.8302 9.34532V6.65468L11.0981 7.07732ZM10.5981 9.78868L8.99996 10.7114V11.5567L11.3302 10.2113L10.5981 9.78868ZM7.99996 10.7113L6.40195 9.78866L5.6699 10.2113L7.99996 11.5566V10.7113ZM5.90198 8.92262V7.07737L5.16992 6.65472V9.34527L5.90198 8.92262ZM6.40196 6.21133L7.99996 5.28873V4.44343L5.66991 5.78868L6.40196 6.21133ZM12.3302 5.21131L8.99996 3.28863V2.44333L13.0622 4.78866L12.3302 5.21131ZM12.8302 9.92267V6.07733L13.5622 5.65468V10.3453L12.8302 9.92267ZM8.99996 12.7114L12.3302 10.7887L13.0622 11.2113L8.99996 13.5567V12.7114ZM4.6699 10.7887L7.99996 12.7113V13.5566L3.93785 11.2113L4.6699 10.7887ZM4.16992 6.07737V9.92262L3.43787 10.3453V5.65472L4.16992 6.07737ZM7.99996 3.28872L4.66991 5.21133L3.93785 4.78868L7.99996 2.44342V3.28872ZM6.90198 7.07735L8.50005 6.1547L10.0981 7.07735V8.92265L8.50005 9.8453L6.90198 8.92265V7.07735Z"
+      />
+      <path d="M8.5 7L9.36603 7.5V8.5L8.5 9L7.63397 8.5V7.5L8.5 7Z" />
+    </svg>
+  );
+};
diff --git a/...pplications/enterprise_search_overview/components/product_selector/ingestion_selector.tsx b/...pplications/enterprise_search_overview/components/product_selector/ingestion_selector.tsx
@@ -31,8 +31,6 @@ import {
 } from '../../../../../common/constants';
 
 import apiLogo from '../../../../assets/images/api_cloud.svg';
-import connectorIcon from '../../../../assets/images/connector.svg';
-import crawlerIcon from '../../../../assets/images/crawler.svg';
 import fileUploadLogo from '../../../../assets/images/file_upload_logo.svg';
 import sampleDataLogo from '../../../../assets/images/sample_data_logo.svg';
 import connectorLogo from '../../../../assets/images/search_connector.svg';
@@ -48,6 +46,9 @@ import { HttpLogic } from '../../../shared/http/http_logic';
 import { KibanaLogic } from '../../../shared/kibana';
 import { EuiLinkTo } from '../../../shared/react_router_helpers';
 
+import { ConnectorIcon } from './icons/connector';
+import { CrawlerIcon } from './icons/crawler';
+
 export const IngestionSelector: React.FC = () => {
   const {
     application: { navigateToApp },
@@ -91,7 +92,7 @@ export const IngestionSelector: React.FC = () => {
                   defaultMessage: 'Crawl URL',
                 }
               )}
-              buttonIcon={crawlerIcon}
+              buttonIcon={CrawlerIcon}
               description={i18n.translate(
                 'xpack.enterpriseSearch.ingestSelector.method.crawler.description',
                 {
@@ -119,7 +120,7 @@ export const IngestionSelector: React.FC = () => {
                   defaultMessage: 'Create a connector',
                 }
               )}
-              buttonIcon={connectorIcon}
+              buttonIcon={ConnectorIcon}
               description={i18n.translate(
                 'xpack.enterpriseSearch.ingestSelector.method.connectors.description',
                 {

diff --git a/...ic/applications/enterprise_search_overview/components/product_selector/welcome_banner.tsx b/...ic/applications/enterprise_search_overview/components/product_selector/welcome_banner.tsx
@@ -37,7 +37,7 @@ export const WelcomeBanner: React.FC<WelcomeBannerProps> = ({ user, image }) =>
             <EuiText color="subdued">
               {i18n.translate('xpack.enterpriseSearch.welcomeBanner.header.titleDescription', {
                 defaultMessage:
-                  'There are endless ways to ingest and explore data with Elasticsearch, but here are a few of the most popular',
+                  'There are endless ways to ingest and explore data with Elasticsearch, connect to your Elasticsearch instance and start indexing data',
               })}
             </EuiText>
           </EuiFlexItem>

diff --git a/x-pack/plugins/enterprise_search/public/applications/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/index.test.tsx
@@ -10,10 +10,14 @@ import React from 'react';
 import { act } from '@testing-library/react';
 import { getContext } from 'kea';
 
+import { Observable } from 'rxjs';
+
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { coreMock } from '@kbn/core/public/mocks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { guidedOnboardingMock } from '@kbn/guided-onboarding-plugin/public/mocks';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { lensPluginMock } from '@kbn/lens-plugin/public/mocks';
 import { licensingMock } from '@kbn/licensing-plugin/public/mocks';
 import { mlPluginMock } from '@kbn/ml-plugin/public/mocks';
@@ -53,7 +57,13 @@ describe('renderApp', () => {
   });
 
   const mockContainer = kibanaDeps.params.element;
-  const MockApp = () => <div className="hello-world">Hello world!</div>;
+  const MockApp = () => (
+    <div className="hello-world">
+      {i18n.translate('xpack.enterpriseSearch.mockApp.div.helloWorldLabel', {
+        defaultMessage: 'Hello world',
+      })}
+    </div>
+  );
 
   it('mounts and unmounts UI', () => {
     const unmount = renderApp(MockApp, kibanaDeps, pluginData);
@@ -102,12 +112,24 @@ describe('renderApp', () => {
 
   describe('renderHeaderActions', () => {
     const mockHeaderEl = document.createElement('header');
-    const MockHeaderActions = () => <button className="hello-world">Hello World</button>;
+    const MockHeaderActions = () => (
+      <button className="hello-world">
+        <FormattedMessage
+          id="xpack.enterpriseSearch.mockHeaderActions.button.helloWorldLabel"
+          defaultMessage="Hello World"
+        />
+      </button>
+    );
 
     it('mounts and unmounts any HeaderActions component', () => {
       const store = getContext().store;
 
-      const unmountHeader = renderHeaderActions(MockHeaderActions, store, mockHeaderEl);
+      const unmountHeader = renderHeaderActions(
+        MockHeaderActions,
+        store,
+        { theme$: new Observable() } as any,
+        mockHeaderEl
+      );
       expect(mockHeaderEl.querySelector('.hello-world')).not.toBeNull();
 
       unmountHeader();