Geo 2.0 Regression - Broken Popovers

Two bugs:

1. Wrong title was causing the
popovers to get confused and show
the wrong data.

2. Mobile/Desktop used the same
naming convention causing popovers
to not work on mobile size
screens.

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

@@ -28,6 +28,11 @@ export default {
       type: Object,
       required: true,
     },
+    target: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     queuedCount() {
@@ -42,6 +47,9 @@ export default {
     successCount() {
       return toNumber(this.values.success) || 0;
     },
+    popoverTarget() {
+      return this.target ? this.target : `syncProgress-${this.title}`;
+    },
   },
 };
 </script>
@@ -49,7 +57,7 @@ export default {
 <template>
   <div>
     <stacked-progress-bar
-      :id="`syncProgress-${title}`"
+      :id="popoverTarget"
       tabindex="0"
       hide-tooltips
       :unavailable-label="$options.i18n.unavailableLabel"
@@ -58,7 +66,7 @@ export default {
       :total-count="totalCount"
     />
     <gl-popover
-      :target="`syncProgress-${title}`"
+      :target="popoverTarget"
       placement="right"
       triggers="hover focus"
       :css-classes="['w-100']"

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

@@ -17,7 +17,8 @@ export default {
     ),
     learnMore: __('Learn more'),
     nA: __('N/A'),
-    progressBarTitle: s__('Geo|%{component} synced'),
+    progressBarSyncTitle: s__('Geo|%{component} synced'),
+    progressBarVerifTitle: s__('Geo|%{component} verified'),
   },
   components: {
     GlIcon,
@@ -81,7 +82,8 @@ export default {
         <div class="gl-mr-5" data-testid="sync-status">
           <geo-node-progress-bar
             v-if="item.syncValues"
-            :title="sprintf($options.i18n.progressBarTitle, { component: item.component })"
+            :title="sprintf($options.i18n.progressBarSyncTitle, { component: item.component })"
+            :target="`sync-progress-${item.component}`"
             :values="item.syncValues"
           />
           <span v-else class="gl-text-gray-400 gl-font-sm">{{ $options.i18n.nA }}</span>
@@ -89,7 +91,8 @@ export default {
         <div data-testid="verification-status">
           <geo-node-progress-bar
             v-if="item.verificationValues"
-            :title="sprintf($options.i18n.progressBarTitle, { component: item.component })"
+            :title="sprintf($options.i18n.progressBarVerifTitle, { component: item.component })"
+            :target="`verification-progress-${item.component}`"
             :values="item.verificationValues"
           />
           <span v-else class="gl-text-gray-400 gl-font-sm">{{ $options.i18n.nA }}</span>

ee/app/assets/javascripts/geo_nodes_beta/components/details/secondary_node/geo_node_replication_status_mobile.vue

@@ -25,7 +25,8 @@ export default {
       <span class="gl-font-sm gl-mb-3">{{ translations.syncStatus }}</span>
       <geo-node-progress-bar
         v-if="item.syncValues"
-        :title="sprintf(translations.progressBarTitle, { component: item.component })"
+        :title="sprintf(translations.progressBarSyncTitle, { component: item.component })"
+        :target="`mobile-sync-progress-${item.component}`"
         :values="item.syncValues"
       />
       <span v-else class="gl-text-gray-400 gl-font-sm">{{ translations.nA }}</span>
@@ -34,7 +35,8 @@ export default {
       <span class="gl-font-sm gl-mb-3">{{ translations.verifStatus }}</span>
       <geo-node-progress-bar
         v-if="item.verificationValues"
-        :title="sprintf(translations.progressBarTitle, { component: item.component })"
+        :title="sprintf(translations.progressBarVerifTitle, { component: item.component })"
+        :target="`mobile-verification-progress-${item.component}`"
         :values="item.verificationValues"
       />
       <span v-else class="gl-text-gray-400 gl-font-sm">{{ translations.nA }}</span>

ee/spec/frontend/geo_nodes_beta/components/details/geo_node_progress_bar_spec.js

@@ -65,5 +65,33 @@ describe('GeoNodeProgressBar', () => {
         });
       });
     });
+
+    describe('popoverTarget', () => {
+      describe('when target prop is null', () => {
+        beforeEach(() => {
+          createComponent();
+        });
+
+        it(`sets the popoverTarget to syncProgress-${MOCK_PRIMARY_VERIFICATION_INFO[0].title}`, () => {
+          expect(findStackedProgressBar().attributes('id')).toBe(
+            `syncProgress-${MOCK_PRIMARY_VERIFICATION_INFO[0].title}`,
+          );
+          expect(findGlPopover().attributes('target')).toBe(
+            `syncProgress-${MOCK_PRIMARY_VERIFICATION_INFO[0].title}`,
+          );
+        });
+      });
+
+      describe('when target prop is set', () => {
+        beforeEach(() => {
+          createComponent({ target: 'test-target' });
+        });
+
+        it('sets the popoverTarget to test-target', () => {
+          expect(findStackedProgressBar().attributes('id')).toBe('test-target');
+          expect(findGlPopover().attributes('target')).toBe('test-target');
+        });
+      });
+    });
   });
 });

ee/spec/frontend/geo_nodes_beta/components/details/secondary_node/geo_node_replication_status_mobile_spec.js

@@ -14,7 +14,8 @@ describe('GeoNodeReplicationStatusMobile', () => {
     },
     translations: {
       nA: 'N/A',
-      progressBarTitle: '%{component} synced',
+      progressBarSyncTitle: '%{component} synced',
+      progressBarVerifTitle: '%{component} verified',
     },
   };
 

locale/gitlab.pot

@@ -14532,6 +14532,9 @@ msgstr ""
 msgid "Geo|%{component} synced"
 msgstr ""
 
+msgid "Geo|%{component} verified"
+msgstr ""
+
 msgid "Geo|%{eventId} (%{timeAgo})"
 msgstr ""