Add latest changes from gitlab-org/gitlab@master

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 ||