[8.8] [Enterprise Search] Text context improvements for the new index pages (#157290) (#157709)

# Backport This will backport the following commits from `main` to `8.8`: - [[Enterprise Search] Text context improvements for the new index pages (#157290)](https://github.com/elastic/kibana/pull/157290)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
2025-04-23 01:13:23 -04:00 · 2023-05-15 15:47:43 +02:00 · 2023-05-15 15:47:43 +02:00 · ecb9826cee
commit ecb9826cee
parent 33a5ba67c2
23 changed files with 347 additions and 88 deletions
--- a/packages/kbn-doc-links/src/get_doc_links.ts
+++ b/packages/kbn-doc-links/src/get_doc_links.ts
@ -132,12 +132,14 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
      configuration: `${ENTERPRISE_SEARCH_DOCS}configuration.html`,
      connectors: `${ENTERPRISE_SEARCH_DOCS}connectors.html`,
      connectorsAzureBlobStorage: `${ENTERPRISE_SEARCH_DOCS}connectors-azure-blob.html`,
+      connectorsClients: `${ENTERPRISE_SEARCH_DOCS}connectors.html#connectors-build`,
      connectorsConfluence: `${ENTERPRISE_SEARCH_DOCS}connectors-confluence.html`,
      connectorsGoogleCloudStorage: `${ENTERPRISE_SEARCH_DOCS}connectors-google-cloud.html`,
      connectorsJira: `${ENTERPRISE_SEARCH_DOCS}connectors-jira.html`,
+      connectorsMicrosoftSQL: `${ENTERPRISE_SEARCH_DOCS}connectors-ms-sql.html`,
      connectorsMongoDB: `${ENTERPRISE_SEARCH_DOCS}connectors-mongodb.html`,
      connectorsMySQL: `${ENTERPRISE_SEARCH_DOCS}connectors-mysql.html`,
-      connectorsMicrosoftSQL: `${ENTERPRISE_SEARCH_DOCS}connectors-ms-sql.html`,
+      connectorsNative: `${ENTERPRISE_SEARCH_DOCS}connectors.html#connectors-native`,
      connectorsNetworkDrive: `${ENTERPRISE_SEARCH_DOCS}connectors-network-drive.html`,
      connectorsOracle: `${ENTERPRISE_SEARCH_DOCS}connectors-oracle.html`,
      connectorsPostgreSQL: `${ENTERPRISE_SEARCH_DOCS}connectors-postgresql.html`,
@ -151,6 +153,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
      documentLevelSecurity: `${ELASTICSEARCH_DOCS}document-level-security.html`,
      elser: `${MACHINE_LEARNING_DOCS}ml-nlp-elser.html`,
      engines: `${ENTERPRISE_SEARCH_DOCS}engines.html`,
+      indexApi: `${ELASTICSEARCH_DOCS}docs-index_.html`,
      ingestionApis: `${ENTERPRISE_SEARCH_DOCS}ingestion-apis.html`,
      ingestPipelines: `${ENTERPRISE_SEARCH_DOCS}ingest-pipelines.html`,
      languageAnalyzers: `${ELASTICSEARCH_DOCS}analysis-lang-analyzer.html`,
--- a/packages/kbn-doc-links/src/types.ts
+++ b/packages/kbn-doc-links/src/types.ts
@ -117,12 +117,14 @@ export interface DocLinks {
    readonly configuration: string;
    readonly connectors: string;
    readonly connectorsAzureBlobStorage: string;
+    readonly connectorsClients: string;
    readonly connectorsConfluence: string;
    readonly connectorsGoogleCloudStorage: string;
    readonly connectorsJira: string;
    readonly connectorsMicrosoftSQL: string;
    readonly connectorsMongoDB: string;
    readonly connectorsMySQL: string;
+    readonly connectorsNative: string;
    readonly connectorsNetworkDrive: string;
    readonly connectorsOracle: string;
    readonly connectorsPostgreSQL: string;
@ -136,6 +138,7 @@ export interface DocLinks {
    readonly documentLevelSecurity: string;
    readonly elser: string;
    readonly engines: string;
+    readonly indexApi: string;
    readonly ingestionApis: string;
    readonly ingestPipelines: string;
    readonly languageAnalyzers: string;
--- a/x-pack/plugins/enterprise_search/common/connectors/connectors.ts
+++ b/x-pack/plugins/enterprise_search/common/connectors/connectors.ts
@ -54,7 +54,7 @@ export const CONNECTOR_DEFINITIONS: ConnectorServerSideDefinition[] = [
    isNative: true,
    keywords: ['postgresql', 'sql', 'database', 'connector'],
    name: i18n.translate('xpack.enterpriseSearch.content.nativeConnectors.postgresql.name', {
-      defaultMessage: 'Postgresql',
+      defaultMessage: 'PostgreSQL',
    }),
    serviceType: 'postgresql',
  },
--- 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
@ -24,7 +24,7 @@ import {
 import { AddConnectorApiLogic } from '../../../api/connector/add_connector_api_logic';

 import { FetchCloudHealthApiLogic } from '../../../api/stats/fetch_cloud_health_api_logic';
-import { NATIVE_CONNECTORS } from '../../search_index/connector/constants';
+import { BETA_CONNECTORS, NATIVE_CONNECTORS } from '../../search_index/connector/constants';
 import { NewSearchIndexLogic } from '../new_search_index_logic';
 import { NewSearchIndexTemplate } from '../new_search_index_template';

@ -48,6 +48,9 @@ export const MethodConnector: React.FC<MethodConnectorProps> = ({ serviceType })
  const isNative =
    Boolean(NATIVE_CONNECTORS.find((connector) => connector.serviceType === serviceType)) &&
    (isCloud || hasPlatinumLicense);
+  const isBeta = Boolean(
+    BETA_CONNECTORS.find((connector) => connector.serviceType === serviceType)
+  );

  const isGated = isNative && !isCloud && !hasPlatinumLicense;

@ -79,6 +82,7 @@ export const MethodConnector: React.FC<MethodConnectorProps> = ({ serviceType })
            makeRequest({ indexName: name, isNative, language: lang, serviceType })
          }
          buttonLoading={status === Status.LOADING}
+          isBeta={isBeta}
        />

        {isModalVisible && (
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_index.tsx
@ -52,7 +52,7 @@ export const NewIndex: React.FC = () => {
      pageHeader={{
        description: i18n.translate('xpack.enterpriseSearch.content.newIndex.pageDescription', {
          defaultMessage:
-            'Create a search optimized Elasticsearch index by selecting an ingestion method',
+            'Create a search optimized Elasticsearch index to store your content. Start by selecting an ingestion method.',
        }),
        pageTitle: i18n.translate('xpack.enterpriseSearch.content.newIndex.pageTitle', {
          defaultMessage: 'Select an ingestion method',
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_index_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_index_card.tsx
@ -34,7 +34,8 @@ const METHOD_CARD_OPTIONS: Record<INGESTION_METHOD_IDS, MethodCardOptions> = {
    description: i18n.translate(
      'xpack.enterpriseSearch.content.newIndex.methodCard.crawler.description',
      {
-        defaultMessage: 'Discover, extract, index, and sync all of your website content',
+        defaultMessage:
+          'Discover, extract, and index searchable content from websites and knowledge bases',
      }
    ),
    footer: {
@ -44,6 +45,12 @@ const METHOD_CARD_OPTIONS: Record<INGESTION_METHOD_IDS, MethodCardOptions> = {
          defaultMessage: 'Use a web crawler',
        }
      ),
+      label: i18n.translate(
+        'xpack.enterpriseSearch.content.newIndex.methodCard.crawler.nocodeLabel',
+        {
+          defaultMessage: 'No code',
+        }
+      ),
    },
    icon: getIngestionMethodIconType(INGESTION_METHOD_IDS.CRAWLER),
    title: i18n.translate('xpack.enterpriseSearch.content.newIndex.methodCard.crawler.title', {
@ -55,7 +62,7 @@ const METHOD_CARD_OPTIONS: Record<INGESTION_METHOD_IDS, MethodCardOptions> = {
      'xpack.enterpriseSearch.content.newIndex.methodCard.connector.description',
      {
        defaultMessage:
-          'Use the connector framework to quickly build connectors for custom data sources',
+          'Extract, transform, index and sync data from a data source via native or customized connectors',
      }
    ),
    footer: {
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_page.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_page.tsx
@ -46,7 +46,7 @@ function getTitle(method: string, serviceType: string): string {
    }
    case INGESTION_METHOD_IDS.CRAWLER:
      return i18n.translate('xpack.enterpriseSearch.content.new_index.crawlerTitle', {
-        defaultMessage: 'New web crawler search index',
+        defaultMessage: 'Web crawler search index',
      });
    default:
      return i18n.translate('xpack.enterpriseSearch.content.new_index.genericTitle', {
@ -55,32 +55,26 @@ function getTitle(method: string, serviceType: string): string {
  }
 }

-function getDescription(method: string, serviceType: string): string {
+function getDescription(method: string): string {
  switch (method) {
    case INGESTION_METHOD_IDS.API:
      return i18n.translate('xpack.enterpriseSearch.content.new_index.apiDescription', {
-        defaultMessage: 'A search index stores your data.',
+        defaultMessage:
+          'Use the API to programatically add documents to an Elasticsearch index. Start by creating your index.',
      });
    case INGESTION_METHOD_IDS.CONNECTOR: {
-      const connector =
-        Boolean(serviceType) && CONNECTORS.find((item) => item.serviceType === serviceType);
-      return connector
-        ? i18n.translate(
-            'xpack.enterpriseSearch.content.new_index.connectorDescriptionWithServiceType',
-            {
-              defaultMessage: 'A search index stores the data for your {name} connector.',
-              values: {
-                name: connector.name,
-              },
-            }
-          )
-        : i18n.translate('xpack.enterpriseSearch.content.new_index.connectorDescription', {
-            defaultMessage: 'A search index stores the data for your connector.',
-          });
+      return i18n.translate(
+        'xpack.enterpriseSearch.content.new_index.connectorDescriptionWithServiceType',
+        {
+          defaultMessage:
+            'Use a connector to sync, extract, transform and index data from your data source. Connectors are Elastic integrations that write directly to Elasticsearch indices.',
+        }
+      );
    }
    case INGESTION_METHOD_IDS.CRAWLER:
      return i18n.translate('xpack.enterpriseSearch.content.new_index.crawlerDescription', {
-        defaultMessage: 'A search index stores the data for your web crawler.',
+        defaultMessage:
+          'Use the web crawler to programmatically discover, extract, and index searchable content from websites and knowledge bases.',
      });
    default:
      return i18n.translate('xpack.enterpriseSearch.content.new_index.defaultDescription', {
@ -103,7 +97,7 @@ export const NewSearchIndexPage: React.FC = () => {
      pageViewTelemetry="New Index"
      isLoading={false}
      pageHeader={{
-        description: getDescription(type, serviceType),
+        description: getDescription(type),
        pageTitle: (
          <EuiFlexGroup>
            <EuiFlexItem grow={false}>
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx
@ -20,12 +20,16 @@ import {
  EuiSelect,
  EuiSpacer,
  EuiText,
+  EuiTitle,
 } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';

 import { INGESTION_METHOD_IDS } from '../../../../../common/constants';

+import { BetaConnectorCallout } from '../../../shared/beta/beta_connector_callout';
+
 import { BACK_BUTTON_LABEL } from '../../../shared/constants';
 import { docLinks } from '../../../shared/doc_links';

@ -38,6 +42,7 @@ export interface Props {
  disabled?: boolean;
  docsUrl?: string;
  error?: string | React.ReactNode;
+  isBeta?: boolean;
  onNameChange?(name: string): void;
  onSubmit(name: string, language: LanguageForOptimization): void;
  type: string;
@ -50,6 +55,7 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
  onNameChange,
  onSubmit,
  type,
+  isBeta,
 }) => {
  const {
    fullIndexName,
@ -111,6 +117,45 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
        }}
      >
        <EuiFlexGroup direction="column">
+          {isBeta ? (
+            <EuiFlexItem>
+              <BetaConnectorCallout />
+            </EuiFlexItem>
+          ) : null}
+          <EuiFlexItem>
+            <EuiTitle size="s">
+              <h3>
+                <FormattedMessage
+                  id="xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.formTitle"
+                  defaultMessage="Create an Elasticsearch index"
+                />
+              </h3>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText size="m">
+              <p>
+                <FormattedMessage
+                  id="xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.formDescription"
+                  defaultMessage="This index will hold your data source content, and is optimized with default field
+                mappings for relevant search experiences. Give your index a unique name and
+                optionally set a default {language_analyzer} for the index."
+                  values={{
+                    language_analyzer: (
+                      <EuiLink target="_blank" href={docLinks.languageAnalyzers}>
+                        {i18n.translate(
+                          'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.formDescription.linkText',
+                          {
+                            defaultMessage: 'language analyzer',
+                          }
+                        )}
+                      </EuiLink>
+                    ),
+                  }}
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
          <EuiFlexItem grow>
            <EuiFlexGroup>
              <EuiFlexItem grow>
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/connector_checkable.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/connector_checkable.scss
@ -0,0 +1,3 @@
+.connectorCheckable {
+  flex-grow: 1;
+}
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/connector_checkable.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/connector_checkable.tsx
@ -21,7 +21,9 @@ import {

 import { i18n } from '@kbn/i18n';

-import { BETA_LABEL } from '../../../../shared/constants';
+import { BETA_LABEL, NATIVE_LABEL } from '../../../../shared/constants';
+
+import './connector_checkable.scss';

 export type ConnectorCheckableProps = Omit<
  EuiCheckableCardProps,
@ -33,6 +35,7 @@ export type ConnectorCheckableProps = Omit<
  isTechPreview: boolean;
  name: string;
  serviceType: string;
+  showNativeBadge: boolean;
 };

 export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
@ -40,6 +43,7 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
  icon,
  isBeta,
  isTechPreview,
+  showNativeBadge,
  name,
  serviceType,
  ...props
@ -51,7 +55,7 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
      className="connectorCheckable"
      data-telemetry-id={`entSearchContent-connector-selectConnector-${serviceType}-select`}
      label={
-        <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
          {icon && (
            <EuiFlexItem grow={false}>
              <EuiIcon type={icon} />
@ -67,7 +71,7 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
      name={name}
      value={serviceType}
    >
-      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
+      <EuiFlexGroup direction="column" gutterSize="xs">
        {documentationUrl && (
          <EuiFlexItem grow={false}>
            <EuiLink target="_blank" href={documentationUrl}>
@ -80,27 +84,43 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
            </EuiLink>
          </EuiFlexItem>
        )}
-        {isBeta && (
-          <EuiFlexItem grow={false}>
-            <EuiBadge color="hollow" iconType="beaker">
-              <EuiText size="xs">{BETA_LABEL}</EuiText>
-            </EuiBadge>
-          </EuiFlexItem>
-        )}
-        {isTechPreview && (
-          <EuiFlexItem grow={false}>
-            <EuiBadge color="hollow" iconType="beaker">
-              <EuiText size="xs">
-                {i18n.translate(
-                  'xpack.enterpriseSearch.content.indices.selectConnector.connectorCheckable.techPreviewLabel',
-                  {
-                    defaultMessage: 'Tech preview',
-                  }
-                )}
-              </EuiText>
-            </EuiBadge>
-          </EuiFlexItem>
-        )}
+        <EuiFlexItem>
+          <EuiFlexGroup
+            direction="row"
+            gutterSize="s"
+            justifyContent="flexStart"
+            responsive={false}
+          >
+            {showNativeBadge && (
+              <EuiFlexItem grow={false}>
+                <EuiBadge color="hollow">
+                  <EuiText size="xs">{NATIVE_LABEL}</EuiText>
+                </EuiBadge>
+              </EuiFlexItem>
+            )}
+            {isBeta && (
+              <EuiFlexItem grow={false}>
+                <EuiBadge color="hollow">
+                  <EuiText size="xs">{BETA_LABEL}</EuiText>
+                </EuiBadge>
+              </EuiFlexItem>
+            )}
+            {isTechPreview && (
+              <EuiFlexItem grow={false}>
+                <EuiBadge color="hollow" iconType="beaker">
+                  <EuiText size="xs">
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.content.indices.selectConnector.connectorCheckable.techPreviewLabel',
+                      {
+                        defaultMessage: 'Tech preview',
+                      }
+                    )}
+                  </EuiText>
+                </EuiBadge>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
      </EuiFlexGroup>
    </EuiCheckableCard>
  );
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/select_connector.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/select_connector.tsx
@ -9,25 +9,35 @@ import React, { useState } from 'react';

 import { useLocation } from 'react-router-dom';

+import { useValues } from 'kea';
+
 import {
  EuiButton,
+  EuiCallOut,
  EuiFlexGrid,
  EuiFlexGroup,
  EuiFlexItem,
  EuiForm,
  EuiFormFieldset,
+  EuiLink,
  EuiSpacer,
-  EuiText,
 } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';

 import { INGESTION_METHOD_IDS } from '../../../../../../common/constants';

-import { BACK_BUTTON_LABEL, CONTINUE_BUTTON_LABEL } from '../../../../shared/constants';
+import {
+  BACK_BUTTON_LABEL,
+  CONTINUE_BUTTON_LABEL,
+  LEARN_MORE_LINK,
+} from '../../../../shared/constants';
+import { docLinks } from '../../../../shared/doc_links';
 import { generateEncodedPath } from '../../../../shared/encode_path_params';

 import { KibanaLogic } from '../../../../shared/kibana';
+import { LicensingLogic } from '../../../../shared/licensing';
 import { parseQueryParams } from '../../../../shared/query_params';

 import { NEW_INDEX_METHOD_PATH, NEW_INDEX_PATH } from '../../../routes';
@ -45,6 +55,10 @@ export const SelectConnector: React.FC = () => {
  const [selectedConnector, setSelectedConnector] = useState<string | null>(
    Array.isArray(serviceType) ? serviceType[0] : serviceType ?? null
  );
+  const { isCloud } = useValues(KibanaLogic);
+  const { hasPlatinumLicense } = useValues(LicensingLogic);
+
+  const hasNativeAccess = isCloud || hasPlatinumLicense;

  return (
    <EnterpriseSearchContentPageTemplate
@ -55,7 +69,7 @@ export const SelectConnector: React.FC = () => {
        description: i18n.translate(
          'xpack.enterpriseSearch.content.indices.selectConnector.description',
          {
-            defaultMessage: 'A connector will sync data from a data source.',
+            defaultMessage: "Choose which third-party data source you'd like to sync to Elastic.",
          }
        ),
        pageTitle: i18n.translate('xpack.enterpriseSearch.content.indices.selectConnector.title', {
@ -77,20 +91,69 @@ export const SelectConnector: React.FC = () => {
        <EuiFormFieldset
          legend={{
            children: (
-              <EuiText color="subdued" size="s">
-                <p />
-              </EuiText>
+              <EuiCallOut
+                size="m"
+                title={i18n.translate(
+                  'xpack.enterpriseSearch.content.indices.selectConnector.callout.title',
+                  { defaultMessage: 'Elastic connectors' }
+                )}
+                iconType="iInCircle"
+              >
+                <p>
+                  <FormattedMessage
+                    id="xpack.enterpriseSearch.content.indices.selectConnector.description.textcloud"
+                    defaultMessage="{native} are available directly within Elastic Cloud deployments. No additional infrastructure is required. Self-managed deployments must deploy the connector service to run native connectors. {learnMore}"
+                    values={{
+                      learnMore: (
+                        <EuiLink target="_blank" href={docLinks.connectorsNative}>
+                          {LEARN_MORE_LINK}
+                        </EuiLink>
+                      ),
+                      native: (
+                        <b>
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.content.indices.selectConnector.callout.description.native',
+                            { defaultMessage: 'Native connectors' }
+                          )}
+                        </b>
+                      ),
+                    }}
+                  />
+                  <br />
+                  <br />
+                  <FormattedMessage
+                    id="xpack.enterpriseSearch.content.indices.selectConnector.description.selfManaged.text"
+                    defaultMessage="For advanced use cases, deploy {connectorsClient} on your own infrastructure. Customize existing connectors, or build your own using our connector framework. {learnMore}"
+                    values={{
+                      connectorsClient: (
+                        <b>
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.content.indices.selectConnector.callout.description.connectorsClient',
+                            { defaultMessage: 'connector clients' }
+                          )}
+                        </b>
+                      ),
+                      learnMore: (
+                        <EuiLink target="_blank" href={docLinks.connectorsClients}>
+                          {LEARN_MORE_LINK}
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </p>
+              </EuiCallOut>
            ),
          }}
        >
          <EuiSpacer size="s" />
          <EuiFlexGrid columns={3}>
            {CONNECTORS.map((connector) => (
-              <EuiFlexItem key={connector.serviceType}>
+              <EuiFlexItem key={connector.serviceType} grow>
                <ConnectorCheckable
                  icon={connector.icon}
                  isBeta={connector.isBeta}
                  isTechPreview={Boolean(connector.isTechPreview)}
+                  showNativeBadge={connector.isNative && hasNativeAccess}
                  name={connector.name}
                  serviceType={connector.serviceType}
                  onChange={() => {
--- 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
@ -27,6 +27,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';

 import { ConnectorStatus } from '../../../../../../common/types/connectors';
+import { BetaConnectorCallout } from '../../../../shared/beta/beta_connector_callout';
 import { docLinks } from '../../../../shared/doc_links';
 import { generateEncodedPath } from '../../../../shared/encode_path_params';
 import { EuiButtonTo, EuiLinkTo } from '../../../../shared/react_router_helpers';
@ -43,7 +44,7 @@ import { SearchIndexTabId } from '../search_index';
 import { ApiKeyConfig } from './api_key_configuration';
 import { ConnectorConfigurationConfig } from './connector_configuration_config';
 import { ConnectorNameAndDescription } from './connector_name_and_description/connector_name_and_description';
-import { CONNECTORS } from './constants';
+import { BETA_CONNECTORS, CONNECTORS } from './constants';
 import { NativeConnectorConfiguration } from './native_connector_configuration/native_connector_configuration';

 export const ConnectorConfiguration: React.FC = () => {
@ -64,6 +65,13 @@ export const ConnectorConfiguration: React.FC = () => {
    ({ serviceType }) => serviceType === index.connector.service_type
  )?.docsUrl;

+  // TODO service_type === "" is considered unknown/custom connector multipleplaces replace all of them with a better solution
+  const isBeta =
+    !index.connector.service_type ||
+    Boolean(
+      BETA_CONNECTORS.find(({ serviceType }) => serviceType === index.connector.service_type)
+    );
+
  return (
    <>
      <EuiSpacer />
@ -377,6 +385,11 @@ export const ConnectorConfiguration: React.FC = () => {
                </EuiFlexGroup>
              </EuiPanel>
            </EuiFlexItem>
+            {isBeta ? (
+              <EuiFlexItem>
+                <BetaConnectorCallout />
+              </EuiFlexItem>
+            ) : null}
          </EuiFlexGroup>
        </EuiFlexItem>
      </EuiFlexGroup>
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/constants.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/constants.ts
@ -104,3 +104,5 @@ export const CONNECTORS = CONNECTOR_DEFINITIONS.map((connector) => ({
 export const CUSTOM_CONNECTORS = CONNECTORS.filter(({ isNative }) => !isNative);

 export const NATIVE_CONNECTORS = CONNECTORS.filter(({ isNative }) => isNative);
+
+export const BETA_CONNECTORS = CONNECTORS.filter(({ isBeta }) => isBeta);
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/native_connector_configuration/native_connector_configuration.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/native_connector_configuration/native_connector_configuration.tsx
@ -23,6 +23,7 @@ import {

 import { i18n } from '@kbn/i18n';

+import { BetaConnectorCallout } from '../../../../../shared/beta/beta_connector_callout';
 import { docLinks } from '../../../../../shared/doc_links';
 import { CONNECTOR_ICONS } from '../../../../../shared/icons/connector_icons';

@ -30,7 +31,7 @@ import { hasConfiguredConfiguration } from '../../../../utils/has_configured_con
 import { isConnectorIndex } from '../../../../utils/indices';
 import { IndexViewLogic } from '../../index_view_logic';
 import { ConnectorNameAndDescription } from '../connector_name_and_description/connector_name_and_description';
-import { NATIVE_CONNECTORS } from '../constants';
+import { BETA_CONNECTORS, NATIVE_CONNECTORS } from '../constants';

 import { ConvertConnector } from './convert_connector';
 import { NativeConnectorAdvancedConfiguration } from './native_connector_advanced_configuration';
@ -65,6 +66,13 @@ export const NativeConnectorConfiguration: React.FC = () => {
  const hasResearched = hasDescription || hasConfigured || hasConfiguredAdvanced;
  const icon = nativeConnector.icon;

+  // TODO service_type === "" is considered unknown/custom connector multipleplaces replace all of them with a better solution
+  const isBeta =
+    !index.connector.service_type ||
+    Boolean(
+      BETA_CONNECTORS.find(({ serviceType }) => serviceType === index.connector.service_type)
+    );
+
  return (
    <>
      <EuiSpacer />
@ -217,6 +225,13 @@ export const NativeConnectorConfiguration: React.FC = () => {
                <ConvertConnector />
              </EuiPanel>
            </EuiFlexItem>
+            {isBeta ? (
+              <EuiFlexItem grow={false}>
+                <EuiPanel hasBorder hasShadow={false}>
+                  <BetaConnectorCallout />
+                </EuiPanel>
+              </EuiFlexItem>
+            ) : null}
          </EuiFlexGroup>
        </EuiFlexItem>
      </EuiFlexGroup>
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/domain_management/empty_state_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/domain_management/empty_state_panel.tsx
@ -41,6 +41,18 @@ export const EmptyStatePanel: React.FC = () => {
          })}
        </h2>
      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText size="s">
+        <p>
+          {i18n.translate(
+            'xpack.enterpriseSearch.crawler.domainManagement.emptyState.description',
+            {
+              defaultMessage:
+                'Configure the domains you’d like to crawl, and when ready trigger your first crawl.',
+            }
+          )}
+        </p>
+      </EuiText>
      <EuiSpacer size="l" />
      {events.length > 0 ? (
        <>
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/generate_api_key_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/generate_api_key_panel.tsx
@ -13,14 +13,17 @@ import {
  EuiEmptyPrompt,
  EuiFlexGroup,
  EuiFlexItem,
+  EuiLink,
  EuiPanel,
-  EuiSpacer,
  EuiSwitch,
+  EuiText,
  EuiTitle,
 } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';

+import { docLinks } from '../../../shared/doc_links';
 import { DOCUMENTS_API_JSON_EXAMPLE } from '../new_index/constants';

 import { SettingsLogic } from '../settings/settings_logic';
@ -70,27 +73,48 @@ export const GenerateApiKeyPanel: React.FC = () => {
            ) : (
              <EuiFlexGroup direction="column">
                <EuiFlexItem>
-                  <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+                  <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
                    <EuiFlexItem>
-                      <EuiTitle size="s">
-                        <h2>
-                          {i18n.translate(
-                            'xpack.enterpriseSearch.content.overview.documentExample.title',
-                            { defaultMessage: 'Adding documents to your index' }
-                          )}
-                        </h2>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiSwitch
-                        data-telemetry-id={`entSearchContent-${ingestionMethod}-overview-generateApiKey-optimizedRequest`}
-                        onChange={(event) => setOptimizedRequest(event.target.checked)}
-                        label={i18n.translate(
-                          'xpack.enterpriseSearch.content.overview.optimizedRequest.label',
-                          { defaultMessage: 'View Enterprise Search optimized request' }
-                        )}
-                        checked={optimizedRequest}
-                      />
+                      <EuiFlexGroup direction="column">
+                        <EuiFlexItem>
+                          <EuiTitle size="s">
+                            <h2>
+                              {i18n.translate(
+                                'xpack.enterpriseSearch.content.overview.documentExample.title',
+                                { defaultMessage: 'Adding documents to your index' }
+                              )}
+                            </h2>
+                          </EuiTitle>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <EuiText size="s">
+                            <p>
+                              <FormattedMessage
+                                id="xpack.enterpriseSearch.content.overview.documentExample.description.text"
+                                defaultMessage="Generate an API key and read the {documentation} on how to send documents to the Elasticsearch API endpoint. Use Elastic  {clients} for streamlined integration."
+                                values={{
+                                  clients: (
+                                    <EuiLink href={docLinks.clientsGuide} external>
+                                      {i18n.translate(
+                                        'xpack.enterpriseSearch.content.overview.documentExample.description.clientsLink',
+                                        { defaultMessage: 'programming language clients' }
+                                      )}
+                                    </EuiLink>
+                                  ),
+                                  documentation: (
+                                    <EuiLink href={docLinks.indexApi} external>
+                                      {i18n.translate(
+                                        'xpack.enterpriseSearch.content.overview.documentExample.description.documentationLink',
+                                        { defaultMessage: 'documentation' }
+                                      )}
+                                    </EuiLink>
+                                  ),
+                                }}
+                              />
+                            </p>
+                          </EuiText>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
                    </EuiFlexItem>
                    <EuiFlexItem grow={false}>
                      <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
@ -105,7 +129,17 @@ export const GenerateApiKeyPanel: React.FC = () => {
                  </EuiFlexGroup>
                </EuiFlexItem>

-                <EuiSpacer />
+                <EuiFlexItem grow={false}>
+                  <EuiSwitch
+                    data-telemetry-id={`entSearchContent-${ingestionMethod}-overview-generateApiKey-optimizedRequest`}
+                    onChange={(event) => setOptimizedRequest(event.target.checked)}
+                    label={i18n.translate(
+                      'xpack.enterpriseSearch.content.overview.optimizedRequest.label',
+                      { defaultMessage: 'View Enterprise Search optimized request' }
+                    )}
+                    checked={optimizedRequest}
+                  />
+                </EuiFlexItem>
                <EuiFlexItem>
                  <CurlRequest
                    apiKey={apiKey}
--- a/x-pack/plugins/enterprise_search/public/applications/shared/beta/beta_callout.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/beta/beta_callout.tsx
@ -12,16 +12,20 @@ import { i18n } from '@kbn/i18n';

 interface BetaCallOutProps {
  description: string;
+  title?: string;
 }

-export const BetaCallOut: React.FC<BetaCallOutProps> = ({ description }) => {
+export const BetaCallOut: React.FC<BetaCallOutProps> = ({ title, description }) => {
  return (
    <EuiCallOut
      color="warning"
      iconType="beaker"
-      title={i18n.translate('xpack.enterpriseSearch.betaCalloutTitle', {
-        defaultMessage: 'Beta feature',
-      })}
+      title={
+        title ||
+        i18n.translate('xpack.enterpriseSearch.betaCalloutTitle', {
+          defaultMessage: 'Beta feature',
+        })
+      }
    >
      {description}
    </EuiCallOut>
--- a/x-pack/plugins/enterprise_search/public/applications/shared/beta/beta_connector_callout.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/beta/beta_connector_callout.tsx
@ -0,0 +1,24 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { BetaCallOut } from './beta_callout';
+
+export const BetaConnectorCallout: React.FC = () => (
+  <BetaCallOut
+    title={i18n.translate('xpack.enterpriseSearch.betaConnectorCalloutTitle', {
+      defaultMessage: 'Beta connector',
+    })}
+    description={i18n.translate('xpack.enterpriseSearch.betaConnectorCalloutDescription', {
+      defaultMessage:
+        'This connector is in beta. Beta features are subject to change and are not covered by the support SLA of general release (GA) features. Elastic plans to promote this feature to GA in a future release.',
+    })}
+  />
+);
--- a/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts
@ -27,6 +27,10 @@ export const BETA_LABEL = i18n.translate('xpack.enterpriseSearch.betaLabel', {
  defaultMessage: 'Beta',
 });

+export const NATIVE_LABEL = i18n.translate('xpack.enterpriseSearch.nativeLabel', {
+  defaultMessage: 'Native',
+});
+
 export const NAME_LABEL = i18n.translate('xpack.enterpriseSearch.nameLabel', {
  defaultMessage: 'Name',
 });
--- a/x-pack/plugins/enterprise_search/public/applications/shared/doc_links/doc_links.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/doc_links/doc_links.ts
@ -63,12 +63,14 @@ class DocLinks {
  public cloudIndexManagement: string;
  public connectors: string;
  public connectorsAzureBlobStorage: string;
+  public connectorsClients: string;
  public connectorsConfluence: string;
  public connectorsGoogleCloudStorage: string;
  public connectorsJira: string;
  public connectorsMicrosoftSQL: string;
  public connectorsMongoDB: string;
  public connectorsMySQL: string;
+  public connectorsNative: string;
  public connectorsNetworkDrive: string;
  public connectorsOracle: string;
  public connectorsPostgreSQL: string;
@ -90,6 +92,7 @@ class DocLinks {
  public enterpriseSearchMailService: string;
  public enterpriseSearchTroubleshootSetup: string;
  public enterpriseSearchUsersAccess: string;
+  public indexApi: string;
  public ingestionApis: string;
  public ingestPipelines: string;
  public kibanaSecurity: string;
@ -199,11 +202,13 @@ class DocLinks {
    this.connectors = '';
    this.connectorsAzureBlobStorage = '';
    this.connectorsConfluence = '';
+    this.connectorsClients = '';
    this.connectorsGoogleCloudStorage = '';
    this.connectorsJira = '';
    this.connectorsMicrosoftSQL = '';
    this.connectorsMongoDB = '';
    this.connectorsMySQL = '';
+    this.connectorsNative = '';
    this.connectorsNetworkDrive = '';
    this.connectorsOracle = '';
    this.connectorsPostgreSQL = '';
@ -225,6 +230,7 @@ class DocLinks {
    this.enterpriseSearchMailService = '';
    this.enterpriseSearchTroubleshootSetup = '';
    this.enterpriseSearchUsersAccess = '';
+    this.indexApi = '';
    this.ingestionApis = '';
    this.ingestPipelines = '';
    this.kibanaSecurity = '';
@ -335,12 +341,14 @@ class DocLinks {
    this.connectors = docLinks.links.enterpriseSearch.connectors;
    this.connectorsAzureBlobStorage = docLinks.links.enterpriseSearch.connectorsAzureBlobStorage;
    this.connectorsConfluence = docLinks.links.enterpriseSearch.connectorsConfluence;
+    this.connectorsClients = docLinks.links.enterpriseSearch.connectorsClients;
    this.connectorsGoogleCloudStorage =
      docLinks.links.enterpriseSearch.connectorsGoogleCloudStorage;
    this.connectorsJira = docLinks.links.enterpriseSearch.connectorsJira;
    this.connectorsMicrosoftSQL = docLinks.links.enterpriseSearch.connectorsMicrosoftSQL;
    this.connectorsMongoDB = docLinks.links.enterpriseSearch.connectorsMongoDB;
    this.connectorsMySQL = docLinks.links.enterpriseSearch.connectorsMySQL;
+    this.connectorsNative = docLinks.links.enterpriseSearch.connectorsNative;
    this.connectorsNetworkDrive = docLinks.links.enterpriseSearch.connectorsNetworkDrive;
    this.connectorsOracle = docLinks.links.enterpriseSearch.connectorsOracle;
    this.connectorsPostgreSQL = docLinks.links.enterpriseSearch.connectorsPostgreSQL;
@ -362,6 +370,7 @@ class DocLinks {
    this.enterpriseSearchMailService = docLinks.links.enterpriseSearch.mailService;
    this.enterpriseSearchTroubleshootSetup = docLinks.links.enterpriseSearch.troubleshootSetup;
    this.enterpriseSearchUsersAccess = docLinks.links.enterpriseSearch.usersAccess;
+    this.indexApi = docLinks.links.enterpriseSearch.indexApi;
    this.ingestionApis = docLinks.links.enterpriseSearch.ingestionApis;
    this.ingestPipelines = docLinks.links.enterpriseSearch.ingestPipelines;
    this.kibanaSecurity = docLinks.links.kibana.xpackSecurity;
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@ -37746,4 +37746,4 @@
    "xpack.painlessLab.title": "Painless Lab",
    "xpack.painlessLab.walkthroughButtonLabel": "Présentation"
  }
-}
+}
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -37714,4 +37714,4 @@
    "xpack.painlessLab.title": "Painless Lab",
    "xpack.painlessLab.walkthroughButtonLabel": "実地検証"
  }
-}
+}
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -37742,4 +37742,4 @@
    "xpack.painlessLab.title": "Painless 实验室",
    "xpack.painlessLab.walkthroughButtonLabel": "指导"
  }
-}
+}