Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

1 files changed, 86 insertions, 0 deletions

diff --git a/app/assets/javascripts/members/components/action_dropdowns/remove_member_dropdown_item.vue b/app/assets/javascripts/members/components/action_dropdowns/remove_member_dropdown_item.vue
new file mode 100644
index 00000000000..f224aaa31f7
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/remove_member_dropdown_item.vue
@@ -0,0 +1,86 @@
+<script>
+import { GlDropdownItem } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+
+export default {
+  name: 'RemoveMemberDropdownItem',
+  components: { GlDropdownItem },
+  inject: ['namespace'],
+  props: {
+    memberId: {
+      type: Number,
+      required: true,
+    },
+    /**
+     * `GroupMember` (`app/models/members/group_member.rb`)
+     * or
+     * `ProjectMember` (`app/models/members/project_member.rb`).
+     */
+    memberModelType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    modalMessage: {
+      type: String,
+      required: true,
+    },
+    isAccessRequest: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isInvite: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    userDeletionObstacles: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    preventRemoval: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+    }),
+    modalData() {
+      return {
+        isAccessRequest: this.isAccessRequest,
+        isInvite: this.isInvite,
+        memberPath: this.memberPath.replace(':id', this.memberId),
+        memberModelType: this.memberModelType,
+        message: this.modalMessage,
+        userDeletionObstacles: this.userDeletionObstacles,
+        preventRemoval: this.preventRemoval,
+      };
+    },
+  },
+  methods: {
+    ...mapActions({
+      showRemoveMemberModal(dispatch, payload) {
+        return dispatch(`${this.namespace}/showRemoveMemberModal`, payload);
+      },
+    }),
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown-item
+    data-qa-selector="delete_member_dropdown_item"
+    @click="showRemoveMemberModal(modalData)"
+  >
+    <span class="gl-text-red-500">
+      <slot></slot>
+    </span>
+  </gl-dropdown-item>
+</template>