Add latest changes from gitlab-org/gitlab@master

7 files changed, 157 insertions, 15 deletions

diff --git a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
index a477aedd233..665e8ee69f7 100644
--- a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 
 export default {
   name: 'RemoveMemberButton',
@@ -45,7 +45,7 @@ export default {
     oncallSchedules: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
   },
   computed: {
@@ -54,30 +54,35 @@ export default {
         return state[this.namespace].memberPath;
       },
     }),
-    computedMemberPath() {
-      return this.memberPath.replace(':id', this.memberId);
-    },
-    stringifiedSchedules() {
-      return JSON.stringify(this.oncallSchedules);
+    modalData() {
+      return {
+        isAccessRequest: this.isAccessRequest,
+        isInvite: this.isInvite,
+        memberPath: this.memberPath.replace(':id', this.memberId),
+        memberType: this.memberType,
+        message: this.message,
+        oncallSchedules: this.oncallSchedules,
+      };
     },
   },
+  methods: {
+    ...mapActions({
+      showRemoveMemberModal(dispatch, payload) {
+        return dispatch(`${this.namespace}/showRemoveMemberModal`, payload);
+      },
+    }),
+  },
 };
 </script>
 
 <template>
   <gl-button
-    v-gl-tooltip.hover
-    class="js-remove-member-button"
+    v-gl-tooltip
     variant="danger"
     :title="title"
     :aria-label="title"
     :icon="icon"
-    :data-member-path="computedMemberPath"
-    :data-member-type="memberType"
-    :data-is-access-request="isAccessRequest"
-    :data-is-invite="isInvite"
-    :data-message="message"
-    :data-oncall-schedules="stringifiedSchedules"
     data-qa-selector="delete_member_button"
+    @click="showRemoveMemberModal(modalData)"
   />
 </template>
