[Enterprise Search] Redesign create index flow (#155149)

## Summary This changes the create index flow in Enterprise Search Content to frontload the configuration, and backload the actual index selection. It also provides a more direct path from the integrations page, and includes a few other goodies. https://user-images.githubusercontent.com/94373878/232780443-80d926ce-cca3-4bef-b2ba-794c82c9f684.mov https://user-images.githubusercontent.com/94373878/232780486-eadeeac0-e459-4c17-b6f0-71ba3a3c0017.mov ### 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] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [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)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Efe Gürkan YALAMAN <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Apr 20, 2023 · ac581be · ac581be
1 parent 7c70508
commit ac581be
Show file tree

Hide file tree

Showing 55 changed files with 1,006 additions and 1,139 deletions.
diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts
@@ -129,8 +129,15 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       bulkApi: `${ELASTICSEARCH_DOCS}docs-bulk.html`,
       configuration: `${ENTERPRISE_SEARCH_DOCS}configuration.html`,
       connectors: `${ENTERPRISE_SEARCH_DOCS}connectors.html`,
+      connectorsAzureBlobStorage: `${ENTERPRISE_SEARCH_DOCS}connectors-azure-blob.html`,
+      connectorsGoogleCloudStorage: `${ENTERPRISE_SEARCH_DOCS}connectors-google-cloud.html`,
       connectorsMongoDB: `${ENTERPRISE_SEARCH_DOCS}connectors-mongodb.html`,
       connectorsMySQL: `${ENTERPRISE_SEARCH_DOCS}connectors-mysql.html`,
+      connectorsMicrosoftSQL: `${ENTERPRISE_SEARCH_DOCS}connectors-ms-sql.html`,
+      connectorsNetworkDrive: `${ENTERPRISE_SEARCH_DOCS}connectors-network-drive.html`,
+      connectorsOracle: `${ENTERPRISE_SEARCH_DOCS}connectors-oracle.html`,
+      connectorsPostgreSQL: `${ENTERPRISE_SEARCH_DOCS}connectors-postgresql.html`,
+      connectorsS3: `${ENTERPRISE_SEARCH_DOCS}connectors-s3.html`,
       connectorsWorkplaceSearch: `${ENTERPRISE_SEARCH_DOCS}connectors.html#connectors-workplace-search`,
       crawlerExtractionRules: `${ENTERPRISE_SEARCH_DOCS}crawler-extraction-rules.html`,
       crawlerManaging: `${ENTERPRISE_SEARCH_DOCS}crawler-managing.html`,
@@ -139,6 +146,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`,
+      ingestionApis: `${ENTERPRISE_SEARCH_DOCS}ingestion-apis.html`,
       ingestPipelines: `${ENTERPRISE_SEARCH_DOCS}ingest-pipelines.html`,
       languageAnalyzers: `${ELASTICSEARCH_DOCS}analysis-lang-analyzer.html`,
       languageClients: `${ENTERPRISE_SEARCH_DOCS}programming-language-clients.html`,

diff --git a/packages/kbn-doc-links/src/types.ts b/packages/kbn-doc-links/src/types.ts
@@ -114,8 +114,15 @@ export interface DocLinks {
     readonly bulkApi: string;
     readonly configuration: string;
     readonly connectors: string;
+    readonly connectorsAzureBlobStorage: string;
+    readonly connectorsGoogleCloudStorage: string;
+    readonly connectorsMicrosoftSQL: string;
     readonly connectorsMongoDB: string;
     readonly connectorsMySQL: string;
+    readonly connectorsNetworkDrive: string;
+    readonly connectorsOracle: string;
+    readonly connectorsPostgreSQL: string;
+    readonly connectorsS3: string;
     readonly connectorsWorkplaceSearch: string;
     readonly crawlerExtractionRules: string;
     readonly crawlerManaging: string;
@@ -124,6 +131,7 @@ export interface DocLinks {
     readonly documentLevelSecurity: string;
     readonly elser: string;
     readonly engines: string;
+    readonly ingestionApis: string;
     readonly ingestPipelines: string;
     readonly languageAnalyzers: string;
     readonly languageClients: string;

diff --git a/x-pack/plugins/enterprise_search/common/constants.ts b/x-pack/plugins/enterprise_search/common/constants.ts
@@ -157,10 +157,9 @@ export const DEFAULT_PIPELINE_VALUES: IngestPipelineParams = {
 };
 
 export enum INGESTION_METHOD_IDS {
-  api = 'api',
-  connector = 'connector',
-  crawler = 'crawler',
-  native_connector = 'native_connector',
+  API = 'api',
+  CONNECTOR = 'connector',
+  CRAWLER = 'crawler',
 }
 
 export const DEFAULT_PRODUCT_FEATURES: ProductFeatures = {

diff --git a/x-pack/plugins/enterprise_search/common/guided_onboarding/search_guide_config.ts b/x-pack/plugins/enterprise_search/common/guided_onboarding/search_guide_config.ts
@@ -15,9 +15,9 @@ export const websiteSearchGuideId = 'websiteSearch';
 export const databaseSearchGuideId = 'databaseSearch';
 
 const apiMethods = {
-  [appSearchGuideId]: INGESTION_METHOD_IDS.api,
-  [databaseSearchGuideId]: INGESTION_METHOD_IDS.native_connector,
-  [websiteSearchGuideId]: INGESTION_METHOD_IDS.crawler,
+  [appSearchGuideId]: INGESTION_METHOD_IDS.API,
+  [databaseSearchGuideId]: INGESTION_METHOD_IDS.CONNECTOR,
+  [websiteSearchGuideId]: INGESTION_METHOD_IDS.CRAWLER,
 };
 
 export type EnterpriseSearchGuideIds =

diff --git a/...blic/applications/enterprise_search_content/api/connector/add_connector_api_logic.test.ts b/...blic/applications/enterprise_search_content/api/connector/add_connector_api_logic.test.ts
@@ -20,7 +20,11 @@ describe('addConnectorApiLogic', () => {
     it('calls correct api', async () => {
       const promise = Promise.resolve({ id: 'unique id', index_name: 'indexName' });
       http.post.mockReturnValue(promise);
-      const result = addConnector({ indexName: 'indexName', isNative: false, language: 'en' });
+      const result = addConnector({
+        indexName: 'indexName',
+        isNative: false,
+        language: 'en',
+      });
       await nextTick();
       expect(http.post).toHaveBeenCalledWith('/internal/enterprise_search/connectors', {
         body: JSON.stringify({ index_name: 'indexName', is_native: false, language: 'en' }),

diff --git a/...ch/public/applications/enterprise_search_content/api/connector/add_connector_api_logic.ts b/...ch/public/applications/enterprise_search_content/api/connector/add_connector_api_logic.ts
@@ -18,6 +18,7 @@ export interface AddConnectorApiLogicArgs {
   indexName: string;
   isNative: boolean;
   language: string | null;
+  serviceType?: string;
 }
 
 export interface AddConnectorApiLogicResponse {
@@ -30,6 +31,7 @@ export const addConnector = async ({
   indexName,
   isNative,
   language,
+  serviceType,
 }: AddConnectorApiLogicArgs): Promise<AddConnectorApiLogicResponse> => {
   const route = '/internal/enterprise_search/connectors';
 
@@ -41,6 +43,7 @@ export const addConnector = async ({
     index_name: indexName,
     is_native: isNative,
     language,
+    service_type: serviceType,
   };
   const result = await HttpLogic.values.http.post<AddConnectorValue>(route, {
     body: JSON.stringify(params),

diff --git a/...ic/applications/enterprise_search_content/api/connector/set_native_connector_api_logic.ts b/...ic/applications/enterprise_search_content/api/connector/set_native_connector_api_logic.ts
diff --git a/...pplications/enterprise_search_content/components/new_index/method_api/method_api.test.tsx b/...pplications/enterprise_search_content/components/new_index/method_api/method_api.test.tsx
@@ -5,11 +5,13 @@
  * 2.0.
  */
 
+import { setMockValues } from '../../../../__mocks__/kea_logic';
+
 import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiSteps } from '@elastic/eui';
+import { Status } from '../../../../../../common/types/api';
 
 import { NewSearchIndexTemplate } from '../new_search_index_template';
 
@@ -18,13 +20,13 @@ import { MethodApi } from './method_api';
 describe('MethodApi', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    setMockValues({ status: Status.IDLE });
   });
 
   it('renders API ingestion method tab', () => {
     const wrapper = shallow(<MethodApi />);
     const template = wrapper.find(NewSearchIndexTemplate);
 
     expect(template.prop('type')).toEqual('api');
-    expect(template.find(EuiSteps)).toHaveLength(1);
   });
 });
diff --git a/...lic/applications/enterprise_search_content/components/new_index/method_api/method_api.tsx b/...lic/applications/enterprise_search_content/components/new_index/method_api/method_api.tsx
@@ -7,59 +7,22 @@
 
 import React from 'react';
 
-import { useActions } from 'kea';
+import { useActions, useValues } from 'kea';
 
-import { EuiSteps, EuiText } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { Status } from '../../../../../../common/types/api';
 
-import { CREATE_ELASTICSEARCH_INDEX_STEP, BUILD_SEARCH_EXPERIENCE_STEP } from '../method_steps';
 import { NewSearchIndexTemplate } from '../new_search_index_template';
 
 import { MethodApiLogic } from './method_api_logic';
 
 export const MethodApi: React.FC = () => {
   const { makeRequest } = useActions(MethodApiLogic);
+  const { status } = useValues(MethodApiLogic);
   return (
     <NewSearchIndexTemplate
-      title={
-        <FormattedMessage
-          id="xpack.enterpriseSearch.content.newIndex.methodApi.title"
-          defaultMessage="Index using the API"
-        />
-      }
       type="api"
+      buttonLoading={status === Status.LOADING}
       onSubmit={(indexName, language) => makeRequest({ indexName, language })}
-    >
-      <EuiSteps
-        steps={[
-          CREATE_ELASTICSEARCH_INDEX_STEP,
-          {
-            children: (
-              <EuiText size="s">
-                <p>
-                  {i18n.translate(
-                    'xpack.enterpriseSearch.content.newIndex.methodApi.steps.configureIngestion.content',
-                    {
-                      defaultMessage:
-                        'Generate an API key and view the documentation for posting documents to the Elasticsearch API endpoint. Language clients are available for streamlined integration.',
-                    }
-                  )}
-                </p>
-              </EuiText>
-            ),
-            status: 'incomplete',
-            title: i18n.translate(
-              'xpack.enterpriseSearch.content.newIndex.steps.configureIngestion.title',
-              {
-                defaultMessage: 'Configure ingestion settings',
-              }
-            ),
-            titleSize: 'xs',
-          },
-          BUILD_SEARCH_EXPERIENCE_STEP,
-        ]}
-      />
-    </NewSearchIndexTemplate>
+    />
   );
 };
diff --git a/...pplications/enterprise_search_content/components/new_index/method_api/method_api_logic.ts b/...pplications/enterprise_search_content/components/new_index/method_api/method_api_logic.ts
@@ -24,9 +24,14 @@ type MethodApiActions = Pick<
   'apiSuccess' | 'makeRequest'
 >;
 
-export const MethodApiLogic = kea<MakeLogicType<{}, MethodApiActions>>({
+interface MethodApiValues {
+  status: typeof CreateApiIndexApiLogic.values['status'];
+}
+
+export const MethodApiLogic = kea<MakeLogicType<MethodApiValues, MethodApiActions>>({
   connect: {
     actions: [CreateApiIndexApiLogic, ['apiSuccess', 'makeRequest']],
+    values: [CreateApiIndexApiLogic, ['status']],
   },
   listeners: {
     apiSuccess: ({ indexName }) => {

diff --git a/...enterprise_search_content/components/new_index/method_connector/method_connector.test.tsx b/...enterprise_search_content/components/new_index/method_connector/method_connector.test.tsx
@@ -11,8 +11,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiSteps } from '@elastic/eui';
-
 import { Status } from '../../../../../../common/types/api';
 
 import { NewSearchIndexTemplate } from '../new_search_index_template';
@@ -27,10 +25,9 @@ describe('MethodConnector', () => {
   });
 
   it('renders connector ingestion method tab', () => {
-    const wrapper = shallow(<MethodConnector isNative={false} />);
+    const wrapper = shallow(<MethodConnector serviceType="mongodb" />);
     const template = wrapper.find(NewSearchIndexTemplate);
 
     expect(template.prop('type')).toEqual('connector');
-    expect(template.find(EuiSteps)).toHaveLength(1);
   });
 });