From 8b5c11d8c44fad531702f8b88dd14be9e74a8fba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Gonz=C3=A1lez?= Date: Tue, 7 Jan 2025 13:27:44 +0100 Subject: [PATCH] Initial commit --- .../components/connectors/connectors.tsx | 85 ++++--- .../connectors/crawler_empty_state.tsx | 79 ------- .../components/connectors/crawlers_router.tsx | 9 +- ...astic_managed_web_crawler_empty_prompt.tsx | 117 +++++++++ .../self_managed_web_crawler_empty_prompt.tsx | 222 ++++++++++++++++++ .../enterprise_search_content/routes.ts | 1 + .../applications/shared/constants/labels.ts | 4 + .../applications/shared/icons/crawler.tsx | 13 +- .../plugins/enterprise_search/tsconfig.json | 1 + 9 files changed, 397 insertions(+), 134 deletions(-) delete mode 100644 x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx create mode 100644 x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/elastic_managed_web_crawler_empty_prompt.tsx create mode 100644 x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/self_managed_web_crawler_empty_prompt.tsx diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/connectors.tsx b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/connectors.tsx index 47f2226fe976e..d7ec0ef14282c 100644 --- a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/connectors.tsx +++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/connectors.tsx @@ -16,20 +16,21 @@ import { EuiContextMenuPanel, EuiFlexGroup, EuiFlexItem, + EuiLink, EuiPopover, EuiSearchBar, EuiSpacer, + EuiText, EuiTitle, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { HttpLogic } from '../../../shared/http'; +import { LEARN_MORE_LINK } from '../../../shared/constants'; import { KibanaLogic } from '../../../shared/kibana'; import { handlePageChange } from '../../../shared/table_pagination'; import { - NEW_CRAWLER_PATH, NEW_INDEX_SELECT_CONNECTOR_CLIENTS_PATH, NEW_INDEX_SELECT_CONNECTOR_NATIVE_PATH, NEW_INDEX_SELECT_CONNECTOR_PATH, @@ -41,9 +42,10 @@ import { DefaultSettingsFlyout } from '../settings/default_settings_flyout'; import { ConnectorStats } from './connector_stats'; import { ConnectorsLogic } from './connectors_logic'; import { ConnectorsTable } from './connectors_table'; -import { CrawlerEmptyState } from './crawler_empty_state'; import { CreateConnector } from './create_connector'; import { DeleteConnectorModal } from './delete_connector_modal'; +import { ElasticManagedWebCrawlerEmptyPrompt } from './elastic_managed_web_crawler_empty_prompt'; +import { SelfManagedWebCrawlerEmptyPrompt } from './self_managed_web_crawler_empty_prompt'; export const connectorsBreadcrumbs = [ i18n.translate('xpack.enterpriseSearch.content.connectors.breadcrumb', { @@ -59,12 +61,12 @@ export const crawlersBreadcrumbs = [ export interface ConnectorsProps { isCrawler: boolean; + isCrawlerSelfManaged: boolean; } -export const Connectors: React.FC = ({ isCrawler }) => { +export const Connectors: React.FC = ({ isCrawler, isCrawlerSelfManaged }) => { const { fetchConnectors, onPaginate, setIsFirstRequest, openDeleteModal } = useActions(ConnectorsLogic); const { data, isLoading, searchParams, isEmpty, connectors } = useValues(ConnectorsLogic); - const { errorConnectingMessage } = useValues(HttpLogic); const [searchQuery, setSearchValue] = useState(''); const [showMoreOptionsPopover, setShowMoreOptionsPopover] = useState(false); const [showDefaultSettingsFlyout, setShowDefaultSettingsFlyout] = useState(false); @@ -95,6 +97,29 @@ export const Connectors: React.FC = ({ isCrawler }) => { : i18n.translate('xpack.enterpriseSearch.crawlers.title', { defaultMessage: 'Elastic Web Crawler', }), + description: [ + +

+ + {LEARN_MORE_LINK} + + ), + }} + /> +

+ , + ], + rightSideGroupProps: { gutterSize: 's', responsive: false, @@ -199,52 +224,26 @@ export const Connectors: React.FC = ({ isCrawler }) => { ] : []), ] - : [ - { - KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH); - }} - > - {i18n.translate('xpack.enterpriseSearch.connectors.newCrawlerButtonLabel', { - defaultMessage: 'New web crawler', - })} - , - ...(productFeatures.hasDefaultIngestPipeline - ? [ - setShowDefaultSettingsFlyout(true)} - > - {i18n.translate( - 'xpack.enterpriseSearch.content.searchIndices.defaultSettings', - { - defaultMessage: 'Default settings', - } - )} - , - ] - : []), - ], + : undefined, }} > {productFeatures.hasDefaultIngestPipeline && showDefaultSettingsFlyout && ( setShowDefaultSettingsFlyout(false)} /> )} - - + {!isCrawler && ( + <> + + + + )} {isEmpty && isCrawler ? ( - + isCrawlerSelfManaged ? ( + + ) : ( + + ) ) : ( <> diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx deleted file mode 100644 index 2dc97fb86c04f..0000000000000 --- a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* - * 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'; - -import { useValues } from 'kea'; - -import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; - -import { HttpLogic } from '../../../shared/http'; -import { GithubIcon } from '../../../shared/icons/github_icon'; -import { KibanaLogic } from '../../../shared/kibana'; -import { NEW_CRAWLER_PATH } from '../../routes'; - -export const CrawlerEmptyState: React.FC = () => { - const { errorConnectingMessage } = useValues(HttpLogic); - return ( - - - {i18n.translate('xpack.enterpriseSearch.crawlerEmptyState.h2.createYourFirstWebLabel', { - defaultMessage: 'Create your first web crawler', - })} - - } - titleSize="m" - body={ -

- {i18n.translate( - 'xpack.enterpriseSearch.crawlerEmptyState.p.discoverExtractAndIndexLabel', - { - defaultMessage: - 'Discover extract and index searchable content from websites and knowledge bases', - } - )} -

- } - actions={ - Boolean(errorConnectingMessage) ? ( - - {i18n.translate( - 'xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel', - { - defaultMessage: 'Source code', - } - )} - - ) : ( - KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH)} - > - {i18n.translate('xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel', { - defaultMessage: 'New web crawler', - })} - - ) - } - /> - - ); -}; diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawlers_router.tsx b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawlers_router.tsx index 35c7e9ce56ec3..9242d4c5a1b35 100644 --- a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawlers_router.tsx +++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawlers_router.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { Routes, Route } from '@kbn/shared-ux-router'; -import { CRAWLERS_PATH, NEW_CRAWLER_PATH } from '../../routes'; +import { CRAWLERS_PATH, CRAWLERS_ELASTIC_MANAGED_PATH, NEW_CRAWLER_PATH } from '../../routes'; import { NewSearchIndexPage } from '../new_index/new_search_index_page'; import { Connectors } from './connectors'; @@ -20,8 +20,11 @@ export const CrawlersRouter: React.FC = () => { - - + + + + + ); diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/elastic_managed_web_crawler_empty_prompt.tsx b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/elastic_managed_web_crawler_empty_prompt.tsx new file mode 100644 index 0000000000000..8ee26a16ebe2b --- /dev/null +++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/elastic_managed_web_crawler_empty_prompt.tsx @@ -0,0 +1,117 @@ +/* + * 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'; + +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel, EuiText } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui'; + +import { BACK_BUTTON_LABEL, COMING_SOON_LABEL } from '../../../shared/constants'; +import { CrawlerIcon } from '../../../shared/icons/crawler'; +import { KibanaLogic } from '../../../shared/kibana'; +import { CRAWLERS_PATH } from '../../routes'; + +export const ElasticManagedWebCrawlerEmptyPrompt: React.FC = () => { + return ( + KibanaLogic.values.navigateToUrl(CRAWLERS_PATH), + }} + icon={CrawlerIcon} + title={i18n.translate('xpack.enterpriseSearch.elasticManagedWebCrawlerEmpty.title', { + defaultMessage: 'Elastic managed web crawlers', + })} + isComingSoon + comingSoonLabel={COMING_SOON_LABEL} + description={i18n.translate( + 'xpack.enterpriseSearch.elasticManagedWebCrawlerEmpty.description', + { + defaultMessage: + "We're actively developing Elastic managed web crawlers, that won't require any self-managed infrastructure. You'll be able to handle all configuration in the UI. This will simplify syncing your data into a serverless Elasticsearch project. This new workflow will have two steps:", + } + )} + body={ + + + + + + + + + + + + + + + + + + +

+ {i18n.translate( + 'xpack.enterpriseSearch.elasticManagedWebCrawlerEmpty.guideOneDescription', + { + defaultMessage: 'Set one or more domain URLs you want to crawl', + } + )} +

+ + + + + + + + + + + + + + + + + + +

+ {i18n.translate( + 'xpack.enterpriseSearch.elasticManagedWebCrawlerEmpty.guideThreeDescription', + { + defaultMessage: 'Configure all the web crawler process using Kibana', + } + )} +

+ + + + + + + + + } + /> + ); +}; diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/self_managed_web_crawler_empty_prompt.tsx b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/self_managed_web_crawler_empty_prompt.tsx new file mode 100644 index 0000000000000..00a3af643b902 --- /dev/null +++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/self_managed_web_crawler_empty_prompt.tsx @@ -0,0 +1,222 @@ +/* + * 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'; + +import { + EuiBadge, + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiLink, + EuiPanel, + EuiText, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui'; + +import { COMING_SOON_LABEL } from '../../../shared/constants'; +import { CrawlerIcon } from '../../../shared/icons/crawler'; +import { GithubIcon } from '../../../shared/icons/github_icon'; +import { KibanaLogic } from '../../../shared/kibana'; +import { CRAWLERS_ELASTIC_MANAGED_PATH } from '../../routes'; + +export const SelfManagedWebCrawlerEmptyPrompt: React.FC = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + +

+ + {i18n.translate( + 'xpack.enterpriseSearch.webCrawlersEmpty.sourceLabel', + { defaultMessage: 'source' } + )} + + ), + docker: ( + + {i18n.translate( + 'xpack.enterpriseSearch.webCrawlersEmpty.dockerLabel', + { defaultMessage: 'Docker' } + )} + + ), + }} + /> +

+ + + + + + + + + + + + + + + +

+ {i18n.translate( + 'xpack.enterpriseSearch.webCrawlersEmpty.guideOneDescription', + { + defaultMessage: 'Set one or more domain URLs you want to crawl', + } + )} +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ {i18n.translate( + 'xpack.enterpriseSearch.webCrawlersEmpty.guideThreeDescription', + { + defaultMessage: + 'Configure your web crawler and connect it to Elasticsearch', + } + )} +

+ + + + + + + + + } + actions={ + <> + + + {i18n.translate('xpack.enterpriseSearch.webCrawlersEmpty.selfManagedButton', { + defaultMessage: 'Self-managed web crawler', + })} + + + + + + KibanaLogic.values.navigateToUrl(CRAWLERS_ELASTIC_MANAGED_PATH)} + > + {i18n.translate('xpack.enterpriseSearch.webCrawlersEmpty.elasticManagedButton', { + defaultMessage: 'Elastic managed web crawler', + })} + + + + {COMING_SOON_LABEL} + + + + + } + /> + ); +}; diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/routes.ts b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/routes.ts index 092b60bf7666f..e35688a83d4a4 100644 --- a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/routes.ts +++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/routes.ts @@ -13,6 +13,7 @@ export const ERROR_STATE_PATH = '/error_state'; export const SEARCH_INDICES_PATH = `${ROOT_PATH}search_indices`; export const CONNECTORS_PATH = `${ROOT_PATH}connectors`; export const CRAWLERS_PATH = `${ROOT_PATH}crawlers`; +export const CRAWLERS_ELASTIC_MANAGED_PATH = `${CRAWLERS_PATH}/elastic_managed`; export const SETTINGS_PATH = `${ROOT_PATH}settings`; export const NEW_INDEX_PATH = `${SEARCH_INDICES_PATH}/new_index`; diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/constants/labels.ts b/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/constants/labels.ts index dd4e13a6df278..76822c7db32f5 100644 --- a/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/constants/labels.ts +++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/constants/labels.ts @@ -31,6 +31,10 @@ export const TECH_PREVIEW_LABEL = i18n.translate('xpack.enterpriseSearch.techPre defaultMessage: 'Tech preview', }); +export const COMING_SOON_LABEL = i18n.translate('xpack.enterpriseSearch.comingSoonLabel', { + defaultMessage: 'Coming soon', +}); + export const NATIVE_LABEL = i18n.translate('xpack.enterpriseSearch.nativeLabel', { defaultMessage: 'Elastic managed', }); diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/icons/crawler.tsx b/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/icons/crawler.tsx index 73b38816e8a54..694b298c44ba5 100644 --- a/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/icons/crawler.tsx +++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/icons/crawler.tsx @@ -9,19 +9,14 @@ import React from 'react'; export const CrawlerIcon = () => { return ( - + - + ); }; diff --git a/x-pack/solutions/search/plugins/enterprise_search/tsconfig.json b/x-pack/solutions/search/plugins/enterprise_search/tsconfig.json index 99d292f28078e..37449a170c766 100644 --- a/x-pack/solutions/search/plugins/enterprise_search/tsconfig.json +++ b/x-pack/solutions/search/plugins/enterprise_search/tsconfig.json @@ -86,5 +86,6 @@ "@kbn/search-navigation", "@kbn/cell-actions", "@kbn/ui-actions-plugin", + "@kbn/search-shared-ui", ] }