[Search][Stack] Web Crawlers coming soon pages (#205718)

## Summary

This PR shows the `SearchEmptyPrompts` for the Web Crawlers section in
Stack in Stack 9.0 as we do in ES3 due to Web Crawlers will not be
available as Elastic Managed since this version. We are also leveraging
as shared code as possible consuming the `@kbn/search-shared-ui`
content.

![CleanShot 2025-01-07 at 12 08
36@2x](https://github.com/user-attachments/assets/6483fa0b-21ee-40fa-b749-3a04e0732c92)

![CleanShot 2025-01-07 at 12 09
00@2x](https://github.com/user-attachments/assets/91f3bf8f-6b33-4e7f-9e24-b7844bb60768)

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -17073,7 +17073,6 @@
     "xpack.enterpriseSearch.connectors.more.ariaLabel": "Plus d'options",
     "xpack.enterpriseSearch.connectors.newConnectorButtonLabel": "Nouveau connecteur",
     "xpack.enterpriseSearch.connectors.newConnectorsClientButtonLabel": "Nouveau connecteur autogéré",
-    "xpack.enterpriseSearch.connectors.newCrawlerButtonLabel": "Nouveau robot d'indexation",
     "xpack.enterpriseSearch.connectors.newNativeConnectorButtonLabel": "Nouveau connecteur géré par Elastic",
     "xpack.enterpriseSearch.connectors.title": "Connecteurs Elasticsearch",
     "xpack.enterpriseSearch.connectorsTable.euiSearchBar.filterConnectorsLabel": "Filtrer les connecteurs",
@@ -17998,10 +17997,6 @@
     "xpack.enterpriseSearch.crawler.startCrawlContextMenu.crawlCustomSettingsMenuLabel": "Indexation avec des paramètres personnalisés",
     "xpack.enterpriseSearch.crawler.startCrawlContextMenu.reapplyCrawlRulesMenuLabel": "Réappliquer les règles d'indexation",
     "xpack.enterpriseSearch.crawler.urlComboBox.invalidUrlErrorMessage": "Veuillez entrer une URL valide",
-    "xpack.enterpriseSearch.crawlerEmptyState.h2.createYourFirstWebLabel": "Créer votre premier robot d'indexation",
-    "xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel": "Nouveau robot d'indexation",
-    "xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel": "Code source",
-    "xpack.enterpriseSearch.crawlerEmptyState.p.discoverExtractAndIndexLabel": "Découvrir, extraire et indexer du contenu interrogeable provenant de sites web et de bases de connaissances",
     "xpack.enterpriseSearch.crawlers.title": "Robot d'indexation Elasticsearch",
     "xpack.enterpriseSearch.createConnector..breadcrumb": "Nouveau connecteur",
     "xpack.enterpriseSearch.createConnector..title": "Créer un connecteur",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -16934,7 +16934,6 @@
     "xpack.enterpriseSearch.connectors.more.ariaLabel": "その他のオプション",
     "xpack.enterpriseSearch.connectors.newConnectorButtonLabel": "新しいコネクター",
     "xpack.enterpriseSearch.connectors.newConnectorsClientButtonLabel": "新しいセルフマネージドコネクター",
-    "xpack.enterpriseSearch.connectors.newCrawlerButtonLabel": "新しいWebクローラー",
     "xpack.enterpriseSearch.connectors.newNativeConnectorButtonLabel": "新しいElasticマネージドコネクター",
     "xpack.enterpriseSearch.connectors.title": "Elasticsearchコネクター",
     "xpack.enterpriseSearch.connectorsTable.euiSearchBar.filterConnectorsLabel": "コネクターをフィルター",
@@ -17858,10 +17857,6 @@
     "xpack.enterpriseSearch.crawler.startCrawlContextMenu.crawlCustomSettingsMenuLabel": "カスタム設定でクロール",
     "xpack.enterpriseSearch.crawler.startCrawlContextMenu.reapplyCrawlRulesMenuLabel": "クローリングルールを再適用",
     "xpack.enterpriseSearch.crawler.urlComboBox.invalidUrlErrorMessage": "有効なURLを入力してください",
-    "xpack.enterpriseSearch.crawlerEmptyState.h2.createYourFirstWebLabel": "最初のWebクローラーを作成",
-    "xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel": "新しいWebクローラー",
-    "xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel": "ソースコード",
-    "xpack.enterpriseSearch.crawlerEmptyState.p.discoverExtractAndIndexLabel": "Webサイトやナレッジベースから検索可能なコンテンツを検出、抽出、インデックス化します",
     "xpack.enterpriseSearch.crawlers.title": "Elasticsearch Webクローラー",
     "xpack.enterpriseSearch.createConnector..breadcrumb": "新しいコネクター",
     "xpack.enterpriseSearch.createConnector..title": "コネクターを作成する",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -16639,7 +16639,6 @@
     "xpack.enterpriseSearch.connectors.more.ariaLabel": "更多选项",
     "xpack.enterpriseSearch.connectors.newConnectorButtonLabel": "新连接器",
     "xpack.enterpriseSearch.connectors.newConnectorsClientButtonLabel": "全新自管型连接器",
-    "xpack.enterpriseSearch.connectors.newCrawlerButtonLabel": "新网络爬虫",
     "xpack.enterpriseSearch.connectors.newNativeConnectorButtonLabel": "全新 Elastic 托管连接器",
     "xpack.enterpriseSearch.connectors.title": "Elasticsearch 连接器",
     "xpack.enterpriseSearch.connectorsTable.euiSearchBar.filterConnectorsLabel": "筛选连接器",
@@ -17558,10 +17557,6 @@
     "xpack.enterpriseSearch.crawler.startCrawlContextMenu.crawlCustomSettingsMenuLabel": "使用定制设置执行爬网",
     "xpack.enterpriseSearch.crawler.startCrawlContextMenu.reapplyCrawlRulesMenuLabel": "重新应用爬网规则",
     "xpack.enterpriseSearch.crawler.urlComboBox.invalidUrlErrorMessage": "请输入有效 URL",
-    "xpack.enterpriseSearch.crawlerEmptyState.h2.createYourFirstWebLabel": "创建您的首个网络爬虫",
-    "xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel": "新网络爬虫",
-    "xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel": "源代码",
-    "xpack.enterpriseSearch.crawlerEmptyState.p.discoverExtractAndIndexLabel": "发现、提取和索引网站和知识库中的可搜索内容",
     "xpack.enterpriseSearch.crawlers.title": "Elasticsearch 网络爬虫",
     "xpack.enterpriseSearch.createConnector..breadcrumb": "新连接器",
     "xpack.enterpriseSearch.createConnector..title": "创建连接器",

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<ConnectorsProps> = ({ isCrawler }) => {
+export const Connectors: React.FC<ConnectorsProps> = ({ 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<boolean>(false);
   const [showDefaultSettingsFlyout, setShowDefaultSettingsFlyout] = useState<boolean>(false);
@@ -95,6 +97,29 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
             : i18n.translate('xpack.enterpriseSearch.crawlers.title', {
                 defaultMessage: 'Elastic Web Crawler',
               }),
+          description: [
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="xpack.enterpriseSearch.webcrawlers.headerContent"
+                  defaultMessage="Discover extract and index searchable content from websites and knowledge bases {learnMoreLink}"
+                  values={{
+                    learnMoreLink: (
+                      <EuiLink
+                        data-test-subj="entSearchContentConnectorsLearnMoreLink"
+                        external
+                        target="_blank"
+                        href={'https://github.com/elastic/crawler'}
+                      >
+                        {LEARN_MORE_LINK}
+                      </EuiLink>
+                    ),
+                  }}
+                />
+              </p>
+            </EuiText>,
+          ],
+
           rightSideGroupProps: {
             gutterSize: 's',
             responsive: false,
@@ -199,52 +224,26 @@ export const Connectors: React.FC<ConnectorsProps> = ({ isCrawler }) => {
                     ]
                   : []),
               ]
-            : [
-                <EuiButton
-                  data-test-subj="entSearchContent-crawlers-newCrawlerButton"
-                  data-telemetry-id="entSearchContent-crawlers-newCrawlerButton"
-                  disabled={Boolean(errorConnectingMessage)}
-                  key="newCrawler"
-                  color="primary"
-                  iconType="plusInCircle"
-                  fill
-                  onClick={() => {
-                    KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH);
-                  }}
-                >
-                  {i18n.translate('xpack.enterpriseSearch.connectors.newCrawlerButtonLabel', {
-                    defaultMessage: 'New web crawler',
-                  })}
-                </EuiButton>,
-                ...(productFeatures.hasDefaultIngestPipeline
-                  ? [
-                      <EuiButton
-                        color="primary"
-                        data-test-subj="entSearchContent-connectors-defaultSettingsPopover"
-                        data-telemetry-id="entSearchContent-connectors-defaultSettingsPopover"
-                        onClick={() => setShowDefaultSettingsFlyout(true)}
-                      >
-                        {i18n.translate(
-                          'xpack.enterpriseSearch.content.searchIndices.defaultSettings',
-                          {
-                            defaultMessage: 'Default settings',
-                          }
-                        )}
-                      </EuiButton>,
-                    ]
-                  : []),
-              ],
+            : undefined,
         }}
       >
         {productFeatures.hasDefaultIngestPipeline && showDefaultSettingsFlyout && (
           <DefaultSettingsFlyout closeFlyout={() => setShowDefaultSettingsFlyout(false)} />
         )}
-        <ConnectorStats isCrawler={isCrawler} />
-        <EuiSpacer />
+        {!isCrawler && (
+          <>
+            <ConnectorStats isCrawler={isCrawler} />
+            <EuiSpacer />
+          </>
+        )}
 
         <EuiFlexGroup direction="column">
           {isEmpty && isCrawler ? (
-            <CrawlerEmptyState />
+            isCrawlerSelfManaged ? (
+              <SelfManagedWebCrawlerEmptyPrompt />
+            ) : (
+              <ElasticManagedWebCrawlerEmptyPrompt />
+            )
           ) : (
             <>
               <EuiFlexItem>

x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx

@@ -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 (
-    <EuiPanel hasBorder>
-      <EuiEmptyPrompt
-        title={
-          <h2>
-            {i18n.translate('xpack.enterpriseSearch.crawlerEmptyState.h2.createYourFirstWebLabel', {
-              defaultMessage: 'Create your first web crawler',
-            })}
-          </h2>
-        }
-        titleSize="m"
-        body={
-          <p>
-            {i18n.translate(
-              'xpack.enterpriseSearch.crawlerEmptyState.p.discoverExtractAndIndexLabel',
-              {
-                defaultMessage:
-                  'Discover extract and index searchable content from websites and knowledge bases',
-              }
-            )}
-          </p>
-        }
-        actions={
-          Boolean(errorConnectingMessage) ? (
-            <EuiButton
-              data-test-subj="entSearchContent-crawlers-emptyState-createCrawlerButton"
-              data-telemetry-id="entSearchContent-crawlers-emptyState-createCrawlerButton"
-              color="primary"
-              fill
-              iconType={GithubIcon}
-              href={'https://github.com/elastic/crawler'}
-              target="_blank"
-            >
-              {i18n.translate(
-                'xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel',
-                {
-                  defaultMessage: 'Source code',
-                }
-              )}
-            </EuiButton>
-          ) : (
-            <EuiButton
-              data-test-subj="entSearchContent-crawlers-emptyState-createCrawlerButton"
-              data-telemetry-id="entSearchContent-crawlers-emptyState-createCrawlerButton"
-              color="primary"
-              fill
-              iconType="plusInCircle"
-              onClick={() => KibanaLogic.values.navigateToUrl(NEW_CRAWLER_PATH)}
-            >
-              {i18n.translate('xpack.enterpriseSearch.crawlerEmptyState.newWebCrawlerButtonLabel', {
-                defaultMessage: 'New web crawler',
-              })}
-            </EuiButton>
-          )
-        }
-      />
-    </EuiPanel>
-  );
-};

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 = () => {
       <Route path={NEW_CRAWLER_PATH}>
         <NewSearchIndexPage type="crawler" />
       </Route>
-      <Route path={CRAWLERS_PATH}>
-        <Connectors isCrawler />
+      <Route exact path={CRAWLERS_PATH}>
+        <Connectors isCrawler isCrawlerSelfManaged />
+      </Route>
+      <Route exact path={CRAWLERS_ELASTIC_MANAGED_PATH}>
+        <Connectors isCrawler isCrawlerSelfManaged={false} />
       </Route>
     </Routes>
   );

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/web_crawlers.svg';
+import { KibanaLogic } from '../../../shared/kibana';
+import { CRAWLERS_PATH } from '../../routes';
+
+export const ElasticManagedWebCrawlerEmptyPrompt: React.FC = () => {
+  return (
+    <SearchEmptyPrompt
+      backButton={{
+        label: BACK_BUTTON_LABEL,
+        onClickBack: () => 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={
+        <EuiFlexGroup
+          alignItems="stretch"
+          justifyContent="center"
+          direction="column"
+          gutterSize="s"
+        >
+          <EuiFlexItem>
+            <EuiPanel color="subdued">
+              <EuiFlexItem grow={false}>
+                <DecorativeHorizontalStepper stepCount={2} />
+              </EuiFlexItem>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFlexGroup justifyContent="flexStart" alignItems="center" direction="column">
+                    <EuiFlexItem grow={false}>
+                      <EuiFlexGroup
+                        justifyContent="center"
+                        alignItems="center"
+                        direction="row"
+                        gutterSize="s"
+                      >
+                        <EuiFlexItem grow={false}>
+                          <EuiIcon color="primary" size="l" type="globe" />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiText>
+                        <p>
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.elasticManagedWebCrawlerEmpty.guideOneDescription',
+                            {
+                              defaultMessage: 'Set one or more domain URLs you want to crawl',
+                            }
+                          )}
+                        </p>
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFlexGroup justifyContent="flexStart" alignItems="center" direction="column">
+                    <EuiFlexItem grow={false}>
+                      <EuiFlexGroup
+                        gutterSize="s"
+                        direction="row"
+                        alignItems="center"
+                        justifyContent="center"
+                      >
+                        <EuiFlexItem>
+                          <EuiIcon color="primary" size="l" type={CrawlerIcon} />
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <EuiIcon color="primary" size="l" type="logoElastic" />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <EuiText>
+                        <p>
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.elasticManagedWebCrawlerEmpty.guideThreeDescription',
+                            {
+                              defaultMessage: 'Configure all the web crawler process using Kibana',
+                            }
+                          )}
+                        </p>
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+    />
+  );
+};

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 { GithubIcon } from '../../../shared/icons/github_icon';
+import CrawlerIcon from '../../../shared/icons/web_crawlers.svg';
+import { KibanaLogic } from '../../../shared/kibana';
+import { CRAWLERS_ELASTIC_MANAGED_PATH } from '../../routes';
+
+export const SelfManagedWebCrawlerEmptyPrompt: React.FC = () => {
+  return (
+    <SearchEmptyPrompt
+      icon={CrawlerIcon}
+      title={i18n.translate('xpack.enterpriseSearch.webCrawlersEmpty.title', {
+        defaultMessage: 'Set up a web crawler',
+      })}
+      description={i18n.translate('xpack.enterpriseSearch.webCrawlersEmpty.description', {
+        defaultMessage:
+          "To set up and deploy a web crawler you'll be working between data source, your terminal, and the Kibana UI. The high level process looks like this:",
+      })}
+      body={
+        <EuiFlexGroup
+          alignItems="stretch"
+          justifyContent="center"
+          direction="column"
+          gutterSize="s"
+        >
+          <EuiFlexItem>
+            <EuiPanel color="subdued">
+              <EuiFlexItem grow={false}>
+                <DecorativeHorizontalStepper stepCount={3} />
+              </EuiFlexItem>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFlexGroup justifyContent="flexStart" alignItems="center" direction="column">
+                    <EuiFlexGroup
+                      gutterSize="s"
+                      direction="row"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      <EuiFlexItem grow={false}>
+                        <EuiIcon color="primary" size="l" type={CrawlerIcon} />
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <EuiIcon size="m" type="sortRight" />
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <EuiIcon color="primary" size="l" type="launch" />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                    <EuiFlexItem>
+                      <EuiText>
+                        <p>
+                          <FormattedMessage
+                            id="xpack.enterpriseSearch.webCrawlersEmpty.guideTwoDescription"
+                            defaultMessage="Deploy web crawler code on your own infrastructure by running from {source}, or using {docker}"
+                            values={{
+                              source: (
+                                <EuiLink
+                                  target="_blank"
+                                  data-test-subj="enterpriseSearchEmptyConnectorsPromptSourceLink"
+                                  href={'https://github.com/elastic/crawler'}
+                                >
+                                  {i18n.translate(
+                                    'xpack.enterpriseSearch.webCrawlersEmpty.sourceLabel',
+                                    { defaultMessage: 'source' }
+                                  )}
+                                </EuiLink>
+                              ),
+                              docker: (
+                                <EuiLink
+                                  target="_blank"
+                                  data-test-subj="enterpriseSearchEmptyConnectorsPromptDockerLink"
+                                  href={
+                                    'https://github.com/elastic/crawler?tab=readme-ov-file#running-open-crawler-with-docker'
+                                  }
+                                >
+                                  {i18n.translate(
+                                    'xpack.enterpriseSearch.webCrawlersEmpty.dockerLabel',
+                                    { defaultMessage: 'Docker' }
+                                  )}
+                                </EuiLink>
+                              ),
+                            }}
+                          />
+                        </p>
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFlexGroup justifyContent="flexStart" alignItems="center" direction="column">
+                    <EuiFlexItem grow={false}>
+                      <EuiFlexGroup
+                        justifyContent="center"
+                        alignItems="center"
+                        direction="row"
+                        gutterSize="s"
+                      >
+                        <EuiFlexItem grow={false}>
+                          <EuiIcon color="primary" size="l" type="globe" />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiText>
+                        <p>
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.webCrawlersEmpty.guideOneDescription',
+                            {
+                              defaultMessage: 'Set one or more domain URLs you want to crawl',
+                            }
+                          )}
+                        </p>
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+
+                <EuiFlexItem>
+                  <EuiFlexGroup justifyContent="flexStart" alignItems="center" direction="column">
+                    <EuiFlexItem grow={false}>
+                      <EuiFlexGroup
+                        gutterSize="s"
+                        direction="row"
+                        alignItems="center"
+                        justifyContent="center"
+                      >
+                        <EuiFlexItem>
+                          <EuiIcon color="primary" size="l" type="globe" />
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <EuiIcon size="m" type="sortRight" />
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <EuiIcon color="primary" size="l" type={CrawlerIcon} />
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <EuiIcon size="m" type="sortRight" />
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <EuiIcon color="primary" size="l" type="logoElasticsearch" />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <EuiText>
+                        <p>
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.webCrawlersEmpty.guideThreeDescription',
+                            {
+                              defaultMessage:
+                                'Configure your web crawler and connect it to Elasticsearch',
+                            }
+                          )}
+                        </p>
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      actions={
+        <>
+          <EuiFlexItem>
+            <EuiButton
+              data-test-subj="enterpriseSearchEmptyConnectorsPromptCreateSelfManagedConnectorButton"
+              fill
+              iconType={GithubIcon}
+              href={'https://github.com/elastic/crawler'}
+              target="_blank"
+            >
+              {i18n.translate('xpack.enterpriseSearch.webCrawlersEmpty.selfManagedButton', {
+                defaultMessage: 'Self-managed web crawler',
+              })}
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column" gutterSize="s" alignItems="center">
+              <EuiFlexItem>
+                <EuiButton
+                  data-test-subj="enterpriseSearchEmptyConnectorsPromptCreateElasticManagedConnectorButton"
+                  onClick={() => KibanaLogic.values.navigateToUrl(CRAWLERS_ELASTIC_MANAGED_PATH)}
+                >
+                  {i18n.translate('xpack.enterpriseSearch.webCrawlersEmpty.elasticManagedButton', {
+                    defaultMessage: 'Elastic managed web crawler',
+                  })}
+                </EuiButton>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiBadge color="accent">{COMING_SOON_LABEL}</EuiBadge>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </>
+      }
+    />
+  );
+};

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`;

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',
 });

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 (
-    <svg
-      width="17"
-      height="16"
-      viewBox="0 0 17 16"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
       <path
+        fill="#343741"
         fillRule="evenodd"
+        d="M11.25 1.933v-.75L12 .75l.75.433v.75l7.593 4.384.65-.375.75.433v.866l-.65.375v8.768l.65.375v.866l-.75.433-.65-.375-7.593 4.384v.75l-.75.433-.75-.433v-.75l-7.593-4.384-.65.375-.75-.433v-.866l.65-.375V7.616l-.65-.375v-.866l.75-.433.65.375 7.593-4.384Zm1.5 6 2.397 1.384 1.098-.634-3.495-2.018v1.268Zm3.147 2.683v2.768l1.098.634V9.982l-1.098.634Zm-.75 4.067-2.397 1.384v1.268l3.495-2.018-1.098-.634Zm-3.897 1.384-2.397-1.384-1.098.634 3.495 2.018v-1.268Zm-3.147-2.683v-2.768l-1.098-.634v4.036l1.098-.634Zm.75-4.067 2.397-1.384V6.665L7.755 8.683l1.098.634Zm8.892-1.5L12.75 4.933V3.665l6.093 3.518-1.098.634Zm.75 7.067V9.116l1.098-.634v7.036l-1.098-.634Zm-5.745 4.183 4.995-2.884 1.098.634-6.093 3.518v-1.268Zm-6.495-2.884 4.995 2.884v1.268l-6.093-3.518 1.098-.634Zm-.75-7.067v5.768l-1.098.634V8.482l1.098.634Zm5.745-4.183L6.255 7.817l-1.098-.634 6.093-3.518v1.268Zm-1.647 5.683L12 9.232l2.397 1.384v2.768L12 14.768l-2.397-1.384v-2.768Z"
         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" />
+      <path fill="#007871" d="m12 10.5 1.299.75v1.5L12 13.5l-1.299-.75v-1.5L12 10.5Z" />
     </svg>
   );
 };

x-pack/solutions/search/plugins/enterprise_search/public/applications/shared/icons/web_crawlers.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#343741" fill-rule="evenodd" d="M11.25 1.933v-.75L12 .75l.75.433v.75l7.593 4.384.65-.375.75.433v.866l-.65.375v8.768l.65.375v.866l-.75.433-.65-.375-7.593 4.384v.75l-.75.433-.75-.433v-.75l-7.593-4.384-.65.375-.75-.433v-.866l.65-.375V7.616l-.65-.375v-.866l.75-.433.65.375 7.593-4.384Zm1.5 6 2.397 1.384 1.098-.634-3.495-2.018v1.268Zm3.147 2.683v2.768l1.098.634V9.982l-1.098.634Zm-.75 4.067-2.397 1.384v1.268l3.495-2.018-1.098-.634Zm-3.897 1.384-2.397-1.384-1.098.634 3.495 2.018v-1.268Zm-3.147-2.683v-2.768l-1.098-.634v4.036l1.098-.634Zm.75-4.067 2.397-1.384V6.665L7.755 8.683l1.098.634Zm8.892-1.5L12.75 4.933V3.665l6.093 3.518-1.098.634Zm.75 7.067V9.116l1.098-.634v7.036l-1.098-.634Zm-5.745 4.183 4.995-2.884 1.098.634-6.093 3.518v-1.268Zm-6.495-2.884 4.995 2.884v1.268l-6.093-3.518 1.098-.634Zm-.75-7.067v5.768l-1.098.634V8.482l1.098.634Zm5.745-4.183L6.255 7.817l-1.098-.634 6.093-3.518v1.268Zm-1.647 5.683L12 9.232l2.397 1.384v2.768L12 14.768l-2.397-1.384v-2.768Z" clip-rule="evenodd"/>
+  <path fill="#007871" d="m12 10.5 1.299.75v1.5L12 13.5l-1.299-.75v-1.5L12 10.5Z"/>
+</svg>

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",
   ]
 }