Merge branch '354003-resolve-ce-ee-duplication-in-invite-modal-base' into 'master'

Part 2 - Resolve EE/CE duplication in invite_modal_base

See merge request gitlab-org/gitlab!82138

app/assets/javascripts/invite_members/components/invite_modal_base.vue

@@ -11,6 +11,7 @@ import {
   GlFormInput,
 } from '@gitlab/ui';
 import { sprintf } from '~/locale';
+import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import {
   ACCESS_LEVEL,
   ACCESS_EXPIRE_DATE,
@@ -20,6 +21,17 @@ import {
   HEADER_CLOSE_LABEL,
 } from '../constants';
 
+const DEFAULT_SLOT = 'default';
+const DEFAULT_SLOTS = [
+  {
+    key: DEFAULT_SLOT,
+    attributes: {
+      class: 'invite-modal-content',
+      'data-testid': 'invite-modal-initial-content',
+    },
+  },
+];
+
 export default {
   components: {
     GlFormGroup,
@@ -31,6 +43,7 @@ export default {
     GlSprintf,
     GlButton,
     GlFormInput,
+    ContentTransition,
   },
   inheritAttrs: false,
   props: {
@@ -86,6 +99,21 @@ export default {
       required: false,
       default: '',
     },
+    submitButtonText: {
+      type: String,
+      required: false,
+      default: INVITE_BUTTON_TEXT,
+    },
+    currentSlot: {
+      type: String,
+      required: false,
+      default: DEFAULT_SLOT,
+    },
+    extraSlots: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     // Be sure to check out reset!
@@ -110,6 +138,9 @@ export default {
         (key) => this.accessLevels[key] === Number(this.selectedAccessLevel),
       );
     },
+    contentSlots() {
+      return [...DEFAULT_SLOTS, ...(this.extraSlots || [])];
+    },
   },
   watch: {
     selectedAccessLevel: {
@@ -148,6 +179,7 @@ export default {
   READ_MORE_TEXT,
   INVITE_BUTTON_TEXT,
   CANCEL_BUTTON_TEXT,
+  DEFAULT_SLOT,
 };
 </script>
 
@@ -164,6 +196,13 @@ export default {
     @close="reset"
     @hide="reset"
   >
+    <content-transition
+      class="gl-display-grid"
+      transition-name="invite-modal-transition"
+      :slots="contentSlots"
+      :current-slot="currentSlot"
+    >
+      <template #[$options.DEFAULT_SLOT]>
         <div class="gl-display-flex" data-testid="modal-base-intro-text">
           <slot name="intro-text-before"></slot>
           <p>
@@ -227,16 +266,26 @@ export default {
             :target="null"
           >
             <template #default="{ formattedDate }">
-          <gl-form-input class="gl-w-full" :value="formattedDate" :placeholder="__(`YYYY-MM-DD`)" />
+              <gl-form-input
+                class="gl-w-full"
+                :value="formattedDate"
+                :placeholder="__(`YYYY-MM-DD`)"
+              />
             </template>
           </gl-datepicker>
         </div>
         <slot name="form-after"></slot>
-
+      </template>
+      <template v-for="{ key } in extraSlots" #[key]>
+        <slot :name="key"></slot>
+      </template>
+    </content-transition>
     <template #modal-footer>
+      <slot name="cancel-button">
         <gl-button data-testid="cancel-button" @click="closeModal">
           {{ $options.CANCEL_BUTTON_TEXT }}
         </gl-button>
+      </slot>
       <gl-button
         :disabled="submitDisabled"
         :loading="isLoading"
@@ -245,7 +294,7 @@ export default {
         data-testid="invite-button"
         @click="submit"
       >
-        {{ $options.INVITE_BUTTON_TEXT }}
+        {{ submitButtonText }}
       </gl-button>
     </template>
   </gl-modal>

app/assets/javascripts/vue_shared/components/content_transition.vue

+<script>
+export default {
+  props: {
+    currentSlot: {
+      type: String,
+      required: true,
+    },
+    slots: {
+      type: Array,
+      required: true,
+    },
+    transitionName: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    shouldShow(key) {
+      return this.currentSlot === key;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <transition v-for="{ key, attributes } in slots" :key="key" :name="transitionName">
+      <div v-show="shouldShow(key)" v-bind="attributes">
+        <slot :name="key"></slot>
+      </div>
+    </transition>
+  </div>
+</template>

ee/spec/frontend/invite_members/components/invite_modal_base_spec.js

-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDatepicker,
-  GlFormGroup,
-  GlSprintf,
-  GlLink,
-  GlModal,
-} from '@gitlab/ui';
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import InviteModalBase from 'ee_else_ce/invite_members/components/invite_modal_base.vue';
-import { CANCEL_BUTTON_TEXT, INVITE_BUTTON_TEXT } from '~/invite_members/constants';
+import ContentTransition from '~/vue_shared/components/content_transition.vue';
+import CEInviteModalBase from '~/invite_members/components/invite_modal_base.vue';
+import EEInviteModalBase from 'ee/invite_members/components/invite_modal_base.vue';
 import {
   OVERAGE_MODAL_TITLE,
   OVERAGE_MODAL_CONTINUE_BUTTON,
@@ -18,11 +12,12 @@ import {
 } from 'ee/invite_members/constants';
 import { propsData } from 'jest/invite_members/mock_data/modal_base';
 
-describe('InviteModalBase', () => {
+describe('EEInviteModalBase', () => {
   let wrapper;
+  let listenerSpy;
 
   const createComponent = (props = {}, glFeatures = {}) => {
-    wrapper = shallowMountExtended(InviteModalBase, {
+    wrapper = shallowMountExtended(EEInviteModalBase, {
       propsData: {
         ...propsData,
         ...props,
@@ -31,125 +26,103 @@ describe('InviteModalBase', () => {
         ...glFeatures,
       },
       stubs: {
+        GlSprintf,
+        InviteModalBase: CEInviteModalBase,
+        ContentTransition,
         GlModal: stubComponent(GlModal, {
           template:
             '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
         }),
-        GlDropdown: true,
-        GlDropdownItem: true,
-        GlSprintf,
-        GlFormGroup: stubComponent(GlFormGroup, {
-          props: ['state', 'invalidFeedback', 'description'],
-        }),
+      },
+      listeners: {
+        submit: (...args) => listenerSpy('submit', ...args),
+        reset: (...args) => listenerSpy('reset', ...args),
+        foo: (...args) => listenerSpy('foo', ...args),
       },
     });
   };
 
+  beforeEach(() => {
+    listenerSpy = jest.fn();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownItems = () => findDropdown().findAllComponents(GlDropdownItem);
-  const findDatepicker = () => wrapper.findComponent(GlDatepicker);
-  const findLink = () => wrapper.findComponent(GlLink);
-  const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
-  const findCancelButton = () => wrapper.findByTestId('cancel-button');
+  const findCEBase = () => wrapper.findComponent(CEInviteModalBase);
   const findInviteButton = () => wrapper.findByTestId('invite-button');
   const findBackButton = () => wrapper.findByTestId('overage-back-button');
-  const findOverageInviteButton = () => wrapper.findByTestId('invite-with-overage-button');
   const findInitialModalContent = () => wrapper.findByTestId('invite-modal-initial-content');
   const findOverageModalContent = () => wrapper.findByTestId('invite-modal-overage-content');
-  const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
+  const findModalTitle = () => wrapper.findComponent(GlModal).props('title');
 
   const clickInviteButton = () => findInviteButton().vm.$emit('click');
   const clickBackButton = () => findBackButton().vm.$emit('click');
 
-  describe('rendering the modal', () => {
+  describe('default', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('renders the modal with the correct title', () => {
-      expect(wrapper.findComponent(GlModal).props('title')).toBe(propsData.modalTitle);
-    });
-
-    it('displays the introText', () => {
-      expect(findIntroText()).toBe(propsData.labelIntroText);
-    });
-
-    it('renders the Cancel button text correctly', () => {
-      expect(findCancelButton().text()).toBe(CANCEL_BUTTON_TEXT);
+    it('passes attrs to CE base', () => {
+      expect(findCEBase().props()).toMatchObject({
+        ...propsData,
+        currentSlot: 'default',
+        extraSlots: EEInviteModalBase.EXTRA_SLOTS,
       });
-
-    it('renders the Invite button text correctly', () => {
-      expect(findInviteButton().text()).toBe(INVITE_BUTTON_TEXT);
     });
 
-    it('renders the Invite button modal without isLoading', () => {
-      expect(findInviteButton().props('loading')).toBe(false);
-    });
-
-    describe('rendering the access levels dropdown', () => {
-      it('sets the default dropdown text to the default access level name', () => {
-        expect(findDropdown().attributes('text')).toBe('Guest');
+    it("doesn't show the overage content", () => {
+      expect(findOverageModalContent().isVisible()).toBe(false);
     });
 
-      it('renders dropdown items for each accessLevel', () => {
-        expect(findDropdownItems()).toHaveLength(5);
-      });
-    });
+    it('when reset is emitted on base, emits reset', () => {
+      expect(wrapper.emitted('reset')).toBeUndefined();
 
-    it('renders the correct link', () => {
-      expect(findLink().attributes('href')).toBe(propsData.helpLink);
-    });
+      findCEBase().vm.$emit('reset');
 
-    it('renders the datepicker', () => {
-      expect(findDatepicker().exists()).toBe(true);
+      expect(wrapper.emitted('reset')).toHaveLength(1);
     });
 
-    it("doesn't show the overage content", () => {
-      expect(findOverageModalContent().isVisible()).toBe(false);
+    describe('(integration) when invite is clicked', () => {
+      beforeEach(async () => {
+        clickInviteButton();
+        await nextTick();
       });
 
-    it('renders the members form group', () => {
-      expect(findMembersFormGroup().props()).toEqual({
-        description: propsData.formGroupDescription,
-        invalidFeedback: '',
-        state: null,
-      });
-    });
+      it('does not change title', () => {
+        expect(findModalTitle()).toBe(propsData.modalTitle);
       });
 
-  it('with isLoading, shows loading for invite button', () => {
-    createComponent({
-      isLoading: true,
+      it('does not show back button', () => {
+        expect(findBackButton().exists()).toBe(false);
       });
 
-    expect(findInviteButton().props('loading')).toBe(true);
+      it('shows initial modal content', () => {
+        expect(findInitialModalContent().isVisible()).toBe(true);
       });
 
-  it('with invalidFeedbackMessage, set members form group validation state', () => {
-    createComponent({
-      invalidFeedbackMessage: 'invalid message!',
+      it('emits submit', () => {
+        expect(wrapper.emitted('submit')).toEqual([[{ accessLevel: 10, expiresAt: undefined }]]);
       });
-
-    expect(findMembersFormGroup().props()).toEqual({
-      description: propsData.formGroupDescription,
-      invalidFeedback: 'invalid message!',
-      state: false,
     });
   });
 
-  describe('displays overage modal', () => {
-    beforeEach(() => {
+  describe('with overageMembersModal feature flag, and invite is clicked ', () => {
+    beforeEach(async () => {
       createComponent({}, { glFeatures: { overageMembersModal: true } });
       clickInviteButton();
+      await nextTick();
+    });
+
+    it('does not emit submit', () => {
+      expect(wrapper.emitted().submit).toBeUndefined();
     });
 
     it('renders the modal with the correct title', () => {
-      expect(wrapper.findComponent(GlModal).props('title')).toBe(OVERAGE_MODAL_TITLE);
+      expect(findModalTitle()).toBe(OVERAGE_MODAL_TITLE);
     });
 
     it('renders the Back button text correctly', () => {
@@ -157,7 +130,7 @@ describe('InviteModalBase', () => {
     });
 
     it('renders the Continue button text correctly', () => {
-      expect(findOverageInviteButton().text()).toBe(OVERAGE_MODAL_CONTINUE_BUTTON);
+      expect(findInviteButton().text()).toBe(OVERAGE_MODAL_CONTINUE_BUTTON);
     });
 
     it('shows the info text', () => {
@@ -174,7 +147,7 @@ describe('InviteModalBase', () => {
       beforeEach(() => clickBackButton());
 
       it('shows the initial modal', () => {
-        expect(wrapper.findComponent(GlModal).props('title')).toBe('_modal_title_');
+        expect(wrapper.findComponent(GlModal).props('title')).toBe(propsData.modalTitle);
         expect(findInitialModalContent().isVisible()).toBe(true);
       });
 

spec/frontend/invite_members/components/invite_groups_modal_spec.js

@@ -4,6 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Api from '~/api';
 import InviteGroupsModal from '~/invite_members/components/invite_groups_modal.vue';
 import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
+import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import GroupSelect from '~/invite_members/components/group_select.vue';
 import { stubComponent } from 'helpers/stub_component';
 import { propsData, sharedGroup } from '../mock_data/group_modal';
@@ -19,6 +20,7 @@ describe('InviteGroupsModal', () => {
       },
       stubs: {
         InviteModalBase,
+        ContentTransition,
         GlSprintf,
         GlModal: stubComponent(GlModal, {
           template: '<div><slot></slot><slot name="modal-footer"></slot></div>',

spec/frontend/invite_members/components/invite_members_modal_spec.js

@@ -19,6 +19,7 @@ import {
   LEARN_GITLAB,
 } from '~/invite_members/constants';
 import eventHub from '~/invite_members/event_hub';
+import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 import { getParameterValues } from '~/lib/utils/url_utility';
@@ -55,6 +56,7 @@ describe('InviteMembersModal', () => {
       },
       stubs: {
         InviteModalBase,
+        ContentTransition,
         GlSprintf,
         GlModal: stubComponent(GlModal, {
           template: '<div><slot></slot><slot name="modal-footer"></slot></div>',

spec/frontend/invite_members/components/invite_modal_base_spec.js

@@ -10,6 +10,7 @@ import {
 import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
+import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import { CANCEL_BUTTON_TEXT, INVITE_BUTTON_TEXT } from '~/invite_members/constants';
 import { propsData } from '../mock_data/modal_base';
 
@@ -23,6 +24,7 @@ describe('InviteModalBase', () => {
         ...props,
       },
       stubs: {
+        ContentTransition,
         GlModal: stubComponent(GlModal, {
           template:
             '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',

spec/frontend/vue_shared/components/__snapshots__/content_transition_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`~/vue_shared/components/content_transition.vue default shows all transitions and only default is visible 1`] = `
+<div>
+  <transition-stub
+    name="test_transition_name"
+  >
+    <div
+      data-testval="default"
+    >
+      <p>
+        Default
+      </p>
+    </div>
+  </transition-stub>
+  <transition-stub
+    name="test_transition_name"
+  >
+    <div
+      data-testval="foo"
+      style="display: none;"
+    >
+      <p>
+        Foo
+      </p>
+    </div>
+  </transition-stub>
+  <transition-stub
+    name="test_transition_name"
+  >
+    <div
+      data-testval="bar"
+      style="display: none;"
+    >
+      <p>
+        Bar
+      </p>
+    </div>
+  </transition-stub>
+</div>
+`;

spec/frontend/vue_shared/components/content_transition_spec.js

+import { groupBy, mapValues } from 'lodash';
+import { shallowMount } from '@vue/test-utils';
+import ContentTransition from '~/vue_shared/components/content_transition.vue';
+
+const TEST_CURRENT_SLOT = 'default';
+const TEST_TRANSITION_NAME = 'test_transition_name';
+const TEST_SLOTS = [
+  { key: 'default', attributes: { 'data-testval': 'default' } },
+  { key: 'foo', attributes: { 'data-testval': 'foo' } },
+  { key: 'bar', attributes: { 'data-testval': 'bar' } },
+];
+
+describe('~/vue_shared/components/content_transition.vue', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createComponent = (props = {}, slots = {}) => {
+    wrapper = shallowMount(ContentTransition, {
+      propsData: {
+        transitionName: TEST_TRANSITION_NAME,
+        currentSlot: TEST_CURRENT_SLOT,
+        slots: TEST_SLOTS,
+        ...props,
+      },
+      slots: {
+        default: '<p>Default</p>',
+        foo: '<p>Foo</p>',
+        bar: '<p>Bar</p>',
+        dne: '<p>DOES NOT EXIST</p>',
+        ...slots,
+      },
+    });
+  };
+
+  const findTransitionsData = () =>
+    wrapper.findAll('transition-stub').wrappers.map((transition) => {
+      const child = transition.find('[data-testval]');
+      const { style, ...attributes } = child.attributes();
+
+      return {
+        transitionName: transition.attributes('name'),
+        isVisible: child.isVisible(),
+        attributes,
+        text: transition.text(),
+      };
+    });
+  const findVisibleData = () => {
+    const group = groupBy(findTransitionsData(), (x) => x.attributes['data-testval']);
+
+    return mapValues(group, (x) => x[0].isVisible);
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows all transitions and only default is visible', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('render transitions for each slot', () => {
+      expect(findTransitionsData()).toEqual([
+        {
+          attributes: {
+            'data-testval': 'default',
+          },
+          isVisible: true,
+          text: 'Default',
+          transitionName: 'test_transition_name',
+        },
+        {
+          attributes: {
+            'data-testval': 'foo',
+          },
+          isVisible: false,
+          text: 'Foo',
+          transitionName: 'test_transition_name',
+        },
+        {
+          attributes: {
+            'data-testval': 'bar',
+          },
+          isVisible: false,
+          text: 'Bar',
+          transitionName: 'test_transition_name',
+        },
+      ]);
+    });
+  });
+
+  describe('with currentSlot=foo', () => {
+    beforeEach(() => {
+      createComponent({ currentSlot: 'foo' });
+    });
+
+    it('should only show the foo slot', () => {
+      expect(findVisibleData()).toEqual({
+        default: false,
+        foo: true,
+        bar: false,
+      });
+    });
+  });
+});