Merge branch 'peterhegman/switch-to-vuex-for-group-members-app' into 'master'

Move state from root instance to Vuex

See merge request gitlab-org/gitlab!42135

app/assets/javascripts/groups/members/components/app.vue

 <script>
 export default {
   name: 'GroupMembersApp',
-  props: {
-    groupId: {
-      type: Number,
-      required: true,
-    },
-    currentUserId: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-    members: {
-      type: Array,
-      required: true,
-    },
-  },
 };
 </script>
 

app/assets/javascripts/groups/members/index.js

 import Vue from 'vue';
+import Vuex from 'vuex';
 import App from './components/app.vue';
+import membersModule from '~/vuex_shared/modules/members';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export default el => {
@@ -7,26 +9,22 @@ export default el => {
     return () => {};
   }
 
+  Vue.use(Vuex);
+
+  const { members, groupId } = el.dataset;
+
+  const store = new Vuex.Store({
+    ...membersModule({
+      members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
+      sourceId: parseInt(groupId, 10),
+      currentUserId: gon.current_user_id || null,
+    }),
+  });
+
   return new Vue({
     el,
     components: { App },
-    data() {
-      const { members, groupId, currentUserId } = this.$options.el.dataset;
-
-      return {
-        members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
-        groupId: parseInt(groupId, 10),
-        ...(currentUserId ? { currentUserId: parseInt(currentUserId, 10) } : {}),
-      };
-    },
-    render(createElement) {
-      return createElement('app', {
-        props: {
-          members: this.members,
-          groupId: this.groupId,
-          currentUserId: this.currentUserId,
-        },
-      });
-    },
+    store,
+    render: createElement => createElement('app'),
   });
 };

app/assets/javascripts/vuex_shared/modules/members/index.js

+import createState from './state';
+
+export default initialState => ({
+  namespaced: true,
+  state: createState(initialState),
+});

app/assets/javascripts/vuex_shared/modules/members/state.js

+export default ({ members, sourceId, currentUserId }) => ({
+  members,
+  sourceId,
+  currentUserId,
+});

app/views/groups/group_members/index.html.haml

@@ -4,7 +4,7 @@
 - show_access_requests = can_manage_members && @requesters.exists?
 - invited_active = params[:search_invited].present? || params[:invited_members_page].present?
 - vue_members_list_enabled = Feature.enabled?(:vue_group_members_list, @group)
-- data_attributes = { group_id: @group.id, current_user_id: current_user&.id }
+- data_attributes = { group_id: @group.id }
 
 - form_item_label_css_class = 'label-bold gl-mr-2 gl-mb-0 gl-py-2 align-self-md-center'
 

spec/frontend/groups/members/index_spec.js

@@ -5,21 +5,21 @@ import { membersJsonString, membersParsed } from './mock_data';
 
 describe('initGroupMembersApp', () => {
   let el;
+  let vm;
   let wrapper;
 
   const setup = () => {
-    const vm = initGroupMembersApp(el);
+    vm = initGroupMembersApp(el);
     wrapper = createWrapper(vm);
   };
 
-  const getGroupMembersApp = () => wrapper.find(GroupMembersApp);
-
   beforeEach(() => {
     el = document.createElement('div');
     el.setAttribute('data-members', membersJsonString);
-    el.setAttribute('data-current-user-id', '123');
     el.setAttribute('data-group-id', '234');
 
+    window.gon = { current_user_id: 123 };
+
     document.body.appendChild(el);
   });
 
@@ -31,28 +31,36 @@ describe('initGroupMembersApp', () => {
     wrapper = null;
   });
 
-  it('parses and passes `currentUserId` prop to `GroupMembersApp`', () => {
+  it('renders `GroupMembersApp`', () => {
     setup();
 
-    expect(getGroupMembersApp().props('currentUserId')).toBe(123);
+    expect(wrapper.find(GroupMembersApp).exists()).toBe(true);
   });
 
-  it('does not pass `currentUserId` prop if not provided by the data attribute (user is not logged in)', () => {
-    el.removeAttribute('data-current-user-id');
+  it('sets `currentUserId` in Vuex store', () => {
     setup();
 
-    expect(getGroupMembersApp().props('currentUserId')).toBeNull();
+    expect(vm.$store.state.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', () => {
+      window.gon = {};
+      setup();
+
+      expect(vm.$store.state.currentUserId).toBeNull();
+    });
   });
 
-  it('parses and passes `groupId` prop to `GroupMembersApp`', () => {
+  it('parses and sets `data-group-id` as `sourceId` in Vuex store', () => {
     setup();
 
-    expect(getGroupMembersApp().props('groupId')).toBe(234);
+    expect(vm.$store.state.sourceId).toBe(234);
   });
 
-  it('parses and passes `members` prop to `GroupMembersApp`', () => {
+  it('parses and sets `members` in Vuex store', () => {
     setup();
 
-    expect(getGroupMembersApp().props('members')).toEqual(membersParsed);
+    expect(vm.$store.state.members).toEqual(membersParsed);
   });
 });