create quit modal component

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

@@ -36,6 +36,7 @@ import type { GuideConfig, StepConfig } from '../types';
 import type { ApiService } from '../services/api';
 
 import { GuideStep } from './guide_panel_step';
+import { QuitGuideModal } from './quit_guide_modal';
 import { getGuidePanelStyles } from './guide_panel.styles';
 
 interface GuidePanelProps {
@@ -84,6 +85,7 @@ const getProgress = (state?: GuideState): number => {
 export const GuidePanel = ({ api, application }: GuidePanelProps) => {
   const { euiTheme } = useEuiTheme();
   const [isGuideOpen, setIsGuideOpen] = useState(false);
+  const [isQuitGuideModalOpen, setIsQuitGuideModalOpen] = useState(false);
   const [guideState, setGuideState] = useState<GuideState | undefined>(undefined);
 
   const styles = getGuidePanelStyles(euiTheme);
@@ -108,6 +110,17 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
     await api.completeGuide(guideState!.guideId);
   };
 
+  const openQuitGuideModal = () => {
+    // Close the dropdown panel
+    setIsGuideOpen(false);
+    // Open the confirmation modal
+    setIsQuitGuideModalOpen(true);
+  };
+
+  const closeQuitGuideModal = () => {
+    setIsQuitGuideModalOpen(false);
+  };
+
   useEffect(() => {
     const subscription = api.fetchActiveGuideState$().subscribe((newGuideState) => {
       if (newGuideState) {
@@ -236,7 +249,7 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
 
               <EuiHorizontalRule />
 
-              {guideConfig?.steps.map((step, index, steps) => {
+              {guideConfig?.steps.map((step, index) => {
                 const accordionId = htmlIdGenerator(`accordion${index}`)();
                 const stepState = guideState?.steps[index];
 
@@ -271,10 +284,9 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
           <EuiFlyoutFooter css={styles.flyoutOverrides.flyoutFooter}>
             <EuiFlexGroup direction="column" alignItems="center" gutterSize="xs">
               <EuiFlexItem>
-                {/* TODO: Implement exit guide modal - https://github.com/elastic/kibana/issues/139804 */}
-                <EuiButtonEmpty onClick={() => {}}>
+                <EuiButtonEmpty onClick={openQuitGuideModal}>
                   {i18n.translate('guidedOnboarding.dropdownPanel.footer.exitGuideButtonLabel', {
-                    defaultMessage: 'Exit setup guide',
+                    defaultMessage: 'Quit setup guide',
                   })}
                 </EuiButtonEmpty>
               </EuiFlexItem>
@@ -325,6 +337,8 @@ export const GuidePanel = ({ api, application }: GuidePanelProps) => {
           </EuiFlyoutFooter>
         </EuiFlyout>
       )}
+
+      {isQuitGuideModalOpen && <QuitGuideModal closeModal={closeQuitGuideModal} />}
     </>
   );
 };

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

@@ -0,0 +1,67 @@
+/*
+ * 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 {
+  EuiModal,
+  EuiModalBody,
+  EuiSpacer,
+  EuiTitle,
+  EuiText,
+  EuiModalFooter,
+  EuiButtonEmpty,
+  EuiButton,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface QuitGuideModalProps {
+  closeModal: () => void;
+}
+
+export const QuitGuideModal = ({ closeModal }: QuitGuideModalProps) => {
+  return (
+    <EuiModal maxWidth={448} aria-label="quitGuideModal" onClose={closeModal}>
+      <EuiModalBody>
+        <EuiSpacer size="m" />
+        <EuiTitle size="m">
+          <h2>
+            {i18n.translate('guidedOnboarding.quitGuideModal.modalTitle', {
+              defaultMessage: 'Quit this setup guide and discard progress?',
+            })}
+          </h2>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        <EuiText>
+          <p>
+            {i18n.translate('guidedOnboarding.quitGuideModal.modalDescription', {
+              defaultMessage: 'You can restart anytime, just click Setup guide on the homepage.',
+            })}
+          </p>
+        </EuiText>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={closeModal}>
+          {i18n.translate('guidedOnboarding.quitGuideModal.cancelButtonLabel', {
+            defaultMessage: 'Cancel',
+          })}
+        </EuiButtonEmpty>
+        <EuiButton
+          color="warning"
+          onClick={() => {
+            // TODO implement
+          }}
+          fill
+        >
+          {i18n.translate('guidedOnboarding.quitGuideModal.quitButtonLabel', {
+            defaultMessage: 'Quit guide',
+          })}
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};