[ES3] Fix onboarding tiles to new design (elastic#208069)

## Summary This adapts the onboarding guide for Elasticsearch to: - use in-page tiles - remember its guide selection in local storage - actually switch the code correctly on the start page https://github.com/user-attachments/assets/9a23b7a6-828a-4d37-a460-975dd526eafe UPDATED SCREEN RECORDING: https://github.com/user-attachments/assets/7526f1d5-b85c-4096-85c5-9cf35b1bd757 --------- Co-authored-by: kibanamachine <[email protected]>
JoseLuisGJ · Jan 24, 2025 · c6f7416 · c6f7416
1 parent 938f471
commit c6f7416
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 162 deletions.
diff --git a/x-pack/solutions/search/plugins/search_indices/public/code_examples/workflows.ts b/x-pack/solutions/search/plugins/search_indices/public/code_examples/workflows.ts
@@ -41,7 +41,7 @@ export const workflows: Workflow[] = [
     id: 'semantic',
     summary: i18n.translate('xpack.searchIndices.workflows.semanticSummary', {
       defaultMessage:
-        "Semantic search in Elasticsearch is now simpler with the new semantic_text field type. This example walks through setting up your index with a semantic_text field, which uses Elastic's built-in ELSER machine learning model. If the model is not running, a new deployment will start once the mappings are defined.",
+        "Use a semantic_text field type and Elastic's built-in ELSER machine learning model.",
     }),
   },
 ];
diff --git a/...k/solutions/search/plugins/search_indices/public/components/create_index/create_index.tsx b/...k/solutions/search/plugins/search_indices/public/components/create_index/create_index.tsx
@@ -52,7 +52,11 @@ export const CreateIndex = ({ indicesData }: CreateIndexProps) => {
       ? CreateIndexViewMode.Code
       : CreateIndexViewMode.UI
   );
-  const { workflow, setSelectedWorkflowId } = useWorkflow();
+  const {
+    workflow,
+    setSelectedWorkflowId,
+    createIndexExamples: selectedCodeExamples,
+  } = useWorkflow();
   const usageTracker = useUsageTracker();
   const onChangeView = useCallback(
     (id: string) => {
@@ -113,6 +117,7 @@ export const CreateIndex = ({ indicesData }: CreateIndexProps) => {
             ]);
           }}
           selectedWorkflow={workflow}
