[Enterprise Search] Pre-select ingestion mechanisms when arrived from…

… guides (elastic#152926) ## Summary This PR changes the Onboarding guides for Enterprise Search so when you click a guide, respective ingestion method is pre-selected. https://user-images.githubusercontent.com/1410658/223758976-1175f891-ad63-4ea6-811e-cd7b178a9669.mov ### Checklist Delete any items that are not applicable to this PR. - [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)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
bmorelli25 · Mar 10, 2023 · f459cb6 · f459cb6
1 parent f7edf12
commit f459cb6
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 76 deletions.
diff --git a/x-pack/plugins/enterprise_search/common/constants.ts b/x-pack/plugins/enterprise_search/common/constants.ts
@@ -154,3 +154,10 @@ export const DEFAULT_PIPELINE_VALUES: IngestPipelineParams = {
   reduce_whitespace: true,
   run_ml_inference: false,
 };
+
+export enum INGESTION_METHOD_IDS {
+  api = 'api',
+  connector = 'connector',
+  crawler = 'crawler',
+  native_connector = 'native_connector',
+}
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
@@ -5,77 +5,93 @@
  * 2.0.
  */
 
-import type { GuideConfig } from '@kbn/guided-onboarding';
+import type { GuideConfig, StepConfig } from '@kbn/guided-onboarding';
 import { i18n } from '@kbn/i18n';
 
+import { INGESTION_METHOD_IDS } from '../constants';
+
 export const appSearchGuideId = 'appSearch';
 export const websiteSearchGuideId = 'websiteSearch';
 export const databaseSearchGuideId = 'databaseSearch';
-const guideConfig: Omit<GuideConfig, 'telemetryId'> = {
-  title: i18n.translate('xpack.enterpriseSearch.guideConfig.title', {
-    defaultMessage: 'Build search experiences with Elasticsearch',
-  }),
-  description: i18n.translate('xpack.enterpriseSearch.guideConfig.description', {
-    defaultMessage: `We'll help you build a search experience with your data using Elastic's web crawler, connectors, and APIs.`,
-  }),
-  guideName: 'Enterprise Search',
-  steps: [
-    {
-      id: 'add_data',
-      title: i18n.translate('xpack.enterpriseSearch.guideConfig.addDataStep.title', {
-        defaultMessage: 'Add data',
-      }),
-      description: i18n.translate('xpack.enterpriseSearch.guideConfig.addDataStep.description', {
-        defaultMessage:
-          'Ingest your data, create an index, and enrich your data with customizable ingest and inference pipelines.',
-      }),
-      location: {
-        appID: 'enterpriseSearchContent',
-        path: '/search_indices/new_index',
-      },
+
+const apiMethods = {
+  [appSearchGuideId]: INGESTION_METHOD_IDS.api,
+  [databaseSearchGuideId]: INGESTION_METHOD_IDS.native_connector,
+  [websiteSearchGuideId]: INGESTION_METHOD_IDS.crawler,
+};
+
+export type EnterpriseSearchGuideIds =
+  | typeof appSearchGuideId
+  | typeof websiteSearchGuideId
+  | typeof databaseSearchGuideId;
+
+const getAddDataStep: (method?: INGESTION_METHOD_IDS) => StepConfig = (method) => {
+  return {
+    id: 'add_data',
+    title: i18n.translate('xpack.enterpriseSearch.guideConfig.addDataStep.title', {
+      defaultMessage: 'Add data',
+    }),
+    description: i18n.translate('xpack.enterpriseSearch.guideConfig.addDataStep.description', {
+      defaultMessage:
+        'Ingest your data, create an index, and enrich your data with customizable ingest and inference pipelines.',
+    }),
+    location: {
+      appID: 'enterpriseSearchContent',
+      path: `/search_indices/new_index?${method ? 'method=' + method : ''}`,
     },
-    {
-      id: 'search_experience',
-      title: i18n.translate('xpack.enterpriseSearch.guideConfig.searchExperienceStep.title', {
-        defaultMessage: 'Build a search experience',
-      }),
+  };
+};
+
+const getSearchExperienceStep: () => StepConfig = () => {
+  return {
+    id: 'search_experience',
+    title: i18n.translate('xpack.enterpriseSearch.guideConfig.searchExperienceStep.title', {
+      defaultMessage: 'Build a search experience',
+    }),
+    description: i18n.translate(
+      'xpack.enterpriseSearch.guideConfig.searchExperienceStep.description',
+      {
+        defaultMessage: `Learn more about Elastic's Search UI, try our Search UI tutorial for Elasticsearch, and build a search experience.`,
+      }
+    ),
+    location: {
+      appID: 'searchExperiences',
+      path: '',
+    },
+    manualCompletion: {
+      title: i18n.translate(
+        'xpack.enterpriseSearch.guideConfig.searchExperienceStep.manualCompletionPopoverTitle',
+        {
+          defaultMessage: 'Explore Search UI',
+        }
+      ),
       description: i18n.translate(
-        'xpack.enterpriseSearch.guideConfig.searchExperienceStep.description',
+        'xpack.enterpriseSearch.guideConfig.searchExperienceStep.manualCompletionPopoverDescription',
         {
-          defaultMessage: `Learn more about Elastic's Search UI, try our Search UI tutorial for Elasticsearch, and build a search experience.`,
+          defaultMessage: `Take your time to explore how to use Search UI to build world-class search experiences. When you're ready, click the Setup guide button to continue.`,
         }
       ),
-      location: {
-        appID: 'searchExperiences',
-        path: '',
-      },
-      manualCompletion: {
-        title: i18n.translate(
-          'xpack.enterpriseSearch.guideConfig.searchExperienceStep.manualCompletionPopoverTitle',
-          {
-            defaultMessage: 'Explore Search UI',
-          }
-        ),
-        description: i18n.translate(
-          'xpack.enterpriseSearch.guideConfig.searchExperienceStep.manualCompletionPopoverDescription',
-          {
-            defaultMessage: `Take your time to explore how to use Search UI to build world-class search experiences. When you're ready, click the Setup guide button to continue.`,
-          }
-        ),
-        readyToCompleteOnNavigation: true,
-      },
+      readyToCompleteOnNavigation: true,
     },
-  ],
-};
-export const appSearchGuideConfig: GuideConfig = {
-  ...guideConfig,
-  telemetryId: 'appSearch',
-};
-export const websiteSearchGuideConfig: GuideConfig = {
-  ...guideConfig,
-  telemetryId: 'websiteSearch',
+  };
 };
-export const databaseSearchGuideConfig: GuideConfig = {
-  ...guideConfig,
-  telemetryId: 'databaseSearch',
+
+const getGuideConfig: (telemetryId: EnterpriseSearchGuideIds) => GuideConfig = (telemetryId) => {
+  return {
+    telemetryId,
+    title: i18n.translate('xpack.enterpriseSearch.guideConfig.title', {
+      defaultMessage: 'Build search experiences with Elasticsearch',
+    }),
+    description: i18n.translate('xpack.enterpriseSearch.guideConfig.description', {
+      defaultMessage: `We'll help you build a search experience with your data using Elastic's web crawler, connectors, and APIs.`,
+    }),
+    guideName: 'Enterprise Search',
+    steps: [getAddDataStep(apiMethods[telemetryId]), getSearchExperienceStep()],
+  };
 };
+
+export const appSearchGuideConfig: GuideConfig = getGuideConfig(appSearchGuideId);
+
+export const websiteSearchGuideConfig: GuideConfig = getGuideConfig(websiteSearchGuideId);
+
+export const databaseSearchGuideConfig: GuideConfig = getGuideConfig(databaseSearchGuideId);
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
@@ -20,6 +20,8 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { INGESTION_METHOD_IDS } from '../../../../../common/constants';
+
 import { BETA_LABEL } from '../../../shared/constants/labels';
 import { parseQueryParams } from '../../../shared/query_params';
 import { EuiLinkTo } from '../../../shared/react_router_helpers';
@@ -33,13 +35,6 @@ import { MethodApi } from './method_api/method_api';
 import { MethodConnector } from './method_connector/method_connector';
 import { MethodCrawler } from './method_crawler/method_crawler';
 
-export enum IngestionMethodId {
-  api = 'api',
-  connector = 'connector',
-  crawler = 'crawler',
-  native_connector = 'native_connector',
-}
-
 const betaBadge = (
   <EuiBadge iconType="beaker">
     <EuiText size="xs">{BETA_LABEL}</EuiText>
@@ -58,7 +53,7 @@ const METHOD_BUTTON_GROUP_OPTIONS: ButtonGroupOption[] = [
       defaultMessage: 'No development required',
     }),
     icon: 'globe',
-    id: IngestionMethodId.crawler,
+    id: INGESTION_METHOD_IDS.crawler,
     label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.crawler.label', {
       defaultMessage: 'Use the web crawler',
     }),
@@ -79,7 +74,7 @@ const METHOD_BUTTON_GROUP_OPTIONS: ButtonGroupOption[] = [
       }
     ),
     icon: 'visVega',
-    id: IngestionMethodId.native_connector,
+    id: INGESTION_METHOD_IDS.native_connector,
     label: i18n.translate(
       'xpack.enterpriseSearch.content.newIndex.buttonGroup.nativeConnector.label',
       {
@@ -98,7 +93,7 @@ const METHOD_BUTTON_GROUP_OPTIONS: ButtonGroupOption[] = [
       defaultMessage: 'Some development required',
     }),
     icon: 'visVega',
-    id: IngestionMethodId.api,
+    id: INGESTION_METHOD_IDS.api,
     label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.api.label', {
       defaultMessage: 'Use the API',
     }),
@@ -116,7 +111,7 @@ const METHOD_BUTTON_GROUP_OPTIONS: ButtonGroupOption[] = [
       defaultMessage: 'Development required',
     }),
     icon: 'package',
-    id: IngestionMethodId.connector,
+    id: INGESTION_METHOD_IDS.connector,
     label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.connector.label', {
       defaultMessage: 'Build a connector',
     }),
@@ -188,12 +183,12 @@ export const NewIndex: React.FC = () => {
         <EuiFlexItem>
           {selectedMethod ? (
             <>
-              {selectedMethod.id === IngestionMethodId.crawler && <MethodCrawler />}
-              {selectedMethod.id === IngestionMethodId.api && <MethodApi />}
-              {selectedMethod.id === IngestionMethodId.connector && (
+              {selectedMethod.id === INGESTION_METHOD_IDS.crawler && <MethodCrawler />}
+              {selectedMethod.id === INGESTION_METHOD_IDS.api && <MethodApi />}
+              {selectedMethod.id === INGESTION_METHOD_IDS.connector && (
                 <MethodConnector isNative={false} />
               )}
-              {selectedMethod.id === IngestionMethodId.native_connector && (
+              {selectedMethod.id === INGESTION_METHOD_IDS.native_connector && (
                 <MethodConnector isNative />
               )}
             </>