Geo Sites - Link to replication views

This adds logic to properly link
to the replication list per component
on Secondary Sites.

This change also rethinks how
we build the URLs.

Changelog: changed
EE: true

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_details.vue

@@ -51,6 +51,7 @@ export default {
           component: replicable.titlePlural,
           syncValues: replicableSyncInfo ? replicableSyncInfo.values : null,
           verificationValues: replicableVerificationInfo ? replicableVerificationInfo.values : null,
+          replicationView: this.getReplicationView(replicable),
         };
       });
     },
@@ -65,6 +66,17 @@ export default {
     collapseSection() {
       this.collapsed = !this.collapsed;
     },
+    getReplicationView(replicable) {
+      if (replicable.noReplicationView) {
+        return null;
+      }
+
+      const path = replicable.customReplicationUrl
+        ? `${this.node.url}${replicable.customReplicationUrl}`
+        : `${this.node.url}admin/geo/sites/${this.node.id}/replication/${replicable.namePlural}`;
+
+      return new URL(path);
+    },
   },
   GEO_REPLICATION_SUPPORTED_TYPES_URL,
 };
@@ -101,7 +113,12 @@ export default {
           <span class="gl-font-weight-bold">{{ translations.status }}</span>
         </template>
         <template #default="{ item, translations }">
-          <span class="gl-mr-5">{{ item.component }}</span>
+          <div class="gl-mr-5" data-testid="replicable-component">
+            <gl-link v-if="item.replicationView" :href="item.replicationView">{{
+              item.component
+            }}</gl-link>
+            <span v-else>{{ item.component }}</span>
+          </div>
           <geo-node-replication-status-mobile :item="item" :translations="translations" />
         </template>
       </geo-node-replication-details-responsive>

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_details_responsive.vue

 <script>
+import { GlLink } from '@gitlab/ui';
 import GeoNodeProgressBar from 'ee/geo_nodes/components/details/geo_node_progress_bar.vue';
 import { s__, __ } from '~/locale';
@@ -21,6 +22,7 @@ export default {
     nothingToVerify: s__('Geo|Nothing to verify'),
   },
   components: {
+    GlLink,
     GeoNodeProgressBar,
   },
   props: {
@@ -59,7 +61,12 @@ export default {
     >
       <slot :item="item" :translations="$options.i18n">
         <span class="gl-mr-5">{{ item.dataTypeTitle }}</span>
-        <span class="gl-mr-5">{{ item.component }}</span>
+        <div class="gl-mr-5" data-testid="replicable-component">
+          <gl-link v-if="item.replicationView" :href="item.replicationView">{{
+            item.component
+          }}</gl-link>
+          <span v-else>{{ item.component }}</span>
+        </div>
         <div class="gl-mr-5" data-testid="sync-status">
           <geo-node-progress-bar
             v-if="item.syncValues"

ee/app/helpers/ee/geo_helper.rb

@@ -187,7 +187,7 @@ def replicable_types
           title_plural: _('Repositories'),
           name: 'repository',
           name_plural: 'repositories',
-          secondary_view: true
+          custom_replication_url: 'admin/geo/replication/projects'
         },
         {
           data_type: 'repository',
@@ -195,7 +195,8 @@ def replicable_types
           title: _('Wiki'),
           title_plural: _('Wikis'),
           name: 'wiki',
-          name_plural: 'wikis'
+          name_plural: 'wikis',
+          no_replication_view: true
         },
         {
           data_type: 'blob',
@@ -203,7 +204,8 @@ def replicable_types
           title: _('Container repository'),
           title_plural: _('Container repositories'),
           name: 'container_repository',
-          name_plural: 'container_repositories'
+          name_plural: 'container_repositories',
+          no_replication_view: true
         },
         {
           data_type: 'repository',
@@ -212,7 +214,7 @@ def replicable_types
           title_plural: _('Design repositories'),
           name: 'design_repository',
           name_plural: 'design_repositories',
-          secondary_view: true
+          custom_replication_url: 'admin/geo/replication/designs'
         }
       ]
@@ -225,8 +227,7 @@ def replicable_types
             title: replicator_class.replicable_title,
             title_plural: replicator_class.replicable_title_plural,
             name: replicator_class.replicable_name,
-            name_plural: replicator_class.replicable_name_plural,
-            secondary_view: true
+            name_plural: replicator_class.replicable_name_plural
           }
         )
       end