+          selectedCodeExamples={selectedCodeExamples}
           canCreateApiKey={userPrivileges?.privileges.canCreateApiKeys}
           analyticsEvents={{
             runInConsole: AnalyticsEvents.createIndexRunInConsole,

diff --git a/...utions/search/plugins/search_indices/public/components/create_index/create_index_page.tsx b/...utions/search/plugins/search_indices/public/components/create_index/create_index_page.tsx
@@ -46,7 +46,7 @@ export const CreateIndexPage = () => {
       grow={false}
       solutionNav={searchNavigation?.useClassicNavigation(history)}
     >
-      <KibanaPageTemplate.Section alignment="center" restrictWidth={false} grow>
+      <KibanaPageTemplate.Section alignment="top" restrictWidth={false}>
         {isInitialLoading && <EuiLoadingLogo />}
         {hasIndicesStatusFetchError && <LoadIndicesStatusError error={indicesFetchError} />}
         {!isInitialLoading && !hasIndicesStatusFetchError && (

diff --git a/...h/plugins/search_indices/public/components/index_documents/add_documents_code_example.tsx b/...h/plugins/search_indices/public/components/index_documents/add_documents_code_example.tsx
@@ -75,49 +75,74 @@ export const AddDocumentsCodeExample = ({
       apiKey: apiKey || undefined,
     };
   }, [indexName, elasticsearchUrl, sampleDocuments, codeSampleMappings, indexHasMappings, apiKey]);
-  const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);
 
   return (
     <EuiPanel
       hasBorder
       hasShadow={false}
       paddingSize="m"
       data-test-subj="SearchIndicesAddDocumentsCode"
-      panelRef={setPanelRef}
     >
       <EuiFlexGroup direction="column">
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexGroup
+          justifyContent={indexHasMappings ? 'flexEnd' : 'spaceBetween'}
+          alignItems="center"
+        >
           {!indexHasMappings && (
-            <EuiFlexItem css={{ maxWidth: '300px' }} grow={false}>
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xs">
+                <h5>
+                  {i18n.translate('xpack.searchIndices.guideSelectors.selectGuideTitle', {
+                    defaultMessage: 'Select a workflow guide',
+                  })}
+                </h5>
+              </EuiTitle>
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="s">
+              <EuiFlexItem css={{ maxWidth: '300px' }} grow={false}>
+                <LanguageSelector
+                  options={LanguageOptions}
+                  selectedLanguage={selectedLanguage}
+                  onSelectLanguage={onSelectLanguage}
+                  showLabel
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <TryInConsoleButton
+                  request={
+                    !indexHasMappings
+                      ? `${ingestExamples.sense.updateMappingsCommand(
+                          codeParams
+                        )}\n\n${ingestExamples.sense.ingestCommand(codeParams)}`
+                      : ingestExamples.sense.ingestCommand(codeParams)
+                  }
+                  application={application}
+                  sharePlugin={share}
+                  consolePlugin={consolePlugin}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiFlexItem>
+          {!indexHasMappings && (
+            <EuiFlexItem grow={false}>
               <GuideSelector
                 selectedWorkflowId={selectedWorkflowId}
                 onChange={(workflowId: WorkflowId) => {
                   setSelectedWorkflowId(workflowId);
                   usageTracker.click([
-                    AnalyticsEvents.indexDetailsCodeLanguageSelect,
-                    `${AnalyticsEvents.indexDetailsCodeLanguageSelect}_${workflowId}`,
+                    AnalyticsEvents.indexDetailsWorkflowSelect,
+                    `${AnalyticsEvents.indexDetailsWorkflowSelect}_${workflowId}`,
                   ]);
                 }}
                 showTour
-                container={panelRef}
               />
             </EuiFlexItem>
           )}
-          <EuiFlexItem grow={false}>
-            <TryInConsoleButton
-              request={
-                !indexHasMappings
-                  ? `${ingestExamples.sense.updateMappingsCommand(
-                      codeParams
-                    )}\n\n${ingestExamples.sense.ingestCommand(codeParams)}`
-                  : ingestExamples.sense.ingestCommand(codeParams)
-              }
-              application={application}
-              sharePlugin={share}
-              consolePlugin={consolePlugin}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        </EuiFlexItem>
         {!!workflow && (
           <EuiFlexItem>
             <EuiTitle>
@@ -129,14 +154,6 @@ export const AddDocumentsCodeExample = ({
             </EuiText>
           </EuiFlexItem>
         )}
-        <EuiFlexItem css={{ maxWidth: '300px' }} grow={false}>
-          <LanguageSelector
-            options={LanguageOptions}
-            selectedLanguage={selectedLanguage}
-            onSelectLanguage={onSelectLanguage}
-            showLabel
-          />
-        </EuiFlexItem>
         {selectedCodeExamples.installCommand && (
           <EuiFlexItem>
             <CodeSample

diff --git a/x-pack/solutions/search/plugins/search_indices/public/components/shared/api_key_callout.tsx b/x-pack/solutions/search/plugins/search_indices/public/components/shared/api_key_callout.tsx
@@ -39,8 +39,8 @@ export const APIKeyCallout = ({ apiKey }: APIKeyCalloutProps) => {
     <EuiPanel
       paddingSize="m"
       hasShadow={false}
-      hasBorder={true}
-      color="plain"
+      hasBorder={false}
+      color="subdued"
       data-test-subj={dataTestSubj}
     >
       <EuiFlexGroup direction="column" gutterSize="s">

diff --git a/...lutions/search/plugins/search_indices/public/components/shared/create_index_code_view.tsx b/...lutions/search/plugins/search_indices/public/components/shared/create_index_code_view.tsx
@@ -5,10 +5,18 @@
  * 2.0.
  */
 import React, { useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import { TryInConsoleButton } from '@kbn/try-in-console';
 
 import { useSearchApiKey } from '@kbn/search-api-keys-components';
+import { i18n } from '@kbn/i18n';
 import { Languages, AvailableLanguages, LanguageOptions } from '../../code_examples';
 
 import { useUsageTracker } from '../../hooks/use_usage_tracker';
@@ -17,10 +25,10 @@ import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url';
 
 import { APIKeyCallout } from './api_key_callout';
 import { CodeSample } from './code_sample';
-import { useWorkflow } from './hooks/use_workflow';
 import { LanguageSelector } from './language_selector';
 import { GuideSelector } from './guide_selector';
 import { Workflow, WorkflowId } from '../../code_examples/workflows';
+import { CreateIndexCodeExamples } from '../../types';
 
 export interface CreateIndexCodeViewProps {
   selectedLanguage: AvailableLanguages;
@@ -34,6 +42,7 @@ export interface CreateIndexCodeViewProps {
     installCommands: string;
     createIndex: string;
   };
+  selectedCodeExamples: CreateIndexCodeExamples;
 }
 
 export const CreateIndexCodeView = ({
@@ -44,10 +53,10 @@ export const CreateIndexCodeView = ({
   selectedWorkflow,
   indexName,
   selectedLanguage,
+  selectedCodeExamples,
 }: CreateIndexCodeViewProps) => {
   const { application, share, console: consolePlugin } = useKibana().services;
   const usageTracker = useUsageTracker();
-  const { createIndexExamples: selectedCodeExamples } = useWorkflow();
 
   const elasticsearchUrl = useElasticsearchUrl();
   const { apiKey } = useSearchApiKey();
@@ -70,31 +79,21 @@ export const CreateIndexCodeView = ({
           <APIKeyCallout apiKey={apiKey} />
         </EuiFlexItem>
       )}
+      <EuiHorizontalRule margin="none" />
       <EuiFlexItem>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
-          <EuiFlexItem grow={false}>
-            <GuideSelector
-              selectedWorkflowId={selectedWorkflow?.id || 'default'}
-              onChange={changeWorkflowId}
-              showTour={false}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <TryInConsoleButton
-              request={selectedCodeExamples.sense.createIndex(codeParams)}
-              application={application}
-              sharePlugin={share}
-              consolePlugin={consolePlugin}
-              telemetryId={`${selectedLanguage}_create_index`}
-              onClick={() => {
-                usageTracker.click([
-                  analyticsEvents.runInConsole,
-                  `${analyticsEvents.runInConsole}_${selectedLanguage}`,
-                ]);
-              }}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <EuiTitle size="xs">
+          <h5>
+            {i18n.translate('xpack.searchIndices.guideSelectors.selectGuideTitle', {
+              defaultMessage: 'Select a workflow guide',
+            })}
+          </h5>
+        </EuiTitle>
+        <EuiSpacer />
+        <GuideSelector
+          selectedWorkflowId={selectedWorkflow?.id || 'default'}
+          onChange={changeWorkflowId}
+          showTour={false}
+        />
       </EuiFlexItem>
       {!!selectedWorkflow && (
         <>
@@ -109,13 +108,30 @@ export const CreateIndexCodeView = ({
           </EuiFlexItem>
         </>
       )}
-      <EuiFlexItem css={{ maxWidth: '300px' }}>
-        <LanguageSelector
-          options={LanguageOptions}
-          selectedLanguage={selectedLanguage}
-          onSelectLanguage={changeCodingLanguage}
-        />
-      </EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false} css={{ maxWidth: '300px' }}>
+          <LanguageSelector
+            options={LanguageOptions}
+            selectedLanguage={selectedLanguage}
+            onSelectLanguage={changeCodingLanguage}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <TryInConsoleButton
+            request={selectedCodeExamples.sense.createIndex(codeParams)}
+            application={application}
+            sharePlugin={share}
+            consolePlugin={consolePlugin}
+            telemetryId={`${selectedLanguage}_create_index`}
+            onClick={() => {
+              usageTracker.click([
+                analyticsEvents.runInConsole,
+                `${analyticsEvents.runInConsole}_${selectedLanguage}`,
+              ]);
+            }}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
       {selectedCodeExample.installCommand && (
         <CodeSample
           title={selectedCodeExamples.installTitle}

diff --git a/...k/solutions/search/plugins/search_indices/public/components/shared/create_index_panel.tsx b/...k/solutions/search/plugins/search_indices/public/components/shared/create_index_panel.tsx
@@ -26,7 +26,7 @@ import { docLinks } from '../../../common/doc_links';
 import { useKibana } from '../../hooks/use_kibana';
 import { CreateIndexViewMode } from '../../types';
 
-const MAX_WIDTH = '650px';
+const WIDTH = '980px';
 
 export interface CreateIndexPanelProps {
   children: React.ReactNode | React.ReactNode[];
@@ -65,7 +65,7 @@ export const CreateIndexPanel = ({
         hasShadow={false}
         hasBorder
         style={{
-          maxWidth: MAX_WIDTH,
+          width: WIDTH,
           margin: '0 auto',
           padding: euiTheme.size.l,
           paddingTop: euiTheme.size.m,