Merge branch 'refactor-handle-exit-tour' into 'master'

Refactor the exit tour event loop in onboarding tour

See merge request gitlab-org/gitlab!17634

ee/app/assets/javascripts/onboarding/constants.js

@@ -57,11 +57,5 @@ export const EXIT_TOUR_CONTENT = {
     },
     false,
   ),
-  buttons: [
-    {
-      text: s__("UserOnboardingTour|Close 'Learn GitLab'"),
-      btnClass: 'btn-primary',
-      exitTour: true,
-    },
-  ],
+  exitTour: true,
 };

ee/app/assets/javascripts/onboarding/onboarding_helper/components/app.vue

@@ -138,14 +138,7 @@ export default {
       }
     },
     handleClickPopoverButton(button) {
-      const {
-        showExitTourContent,
-        exitTour,
-        redirectPath,
-        nextPart,
-        dismissPopover,
-        showFeedbackTourContent,
-      } = button;
+      const { showExitTourContent, redirectPath, nextPart, dismissPopover } = button;
       const helpContentItems = this.stepContent
         ? this.stepContent.getHelpContent({ projectName: this.projectName })
         : null;
@@ -154,24 +147,12 @@ export default {
         helpContentItems.length > 1 &&
         this.helpContentIndex < helpContentItems.length - 1;
 
-      // display feedback content after user hits the exit button
-      if (showFeedbackTourContent) {
-        this.handleFeedbackTourContent(true);
-        return;
-      }
-
       // display exit tour content
       if (showExitTourContent) {
         this.handleShowExitTourContent(true);
         return;
       }
 
-      // quit tour
-      if (exitTour) {
-        this.handleExitTour();
-        return;
-      }
-
       // dismiss popover if necessary
       if (_.isUndefined(dismissPopover) || dismissPopover === true) {
         this.dismissPopover = true;
@@ -236,7 +217,7 @@ export default {
       this.showStepContent = true;
       this.setExitTour(showExitTour);
     },
-    handleExitTour() {
+    handleExitTourButton() {
       this.hideActionPopover();
       this.setDismissed(true);
 
@@ -268,12 +249,12 @@ export default {
       :dismiss-popover="dismissPopover"
       :golden-tanuki-svg-path="goldenTanukiSvgPath"
       @clickPopoverButton="handleClickPopoverButton"
+      @clickExitTourButton="handleExitTourButton"
       @clickFeedbackButton="handleFeedbackButton"
       @restartStep="handleRestartStep"
       @skipStep="handleSkipStep"
       @showFeedbackContent="handleFeedbackTourContent"
       @showExitTourContent="handleShowExitTourContent"
-      @exitTour="handleExitTour"
     />
   </transition>
 </template>

ee/app/assets/javascripts/onboarding/onboarding_helper/components/help_content_popover.vue

@@ -38,6 +38,9 @@ export default {
     callButtonAction(button) {
       this.$emit('clickActionButton', button);
     },
+    callExitTour() {
+      this.$emit('clickExitTourButton');
+    },
     submitFeedback(button) {
       this.$emit('clickFeedbackButton', button);
     },
@@ -72,6 +75,11 @@ export default {
           </span>
         </template>
       </template>
+      <template v-if="helpContent.exitTour">
+        <gl-button class="btn btn-sm btn-primary mr-2" @click="callExitTour">
+          {{ s__("UserOnboardingTour|Close 'Learn GitLab'") }}
+        </gl-button>
+      </template>
       <template v-if="helpContent.feedbackButtons">
         <gl-button-group>
           <gl-button

ee/app/assets/javascripts/onboarding/onboarding_helper/components/onboarding_helper.vue

@@ -138,6 +138,9 @@ export default {
     callButtonAction(button) {
       this.$emit('clickPopoverButton', button);
     },
+    callExitTour() {
+      this.$emit('clickExitTourButton');
+    },
     submitFeedback(button) {
       this.$emit('clickFeedbackButton', button);
     },
@@ -161,6 +164,7 @@ export default {
       :show="showPopover"
       :disabled="popoverDismissed"
       @clickActionButton="callButtonAction"
+      @clickExitTourButton="callExitTour"
       @clickFeedbackButton="submitFeedback"
     />
     <div class="d-flex align-items-center cursor-pointer">

ee/spec/javascripts/onboarding/onboarding_helper/components/app_spec.js

@@ -229,18 +229,6 @@ describe('User onboarding helper app', () => {
         expect(vm.showExitTourContent).toHaveBeenCalledWith(true);
       });
 
-      it('quits the tour', () => {
-        spyOn(vm, 'handleExitTour');
-
-        const button = {
-          exitTour: true,
-        };
-
-        vm.handleClickPopoverButton(button);
-
-        expect(vm.handleExitTour).toHaveBeenCalled();
-      });
-
       it('sets dismissPopover to true when true/undefined on button config', () => {
         let button = {
           dismissPopover: true,
@@ -365,19 +353,19 @@ describe('User onboarding helper app', () => {
       });
     });
 
-    describe('handleExitTour', () => {
-      it('calls the "hideActionPopover" method', () => {
-        spyOn(vm, 'hideActionPopover');
+    describe('handleExitTourButton', () => {
+      it('emits the "onboardingHelper.hideActionPopover" event', () => {
+        spyOn(eventHub, '$emit');
 
-        vm.handleExitTour();
+        vm.handleExitTourButton();
 
-        expect(vm.hideActionPopover).toHaveBeenCalled();
+        expect(eventHub.$emit).toHaveBeenCalledWith('onboardingHelper.hideActionPopover');
       });
 
       it('calls the "setDismissed" method with true', () => {
         spyOn(vm.$store, 'dispatch');
 
-        vm.handleExitTour();
+        vm.handleExitTourButton();
 
         expect(vm.$store.dispatch).toHaveBeenCalledWith('setDismissed', true);
       });
@@ -385,7 +373,7 @@ describe('User onboarding helper app', () => {
       it('emits the "onboardingHelper.destroyActionPopover" event', () => {
         spyOn(eventHub, '$emit');
 
-        vm.handleExitTour();
+        vm.handleExitTourButton();
 
         expect(eventHub.$emit).toHaveBeenCalledWith('onboardingHelper.destroyActionPopover');
       });

ee/spec/javascripts/onboarding/onboarding_helper/components/help_content_popover_spec.js

@@ -19,6 +19,16 @@ describe('User onboarding help content popover', () => {
     disabled: false,
   };
 
+  const exitTourContent = {
+    text: 'some help content',
+    exitTour: true,
+  };
+
+  const exitTourProps = {
+    ...defaultProps,
+    helpContent: exitTourContent,
+  };
+
   const feedbackContent = {
     text: 'some help content',
     feedbackButtons: true,
@@ -51,6 +61,16 @@ describe('User onboarding help content popover', () => {
       });
     });
 
+    describe('callExitTour', () => {
+      it('emits clickExitTourButton when called', () => {
+        createComponent(exitTourProps);
+
+        wrapper.find(GlButton).vm.$emit('click');
+
+        expect(wrapper.emittedByOrder()).toEqual([{ name: 'clickExitTourButton', args: [] }]);
+      });
+    });
+
     describe('submitFeedback', () => {
       it('emits clickFeedbackButton when called', () => {
         createComponent(feedbackProps);
@@ -75,6 +95,16 @@ describe('User onboarding help content popover', () => {
       expect(btn.text()).toBe(defaultProps.helpContent.buttons[0].text);
     });
 
+    it('displays the help content text and renders a primary button with exit text when there is no buttons in help content', () => {
+      createComponent(exitTourProps);
+
+      const btn = wrapper.find('.btn-primary');
+
+      expect(wrapper.text()).toContain(exitTourProps.helpContent.text);
+      expect(btn.exists()).toBe(true);
+      expect(btn.text()).toBe("Close 'Learn GitLab'");
+    });
+
     it('renders a secondary button with the text "button"', () => {
       const propsData = {
         ...defaultProps,

ee/spec/javascripts/onboarding/onboarding_helper/components/onboarding_helper_spec.js

@@ -240,6 +240,14 @@ describe('User onboarding tour parts list', () => {
       });
     });
 
+    describe('callExitTour', () => {
+      it('emits the "clickExitTourButton" event when close Learn GitLab is clicked', () => {
+        wrapper.vm.callExitTour();
+
+        expect(wrapper.emittedByOrder()).toEqual([{ name: 'clickExitTourButton', args: [] }]);
+      });
+    });
+
     describe('submitFeedback', () => {
       it('emits the "clickFeedbackButton" event when feedback on tour is clicked', () => {
         const button = defaultProps.helpContent.buttons[0];