Merge branch '209262-geo-verification-popovers' into 'master'

Geo - Update Verification Popover

Closes #209262

See merge request gitlab-org/gitlab!27624

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

@@ -74,11 +74,6 @@ export default {
       required: false,
       default: false,
     },
-    helpInfo: {
-      type: [Boolean, Object],
-      required: false,
-      default: false,
-    },
     featureDisabled: {
       type: Boolean,
       required: false,
@@ -101,26 +96,6 @@ export default {
     isCustomTypeSync() {
       return this.customType === CUSTOM_TYPE.SYNC;
     },
-    popoverConfig() {
-      return {
-        html: true,
-        trigger: 'click',
-        placement: 'top',
-        template: `
-            <div class="popover geo-node-detail-popover" role="tooltip">
-              <div class="arrow"></div>
-              <p class="popover-header"></p>
-              <div class="popover-body"></div>
-            </div>
-          `,
-        title: this.helpInfo.title,
-        content: `
-            <a href="${this.helpInfo.url}">
-              ${this.helpInfo.urlText}
-            </a>
-          `,
-      };
-    },
   },
 };
 </script>
@@ -129,13 +104,6 @@ export default {
   <div v-if="!featureDisabled" class="mt-2 ml-2 node-detail-item">
     <div class="d-flex align-items-center text-secondary-700">
       <span class="node-detail-title">{{ itemTitle }}</span>
-      <icon
-        v-if="hasHelpInfo"
-        v-popover="popoverConfig"
-        :size="12"
-        class="text-primary-600 ml-1 node-detail-help-text"
-        name="question"
-      />
     </div>
     <div v-if="isValueTypePlain" :class="cssClass" class="mt-1 node-detail-value">
       {{ itemValue }}

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification.vue

 <script>
+import { GlPopover, GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
+
 import { s__ } from '~/locale';
 
 import { VALUE_TYPE, HELP_INFO_URL } from '../../constants';
@@ -10,6 +12,10 @@ import SectionRevealButton from './section_reveal_button.vue';
 
 export default {
   components: {
+    GlIcon,
+    GlPopover,
+    GlLink,
+    GlSprintf,
     GeoNodeDetailItem,
     SectionRevealButton,
   },
@@ -37,6 +43,9 @@ export default {
         ? this.getPrimaryNodeDetailItems()
         : this.getSecondaryNodeDetailItems();
     },
+    nodeText() {
+      return this.nodeTypePrimary ? s__('GeoNodes|secondary nodes') : s__('GeoNodes|primary node');
+    },
   },
   methods: {
     getPrimaryNodeDetailItems() {
@@ -48,13 +57,6 @@ export default {
           successLabel: s__('GeoNodes|Checksummed'),
           neutraLabel: s__('GeoNodes|Not checksummed'),
           failureLabel: s__('GeoNodes|Failed'),
-          helpInfo: {
-            title: s__(
-              'GeoNodes|Repositories checksummed for verification with their counterparts on Secondary nodes',
-            ),
-            url: HELP_INFO_URL,
-            urlText: s__('GeoNodes|Learn more about Repository checksum progress'),
-          },
         },
         {
           itemTitle: s__('GeoNodes|Wiki checksum progress'),
@@ -63,13 +65,6 @@ export default {
           successLabel: s__('GeoNodes|Checksummed'),
           neutraLabel: s__('GeoNodes|Not checksummed'),
           failureLabel: s__('GeoNodes|Failed'),
-          helpInfo: {
-            title: s__(
-              'GeoNodes|Wikis checksummed for verification with their counterparts on Secondary nodes',
-            ),
-            url: HELP_INFO_URL,
-            urlText: s__('GeoNodes|Learn more about Wiki checksum progress'),
-          },
         },
       ];
     },
@@ -82,13 +77,6 @@ export default {
           successLabel: s__('GeoNodes|Verified'),
           neutraLabel: s__('GeoNodes|Unverified'),
           failureLabel: s__('GeoNodes|Failed'),
-          helpInfo: {
-            title: s__(
-              'GeoNodes|Repositories verified with their counterparts on the Primary node',
-            ),
-            url: HELP_INFO_URL,
-            urlText: s__('GeoNodes|Learn more about Repository verification'),
-          },
         },
         {
           itemTitle: s__('GeoNodes|Wiki verification progress'),
@@ -97,11 +85,6 @@ export default {
           successLabel: s__('GeoNodes|Verified'),
           neutraLabel: s__('GeoNodes|Unverified'),
           failureLabel: s__('GeoNodes|Failed'),
-          helpInfo: {
-            title: s__('GeoNodes|Wikis verified with their counterparts on the Primary node'),
-            url: HELP_INFO_URL,
-            urlText: s__('GeoNodes|Learn more about Wiki verification'),
-          },
         },
       ];
     },
@@ -109,16 +92,39 @@ export default {
       this.showSectionItems = toggleState;
     },
   },
+  HELP_INFO_URL,
 };
 </script>
 
 <template>
   <div class="row-fluid clearfix py-3 border-top border-color-default verification-section">
