Added confirmation modal to onboarding skip button (#19956)

closes https://linear.app/tryghost/issue/IPC-115/make-skip-onboarding-button-work

- show a confirmation modal when clicking the "Skip onboarding" button
- onboarding is only dismissed when confirm button is clicked in the modal

ghost/admin/app/components/dashboard/onboarding-checklist.hbs

@@ -71,6 +71,6 @@
     <p class="gh-onboarding-help">Need some more help? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" target="_blank" rel="noopener noreferrer">Help Center</a></p>
 
     {{#unless this.onboarding.allStepsCompleted}}
-        <a href="#" class="gh-onboarding-skip" {{on "click" this.onboarding.dismissChecklist}}>Skip onboarding</a>
+        <a href="#" class="gh-onboarding-skip" {{on "click" this.confirmDismiss}}>Skip onboarding</a>
     {{/unless}}
 </div>

ghost/admin/app/components/dashboard/onboarding-checklist.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import DismissModal from './onboarding/dismiss-modal';
 import ShareModal from './onboarding/share-modal';
 import {action} from '@ember/object';
 import {inject} from 'ghost-admin/decorators/inject';
@@ -10,13 +11,13 @@ export default class OnboardingChecklist extends Component {
 
     @inject config;
 
+    dismissModal = null;
     shareModal = null;
 
     willDestroy() {
         super.willDestroy(...arguments);
-        if (this.shareModal) {
+        this.dismissModal?.close();
-            this.shareModal.close();
+        this.shareModal?.close();
-        }
     }
 
     get siteUrl() {
@@ -28,4 +29,17 @@ export default class OnboardingChecklist extends Component {
         this.onboarding.markStepCompleted('share-publication');
         this.shareModal = this.modals.open(ShareModal);
     }
+
+    @action
+    async confirmDismiss() {
+        this.dismissModal = this.modals.open(DismissModal);
+
+        const reallyDismiss = await this.dismissModal;
+
+        if (reallyDismiss === true) {
+            this.onboarding.dismissChecklist();
+        } else {
+            this.dismissModal = null;
+        }
+    }
 }

ghost/admin/app/components/dashboard/onboarding/dismiss-modal.hbs

@@ -0,0 +1,19 @@
+<div class="modal-content">
+    <header class="modal-header">
+        <h1>Are you sure you want to skip onboarding?</h1>
+    </header>
+    <button class="close" title="Close" type="button" {{on "click" @close}}>{{svg-jar "close"}}<span
+            class="hidden">Close</span></button>
+
+    <div class="modal-body">
+        <p>
+            We're here to guide you every step of the way, but if you're ready
+            to explore on your own, that's okay, too.
+        </p>
+    </div>
+
+    <div class="modal-footer">
+        <button class="gh-btn" type="button" {{on "click" @close}}><span>Cancel</span></button>
+        <button class="gh-btn gh-btn-black" type="button" {{on "click" (fn @close true)}}><span>Skip onboarding</span></button>
+    </div>
+</div>