diff options
Diffstat (limited to 'app/assets/javascripts/pages/admin/users')
3 files changed, 56 insertions, 46 deletions
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue index 9c303cc6445..d2b83f980d7 100644 --- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue +++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue @@ -85,38 +85,36 @@ export default { <template> <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger"> - <template> - <p> - <gl-sprintf :message="content"> - <template #username> - <strong>{{ username }}</strong> - </template> - <template #strong="props"> - <strong>{{ props.content }}</strong> - </template> - </gl-sprintf> - </p> + <p> + <gl-sprintf :message="content"> + <template #username> + <strong>{{ username }}</strong> + </template> + <template #strong="props"> + <strong>{{ props.content }}</strong> + </template> + </gl-sprintf> + </p> - <p> - <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')"> - <template #username> - <code>{{ username }}</code> - </template> - </gl-sprintf> - </p> + <p> + <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')"> + <template #username> + <code>{{ username }}</code> + </template> + </gl-sprintf> + </p> - <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent> - <input ref="method" type="hidden" name="_method" value="delete" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> - <gl-form-input - v-model="enteredUsername" - autofocus - type="text" - name="username" - autocomplete="off" - /> - </form> - </template> + <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent> + <input ref="method" type="hidden" name="_method" value="delete" /> + <input :value="csrfToken" type="hidden" name="authenticity_token" /> + <gl-form-input + v-model="enteredUsername" + autofocus + type="text" + name="username" + autocomplete="off" + /> + </form> <template #modal-footer> <gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button> <gl-button diff --git a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue index 24c9fa4cb3f..1dfea3f1e7b 100644 --- a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue +++ b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue @@ -12,6 +12,10 @@ export default { required: true, type: String, }, + selector: { + required: true, + type: String, + }, }, data() { return { @@ -34,22 +38,24 @@ export default { }, mounted() { - document.addEventListener('click', this.handleClick); - }, + /* + * Here we're looking for every button that needs to launch a modal + * on click, and then attaching a click event handler to show the modal + * if it's correctly configured. + * + * TODO: Replace this with integrated modal components https://gitlab.com/gitlab-org/gitlab/-/issues/320922 + */ + document.querySelectorAll(this.selector).forEach((button) => { + button.addEventListener('click', (e) => { + if (!button.dataset.glModalAction) return; - beforeDestroy() { - document.removeEventListener('click', this.handleClick); + e.preventDefault(); + this.show(button.dataset); + }); + }); }, methods: { - handleClick(e) { - const { glModalAction: action } = e.target.dataset; - if (!action) return; - - this.show(e.target.dataset); - e.preventDefault(); - }, - show(modalData) { const { glModalAction: requestedAction } = modalData; diff --git a/app/assets/javascripts/pages/admin/users/index.js b/app/assets/javascripts/pages/admin/users/index.js index 75a8284f5f8..b1079c3b068 100644 --- a/app/assets/javascripts/pages/admin/users/index.js +++ b/app/assets/javascripts/pages/admin/users/index.js @@ -1,11 +1,13 @@ import Vue from 'vue'; +import { initAdminUsersApp, initCohortsEmptyState } from '~/admin/users'; +import initTabs from '~/admin/users/tabs'; +import initConfirmModal from '~/confirm_modal'; +import csrf from '~/lib/utils/csrf'; import Translate from '~/vue_shared/translate'; import ModalManager from './components/user_modal_manager.vue'; -import csrf from '~/lib/utils/csrf'; -import initConfirmModal from '~/confirm_modal'; -import initAdminUsersApp from '~/admin/users'; +const CONFIRM_DELETE_BUTTON_SELECTOR = '.js-delete-user-modal-button'; const MODAL_TEXTS_CONTAINER_SELECTOR = '#js-modal-texts'; const MODAL_MANAGER_SELECTOR = '#js-delete-user-modal'; @@ -32,6 +34,8 @@ function loadModalsConfigurationFromHtml(modalsElement) { document.addEventListener('DOMContentLoaded', () => { Vue.use(Translate); + initAdminUsersApp(); + const modalConfiguration = loadModalsConfigurationFromHtml( document.querySelector(MODAL_TEXTS_CONTAINER_SELECTOR), ); @@ -49,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => { return h(ModalManager, { ref: 'manager', props: { + selector: CONFIRM_DELETE_BUTTON_SELECTOR, modalConfiguration, csrfToken: csrf.token, }, @@ -57,5 +62,6 @@ document.addEventListener('DOMContentLoaded', () => { }); initConfirmModal(); - initAdminUsersApp(); + initCohortsEmptyState(); + initTabs(); }); |