Merge branch '118841_04-node-form-selective-sync-namespaces' into 'master'

Geo Node Form in Vue - Selective Sync (Namespaces)

Closes #118841

See merge request gitlab-org/gitlab!25061

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue

+<script>
+import { GlIcon, GlSearchBoxByType, GlDropdown, GlButton } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import { debounce } from 'underscore';
+import { __, n__ } from '~/locale';
+import { SELECTIVE_SYNC_NAMESPACES } from '../constants';
+
+export default {
+  name: 'GeoNodeFormNamespaces',
+  components: {
+    GlIcon,
+    GlSearchBoxByType,
+    GlDropdown,
+    GlButton,
+  },
+  props: {
+    selectedNamespaces: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      namespaceSearch: '',
+    };
+  },
+  computed: {
+    ...mapState(['synchronizationNamespaces']),
+    dropdownTitle() {
+      if (this.selectedNamespaces.length === 0) {
+        return __('Select groups to replicate');
+      }
+      return n__('%d group selected', '%d groups selected', this.selectedNamespaces.length);
+    },
+    noSyncNamespaces() {
+      return this.synchronizationNamespaces.length === 0;
+    },
+  },
+  watch: {
+    namespaceSearch: debounce(function debounceSearch() {
+      this.fetchSyncNamespaces(this.namespaceSearch);
+    }, 500),
+  },
+  methods: {
+    ...mapActions(['fetchSyncNamespaces']),
+    toggleNamespace(namespace) {
+      const index = this.selectedNamespaces.findIndex(id => id === namespace.id);
+      if (index > -1) {
+        this.$emit('removeSyncOption', { key: SELECTIVE_SYNC_NAMESPACES, index });
+      } else {
+        this.$emit('addSyncOption', { key: SELECTIVE_SYNC_NAMESPACES, value: namespace.id });
+      }
+    },
+    isSelected(namespace) {
+      return this.selectedNamespaces.includes(namespace.id);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces(namespaceSearch)">
+    <gl-search-box-by-type v-model="namespaceSearch" class="m-2" />
+    <li v-for="namespace in synchronizationNamespaces" :key="namespace.id">
+      <gl-button class="d-flex align-items-center" @click="toggleNamespace(namespace)">
+        <gl-icon :class="[{ invisible: !isSelected(namespace) }]" name="mobile-issue-close" />
+        <span class="ml-1">{{ namespace.name }}</span>
+      </gl-button>
+    </li>
+    <div v-if="noSyncNamespaces" class="text-secondary p-2">{{ __('Nothing found…') }}</div>
+  </gl-dropdown>
+</template>

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_selective_sync.vue

 <script>
 import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import GeoNodeFormNamespaces from './geo_node_form_namespaces.vue';
 import GeoNodeFormShards from './geo_node_form_shards.vue';
 
 export default {
@@ -7,6 +8,7 @@ export default {
   components: {
     GlFormGroup,
     GlFormSelect,
+    GeoNodeFormNamespaces,
     GeoNodeFormShards,
   },
   props: {
@@ -24,6 +26,9 @@ export default {
     },
   },
   computed: {
+    selectiveSyncNamespaces() {
+      return this.nodeData.selectiveSyncType === this.selectiveSyncTypes.NAMESPACES.value;
+    },
     selectiveSyncShards() {
       return this.nodeData.selectiveSyncType === this.selectiveSyncTypes.SHARDS.value;
     },
@@ -54,6 +59,19 @@ export default {
         class="col-sm-6"
       />
     </gl-form-group>
+    <gl-form-group
+      v-if="selectiveSyncNamespaces"
+      :label="__('Groups to synchronize')"
+      label-for="node-synchronization-namespaces-field"
+      :description="__('Choose which groups you wish to synchronize to this secondary node')"
+    >
+      <geo-node-form-namespaces
+        id="node-synchronization-namespaces-field"
+        :selected-namespaces="nodeData.selectiveSyncNamespaceIds"
+        @addSyncOption="addSyncOption"
+        @removeSyncOption="removeSyncOption"
+      />
+    </gl-form-group>
     <gl-form-group
       v-if="selectiveSyncShards"
       :label="__('Shards to synchronize')"

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_shards.vue

 <script>
 import { GlIcon, GlDropdown, GlButton } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { __, n__ } from '~/locale';
 import { SELECTIVE_SYNC_SHARDS } from '../constants';
 
 export default {
@@ -25,7 +25,8 @@ export default {
       if (this.selectedShards.length === 0) {
         return __('Select shards to replicate');
       }
-      return sprintf(__('Shards selected: %{count}'), { count: this.selectedShards.length });
+
+      return n__('%d shard selected', '%d shards selected', this.selectedShards.length);
     },
     noSyncShards() {
       return this.syncShardsOptions.length === 0;

ee/app/assets/javascripts/geo_node_form/constants.js

-/* eslint-disable import/prefer-default-export  */
-
 export const SELECTIVE_SYNC_SHARDS = 'selectiveSyncShards';
+export const SELECTIVE_SYNC_NAMESPACES = 'selectiveSyncNamespaceIds';

ee/app/assets/javascripts/geo_node_form/index.js

 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import createStore from './store';
 import GeoNodeFormApp from './components/app.vue';
 
 Vue.use(Translate);
@@ -10,6 +11,7 @@ export default () => {
 
   return new Vue({
     el,
+    store: createStore(),
     components: {
       GeoNodeFormApp,
     },

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

+import Api from '~/api';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import * as types from './mutation_types';
+
+export const requestSyncNamespaces = ({ commit }) => commit(types.REQUEST_SYNC_NAMESPACES);
+export const receiveSyncNamespacesSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_SYNC_NAMESPACES_SUCCESS, data);
+export const receiveSyncNamespacesError = ({ commit }) => {
+  createFlash(__("There was an error fetching the Node's Groups"));
+  commit(types.RECEIVE_SYNC_NAMESPACES_ERROR);
+};
+
+export const fetchSyncNamespaces = ({ dispatch }, search) => {
+  dispatch('requestSyncNamespaces');
+
+  Api.groups(search)
+    .then(res => {
+      dispatch('receiveSyncNamespacesSuccess', res);
+    })
+    .catch(() => {
+      dispatch('receiveSyncNamespacesError');
+    });
+};

ee/app/assets/javascripts/geo_node_form/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import mutations from './mutations';
+import createState from './state';
+
+Vue.use(Vuex);
+
+const createStore = () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: createState(),
+  });
+export default createStore;

ee/app/assets/javascripts/geo_node_form/store/mutation_types.js

+export const REQUEST_SYNC_NAMESPACES = 'REQUEST_SYNC_NAMESPACES';
+export const RECEIVE_SYNC_NAMESPACES_SUCCESS = 'RECEIVE_SYNC_NAMESPACES_SUCCESS';
+export const RECEIVE_SYNC_NAMESPACES_ERROR = 'RECEIVE_SYNC_NAMESPACES_ERROR';

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

+import * as types from './mutation_types';
+
+export default {
+  [types.REQUEST_SYNC_NAMESPACES](state) {
+    state.isLoading = true;
+  },
+  [types.RECEIVE_SYNC_NAMESPACES_SUCCESS](state, data) {
+    state.isLoading = false;
+    state.synchronizationNamespaces = data;
+  },
+  [types.RECEIVE_SYNC_NAMESPACES_ERROR](state) {
+    state.isLoading = false;
+    state.synchronizationNamespaces = [];
+  },
+};

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

+const createState = () => ({
+  isLoading: false,
+  synchronizationNamespaces: [],
+});
+export default createState;

ee/spec/frontend/geo_node_form/components/geo_node_form_namespaces_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlIcon, GlSearchBoxByType, GlDropdown } from '@gitlab/ui';
+import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue';
+import store from 'ee/geo_node_form/store';
+import { MOCK_SYNC_NAMESPACES } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+jest.mock('~/flash');
+
+describe('GeoNodeFormNamespaces', () => {
+  let wrapper;
+
+  const defaultProps = {
+    selectedNamespaces: [],
+  };
+
+  const actionSpies = {
+    fetchSyncNamespaces: jest.fn(),
+    toggleNamespace: jest.fn(),
+    isSelected: jest.fn(),
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(GeoNodeFormNamespaces, {
+      localVue,
+      store,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      methods: {
+        ...actionSpies,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGlDropdown = () => wrapper.find(GlDropdown);
+  const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType);
+  const findDropdownItems = () => findGlDropdown().findAll('li');
+  const findDropdownItemsText = () => findDropdownItems().wrappers.map(w => w.text());
+  const findGlIcons = () => wrapper.findAll(GlIcon);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders GlDropdown', () => {
+      expect(findGlDropdown().exists()).toBe(true);
+    });
+
+    it('renders findGlDropdownSearch', () => {
+      expect(findGlDropdownSearch().exists()).toBe(true);
+    });
+
+    describe('findDropdownItems', () => {
+      beforeEach(() => {
+        delete actionSpies.isSelected;
+        createComponent({
+          selectedNamespaces: [[MOCK_SYNC_NAMESPACES[0].id]],
+        });
+        wrapper.vm.$store.state.synchronizationNamespaces = MOCK_SYNC_NAMESPACES;
+      });
+
+      it('renders an instance for each namespace', () => {
+        expect(findDropdownItemsText()).toStrictEqual(MOCK_SYNC_NAMESPACES.map(n => n.name));
+      });
+
+      it('hides GlIcon if namespace not in selectedNamespaces', () => {
+        expect(findGlIcons().wrappers.every(w => w.classes('invisible'))).toBe(true);
+      });
+    });
+  });
+
+  describe('watchers', () => {
+    describe('namespaceSearch', () => {
+      const namespaceSearch = 'test search';
+
+      beforeEach(() => {
+        createComponent();
+        wrapper.setData({
+          namespaceSearch,
+        });
+      });
+
+      it('should wait 500ms before calling fetchSyncNamespaces', () => {
+        expect(actionSpies.fetchSyncNamespaces).not.toHaveBeenCalledWith(namespaceSearch);
+
+        jest.advanceTimersByTime(500); // Debounce
+        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith(namespaceSearch);
+        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call fetchSyncNamespaces once with the latest search term', () => {
+        expect(actionSpies.fetchSyncNamespaces).not.toHaveBeenCalledWith(namespaceSearch);
+        wrapper.setData({
+          namespaceSearch: 'test search2',
+        });
+
+        jest.advanceTimersByTime(500); // Debounce
+        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith('test search2');
+        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('toggleNamespace', () => {
+      beforeEach(() => {
+        delete actionSpies.toggleNamespace;
+        createComponent({
+          selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id],
+        });
+      });
+
+      describe('when namespace is in selectedNamespaces', () => {
+        it('emits `removeSyncOption`', () => {
+          wrapper.vm.toggleNamespace(MOCK_SYNC_NAMESPACES[0]);
+          expect(wrapper.emitted('removeSyncOption')).toBeTruthy();
+        });
+      });
+
+      describe('when namespace is not in selectedNamespaces', () => {
+        it('emits `addSyncOption`', () => {
+          wrapper.vm.toggleNamespace(MOCK_SYNC_NAMESPACES[1]);
+          expect(wrapper.emitted('addSyncOption')).toBeTruthy();
+        });
+      });
+    });
+
+    describe('isSelected', () => {
+      beforeEach(() => {
+        delete actionSpies.isSelected;
+        createComponent({
+          selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id],
+        });
+      });
+
+      describe('when namespace is in selectedNamespaces', () => {
+        it('returns `true`', () => {
+          expect(wrapper.vm.isSelected(MOCK_SYNC_NAMESPACES[0])).toBeTruthy();
+        });
+      });
+
+      describe('when namespace is not in selectedNamespaces', () => {
+        it('returns `false`', () => {
+          expect(wrapper.vm.isSelected(MOCK_SYNC_NAMESPACES[1])).toBeFalsy();
+        });
+      });
+    });
+
+    describe('computed', () => {
+      describe('dropdownTitle', () => {
+        describe('when selectedNamespaces is empty', () => {
+          beforeEach(() => {
+            createComponent({
+              selectedNamespaces: [],
+            });
+          });
+
+          it('returns `Select groups to replicate`', () => {
+            expect(wrapper.vm.dropdownTitle).toBe('Select groups to replicate');
+          });
+        });
+
+        describe('when selectedNamespaces length === 1', () => {
+          beforeEach(() => {
+            createComponent({
+              selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id],
+            });
+          });
+
+          it('returns `this.selectedNamespaces.length` group selected', () => {
+            expect(wrapper.vm.dropdownTitle).toBe(
+              `${wrapper.vm.selectedNamespaces.length} group selected`,
+            );
+          });
+        });
+
+        describe('when selectedNamespaces length > 1', () => {
+          beforeEach(() => {
+            createComponent({
+              selectedNamespaces: [MOCK_SYNC_NAMESPACES[0].id, MOCK_SYNC_NAMESPACES[1].id],
+            });
+          });
+
+          it('returns `this.selectedNamespaces.length` group selected', () => {
+            expect(wrapper.vm.dropdownTitle).toBe(
+              `${wrapper.vm.selectedNamespaces.length} groups selected`,
+            );
+          });
+        });
+      });
+
+      describe('noSyncNamespaces', () => {
+        describe('when synchronizationNamespaces.length > 0', () => {
+          beforeEach(() => {
+            createComponent();
+            wrapper.vm.$store.state.synchronizationNamespaces = MOCK_SYNC_NAMESPACES;
+          });
+
+          it('returns `false`', () => {
+            expect(wrapper.vm.noSyncNamespaces).toBeFalsy();
+          });
+        });
+      });
+
+      describe('when synchronizationNamespaces.length === 0', () => {
+        beforeEach(() => {
+          createComponent();
+          wrapper.vm.$store.state.synchronizationNamespaces = [];
+        });
+
+        it('returns `true`', () => {
+          expect(wrapper.vm.noSyncNamespaces).toBeTruthy();
+        });
+      });
+    });
+  });
+});

ee/spec/frontend/geo_node_form/components/geo_node_form_selective_sync_spec.js

-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import GeoNodeFormSelectiveSync from 'ee/geo_node_form/components/geo_node_form_selective_sync.vue';
+import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue';
 import GeoNodeFormShards from 'ee/geo_node_form/components/geo_node_form_shards.vue';
 import { MOCK_NODE, MOCK_SELECTIVE_SYNC_TYPES, MOCK_SYNC_SHARDS } from '../mock_data';
 
 describe('GeoNodeFormSelectiveSync', () => {
   let wrapper;
 
-  const propsData = {
+  const defaultProps = {
     nodeData: MOCK_NODE,
     selectiveSyncTypes: MOCK_SELECTIVE_SYNC_TYPES,
     syncShardsOptions: MOCK_SYNC_SHARDS,
   };
 
-  const createComponent = () => {
-    wrapper = mount(GeoNodeFormSelectiveSync, {
-      propsData,
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(GeoNodeFormSelectiveSync, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
     });
   };
 
@@ -25,6 +29,7 @@ describe('GeoNodeFormSelectiveSync', () => {
   const findGeoNodeFormSyncContainer = () =>
     wrapper.find({ ref: 'geoNodeFormSelectiveSyncContainer' });
   const findGeoNodeFormSyncTypeField = () => wrapper.find('#node-selective-synchronization-field');
+  const findGeoNodeFormNamespacesField = () => wrapper.find(GeoNodeFormNamespaces);
   const findGeoNodeFormShardsField = () => wrapper.find(GeoNodeFormShards);
 
   describe('template', () => {
@@ -41,18 +46,21 @@ describe('GeoNodeFormSelectiveSync', () => {
     });
 
     describe.each`
-      syncType                                | showShards
-      ${MOCK_SELECTIVE_SYNC_TYPES.ALL}        | ${false}
-      ${MOCK_SELECTIVE_SYNC_TYPES.NAMESPACES} | ${false}
-      ${MOCK_SELECTIVE_SYNC_TYPES.SHARDS}     | ${true}
-    `(`sync type`, ({ syncType, showShards }) => {
+      syncType                                | showNamespaces | showShards
+      ${MOCK_SELECTIVE_SYNC_TYPES.ALL}        | ${false}       | ${false}
+      ${MOCK_SELECTIVE_SYNC_TYPES.NAMESPACES} | ${true}        | ${false}
+      ${MOCK_SELECTIVE_SYNC_TYPES.SHARDS}     | ${false}       | ${true}
+    `(`sync type`, ({ syncType, showNamespaces, showShards }) => {
       beforeEach(() => {
-        createComponent();
-        wrapper.setProps({
-          nodeData: { ...propsData.nodeData, selectiveSyncType: syncType.value },
+        createComponent({
+          nodeData: { ...defaultProps.nodeData, selectiveSyncType: syncType.value },
         });
       });
 
+      it(`${showNamespaces ? 'show' : 'hide'} Namespaces Field`, () => {
+        expect(findGeoNodeFormNamespacesField().exists()).toBe(showNamespaces);
+      });
+
       it(`${showShards ? 'show' : 'hide'} Shards Field`, () => {
         expect(findGeoNodeFormShardsField().exists()).toBe(showShards);
       });
@@ -73,9 +81,8 @@ describe('GeoNodeFormSelectiveSync', () => {
 
     describe('removeSyncOption', () => {
       beforeEach(() => {
-        createComponent();
-        wrapper.setProps({
-          nodeData: { ...propsData.nodeData, selectiveSyncShards: [MOCK_SYNC_SHARDS[0].value] },
+        createComponent({
+          nodeData: { ...defaultProps.nodeData, selectiveSyncShards: [MOCK_SYNC_SHARDS[0].value] },
         });
       });
 
@@ -87,16 +94,36 @@ describe('GeoNodeFormSelectiveSync', () => {
   });
 
   describe('computed', () => {
+    const factory = (selectiveSyncType = MOCK_SELECTIVE_SYNC_TYPES.ALL.value) => {
+      createComponent({ nodeData: { ...defaultProps.nodeData, selectiveSyncType } });
+    };
+
+    describe('selectiveSyncNamespaces', () => {
+      describe('when selectiveSyncType is not `NAMESPACES`', () => {
+        beforeEach(() => {
+          factory();
+        });
+
+        it('returns `false`', () => {
+          expect(wrapper.vm.selectiveSyncNamespaces).toBeFalsy();
+        });
+      });
+
+      describe('when selectiveSyncType is `NAMESPACES`', () => {
+        beforeEach(() => {
+          factory(MOCK_SELECTIVE_SYNC_TYPES.NAMESPACES.value);
+        });
+
+        it('returns `true`', () => {
+          expect(wrapper.vm.selectiveSyncNamespaces).toBeTruthy();
+        });
+      });
+    });
+
     describe('selectiveSyncShards', () => {
       describe('when selectiveSyncType is not `SHARDS`', () => {
         beforeEach(() => {
-          createComponent();
-          wrapper.setProps({
-            nodeData: {
-              ...propsData.nodeData,
-              selectiveSyncType: MOCK_SELECTIVE_SYNC_TYPES.ALL.value,
-            },
-          });
+          factory(MOCK_SELECTIVE_SYNC_TYPES.ALL.value);
         });
 
         it('returns `false`', () => {
@@ -106,13 +133,7 @@ describe('GeoNodeFormSelectiveSync', () => {
 
       describe('when selectiveSyncType is `SHARDS`', () => {
         beforeEach(() => {
-          createComponent();
-          wrapper.setProps({
-            nodeData: {
-              ...propsData.nodeData,
-              selectiveSyncType: MOCK_SELECTIVE_SYNC_TYPES.SHARDS.value,
-            },
-          });
+          factory(MOCK_SELECTIVE_SYNC_TYPES.SHARDS.value);
         });
 
         it('returns `true`', () => {

ee/spec/frontend/geo_node_form/components/geo_node_form_shards_spec.js

@@ -6,7 +6,7 @@ import { MOCK_SYNC_SHARDS } from '../mock_data';
 describe('GeoNodeFormShards', () => {
   let wrapper;
 
-  const propsData = {
+  const defaultProps = {
     selectedShards: [],
     syncShardsOptions: MOCK_SYNC_SHARDS,
   };
@@ -16,9 +16,12 @@ describe('GeoNodeFormShards', () => {
     isSelected: jest.fn(),
   };
 
-  const createComponent = () => {
+  const createComponent = (props = {}) => {
     wrapper = mount(GeoNodeFormShards, {
-      propsData,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
       methods: {
         ...actionSpies,
       },
@@ -44,8 +47,7 @@ describe('GeoNodeFormShards', () => {
     describe('DropdownItems', () => {
       beforeEach(() => {
         delete actionSpies.isSelected;
-        createComponent();
-        wrapper.setProps({
+        createComponent({
           selectedShards: [MOCK_SYNC_SHARDS[0].value],
         });
       });
@@ -80,8 +82,7 @@ describe('GeoNodeFormShards', () => {
 
       describe('when shard is in selectedShards', () => {
         beforeEach(() => {
-          createComponent();
-          wrapper.setProps({
+          createComponent({
             selectedShards: [MOCK_SYNC_SHARDS[0].value],
           });
         });
@@ -94,8 +95,7 @@ describe('GeoNodeFormShards', () => {
 
       describe('when shard is not in selectedShards', () => {
         beforeEach(() => {
-          createComponent();
-          wrapper.setProps({
+          createComponent({
             selectedShards: [MOCK_SYNC_SHARDS[0].value],
           });
         });
@@ -114,8 +114,7 @@ describe('GeoNodeFormShards', () => {
 
       describe('when shard is in selectedShards', () => {
         beforeEach(() => {
-          createComponent();
-          wrapper.setProps({
+          createComponent({
             selectedShards: [MOCK_SYNC_SHARDS[0].value],
           });
         });
@@ -127,8 +126,7 @@ describe('GeoNodeFormShards', () => {
 
       describe('when shard is not in selectedShards', () => {
         beforeEach(() => {
-          createComponent();
-          wrapper.setProps({
+          createComponent({
             selectedShards: [MOCK_SYNC_SHARDS[0].value],
           });
         });
@@ -143,8 +141,7 @@ describe('GeoNodeFormShards', () => {
       describe('dropdownTitle', () => {
         describe('when selectedShards is empty', () => {
           beforeEach(() => {
-            createComponent();
-            wrapper.setProps({
+            createComponent({
               selectedShards: [],
             });
           });
@@ -154,17 +151,30 @@ describe('GeoNodeFormShards', () => {
           });
         });
 
-        describe('when selectedShards is not empty', () => {
+        describe('when selectedShards length === 1', () => {
           beforeEach(() => {
-            createComponent();
-            wrapper.setProps({
+            createComponent({
               selectedShards: [MOCK_SYNC_SHARDS[0].value],
             });
           });
 
-          it('returns Shards selected: `this.selectedShards.length`', () => {
+          it('returns `this.selectedShards.length` shard selected', () => {
+            expect(wrapper.vm.dropdownTitle).toBe(
+              `${wrapper.vm.selectedShards.length} shard selected`,
+            );
+          });
+        });
+
+        describe('when selectedShards length > 1', () => {
+          beforeEach(() => {
+            createComponent({
+              selectedShards: [MOCK_SYNC_SHARDS[0].value, MOCK_SYNC_SHARDS[1].value],
+            });
+          });
+
+          it('returns `this.selectedShards.length` shards selected', () => {
             expect(wrapper.vm.dropdownTitle).toBe(
-              `Shards selected: ${wrapper.vm.selectedShards.length}`,
+              `${wrapper.vm.selectedShards.length} shards selected`,
             );
           });
         });
@@ -184,8 +194,7 @@ describe('GeoNodeFormShards', () => {
 
       describe('when syncShardsOptions.length === 0', () => {
         beforeEach(() => {
-          createComponent();
-          wrapper.setProps({
+          createComponent({
             syncShardsOptions: [],
           });
         });

ee/spec/frontend/geo_node_form/mock_data.js

@@ -28,6 +28,21 @@ export const MOCK_SYNC_SHARDS = [
   },
 ];
 
+export const MOCK_SYNC_NAMESPACES = [
+  {
+    name: 'Namespace 1',
+    id: 'namespace1',
+  },
+  {
+    name: 'Namespace 2',
+    id: 'namespace2',
+  },
+  {
+    name: 'namespace 3',
+    id: 'Namespace3',
+  },
+];
+
 export const MOCK_NODE = {
   id: 1,
   name: 'Mock Node',
@@ -35,7 +50,7 @@ export const MOCK_NODE = {
   primary: false,
   internalUrl: '',
   selectiveSyncType: '',
-  namespaceIds: [],
+  selectiveSyncNamespaceIds: [],
   selectiveSyncShards: [],
   reposMaxCapacity: 25,
   filesMaxCapacity: 10,

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

+import MockAdapter from 'axios-mock-adapter';
+import testAction from 'helpers/vuex_action_helper';
+import flash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import * as actions from 'ee/geo_node_form/store/actions';
+import * as types from 'ee/geo_node_form/store/mutation_types';
+import createState from 'ee/geo_node_form/store/state';
+import { MOCK_SYNC_NAMESPACES } from '../mock_data';
+
+jest.mock('~/flash');
+
+describe('GeoNodeForm Store Actions', () => {
+  let state;
+  let mock;
+
+  beforeEach(() => {
+    state = createState();
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe('requestSyncNamespaces', () => {
+    it('should commit mutation REQUEST_SYNC_NAMESPACES', done => {
+      testAction(
+        actions.requestSyncNamespaces,
+        null,
+        state,
+        [{ type: types.REQUEST_SYNC_NAMESPACES }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveSyncNamespacesSuccess', () => {
+    it('should commit mutation RECEIVE_SYNC_NAMESPACES_SUCCESS', done => {
+      testAction(
+        actions.receiveSyncNamespacesSuccess,
+        MOCK_SYNC_NAMESPACES,
+        state,
+        [{ type: types.RECEIVE_SYNC_NAMESPACES_SUCCESS, payload: MOCK_SYNC_NAMESPACES }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveSyncNamespacesError', () => {
+    it('should commit mutation RECEIVE_SYNC_NAMESPACES_ERROR', () => {
+      testAction(
+        actions.receiveSyncNamespacesError,
+        null,
+        state,
+        [{ type: types.RECEIVE_SYNC_NAMESPACES_ERROR }],
+        [],
+        () => {
+          expect(flash).toHaveBeenCalledTimes(1);
+          flash.mockClear();
+        },
+      );
+    });
+  });
+
+  describe('fetchSyncNamespaces', () => {
+    describe('on success', () => {
+      beforeEach(() => {
+        mock.onGet().replyOnce(200, MOCK_SYNC_NAMESPACES);
+      });
+
+      it('should dispatch the request and success actions', done => {
+        testAction(
+          actions.fetchSyncNamespaces,
+          {},
+          state,
+          [],
+          [
+            { type: 'requestSyncNamespaces' },
+            { type: 'receiveSyncNamespacesSuccess', payload: MOCK_SYNC_NAMESPACES },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('on error', () => {
+      beforeEach(() => {
+        mock.onGet().replyOnce(500, {});
+      });
+
+      it('should dispatch the request and error actions', done => {
+        testAction(
+          actions.fetchSyncNamespaces,
+          {},
+          state,
+          [],
+          [{ type: 'requestSyncNamespaces' }, { type: 'receiveSyncNamespacesError' }],
+          done,
+        );
+      });
+    });
+  });
+});

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

+import mutations from 'ee/geo_node_form/store/mutations';
+import createState from 'ee/geo_node_form/store/state';
+import * as types from 'ee/geo_node_form/store/mutation_types';
+import { MOCK_SYNC_NAMESPACES } from '../mock_data';
+
+describe('GeoNodeForm Store Mutations', () => {
+  let state;
+  beforeEach(() => {
+    state = createState();
+  });
+
+  describe('REQUEST_SYNC_NAMESPACES', () => {
+    it('sets isLoading to true', () => {
+      mutations[types.REQUEST_SYNC_NAMESPACES](state);
+      expect(state.isLoading).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_SYNC_NAMESPACES_SUCCESS', () => {
+    it('sets isLoading to false', () => {
+      state.isLoading = true;
+
+      mutations[types.RECEIVE_SYNC_NAMESPACES_SUCCESS](state, MOCK_SYNC_NAMESPACES);
+      expect(state.isLoading).toEqual(false);
+    });
+
+    it('sets synchronizationNamespaces array with namespace data', () => {
+      mutations[types.RECEIVE_SYNC_NAMESPACES_SUCCESS](state, MOCK_SYNC_NAMESPACES);
+      expect(state.synchronizationNamespaces).toBe(MOCK_SYNC_NAMESPACES);
+    });
+  });
+
+  describe('RECEIVE_SYNC_NAMESPACES_ERROR', () => {
+    it('sets isLoading to false', () => {
+      state.isLoading = true;
+
+      mutations[types.RECEIVE_SYNC_NAMESPACES_ERROR](state);
+      expect(state.isLoading).toEqual(false);
+    });
+
+    it('resets synchronizationNamespaces array', () => {
+      state.synchronizationNamespaces = MOCK_SYNC_NAMESPACES;
+
+      mutations[types.RECEIVE_SYNC_NAMESPACES_ERROR](state);
+      expect(state.synchronizationNamespaces).toEqual([]);
+    });
+  });
+});

locale/gitlab.pot

@@ -111,6 +111,11 @@ msgid_plural "%d fixed test results"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%d group selected"
+msgid_plural "%d groups selected"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d inaccessible merge request"
 msgid_plural "%d inaccessible merge requests"
 msgstr[0] ""
@@ -171,6 +176,11 @@ msgid_plural "%d seconds"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%d shard selected"
+msgid_plural "%d shards selected"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d staged change"
 msgid_plural "%d staged changes"
 msgstr[0] ""
@@ -3599,6 +3609,9 @@ msgstr ""
 msgid "Choose what content you want to see on a group’s overview page"
 msgstr ""
 
+msgid "Choose which groups you wish to synchronize to this secondary node"
+msgstr ""
+
 msgid "Choose which repositories you want to connect and run CI/CD pipelines."
 msgstr ""
 
@@ -9921,6 +9934,9 @@ msgstr ""
 msgid "Groups can also be nested by creating %{subgroup_docs_link_start}subgroups%{subgroup_docs_link_end}."
 msgstr ""
 
+msgid "Groups to synchronize"
+msgstr ""
+
 msgid "Groups with access to %{strong_start}%{group_name}%{strong_end}"
 msgstr ""
 
@@ -17145,6 +17161,9 @@ msgstr ""
 msgid "Select group or project"
 msgstr ""
 
+msgid "Select groups to replicate"
+msgstr ""
+
 msgid "Select labels"
 msgstr ""
 
@@ -17544,9 +17563,6 @@ msgstr ""
 msgid "Severity: %{severity}"
 msgstr ""
 
-msgid "Shards selected: %{count}"
-msgstr ""
-
 msgid "Shards to synchronize"
 msgstr ""
 
@@ -19461,6 +19477,9 @@ msgstr ""
 msgid "There was an error fetching the Designs"
 msgstr ""
 
+msgid "There was an error fetching the Node's Groups"
+msgstr ""
+
 msgid "There was an error fetching the environments information."
 msgstr ""