[Enterprise Search] Text context improvements for the new index pages (…

…#157290) ## Summary Change text to increase the context exposure on new index pages and also reflect beta/native connector changes. Adds a callout to Beta connectors, both on index configuration and index overview. Changed PostgreSQL label to match their branding. Adds a native badge which is visible only when native connectors available. https://github.com/elastic/kibana/assets/1410658/b806bb66-578f-41b2-88cf-85337e9c9ee4 https://github.com/elastic/kibana/assets/1410658/90f84499-ca8f-4469-b196-122cf67c3db6 ![Screenshot 2023-05-10 at 18 40 34](https://github.com/elastic/kibana/assets/1410658/3798e099-d8e0-4b66-9e3f-5ce0d91dc1e3) ![Screenshot 2023-05-10 at 19 16 49](https://github.com/elastic/kibana/assets/1410658/f6f768ae-2647-4483-95ab-4ac65ff4dc9d) ![Screenshot 2023-05-10 at 18 40 58](https://github.com/elastic/kibana/assets/1410658/7dedf8df-7da6-4488-bf3c-c5346dde6cd2) ![Screenshot 2023-05-10 at 18 41 05](https://github.com/elastic/kibana/assets/1410658/8e714033-e6ad-4c7c-b409-386c15d6e39b) ![Screenshot 2023-05-10 at 18 41 16](https://github.com/elastic/kibana/assets/1410658/076aaab9-2ef1-462e-a2e0-82799c157713) ### 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) - [x] [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 - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] 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)) - [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)) --------- Co-authored-by: Liam Thompson <[email protected]>
elastic · May 12, 2023 · bba20a2 · bba20a2
1 parent 0bbef23
commit bba20a2
Show file tree

Hide file tree

Showing 23 changed files with 383 additions and 124 deletions.
diff --git 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`,

diff --git 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;

diff --git 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',
   },

diff --git a/...ions/enterprise_search_content/components/new_index/method_connector/method_connector.tsx b/...ions/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 && (

diff --git a/...e_search/public/applications/enterprise_search_content/components/new_index/new_index.tsx b/...e_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',

diff --git a/...rch/public/applications/enterprise_search_content/components/new_index/new_index_card.tsx b/...rch/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: {

diff --git a/...lic/applications/enterprise_search_content/components/new_index/new_search_index_page.tsx b/...lic/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}>

diff --git a/...applications/enterprise_search_content/components/new_index/new_search_index_template.tsx b/...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>

diff --git a/.../enterprise_search_content/components/new_index/select_connector/connector_checkable.scss b/.../enterprise_search_content/components/new_index/select_connector/connector_checkable.scss
@@ -0,0 +1,3 @@
+.connectorCheckable {
+  flex-grow: 1;
+}
diff --git a/...s/enterprise_search_content/components/new_index/select_connector/connector_checkable.tsx b/...s/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,13 +35,15 @@ export type ConnectorCheckableProps = Omit<
   isTechPreview: boolean;
   name: string;
   serviceType: string;
+  showNativeBadge: boolean;
 };
 
 export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
   documentationUrl,
   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>
   );