From 5067645daa99140032350d9bb6f6345e2ab09eb2 Mon Sep 17 00:00:00 2001 From: Sander Philipse <94373878+sphilipse@users.noreply.github.com> Date: Thu, 14 Dec 2023 17:10:31 +0100 Subject: [PATCH] [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 <42973632+kibanamachine@users.noreply.github.com> --- .../components/cloud_details.tsx | 11 +- .../curations/curation/curation.tsx | 2 +- .../layout/kibana_header_actions.tsx | 11 +- .../public/applications/app_search/index.tsx | 20 +- .../components/layout/page_template.tsx | 14 +- .../search_application/header_docs_action.tsx | 37 ++- .../search_application_view.tsx | 14 +- .../product_selector/icons/connector.tsx | 34 ++ .../product_selector/icons/crawler.tsx | 27 ++ .../product_selector/ingestion_selector.tsx | 9 +- .../product_selector/welcome_banner.tsx | 2 +- .../public/applications/index.test.tsx | 28 +- .../public/applications/index.tsx | 18 +- .../shared/api_key/api_key_panel.tsx | 73 +++-- .../shared/layout/endpoint_icon.tsx | 30 ++ .../shared/layout/endpoints_header_action.tsx | 300 +++++++++--------- .../shared/layout/page_template.tsx | 7 +- .../search_labs_banner/search_labs_banner.tsx | 18 +- .../search_labs_banner/search_labs_logo.tsx | 39 +++ .../layout/kibana_header_actions.tsx | 7 +- .../views/overview/gated_form_page.tsx | 5 +- .../public/assets/images/search_labs_logo.svg | 20 -- .../plugins/enterprise_search/tsconfig.json | 1 + 23 files changed, 447 insertions(+), 280 deletions(-) create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/icons/connector.tsx create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/icons/crawler.tsx create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoint_icon.tsx create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/search_labs_banner/search_labs_logo.tsx delete mode 100644 x-pack/plugins/enterprise_search/public/assets/images/search_labs_logo.svg diff --git a/packages/kbn-search-api-panels/components/cloud_details.tsx b/packages/kbn-search-api-panels/components/cloud_details.tsx index 2354ca4b345f2..25e7e660ee356 100644 --- 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 = ( - + {selectedDetail === CloudDetail.CloudId && cloudId} {selectedDetail === CloudDetail.ElasticsearchEndpoint && elasticsearchUrl} diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/curation.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/curation.tsx index 47718a3266e35..1c49c077e7a6a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/curation.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/curation.tsx @@ -26,7 +26,7 @@ export const Curation: React.FC = () => { }, [curationId]); if (dataLoading) { - return ; + return ; } return isAutomated ? : ; }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/kibana_header_actions.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/kibana_header_actions.tsx index e23c8ff8f0f0c..e2756bdda05f2 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/kibana_header_actions.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/kibana_header_actions.tsx @@ -9,8 +9,7 @@ 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'; @@ -18,12 +17,6 @@ export const KibanaHeaderActions: React.FC = () => { const { engineName } = useValues(EngineLogic); return ( - - {engineName && ( - - - - )} - + {Boolean(engineName) && } ); }; 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 index efef9bf1bb398..1c661f1f6d03b 100644 --- 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 = (props) => { ); }; -export const AppSearchUnconfigured: React.FC = () => ( - - - - - -); +export const AppSearchUnconfigured: React.FC = () => { + const { renderHeaderActions } = useValues(KibanaLogic); + renderHeaderActions(EndpointsHeaderAction); + + return ( + + + + + + ); +}; export const AppSearchConfigured: React.FC> = (props) => { const { diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/components/layout/page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/applications/components/layout/page_template.tsx index 54b3450161014..550acf7fa9359 100644 --- a/x-pack/plugins/enterprise_search/public/applications/applications/components/layout/page_template.tsx +++ b/x-pack/plugins/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 ( ( - - - - {i18n.translate( - 'xpack.enterpriseSearch.searchApplications.searchApplication.header.searchApplicationsDoc', - { - defaultMessage: 'Search Applications Doc', - } - )} - - - + + + {i18n.translate( + 'xpack.enterpriseSearch.searchApplications.searchApplication.header.searchApplicationsDoc', + { + defaultMessage: 'Search Applications Doc', + } + )} + + ); diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/search_application_view.tsx b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/search_application_view.tsx index 92a99b45be6d5..fef6f95c3b435 100644 --- a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/search_application_view.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/search_application_view.tsx @@ -5,7 +5,7 @@ * 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'; @@ -13,8 +13,6 @@ 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/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/icons/connector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/icons/connector.tsx new file mode 100644 index 0000000000000..612a759b46c17 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/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 ( + + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/icons/crawler.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/icons/crawler.tsx new file mode 100644 index 0000000000000..73b38816e8a54 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/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 ( + + + + + ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/ingestion_selector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/ingestion_selector.tsx index 49a5d068b437c..d2f2173a2d9a3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/ingestion_selector.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/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/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/welcome_banner.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/welcome_banner.tsx index effeae6757dc6..1f7b5f8652a33 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/welcome_banner.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/welcome_banner.tsx @@ -37,7 +37,7 @@ export const WelcomeBanner: React.FC = ({ user, image }) => {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', })} diff --git a/x-pack/plugins/enterprise_search/public/applications/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/index.test.tsx index bb5e1a35f18a0..d4a21f4cd6c36 100644 --- 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 = () =>
Hello world!
; + const MockApp = () => ( +
+ {i18n.translate('xpack.enterpriseSearch.mockApp.div.helloWorldLabel', { + defaultMessage: 'Hello world', + })} +
+ ); 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 = () => ; + const MockHeaderActions = () => ( + + ); 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(); diff --git a/x-pack/plugins/enterprise_search/public/applications/index.tsx b/x-pack/plugins/enterprise_search/public/applications/index.tsx index 3421da8967ff5..55362dbfa8430 100644 --- a/x-pack/plugins/enterprise_search/public/applications/index.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/index.tsx @@ -15,7 +15,8 @@ import { Store } from 'redux'; import { AppMountParameters, CoreStart } from '@kbn/core/public'; import { I18nProvider } from '@kbn/i18n-react'; -import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme'; import { AuthenticatedUser } from '@kbn/security-plugin/public'; import { Router } from '@kbn/shared-ux-router'; @@ -116,7 +117,7 @@ export const renderApp = ( productFeatures, renderHeaderActions: (HeaderActions) => params.setHeaderActionMenu( - HeaderActions ? renderHeaderActions.bind(null, HeaderActions, store) : undefined + HeaderActions ? renderHeaderActions.bind(null, HeaderActions, store, params) : undefined ), security, setBreadcrumbs: chrome.setBreadcrumbs, @@ -139,7 +140,7 @@ export const renderApp = ( ReactDOM.render( - + @@ -184,12 +185,17 @@ export const renderApp = ( export const renderHeaderActions = ( HeaderActions: React.FC, store: Store, + params: AppMountParameters, kibanaHeaderEl: HTMLElement ) => { ReactDOM.render( - - - , + + + + + + + , kibanaHeaderEl ); return () => ReactDOM.unmountComponentAtNode(kibanaHeaderEl); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx index ba2c4a86fcb86..c69976f178495 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx @@ -7,6 +7,7 @@ import React, { useEffect, useState } from 'react'; +import { css } from '@emotion/react'; import { useActions, useValues } from 'kea'; import { @@ -80,7 +81,13 @@ export const ApiKeyPanel: React.FC = ({ user }) => { - {elasticsearchEndpoint} + + {elasticsearchEndpoint} + @@ -99,35 +106,45 @@ export const ApiKeyPanel: React.FC = ({ user }) => { - - - {i18n.translate('xpack.enterpriseSearch.apiKey.cloudId', { - defaultMessage: 'Cloud ID:', - })} - - + {Boolean(cloudId) && ( + <> + + + {i18n.translate('xpack.enterpriseSearch.apiKey.cloudId', { + defaultMessage: 'Cloud ID:', + })} + + - - - {cloudId} - - - - {(copy) => ( - + + + {cloudId} + + + + + {(copy) => ( + )} - /> - )} - - - + + + + + )} )} diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoint_icon.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoint_icon.tsx new file mode 100644 index 0000000000000..157fbfd363fa3 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoint_icon.tsx @@ -0,0 +1,30 @@ +/* + * 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'; + +// Remove this file once `endpoint` is available in Kibana +// Coming in EUI 91.1.0 + +export const EndpointIcon = () => { + return ( + + + + + ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoints_header_action.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoints_header_action.tsx index 87ffe6d91df25..e46445384ae39 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoints_header_action.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/endpoints_header_action.tsx @@ -26,21 +26,23 @@ import { EuiBadge, EuiHorizontalRule, EuiButton, + EuiHeaderLinks, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage, I18nProvider } from '@kbn/i18n-react'; +import { FormattedMessage } from '@kbn/i18n-react'; import { ELASTICSEARCH_URL_PLACEHOLDER } from '@kbn/search-api-panels/constants'; import { Status } from '../../../../common/types/api'; -import endpointIcon from '../../../assets/images/endpoint_icon.svg'; import { CreateApiKeyAPILogic } from '../../enterprise_search_overview/api/create_elasticsearch_api_key_logic'; import { FetchApiKeysAPILogic } from '../../enterprise_search_overview/api/fetch_api_keys_logic'; import { CreateApiKeyFlyout } from '../api_key/create_api_key_flyout'; import { KibanaLogic } from '../kibana'; -export const EndpointsHeaderAction: React.FC = () => { +import { EndpointIcon } from './endpoint_icon'; + +export const EndpointsHeaderAction: React.FC = ({ children }) => { const [isPopoverOpen, setPopoverOpen] = useState(false); const { cloud, navigateToUrl } = useValues(KibanaLogic); const { makeRequest } = useActions(FetchApiKeysAPILogic); @@ -61,166 +63,166 @@ export const EndpointsHeaderAction: React.FC = () => { const elasticsearchEndpoint = cloud?.elasticsearchUrl || ELASTICSEARCH_URL_PLACEHOLDER; const button = ( - setPopoverOpen(!isPopoverOpen)} - > + setPopoverOpen(!isPopoverOpen)}> {i18n.translate('xpack.enterpriseSearch.pageTemplate.endpointsButtonLabel', { - defaultMessage: 'Endpoints', + defaultMessage: 'Endpoints & API keys', })} ); return ( - - {isFlyoutOpen && ( - setIsFlyoutOpen(false)} - setApiKey={saveApiKey} - username={user?.full_name || user?.username || ''} - /> - )} - setPopoverOpen(false)} - panelPaddingSize="none" - anchorPosition="downLeft" - > - - - {i18n.translate( - 'xpack.enterpriseSearch.pageTemplate.apiKey.elasticsearchEndpoint', - { - defaultMessage: 'Elasticsearch endpoint:', - } - )} - - - - - - {elasticsearchEndpoint} - - - - {(copy) => ( + + + {Boolean(children) && {children}} + + {isFlyoutOpen && ( + setIsFlyoutOpen(false)} + setApiKey={saveApiKey} + username={user?.full_name || user?.username || ''} + /> + )} + setPopoverOpen(false)} + panelPaddingSize="none" + anchorPosition="downLeft" + > + + + {i18n.translate( + 'xpack.enterpriseSearch.pageTemplate.apiKey.elasticsearchEndpoint', + { + defaultMessage: 'Elasticsearch endpoint:', + } + )} + + + + + + {elasticsearchEndpoint} + + + + {(copy) => ( + + )} + + + + , + ...(Boolean(cloudId) + ? [ + + + {i18n.translate('xpack.enterpriseSearch.apiKey.cloudId', { + defaultMessage: 'Cloud ID:', + })} + + + + + + {cloudId} + + + + {(copy) => ( + + )} + + + + , + ] + : []), + + + + + 0 ? 'success' : 'warning'} + data-test-subj="api-keys-count-badge" + > + {apiKeys.length} + + ), + }} + /> + + + + navigateToUrl('/app/management/security/api_keys', { + shouldNotCreateHref: true, + }) + } /> - )} - - - - , - ...(Boolean(cloudId) - ? [ - + + + , + , + + { + setIsFlyoutOpen(true); + setPopoverOpen(false); + }} + data-test-subj="new-api-key-button" + fullWidth + > - {i18n.translate('xpack.enterpriseSearch.apiKey.cloudId', { - defaultMessage: 'Cloud ID:', + {i18n.translate('xpack.enterpriseSearch.pageTemplate.apiKey.newButtonLabel', { + defaultMessage: 'New API key', })} - - - - - {cloudId} - - - - {(copy) => ( - - )} - - - - , - ] - : []), - - - - - 0 ? 'success' : 'warning'} - data-test-subj="api-keys-count-badge" - > - {apiKeys.length} - - ), - }} - /> - - - - - navigateToUrl('/app/management/security/api_keys', { - shouldNotCreateHref: true, - }) - } - /> - - - , - , - - { - setIsFlyoutOpen(true); - setPopoverOpen(false); - }} - data-test-subj="new-api-key-button" - fullWidth - > - - {i18n.translate('xpack.enterpriseSearch.pageTemplate.apiKey.newButtonLabel', { - defaultMessage: 'New API key', - })} - - - , - ]} - /> - - + + , + ]} + /> + + + + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx index 260b95316b001..2553a12dc17c5 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useEffect } from 'react'; +import React, { useLayoutEffect } from 'react'; import classNames from 'classnames'; import { useValues } from 'kea'; @@ -71,10 +71,13 @@ export const EnterpriseSearchPageTemplateWrapper: React.FC = const navIcon = solutionNavIcon ?? 'logoEnterpriseSearch'; - useEffect(() => { + useLayoutEffect(() => { if (useEndpointHeaderActions) { renderHeaderActions(EndpointsHeaderAction); } + return () => { + renderHeaderActions(); + }; }, []); return ( { const { http } = useValues(HttpLogic); const backgroundImagePath = http.basePath.prepend( '/plugins/enterpriseSearch/assets/images/search_labs_banner_background.svg' ); return ( - - @@ -96,6 +96,6 @@ export const SearchLabsBanner: React.FC = () => { - + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/search_labs_banner/search_labs_logo.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/search_labs_banner/search_labs_logo.tsx new file mode 100644 index 0000000000000..f72c89c7ee5f1 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/search_labs_banner/search_labs_logo.tsx @@ -0,0 +1,39 @@ +/* + * 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 SearchLabsLogo: React.FC = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx index c508e4d9e4224..d1eb78b184223 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx @@ -7,9 +7,10 @@ import React from 'react'; -import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiHeaderLinks } from '@elastic/eui'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { externalUrl, getWorkplaceSearchUrl } from '../../../shared/enterprise_search_url'; +import { EndpointsHeaderAction } from '../../../shared/layout/endpoints_header_action'; import { EuiButtonEmptyTo } from '../../../shared/react_router_helpers'; import { NAV } from '../../constants'; import { PRIVATE_SOURCES_PATH } from '../../routes'; @@ -18,7 +19,7 @@ export const WorkplaceSearchHeaderActions: React.FC = () => { if (!externalUrl.enterpriseSearchUrl) return null; return ( - + { - + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_page.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_page.tsx index c4a4634695c56..2e3939675ac69 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_page.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_page.tsx @@ -23,9 +23,7 @@ import { SendWorkplaceSearchTelemetry } from '../../../shared/telemetry'; import { WorkplaceSearchGate } from './gated_form'; -export const WorkplaceSearchGatePage: React.FC< - Omit -> = ({ isLoading }) => { +export const WorkplaceSearchGatePage: React.FC = ({ isLoading }) => { return ( diff --git a/x-pack/plugins/enterprise_search/public/assets/images/search_labs_logo.svg b/x-pack/plugins/enterprise_search/public/assets/images/search_labs_logo.svg deleted file mode 100644 index 63204cae3cf0a..0000000000000 --- a/x-pack/plugins/enterprise_search/public/assets/images/search_labs_logo.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/x-pack/plugins/enterprise_search/tsconfig.json b/x-pack/plugins/enterprise_search/tsconfig.json index 758b8d92997f5..7b91d019e6a49 100644 --- a/x-pack/plugins/enterprise_search/tsconfig.json +++ b/x-pack/plugins/enterprise_search/tsconfig.json @@ -65,5 +65,6 @@ "@kbn/core-http-browser-mocks", "@kbn/core-application-browser", "@kbn/core-capabilities-common", + "@kbn/react-kibana-context-theme", ] }