Merge branch '215630-refactor-geo-popover' into 'master'

Geo Node Status 2.0 - Refactor Popovers

See merge request gitlab-org/gitlab!62243

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

 <script>
-import { GlPopover, GlSprintf } from '@gitlab/ui';
+import { GlPopover } from '@gitlab/ui';
 import { toNumber } from 'lodash';
 import { __, s__ } from '~/locale';
 import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
@@ -7,16 +7,10 @@ import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue
 export default {
   name: 'GeoNodeSyncProgress',
   i18n: {
-    unavailableLabel: s__('Geo|Nothing to synchronize'),
-    popoverTitle: s__('Geo|Number of %{title}'),
     total: __('Total'),
-    synced: s__('Geo|Synced'),
-    queued: s__('Geo|Queued'),
-    failed: __('Failed'),
   },
   components: {
     GlPopover,
-    GlSprintf,
     StackedProgressBar,
   },
   props: {
@@ -33,6 +27,26 @@ export default {
       required: false,
       default: null,
     },
+    successLabel: {
+      type: String,
+      required: false,
+      default: s__('Geo|Synced'),
+    },
+    queuedLabel: {
+      type: String,
+      required: false,
+      default: s__('Geo|Queued'),
+    },
+    failedLabel: {
+      type: String,
+      required: false,
+      default: __('Failed'),
+    },
+    unavailableLabel: {
+      type: String,
+      required: false,
+      default: s__('Geo|Nothing to synchronize'),
+    },
   },
   computed: {
     queuedCount() {
@@ -60,7 +74,7 @@ export default {
       :id="popoverTarget"
       tabindex="0"
       hide-tooltips
-      :unavailable-label="$options.i18n.unavailableLabel"
+      :unavailable-label="unavailableLabel"
       :success-count="successCount"
       :failure-count="failureCount"
       :total-count="totalCount"
@@ -70,14 +84,8 @@ export default {
       placement="right"
       triggers="hover focus"
       :css-classes="['w-100']"
+      :title="title"
     >
-      <template #title>
-        <gl-sprintf :message="$options.i18n.popoverTitle">
-          <template #title>
-            {{ title }}
-          </template>
-        </gl-sprintf>
-      </template>
       <section>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-transparent gl-w-5 gl-h-2"></div>
@@ -86,17 +94,17 @@ export default {
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-green-500 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ $options.i18n.synced }}</span>
+          <span class="gl-flex-fill-1 gl-mr-4">{{ successLabel }}</span>
           <span class="gl-font-weight-bold">{{ successCount.toLocaleString() }}</span>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-gray-200 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ $options.i18n.queued }}</span>
+          <span class="gl-flex-fill-1 gl-mr-4">{{ queuedLabel }}</span>
           <span class="gl-font-weight-bold">{{ queuedCount.toLocaleString() }}</span>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-red-500 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ $options.i18n.failed }}</span>
+          <span class="gl-flex-fill-1 gl-mr-4">{{ failedLabel }}</span>
           <span class="gl-font-weight-bold">{{ failureCount.toLocaleString() }}</span>
         </div>
       </section>

ee/app/assets/javascripts/geo_nodes_beta/components/details/primary_node/geo_node_primary_other_info.vue

