Migrate non-reactive group/project member state to `provide/inject`

Improve performance and move towards being able to use `GlTabs`

app/assets/javascripts/members/components/avatars/user_avatar.vue

@@ -5,7 +5,6 @@ import {
   GlBadge,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
-import { mapState } from 'vuex';
 import { generateBadges } from 'ee_else_ce/members/utils';
 import { glEmojiTag } from '~/emoji';
 import { __ } from '~/locale';
@@ -24,6 +23,7 @@ export default {
   directives: {
     SafeHtml,
   },
+  inject: ['canManageMembers'],
   props: {
     member: {
       type: Object,
@@ -35,7 +35,6 @@ export default {
     },
   },
   computed: {
-    ...mapState(['canManageMembers']),
     user() {
       return this.member.user;
     },

app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue

@@ -37,13 +37,14 @@ export default {
       ],
     },
   ],
+  inject: ['sourceId', 'canManageMembers'],
   data() {
     return {
       initialFilterValue: [],
     };
   },
   computed: {
-    ...mapState(['sourceId', 'filteredSearchBar', 'canManageMembers']),
+    ...mapState(['filteredSearchBar']),
     tokens() {
       return this.$options.availableTokens.filter((token) => {
         if (

app/assets/javascripts/members/components/table/members_table.vue

@@ -31,8 +31,9 @@ export default {
     LdapOverrideConfirmationModal: () =>
       import('ee_component/members/components/ldap/ldap_override_confirmation_modal.vue'),
   },
+  inject: ['currentUserId'],
   computed: {
-    ...mapState(['members', 'tableFields', 'tableAttrs', 'currentUserId']),
+    ...mapState(['members', 'tableFields', 'tableAttrs']),
     filteredFields() {
       return FIELDS.filter(
         (field) => this.tableFields.includes(field.key) && this.showField(field),

app/assets/javascripts/members/components/table/members_table_cell.vue

 <script>
-import { mapState } from 'vuex';
 import { MEMBER_TYPES } from '../../constants';
 import {
   isGroup,
@@ -12,6 +11,7 @@ import {
 
 export default {
   name: 'MembersTableCell',
+  inject: ['currentUserId'],
   props: {
     member: {
       type: Object,
@@ -19,7 +19,6 @@ export default {
     },
   },
   computed: {
-    ...mapState(['currentUserId']),
     isGroup() {
       return isGroup(this.member);
     },

app/assets/javascripts/members/index.js

@@ -22,10 +22,11 @@ export const initMembersApp = (
   Vue.use(Vuex);
   Vue.use(GlToast);
 
+  const { sourceId, canManageMembers, ...vuexStoreAttributes } = parseDataAttributes(el);
+
   const store = new Vuex.Store(
     membersStore({
-      ...parseDataAttributes(el),
-      currentUserId: gon.current_user_id || null,
+      ...vuexStoreAttributes,
       tableFields,
       tableAttrs,
       tableSortableFields,
@@ -38,6 +39,11 @@ export const initMembersApp = (
     el,
     components: { App },
     store,
+    provide: {
+      currentUserId: gon.current_user_id || null,
+      sourceId,
+      canManageMembers,
+    },
     render: (createElement) => createElement('app'),
   });
 };

app/assets/javascripts/members/store/state.js

 export default ({
   members,
-  sourceId,
-  currentUserId,
-  canManageMembers,
   tableFields,
   tableAttrs,
   tableSortableFields,
@@ -11,9 +8,6 @@ export default ({
   filteredSearchBar,
 }) => ({
   members,
-  sourceId,
-  currentUserId,
-  canManageMembers,
   tableFields,
   tableAttrs,
   tableSortableFields,

ee/spec/frontend/members/components/avatars/user_avatar_spec.js

 import { GlBadge } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
 import { member as memberMock } from 'jest/members/mock_data';
 import UserAvatar from '~/members/components/avatars/user_avatar.vue';
 
-Vue.use(Vuex);
-
 describe('UserAvatar', () => {
   let wrapper;
 
@@ -16,11 +12,9 @@ describe('UserAvatar', () => {
         isCurrentUser: false,
         ...propsData,
       },
-      store: new Vuex.Store({
-        state: {
-          canManageMembers: true,
-        },
-      }),
+      provide: {
+        canManageMembers: true,
+      },
     });
   };
 

ee/spec/frontend/members/components/table/member_table_cell_spec.js

@@ -34,11 +34,7 @@ describe('MemberTableCell', () => {
 
   const createStore = (state = {}) => {
     return new Vuex.Store({
-      state: {
-        sourceId: 1,
-        currentUserId: 1,
-        ...state,
-      },
+      state,
     });
   };
 
@@ -49,6 +45,10 @@ describe('MemberTableCell', () => {
       localVue,
       propsData,
       store: createStore(state),
+      provide: {
+        sourceId: 1,
+        currentUserId: 1,
+      },
       scopedSlots: {
         default: `
           <wrapped-component

ee/spec/frontend/members/components/table/members_table_spec.js

@@ -19,8 +19,6 @@ describe('MemberList', () => {
           table: { 'data-qa-selector': 'members_list' },
           tr: { 'data-qa-selector': 'member_row' },
         },
-        sourceId: 1,
-        currentUserId: 1,
         ...state,
       },
     });
@@ -30,6 +28,10 @@ describe('MemberList', () => {
     wrapper = mount(MembersTable, {
       localVue,
       store: createStore(state),
+      provide: {
+        sourceId: 1,
+        currentUserId: 1,
+      },
       stubs: [
         'member-avatar',
         'member-source',

spec/frontend/__helpers__/vue_test_utils_helper.js

@@ -56,5 +56,15 @@ export const extendedWrapper = (wrapper) => {
         return this.findAll(`[data-testid="${id}"]`);
       },
     },
+    // Returns attributes provided to the component via provide/inject
+    // https://vuejs.org/v2/api/#provide-inject
+    provided: {
+      value(key) {
+        // eslint-disable-next-line no-underscore-dangle
+        const provided = this.vm?._provided || {};
+
+        return key ? provided[key] : provided;
+      },
+    },
   });
 };

spec/frontend/__helpers__/vue_test_utils_helper_spec.js

@@ -105,5 +105,52 @@ describe('Vue test utils helpers', () => {
         expect(mockComponent.findAllByTestId(testId)).toHaveLength(2);
       });
     });
+
+    describe('provided', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = extendedWrapper(
+          shallowMount({
+            template: '<div>mock component</div>',
+            provide: { fooBar: 'baz', company: 'GitLab' },
+          }),
+        );
+      });
+
+      describe('when called without `key` argument', () => {
+        it('returns an object of provided attributes', () => {
+          expect(wrapper.provided()).toEqual({ fooBar: 'baz', company: 'GitLab' });
+        });
+      });
+
+      describe('when called with `key` argument', () => {
+        describe('when `key` exists in provided attributes', () => {
+          it('returns value of provided attribute', () => {
+            expect(wrapper.provided('fooBar')).toBe('baz');
+          });
+        });
+
+        describe('when `key` does not exist in provided attributes', () => {
+          it('returns `undefined`', () => {
+            expect(wrapper.provided('invalidKey')).toBeUndefined();
+          });
+        });
+      });
+
+      describe('when no attributes are provided', () => {
+        beforeEach(() => {
+          wrapper = extendedWrapper(
+            shallowMount({
+              template: '<div>mock component</div>',
+            }),
+          );
+        });
+
+        it('returns an empty object', () => {
+          expect(wrapper.provided()).toEqual({});
+        });
+      });
+    });
   });
 });

spec/frontend/members/components/avatars/user_avatar_spec.js

 import { GlAvatarLink, GlBadge } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { mount, createWrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
 import UserAvatar from '~/members/components/avatars/user_avatar.vue';
 import { member as memberMock, member2faEnabled, orphanedMember } from '../../mock_data';
 
-Vue.use(Vuex);
-
 describe('UserAvatar', () => {
   let wrapper;
 
   const { user } = memberMock;
 
-  const createComponent = (propsData = {}, state = {}) => {
+  const createComponent = (propsData = {}, provide = {}) => {
     wrapper = mount(UserAvatar, {
       propsData: {
         member: memberMock,
         isCurrentUser: false,
         ...propsData,
       },
-      store: new Vuex.Store({
-        state: {
-          canManageMembers: true,
-          ...state,
-        },
-      }),
+      provide: {
+        canManageMembers: true,
+        ...provide,
+      },
     });
   };
 

spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js

@@ -10,10 +10,9 @@ localVue.use(Vuex);
 describe('MembersFilteredSearchBar', () => {
   let wrapper;
 
-  const createComponent = (state) => {
+  const createComponent = ({ state = {}, provide = {} } = {}) => {
     const store = new Vuex.Store({
       state: {
-        sourceId: 1,
         filteredSearchBar: {
           show: true,
           tokens: ['two_factor'],
@@ -21,13 +20,17 @@ describe('MembersFilteredSearchBar', () => {
           placeholder: 'Filter members',
           recentSearchesStorageKey: 'group_members',
         },
-        canManageMembers: true,
         ...state,
       },
     });
 
     wrapper = shallowMount(MembersFilteredSearchBar, {
       localVue,
+      provide: {
+        sourceId: 1,
+        canManageMembers: true,
+        ...provide,
+      },
       store,
     });
   };
@@ -68,14 +71,18 @@ describe('MembersFilteredSearchBar', () => {
     describe('when `canManageMembers` is false', () => {
       it('excludes 2FA token', () => {
         createComponent({
-          filteredSearchBar: {
-            show: true,
-            tokens: ['two_factor', 'with_inherited_permissions'],
-            searchParam: 'search',
-            placeholder: 'Filter members',
-            recentSearchesStorageKey: 'group_members',
+          state: {
+            filteredSearchBar: {
+              show: true,
+              tokens: ['two_factor', 'with_inherited_permissions'],
+              searchParam: 'search',
+              placeholder: 'Filter members',
+              recentSearchesStorageKey: 'group_members',
+            },
+          },
+          provide: {
+            canManageMembers: false,
           },
-          canManageMembers: false,
         });
 
         expect(findFilteredSearchBar().props('tokens')).toEqual([

spec/frontend/members/components/filter_sort/sort_dropdown_spec.js

@@ -15,7 +15,6 @@ describe('SortDropdown', () => {
   const createComponent = (state) => {
     const store = new Vuex.Store({
       state: {
-        sourceId: 1,
         tableSortableFields: ['account', 'granted', 'expires', 'maxRole', 'lastSignIn'],
         filteredSearchBar: {
           show: true,
@@ -30,6 +29,9 @@ describe('SortDropdown', () => {
 
     wrapper = mount(SortDropdown, {
       localVue,
+      provide: {
+        sourceId: 1,
+      },
       store,
     });
   };

spec/frontend/members/components/table/members_table_cell_spec.js

@@ -42,21 +42,21 @@ describe('MembersTableCell', () => {
 
   const createStore = (state = {}) => {
     return new Vuex.Store({
-      state: {
-        sourceId: 1,
-        currentUserId: 1,
-        ...state,
-      },
+      state,
     });
   };
 
   let wrapper;
 
-  const createComponent = (propsData, state = {}) => {
+  const createComponent = (propsData, state) => {
     wrapper = mount(MembersTableCell, {
       localVue,
       propsData,
       store: createStore(state),
+      provide: {
+        sourceId: 1,
+        currentUserId: 1,
+      },
       scopedSlots: {
         default: `
           <wrapped-component

spec/frontend/members/components/table/members_table_spec.js

@@ -32,17 +32,20 @@ describe('MembersTable', () => {
           table: { 'data-qa-selector': 'members_list' },
           tr: { 'data-qa-selector': 'member_row' },
         },
-        sourceId: 1,
-        currentUserId: 1,
         ...state,
       },
     });
   };
 
-  const createComponent = (state) => {
+  const createComponent = (state, provide = {}) => {
     wrapper = mount(MembersTable, {
       localVue,
       store: createStore(state),
+      provide: {
+        sourceId: 1,
+        currentUserId: 1,
+        ...provide,
+      },
       stubs: [
         'member-avatar',
         'member-source',
@@ -119,7 +122,7 @@ describe('MembersTable', () => {
 
       describe('when user is not logged in', () => {
         it('does not render the "Actions" field', () => {
-          createComponent({ currentUserId: null, tableFields: ['actions'] });
+          createComponent({ tableFields: ['actions'] }, { currentUserId: null });
 
           expect(within(wrapper.element).queryByTestId('col-actions')).toBe(null);
         });

spec/frontend/members/index_spec.js

 import { createWrapper } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import MembersApp from '~/members/components/app.vue';
 import { initMembersApp } from '~/members/index';
 import { membersJsonString, members } from './mock_data';
@@ -16,7 +17,7 @@ describe('initMembersApp', () => {
       requestFormatter: () => ({}),
       filteredSearchBar: { show: false },
     });
-    wrapper = createWrapper(vm);
+    wrapper = extendedWrapper(createWrapper(vm));
   };
 
   beforeEach(() => {
@@ -42,31 +43,31 @@ describe('initMembersApp', () => {
     expect(wrapper.find(MembersApp).exists()).toBe(true);
   });
 
-  it('sets `currentUserId` in Vuex store', () => {
+  it('sets `currentUserId` in provide/inject', () => {
     setup();
 
-    expect(vm.$store.state.currentUserId).toBe(123);
+    expect(wrapper.provided('currentUserId')).toBe(123);
   });
 
   describe('when `gon.current_user_id` is not set (user is not logged in)', () => {
-    it('sets `currentUserId` as `null` in Vuex store', () => {
+    it('sets `currentUserId` as `null` in provide/inject', () => {
       window.gon = {};
       setup();
 
-      expect(vm.$store.state.currentUserId).toBeNull();
+      expect(wrapper.provided('currentUserId')).toBeNull();
     });
   });
 
-  it('parses and sets `data-source-id` as `sourceId` in Vuex store', () => {
+  it('parses and sets `data-source-id` as `sourceId` in provide/inject', () => {
     setup();
 
-    expect(vm.$store.state.sourceId).toBe(234);
+    expect(wrapper.provided('sourceId')).toBe(234);
   });
 
   it('parses and sets `data-can-manage-members` as `canManageMembers` in Vuex store', () => {
     setup();
 
-    expect(vm.$store.state.canManageMembers).toBe(true);
+    expect(wrapper.provided('canManageMembers')).toBe(true);
   });
 
   it('parses and sets `members` in Vuex store', () => {