Geo Replication - Rename Store/State

This MR is an effort at MVC.

This MR splits off from:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/26410

The overall focus of this and follwoing related
changes is to replace Geo_Designs with
Geo_Replicable.

This MR renames the "public" store actions.
In doing so the component references
were updated as well.

This MR renames the state properties that
we explicit for designs to replicable.

Following MRs:
Rename Vue Components and Filenames

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);
     });
   });