[Guided onboarding] Update header button logic

examples/guided_onboarding_example/public/components/main.tsx

@@ -113,7 +113,10 @@ export const Main = (props: MainProps) => {
       guideId: selectedGuide!,
     };
 
-    const response = await guidedOnboardingApi?.updateGuideState(updatedGuideState, true);
+    const response = await guidedOnboardingApi?.updatePluginState(
+      { status: 'in_progress', guide: updatedGuideState },
+      true
+    );
     if (response) {
       notifications.toasts.addSuccess(
         i18n.translate('guidedOnboardingExample.updateGuideState.toastLabel', {

src/plugins/guided_onboarding/common/types.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { GuideState } from '@kbn/guided-onboarding';
+
+/**
+ * Guided onboarding overall status:
+ *  not_started: no guides have been started yet
+ *  in_progress: a guide is currently active
+ *  complete: at least one guide has been completed
+ *  quit: the user quit a guide before completion
+ *  skipped: the user skipped on the landing page
+ */
+export type PluginStatus = 'not_started' | 'in_progress' | 'complete' | 'quit' | 'skipped';
+
+export interface PluginState {
+  status: PluginStatus;
+  // a specific period after deployment creation when guided onboarding UI is highlighted
+  isActivePeriod: boolean;
+  activeGuide?: GuideState;
+}

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

@@ -11,13 +11,15 @@ import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { GuideState } from '@kbn/guided-onboarding';
 
+import type { PluginState } from '../../common/types';
 import { getStepConfig } from '../services/helpers';
 import { GuideButtonPopover } from './guide_button_popover';
 
 interface GuideButtonProps {
-  guideState: GuideState;
+  pluginState: PluginState | undefined;
   toggleGuidePanel: () => void;
   isGuidePanelOpen: boolean;
+  navigateToLandingPage: () => void;
 }
 
 const getStepNumber = (state: GuideState): number | undefined => {
@@ -39,12 +41,45 @@ const getStepNumber = (state: GuideState): number | undefined => {
 };
 
 export const GuideButton = ({
-  guideState,
+  pluginState,
   toggleGuidePanel,
   isGuidePanelOpen,
+  navigateToLandingPage,
 }: GuideButtonProps) => {
-  const stepNumber = getStepNumber(guideState);
-  const stepReadyToComplete = guideState.steps.find((step) => step.status === 'ready_to_complete');
+  // TODO handle loading, error state
+  // https://github.com/elastic/kibana/issues/139799, https://github.com/elastic/kibana/issues/139798
+
+  // if there is no active guide
+  if (!pluginState || !pluginState.activeGuide || !pluginState.activeGuide.isActive) {
+    // if still active period and the user has not started a guide, quit or skipped the guide,
+    // display the button that redirects to the landing page
+    if (
+      pluginState?.isActivePeriod &&
+      (pluginState?.status === 'not_started' ||
+        pluginState?.status === 'quit' ||
+        pluginState?.status === 'skipped')
+    ) {
+      return (
+        <EuiButton
+          onClick={navigateToLandingPage}
+          color="success"
+          fill
+          size="s"
+          data-test-subj="guideButtonRedirect"
+        >
+          {i18n.translate('guidedOnboarding.guidedSetupRedirectButtonLabel', {
+            defaultMessage: 'Launch setup guide',
+          })}
+        </EuiButton>
+      );
+    }
+
+    return null;
+  }
+  const stepNumber = getStepNumber(pluginState.activeGuide);
+  const stepReadyToComplete = pluginState.activeGuide.steps.find(
+    (step) => step.status === 'ready_to_complete'
+  );
   const button = (
     <EuiButton
       onClick={toggleGuidePanel}
@@ -66,7 +101,7 @@ export const GuideButton = ({
     </EuiButton>
   );
   if (stepReadyToComplete) {
-    const stepConfig = getStepConfig(guideState.guideId, stepReadyToComplete.id);
+    const stepConfig = getStepConfig(pluginState.activeGuide.guideId, stepReadyToComplete.id);
     // check if the stepConfig has manualCompletion info
     if (stepConfig && stepConfig.manualCompletion) {
       return (