Add latest changes from gitlab-org/gitlab@master

5 files changed, 60 insertions, 43 deletions

diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 98995730df4..b824a013f3b 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -1,40 +1,48 @@
 <script>
 import { GlTabs, GlTab, GlBadge, GlButton } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import { queryToObject } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import { MEMBER_TYPES, TAB_QUERY_PARAM_VALUES, ACTIVE_TAB_QUERY_PARAM_NAME } from '../constants';
+import { queryToObject } from '~/lib/utils/url_utility';
+import {
+  MEMBER_TYPES,
+  ACTIVE_TAB_QUERY_PARAM_NAME,
+  TAB_QUERY_PARAM_VALUES,
+  EE_TABS,
+} from 'ee_else_ce/members/constants';
 import MembersApp from './app.vue';
 
 const countComputed = (state, namespace) => state[namespace]?.pagination?.totalItems || 0;
 
+export const TABS = [
+  {
+    namespace: MEMBER_TYPES.user,
+    title: __('Members'),
+  },
+  {
+    namespace: MEMBER_TYPES.group,
+    title: __('Groups'),
+    attrs: { 'data-qa-selector': 'groups_list_tab' },
+    queryParamValue: TAB_QUERY_PARAM_VALUES.group,
+  },
+  {
+    namespace: MEMBER_TYPES.invite,
+    title: __('Invited'),
+    canManageMembersPermissionsRequired: true,
+    queryParamValue: TAB_QUERY_PARAM_VALUES.invite,
+  },
+  {
+    namespace: MEMBER_TYPES.accessRequest,
+    title: __('Access requests'),
+    canManageMembersPermissionsRequired: true,
+    queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest,
+  },
+  ...EE_TABS,
+];
+
 export default {
   name: 'MembersTabs',
   ACTIVE_TAB_QUERY_PARAM_NAME,
-  TABS: [
-    {
-      namespace: MEMBER_TYPES.user,
-      title: __('Members'),
-    },
-    {
-      namespace: MEMBER_TYPES.group,
-      title: __('Groups'),
-      attrs: { 'data-qa-selector': 'groups_list_tab' },
-      queryParamValue: TAB_QUERY_PARAM_VALUES.group,
-    },
-    {
-      namespace: MEMBER_TYPES.invite,
-      title: __('Invited'),
-      canManageMembersPermissionsRequired: true,
-      queryParamValue: TAB_QUERY_PARAM_VALUES.invite,
-    },
-    {
-      namespace: MEMBER_TYPES.accessRequest,
-      title: __('Access requests'),
-      canManageMembersPermissionsRequired: true,
-      queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest,
-    },
-  ],
+  TABS,
   components: { MembersApp, GlTabs, GlTab, GlBadge, GlButton },
   inject: ['canManageMembers', 'canExportMembers', 'exportCsvPath'],
   data() {
@@ -43,20 +51,17 @@ export default {
     };
   },
   computed: {
-    ...mapState({
-      userCount(state) {
-        return countComputed(state, MEMBER_TYPES.user);
-      },
-      groupCount(state) {
-        return countComputed(state, MEMBER_TYPES.group);
-      },
-      inviteCount(state) {
-        return countComputed(state, MEMBER_TYPES.invite);
-      },
-      accessRequestCount(state) {
-        return countComputed(state, MEMBER_TYPES.accessRequest);
-      },
-    }),
+    ...mapState(
+      Object.values(MEMBER_TYPES).reduce((getters, memberType) => {
+        return {
+          ...getters,
+          // eslint-disable-next-line @gitlab/require-i18n-strings
+          [`${memberType}Count`](state) {
+            return countComputed(state, memberType);
+          },
+        };
+      }, {}),
+    ),
     urlParams() {
       return Object.keys(queryToObject(window.location.search, { gatherArrays: true }));
     },
diff --git a/app/assets/javascripts/members/components/table/member_avatar.vue b/app/assets/javascripts/members/components/table/member_avatar.vue
index 92b757ffcba..966eb90e402 100644
--- a/app/assets/javascripts/members/components/table/member_avatar.vue
+++ b/app/assets/javascripts/members/components/table/member_avatar.vue
@@ -6,7 +6,13 @@ import UserAvatar from '../avatars/user_avatar.vue';
 
 export default {
   name: 'MemberAvatar',
-  components: { UserAvatar, InviteAvatar, GroupAvatar, AccessRequestAvatar: UserAvatar },
+  components: {
+    UserAvatar,
+    InviteAvatar,
+    GroupAvatar,
+    AccessRequestAvatar: UserAvatar,
+    BannedAvatar: UserAvatar,
+  },
   props: {
     memberType: {
       type: String,
diff --git a/app/assets/javascripts/members/components/table/members_table_cell.vue b/app/assets/javascripts/members/components/table/members_table_cell.vue
index 3436bcab2fc..51eff428d63 100644
--- a/app/assets/javascripts/members/components/table/members_table_cell.vue
+++ b/app/assets/javascripts/members/components/table/members_table_cell.vue
@@ -1,5 +1,5 @@
 <script>
-import { MEMBER_TYPES } from '../../constants';
+import { MEMBER_TYPES } from 'ee_else_ce/members/constants';
 import {
   isGroup,
   isDirectMember,
diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js
index 8c40cc3f29d..2fe816c7ea2 100644
--- a/app/assets/javascripts/members/constants.js
+++ b/app/assets/javascripts/members/constants.js
@@ -3,6 +3,12 @@ import { GlFilteredSearchToken } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
 
+// Overridden in EE
+export const EE_APP_OPTIONS = {};
+
+// Overridden in EE
+export const EE_TABS = [];
+
 export const FIELD_KEY_ACCOUNT = 'account';
 export const FIELD_KEY_SOURCE = 'source';
 export const FIELD_KEY_GRANTED = 'granted';
diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js
index 0df876cabd7..34660f8f499 100644
--- a/app/assets/javascripts/members/index.js
+++ b/app/assets/javascripts/members/index.js
@@ -2,8 +2,8 @@ import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { parseDataAttributes } from '~/members/utils';
+import { MEMBER_TYPES } from 'ee_else_ce/members/constants';
 import MembersTabs from './components/members_tabs.vue';
-import { MEMBER_TYPES } from './constants';
 import membersStore from './store';
 
 export const initMembersApp = (el, options) => {