Geo 2.0 Regression - Multiple Secondaries

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

@@ -18,6 +18,8 @@ export default {
     modalBody: s__(
       'Geo|Removing a Geo secondary node stops the synchronization to that node. Are you sure?',
     ),
+    primarySite: s__('Geo|Primary site'),
+    secondarySite: s__('Geo|Secondary site'),
   },
   components: {
     GlLink,
@@ -43,6 +45,12 @@ export default {
     noNodes() {
       return !this.nodes || this.nodes.length === 0;
     },
+    primaryNodes() {
+      return this.nodes.filter((n) => n.primary);
+    },
+    secondaryNodes() {
+      return this.nodes.filter((n) => !n.primary);
+    },
   },
   created() {
     this.fetchNodes();
@@ -89,10 +97,25 @@ export default {
       </gl-button>
     </div>
     <gl-loading-icon v-if="isLoading" size="xl" class="gl-mt-5" />
-    <div v-if="!isLoading">
-      <geo-nodes v-for="node in nodes" :key="node.id" :node="node" />
-      <geo-nodes-empty-state v-if="noNodes" :svg-path="geoNodesEmptyStateSvg" />
-    </div>
+    <template v-if="!isLoading">
+      <div v-if="!noNodes">
+        <h4 class="gl-font-lg gl-my-5">{{ $options.i18n.primarySite }}</h4>
+        <geo-nodes
+          v-for="node in primaryNodes"
+          :key="node.id"
+          :node="node"
+          data-testid="primary-nodes"
+        />
+        <h4 class="gl-font-lg gl-my-5">{{ $options.i18n.secondarySite }}</h4>
+        <geo-nodes
+          v-for="node in secondaryNodes"
+          :key="node.id"
+          :node="node"
+          data-testid="secondary-nodes"
+        />
+      </div>
+      <geo-nodes-empty-state v-else :svg-path="geoNodesEmptyStateSvg" />
+    </template>
     <gl-modal
       :modal-id="$options.REMOVE_NODE_MODAL_ID"
       :title="$options.i18n.modalTitle"

ee/app/assets/javascripts/geo_nodes_beta/components/geo_nodes.vue

 <script>
-import { s__ } from '~/locale';
 import GeoNodeDetails from './details/geo_node_details.vue';
 import GeoNodeHeader from './header/geo_node_header.vue';
 
 export default {
   name: 'GeoNodes',
-  i18n: {
-    primarySite: s__('Geo|Primary site'),
-    secondarySite: s__('Geo|Secondary site'),
-  },
   components: {
     GeoNodeHeader,
     GeoNodeDetails,
@@ -25,11 +20,6 @@ export default {
       collapsed: false,
     };
   },
-  computed: {
-    siteTitle() {
-      return this.node.primary ? this.$options.i18n.primarySite : this.$options.i18n.secondarySite;
-    },
-  },
   methods: {
     toggleCollapse() {
       this.collapsed = !this.collapsed;
@@ -39,8 +29,7 @@ export default {
 </script>
 
 <template>
-  <div>
-    <h4 class="gl-font-lg gl-my-5">{{ siteTitle }}</h4>
+  <div class="gl-mb-4">
     <geo-node-header :node="node" :collapsed="collapsed" @collapse="toggleCollapse" />
     <geo-node-details v-if="!collapsed" :node="node" />
   </div>

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

@@ -6,6 +6,7 @@ import GeoNodesBetaApp from 'ee/geo_nodes_beta/components/app.vue';
 import GeoNodes from 'ee/geo_nodes_beta/components/geo_nodes.vue';
 import GeoNodesEmptyState from 'ee/geo_nodes_beta/components/geo_nodes_empty_state.vue';
 import { GEO_INFO_URL } from 'ee/geo_nodes_beta/constants';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { MOCK_NODES, MOCK_NEW_NODE_URL, MOCK_EMPTY_STATE_SVG } from '../mock_data';
 
 Vue.use(Vuex);
@@ -32,14 +33,16 @@ describe('GeoNodesBetaApp', () => {
       actions: actionSpies,
     });
 
-    wrapper = shallowMount(GeoNodesBetaApp, {
-      store,
-      propsData: {
-        ...defaultProps,
-        ...props,
-      },
-      stubs: { GlSprintf },
-    });
+    wrapper = extendedWrapper(
+      shallowMount(GeoNodesBetaApp, {
+        store,
+        propsData: {
+          ...defaultProps,
+          ...props,
+        },
+        stubs: { GlSprintf },
+      }),
+    );
   };
 
   afterEach(() => {
@@ -52,6 +55,8 @@ describe('GeoNodesBetaApp', () => {
   const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findGeoEmptyState = () => wrapper.findComponent(GeoNodesEmptyState);
   const findGeoNodes = () => wrapper.findAllComponents(GeoNodes);
+  const findPrimaryGeoNodes = () => wrapper.findAllByTestId('primary-nodes');
+  const findSecondaryGeoNodes = () => wrapper.findAllByTestId('secondary-nodes');
   const findGlModal = () => wrapper.findComponent(GlModal);
 
   describe('template', () => {
@@ -108,12 +113,16 @@ describe('GeoNodesBetaApp', () => {
     );
 
     describe('with Geo Nodes', () => {
+      const primaryNodes = MOCK_NODES.filter((n) => n.primary);
+      const secondaryNodes = MOCK_NODES.filter((n) => !n.primary);
+
       beforeEach(() => {
         createComponent({ nodes: MOCK_NODES });
       });
 
-      it('renders a Geo Node component for each node', () => {
-        expect(findGeoNodes()).toHaveLength(MOCK_NODES.length);
+      it('renders the correct Geo Node component for each node', () => {
+        expect(findPrimaryGeoNodes()).toHaveLength(primaryNodes.length);
+        expect(findSecondaryGeoNodes()).toHaveLength(secondaryNodes.length);
       });
     });
   });

ee/spec/frontend/geo_nodes_beta/components/geo_nodes_spec.js

@@ -25,7 +25,6 @@ describe('GeoNodes', () => {
   });
 
   const findGeoNodesContainer = () => wrapper.find('div');
-  const findGeoSiteTitle = () => wrapper.find('h4');
   const findGeoNodeHeader = () => wrapper.findComponent(GeoNodeHeader);
   const findGeoNodeDetails = () => wrapper.findComponent(GeoNodeDetails);
 
@@ -56,19 +55,4 @@ describe('GeoNodes', () => {
       });
     });
   });
-
-  describe.each`
-    node             | siteTitle
-    ${MOCK_NODES[0]} | ${'Primary site'}
-    ${MOCK_NODES[1]} | ${'Secondary site'}
-  `(`Site Title`, ({ node, siteTitle }) => {
-    beforeEach(() => {
-      createComponent({ node });
-    });
-
-    it(`is ${siteTitle} when primary is ${node.primary}`, () => {
-      expect(findGeoSiteTitle().exists()).toBe(true);
-      expect(findGeoSiteTitle().text()).toBe(siteTitle);
-    });
-  });
 });