Geo Sites - NA Verification Help

This change adds help text
to the Replication summary
when a NA verification type
exists.

This help text also links
to the docs.

Changelog: changed
EE: true

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

 <script>
-import { GlIcon, GlPopover, GlLink, GlButton } from '@gitlab/ui';
+import { GlIcon, GlPopover, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
-import { GEO_REPLICATION_TYPES_URL } from 'ee/geo_nodes/constants';
+import {
+  GEO_REPLICATION_TYPES_URL,
+  GEO_REPLICATION_SUPPORTED_TYPES_URL,
+} from 'ee/geo_nodes/constants';
 import { s__, __ } from '~/locale';
 import GeoNodeReplicationDetailsResponsive from './geo_node_replication_details_responsive.vue';
 import GeoNodeReplicationStatusMobile from './geo_node_replication_status_mobile.vue';
@@ -12,12 +15,16 @@ export default {
     replicationDetails: s__('Geo|Replication Details'),
     popoverText: s__('Geo|Geo supports replication of many data types.'),
     learnMore: __('Learn more'),
+    naVerificationHelpText: s__(
+      'Geo|%{boldStart}N/A%{boldEnd}: Geo does not verify this component yet. See the %{linkStart}data types we plan to support%{linkEnd}.',
+    ),
   },
   components: {
     GlIcon,
     GlPopover,
     GlLink,
     GlButton,
+    GlSprintf,
     GeoNodeReplicationDetailsResponsive,
     GeoNodeReplicationStatusMobile,
   },
@@ -57,6 +64,9 @@ export default {
     chevronIcon() {
       return this.collapsed ? 'chevron-right' : 'chevron-down';
     },
+    hasNAVerificationType() {
+      return this.replicationItems.some((item) => !item.verificationValues);
+    },
   },
   methods: {
     collapseSection() {
@@ -64,6 +74,7 @@ export default {
     },
   },
   GEO_REPLICATION_TYPES_URL,
+  GEO_REPLICATION_SUPPORTED_TYPES_URL,
 };
 </script>
 
@@ -119,6 +130,21 @@ export default {
           <geo-node-replication-status-mobile :item="item" :translations="translations" />
         </template>
       </geo-node-replication-details-responsive>
+      <div v-if="hasNAVerificationType" class="gl-mt-4">
+        <gl-sprintf :message="$options.i18n.naVerificationHelpText">
+          <template #bold="{ content }">
+            <span class="gl-font-weight-bold">{{ content }} </span>
+          </template>
+          <template #link="{ content }">
+            <gl-link
+              data-testid="naVerificationHelpLink"
+              :href="$options.GEO_REPLICATION_SUPPORTED_TYPES_URL"
+              target="_blank"
+              >{{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </div>
     </div>
   </div>
 </template>

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

@@ -27,6 +27,11 @@ export const GEO_REPLICATION_TYPES_URL = helpPagePath(
   'administration/geo/replication/datatypes.html',
 );
 
+export const GEO_REPLICATION_SUPPORTED_TYPES_URL = helpPagePath(
+  'administration/geo/replication/datatypes.html',
+  { anchor: 'data-types' },
+);
+
 export const HEALTH_STATUS_UI = {
   healthy: {
     icon: 'status_success',

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

-import { GlIcon, GlPopover, GlLink, GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlPopover, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import GeoNodeReplicationDetails from 'ee/geo_nodes/components/details/secondary_node/geo_node_replication_details.vue';
 import GeoNodeReplicationDetailsResponsive from 'ee/geo_nodes/components/details/secondary_node/geo_node_replication_details_responsive.vue';
 import GeoNodeReplicationStatusMobile from 'ee/geo_nodes/components/details/secondary_node/geo_node_replication_status_mobile.vue';
-import { GEO_REPLICATION_TYPES_URL } from 'ee/geo_nodes/constants';
+import {
+  GEO_REPLICATION_TYPES_URL,
+  GEO_REPLICATION_SUPPORTED_TYPES_URL,
+} from 'ee/geo_nodes/constants';
 import { MOCK_NODES, MOCK_REPLICABLE_TYPES } from 'ee_jest/geo_nodes/mock_data';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 Vue.use(Vuex);
 
@@ -31,16 +33,14 @@ describe('GeoNodeReplicationDetails', () => {
       },
     });
 
-    wrapper = extendedWrapper(
-      shallowMount(GeoNodeReplicationDetails, {
-        store,
-        propsData: {
-          ...defaultProps,
-          ...props,
-        },
-        stubs: { GeoNodeReplicationDetailsResponsive },
-      }),
-    );
+    wrapper = shallowMountExtended(GeoNodeReplicationDetails, {
+      store,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      stubs: { GeoNodeReplicationDetailsResponsive, GlSprintf },
+    });
   };
 
   afterEach(() => {
@@ -57,6 +57,7 @@ describe('GeoNodeReplicationDetails', () => {
   const findGlPopover = () => wrapper.findComponent(GlPopover);
   const findGlPopoverLink = () => findGlPopover().findComponent(GlLink);
   const findCollapseButton = () => wrapper.findComponent(GlButton);
+  const findNAVerificationHelpLink = () => wrapper.findByTestId('naVerificationHelpLink');
 
   describe('template', () => {
     describe('always', () => {
@@ -105,6 +106,12 @@ describe('GeoNodeReplicationDetails', () => {
           'gl-md-display-block',
         ]);
       });
+
+      it('renders N/A Verification Help Text with correct link', () => {
+        expect(findNAVerificationHelpLink().attributes('href')).toBe(
+          GEO_REPLICATION_SUPPORTED_TYPES_URL,
+        );
+      });
     });
 
     describe('when collapsed', () => {
@@ -168,30 +175,37 @@ describe('GeoNodeReplicationDetails', () => {
     };
 
     describe.each`
-      description                    | mockSyncData  | mockVerificationData | expectedProps
-      ${'with no data'}              | ${[]}         | ${[]}                | ${[mockExpectedNoValues]}
-      ${'with no verification data'} | ${[mockSync]} | ${[]}                | ${[mockExpectedOnlySync]}
-      ${'with no sync data'}         | ${[]}         | ${[mockVerif]}       | ${[mockExpectedOnlyVerif]}
-      ${'with all data'}             | ${[mockSync]} | ${[mockVerif]}       | ${[mockExpectedBothTypes]}
-    `('$description', ({ mockSyncData, mockVerificationData, expectedProps }) => {
-      beforeEach(() => {
-        createComponent({ replicableTypes: [MOCK_REPLICABLE_TYPES[0]] }, null, {
-          syncInfo: () => () => mockSyncData,
-          verificationInfo: () => () => mockVerificationData,
+      description                    | mockSyncData  | mockVerificationData | expectedProps              | hasNAVerificationHelpText
+      ${'with no data'}              | ${[]}         | ${[]}                | ${[mockExpectedNoValues]}  | ${true}
+      ${'with no verification data'} | ${[mockSync]} | ${[]}                | ${[mockExpectedOnlySync]}  | ${true}
+      ${'with no sync data'}         | ${[]}         | ${[mockVerif]}       | ${[mockExpectedOnlyVerif]} | ${false}
+      ${'with all data'}             | ${[mockSync]} | ${[mockVerif]}       | ${[mockExpectedBothTypes]} | ${false}
+    `(
+      '$description',
+      ({ mockSyncData, mockVerificationData, expectedProps, hasNAVerificationHelpText }) => {
+        beforeEach(() => {
+          createComponent({ replicableTypes: [MOCK_REPLICABLE_TYPES[0]] }, null, {
+            syncInfo: () => () => mockSyncData,
+            verificationInfo: () => () => mockVerificationData,
+          });
         });
-      });
 
-      it('passes the correct props to the mobile replication details', () => {
-        expect(findGeoMobileReplicationDetails().props('replicationItems')).toStrictEqual(
-          expectedProps,
-        );
-      });
+        it('passes the correct props to the mobile replication details', () => {
+          expect(findGeoMobileReplicationDetails().props('replicationItems')).toStrictEqual(
+            expectedProps,
+          );
+        });
 
-      it('passes the correct props to the desktop replication details', () => {
-        expect(findGeoDesktopReplicationDetails().props('replicationItems')).toStrictEqual(
-          expectedProps,
-        );
-      });
-    });
+        it('passes the correct props to the desktop replication details', () => {
+          expect(findGeoDesktopReplicationDetails().props('replicationItems')).toStrictEqual(
+            expectedProps,
+          );
+        });
+
+        it(`does ${hasNAVerificationHelpText ? '' : 'not '}show N/A verification help text`, () => {
+          expect(findNAVerificationHelpLink().exists()).toBe(hasNAVerificationHelpText);
+        });
+      },
+    );
   });
 });

locale/gitlab.pot

@@ -15686,6 +15686,9 @@ msgstr ""
 msgid "Geo sites"
 msgstr ""
+msgid "Geo|%{boldStart}N/A%{boldEnd}: Geo does not verify this component yet. See the %{linkStart}data types we plan to support%{linkEnd}."
+msgstr ""
+
 msgid "Geo|%{component} synced"
 msgstr ""