Merge branch '208470_03-replicable-store-and-state' into 'master'

Geo Replication - Rename Store/State

See merge request gitlab-org/gitlab!27237

ee/app/assets/javascripts/geo_designs/components/app.vue

@@ -28,16 +28,16 @@ export default {
     },
   },
   computed: {
-    ...mapState(['isLoading', 'totalDesigns']),
-    hasDesigns() {
-      return this.totalDesigns > 0;
+    ...mapState(['isLoading', 'totalReplicableItems']),
+    hasReplicableItems() {
+      return this.totalReplicableItems > 0;
     },
   },
   created() {
-    this.fetchDesigns();
+    this.fetchReplicableItems();
   },
   methods: {
-    ...mapActions(['fetchDesigns']),
+    ...mapActions(['fetchReplicableItems']),
   },
 };
 </script>
@@ -47,7 +47,7 @@ export default {
     <geo-designs-filter-bar />
     <gl-loading-icon v-if="isLoading" size="xl" />
     <template v-else>
-      <geo-designs v-if="hasDesigns" />
+      <geo-designs v-if="hasReplicableItems" />
       <geo-designs-empty-state
         v-else
         :issues-svg-path="issuesSvgPath"

ee/app/assets/javascripts/geo_designs/components/geo_design.vue

@@ -66,7 +66,7 @@ export default {
     };
   },
   methods: {
-    ...mapActions(['initiateDesignSync']),
+    ...mapActions(['initiateReplicableSync']),
   },
   actionTypes: ACTION_TYPES,
 };