ee/spec/frontend/geo_nodes/components/details/secondary_node/geo_node_replication_details_responsive_spec.js

+import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import GeoNodeProgressBar from 'ee/geo_nodes/components/details/geo_node_progress_bar.vue';
 import GeoNodeReplicationDetailsResponsive from 'ee/geo_nodes/components/details/secondary_node/geo_node_replication_details_responsive.vue';
@@ -35,6 +36,8 @@ describe('GeoNodeReplicationDetailsResponsive', () => {
     extendedWrapper(findReplicationDetailsItems().at(0)).findByTestId('sync-status');
   const findFirstReplicationDetailsItemVerifStatus = () =>
     extendedWrapper(findReplicationDetailsItems().at(0)).findByTestId('verification-status');
+  const findReplicableComponent = () => wrapper.findByTestId('replicable-component');
+  const findReplicableComponentLink = () => findReplicableComponent().findComponent(GlLink);
   describe('template', () => {
     describe('with default slots', () => {
@@ -113,6 +116,46 @@ describe('GeoNodeReplicationDetailsResponsive', () => {
           }
         });
       });
+
+      describe('component links', () => {
+        describe('with replicationView', () => {
+          const MOCK_REPLICATION_ITEM = {
+            component: 'Test Component',
+            replicationView: 'https://test.domain/path',
+          };
+
+          beforeEach(() => {
+            createComponent({ replicationItems: [MOCK_REPLICATION_ITEM] });
+          });
+
+          it('renders replicable component title', () => {
+            expect(findReplicableComponent().text()).toBe(MOCK_REPLICATION_ITEM.component);
+          });
+
+          it(`renders GlLink to secondary replication view`, () => {
+            expect(findReplicableComponentLink().exists()).toBe(true);
+            expect(findReplicableComponentLink().attributes('href')).toBe(
+              MOCK_REPLICATION_ITEM.replicationView,
+            );
+          });
+        });
+
+        describe('without replicationView', () => {
+          const MOCK_REPLICATION_ITEM = { component: 'Test Component', replicationView: null };
+
+          beforeEach(() => {
+            createComponent({ replicationItems: [MOCK_REPLICATION_ITEM] });
+          });
+
+          it('renders replicable component title', () => {
+            expect(findReplicableComponent().text()).toBe(MOCK_REPLICATION_ITEM.component);
+          });
+
+          it(`does not render GlLink to secondary replication view`, () => {
+            expect(findReplicableComponentLink().exists()).toBe(false);
+          });
+        });
+      });
     });
     describe('with custom title slot', () => {

ee/spec/frontend/geo_nodes/components/details/secondary_node/geo_node_replication_details_spec.js

-import { GlButton, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -52,6 +52,8 @@ describe('GeoNodeReplicationDetails', () => {
     wrapper.findByTestId('geo-replication-details-desktop');
   const findCollapseButton = () => wrapper.findComponent(GlButton);
   const findNAVerificationHelpLink = () => wrapper.findByTestId('naVerificationHelpLink');
+  const findReplicableComponent = () => wrapper.findByTestId('replicable-component');
+  const findReplicableComponentLink = () => findReplicableComponent().findComponent(GlLink);
   describe('template', () => {
     describe('when un-collapsed', () => {
@@ -123,6 +125,9 @@ describe('GeoNodeReplicationDetails', () => {
     const mockExpectedNoValues = {
       dataTypeTitle: MOCK_REPLICABLE_TYPES[0].dataTypeTitle,
       component: MOCK_REPLICABLE_TYPES[0].titlePlural,
+      replicationView: new URL(
+        `${MOCK_SECONDARY_NODE.url}${MOCK_REPLICABLE_TYPES[0].customReplicationUrl}`,
+      ),
       syncValues: null,
       verificationValues: null,
     };
@@ -130,6 +135,9 @@ describe('GeoNodeReplicationDetails', () => {
     const mockExpectedOnlySync = {
       dataTypeTitle: MOCK_REPLICABLE_TYPES[0].dataTypeTitle,
       component: MOCK_REPLICABLE_TYPES[0].titlePlural,
+      replicationView: new URL(
+        `${MOCK_SECONDARY_NODE.url}${MOCK_REPLICABLE_TYPES[0].customReplicationUrl}`,
+      ),
       syncValues: { total: 100, success: 0 },
       verificationValues: null,
     };
@@ -137,6 +145,9 @@ describe('GeoNodeReplicationDetails', () => {
     const mockExpectedOnlyVerif = {
       dataTypeTitle: MOCK_REPLICABLE_TYPES[0].dataTypeTitle,
       component: MOCK_REPLICABLE_TYPES[0].titlePlural,
+      replicationView: new URL(
+        `${MOCK_SECONDARY_NODE.url}${MOCK_REPLICABLE_TYPES[0].customReplicationUrl}`,
+      ),
       syncValues: null,
       verificationValues: { total: 50, success: 50 },
     };
@@ -144,6 +155,9 @@ describe('GeoNodeReplicationDetails', () => {
     const mockExpectedBothTypes = {
       dataTypeTitle: MOCK_REPLICABLE_TYPES[0].dataTypeTitle,
       component: MOCK_REPLICABLE_TYPES[0].titlePlural,
+      replicationView: new URL(
+        `${MOCK_SECONDARY_NODE.url}${MOCK_REPLICABLE_TYPES[0].customReplicationUrl}`,
+      ),
       syncValues: { total: 100, success: 0 },
       verificationValues: { total: 50, success: 50 },
     };
@@ -183,5 +197,40 @@ describe('GeoNodeReplicationDetails', () => {
         });
       },
     );
+
+    describe('component links', () => {
+      describe('with noReplicationView', () => {
+        beforeEach(() => {
+          createComponent({ replicableTypes: [MOCK_REPLICABLE_TYPES[1]] });
+        });
+
+        it('renders replicable component title', () => {
+          expect(findReplicableComponent().text()).toBe(MOCK_REPLICABLE_TYPES[1].titlePlural);
+        });
+
+        it(`does not render GlLink to secondary replication view`, () => {
+          expect(findReplicableComponentLink().exists()).toBe(false);
+        });
+      });
+    });
+
+    describe.each`
+      description                       | replicableType              | expectedUrl
+      ${'with customReplicationUrl'}    | ${MOCK_REPLICABLE_TYPES[2]} | ${`${MOCK_SECONDARY_NODE.url}${MOCK_REPLICABLE_TYPES[2].customReplicationUrl}`}
+      ${'without customReplicationUrl'} | ${MOCK_REPLICABLE_TYPES[3]} | ${`${MOCK_SECONDARY_NODE.url}admin/geo/sites/${MOCK_SECONDARY_NODE.id}/replication/${MOCK_REPLICABLE_TYPES[3].namePlural}`}
+    `('component links $description', ({ replicableType, expectedUrl }) => {
+      beforeEach(() => {
+        createComponent({ replicableTypes: [replicableType] });
+      });
+
+      it('renders replicable component title', () => {
+        expect(findReplicableComponent().text()).toBe(replicableType.titlePlural);
+      });
+
+      it(`renders GlLink to secondary replication view`, () => {
+        expect(findReplicableComponentLink().exists()).toBe(true);
+        expect(findReplicableComponentLink().attributes('href')).toBe(expectedUrl);
+      });
+    });
   });
 });

ee/spec/frontend/geo_nodes/mock_data.js

@@ -15,7 +15,7 @@ export const MOCK_REPLICABLE_TYPES = [
     titlePlural: 'Repositories',
     name: 'repository',
     namePlural: 'repositories',
-    secondaryView: true,
+    customReplicationUrl: 'admin/geo/replication/projects',
   },
   {
     dataType: 'repository',
@@ -24,6 +24,7 @@ export const MOCK_REPLICABLE_TYPES = [
     titlePlural: 'Wikis',
     name: 'wiki',
     namePlural: 'wikis',
+    noReplicationView: true,
   },
   {
     dataType: 'repository',
@@ -32,7 +33,7 @@ export const MOCK_REPLICABLE_TYPES = [
     titlePlural: 'Designs',
     name: 'design',
     namePlural: 'designs',
-    secondaryView: true,
+    customReplicationUrl: 'admin/geo/replication/designs',
   },
   {
     dataType: 'blob',