Skip feeback on onboarding if tracking is not enabled

- we should not ask for feedback if the tracking mechanism is not
  enabled, or DNT is set in user browser

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

@@ -57,5 +57,21 @@ export const EXIT_TOUR_CONTENT = {
     },
     false,
   ),
+  buttonText: s__("UserOnboardingTour|Close 'Learn GitLab'"),
+  exitTour: true,
+};
+
+export const DNT_EXIT_TOUR_CONTENT = {
+  text: sprintf(
+    s__(
+      'UserOnboardingTour|Thanks for taking the guided tour. Remember, if you want to go through it again, you can start %{emphasisStart}Learn GitLab%{emphasisEnd} in the help menu on the top right.',
+    ),
+    {
+      emphasisStart: '<strong>',
+      emphasisEnd: '</strong>',
+    },
+    false,
+  ),
+  buttonText: s__('UserOnboardingTour|Got it'),
   exitTour: true,
 };

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

@@ -22,6 +22,10 @@ export default {
       type: Object,
       required: true,
     },
+    dntExitTourContent: {
+      type: Object,
+      required: true,
+    },
     exitTourContent: {
       type: Object,
       required: true,
@@ -47,6 +51,7 @@ export default {
       'helpContentIndex',
       'tourFeedback',
       'exitTour',
+      'dntExitTour',
       'dismissed',
     ]),
     ...mapGetters([
@@ -61,6 +66,7 @@ export default {
       if (!this.showStepContent) return null;
       if (this.exitTour) return this.exitTourContent;
       if (this.tourFeedback) return this.feedbackContent;
+      if (this.dntExitTour) return this.dntExitTourContent;
 
       return this.helpContent;
     },
@@ -79,6 +85,7 @@ export default {
       'switchTourPart',
       'setExitTour',
       'setTourFeedback',
+      'setDntExitTour',
       'setDismissed',
     ]),
     init() {
@@ -208,14 +215,20 @@ export default {
       this.showExitTourContent(showExitTour);
     },
     handleFeedbackTourContent(showTourFeedback) {
-      this.dismissPopover = false;
-      this.showStepContent = true;
+      this.configureEndingTourPopup();
       this.setTourFeedback(showTourFeedback);
     },
+    handleDntExitTourContent(showExitTour) {
+      this.configureEndingTourPopup();
+      this.setDntExitTour(showExitTour);
+    },
     showExitTourContent(showExitTour) {
+      this.configureEndingTourPopup();
+      this.setExitTour(showExitTour);
+    },
+    configureEndingTourPopup() {
       this.dismissPopover = false;
       this.showStepContent = true;
-      this.setExitTour(showExitTour);
     },
     handleExitTourButton() {
       this.hideActionPopover();
@@ -254,6 +267,7 @@ export default {
       @restartStep="handleRestartStep"
       @skipStep="handleSkipStep"
       @showFeedbackContent="handleFeedbackTourContent"
+      @showDntExitContent="handleDntExitTourContent"
       @showExitTourContent="handleShowExitTourContent"
     />
   </transition>

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

@@ -77,7 +77,7 @@ export default {
       </template>
       <template v-if="helpContent.exitTour">
         <gl-button class="btn btn-sm btn-primary mr-2" @click="callExitTour">
-          {{ s__("UserOnboardingTour|Close 'Learn GitLab'") }}
+          {{ helpContent.buttonText }}
         </gl-button>
       </template>
       <template v-if="helpContent.feedbackButtons">

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

@@ -5,6 +5,7 @@ import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_ima
 import Icon from '~/vue_shared/components/icon.vue';
 import HelpContentPopover from './help_content_popover.vue';
 import TourPartsList from './tour_parts_list.vue';
+import Tracking from '~/tracking';
 
 export default {
   name: 'OnboardingHelper',
@@ -132,8 +133,12 @@ export default {
     restartStep() {
       this.$emit('restartStep');
     },
-    showFeedbackContent() {
-      this.$emit('showFeedbackContent', true);
+    beginExitTourProcess() {
+      if (Tracking.enabled()) {
+        this.$emit('showFeedbackContent', true);
+      } else {
+        this.$emit('showDntExitContent', true);
+      }
     },
     callStepContentButton(button) {
       this.$emit('clickStepContentButton', button);
@@ -216,7 +221,7 @@ export default {
           </gl-link>
         </li>
         <li>
-          <gl-link class="qa-exit-tour-link d-inline-flex" @click="showFeedbackContent">
+          <gl-link class="qa-exit-tour-link d-inline-flex" @click="beginExitTourProcess">
             <icon name="leave" class="mr-1" />
             <span>{{ s__("UserOnboardingTour|Exit 'Learn GitLab'") }}</span>
           </gl-link>

ee/app/assets/javascripts/onboarding/onboarding_helper/index.js

@@ -3,7 +3,12 @@ import { mapActions } from 'vuex';
 import OnboardingApp from './components/app.vue';
 import createStore from './store';
 import onboardingUtils from './../utils';
-import { TOUR_TITLES, FEEDBACK_CONTENT, EXIT_TOUR_CONTENT } from './../constants';
+import {
+  TOUR_TITLES,
+  FEEDBACK_CONTENT,
+  EXIT_TOUR_CONTENT,
+  DNT_EXIT_TOUR_CONTENT,
+} from './../constants';
 import TOUR_PARTS from './../tour_parts';
 
 export default function() {
@@ -52,6 +57,7 @@ export default function() {
           tourTitles: TOUR_TITLES,
           exitTourContent: EXIT_TOUR_CONTENT,
           feedbackContent: FEEDBACK_CONTENT,
+          dntExitTourContent: DNT_EXIT_TOUR_CONTENT,
           goldenTanukiSvgPath,
         },
       });

ee/app/assets/javascripts/onboarding/onboarding_helper/store/actions.js

@@ -37,6 +37,10 @@ export const setExitTour = ({ commit }, exitTour) => {
   commit(types.SET_EXIT_TOUR, exitTour);
 };
 
+export const setDntExitTour = ({ commit }, dntExitTour) => {
+  commit(types.SET_DNT_EXIT_TOUR, dntExitTour);
+};
+
 export const setDismissed = ({ commit }, dismissed) => {
   commit(types.SET_DISMISSED, dismissed);
 

ee/app/assets/javascripts/onboarding/onboarding_helper/store/mutation_types.js

@@ -4,4 +4,5 @@ export const SET_LAST_STEP_INDEX = 'SET_LAST_STEP_INDEX';
 export const SET_HELP_CONTENT_INDEX = 'SET_HELP_CONTENT_INDEX';
 export const SET_FEEDBACK = 'SET_FEEDBACK';
 export const SET_EXIT_TOUR = 'SET_EXIT_TOUR';
+export const SET_DNT_EXIT_TOUR = 'SET_DNT_EXIT_TOUR';
 export const SET_DISMISSED = 'SET_DISMISSED';

ee/app/assets/javascripts/onboarding/onboarding_helper/store/mutations.js

@@ -16,6 +16,9 @@ export default {
   [types.SET_FEEDBACK](state, payload) {
     state.tourFeedback = payload;
   },
+  [types.SET_DNT_EXIT_TOUR](state, payload) {
+    state.dntExitTour = payload;
+  },
   [types.SET_EXIT_TOUR](state, payload) {
     state.exitTour = payload;
   },

ee/app/assets/javascripts/onboarding/onboarding_helper/store/state.js

@@ -12,4 +12,5 @@ export default () => ({
   createdProjectPath: '',
   exitTour: false,
   tourFeedback: false,
+  dntExitTour: false,
 });

ee/changelogs/unreleased/skip-onboarding-feedback-for-dnt.yml

+---
+title: Skip Onboarding feedback when tracking is disabled
+merge_request: 18671
+author:
+type: added
\ No newline at end of file

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

@@ -29,11 +29,17 @@ describe('User onboarding helper app', () => {
     text: 'exit tour content',
     buttons: [{ text: 'OK', btnClass: 'btn-primary' }],
   };
+  const dntExitTourContent = {
+    text: 'dnt exit tour content',
+    buttonText: 'Got it',
+    exitTour: true,
+  };
 
   const defaultProps = {
     tourTitles,
     exitTourContent,
     feedbackContent,
+    dntExitTourContent,
     goldenTanukiSvgPath: 'illustrations/golden_tanuki.svg',
   };
 
@@ -83,6 +89,12 @@ describe('User onboarding helper app', () => {
 
         expect(vm.helpContentData).toEqual(feedbackContent);
       });
+
+      it('returns an object containing do not track exit content if dntExitTour is true', () => {
+        store.dispatch('setDntExitTour', true);
+
+        expect(vm.helpContentData).toEqual(dntExitTourContent);
+      });
     });
 
     describe('completedSteps', () => {
@@ -353,6 +365,22 @@ describe('User onboarding helper app', () => {
       });
     });
 
+    describe('handleDntExitTourContent', () => {
+      it('sets the "dismissPopover" prop to false', () => {
+        vm.handleDntExitTourContent(true);
+
+        expect(vm.dismissPopover).toBeFalsy();
+      });
+
+      it('calls the "setDntExitTour" method', () => {
+        spyOn(vm.$store, 'dispatch');
+
+        vm.handleDntExitTourContent(true);
+
+        expect(vm.$store.dispatch).toHaveBeenCalledWith('setDntExitTour', true);
+      });
+    });
+
     describe('handleExitTourButton', () => {
       it('emits the "onboardingHelper.hideActionPopover" event', () => {
         spyOn(eventHub, '$emit');

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

@@ -21,6 +21,7 @@ describe('User onboarding help content popover', () => {
 
   const exitTourContent = {
     text: 'some help content',
+    buttonText: "Close 'Learn GitLab'",
     exitTour: true,
   };
 

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

@@ -3,6 +3,7 @@ import TourPartsList from 'ee/onboarding/onboarding_helper/components/tour_parts
 import Icon from '~/vue_shared/components/icon.vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlProgressBar, GlLoadingIcon } from '@gitlab/ui';
+import Tracking from '~/tracking';
 
 describe('User onboarding tour parts list', () => {
   let wrapper;
@@ -222,9 +223,22 @@ describe('User onboarding tour parts list', () => {
       });
     });
 
-    describe('showExitTourContent', () => {
-      it('emits the "showExitTourContent" event when the "Exit Learn GitLab" link is clicked', () => {
-        wrapper.find('.qa-exit-tour-link').vm.$emit('click');
+    describe('beginExitTourProcess', () => {
+      const findExitTourLink = () => wrapper.find('.qa-exit-tour-link');
+
+      it('emits the "showDntExitContent" event when the "Exit Learn GitLab" link is clicked and tracking is not enabled', () => {
+        spyOn(Tracking, 'enabled').and.returnValue(false);
+
+        findExitTourLink().vm.$emit('click');
+
+        expect(wrapper.emitted('showDntExitContent')).toBeTruthy();
+        expect(Tracking.enabled).toHaveBeenCalled();
+      });
+
+      it('emits the "showFeedbackContent" event when the "Exit Learn GitLab" link is clicked and tracking is enabled', () => {
+        spyOn(Tracking, 'enabled').and.returnValue(true);
+
+        findExitTourLink().vm.$emit('click');
 
         expect(wrapper.emitted('showFeedbackContent')).toBeTruthy();
       });

ee/spec/javascripts/onboarding/onboarding_helper/store/actions_spec.js

@@ -9,6 +9,7 @@ import {
   setHelpContentIndex,
   switchTourPart,
   setTourFeedback,
+  setDntExitTour,
   setExitTour,
   setDismissed,
 } from 'ee/onboarding/onboarding_helper/store/actions';
@@ -156,6 +157,21 @@ describe('User onboarding helper store actions', () => {
     });
   });
 
+  describe('setDntExitTour', () => {
+    it(`commits ${types.SET_DNT_EXIT_TOUR} mutation`, done => {
+      const dntExitTour = true;
+
+      testAction(
+        setDntExitTour,
+        dntExitTour,
+        state,
+        [{ type: types.SET_DNT_EXIT_TOUR, payload: dntExitTour }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('setDismissed', () => {
     it(`commits ${types.SET_DISMISSED} mutation`, done => {
       const dismissed = true;

ee/spec/javascripts/onboarding/onboarding_helper/store/mutations_spec.js

@@ -24,6 +24,7 @@ describe('User onboarding helper store mutations', () => {
         createdProjectPath: '',
         exitTour: false,
         tourFeedback: false,
+        dntExitTour: false,
       };
 
       mutations[types.SET_INITIAL_DATA](state, initialData);
@@ -75,6 +76,14 @@ describe('User onboarding helper store mutations', () => {
     });
   });
 
+  describe('SET_DNT_EXIT_TOUR', () => {
+    it('sets the dntExitTour property to true', () => {
+      mutations[types.SET_DNT_EXIT_TOUR](state, true);
+
+      expect(state.dntExitTour).toBeTruthy();
+    });
+  });
+
   describe('SET_DISMISSED', () => {
     it('sets the dismissed property to true', () => {
       mutations[types.SET_DISMISSED](state, true);

locale/gitlab.pot

@@ -18181,6 +18181,9 @@ msgstr ""
 msgid "UserOnboardingTour|Take a look. Here's a nifty menu for quickly creating issues, merge requests, snippets, projects and groups. Click on it and select \"New project\" from the \"GitLab\" section to get started."
 msgstr ""
 
+msgid "UserOnboardingTour|Thanks for taking the guided tour. Remember, if you want to go through it again, you can start %{emphasisStart}Learn GitLab%{emphasisEnd} in the help menu on the top right."
+msgstr ""
+
 msgid "UserOnboardingTour|Thanks for the feedback! %{thumbsUp}"
 msgstr ""