Disable guided onboarding on serverless (#168303)

elastic · Nov 3, 2023 · 2b1cd4d · 2b1cd4d
1 parent ef67add
commit 2b1cd4d
Show file tree

Hide file tree

Showing 39 changed files with 208 additions and 155 deletions.
diff --git a/config/serverless.yml b/config/serverless.yml
@@ -51,9 +51,12 @@ xpack.index_management.enableDataStreamsStorageColumn: false
 dev_tools.deeplinks.navLinkStatus: visible
 management.deeplinks.navLinkStatus: visible
 
+# Onboarding team UI configurations
+xpack.cloud_integrations.data_migration.enabled: false
+guided_onboarding.enabled: false
+
 # Other disabled plugins
 xpack.canvas.enabled: false
-xpack.cloud_integrations.data_migration.enabled: false
 data.search.sessions.enabled: false
 advanced_settings.enabled: false
 

diff --git a/examples/guided_onboarding_example/kibana.jsonc b/examples/guided_onboarding_example/kibana.jsonc
@@ -8,7 +8,9 @@
     "server": true,
     "browser": true,
     "requiredPlugins": [
-      "navigation",
+      "navigation"
+    ],
+    "optionalPlugins": [
       "guidedOnboarding"
     ]
   }

diff --git a/examples/guided_onboarding_example/public/components/app.tsx b/examples/guided_onboarding_example/public/components/app.tsx
@@ -39,7 +39,7 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
             />
           }
         />