-    <div class="col-md-12">
+    <div class="col-md-12 d-flex align-items-center">
       <section-reveal-button
         :button-title="__('Verification information')"
         @toggleButton="handleSectionToggle"
       />
+      <gl-icon
+        ref="verificationInfo"
+        tabindex="0"
+        name="question"
+        class="text-primary-600 ml-1 cursor-pointer"
+      />
+      <gl-popover :target="() => $refs.verificationInfo.$el" placement="top" triggers="hover focus">
+        <p>
+          <gl-sprintf
+            :message="
+              s__('GeoNodes|Replicated data is verified with the %{nodeText} using checksums')
+            "
+          >
+            <template #nodeText>
+              {{ nodeText }}
+            </template>
+          </gl-sprintf>
+        </p>
+        <gl-link class="mt-3" :href="$options.HELP_INFO_URL" target="_blank">{{
+          __('More information')
+        }}</gl-link>
+      </gl-popover>
     </div>
     <template v-if="showSectionItems">
       <div class="col-md-6 ml-2 mt-2 section-items-container">
@@ -135,7 +141,6 @@ export default {
           :neutral-label="nodeDetailItem.neutraLabel"
           :failure-label="nodeDetailItem.failureLabel"
           :custom-type="nodeDetailItem.customType"
-          :help-info="nodeDetailItem.helpInfo"
         />
       </div>
     </template>

ee/changelogs/unreleased/209262-geo-verification-popovers.yml

+---
+title: Create more intuitive Verification Popover for Geo Node Syncs
+merge_request: 27624
+author:
+type: changed

ee/spec/frontend/geo_nodes/components/geo_node_detail_item_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import Icon from '~/vue_shared/components/icon.vue';
 import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
 import GeoNodeDetailItemComponent from 'ee/geo_nodes/components/geo_node_detail_item.vue';
 import GeoNodeSyncSettings from 'ee/geo_nodes/components/geo_node_sync_settings.vue';
@@ -55,24 +54,6 @@ describe('GeoNodeDetailItemComponent', () => {
       );
     });
 
