Merge branch 'add-dismissable-by-group-per-user-to-invite-banner' into 'master'

Add cookie to dismiss button on invite group banner

See merge request gitlab-org/gitlab!38362

app/assets/javascripts/groups/components/invite_members_banner.vue

 <script>
 import { GlBanner } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils';
 
 export default {
   components: {
     GlBanner,
   },
-  inject: ['svgPath', 'inviteMembersPath'],
+  inject: ['svgPath', 'inviteMembersPath', 'isDismissedKey'],
   data() {
     return {
-      visible: true,
+      isDismissed: parseBoolean(getCookie(this.isDismissedKey)),
     };
   },
   methods: {
     handleClose() {
-      this.visible = false;
+      setCookie(this.isDismissedKey, true);
+      this.isDismissed = true;
     },
   },
   i18n: {
@@ -29,7 +31,7 @@ export default {
 
 <template>
   <gl-banner
-    v-if="visible"
+    v-if="!isDismissed"
     ref="banner"
     :title="$options.i18n.title"
     :button-text="$options.i18n.button_text"

app/assets/javascripts/groups/init_invite_members_banner.js

@@ -8,13 +8,14 @@ export default function initInviteMembersBanner() {
     return false;
   }
 
-  const { svgPath, inviteMembersPath } = el.dataset;
+  const { svgPath, inviteMembersPath, isDismissedKey } = el.dataset;
 
   return new Vue({
     el,
     provide: {
       svgPath,
       inviteMembersPath,
+      isDismissedKey,
     },
     render: createElement => createElement(InviteMembersBanner),
   });

app/views/groups/show.html.haml

@@ -6,6 +6,7 @@
   = content_for :group_invite_members_banner do
     .container-fluid.container-limited{ class: "gl-pb-2! gl-pt-6! #{@content_class}" }
       .js-group-invite-members-banner{ data: { svg_path: image_path('illustrations/merge_requests.svg'),
+        is_dismissed_key: "invite_#{@group.id}_#{current_user.id}",
         invite_members_path: group_group_members_path(@group) } }
 
 = content_for :meta_tags do

spec/frontend/groups/components/invite_members_banner_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlBanner } from '@gitlab/ui';
 import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
+import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
-const expectedTitle = 'Collaborate with your team';
-const expectedBody =
+jest.mock('~/lib/utils/common_utils');
+
+const isDismissedKey = 'invite_99_1';
+const title = 'Collaborate with your team';
+const body =
   "We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge";
-const expectedSvgPath = '/illustrations/background';
-const expectedInviteMembersPath = 'groups/members';
-const expectedButtonText = 'Invite your colleagues';
+const svgPath = '/illustrations/background';
+const inviteMembersPath = 'groups/members';
+const buttonText = 'Invite your colleagues';
 
 const createComponent = (stubs = {}) => {
   return shallowMount(InviteMembersBanner, {
     provide: {
-      svgPath: expectedSvgPath,
-      inviteMembersPath: expectedInviteMembersPath,
+      svgPath,
+      inviteMembersPath,
+      isDismissedKey,
     },
     stubs,
   });
@@ -37,23 +42,23 @@ describe('InviteMembersBanner', () => {
     });
 
     it('uses the svgPath for the banner svgpath', () => {
-      expect(findBanner().attributes('svgpath')).toBe(expectedSvgPath);
+      expect(findBanner().attributes('svgpath')).toBe(svgPath);
     });
 
     it('uses the title from options for title', () => {
-      expect(findBanner().attributes('title')).toBe(expectedTitle);
+      expect(findBanner().attributes('title')).toBe(title);
     });
 
     it('includes the body text from options', () => {
-      expect(findBanner().html()).toContain(expectedBody);
+      expect(findBanner().html()).toContain(body);
     });
 
     it('uses the button_text text from options for buttontext', () => {
-      expect(findBanner().attributes('buttontext')).toBe(expectedButtonText);
+      expect(findBanner().attributes('buttontext')).toBe(buttonText);
     });
 
     it('uses the href from inviteMembersPath for buttonlink', () => {
-      expect(findBanner().attributes('buttonlink')).toBe(expectedInviteMembersPath);
+      expect(findBanner().attributes('buttonlink')).toBe(inviteMembersPath);
     });
   });
 
@@ -61,16 +66,35 @@ describe('InviteMembersBanner', () => {
     const findButton = () => {
       return wrapper.find('button');
     };
-    const stubs = {
-      GlBanner,
-    };
 
-    it('sets visible to false', () => {
-      wrapper = createComponent(stubs);
+    beforeEach(() => {
+      wrapper = createComponent({ GlBanner });
 
       findButton().trigger('click');
+    });
+
+    it('sets iDismissed to true', () => {
+      expect(wrapper.vm.isDismissed).toBe(true);
+    });
+
+    it('sets the cookie with the isDismissedKey', () => {
+      expect(setCookie).toHaveBeenCalledWith(isDismissedKey, true);
+    });
+  });
+
+  describe('when a dismiss cookie exists', () => {
+    beforeEach(() => {
+      parseBoolean.mockReturnValue(true);
+
+      wrapper = createComponent({ GlBanner });
+    });
+
+    it('sets isDismissed to true', () => {
+      expect(wrapper.vm.isDismissed).toBe(true);
+    });
 
-      expect(wrapper.vm.visible).toBe(false);
+    it('does not render the banner', () => {
+      expect(wrapper.contains(GlBanner)).toBe(false);
     });
   });
 });