diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-02 15:10:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-02 15:10:59 +0300 |
commit | f78aa88c769acebd95eca52b07169a57196a3318 (patch) | |
tree | fa4e1ce197ced08f86066e2d8d98e9d7d66a47d1 /app/assets/javascripts | |
parent | cbd97a2467d53b89fe4896b61ed5ab3f7203f111 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/members/components/table/max_role.vue (renamed from app/assets/javascripts/members/components/table/role_dropdown.vue) | 90 | ||||
-rw-r--r-- | app/assets/javascripts/members/components/table/members_table.vue | 7 | ||||
-rw-r--r-- | app/assets/javascripts/members/index.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/members/store/actions.js | 12 | ||||
-rw-r--r-- | app/assets/javascripts/members/store/mutation_types.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/members/store/mutations.js | 9 |
6 files changed, 64 insertions, 59 deletions
diff --git a/app/assets/javascripts/members/components/table/role_dropdown.vue b/app/assets/javascripts/members/components/table/max_role.vue index 2b72a3fe6e8..d0b04752ef2 100644 --- a/app/assets/javascripts/members/components/table/role_dropdown.vue +++ b/app/assets/javascripts/members/components/table/max_role.vue @@ -1,5 +1,5 @@ <script> -import { GlCollapsibleListbox } from '@gitlab/ui'; +import { GlBadge, GlCollapsibleListbox } from '@gitlab/ui'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; // eslint-disable-next-line no-restricted-imports import { mapActions } from 'vuex'; @@ -9,11 +9,12 @@ import { roleDropdownItems, initialSelectedRole } from 'ee_else_ce/members/utils import { s__ } from '~/locale'; export default { - name: 'RoleDropdown', components: { GlCollapsibleListbox, + GlBadge, LdapDropdownFooter: () => import('ee_component/members/components/action_dropdowns/ldap_dropdown_footer.vue'), + CustomPermissions: () => import('ee_component/members/components/table/custom_permissions.vue'), }, inject: ['namespace', 'group'], props: { @@ -27,37 +28,40 @@ export default { }, }, data() { + const accessLevelOptions = roleDropdownItems(this.member); return { - isDesktop: false, + accessLevelOptions, busy: false, - selectedRole: null, + customPermissions: this.member.customPermissions ?? [], + isDesktop: false, + memberRoleId: this.member.accessLevel.memberRoleId ?? null, + selectedRole: initialSelectedRole(accessLevelOptions.flatten, this.member), }; }, computed: { disabled() { return this.permissions.canOverride && !this.member.isOverridden; }, - dropdownItems() { - return roleDropdownItems(this.member); - }, - }, - created() { - this.selectedRole = initialSelectedRole(this.dropdownItems.flatten, this.member); }, mounted() { this.isDesktop = bp.isDesktop(); }, methods: { ...mapActions({ - updateMemberRole(dispatch, payload) { - return dispatch(`${this.namespace}/updateMemberRole`, payload); + updateMemberRole(dispatch, { memberId, accessLevel, memberRoleId }) { + return dispatch(`${this.namespace}/updateMemberRole`, { + memberId, + accessLevel, + memberRoleId, + }); }, }), async handleSelect(value) { this.busy = true; - const newRole = this.dropdownItems.flatten.find((item) => item.value === value); + const newRole = this.accessLevelOptions.flatten.find((item) => item.value === value); const previousRole = this.selectedRole; + const previousMemberRoleId = this.memberRoleId; try { const confirmed = await guestOverageConfirmAction({ @@ -74,18 +78,18 @@ export default { } this.selectedRole = value; + this.memberRoleId = newRole.memberRoleId; await this.updateMemberRole({ memberId: this.member.id, - accessLevel: { - integerValue: newRole.accessLevel, - memberRoleId: newRole.memberRoleId, - }, + accessLevel: newRole.accessLevel, + memberRoleId: newRole.memberRoleId, }); this.$toast.show(s__('Members|Role updated successfully.')); } catch (error) { this.selectedRole = previousRole; + this.memberRoleId = previousMemberRoleId; Sentry.captureException(error); } finally { this.busy = false; @@ -96,25 +100,35 @@ export default { </script> <template> - <gl-collapsible-listbox - :placement="isDesktop ? 'left' : 'right'" - :toggle-text="member.accessLevel.stringValue" - :header-text="__('Change role')" - :disabled="disabled" - :loading="busy" - data-qa-selector="access_level_dropdown" - :items="dropdownItems.formatted" - :selected="selectedRole" - @select="handleSelect" - > - <template #list-item="{ item }"> - <span data-qa-selector="access_level_link">{{ item.text }}</span> - </template> - <template #footer> - <ldap-dropdown-footer - v-if="permissions.canOverride && member.isOverridden" - :member-id="member.id" - /> - </template> - </gl-collapsible-listbox> + <div> + <gl-collapsible-listbox + v-if="permissions.canUpdate" + :placement="isDesktop ? 'left' : 'right'" + :header-text="__('Change role')" + :disabled="disabled" + :loading="busy" + data-qa-selector="access_level_dropdown" + :items="accessLevelOptions.formatted" + :selected="selectedRole" + @select="handleSelect" + > + <template #list-item="{ item }"> + <span data-qa-selector="access_level_link">{{ item.text }}</span> + </template> + <template #footer> + <ldap-dropdown-footer + v-if="permissions.canOverride && member.isOverridden" + :member-id="member.id" + /> + </template> + </gl-collapsible-listbox> + + <gl-badge v-else>{{ member.accessLevel.stringValue }}</gl-badge> + + <custom-permissions + v-if="memberRoleId !== null" + :member-role-id="memberRoleId" + :custom-permissions="customPermissions" + /> + </div> </template> diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue index 2b3294c1c79..149947397ad 100644 --- a/app/assets/javascripts/members/components/table/members_table.vue +++ b/app/assets/javascripts/members/components/table/members_table.vue @@ -31,7 +31,7 @@ import MemberActions from './member_actions.vue'; import MemberAvatar from './member_avatar.vue'; import MemberSource from './member_source.vue'; import MemberActivity from './member_activity.vue'; -import RoleDropdown from './role_dropdown.vue'; +import MaxRole from './max_role.vue'; export default { name: 'MembersTable', @@ -44,7 +44,7 @@ export default { MembersTableCell, MemberSource, MemberActions, - RoleDropdown, + MaxRole, RemoveGroupLinkModal, RemoveMemberModal, ExpirationDatepicker, @@ -292,8 +292,7 @@ export default { <template #cell(maxRole)="{ item: member }"> <members-table-cell #default="{ permissions }" :member="member"> - <role-dropdown v-if="permissions.canUpdate" :permissions="permissions" :member="member" /> - <gl-badge v-else>{{ member.accessLevel.stringValue }}</gl-badge> + <max-role :permissions="permissions" :member="member" /> </members-table-cell> </template> diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js index 87ae670c146..ad477d8b4b6 100644 --- a/app/assets/javascripts/members/index.js +++ b/app/assets/javascripts/members/index.js @@ -2,6 +2,8 @@ import { GlToast } from '@gitlab/ui'; import Vue from 'vue'; // eslint-disable-next-line no-restricted-imports import Vuex from 'vuex'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; import { parseDataAttributes } from '~/members/utils'; import { MEMBER_TYPES } from 'ee_else_ce/members/constants'; import MembersTabs from './components/members_tabs.vue'; @@ -13,6 +15,7 @@ export const initMembersApp = (el, options) => { } Vue.use(Vuex); + Vue.use(VueApollo); Vue.use(GlToast); const { @@ -61,6 +64,7 @@ export const initMembersApp = (el, options) => { el, components: { MembersTabs }, store, + apolloProvider: new VueApollo({ defaultClient: createDefaultClient() }), provide: { currentUserId: gon.current_user_id || null, sourceId, diff --git a/app/assets/javascripts/members/store/actions.js b/app/assets/javascripts/members/store/actions.js index d696f618a3c..54a53e7c0a9 100644 --- a/app/assets/javascripts/members/store/actions.js +++ b/app/assets/javascripts/members/store/actions.js @@ -2,17 +2,15 @@ import axios from '~/lib/utils/axios_utils'; import { formatDate } from '~/lib/utils/datetime_utility'; import * as types from './mutation_types'; -export const updateMemberRole = async ({ state, commit }, { memberId, accessLevel }) => { +export const updateMemberRole = async ( + { state, commit }, + { memberId, accessLevel, memberRoleId }, +) => { try { await axios.put( state.memberPath.replace(/:id$/, memberId), - state.requestFormatter({ - accessLevel: accessLevel.integerValue, - memberRoleId: accessLevel.memberRoleId, - }), + state.requestFormatter({ accessLevel, memberRoleId }), ); - - commit(types.RECEIVE_MEMBER_ROLE_SUCCESS, { memberId, accessLevel }); } catch (error) { commit(types.RECEIVE_MEMBER_ROLE_ERROR, { error }); diff --git a/app/assets/javascripts/members/store/mutation_types.js b/app/assets/javascripts/members/store/mutation_types.js index 5fa75725552..c1cdbf6146f 100644 --- a/app/assets/javascripts/members/store/mutation_types.js +++ b/app/assets/javascripts/members/store/mutation_types.js @@ -1,4 +1,3 @@ -export const RECEIVE_MEMBER_ROLE_SUCCESS = 'RECEIVE_MEMBER_ROLE_SUCCESS'; export const RECEIVE_MEMBER_ROLE_ERROR = 'RECEIVE_MEMBER_ROLE_ERROR'; export const RECEIVE_MEMBER_EXPIRATION_SUCCESS = 'RECEIVE_MEMBER_EXPIRATION_SUCCESS'; diff --git a/app/assets/javascripts/members/store/mutations.js b/app/assets/javascripts/members/store/mutations.js index b4cf9f3480f..edc400aef7d 100644 --- a/app/assets/javascripts/members/store/mutations.js +++ b/app/assets/javascripts/members/store/mutations.js @@ -4,15 +4,6 @@ import * as types from './mutation_types'; import { findMember } from './utils'; export default { - [types.RECEIVE_MEMBER_ROLE_SUCCESS](state, { memberId, accessLevel }) { - const member = findMember(state, memberId); - - if (!member) { - return; - } - - Vue.set(member, 'accessLevel', accessLevel); - }, [types.RECEIVE_MEMBER_ROLE_ERROR](state, { error }) { state.errorMessage = error.response?.data?.message || |