@@ -11,6 +11,9 @@ export default {
     replicationSlotWAL: s__('Geo|Replication slot WAL'),
     replicationSlots: s__('Geo|Replication slots'),
     unknown: __('Unknown'),
+    used: __('Used'),
+    unused: __('Unused'),
+    noAvailableSlots: s__('Geo|No available replication slots'),
   },
   components: {
     GlCard,
@@ -52,6 +55,9 @@ export default {
         class="gl-mt-3"
         :title="replicationSlots.title"
         :values="replicationSlots.values"
+        :success-label="$options.i18n.used"
+        :queued-label="$options.i18n.unused"
+        :unavailable-label="$options.i18n.noAvailableSlots"
       />
     </div>
     <div class="gl-display-flex gl-flex-direction-column gl-mb-5">

ee/app/assets/javascripts/geo_nodes_beta/components/details/primary_node/geo_node_verification_info.vue

@@ -14,6 +14,8 @@ export default {
     ),
     learnMore: __('Learn more'),
     progressBarTitle: s__('Geo|%{title} checksum progress'),
+    checksummed: s__('Geo|Checksummed'),
+    nothingToChecksum: s__('Geo|Nothing to checksum'),
   },
   components: {
     GlCard,
@@ -64,6 +66,8 @@ export default {
         class="gl-mt-3"
         :title="sprintf($options.i18n.progressBarTitle, { title: bar.title })"
         :values="bar.values"
+        :success-label="$options.i18n.checksummed"
+        :unavailable-label="$options.i18n.nothingToChecksum"
       />
     </div>
   </gl-card>

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

@@ -19,6 +19,8 @@ export default {
     nA: __('N/A'),
     progressBarSyncTitle: s__('Geo|%{component} synced'),
     progressBarVerifTitle: s__('Geo|%{component} verified'),
+    verified: s__('Geo|Verified'),
+    nothingToVerify: s__('Geo|Nothing to verify'),
   },
   components: {
     GlIcon,
@@ -94,6 +96,8 @@ export default {
             :title="sprintf($options.i18n.progressBarVerifTitle, { component: item.component })"
             :target="`verification-progress-${item.component}`"
             :values="item.verificationValues"
+            :success-label="$options.i18n.verified"
+            :unavailable-label="$options.i18n.nothingToVerify"
           />
           <span v-else class="gl-text-gray-400 gl-font-sm">{{ $options.i18n.nA }}</span>
         </div>

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

@@ -38,6 +38,8 @@ export default {
         :title="sprintf(translations.progressBarVerifTitle, { component: item.component })"
         :target="`mobile-verification-progress-${item.component}`"
         :values="item.verificationValues"
+        :success-label="translations.verified"
+        :unavailable-label="translations.nothingToVerify"
       />
       <span v-else class="gl-text-gray-400 gl-font-sm">{{ translations.nA }}</span>
     </div>

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

@@ -66,6 +66,24 @@ describe('GeoNodeProgressBar', () => {
       });
     });
 
+    describe('when status counts labels are over written', () => {
+      const expectedUiCounts = ['Total 0', 'label1 0', 'label2 0', 'label3 0'];
+      const values = { success: 0, failed: 0, total: 0 };
+
+      beforeEach(() => {
+        createComponent({
+          successLabel: 'label1',
+          queuedLabel: 'label2',
+          failedLabel: 'label3',
+          values,
+        });
+      });
+
+      it('uses the custom labels instead of the default', () => {
+        expect(findCounts().wrappers.map((w) => w.text())).toStrictEqual(expectedUiCounts);
+      });
+    });
+
     describe('popoverTarget', () => {
       describe('when target prop is null', () => {
         beforeEach(() => {

locale/gitlab.pot

@@ -14726,6 +14726,9 @@ msgstr ""
 msgid "Geo|Allowed Geo IP should contain valid IP addresses"
 msgstr ""
 
+msgid "Geo|Checksummed"
+msgstr ""
+
 msgid "Geo|Connection timeout can't be blank"
 msgstr ""
 
@@ -14828,6 +14831,9 @@ msgstr ""
 msgid "Geo|Next sync scheduled at"
 msgstr ""
 
+msgid "Geo|No available replication slots"
+msgstr ""
+
 msgid "Geo|Node name can't be blank"
 msgstr ""
 
@@ -14840,10 +14846,13 @@ msgstr ""
 msgid "Geo|Not synced yet"
 msgstr ""
 
+msgid "Geo|Nothing to checksum"
+msgstr ""
+
 msgid "Geo|Nothing to synchronize"
 msgstr ""
 
-msgid "Geo|Number of %{title}"
+msgid "Geo|Nothing to verify"
 msgstr ""
 
 msgid "Geo|Offline"
@@ -15035,6 +15044,9 @@ msgstr ""
 msgid "Geo|Verification status"
 msgstr ""
 
+msgid "Geo|Verified"
+msgstr ""
+
 msgid "Geo|Waiting for scheduler"
 msgstr ""
 
@@ -34915,6 +34927,9 @@ msgstr ""
 msgid "Until"
 msgstr ""
 
+msgid "Unused"
+msgstr ""
+
 msgid "Unused, previous indices: %{index_names} will be deleted after %{time} automatically."
 msgstr ""
 
@@ -35398,6 +35413,9 @@ msgstr ""
 msgid "Use your smart card to authenticate with the LDAP server."
 msgstr ""
 
+msgid "Used"
+msgstr ""
+
 msgid "Used by members to sign in to your group in GitLab"
 msgstr ""