Merge branch '267118-migrate-delete-user-to-confirm-modal' into 'master'

Migrate user admin deactivate user modal to GlModal

See merge request gitlab-org/gitlab!47949

.rubocop_manual_todo.yml

@@ -228,7 +228,6 @@ Rails/SaveBang:
     - 'spec/features/admin/admin_sees_project_statistics_spec.rb'
     - 'spec/features/admin/admin_sees_projects_statistics_spec.rb'
     - 'spec/features/admin/admin_users_impersonation_tokens_spec.rb'
-    - 'spec/features/admin/admin_users_spec.rb'
     - 'spec/features/boards/sidebar_spec.rb'
     - 'spec/features/calendar_spec.rb'
     - 'spec/features/commits_spec.rb'

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

-<script>
-/* eslint-disable vue/no-v-html */
-import { GlModal } from '@gitlab/ui';
-import { sprintf } from '~/locale';
-
-export default {
-  components: {
-    GlModal,
-  },
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    content: {
-      type: String,
-      required: true,
-    },
-    action: {
-      type: String,
-      required: true,
-    },
-    url: {
-      type: String,
-      required: true,
-    },
-    username: {
-      type: String,
-      required: true,
-    },
-    csrfToken: {
-      type: String,
-      required: true,
-    },
-    method: {
-      type: String,
-      required: false,
-      default: 'put',
-    },
-  },
-  computed: {
-    modalTitle() {
-      return sprintf(this.title, { username: this.username });
-    },
-  },
-  methods: {
-    show() {
-      this.$refs.modal.show();
-    },
-    submit() {
-      this.$refs.form.submit();
-    },
-  },
-};
-</script>
-<template>
-  <gl-modal
-    ref="modal"
-    modal-id="user-operation-modal"
-    :title="modalTitle"
-    ok-variant="warning"
-    :ok-title="action"
-    @ok="submit"
-  >
-    <form ref="form" :action="url" method="post">
-      <span v-html="content"></span>
-      <input ref="method" type="hidden" name="_method" :value="method" />
-      <input :value="csrfToken" type="hidden" name="authenticity_token" />
-    </form>
-  </gl-modal>
-</template>

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

@@ -3,14 +3,12 @@ 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 UserOperationConfirmationModal from './components/user_operation_confirmation_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 = {
-  deactivate: UserOperationConfirmationModal,
   delete: DeleteUserModal,
   'delete-with-contributions': DeleteUserModal,
 };

app/helpers/users_helper.rb

@@ -149,6 +149,35 @@ module UsersHelper
     header + list
   end
 
+  def user_deactivation_data(user, message)
+    {
+      path: deactivate_admin_user_path(user),
+      method: 'put',
+      modal_attributes: {
+        title: s_('AdminUsers|Deactivate user %{username}?') % { username: sanitize_name(user.name) },
+        messageHtml: message,
+        okVariant: 'warning',
+        okTitle: s_('AdminUsers|Deactivate')
+      }.to_json
+    }
+  end
+
+  def user_deactivation_effects
+    header = tag.p s_('AdminUsers|Deactivating a user has the following effects:')
+
+    list = tag.ul do
+      concat tag.li s_('AdminUsers|The user will be logged out')
+      concat tag.li s_('AdminUsers|The user will not be able to access git repositories')
+      concat tag.li s_('AdminUsers|The user will not be able to access the API')
+      concat tag.li s_('AdminUsers|The user will not receive any notifications')
+      concat tag.li s_('AdminUsers|The user will not be able to use slash commands')
+      concat tag.li s_('AdminUsers|When the user logs back in, their account will reactivate as a fully active account')
+      concat tag.li s_('AdminUsers|Personal projects, group and user history will be left intact')
+    end
+
+    header + list
+  end
+
   private
 
   def blocked_user_badge(user)

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

 #user-modal
 #modal-texts.hidden{ "hidden": true, "aria-hidden": true }
