From 9452be575e807fe0f97fe3ed7141e8795450c8db Mon Sep 17 00:00:00 2001 From: Sander Philipse <94373878+sphilipse@users.noreply.github.com> Date: Wed, 10 Aug 2022 16:19:43 +0200 Subject: [PATCH 01/26] [Enterprise Search] Fix React rendering issues (#138496) --- .../components/api_key/api_key.tsx | 35 +- .../method_connector/method_connector.tsx | 86 +++-- .../document_list/document_list.tsx | 127 ++++--- .../generate_api_key_modal/modal.test.tsx | 8 +- .../generate_api_key_modal/modal.tsx | 27 +- .../connector/api_key_configuration.tsx | 87 ++--- .../connector/connector_configuration.tsx | 333 +++++++++--------- .../connector_configuration_config.tsx | 48 +-- .../connector/connector_overview_panels.tsx | 26 +- .../search_indices/search_indices.tsx | 94 ++--- 10 files changed, 434 insertions(+), 437 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/api_key/api_key.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/api_key/api_key.tsx index 1fc67699c9a6de..f24fc6234d0c83 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/api_key/api_key.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/api_key/api_key.tsx @@ -7,36 +7,23 @@ import React from 'react'; -import { EuiCodeBlock, EuiFormLabel, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiCodeBlock, EuiFormLabel, EuiSpacer } from '@elastic/eui'; interface ApiKeyProps { - actions?: React.ReactNode; apiKey: string; label?: string; } -export const ApiKey: React.FC = ({ apiKey, label, actions }) => { - const codeBlock = ( +export const ApiKey: React.FC = ({ apiKey, label }) => ( + <> + {label && ( + <> + {label} + + + )} {apiKey} - ); - return ( - <> - {label && ( - <> - {label} - - - )} - {actions ? ( - - {codeBlock} - {actions} - - ) : ( - codeBlock - )} - - ); -}; + +); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/method_connector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/method_connector.tsx index a3d3456e21f408..59d43d8635e1bb 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/method_connector.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/method_connector.tsx @@ -69,49 +69,6 @@ export const MethodConnector: React.FC = () => { const { setIsModalVisible } = useActions(AddConnectorPackageLogic); const { fullIndexName, language } = useValues(NewSearchIndexLogic); - const confirmModal = isModalVisible && ( - { - event?.preventDefault(); - setIsModalVisible(false); - }} - onConfirm={(event) => { - event.preventDefault(); - makeRequest({ deleteExistingConnector: true, indexName: fullIndexName, language }); - }} - cancelButtonText={i18n.translate( - 'xpack.enterpriseSearch.content.newIndex.steps.buildConnector.confirmModal.cancelButton.label', - { - defaultMessage: 'Cancel', - } - )} - confirmButtonText={i18n.translate( - 'xpack.enterpriseSearch.content.newIndex.steps.buildConnector.confirmModal.confirmButton.label', - { - defaultMessage: 'Replace configuration', - } - )} - defaultFocusedButton="confirm" - > - {i18n.translate( - 'xpack.enterpriseSearch.content..newIndex.steps.buildConnector.confirmModal.description', - { - defaultMessage: - 'A deleted index named {indexName} was originally tied to an existing connector configuration. Would you like to replace the existing connector configuration with a new one?', - values: { - indexName: fullIndexName, - }, - } - )} - - ); - return ( { BUILD_SEARCH_EXPERIENCE_STEP, ]} /> - {confirmModal} + {isModalVisible && ( + { + event?.preventDefault(); + setIsModalVisible(false); + }} + onConfirm={(event) => { + event.preventDefault(); + makeRequest({ deleteExistingConnector: true, indexName: fullIndexName, language }); + }} + cancelButtonText={i18n.translate( + 'xpack.enterpriseSearch.content.newIndex.steps.buildConnector.confirmModal.cancelButton.label', + { + defaultMessage: 'Cancel', + } + )} + confirmButtonText={i18n.translate( + 'xpack.enterpriseSearch.content.newIndex.steps.buildConnector.confirmModal.confirmButton.label', + { + defaultMessage: 'Replace configuration', + } + )} + defaultFocusedButton="confirm" + > + {i18n.translate( + 'xpack.enterpriseSearch.content..newIndex.steps.buildConnector.confirmModal.description', + { + defaultMessage: + 'A deleted index named {indexName} was originally tied to an existing connector configuration. Would you like to replace the existing connector configuration with a new one?', + values: { + indexName: fullIndexName, + }, + } + )} + + )} ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/document_list/document_list.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/document_list/document_list.tsx index 779c6369684357..43ed12f040d0c2 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/document_list/document_list.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/document_list/document_list.tsx @@ -57,72 +57,10 @@ export const DocumentList: React.FC = () => { return []; }; - const docsPerPageButton = ( - { - setIsPopoverOpen(true); - }} - > - {i18n.translate( - 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.pagination.itemsPerPage', - { - defaultMessage: 'Documents per page: {docPerPage}', - values: { docPerPage: docsPerPage }, - } - )} - - ); - const getIconType = (size: number) => { return size === docsPerPage ? 'check' : 'empty'; }; - const docsPerPageOptions = [ - { - setIsPopoverOpen(false); - setDocsPerPage(10); - }} - > - {i18n.translate( - 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.paginationOptions.option', - { defaultMessage: '{docCount} documents', values: { docCount: 10 } } - )} - , - - { - setIsPopoverOpen(false); - setDocsPerPage(25); - }} - > - {i18n.translate( - 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.paginationOptions.option', - { defaultMessage: '{docCount} documents', values: { docCount: 25 } } - )} - , - { - setIsPopoverOpen(false); - setDocsPerPage(50); - }} - > - {i18n.translate( - 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.paginationOptions.option', - { defaultMessage: '{docCount} documents', values: { docCount: 50 } } - )} - , - ]; - return ( <> { 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.docsPerPage', { defaultMessage: 'Document count per page dropdown' } )} - button={docsPerPageButton} + button={ + { + setIsPopoverOpen(true); + }} + > + {i18n.translate( + 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.pagination.itemsPerPage', + { + defaultMessage: 'Documents per page: {docPerPage}', + values: { docPerPage: docsPerPage }, + } + )} + + } isOpen={isPopoverOpen} closePopover={() => { setIsPopoverOpen(false); @@ -183,7 +138,51 @@ export const DocumentList: React.FC = () => { panelPaddingSize="none" anchorPosition="downLeft" > - + { + setIsPopoverOpen(false); + setDocsPerPage(10); + }} + > + {i18n.translate( + 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.paginationOptions.option', + { defaultMessage: '{docCount} documents', values: { docCount: 10 } } + )} + , + + { + setIsPopoverOpen(false); + setDocsPerPage(25); + }} + > + {i18n.translate( + 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.paginationOptions.option', + { defaultMessage: '{docCount} documents', values: { docCount: 25 } } + )} + , + { + setIsPopoverOpen(false); + setDocsPerPage(50); + }} + > + {i18n.translate( + 'xpack.enterpriseSearch.content.searchIndex.documents.documentList.paginationOptions.option', + { defaultMessage: '{docCount} documents', values: { docCount: 50 } } + )} + , + ]} + /> diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.test.tsx index 325d52ab2d2fde..b579df9da5c8bf 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.test.tsx @@ -11,14 +11,12 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { EuiModal, EuiFieldText } from '@elastic/eui'; +import { EuiModal, EuiFieldText, EuiCodeBlock } from '@elastic/eui'; const mockActions = { makeRequest: jest.fn(), setKeyName: jest.fn() }; const mockValues = { apiKey: '', isLoading: false, isSuccess: false, keyName: '' }; -import { ApiKey } from '../../../api_key/api_key'; - import { GenerateApiKeyModal } from './modal'; const onCloseMock = jest.fn(); @@ -84,8 +82,8 @@ describe('GenerateApiKeyModal', () => { ); expect(wrapper.find(EuiFieldText)).toHaveLength(0); expect(wrapper.find('[data-test-subj="generateApiKeyButton"]')).toHaveLength(0); - expect(wrapper.find(ApiKey)).toHaveLength(1); - expect(wrapper.find(ApiKey).prop('apiKey')).toEqual('apiKeyFromBackend123123=='); + expect(wrapper.find(EuiCodeBlock)).toHaveLength(1); + expect(wrapper.find(EuiCodeBlock).children().text()).toEqual('apiKeyFromBackend123123=='); }); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx index fcb95fd4ade322..2690deea0c6de8 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx @@ -26,14 +26,14 @@ import { EuiText, EuiSpacer, EuiLink, + EuiFormLabel, + EuiCodeBlock, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { docLinks } from '../../../../../shared/doc_links'; -import { ApiKey } from '../../../api_key/api_key'; - import { GenerateApiKeyModalLogic } from './generate_api_key_modal.logic'; interface GenerateApiKeyModalProps { @@ -114,10 +114,21 @@ export const GenerateApiKeyModal: React.FC = ({ indexN ) : ( - {keyName} + + + + + {apiKey} + + + = ({ indexN href={encodeURI(`data:text/csv;charset=utf-8,${apiKey}`)} download={`${keyName}.csv`} /> - } - /> + + )} diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx index c435bac2a58117..19974d4b281b36 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx @@ -23,6 +23,43 @@ import { Status } from '../../../../../../common/types/api'; import { GenerateConnectorApiKeyApiLogic } from '../../../api/connector_package/generate_connector_api_key_api_logic'; import { ApiKey } from '../../api_key/api_key'; +const ConfirmModal: React.FC<{ + onCancel: () => void; + onConfirm: () => void; +}> = ({ onCancel, onConfirm }) => ( + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.apiKey.confirmModal.description', + { + defaultMessage: + 'Generating a new API key will invalidate the previous key. Are you sure you want to generate a new API key? This can not be undone.', + } + )} + +); + export const ApiKeyConfig: React.FC<{ hasApiKey: boolean; indexName: string }> = ({ hasApiKey, indexName, @@ -44,50 +81,18 @@ export const ApiKeyConfig: React.FC<{ hasApiKey: boolean; indexName: string }> = const [isModalVisible, setIsModalVisible] = useState(false); - const confirmModal = ( - { - event?.preventDefault(); - setIsModalVisible(false); - }} - onConfirm={(event) => { - event.preventDefault(); - makeRequest({ indexName }); - setIsModalVisible(false); - }} - cancelButtonText={i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.apiKey.confirmModal.cancelButton.label', - { - defaultMessage: 'Cancel', - } - )} - confirmButtonText={i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.apiKey.confirmModal.confirmButton.label', - { - defaultMessage: 'Generate API key', - } - )} - defaultFocusedButton="confirm" - > - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.apiKey.confirmModal.description', - { - defaultMessage: - 'Generating a new API key will invalidate the previous key. Are you sure you want to generate a new API key? This can not be undone.', - } - )} - - ); + const onCancel = () => { + setIsModalVisible(false); + }; + + const onConfirm = () => { + makeRequest({ indexName }); + setIsModalVisible(false); + }; return ( - {isModalVisible && confirmModal} + {isModalVisible && } {i18n.translate( diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration.tsx index 596b1837323dae..acd8c856c38931 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration.tsx @@ -55,172 +55,6 @@ export const ConnectorConfiguration: React.FC = () => { const hasApiKey = !!(indexData.connector.api_key_id ?? apiKeyData); - const ScheduleStep: React.FC = () => ( - - - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.scheduleSync.description', - { - defaultMessage: - 'Once your connectors are configured to your liking, don’t forget to set a recurring sync schedule to make sure your documents are indexed and relevant. You can also trigger a one-time sync without enabling a sync schedule.', - } - )} - - - - - - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.steps.schedule.button.label', - { - defaultMessage: 'Set schedule and sync', - } - )} - - - - - - ); - - const ConnectorPackage: React.FC = () => ( - <> - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.description.firstParagraph', - { - defaultMessage: - 'The connectors repository contains several connector client examples to help you utilize our framework for accelerated development against custom data sources.', - } - )} - - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.button.label', - { - defaultMessage: 'Explore the connectors repository', - } - )} - - - - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.clientExamplesLink', - { defaultMessage: 'connector client examples' } - )} - - ), - }} - /> - - - - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.configurationFileLink', - { defaultMessage: 'configuration file' } - )} - - ), - }} - /> - - - - {`${ - apiKeyData?.encoded - ? `elasticsearch: - api_key: "${apiKeyData?.encoded}" -` - : '' - }connector_id: "${indexData.connector.id}" -`} - - - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.connectorDeployedText', - { - defaultMessage: - 'Once you’ve configured the connector, deploy the connector to your self managed infrastructure.', - } - )} - - - {!indexData.connector.status || indexData.connector.status === ConnectorStatus.CREATED ? ( - - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.waitingForConnectorText', - { - defaultMessage: - 'Your connector has not connected to Enterprise Search. Troubleshoot your configuration and refresh the page.', - } - )} - - recheckIndex()} - isLoading={recheckIndexLoading} - > - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.waitingForConnector.button.label', - { - defaultMessage: 'Recheck now', - } - )} - - - ) : ( - - )} - - ); - return ( <> @@ -246,7 +80,137 @@ export const ConnectorConfiguration: React.FC = () => { titleSize: 'xs', }, { - children: , + children: ( + <> + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.description.firstParagraph', + { + defaultMessage: + 'The connectors repository contains several connector client examples to help you utilize our framework for accelerated development against custom data sources.', + } + )} + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.button.label', + { + defaultMessage: 'Explore the connectors repository', + } + )} + + + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.clientExamplesLink', + { defaultMessage: 'connector client examples' } + )} + + ), + }} + /> + + + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.configurationFileLink', + { defaultMessage: 'configuration file' } + )} + + ), + }} + /> + + + + {`${ + apiKeyData?.encoded + ? `elasticsearch: + api_key: "${apiKeyData?.encoded}" + ` + : '' + }connector_id: "${indexData.connector.id}" + `} + + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.connectorDeployedText', + { + defaultMessage: + 'Once you’ve configured the connector, deploy the connector to your self managed infrastructure.', + } + )} + + + {!indexData.connector.status || + indexData.connector.status === ConnectorStatus.CREATED ? ( + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.waitingForConnectorText', + { + defaultMessage: + 'Your connector has not connected to Enterprise Search. Troubleshoot your configuration and refresh the page.', + } + )} + + recheckIndex()} + isLoading={recheckIndexLoading} + > + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.waitingForConnector.button.label', + { + defaultMessage: 'Recheck now', + } + )} + + + ) : ( + + )} + + ), status: !indexData.connector.status || indexData.connector.status === ConnectorStatus.CREATED @@ -275,7 +239,40 @@ export const ConnectorConfiguration: React.FC = () => { titleSize: 'xs', }, { - children: , + children: ( + + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.scheduleSync.description', + { + defaultMessage: + 'Once your connectors are configured to your liking, don’t forget to set a recurring sync schedule to make sure your documents are indexed and relevant. You can also trigger a one-time sync without enabling a sync schedule.', + } + )} + + + + + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.steps.schedule.button.label', + { + defaultMessage: 'Set schedule and sync', + } + )} + + + + + + ), status: indexData.connector.scheduling.enabled ? 'complete' : 'incomplete', title: i18n.translate( 'xpack.enterpriseSearch.content.indices.configurationConnector.steps.schedule.title', diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_config.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_config.tsx index 472fb9570209e1..5588a9c16fd5d4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_config.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_config.tsx @@ -35,28 +35,6 @@ export const ConnectorConfigurationConfig: React.FC = () => { title: label, })); - const display = ( - - - - - - - - setIsEditing(!isEditing)}> - {i18n.translate( - 'xpack.enterpriseSearch.content.indices.configurationConnector.config.editButton.title', - { - defaultMessage: 'Edit configuration', - } - )} - - - - - - ); - return ( @@ -130,7 +108,31 @@ export const ConnectorConfigurationConfig: React.FC = () => { - {isEditing ? : displayList.length > 0 && display} + {isEditing ? ( + + ) : ( + displayList.length > 0 && ( + + + + + + + + setIsEditing(!isEditing)}> + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.config.editButton.title', + { + defaultMessage: 'Edit configuration', + } + )} + + + + + + ) + )} ); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_overview_panels.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_overview_panels.tsx index d972d7a1f3efa5..b1fa1aaa378afb 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_overview_panels.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_overview_panels.tsx @@ -28,20 +28,20 @@ import { import { IndexViewLogic } from '../index_view_logic'; import { SearchIndexTabId } from '../search_index'; +const StatusPanel: React.FC<{ ingestionStatus: IngestionStatus }> = ({ ingestionStatus }) => ( + + + +); + export const ConnectorOverviewPanels: React.FC = () => { const { ingestionStatus, index } = useValues(IndexViewLogic); - const statusPanel = ( - - - - ); - return isConnectorIndex(index) ? ( @@ -83,10 +83,10 @@ export const ConnectorOverviewPanels: React.FC = () => { tabId: SearchIndexTabId.CONFIGURATION, })} > - {statusPanel} + ) : ( - statusPanel + )} diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.tsx index 0977b64abb3f00..e6b74bb89773e8 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.tsx @@ -60,50 +60,6 @@ export const SearchIndices: React.FC = () => { fetchIndices({ meta, returnHiddenIndices: showHiddenIndices, searchQuery }); }, [searchQuery, meta.page.current, showHiddenIndices]); - const createNewIndexButton = ( - - - {i18n.translate('xpack.enterpriseSearch.content.searchIndices.create.buttonTitle', { - defaultMessage: 'Create new index', - })} - - - ); - - const engineSteps = ( - <> - -

- {i18n.translate('xpack.enterpriseSearch.content.searchIndices.searchIndices.stepsTitle', { - defaultMessage: 'Build beautiful search experiences with Enterprise Search', - })} -

- - - - - - - - - - - - ); - - const hiddenIndicesSwitch = ( -