diff --git a/src/plugins/guided_onboarding/assets/well_done_animated.gif b/src/plugins/guided_onboarding/assets/well_done_animated.gif new file mode 100644 index 0000000000000..5af6564cd170a Binary files /dev/null and b/src/plugins/guided_onboarding/assets/well_done_animated.gif differ diff --git a/src/plugins/guided_onboarding/assets/well_done_animated_dark.gif b/src/plugins/guided_onboarding/assets/well_done_animated_dark.gif new file mode 100644 index 0000000000000..533d8515400c9 Binary files /dev/null and b/src/plugins/guided_onboarding/assets/well_done_animated_dark.gif differ diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts b/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts index 3636626ac1f38..121bafb23e8ee 100644 --- 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 index c04ba2e9e35be..e450eaedd85cd 100644 --- 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 = (
+ {isGuideReadyToComplete && ( + <> + + + + + )} +

{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 && ( <> - + {guideConfig.docs.text}