-  %div{ data: { modal: "deactivate",
-    title: s_("AdminUsers|Deactivate User %{username}?"),
-    action: s_("AdminUsers|Deactivate") } }
-    = render partial: 'admin/users/user_deactivation_effects'
-
   %div{ data: { modal: "delete",
     title: s_("AdminUsers|Delete User %{username}?"),
     action: s_('AdminUsers|Delete user'),

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

@@ -47,9 +47,7 @@
                     = s_('AdminUsers|Block')
               - if user.can_be_deactivated?
                 %li
-                  %button.btn.btn-default-tertiary{ data: { 'gl-modal-action': 'deactivate',
-                    url: deactivate_admin_user_path(user),
-                    username: sanitize_name(user.name) } }
+                  %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_deactivation_data(user, user_deactivation_effects) }
                     = s_('AdminUsers|Deactivate')
               - elsif user.deactivated?
                 %li

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

-%p
-  = s_('AdminUsers|Deactivating a user has the following effects:')
-%ul
-  %li
-    = s_('AdminUsers|The user will be logged out')
-  %li
-    = s_('AdminUsers|The user will not be able to access git repositories')
-  %li
-    = s_('AdminUsers|The user will not be able to access the API')
-  %li
-    = s_('AdminUsers|The user will not receive any notifications')
-  %li
-    = s_('AdminUsers|The user will not be able to use slash commands')
-  %li
-    = s_('AdminUsers|When the user logs back in, their account will reactivate as a fully active account')
-  %li
-    = s_('AdminUsers|Personal projects, group and user history will be left intact')
-  = render_if_exists 'admin/users/user_deactivation_effects_on_seats'

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

@@ -164,14 +164,10 @@
             .card-header.bg-warning.text-white
               Deactivate this user
             .card-body
-              = render partial: 'admin/users/user_deactivation_effects'
+              = user_deactivation_effects
               %br
-              %button.btn.gl-button.btn-warning{ data: { 'gl-modal-action': 'deactivate',
-                content: 'You can always re-activate their account, their data will remain intact.',
-                url: deactivate_admin_user_path(@user),
-                username: sanitize_name(@user.name) } }
+              %button.btn.gl-button.btn-warning.js-confirm-modal-button{ data: user_deactivation_data(@user, s_('AdminUsers|You can always re-activate their account, their data will remain intact.')) }
                 = s_('AdminUsers|Deactivate user')
-
       - if @user.blocked?
         - if @user.blocked_pending_approval?
           = render 'admin/users/approve_user', user: @user

locale/gitlab.pot

@@ -2142,10 +2142,10 @@ msgstr ""
 msgid "AdminUsers|Deactivate"
 msgstr ""
 
-msgid "AdminUsers|Deactivate User %{username}?"
+msgid "AdminUsers|Deactivate user"
 msgstr ""
 
-msgid "AdminUsers|Deactivate user"
+msgid "AdminUsers|Deactivate user %{username}?"
 msgstr ""
 
 msgid "AdminUsers|Deactivated"
@@ -2277,6 +2277,9 @@ msgstr ""
 msgid "AdminUsers|You can always block their account again if needed."
 msgstr ""
 
+msgid "AdminUsers|You can always re-activate their account, their data will remain intact."
+msgstr ""
+
 msgid "AdminUsers|You can always unblock their account, their data will remain intact."
 msgstr ""
 

spec/frontend/pages/admin/users/components/__snapshots__/user_operation_confirmation_modal_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`User Operation confirmation modal renders modal with form included 1`] = `
-<gl-modal-stub
-  modalclass=""
-  modalid="user-operation-modal"
-  ok-title="action"
-  ok-variant="warning"
-  size="md"
-  title="title"
-  titletag="h4"
->
-  <form
-    action="/url"
-    method="post"
-  >
-    <span>
-      content
-    </span>
-     
-    <input
-      name="_method"
-      type="hidden"
-      value="method"
-    />
-     
-    <input
-      name="authenticity_token"
-      type="hidden"
-      value="csrf"
-    />
-  </form>
-</gl-modal-stub>
-`;

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

-import { shallowMount } from '@vue/test-utils';
-import { GlModal } from '@gitlab/ui';
-import UserOperationConfirmationModal from '~/pages/admin/users/components/user_operation_confirmation_modal.vue';
-
-describe('User Operation confirmation modal', () => {
-  let wrapper;
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(UserOperationConfirmationModal, {
-      propsData: {
-        title: 'title',
-        content: 'content',
-        action: 'action',
-        url: '/url',
-        username: 'username',
-        csrfToken: 'csrf',
-        method: 'method',
-        ...props,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('renders modal with form included', () => {
-    createComponent();
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it('closing modal with ok button triggers form submit', () => {
-    createComponent();
-    const form = wrapper.find('form');
-    jest.spyOn(form.element, 'submit').mockReturnValue();
-    wrapper.find(GlModal).vm.$emit('ok');
-    return wrapper.vm.$nextTick().then(() => {
-      expect(form.element.submit).toHaveBeenCalled();
-      expect(form.element.action).toContain(wrapper.props('url'));
-      expect(new FormData(form.element).get('authenticity_token')).toEqual(
-        wrapper.props('csrfToken'),
-      );
-    });
-  });
-});