[Guided onboarding] Support "done" state in dropdown panel (#143124)

src/plugins/guided_onboarding/public/components/guide_panel.test.tsx

@@ -192,8 +192,8 @@ describe('Guided setup', () => {
       expect(exists('guideProgress')).toBe(true);
     });
 
-    test('should show the "Continue using Elastic" button when all steps has been completed', async () => {
-      const { component, exists } = testBed;
+    test('should show the completed state when all steps has been completed', async () => {
+      const { component, exists, find } = testBed;
 
       const readyToCompleteGuideState: GuideState = {
         guideId: 'search',
@@ -217,6 +217,10 @@ describe('Guided setup', () => {
 
       await updateComponentWithState(component, readyToCompleteGuideState, true);
 
+      expect(find('guideTitle').text()).toContain('Well done');
+      expect(find('guideDescription').text()).toContain(
+        `You've completed the Elastic Enterprise Search guide`
+      );
       expect(exists('useElasticButton')).toBe(true);
     });
 

src/plugins/guided_onboarding/public/components/guide_panel.tsx

@@ -32,7 +32,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { ApplicationStart } from '@kbn/core/public';
 
 import type { GuideState, GuideStep as GuideStepStatus } from '../../common/types';
-import type { StepConfig } from '../types';
+import type { GuideConfig, StepConfig } from '../types';
 
 import type { ApiService } from '../services/api';
 import { getGuideConfig } from '../services/helpers';
@@ -99,8 +99,15 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
     application.navigateToApp('home', { path: '#getting_started' });
   };
 
-  const completeGuide = async () => {
+  const completeGuide = async (
+    completedGuideRedirectLocation: GuideConfig['completedGuideRedirectLocation']
+  ) => {
     await api.completeGuide(guideState!.guideId);
+
+    if (completedGuideRedirectLocation) {
+      const { appID, path } = completedGuideRedirectLocation;
+      application.navigateToApp(appID, { path });
+    }
   };
 
   const openQuitGuideModal = () => {
@@ -150,6 +157,7 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
   }
 
   const stepsCompleted = getProgress(guideState);
+  const isGuideReadyToComplete = guideState?.status === 'ready_to_complete';
 
   return (
     <>
@@ -182,7 +190,13 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
             </EuiButtonEmpty>
 
             <EuiTitle size="m">
-              <h2>{guideConfig?.title}</h2>
+              <h2 data-test-subj="guideTitle">
+                {isGuideReadyToComplete
+                  ? i18n.translate('guidedOnboarding.dropdownPanel.completeGuideFlyoutTitle', {
+                      defaultMessage: 'Well done!',
+                    })
+                  : guideConfig.title}
+              </h2>
             </EuiTitle>
 
             <EuiSpacer size="s" />
@@ -192,7 +206,19 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
           <EuiFlyoutBody css={styles.flyoutOverrides.flyoutBody}>
             <div>
               <EuiText size="m">
-                <p>{guideConfig?.description}</p>
+                <p data-test-subj="guideDescription">
+                  {isGuideReadyToComplete
+                    ? i18n.translate(
+                        'guidedOnboarding.dropdownPanel.completeGuideFlyoutDescription',
+                        {
+                          defaultMessage: `You've completed the Elastic {guideName} guide.`,
+                          values: {
+                            guideName: guideConfig.guideName,
+                          },
+                        }
+                      )
+                    : guideConfig.description}
+                </p>
               </EuiText>
 
               {guideConfig.docs && (
@@ -212,9 +238,15 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
                   <EuiSpacer size="xl" />
                   <EuiProgress
                     data-test-subj="guideProgress"
-                    label={i18n.translate('guidedOnboarding.dropdownPanel.progressLabel', {
-                      defaultMessage: 'Progress',
-                    })}
+                    label={
+                      isGuideReadyToComplete
+                        ? i18n.translate('guidedOnboarding.dropdownPanel.completedLabel', {
+                            defaultMessage: 'Completed',
+                          })
+                        : i18n.translate('guidedOnboarding.dropdownPanel.progressLabel', {
+                            defaultMessage: 'Progress',
+                          })
+                    }
                     value={stepsCompleted}
                     valueText={i18n.translate('guidedOnboarding.dropdownPanel.progressValueLabel', {
                       defaultMessage: '{stepCount} steps',
@@ -250,10 +282,14 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
                 }
               })}
 
-              {guideState?.status === 'ready_to_complete' && (
+              {isGuideReadyToComplete && (
                 <EuiFlexGroup justifyContent="flexEnd">
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={completeGuide} fill data-test-subj="useElasticButton">
+                    <EuiButton
+                      onClick={() => completeGuide(guideConfig.completedGuideRedirectLocation)}
+                      fill
+                      data-test-subj="useElasticButton"
+                    >
                       {i18n.translate('guidedOnboarding.dropdownPanel.elasticButtonLabel', {
                         defaultMessage: 'Continue using Elastic',
                       })}

src/plugins/guided_onboarding/public/constants/guides_config/observability.ts

@@ -11,6 +11,7 @@ import type { GuideConfig } from '../../types';
 export const observabilityConfig: GuideConfig = {
   title: 'Observe my Kubernetes infrastructure',
   description: `We'll help you quickly gain visibility into your Kubernetes environment using Elastic's out-of-the-box integration. Gain deep insights from your logs, metrics, and traces, and proactively detect issues and take action to resolve issues.`,
+  guideName: 'Kubernetes',
   docs: {
     text: 'Kubernetes documentation',
     url: 'example.com', // TODO update link to correct docs page

src/plugins/guided_onboarding/public/constants/guides_config/search.ts

@@ -11,6 +11,7 @@ import type { GuideConfig } from '../../types';
 export const searchConfig: GuideConfig = {
   title: 'Search my data',
   description: `We'll help you build world-class search experiences with your data, using Elastic's out-of-the-box web crawler, connectors, and our robust APIs. Gain deep insights from the built-in search analytics and use that data to inform changes to relevance.`,
+  guideName: 'Enterprise Search',
   docs: {
     text: 'Enterprise Search 101 Documentation',
     url: 'example.com',

src/plugins/guided_onboarding/public/constants/guides_config/security.ts

@@ -10,6 +10,11 @@ import type { GuideConfig } from '../../types';
 
 export const securityConfig: GuideConfig = {
   title: 'Get started with SIEM',
+  guideName: 'Security',
+  completedGuideRedirectLocation: {
+    appID: 'security',
+    path: '/app/security/dashboards',
+  },
   description:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula enim, malesuada a finibus vel, cursus sed risus. Vivamus pretium, elit dictum lacinia aliquet, libero nibh dictum enim, a rhoncus leo magna in sapien.',
   steps: [

src/plugins/guided_onboarding/public/types.ts

@@ -74,10 +74,15 @@ export interface StepConfig {
 export interface GuideConfig {
   title: string;
   description: string;
+  guideName: string;
   docs?: {
     text: string;
     url: string;
   };
+  completedGuideRedirectLocation?: {
+    appID: string;
+    path: string;
+  };
   steps: StepConfig[];
 }