Merge branch 'fix-confetti-popup-on-back-button' into 'master'

Stop confetti popup from opening on browser back button

See merge request gitlab-org/gitlab!80423

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue

@@ -2,7 +2,8 @@
 import { GlProgressBar, GlSprintf, GlAlert } from '@gitlab/ui';
 import eventHub from '~/invite_members/event_hub';
 import { s__ } from '~/locale';
-import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
+import { getCookie, removeCookie, parseBoolean } from '~/lib/utils/common_utils';
+import { ACTION_LABELS, ACTION_SECTIONS, INVITE_MODAL_OPEN_COOKIE } from '../constants';
 import LearnGitlabSectionCard from './learn_gitlab_section_card.vue';
 
 export default {
@@ -26,7 +27,7 @@ export default {
       required: true,
       type: Object,
     },
-    inviteMembersOpen: {
+    inviteMembers: {
       type: Boolean,
       required: false,
       default: false,
@@ -53,7 +54,7 @@ export default {
     },
   },
   mounted() {
-    if (this.inviteMembersOpen) {
+    if (this.inviteMembers && this.getCookieForInviteMembers()) {
       this.openInviteMembersModal('celebrate');
     }
 
@@ -63,6 +64,13 @@ export default {
     eventHub.$off('showSuccessfulInvitationsAlert', this.handleShowSuccessfulInvitationsAlert);
   },
   methods: {
+    getCookieForInviteMembers() {
+      const value = parseBoolean(getCookie(INVITE_MODAL_OPEN_COOKIE));
+
+      removeCookie(INVITE_MODAL_OPEN_COOKIE);
+
+      return value;
+    },
     openInviteMembersModal(mode) {
       eventHub.$emit('openModal', { mode, inviteeType: 'members', source: 'learn-gitlab' });
     },

app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js

@@ -95,3 +95,5 @@ export const ACTION_SECTIONS = {
     ),
   },
 };
+
+export const INVITE_MODAL_OPEN_COOKIE = 'confetti_post_signup';

app/assets/javascripts/pages/projects/learn_gitlab/index/index.js

 import Vue from 'vue';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import LearnGitlab from '../components/learn_gitlab.vue';
 
 function initLearnGitlab() {
@@ -13,13 +13,13 @@ function initLearnGitlab() {
   const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
   const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
   const project = convertObjectPropsToCamelCase(JSON.parse(el.dataset.project));
-  const { inviteMembersOpen } = el.dataset;
+  const { inviteMembers } = el.dataset;
 
   return new Vue({
     el,
     render(createElement) {
       return createElement(LearnGitlab, {
-        props: { actions, sections, project, inviteMembersOpen },
+        props: { actions, sections, project, inviteMembers: parseBoolean(inviteMembers) },
       });
     },
   });

app/views/projects/learn_gitlab/index.html.haml

@@ -2,7 +2,6 @@
 - page_title _("Learn GitLab")
 - add_page_specific_style 'page_bundles/learn_gitlab'
 - data = learn_gitlab_data(@project)
-- invite_members_open = session.delete(:confetti_post_signup)
 
 = render 'projects/invite_members_modal', project: @project
 
@@ -10,4 +9,4 @@
   - e.control do
     #js-learn-gitlab-app{ data: data }
   - e.candidate do
-    #js-learn-gitlab-app{ data: data.merge(invite_members_open: invite_members_open) }
+    #js-learn-gitlab-app{ data: data.merge(invite_members: 'true') }

ee/app/controllers/ee/registrations/welcome_controller.rb

@@ -41,7 +41,7 @@ module EE
         project = ::Project.find(params[:project_id])
         return access_denied! unless can?(current_user, :owner_access, project)
 
-        session[:confetti_post_signup] = true
+        cookies[:confetti_post_signup] = true
 
         render locals: { project: project }
       end

ee/spec/controllers/registrations/welcome_controller_spec.rb

@@ -42,7 +42,7 @@ RSpec.describe Registrations::WelcomeController do
       it 'sets the correct session key' do
         continuous_onboarding_getting_started
 
-        expect(session[:confetti_post_signup]).to eq(true)
+        expect(cookies[:confetti_post_signup]).to eq('true')
       end
     end
 

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js

 import { GlProgressBar, GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import Cookies from 'js-cookie';
 import LearnGitlab from '~/pages/projects/learn_gitlab/components/learn_gitlab.vue';
 import eventHub from '~/invite_members/event_hub';
+import { INVITE_MODAL_OPEN_COOKIE } from '~/pages/projects/learn_gitlab/constants';
 import { testActions, testSections, testProject } from './mock_data';
 
 describe('Learn GitLab', () => {
   let wrapper;
   let sidebar;
-  let inviteMembersOpen = false;
+  let inviteMembers = false;
 
   const createWrapper = () => {
     wrapper = mount(LearnGitlab, {
@@ -15,7 +17,7 @@ describe('Learn GitLab', () => {
         actions: testActions,
         sections: testSections,
         project: testProject,
-        inviteMembersOpen,
+        inviteMembers,
       },
     });
   };
@@ -36,7 +38,7 @@ describe('Learn GitLab', () => {
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
-    inviteMembersOpen = false;
+    inviteMembers = false;
     sidebar.remove();
   });
 
@@ -59,13 +61,20 @@ describe('Learn GitLab', () => {
 
   describe('Invite Members Modal', () => {
     let spy;
+    let cookieSpy;
 
     beforeEach(() => {
       spy = jest.spyOn(eventHub, '$emit');
+      cookieSpy = jest.spyOn(Cookies, 'remove');
+    });
+
+    afterEach(() => {
+      Cookies.remove(INVITE_MODAL_OPEN_COOKIE);
     });
 
     it('emits openModal', () => {
-      inviteMembersOpen = true;
+      inviteMembers = true;
+      Cookies.set(INVITE_MODAL_OPEN_COOKIE, true);
 
       createWrapper();
 
@@ -74,9 +83,19 @@ describe('Learn GitLab', () => {
         inviteeType: 'members',
         source: 'learn-gitlab',
       });
+      expect(cookieSpy).toHaveBeenCalledWith(INVITE_MODAL_OPEN_COOKIE);
+    });
+
+    it('does not emit openModal when cookie is not set', () => {
+      inviteMembers = true;
+
+      createWrapper();
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(cookieSpy).toHaveBeenCalledWith(INVITE_MODAL_OPEN_COOKIE);
     });
 
-    it('does not emit openModal', () => {
+    it('does not emit openModal when inviteMembers is false', () => {
       createWrapper();
 
       expect(spy).not.toHaveBeenCalled();