@@ -78,7 +78,7 @@ export default {
       <gl-link class="font-weight-bold" :href="`/${name}`" target="_blank">{{ name }}</gl-link>
       <div class="ml-auto">
         <gl-button
-          @click="initiateDesignSync({ projectId, name, action: $options.actionTypes.RESYNC })"
+          @click="initiateReplicableSync({ projectId, name, action: $options.actionTypes.RESYNC })"
           >{{ __('Resync') }}</gl-button
         >
       </div>

ee/app/assets/javascripts/geo_designs/components/geo_designs.vue

@@ -10,22 +10,22 @@ export default {
     GeoDesign,
   },
   computed: {
-    ...mapState(['designs', 'currentPage', 'pageSize', 'totalDesigns']),
+    ...mapState(['replicableItems', 'currentPage', 'pageSize', 'totalReplicableItems']),
     page: {
       get() {
         return this.currentPage;
       },
       set(newVal) {
         this.setPage(newVal);
-        this.fetchDesigns();
+        this.fetchReplicableItems();
       },
     },
-    hasDesigns() {
-      return this.totalDesigns > 0;
+    hasReplicableItems() {
+      return this.totalReplicableItems > 0;
     },
   },
   methods: {
-    ...mapActions(['setPage', 'fetchDesigns']),
+    ...mapActions(['setPage', 'fetchReplicableItems']),
   },
 };
 </script>
@@ -33,20 +33,20 @@ export default {
 <template>
   <section>
     <geo-design
-      v-for="design in designs"
-      :key="design.id"
-      :name="design.name"
-      :project-id="design.projectId"
-      :sync-status="design.state"
-      :last-synced="design.lastSyncedAt"
-      :last-verified="design.lastVerifiedAt"
-      :last-checked="design.lastCheckedAt"
+      v-for="item in replicableItems"
+      :key="item.id"
+      :name="item.name"
+      :project-id="item.projectId"
+      :sync-status="item.state"
+      :last-synced="item.lastSyncedAt"
+      :last-verified="item.lastVerifiedAt"
+      :last-checked="item.lastCheckedAt"
     />
     <gl-pagination
-      v-if="hasDesigns"
+      v-if="hasReplicableItems"
       v-model="page"
       :per-page="pageSize"
-      :total-items="totalDesigns"
+      :total-items="totalReplicableItems"
       align="center"
     />
   </section>

ee/app/assets/javascripts/geo_designs/components/geo_designs_filter_bar.vue

@@ -24,7 +24,7 @@ export default {
       },
       set: debounce(function debounceSearch(newVal) {
         this.setSearch(newVal);
-        this.fetchDesigns();
+        this.fetchReplicableItems();
       }, DEFAULT_SEARCH_DELAY),
     },
     resyncText() {
@@ -32,10 +32,10 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setFilter', 'setSearch', 'fetchDesigns', 'initiateAllDesignSyncs']),
+    ...mapActions(['setFilter', 'setSearch', 'fetchReplicableItems', 'initiateAllReplicableSyncs']),
     filterChange(filterIndex) {
       this.setFilter(filterIndex);
-      this.fetchDesigns();
+      this.fetchReplicableItems();
     },
   },
   actionTypes: ACTION_TYPES,
@@ -61,7 +61,7 @@ export default {
               <icon name="chevron-down" />
             </span>
           </template>
-          <gl-dropdown-item @click="initiateAllDesignSyncs($options.actionTypes.RESYNC)">
+          <gl-dropdown-item @click="initiateAllReplicableSyncs($options.actionTypes.RESYNC)">
             {{ resyncText }}
           </gl-dropdown-item>
         </gl-dropdown>

ee/app/assets/javascripts/geo_designs/store/actions.js

@@ -23,7 +23,7 @@ export const receiveReplicableItemsError = ({ state, commit }) => {
   commit(types.RECEIVE_REPLICABLE_ITEMS_ERROR);
 };
 
-export const fetchDesigns = ({ state, dispatch }) => {
+export const fetchReplicableItems = ({ state, dispatch }) => {
   dispatch('requestReplicableItems');
 
   const statusFilterName = state.filterOptions[state.currentFilterIndex]
@@ -66,7 +66,7 @@ export const receiveInitiateAllReplicableSyncsSuccess = (
     }),
   );
   commit(types.RECEIVE_INITIATE_ALL_REPLICABLE_SYNCS_SUCCESS);
-  dispatch('fetchDesigns');
+  dispatch('fetchReplicableItems');
 };
 export const receiveInitiateAllReplicableSyncsError = ({ state, commit }) => {
   createFlash(
@@ -77,7 +77,7 @@ export const receiveInitiateAllReplicableSyncsError = ({ state, commit }) => {
   commit(types.RECEIVE_INITIATE_ALL_REPLICABLE_SYNCS_ERROR);
 };
 
-export const initiateAllDesignSyncs = ({ state, dispatch }, action) => {
+export const initiateAllReplicableSyncs = ({ state, dispatch }, action) => {
   dispatch('requestInitiateAllReplicableSyncs');
 
   Api.initiateAllGeoReplicableSyncs(state.replicableType, action)
@@ -93,14 +93,14 @@ export const requestInitiateReplicableSync = ({ commit }) =>
 export const receiveInitiateReplicableSyncSuccess = ({ commit, dispatch }, { name, action }) => {
   toast(sprintf(__('%{name} is scheduled for %{action}'), { name, action }));
   commit(types.RECEIVE_INITIATE_REPLICABLE_SYNC_SUCCESS);
-  dispatch('fetchDesigns');
+  dispatch('fetchReplicableItems');
 };
 export const receiveInitiateReplicableSyncError = ({ commit }, { name }) => {
   createFlash(sprintf(__('There was an error syncing project %{name}'), { name }));
   commit(types.RECEIVE_INITIATE_REPLICABLE_SYNC_ERROR);
 };
 
-export const initiateDesignSync = ({ state, dispatch }, { projectId, name, action }) => {
+export const initiateReplicableSync = ({ state, dispatch }, { projectId, name, action }) => {
   dispatch('requestInitiateReplicableSync');
 
   Api.initiateGeoReplicableSync(state.replicableType, { projectId, action })

ee/app/assets/javascripts/geo_designs/store/mutations.js

@@ -17,15 +17,15 @@ export default {
   },
   [types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, { data, perPage, total }) {
     state.isLoading = false;
-    state.designs = data;
+    state.replicableItems = data;
     state.pageSize = perPage;
-    state.totalDesigns = total;
+    state.totalReplicableItems = total;
   },
   [types.RECEIVE_REPLICABLE_ITEMS_ERROR](state) {
     state.isLoading = false;
-    state.designs = [];
+    state.replicableItems = [];
     state.pageSize = 0;
-    state.totalDesigns = 0;
+    state.totalReplicableItems = 0;
   },
   [types.REQUEST_INITIATE_ALL_REPLICABLE_SYNCS](state) {
     state.isLoading = true;

ee/app/assets/javascripts/geo_designs/store/state.js

@@ -4,8 +4,8 @@ const createState = replicableType => ({
   replicableType,
   isLoading: false,
 
-  designs: [],
-  totalDesigns: 0,
+  replicableItems: [],
+  totalReplicableItems: 0,
   pageSize: 0,
   currentPage: 1,
 

ee/spec/frontend/geo_designs/components/app_spec.js

@@ -26,7 +26,7 @@ describe('GeoDesignsApp', () => {
   };
 
   const actionSpies = {
-    fetchDesigns: jest.fn(),
+    fetchReplicableItems: jest.fn(),
     setEndpoint: jest.fn(),
   };
 
@@ -87,10 +87,10 @@ describe('GeoDesignsApp', () => {
         wrapper.vm.$store.state.isLoading = false;
       });
 
-      describe('with designs', () => {
+      describe('with replicableItems', () => {
         beforeEach(() => {
-          wrapper.vm.$store.state.designs = MOCK_BASIC_FETCH_DATA_MAP.data;
-          wrapper.vm.$store.state.totalDesigns = MOCK_BASIC_FETCH_DATA_MAP.total;
+          wrapper.vm.$store.state.replicableItems = MOCK_BASIC_FETCH_DATA_MAP.data;
+          wrapper.vm.$store.state.totalReplicableItems = MOCK_BASIC_FETCH_DATA_MAP.total;
         });
 
         it('shows designs', () => {
@@ -106,10 +106,10 @@ describe('GeoDesignsApp', () => {
         });
       });
 
-      describe('with no designs', () => {
+      describe('with no replicableItems', () => {
         beforeEach(() => {
-          wrapper.vm.$store.state.designs = [];
-          wrapper.vm.$store.state.totalDesigns = 0;
+          wrapper.vm.$store.state.replicableItems = [];
+          wrapper.vm.$store.state.totalReplicableItems = 0;
         });
 
         it('hides designs', () => {
@@ -132,8 +132,8 @@ describe('GeoDesignsApp', () => {
       createComponent();
     });
 
-    it('calls fetchDesigns', () => {
-      expect(actionSpies.fetchDesigns).toHaveBeenCalled();
+    it('calls fetchReplicableItems', () => {
+      expect(actionSpies.fetchReplicableItems).toHaveBeenCalled();
     });
   });
 });

ee/spec/frontend/geo_designs/components/geo_design_spec.js

@@ -14,7 +14,7 @@ describe('GeoDesignsApp', () => {
   const mockDesign = MOCK_BASIC_FETCH_DATA_MAP.data[0];
 
   const actionSpies = {
-    initiateDesignSync: jest.fn(),
+    initiateReplicableSync: jest.fn(),
   };
 
   const propsData = {
@@ -75,7 +75,7 @@ describe('GeoDesignsApp', () => {
 
       it('calls initiateDesignSyncs when clicked', () => {
         findGlButton().trigger('click');
-        expect(actionSpies.initiateDesignSync).toHaveBeenCalledWith({
+        expect(actionSpies.initiateReplicableSync).toHaveBeenCalledWith({
           projectId: propsData.projectId,
           name: propsData.name,
           action: ACTION_TYPES.RESYNC,

ee/spec/frontend/geo_designs/components/geo_designs_filter_bar_spec.js

@@ -14,8 +14,8 @@ describe('GeoDesignsFilterBar', () => {
   const actionSpies = {
     setSearch: jest.fn(),
     setFilter: jest.fn(),
-    fetchDesigns: jest.fn(),
-    initiateAllDesignSyncs: jest.fn(),
+    fetchReplicableItems: jest.fn(),
+    initiateAllReplicableSyncs: jest.fn(),
   };
 
   const createComponent = () => {
@@ -71,10 +71,10 @@ describe('GeoDesignsFilterBar', () => {
         expect(findGlDropdownItem().exists()).toBe(true);
       });
 
-      it('calls initiateAllDesignSyncs when clicked', () => {
+      it('calls initiateAllReplicableSyncs when clicked', () => {
         const innerButton = findGlDropdownItem().find('button');
         innerButton.trigger('click');
-        expect(actionSpies.initiateAllDesignSyncs).toHaveBeenCalled();
+        expect(actionSpies.initiateAllReplicableSyncs).toHaveBeenCalled();
       });
     });
   });
@@ -82,7 +82,7 @@ describe('GeoDesignsFilterBar', () => {
   describe('when search changes', () => {
     beforeEach(() => {
       createComponent();
-      actionSpies.fetchDesigns.mockClear(); // Will get called on init
+      actionSpies.fetchReplicableItems.mockClear(); // Will get called on init
       wrapper.vm.search = 'test search';
     });
 
@@ -93,11 +93,11 @@ describe('GeoDesignsFilterBar', () => {
       expect(actionSpies.setSearch).toHaveBeenCalledWith('test search');
     });
 
-    it(`should wait ${DEFAULT_SEARCH_DELAY}ms before calling fetchDesigns`, () => {
-      expect(actionSpies.fetchDesigns).not.toHaveBeenCalled();
+    it(`should wait ${DEFAULT_SEARCH_DELAY}ms before calling fetchReplicableItems`, () => {
+      expect(actionSpies.fetchReplicableItems).not.toHaveBeenCalled();
 
       jest.runAllTimers(); // Debounce
-      expect(actionSpies.fetchDesigns).toHaveBeenCalled();
+      expect(actionSpies.fetchReplicableItems).toHaveBeenCalled();
     });
   });
 
@@ -113,8 +113,8 @@ describe('GeoDesignsFilterBar', () => {
       expect(actionSpies.setFilter).toHaveBeenCalledWith(testValue);
     });
 
-    it('should call fetchDesigns', () => {
-      expect(actionSpies.fetchDesigns).toHaveBeenCalled();
+    it('should call fetchReplicableItems', () => {
+      expect(actionSpies.fetchReplicableItems).toHaveBeenCalled();
     });
   });
 });

ee/spec/frontend/geo_designs/components/geo_designs_spec.js

@@ -14,7 +14,7 @@ describe('GeoDesigns', () => {
 
   const actionSpies = {
     setPage: jest.fn(),
-    fetchDesigns: jest.fn(),
+    fetchReplicableItems: jest.fn(),
   };
 
   const createComponent = () => {
@@ -45,10 +45,10 @@ describe('GeoDesigns', () => {
     });
 
     describe('GlPagination', () => {
-      describe('when pageSize >= totalDesigns', () => {
+      describe('when pageSize >= totalReplicableItems', () => {
         beforeEach(() => {
           wrapper.vm.$store.state.pageSize = 2;
-          wrapper.vm.$store.state.totalDesigns = 1;
+          wrapper.vm.$store.state.totalReplicableItems = 1;
         });
 
         it('is hidden', () => {
@@ -56,10 +56,10 @@ describe('GeoDesigns', () => {
         });
       });
 
-      describe('when pageSize < totalDesigns', () => {
+      describe('when pageSize < totalReplicableItems', () => {
         beforeEach(() => {
           wrapper.vm.$store.state.pageSize = 1;
-          wrapper.vm.$store.state.totalDesigns = 2;
+          wrapper.vm.$store.state.totalReplicableItems = 2;
         });
 
         it('renders', () => {
@@ -70,15 +70,15 @@ describe('GeoDesigns', () => {
 
     describe('GeoDesign', () => {
       beforeEach(() => {
-        wrapper.vm.$store.state.designs = MOCK_BASIC_FETCH_DATA_MAP.data;
+        wrapper.vm.$store.state.replicableItems = MOCK_BASIC_FETCH_DATA_MAP.data;
       });
 
       it('renders an instance for each design in the store', () => {
         const designWrappers = findGeoDesign();
-        const designs = [...wrapper.vm.$store.state.designs];
+        const replicableItems = [...wrapper.vm.$store.state.replicableItems];
 
         for (let i = 0; i < designWrappers.length; i += 1) {
-          expect(designWrappers.at(i).props().projectId).toBe(designs[i].projectId);
+          expect(designWrappers.at(i).props().projectId).toBe(replicableItems[i].projectId);
         }
       });
     });
@@ -94,8 +94,8 @@ describe('GeoDesigns', () => {
       expect(actionSpies.setPage).toHaveBeenCalledWith(2);
     });
 
-    it('should call fetchDesigns', () => {
-      expect(actionSpies.fetchDesigns).toHaveBeenCalled();
+    it('should call fetchReplicableItems', () => {
+      expect(actionSpies.fetchReplicableItems).toHaveBeenCalled();
     });
   });
 });

ee/spec/frontend/geo_designs/store/actions_spec.js

@@ -64,7 +64,7 @@ describe('GeoDesigns Store Actions', () => {
     });
   });
 
-  describe('fetchDesigns', () => {
+  describe('fetchReplicableItems', () => {
     describe('on success', () => {
       beforeEach(() => {
         jest.spyOn(Api, 'getGeoReplicableItems').mockResolvedValue(MOCK_BASIC_FETCH_RESPONSE);
@@ -79,7 +79,7 @@ describe('GeoDesigns Store Actions', () => {
 
         it('should call getGeoReplicableItems with default queryParams', () => {
           testAction(
-            actions.fetchDesigns,
+            actions.fetchReplicableItems,
             {},
             state,
             [],
@@ -106,7 +106,7 @@ describe('GeoDesigns Store Actions', () => {
 
         it('should call getGeoReplicableItems with default queryParams', () => {
           testAction(
-            actions.fetchDesigns,
+            actions.fetchReplicableItems,
             {},
             state,
             [],
@@ -133,7 +133,7 @@ describe('GeoDesigns Store Actions', () => {
 
       it('should dispatch the request and error actions', done => {
         testAction(
-          actions.fetchDesigns,
+          actions.fetchReplicableItems,
           {},
           state,
           [],
@@ -158,13 +158,13 @@ describe('GeoDesigns Store Actions', () => {
   });
 
   describe('receiveInitiateAllReplicableSyncsSuccess', () => {
-    it('should commit mutation RECEIVE_INITIATE_ALL_REPLICABLE_SYNCS_SUCCESS and call fetchDesigns and toast', () => {
+    it('should commit mutation RECEIVE_INITIATE_ALL_REPLICABLE_SYNCS_SUCCESS and call fetchReplicableItems and toast', () => {
       testAction(
         actions.receiveInitiateAllReplicableSyncsSuccess,
         { action: ACTION_TYPES.RESYNC },
         state,
         [{ type: types.RECEIVE_INITIATE_ALL_REPLICABLE_SYNCS_SUCCESS }],
-        [{ type: 'fetchDesigns' }],
+        [{ type: 'fetchReplicableItems' }],
         () => {
           expect(toast).toHaveBeenCalledTimes(1);
           toast.mockClear();
@@ -188,7 +188,7 @@ describe('GeoDesigns Store Actions', () => {
     });
   });
 
-  describe('initiateAllDesignSyncs', () => {
+  describe('initiateAllReplicableSyncs', () => {
     let action;
 
     describe('on success', () => {
@@ -201,7 +201,7 @@ describe('GeoDesigns Store Actions', () => {
 
       it('should dispatch the request with correct replicable param and success actions', () => {
         testAction(
-          actions.initiateAllDesignSyncs,
+          actions.initiateAllReplicableSyncs,
           action,
           state,
           [],
@@ -227,7 +227,7 @@ describe('GeoDesigns Store Actions', () => {
 
       it('should dispatch the request and error actions', done => {
         testAction(
-          actions.initiateAllDesignSyncs,
+          actions.initiateAllReplicableSyncs,
           action,
           state,
           [],
@@ -255,13 +255,13 @@ describe('GeoDesigns Store Actions', () => {
   });
 
   describe('receiveInitiateReplicableSyncSuccess', () => {
-    it('should commit mutation RECEIVE_INITIATE_REPLICABLE_SYNC_SUCCESS and call fetchDesigns and toast', () => {
+    it('should commit mutation RECEIVE_INITIATE_REPLICABLE_SYNC_SUCCESS and call fetchReplicableItems and toast', () => {
       testAction(
         actions.receiveInitiateReplicableSyncSuccess,
         { action: ACTION_TYPES.RESYNC, projectName: 'test' },
         state,
         [{ type: types.RECEIVE_INITIATE_REPLICABLE_SYNC_SUCCESS }],
-        [{ type: 'fetchDesigns' }],
+        [{ type: 'fetchReplicableItems' }],
         () => {
           expect(toast).toHaveBeenCalledTimes(1);
           toast.mockClear();
@@ -285,7 +285,7 @@ describe('GeoDesigns Store Actions', () => {
     });
   });
 
-  describe('initiateDesignSync', () => {
+  describe('initiateReplicableSync', () => {
     let action;
     let projectId;
     let name;
@@ -300,7 +300,7 @@ describe('GeoDesigns Store Actions', () => {
 
       it('should dispatch the request with correct replicable param and success actions', () => {
         testAction(
-          actions.initiateDesignSync,
+          actions.initiateReplicableSync,
           { projectId, name, action },
           state,
           [],
@@ -328,7 +328,7 @@ describe('GeoDesigns Store Actions', () => {
 
       it('should dispatch the request and error actions', done => {
         testAction(
-          actions.initiateDesignSync,
+          actions.initiateReplicableSync,
           { projectId, name, action },
           state,
           [],

ee/spec/frontend/geo_designs/store/mutations_spec.js

@@ -78,13 +78,13 @@ describe('GeoReplicable Store Mutations', () => {
 
     it('sets designs array with data', () => {
       mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, mockData);
-      expect(state.designs).toBe(mockData.data);
+      expect(state.replicableItems).toBe(mockData.data);
     });
 
     it('sets pageSize and totalDesigns', () => {
       mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, mockData);
       expect(state.pageSize).toEqual(mockData.perPage);
-      expect(state.totalDesigns).toEqual(mockData.total);
+      expect(state.totalReplicableItems).toEqual(mockData.total);
     });
   });
 
@@ -103,19 +103,19 @@ describe('GeoReplicable Store Mutations', () => {
     });
 
     it('resets designs array', () => {
-      state.designs = mockData.data;
+      state.replicableItems = mockData.data;
 
       mutations[types.RECEIVE_REPLICABLE_ITEMS_ERROR](state);
-      expect(state.designs).toEqual([]);
+      expect(state.replicableItems).toEqual([]);
     });
 
     it('resets pagination data', () => {
       state.pageSize = mockData.perPage;
-      state.totalDesigns = mockData.total;
+      state.totalReplicableItems = mockData.total;
 
       mutations[types.RECEIVE_REPLICABLE_ITEMS_ERROR](state);
       expect(state.pageSize).toEqual(0);
-      expect(state.totalDesigns).toEqual(0);
+      expect(state.totalReplicableItems).toEqual(0);
     });
   });