diff --git a/app/assets/javascripts/members/components/modals/remove_member_modal.vue b/app/assets/javascripts/members/components/modals/remove_member_modal.vue
new file mode 100644
index 00000000000..00b6ebf9a73
--- /dev/null
+++ b/app/assets/javascripts/members/components/modals/remove_member_modal.vue
@@ -0,0 +1,114 @@
+<script>
+import { GlFormCheckbox, GlModal } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import csrf from '~/lib/utils/csrf';
+import { s__, __ } from '~/locale';
+import OncallSchedulesList from '~/vue_shared/components/oncall_schedules_list.vue';
+
+export default {
+  actionCancel: {
+    text: __('Cancel'),
+  },
+  csrf,
+  components: {
+    GlFormCheckbox,
+    GlModal,
+    OncallSchedulesList,
+  },
+  inject: ['namespace'],
+  computed: {
+    ...mapState({
+      isAccessRequest(state) {
+        return state[this.namespace].removeMemberModalData.isAccessRequest;
+      },
+      isInvite(state) {
+        return state[this.namespace].removeMemberModalData.isInvite;
+      },
+      memberPath(state) {
+        return state[this.namespace].removeMemberModalData.memberPath;
+      },
+      memberType(state) {
+        return state[this.namespace].removeMemberModalData.memberType;
+      },
+      message(state) {
+        return state[this.namespace].removeMemberModalData.message;
+      },
+      oncallSchedules(state) {
+        return state[this.namespace].removeMemberModalData.oncallSchedules ?? {};
+      },
+      removeMemberModalVisible(state) {
+        return state[this.namespace].removeMemberModalVisible;
+      },
+    }),
+    isGroupMember() {
+      return this.memberType === 'GroupMember';
+    },
+    actionText() {
+      if (this.isAccessRequest) {
+        return __('Deny access request');
+      } else if (this.isInvite) {
+        return s__('Member|Revoke invite');
+      }
+
+      return __('Remove member');
+    },
+    actionPrimary() {
+      return {
+        text: this.actionText,
+        attributes: {
+          variant: 'danger',
+        },
+      };
+    },
+    showUnassignIssuablesCheckbox() {
+      return !this.isAccessRequest && !this.isInvite;
+    },
+    isPartOfOncallSchedules() {
+      return !this.isAccessRequest && this.oncallSchedules.schedules?.length;
+    },
+  },
+  methods: {
+    ...mapActions({
+      hideRemoveMemberModal(dispatch) {
+        return dispatch(`${this.namespace}/hideRemoveMemberModal`);
+      },
+    }),
+    submitForm() {
+      this.$refs.form.submit();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="modal"
+    modal-id="remove-member-modal"
+    :action-cancel="$options.actionCancel"
+    :action-primary="actionPrimary"
+    :title="actionText"
+    :visible="removeMemberModalVisible"
+    data-qa-selector="remove_member_modal_content"
+    @primary="submitForm"
+    @hide="hideRemoveMemberModal"
+  >
+    <form ref="form" :action="memberPath" method="post">
+      <p>{{ message }}</p>
+
+      <oncall-schedules-list
+        v-if="isPartOfOncallSchedules"
+        :schedules="oncallSchedules.schedules"
+        :user-name="oncallSchedules.name"
+      />
+
+      <input ref="method" type="hidden" name="_method" value="delete" />
+      <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+      <gl-form-checkbox v-if="isGroupMember" name="remove_sub_memberships">
+        {{ __('Also remove direct user membership from subgroups and projects') }}
+      </gl-form-checkbox>
+      <gl-form-checkbox v-if="showUnassignIssuablesCheckbox" name="unassign_issuables">
+        {{ __('Also unassign this user from related issues and merge requests') }}
+      </gl-form-checkbox>
+    </form>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue
index b9c80edbc49..debc3fc31f6 100644
--- a/app/assets/javascripts/members/components/table/members_table.vue
+++ b/app/assets/javascripts/members/components/table/members_table.vue
@@ -7,6 +7,7 @@ import { mergeUrlParams } from '~/lib/utils/url_utility';
 import initUserPopovers from '~/user_popovers';
 import { FIELDS, ACTIVE_TAB_QUERY_PARAM_NAME } from '../../constants';
 import RemoveGroupLinkModal from '../modals/remove_group_link_modal.vue';
+import RemoveMemberModal from '../modals/remove_member_modal.vue';
 import CreatedAt from './created_at.vue';
 import ExpirationDatepicker from './expiration_datepicker.vue';
 import ExpiresAt from './expires_at.vue';
@@ -29,6 +30,7 @@ export default {
     MemberActionButtons,
     RoleDropdown,
     RemoveGroupLinkModal,
+    RemoveMemberModal,
     ExpirationDatepicker,
     LdapOverrideConfirmationModal: () =>
       import('ee_component/members/components/ldap/ldap_override_confirmation_modal.vue'),
@@ -225,6 +227,7 @@ export default {
       align="center"
     />
     <remove-group-link-modal />
+    <remove-member-modal />
     <ldap-override-confirmation-modal />
   </div>
 </template>
diff --git a/app/assets/javascripts/members/store/actions.js b/app/assets/javascripts/members/store/actions.js
index 7b191dd85d0..712f0d6caa7 100644
--- a/app/assets/javascripts/members/store/actions.js
+++ b/app/assets/javascripts/members/store/actions.js
@@ -25,6 +25,14 @@ export const hideRemoveGroupLinkModal = ({ commit }) => {
   commit(types.HIDE_REMOVE_GROUP_LINK_MODAL);
 };
 
+export const showRemoveMemberModal = ({ commit }, modalData) => {
+  commit(types.SHOW_REMOVE_MEMBER_MODAL, modalData);
+};
+
+export const hideRemoveMemberModal = ({ commit }) => {
+  commit(types.HIDE_REMOVE_MEMBER_MODAL);
+};
+
 export const updateMemberExpiration = async ({ state, commit }, { memberId, expiresAt }) => {
   try {
     await axios.put(
diff --git a/app/assets/javascripts/members/store/mutation_types.js b/app/assets/javascripts/members/store/mutation_types.js
index 77307aa745b..5fa75725552 100644
--- a/app/assets/javascripts/members/store/mutation_types.js
+++ b/app/assets/javascripts/members/store/mutation_types.js
@@ -8,3 +8,6 @@ export const HIDE_ERROR = 'HIDE_ERROR';
 
 export const SHOW_REMOVE_GROUP_LINK_MODAL = 'SHOW_REMOVE_GROUP_LINK_MODAL';
 export const HIDE_REMOVE_GROUP_LINK_MODAL = 'HIDE_REMOVE_GROUP_LINK_MODAL';
+
+export const SHOW_REMOVE_MEMBER_MODAL = 'SHOW_REMOVE_MEMBER_MODAL';
+export const HIDE_REMOVE_MEMBER_MODAL = 'HIDE_REMOVE_MEMBER_MODAL';
diff --git a/app/assets/javascripts/members/store/mutations.js b/app/assets/javascripts/members/store/mutations.js
index f4aac1571d6..b4cf9f3480f 100644
--- a/app/assets/javascripts/members/store/mutations.js
+++ b/app/assets/javascripts/members/store/mutations.js
@@ -47,4 +47,11 @@ export default {
   [types.HIDE_REMOVE_GROUP_LINK_MODAL](state) {
     state.removeGroupLinkModalVisible = false;
   },
+  [types.SHOW_REMOVE_MEMBER_MODAL](state, modalData) {
+    state.removeMemberModalData = modalData;
+    state.removeMemberModalVisible = true;
+  },
+  [types.HIDE_REMOVE_MEMBER_MODAL](state) {
+    state.removeMemberModalVisible = false;
+  },
 };
diff --git a/app/assets/javascripts/members/store/state.js b/app/assets/javascripts/members/store/state.js
index 5415b1c5f25..c233a660840 100644
--- a/app/assets/javascripts/members/store/state.js
+++ b/app/assets/javascripts/members/store/state.js
@@ -20,4 +20,6 @@ export default ({
   errorMessage: '',
   removeGroupLinkModalVisible: false,
   groupLinkToRemove: null,
+  removeMemberModalData: {},
+  removeMemberModalVisible: false,
 });