Merge branch '267118-simplify-delete-user-modal-init' into 'master'

Simplify user modal manager implementation

See merge request gitlab-org/gitlab!48815

app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue

 <script>
+import DeleteUserModal from './delete_user_modal.vue';
+
 export default {
+  components: { DeleteUserModal },
   props: {
     modalConfiguration: {
       required: true,
       type: Object,
     },
-    actionModals: {
-      required: true,
-      type: Object,
-    },
     csrfToken: {
       required: true,
       type: String,
@@ -21,10 +20,7 @@ export default {
   },
   computed: {
     activeModal() {
-      if (!this.currentModalData) return null;
-      const { glModalAction: action } = this.currentModalData;
-
-      return this.actionModals[action];
+      return Boolean(this.currentModalData);
     },
 
     modalProps() {
@@ -56,9 +52,7 @@ export default {
 
     show(modalData) {
       const { glModalAction: requestedAction } = modalData;
-      if (!this.actionModals[requestedAction]) {
-        throw new Error(`Requested non-existing modal action ${requestedAction}`);
-      }
+
       if (!this.modalConfiguration[requestedAction]) {
         throw new Error(`Modal action ${requestedAction} has no configuration in HTML`);
       }
@@ -73,5 +67,5 @@ export default {
 };
 </script>
 <template>
-  <div :is="activeModal" v-if="activeModal" ref="modal" v-bind="modalProps" />
+  <delete-user-modal v-if="activeModal" ref="modal" v-bind="modalProps" />
 </template>

app/assets/javascripts/pages/admin/users/index.js

@@ -2,16 +2,11 @@ import Vue from 'vue';
 
 import Translate from '~/vue_shared/translate';
 import ModalManager from './components/user_modal_manager.vue';
-import DeleteUserModal from './components/delete_user_modal.vue';
 import csrf from '~/lib/utils/csrf';
 import initConfirmModal from '~/confirm_modal';
 
-const MODAL_TEXTS_CONTAINER_SELECTOR = '#modal-texts';
-const MODAL_MANAGER_SELECTOR = '#user-modal';
-const ACTION_MODALS = {
-  delete: DeleteUserModal,
-  'delete-with-contributions': DeleteUserModal,
-};
+const MODAL_TEXTS_CONTAINER_SELECTOR = '#js-modal-texts';
+const MODAL_MANAGER_SELECTOR = '#js-delete-user-modal';
 
 function loadModalsConfigurationFromHtml(modalsElement) {
   const modalsConfiguration = {};
@@ -54,7 +49,6 @@ document.addEventListener('DOMContentLoaded', () => {
         ref: 'manager',
         props: {
           modalConfiguration,
-          actionModals: ACTION_MODALS,
           csrfToken: csrf.token,
         },
       });

app/views/admin/users/_modals.html.haml

-#user-modal
-#modal-texts.hidden{ "hidden": true, "aria-hidden": true }
+#js-delete-user-modal
+#js-modal-texts.hidden{ "hidden": true, "aria-hidden": true }
   %div{ data: { modal: "delete",
     title: s_("AdminUsers|Delete User %{username}?"),
     action: s_('AdminUsers|Delete user'),

spec/frontend/pages/admin/users/components/user_modal_manager_spec.js

@@ -14,21 +14,18 @@ describe('Users admin page Modal Manager', () => {
     },
   };
 
-  const actionModals = {
-    action1: ModalStub,
-    action2: ModalStub,
-  };
-
   let wrapper;
 
   const createComponent = (props = {}) => {
     wrapper = mount(UserModalManager, {
       propsData: {
-        actionModals,
         modalConfiguration,
         csrfToken: 'dummyCSRF',
         ...props,
       },
+      stubs: {
+        DeleteUserModal: ModalStub,
+      },
     });
   };
 
@@ -43,11 +40,6 @@ describe('Users admin page Modal Manager', () => {
       expect(wrapper.find({ ref: 'modal' }).exists()).toBeFalsy();
     });
 
-    it('throws if non-existing action is requested', () => {
-      createComponent();
-      expect(() => wrapper.vm.show({ glModalAction: 'non-existing' })).toThrow();
-    });
-
     it('throws if action has no proper configuration', () => {
       createComponent({
         modalConfiguration: {},