diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-22 15:10:04 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-22 15:10:04 +0300 |
commit | cb8bd7d5946ca50a2de99645687a633a0c8105be (patch) | |
tree | a327e4da74f2a2d050a6971e0e03d41e5b0c5780 /app/assets/javascripts/members | |
parent | 8e0dafbb6665d431f7f1b635c0f7c4a5c61bc325 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/members')
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, }); |