[Guided onboarding] Home changes

packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.test.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 React from 'react';
+import { shallow } from 'enzyme';
+
+import { GuideCardFooter, GuideCardFooterProps } from './guide_card_footer';
+import { GuideState } from '../../types';
+
+const defaultProps: GuideCardFooterProps = {
+  guides: [],
+  useCase: 'search',
+  activateGuide: jest.fn(),
+};
+
+const searchGuideState: GuideState = {
+  guideId: 'search',
+  status: 'not_started',
+  steps: [
+    { id: 'add_data', status: 'complete' },
+    { id: 'browse_docs', status: 'in_progress' },
+  ],
+  isActive: true,
+};
+describe('guide card footer', () => {
+  describe('snapshots', () => {
+    test('should render the footer when the guided onboarding has not started yet', async () => {
+      const component = await shallow(<GuideCardFooter {...defaultProps} />);
+      expect(component).toMatchSnapshot();
+    });
+
+    test('should render the footer when the guide has not started yet', async () => {
+      const component = await shallow(
+        <GuideCardFooter {...defaultProps} guides={[searchGuideState]} />
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('should render the footer when the guide is in progress', async () => {
+      const component = await shallow(
+        <GuideCardFooter
+          {...defaultProps}
+          guides={[{ ...searchGuideState, status: 'in_progress' }]}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('should render the footer when the guide is ready to complete', async () => {
+      const component = await shallow(
+        <GuideCardFooter
+          {...defaultProps}
+          guides={[{ ...searchGuideState, status: 'ready_to_complete' }]}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('should render the footer when the guide has been completed', async () => {
+      const component = await shallow(
+        <GuideCardFooter {...defaultProps} guides={[{ ...searchGuideState, status: 'complete' }]} />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
+});

packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx

@@ -12,15 +12,40 @@ import { i18n } from '@kbn/i18n';
 import { GuideId, GuideState } from '../../types';
 import { UseCase } from './use_case_card';
 
-export const GuideCardFooter = ({
-  guides,
-  useCase,
-  activateGuide,
-}: {
+const viewGuideLabel = i18n.translate(
+  'guidedOnboardingPackage.gettingStarted.guideCard.startGuide.buttonLabel',
+  {
+    defaultMessage: 'View guide',
+  }
+);
+
+const continueGuideLabel = i18n.translate(
+  'guidedOnboardingPackage.gettingStarted.guideCard.continueGuide.buttonLabel',
+  {
+    defaultMessage: 'Continue',
+  }
+);
+
+const completedLabel = i18n.translate(
+  'guidedOnboardingPackage.gettingStarted.guideCard.progress.completedLabel',
+  {
+    defaultMessage: 'Completed',
+  }
+);
+
+const inProgressLabel = i18n.translate(
+  'guidedOnboardingPackage.gettingStarted.guideCard.progress.inProgressLabel',
+  {
+    defaultMessage: 'In progress',
+  }
+);
+
+export interface GuideCardFooterProps {
   guides: GuideState[];
   useCase: UseCase;
   activateGuide: (useCase: UseCase, guideState?: GuideState) => void;
-}) => {
+}
+export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFooterProps) => {
   const guideState = guides.find((guide) => guide.guideId === (useCase as GuideId));
   const viewGuideButton = (
     <div className="eui-textCenter">
@@ -30,9 +55,7 @@ export const GuideCardFooter = ({
         fill
         onClick={() => activateGuide(useCase, guideState)}
       >
-        {i18n.translate('guidedOnboardingPackage.gettingStarted.guideCard.startGuide.buttonLabel', {
-          defaultMessage: 'View guide',
-        })}
+        {viewGuideLabel}
       </EuiButton>
     </div>
   );
@@ -58,29 +81,10 @@ export const GuideCardFooter = ({
           value={numberCompleteSteps}
           max={numberSteps}
           size="s"
-          label={i18n.translate(
-            'guidedOnboardingPackage.gettingStarted.guideCard.progress.completedLabel',
-            {
-              defaultMessage: 'Completed',
-            }
-          )}
+          label={completedLabel}
         />
         <EuiSpacer size="l" />
-        <div className="eui-textCenter">
-          <EuiButton
-            // Used for FS tracking
-            data-test-subj={`onboarding--guideCard--view--${useCase}`}
-            fill
-            onClick={() => activateGuide(useCase, guideState)}
-          >
-            {i18n.translate(
-              'guidedOnboardingPackage.gettingStarted.guideCard.startGuide.buttonLabel',
-              {
-                defaultMessage: 'View guide',
-              }
-            )}
-          </EuiButton>
-        </div>
+        {viewGuideButton}
       </>
     );
   }
@@ -92,12 +96,7 @@ export const GuideCardFooter = ({
         value={numberCompleteSteps}
         max={numberSteps}
         size="s"
-        label={i18n.translate(
-          'guidedOnboardingPackage.gettingStarted.guideCard.progress.inProgressLabel',
-          {
-            defaultMessage: 'In progress',
-          }
-        )}
+        label={inProgressLabel}
       />
       <EuiSpacer size="l" />
       <div className="eui-textCenter">
@@ -107,12 +106,7 @@ export const GuideCardFooter = ({
           fill
           onClick={() => activateGuide(useCase, guideState)}
         >
-          {i18n.translate(
-            'guidedOnboardingPackage.gettingStarted.guideCard.continueGuide.buttonLabel',
-            {
-              defaultMessage: 'Continue',
-            }
-          )}
+          {continueGuideLabel}
         </EuiButton>
       </div>
     </>

src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx

@@ -72,6 +72,7 @@ export const GettingStarted = () => {
       setGuidesState(allGuides.state);
     }
   }, [guidedOnboardingService]);
+
   useEffect(() => {
     fetchGuidesState();
   }, [fetchGuidesState]);