remove_member_modal.vue 3.3 KB
Newer Older
1 2
<script>
import { GlFormCheckbox, GlModal } from '@gitlab/ui';
3
import { mapActions, mapState } from 'vuex';
4
import csrf from '~/lib/utils/csrf';
5
import { s__, __ } from '~/locale';
6
import UserDeletionObstaclesList from '~/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue';
7 8 9 10 11 12 13 14 15

export default {
  actionCancel: {
    text: __('Cancel'),
  },
  csrf,
  components: {
    GlFormCheckbox,
    GlModal,
16
    UserDeletionObstaclesList,
17
  },
18
  inject: ['namespace'],
19
  computed: {
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
    ...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;
      },
36 37
      userDeletionObstacles(state) {
        return state[this.namespace].removeMemberModalData.userDeletionObstacles ?? {};
38 39 40 41 42
      },
      removeMemberModalVisible(state) {
        return state[this.namespace].removeMemberModalVisible;
      },
    }),
43
    isGroupMember() {
44
      return this.memberType === 'GroupMember';
45
    },
46
    actionText() {
47 48 49 50 51 52 53
      if (this.isAccessRequest) {
        return __('Deny access request');
      } else if (this.isInvite) {
        return s__('Member|Revoke invite');
      }

      return __('Remove member');
54 55 56 57 58 59 60 61 62
    },
    actionPrimary() {
      return {
        text: this.actionText,
        attributes: {
          variant: 'danger',
        },
      };
    },
63
    hasWorkspaceAccess() {
64 65
      return !this.isAccessRequest && !this.isInvite;
    },
66 67
    hasObstaclesToUserDeletion() {
      return this.hasWorkspaceAccess && this.userDeletionObstacles.obstacles?.length;
68
    },
69 70
  },
  methods: {
71 72 73 74 75
    ...mapActions({
      hideRemoveMemberModal(dispatch) {
        return dispatch(`${this.namespace}/hideRemoveMemberModal`);
      },
    }),
76 77 78 79 80 81 82 83 84 85 86 87 88 89
    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"
90
    :visible="removeMemberModalVisible"
91
    data-qa-selector="remove_member_modal_content"
92
    @primary="submitForm"
93
    @hide="hideRemoveMemberModal"
94
  >
95 96
    <form ref="form" :action="memberPath" method="post">
      <p>{{ message }}</p>
97

98 99 100 101
      <user-deletion-obstacles-list
        v-if="hasObstaclesToUserDeletion"
        :obstacles="userDeletionObstacles.obstacles"
        :user-name="userDeletionObstacles.name"
102 103
      />

104 105
      <input ref="method" type="hidden" name="_method" value="delete" />
      <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
106 107 108
      <gl-form-checkbox v-if="isGroupMember" name="remove_sub_memberships">
        {{ __('Also remove direct user membership from subgroups and projects') }}
      </gl-form-checkbox>
109
      <gl-form-checkbox v-if="hasWorkspaceAccess" name="unassign_issuables">
110 111 112 113 114
        {{ __('Also unassign this user from related issues and merge requests') }}
      </gl-form-checkbox>
    </form>
  </gl-modal>
</template>