-        {guidedOnboarding.guidedOnboardingApi?.isEnabled ? (
+        {guidedOnboarding?.guidedOnboardingApi?.isEnabled ? (
           <EuiPageTemplate.Section>
             <Router history={history}>
               <Routes>

diff --git a/examples/guided_onboarding_example/public/components/main.tsx b/examples/guided_onboarding_example/public/components/main.tsx
@@ -31,7 +31,7 @@ import type { GuideState, GuideStepIds, GuideId, GuideStep } from '@kbn/guided-o
 import type { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public';
 
 interface MainProps {
-  guidedOnboarding: GuidedOnboardingPluginStart;
+  guidedOnboarding?: GuidedOnboardingPluginStart;
   notifications: CoreStart['notifications'];
 }
 
@@ -48,10 +48,7 @@ const selectOptions: EuiSelectOption[] = exampleGuideIds.map((guideId) => ({
   text: guideId,
 }));
 export const Main = (props: MainProps) => {
-  const {
-    guidedOnboarding: { guidedOnboardingApi },
-    notifications,
-  } = props;
+  const { guidedOnboarding, notifications } = props;
   const history = useHistory();
   const [guidesState, setGuidesState] = useState<GuideState[] | undefined>(undefined);
   const [activeGuide, setActiveGuide] = useState<GuideState | undefined>(undefined);
@@ -61,12 +58,12 @@ export const Main = (props: MainProps) => {
 
   useEffect(() => {
     const fetchGuidesState = async () => {
-      const newGuidesState = await guidedOnboardingApi?.fetchAllGuidesState();
+      const newGuidesState = await guidedOnboarding?.guidedOnboardingApi?.fetchAllGuidesState();
       setGuidesState(newGuidesState ? newGuidesState.state : []);
     };
 
     fetchGuidesState();
-  }, [guidedOnboardingApi]);
+  }, [guidedOnboarding]);
 
   useEffect(() => {
     const newActiveGuide = guidesState?.find((guide) => guide.isActive === true);
@@ -76,7 +73,10 @@ export const Main = (props: MainProps) => {
   }, [guidesState, setActiveGuide]);
 
   const activateGuide = async (guideId: GuideId, guideState?: GuideState) => {
-    const response = await guidedOnboardingApi?.activateGuide(guideId, guideState);
+    const response = await guidedOnboarding?.guidedOnboardingApi?.activateGuide(
+      guideId,
+      guideState
+    );
 
     if (response) {
       notifications.toasts.addSuccess(
@@ -92,7 +92,9 @@ export const Main = (props: MainProps) => {
       return;
     }
 
-    const selectedGuideConfig = await guidedOnboardingApi?.getGuideConfig(selectedGuide);
+    const selectedGuideConfig = await guidedOnboarding?.guidedOnboardingApi?.getGuideConfig(
+      selectedGuide
+    );
 
     if (!selectedGuideConfig) {
       return;
@@ -134,7 +136,7 @@ export const Main = (props: MainProps) => {
       guideId: selectedGuide!,
     };
 
-    const response = await guidedOnboardingApi?.updatePluginState(
+    const response = await guidedOnboarding?.guidedOnboardingApi?.updatePluginState(
       { status: 'in_progress', guide: updatedGuideState },
       true
     );
@@ -170,7 +172,7 @@ export const Main = (props: MainProps) => {
           <p>
             <FormattedMessage
               id="guidedOnboardingExample.guidesSelection.state.explanation"
-              defaultMessage="The guide state on this page is updated automatically via an Observable,
+              defaultMessage="The guide state on this page is updated automatically via an Observable subscription,
               so there is no need to 'load' the state from the server."
             />
           </p>

diff --git a/examples/guided_onboarding_example/public/components/step_four.tsx b/examples/guided_onboarding_example/public/components/step_four.tsx
@@ -16,24 +16,22 @@ import { EuiPageHeader, EuiPageSection, EuiCode } from '@elastic/eui';
 import { useParams } from 'react-router-dom';
 
 interface StepFourProps {
-  guidedOnboarding: GuidedOnboardingPluginStart;
+  guidedOnboarding?: GuidedOnboardingPluginStart;
 }
 
-export const StepFour: React.FC<StepFourProps> = ({
-  guidedOnboarding: { guidedOnboardingApi },
-}) => {
+export const StepFour: React.FC<StepFourProps> = ({ guidedOnboarding }) => {
   const { indexName } = useParams<{ indexName: string }>();
 
   const [, setIsTourStepOpen] = useState<boolean>(false);
 
   useEffect(() => {
-    const subscription = guidedOnboardingApi
+    const subscription = guidedOnboarding?.guidedOnboardingApi
       ?.isGuideStepActive$('testGuide', 'step4')
       .subscribe((isStepActive) => {
         setIsTourStepOpen(isStepActive);
       });
     return () => subscription?.unsubscribe();
-  }, [guidedOnboardingApi]);
+  }, [guidedOnboarding]);
 
   return (
     <>
@@ -65,7 +63,7 @@ export const StepFour: React.FC<StepFourProps> = ({
 
         <EuiButton
           onClick={async () => {
-            await guidedOnboardingApi?.completeGuideStep('testGuide', 'step4');
+            await guidedOnboarding?.guidedOnboardingApi?.completeGuideStep('testGuide', 'step4');
           }}
         >
           Complete step 4

diff --git a/examples/guided_onboarding_example/public/components/step_one.tsx b/examples/guided_onboarding_example/public/components/step_one.tsx
@@ -23,27 +23,25 @@ import {
   EuiFormRow,
 } from '@elastic/eui';
 
-import useObservable from 'react-use/lib/useObservable';
-
 import { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public/types';
 
 interface GuidedOnboardingExampleAppDeps {
-  guidedOnboarding: GuidedOnboardingPluginStart;
+  guidedOnboarding?: GuidedOnboardingPluginStart;
 }
 
 export const StepOne = ({ guidedOnboarding }: GuidedOnboardingExampleAppDeps) => {
-  const { guidedOnboardingApi } = guidedOnboarding;
-
   const [isTourStepOpen, setIsTourStepOpen] = useState<boolean>(false);
   const [indexName, setIndexName] = useState('test1234');
 
-  const isTourActive = useObservable(
-    guidedOnboardingApi!.isGuideStepActive$('testGuide', 'step1'),
-    false
-  );
   useEffect(() => {
-    setIsTourStepOpen(isTourActive);
-  }, [isTourActive]);
+    const subscription = guidedOnboarding?.guidedOnboardingApi
+      ?.isGuideStepActive$('testGuide', 'step1')
+      .subscribe((isStepActive) => {
+        setIsTourStepOpen(isStepActive);
+      });
+    return () => subscription?.unsubscribe();
+  }, [guidedOnboarding]);
+
   return (
     <>
       <EuiPageHeader>
@@ -107,9 +105,13 @@ export const StepOne = ({ guidedOnboarding }: GuidedOnboardingExampleAppDeps) =>
               >
                 <EuiButton
                   onClick={async () => {
-                    await guidedOnboardingApi?.completeGuideStep('testGuide', 'step1', {
-                      indexName,
-                    });
+                    await guidedOnboarding?.guidedOnboardingApi?.completeGuideStep(
+                      'testGuide',
+                      'step1',
+                      {
+                        indexName,
+                      }
+                    );
                   }}
                 >
                   Complete step 1

diff --git a/examples/guided_onboarding_example/server/plugin.ts b/examples/guided_onboarding_example/server/plugin.ts
@@ -11,7 +11,7 @@ import { PluginInitializerContext, CoreSetup, Plugin, Logger } from '@kbn/core/s
 import { testGuideId, testGuideConfig } from '@kbn/guided-onboarding';
 
 interface PluginsSetup {
-  guidedOnboarding: GuidedOnboardingPluginSetup;
+  guidedOnboarding?: GuidedOnboardingPluginSetup;
 }
 
 export class GuidedOnboardingExamplePlugin implements Plugin {
@@ -23,7 +23,7 @@ export class GuidedOnboardingExamplePlugin implements Plugin {
 
   public setup(coreSetup: CoreSetup, { guidedOnboarding }: PluginsSetup) {
     this.logger.debug('guidedOnboardingExample: Setup');
-    guidedOnboarding.registerGuideConfig(testGuideId, testGuideConfig);
+    guidedOnboarding?.registerGuideConfig(testGuideId, testGuideConfig);
     return {};
   }