Implement "completed" guide animation (#149530)

Fixes #147387 ### Screenshots <img width="522" alt="Screenshot 2023-01-27 at 14 49 09" src="https://user-images.githubusercontent.com/91763/215115481-beab7f69-60c6-48f5-8ab0-d8dcb67fabb7.png"> <img width="559" alt="Screenshot 2023-01-27 at 14 49 52" src="https://user-images.githubusercontent.com/91763/215115506-5bf328a0-7b47-44d5-b9db-62f5a30dfed7.png">
elastic · Jan 30, 2023 · 1a05388 · 1a05388
1 parent 82a4c5e
commit 1a05388
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/src/plugins/guided_onboarding/assets/well_done_animated.gif b/src/plugins/guided_onboarding/assets/well_done_animated.gif
diff --git a/src/plugins/guided_onboarding/assets/well_done_animated_dark.gif b/src/plugins/guided_onboarding/assets/well_done_animated_dark.gif
diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts b/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts
@@ -30,6 +30,9 @@ export const getGuidePanelStyles = ({
   setupButton: css`
     margin-right: ${euiTheme.size.m};
   `,
+  wellDoneAnimatedPrompt: css`
+    text-align: left;
+  `,
   flyoutOverrides: {
     flyoutHeader: css`
       background: url(${isDarkTheme ? panelBgTopDark : panelBgTop}) top right no-repeat;

diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.tsx b/src/plugins/guided_onboarding/public/components/guide_panel.tsx
@@ -25,6 +25,7 @@ import {
   EuiFlexItem,
   useEuiTheme,
   EuiEmptyPrompt,
+  EuiImage,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -42,6 +43,9 @@ import { QuitGuideModal } from './quit_guide_modal';
 import { getGuidePanelStyles } from './guide_panel.styles';
 import { GuideButton } from './guide_button';
 
+import wellDoneAnimatedGif from '../../assets/well_done_animated.gif';
+import wellDoneAnimatedDarkGif from '../../assets/well_done_animated_dark.gif';
+
 interface GuidePanelProps {
   api: GuidedOnboardingApi;
   application: ApplicationStart;
@@ -220,6 +224,9 @@ export const GuidePanel = ({ api, application, notifications, uiSettings }: Guid
 
   const stepsCompleted = getProgress(pluginState?.activeGuide);
   const isGuideReadyToComplete = pluginState?.activeGuide?.status === 'ready_to_complete';
+  const getImageUrl = () => {
+    return isDarkTheme ? wellDoneAnimatedDarkGif : wellDoneAnimatedGif;
+  };
 
   const backToGuidesButton = (
     <EuiButtonEmpty
@@ -277,13 +284,27 @@ export const GuidePanel = ({ api, application, notifications, uiSettings }: Guid
 
               <EuiFlyoutBody css={styles.flyoutOverrides.flyoutBody}>
                 <div>
+                  {isGuideReadyToComplete && (
+                    <>
+                      <EuiImage
+                        size="fullWidth"
+                        src={getImageUrl()}
+                        alt={i18n.translate('guidedOnboarding.dropdownPanel.wellDoneAnimatedGif', {
+                          defaultMessage: `Guide completed animated gif`,
+                        })}
+                      />
+
+                      <EuiSpacer />
+                    </>
+                  )}
+
                   <EuiText size="m">
                     <p data-test-subj="guideDescription">
                       {isGuideReadyToComplete
                         ? i18n.translate(
                             'guidedOnboarding.dropdownPanel.completeGuideFlyoutDescription',
                             {
-                              defaultMessage: `You've completed the Elastic {guideName} guide.`,
+                              defaultMessage: `You've completed the Elastic {guideName} guide. Feel free to come back to the Guides for more onboarding help or a refresher.`,
                               values: {
                                 guideName: guideConfig.guideName,
                               },
@@ -295,7 +316,7 @@ export const GuidePanel = ({ api, application, notifications, uiSettings }: Guid
 
                   {guideConfig.docs && (
                     <>
-                      <EuiSpacer size="s" />
+                      <EuiSpacer size="l" />
                       <EuiText size="m">
                         <EuiLink external target="_blank" href={guideConfig.docs.url}>
                           {guideConfig.docs.text}