Merge branch 'cat-geo-progressbar-with-multiple-targets' into 'master'

Scope Geo replication details progress bar popup target by site ID

See merge request gitlab-org/gitlab!83637

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

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