Resolve EE/CE duplication in invite_modal_base

- https://gitlab.com/gitlab-org/gitlab/-/issues/354003

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,79 +196,96 @@ export default {
     @close="reset"
     @hide="reset"
   >
-    <div class="gl-display-flex" data-testid="modal-base-intro-text">
-      <slot name="intro-text-before"></slot>
-      <p>
-        <gl-sprintf :message="introText">
-          <template #strong="{ content }">
-            <strong>{{ content }}</strong>
-          </template>
-        </gl-sprintf>
-      </p>
-      <slot name="intro-text-after"></slot>
-    </div>
-
-    <gl-form-group
-      :invalid-feedback="invalidFeedbackMessage"
-      :state="validationState"
-      :description="formGroupDescription"
-      data-testid="members-form-group"
+    <content-transition
+      class="gl-display-grid"
+      transition-name="invite-modal-transition"
+      :slots="contentSlots"
+      :current-slot="currentSlot"
     >
-      <label :id="selectLabelId" class="col-form-label">{{ labelSearchField }}</label>
-      <slot name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot>
-    </gl-form-group>
+      <template #[$options.DEFAULT_SLOT]>
+        <div class="gl-display-flex" data-testid="modal-base-intro-text">
+          <slot name="intro-text-before"></slot>
+          <p>
+            <gl-sprintf :message="introText">
+              <template #strong="{ content }">
+                <strong>{{ content }}</strong>
+              </template>
+            </gl-sprintf>
+          </p>
+          <slot name="intro-text-after"></slot>
+        </div>
 
-    <label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label>
-    <div class="gl-mt-2 gl-w-half gl-xs-w-full">
-      <gl-dropdown
-        class="gl-shadow-none gl-w-full"
-        data-qa-selector="access_level_dropdown"
-        v-bind="$attrs"
-        :text="selectedRoleName"
-      >
-        <template v-for="(key, item) in accessLevels">
-          <gl-dropdown-item
-            :key="key"
-            active-class="is-active"
-            is-check-item
-            :is-checked="key === selectedAccessLevel"
-            @click="changeSelectedItem(key)"
-          >
-            <div>{{ item }}</div>
-          </gl-dropdown-item>
-        </template>
-      </gl-dropdown>
-    </div>
+        <gl-form-group
+          :invalid-feedback="invalidFeedbackMessage"
+          :state="validationState"
+          :description="formGroupDescription"
+          data-testid="members-form-group"
+        >
+          <label :id="selectLabelId" class="col-form-label">{{ labelSearchField }}</label>
+          <slot name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot>
+        </gl-form-group>
 
-    <div class="gl-mt-2 gl-w-half gl-xs-w-full">
-      <gl-sprintf :message="$options.READ_MORE_TEXT">
-        <template #link="{ content }">
-          <gl-link :href="helpLink" target="_blank">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </div>
+        <label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label>
+        <div class="gl-mt-2 gl-w-half gl-xs-w-full">
+          <gl-dropdown
+            class="gl-shadow-none gl-w-full"
+            data-qa-selector="access_level_dropdown"
+            v-bind="$attrs"
+            :text="selectedRoleName"
+          >
+            <template v-for="(key, item) in accessLevels">
+              <gl-dropdown-item
+                :key="key"
+                active-class="is-active"
+                is-check-item
+                :is-checked="key === selectedAccessLevel"
+                @click="changeSelectedItem(key)"
+              >
+                <div>{{ item }}</div>
+              </gl-dropdown-item>
+            </template>
+          </gl-dropdown>
+        </div>
 
-    <label class="gl-mt-5 gl-display-block" for="expires_at">{{
-      $options.ACCESS_EXPIRE_DATE
-    }}</label>
-    <div class="gl-mt-2 gl-w-half gl-xs-w-full gl-display-inline-block">
-      <gl-datepicker
-        v-model="selectedDate"
-        class="gl-display-inline!"
-        :min-date="minDate"
-        :target="null"
-      >
-        <template #default="{ formattedDate }">
-          <gl-form-input class="gl-w-full" :value="formattedDate" :placeholder="__(`YYYY-MM-DD`)" />
-        </template>
-      </gl-datepicker>
-    </div>
-    <slot name="form-after"></slot>
+        <div class="gl-mt-2 gl-w-half gl-xs-w-full">
+          <gl-sprintf :message="$options.READ_MORE_TEXT">
+            <template #link="{ content }">
+              <gl-link :href="helpLink" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </div>
 
+        <label class="gl-mt-5 gl-display-block" for="expires_at">{{
+          $options.ACCESS_EXPIRE_DATE
+        }}</label>
+        <div class="gl-mt-2 gl-w-half gl-xs-w-full gl-display-inline-block">
+          <gl-datepicker
+            v-model="selectedDate"
+            class="gl-display-inline!"
+            :min-date="minDate"
+            :target="null"
+          >
+            <template #default="{ formattedDate }">
+              <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>
-      <gl-button data-testid="cancel-button" @click="closeModal">
-        {{ $options.CANCEL_BUTTON_TEXT }}
-      </gl-button>
+      <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('passes attrs to CE base', () => {
+      expect(findCEBase().props()).toMatchObject({
+        ...propsData,
+        currentSlot: 'default',
+        extraSlots: EEInviteModalBase.EXTRA_SLOTS,
+      });
     });
 
-    it('displays the introText', () => {
-      expect(findIntroText()).toBe(propsData.labelIntroText);
+    it("doesn't show the overage content", () => {
+      expect(findOverageModalContent().isVisible()).toBe(false);
     });
 
-    it('renders the Cancel button text correctly', () => {
-      expect(findCancelButton().text()).toBe(CANCEL_BUTTON_TEXT);
-    });
+    it('when reset is emitted on base, emits reset', () => {
+      expect(wrapper.emitted('reset')).toBeUndefined();
 
-    it('renders the Invite button text correctly', () => {
-      expect(findInviteButton().text()).toBe(INVITE_BUTTON_TEXT);
-    });
+      findCEBase().vm.$emit('reset');
 
-    it('renders the Invite button modal without isLoading', () => {
-      expect(findInviteButton().props('loading')).toBe(false);
+      expect(wrapper.emitted('reset')).toHaveLength(1);
     });
 
-    describe('rendering the access levels dropdown', () => {
-      it('sets the default dropdown text to the default access level name', () => {
-        expect(findDropdown().attributes('text')).toBe('Guest');
+    describe('(integration) when invite is clicked', () => {
+      beforeEach(async () => {
+        clickInviteButton();
+        await nextTick();
       });
 
-      it('renders dropdown items for each accessLevel', () => {
-        expect(findDropdownItems()).toHaveLength(5);
+      it('does not change title', () => {
+        expect(findModalTitle()).toBe(propsData.modalTitle);
       });
-    });
-
-    it('renders the correct link', () => {
-      expect(findLink().attributes('href')).toBe(propsData.helpLink);
-    });
-
-    it('renders the datepicker', () => {
-      expect(findDatepicker().exists()).toBe(true);
-    });
-
-    it("doesn't show the overage content", () => {
-      expect(findOverageModalContent().isVisible()).toBe(false);
-    });
 
-    it('renders the members form group', () => {
-      expect(findMembersFormGroup().props()).toEqual({
-        description: propsData.formGroupDescription,
-        invalidFeedback: '',
-        state: null,
+      it('does not show back button', () => {
+        expect(findBackButton().exists()).toBe(false);
       });
-    });
-  });
-
-  it('with isLoading, shows loading for invite button', () => {
-    createComponent({
-      isLoading: true,
-    });
 
-    expect(findInviteButton().props('loading')).toBe(true);
-  });
-
-  it('with invalidFeedbackMessage, set members form group validation state', () => {
-    createComponent({
-      invalidFeedbackMessage: 'invalid message!',
-    });
+      it('shows initial modal content', () => {
+        expect(findInitialModalContent().isVisible()).toBe(true);
+      });
 
-    expect(findMembersFormGroup().props()).toEqual({
-      description: propsData.formGroupDescription,
-      invalidFeedback: 'invalid message!',
-      state: false,
+      it('emits submit', () => {
+        expect(wrapper.emitted('submit')).toEqual([[{ accessLevel: 10, expiresAt: undefined }]]);
+      });
     });
   });
 
-  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>',