-    describe('with help info', () => {
-      beforeEach(() => {
-        createComponent({
-          helpInfo: {
-            title: 'Foo title tooltip',
-            url: 'https://docs.gitlab.com',
-            urlText: 'Help',
-          },
-        });
-      });
-
-      it('renders item title help info icon', () => {
-        const helpTextIconEl = wrapper.find(Icon);
-        expect(helpTextIconEl.exists()).toBeTruthy();
-        expect(helpTextIconEl.attributes('name')).toBe('question');
-      });
-    });
-
     describe('when graph item value', () => {
       beforeEach(() => {
         createComponent({

ee/spec/frontend/geo_nodes/components/node_detail_sections/node_details_section_verification_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlPopover, GlSprintf } from '@gitlab/ui';
 
 import NodeDetailsSectionVerificationComponent from 'ee/geo_nodes/components/node_detail_sections/node_details_section_verification.vue';
 import SectionRevealButton from 'ee/geo_nodes/components/node_detail_sections/section_reveal_button.vue';
@@ -8,14 +9,17 @@ import { mockNodeDetails } from '../../mock_data';
 describe('NodeDetailsSectionVerification', () => {
   let wrapper;
 
-  const propsData = {
+  const defaultProps = {
     nodeDetails: mockNodeDetails,
     nodeTypePrimary: false,
   };
 
-  const createComponent = () => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(NodeDetailsSectionVerificationComponent, {
-      propsData,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
     });
   };
 
@@ -27,6 +31,8 @@ describe('NodeDetailsSectionVerification', () => {
     wrapper.destroy();
   });
 
+  const findGlPopover = () => wrapper.find(GlPopover);
+
   describe('data', () => {
     it('returns default data props', () => {
       expect(wrapper.vm.showSectionItems).toBe(false);
@@ -81,6 +87,30 @@ describe('NodeDetailsSectionVerification', () => {
     });
   });
 
+  describe('computed', () => {
+    describe('nodeText', () => {
+      describe('on Primary node', () => {
+        beforeEach(() => {
+          createComponent({ nodeTypePrimary: true });
+        });
+
+        it('returns text about secondary nodes', () => {
+          expect(wrapper.vm.nodeText).toBe('secondary nodes');
+        });
+      });
+
+      describe('on Secondary node', () => {
+        beforeEach(() => {
+          createComponent();
+        });
+
+        it('returns text about secondary nodes', () => {
+          expect(wrapper.vm.nodeText).toBe('primary node');
+        });
+      });
+    });
+  });
+
   describe('template', () => {
     it('renders component container element', () => {
       expect(wrapper.vm.$el.classList.contains('verification-section')).toBe(true);
@@ -99,5 +129,19 @@ describe('NodeDetailsSectionVerification', () => {
         expect(wrapper.vm.$el.querySelector('.section-items-container')).not.toBeNull();
       });
     });
+
+    describe('GlPopover', () => {
+      it('renders always', () => {
+        expect(findGlPopover().exists()).toBeTruthy();
+      });
+
+      it('contains text about Replicated data', () => {
+        expect(
+          findGlPopover()
+            .find(GlSprintf)
+            .attributes('message'),
+        ).toContain('Replicated data is verified');
+      });
+    });
   });
 });

locale/gitlab.pot

@@ -9166,18 +9166,6 @@ msgstr ""
 msgid "GeoNodes|Last event ID seen from primary"
 msgstr ""
 
-msgid "GeoNodes|Learn more about Repository checksum progress"
-msgstr ""
-
-msgid "GeoNodes|Learn more about Repository verification"
-msgstr ""
-
-msgid "GeoNodes|Learn more about Wiki checksum progress"
-msgstr ""
-
-msgid "GeoNodes|Learn more about Wiki verification"
-msgstr ""
-
 msgid "GeoNodes|Loading nodes"
 msgstr ""
 
@@ -9208,6 +9196,9 @@ msgstr ""
 msgid "GeoNodes|Removing a Geo secondary node stops the synchronization to that node. Are you sure?"
 msgstr ""
 
+msgid "GeoNodes|Replicated data is verified with the %{nodeText} using checksums"
+msgstr ""
+
 msgid "GeoNodes|Replication slot WAL"
 msgstr ""
 
@@ -9217,12 +9208,6 @@ msgstr ""
 msgid "GeoNodes|Repositories"
 msgstr ""
 
-msgid "GeoNodes|Repositories checksummed for verification with their counterparts on Secondary nodes"
-msgstr ""
-
-msgid "GeoNodes|Repositories verified with their counterparts on the Primary node"
-msgstr ""
-
 msgid "GeoNodes|Repository checksum progress"
 msgstr ""
 
@@ -9274,16 +9259,16 @@ msgstr ""
 msgid "GeoNodes|Wikis"
 msgstr ""
 
-msgid "GeoNodes|Wikis checksummed for verification with their counterparts on Secondary nodes"
+msgid "GeoNodes|With %{geo} you can install a special read-only and replicated instance anywhere. Before you add nodes, follow the %{instructions} in the exact order they appear."
 msgstr ""
 
-msgid "GeoNodes|Wikis verified with their counterparts on the Primary node"
+msgid "GeoNodes|You have configured Geo nodes using an insecure HTTP connection. We recommend the use of HTTPS."
 msgstr ""
 
-msgid "GeoNodes|With %{geo} you can install a special read-only and replicated instance anywhere. Before you add nodes, follow the %{instructions} in the exact order they appear."
+msgid "GeoNodes|primary node"
 msgstr ""
 
-msgid "GeoNodes|You have configured Geo nodes using an insecure HTTP connection. We recommend the use of HTTPS."
+msgid "GeoNodes|secondary nodes"
 msgstr ""
 
 msgid "Geo|%{name} is scheduled for forced re-download"