[Search][ES3][Coming soon pages] Connectors and Web crawlers coming s…

…oon pages (#199284) ## Summary This PR exposes upcoming Elastic managed connectors and Elastic managed web crawlers in 2 different coming soon pages. From the connectors journey, the initial empty state will perform as a shuttler to let users choose between Self-managed and Elastic managed approaches. The self-managed CTA button will take us to the current connectors creation flow in ES3. The secondary CTA will take us to the Elastic managed coming soon page. Once users would have any connector created the initial connectors empty state will go away. But we will let users come back to the Elastic managed connector coming soon page showing a Callout on top of the connectors list. From the Web crawlers journey, the initial empty state let us choose also between Self-managed and Elastic managed web crawlers approaches. The first one will take us to the Open web crawler repo and the second CTA button will take us to the Elastic managed web crawler coming soon page. ![CleanShot 2024-11-06 at 13 48 29](https://github.com/user-attachments/assets/c4bcf6e2-cb94-42c4-8bf6-69d2bcd23bae) ### Tasks - [x] Modify current connectors empty state to become the landing to go for Self-managed or Elastic managed connectors - [x] Create the Elastic managed connectors coming soon page - [x] Create the Web crawlers empty state page - [x] Create the Elastic managed Web crawlers coming soon page - [x] Add the Web crawlers navigation entry point - [x] Add a Callout when listing existing connectors to take users to the Elastic managed coming soon page. - [x] Callout issue 1: Clicking Callout CTA button doesn't take us to that page, it looks like a React router issue. - [x] Callout issue 2: Handle the dismissible state persistency - [ ] Validate that we can capture required telemetry ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) - [ ] This will appear in the **Release Notes** and follow the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Nov 19, 2024 · d14c03e · d14c03e
1 parent 2dc1ce3
commit d14c03e
Show file tree

Hide file tree

Showing 28 changed files with 1,320 additions and 195 deletions.
diff --git a/packages/deeplinks/search/constants.ts b/packages/deeplinks/search/constants.ts
@@ -16,6 +16,7 @@ export const ENTERPRISE_SEARCH_APPSEARCH_APP_ID = 'appSearch';
 export const ENTERPRISE_SEARCH_WORKPLACESEARCH_APP_ID = 'workplaceSearch';
 export const SERVERLESS_ES_APP_ID = 'serverlessElasticsearch';
 export const SERVERLESS_ES_CONNECTORS_ID = 'serverlessConnectors';
+export const SERVERLESS_ES_WEB_CRAWLERS_ID = 'serverlessWebCrawlers';
 export const SERVERLESS_ES_SEARCH_PLAYGROUND_ID = 'searchPlayground';
 export const SERVERLESS_ES_SEARCH_INFERENCE_ENDPOINTS_ID = 'searchInferenceEndpoints';
 export const SEARCH_HOMEPAGE = 'searchHomepage';

diff --git a/packages/deeplinks/search/deep_links.ts b/packages/deeplinks/search/deep_links.ts
@@ -10,6 +10,7 @@
 import {
   SERVERLESS_ES_APP_ID,
   SERVERLESS_ES_CONNECTORS_ID,
+  SERVERLESS_ES_WEB_CRAWLERS_ID,
   ENTERPRISE_SEARCH_APP_ID,
   ENTERPRISE_SEARCH_CONTENT_APP_ID,
   ENTERPRISE_SEARCH_APPLICATIONS_APP_ID,
@@ -38,6 +39,7 @@ export type EnterpriseSearchAppsearchApp = typeof ENTERPRISE_SEARCH_APPSEARCH_AP
 export type EnterpriseSearchWorkplaceSearchApp = typeof ENTERPRISE_SEARCH_WORKPLACESEARCH_APP_ID;
 export type ServerlessSearchApp = typeof SERVERLESS_ES_APP_ID;
 export type ConnectorsId = typeof SERVERLESS_ES_CONNECTORS_ID;
+export type ServerlessWebCrawlers = typeof SERVERLESS_ES_WEB_CRAWLERS_ID;
 export type SearchPlaygroundId = typeof SERVERLESS_ES_SEARCH_PLAYGROUND_ID;
 export type SearchInferenceEndpointsId = typeof SERVERLESS_ES_SEARCH_INFERENCE_ENDPOINTS_ID;
 export type SearchHomepage = typeof SEARCH_HOMEPAGE;
@@ -68,6 +70,7 @@ export type DeepLinkId =
   | EnterpriseSearchWorkplaceSearchApp
   | ServerlessSearchApp
   | ConnectorsId
+  | ServerlessWebCrawlers
   | SearchPlaygroundId
   | SearchInferenceEndpointsId
   | SearchHomepage

diff --git a/...blic/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx b/...blic/applications/enterprise_search_content/components/connectors/crawler_empty_state.tsx
@@ -11,7 +11,6 @@ import { useValues } from 'kea';
 import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { CRAWLER } from '../../../../../common/constants';
 import { HttpLogic } from '../../../shared/http';
 import { GithubIcon } from '../../../shared/icons/github_icon';
 import { KibanaLogic } from '../../../shared/kibana';
@@ -49,7 +48,7 @@ export const CrawlerEmptyState: React.FC = () => {
               color="primary"
               fill
               iconType={GithubIcon}
-              href={CRAWLER.github_repo}
+              href={'https://github.com/elastic/crawler'}
             >
               {i18n.translate(
                 'xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel',

diff --git a/x-pack/plugins/serverless_search/common/i18n_string.ts b/x-pack/plugins/serverless_search/common/i18n_string.ts
@@ -65,6 +65,13 @@ export const CONNECTOR_LABEL: string = i18n.translate('xpack.serverlessSearch.co
   defaultMessage: 'Connector',
 });
 
+export const WEB_CRAWLERS_LABEL: string = i18n.translate(
+  'xpack.serverlessSearch.webCrawlersLabel',
+  {
+    defaultMessage: 'Web crawlers',
+  }
+);
+
 export const DELETE_CONNECTOR_LABEL = i18n.translate(
   'xpack.serverlessSearch.connectors.deleteConnectorLabel',
   {

diff --git a/.../serverless_search/public/application/components/common/decorative_horizontal_stepper.tsx b/.../serverless_search/public/application/components/common/decorative_horizontal_stepper.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 { EuiStepsHorizontal, EuiStepsHorizontalProps } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+interface DecorativeHorizontalStepperProps {
+  stepCount?: number;
+}
+
+export const DecorativeHorizontalStepper: React.FC<DecorativeHorizontalStepperProps> = ({
+  stepCount = 2,
+}) => {
+  // Generate the steps dynamically based on the stepCount prop
+  const horizontalSteps: EuiStepsHorizontalProps['steps'] = Array.from(
+    { length: stepCount },
+    (_, index) => ({
+      title: '',
+      status: 'incomplete',
+      onClick: () => {},
+    })
+  );
+
+  return (
+    /* This is a presentational component, not intended for user interaction:
+    pointer-events: none, prevents user interaction with the component.
+    inert prevents click, focus, and other interactive events, removing it from the tab order.
+    role="presentation" indicates that this component is purely decorative and not interactive for assistive technologies.
+    Together, these attributes help ensure the component is accesible. */
+    <EuiStepsHorizontal
+      css={css`
+        pointer-events: none;
+      `}
+      steps={horizontalSteps}
+      size="s"
+      role="presentation"
+      // @ts-ignore due to React 18 and TypeScript doesn't have native HTML inert attribute support yet
+      inert=""
+    />
+  );
+};
diff --git a/x-pack/plugins/serverless_search/public/application/components/connectors/connector_icon.tsx b/x-pack/plugins/serverless_search/public/application/components/connectors/connector_icon.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 { EuiToolTip, EuiIcon } from '@elastic/eui';
+
+export const ConnectorIcon: React.FC<{ name: string; serviceType: string; iconPath?: string }> = ({
+  name,
+  serviceType,
+  iconPath,
+}) => (
+  <EuiToolTip content={name}>
+    <EuiIcon size="l" title={name} id={serviceType} type={iconPath || 'defaultIcon'} />
+  </EuiToolTip>
+);
diff --git a/...search/public/application/components/connectors/elastic_managed_connector_coming_soon.tsx b/...search/public/application/components/connectors/elastic_managed_connector_coming_soon.tsx
@@ -0,0 +1,196 @@
+/*
+ * 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,
+  EuiPanel,
+  EuiIcon,
+  EuiTitle,
+  EuiText,
+  EuiBadge,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+// import { generatePath } from 'react-router-dom';
+import { SERVERLESS_ES_CONNECTORS_ID } from '@kbn/deeplinks-search/constants';
+import { useKibanaServices } from '../../hooks/use_kibana';
+import { useConnectorTypes } from '../../hooks/api/use_connector_types';
+import { useAssetBasePath } from '../../hooks/use_asset_base_path';
+
+import { BACK_LABEL } from '../../../../common/i18n_string';
+// import { BASE_CONNECTORS_PATH } from '../../constants';
+import { ConnectorIcon } from './connector_icon';
+import { DecorativeHorizontalStepper } from '../common/decorative_horizontal_stepper';
+
+export const ElasticManagedConnectorComingSoon: React.FC = () => {
+  const connectorTypes = useConnectorTypes();
+
+  const connectorExamples = connectorTypes.filter((connector) =>
+    ['Gmail', 'Sharepoint Online', 'Jira Cloud', 'Dropbox'].includes(connector.name)
+  );
+
+  const {
+    application: { navigateToApp },
+  } = useKibanaServices();
+
+  const assetBasePath = useAssetBasePath();
+  const connectorsIcon = assetBasePath + '/connectors.svg';
+  return (
+    <EuiFlexGroup alignItems="center" direction="column">
+      <EuiFlexItem>
+        <EuiPanel paddingSize="l" hasShadow={false} hasBorder>
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="center"
+            direction="column"
+            gutterSize="l"
+          >
+            <EuiFlexItem>
+              <EuiButtonEmpty
+                data-test-subj="serverlessSearchElasticManagedConnectorEmptyBackButton"
+                iconType="arrowLeft"
+                onClick={() => navigateToApp(SERVERLESS_ES_CONNECTORS_ID)}
+              >
+                {BACK_LABEL}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiIcon size="xxl" type={connectorsIcon} />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiTitle>
+                <h2>
+                  {i18n.translate('xpack.serverlessSearch.elasticManagedConnectorEmpty.title', {
+                    defaultMessage: 'Elastic managed connectors',
+                  })}
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiBadge color="accent">Coming soon</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText textAlign="center" color="subdued">
+                <p>
+                  {i18n.translate(
+                    'xpack.serverlessSearch.elasticManagedConnectorEmpty.description',
+                    {
+                      defaultMessage:
+                        "We're actively developing Elastic managed connectors, 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:",
+                    }
+                  )}
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+            <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"
+                          >
+                            {connectorExamples.map((connector, index) => (
+                              <React.Fragment key={connector.serviceType}>
+                                {index === Math.floor(connectorExamples.length / 2) && (
+                                  <EuiFlexItem grow={false}>
+                                    <EuiIcon color="primary" size="l" type="documents" />
+                                  </EuiFlexItem>
+                                )}
+                                <EuiFlexItem grow={false}>
+                                  <ConnectorIcon
+                                    name={connector.name}
+                                    serviceType={connector.serviceType}
+                                    iconPath={connector.iconPath}
+                                  />
+                                </EuiFlexItem>
+                              </React.Fragment>
+                            ))}
+                          </EuiFlexGroup>
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={false}>
+                          <EuiText>
+                            <p>
+                              {i18n.translate(
+                                'xpack.serverlessSearch.elasticManagedConnectorEmpty.guideOneDescription',
+                                {
+                                  defaultMessage:
+                                    "Choose from over 30 third-party data sources you'd like to sync",
+                                }
+                              )}
+                            </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={connectorsIcon} />
+                            </EuiFlexItem>
+                            <EuiFlexItem>
+                              <EuiIcon color="primary" size="l" type="logoElastic" />
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <EuiText>
+                            <p>
+                              {i18n.translate(
+                                'xpack.serverlessSearch.elasticManagedConnectorEmpty.guideThreeDescription',
+                                {
+                                  defaultMessage:
+                                    'Enter access and connection details for your data source and run your first sync using the Kibana UI',
+                                }
+                              )}
+                            </p>
+                          </EuiText>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiPanel>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};