Scope Geo replication details progressbar popup target by site ID

In order to prevent conflicts when there are multiple Geo sites,
this adds the node ID to the scoped target for the popover
to the replication details progressbar.

Changelog: fixed
EE: true

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

@@ -113,11 +113,13 @@ export default {
     <div v-if="!collapsed">
       <geo-node-replication-details-responsive
         class="gl-display-none gl-md-display-block"
+        :node-id="node.id"
         :replication-items="replicationItems"
         data-testid="geo-replication-details-desktop"
       />
       <geo-node-replication-details-responsive
         class="gl-md-display-none!"
+        :node-id="node.id"
         :replication-items="replicationItems"
         data-testid="geo-replication-details-mobile"
       >

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

@@ -29,6 +29,11 @@ export default {
     GeoNodeProgressBar,
   },
   props: {
+    nodeId: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
     replicationItems: {
       type: Array,
       required: false,
@@ -85,7 +90,7 @@ export default {
           <geo-node-progress-bar
             v-if="item.syncValues"
             :title="sprintf($options.i18n.progressBarSyncTitle, { component: item.component })"
-            :target="`sync-progress-${item.component}`"
+            :target="`sync-progress-${nodeId}-${item.component}`"
             :values="item.syncValues"
           />
           <span v-else class="gl-text-gray-400 gl-font-sm">{{ $options.i18n.nA }}</span>
@@ -94,7 +99,7 @@ export default {
           <geo-node-progress-bar
             v-if="item.verificationValues"
             :title="sprintf($options.i18n.progressBarVerifTitle, { component: item.component })"
-            :target="`verification-progress-${item.component}`"
+            :target="`verification-progress-${nodeId}-${item.component}`"
             :values="item.verificationValues"
             :success-label="$options.i18n.verified"
             :unavailable-label="$options.i18n.nothingToVerify"

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

@@ -10,6 +10,7 @@ describe('GeoNodeReplicationDetailsResponsive', () => {
 
   const defaultProps = {
     replicationItems: [],
+    nodeId: 0,
   };
 
   const createComponent = (props, slots) => {
@@ -92,7 +93,7 @@ describe('GeoNodeReplicationDetailsResponsive', () => {
         ${'with all data'}             | ${[{ dataTypeTitle: 'Test Title', component: 'Test Component', syncValues: { total: 100, success: 0 }, verificationValues: { total: 50, success: 50 } }]} | ${true}            | ${true}
       `('$description', ({ replicationItems, renderSyncProgress, renderVerifProgress }) => {
         beforeEach(() => {
-          createComponent({ replicationItems });
+          createComponent({ replicationItems, nodeId: 42 });
         });
 
         it('renders sync progress correctly', () => {
@@ -102,6 +103,14 @@ describe('GeoNodeReplicationDetailsResponsive', () => {
           expect(
             extendedWrapper(findFirstReplicationDetailsItemSyncStatus()).findByText('N/A').exists(),
           ).toBe(!renderSyncProgress);
+
+          if (renderSyncProgress) {
+            expect(
+              findFirstReplicationDetailsItemSyncStatus()
+                .findComponent(GeoNodeProgressBar)
+                .props('target'),
+            ).toBe('sync-progress-42-Test Component');
+          }
         });
 
         it('renders verification progress correctly', () => {
@@ -113,6 +122,14 @@ describe('GeoNodeReplicationDetailsResponsive', () => {
               .findByText('N/A')
               .exists(),
           ).toBe(!renderVerifProgress);
+
+          if (renderVerifProgress) {
+            expect(
+              findFirstReplicationDetailsItemVerifStatus()
+                .findComponent(GeoNodeProgressBar)
+                .props('target'),
+            ).toBe('verification-progress-42-Test Component');
+          }
         });
       });
     });

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

@@ -194,12 +194,14 @@ describe('GeoNodeReplicationDetails', () => {
           expect(findGeoMobileReplicationDetails().props('replicationItems')).toStrictEqual(
             expectedProps,
           );
+          expect(findGeoMobileReplicationDetails().props('nodeId')).toBe(MOCK_NODES[1].id);
         });
 
         it('passes the correct props to the desktop replication details', () => {
           expect(findGeoDesktopReplicationDetails().props('replicationItems')).toStrictEqual(
             expectedProps,
           );
+          expect(findGeoDesktopReplicationDetails().props('nodeId')).toBe(MOCK_NODES[1].id);
         });
 
         it(`does ${hasNAVerificationHelpText ? '' : 'not '}show N/A verification help text`, () => {