Geo Node Status 2.0 - i18n Cleanup

This change properly scopes the
translations for the geo_nodes_beta
scope.

This change also moves all component
translations to the $options.

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

 <script>
 import { GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
+import { s__, __ } from '~/locale';
 import { GEO_INFO_URL } from '../constants';
 import GeoNodes from './geo_nodes.vue';
 import GeoNodesEmptyState from './geo_nodes_empty_state.vue';
 
 export default {
   name: 'GeoNodesBetaApp',
+  i18n: {
+    geoSites: s__('Geo|Geo sites'),
+    helpText: s__(
+      'Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere.',
+    ),
+    learnMore: __('Learn more'),
+    addSite: s__('Geo|Add site'),
+  },
   components: {
     GlLink,
     GlButton,
@@ -42,18 +51,14 @@ export default {
 
 <template>
   <section>
-    <h3>{{ s__('Geo|Geo sites') }}</h3>
+    <h3>{{ $options.i18n.geoSites }}</h3>
     <div
       class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center gl-pb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
     >
       <div class="gl-mr-5">
-        <span>{{
-          s__(
-            'Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere.',
-          )
-        }}</span>
+        <span>{{ $options.i18n.helpText }}</span>
         <gl-link class="gl-ml-2" :href="$options.GEO_INFO_URL" target="_blank">{{
-          __('Learn more')
+          $options.i18n.learnMore
         }}</gl-link>
       </div>
       <gl-button
@@ -62,7 +67,7 @@ export default {
         variant="confirm"
         :href="newNodeUrl"
         target="_blank"
-        >{{ s__('Geo|Add site') }}
+        >{{ $options.i18n.addSite }}
       </gl-button>
     </div>
     <gl-loading-icon v-if="isLoading" size="xl" class="gl-mt-5" />

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

@@ -9,6 +9,7 @@ export default {
     url: __('URL'),
     internalUrl: s__('Geo|Internal URL'),
     gitlabVersion: __('GitLab version'),
+    unknown: __('Unknown'),
   },
   components: {
     GlLink,
@@ -24,7 +25,7 @@ export default {
     ...mapState(['primaryVersion', 'primaryRevision']),
     nodeVersion() {
       if (!this.node.version || !this.node.revision) {
-        return __('Unknown');
+        return this.$options.i18n.unknown;
       }
       return `${this.node.version} (${this.node.revision})`;
     },

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

@@ -9,6 +9,7 @@ export default {
   i18n: {
     otherInformation: __('Other information'),
     replicationSlotWAL: s__('Geo|Replication slot WAL'),
+    replicationSlots: s__('Geo|Replication slots'),
   },
   components: {
     GlCard,
@@ -26,7 +27,7 @@ export default {
     },
     replicationSlots() {
       return {
-        title: s__('Geo|Replication slots'),
+        title: this.$options.i18n.replicationSlots,
         values: {
           total: this.node.replicationSlotsCount || 0,
           success: this.node.replicationSlotsUsedCount || 0,

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

@@ -5,6 +5,10 @@ import GeoNodeHeader from './header/geo_node_header.vue';
 
 export default {
   name: 'GeoNodes',
+  i18n: {
+    primarySite: s__('Geo|Primary site'),
+    secondarySite: s__('Geo|Secondary site'),
+  },
   components: {
     GeoNodeHeader,
     GeoNodeDetails,
@@ -24,7 +28,7 @@ export default {
   },
   computed: {
     siteTitle() {
-      return this.node.primary ? s__('Geo|Primary site') : s__('Geo|Secondary site');
+      return this.node.primary ? this.$options.i18n.primarySite : this.$options.i18n.secondarySite;
     },
   },
   methods: {

ee/app/assets/javascripts/geo_nodes_beta/components/geo_nodes_empty_state.vue

 <script>
 import { GlEmptyState } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import { GEO_FEATURE_URL } from '../constants';
 
 export default {
   name: 'GeoNodesEmptyState',
+  i18n: {
+    emptyStateTitle: s__('Geo|Discover GitLab Geo'),
+    emptyStateDescription: s__(
+      'Geo|Make everyone on your team more productive regardless of their location. GitLab Geo creates read-only mirrors of your GitLab instance so you can reduce the time it takes to clone and fetch large repos.',
+    ),
+    emptyStateButton: s__('Geo|Learn more about Geo'),
+  },
   components: {
     GlEmptyState,
   },
@@ -19,14 +27,10 @@ export default {
 
 <template>
   <gl-empty-state
-    :title="s__('Geo|Discover GitLab Geo')"
+    :title="$options.i18n.emptyStateTitle"
     :svg-path="svgPath"
-    :description="
-      s__(
-        'Geo|Make everyone on your team more productive regardless of their location. GitLab Geo creates read-only mirrors of your GitLab instance so you can reduce the time it takes to clone and fetch large repos.',
-      )
-    "
+    :description="$options.i18n.emptyStateDescription"
     :primary-button-link="$options.GEO_FEATURE_URL"
-    :primary-button-text="s__('Geo|Learn more about Geo')"
+    :primary-button-text="$options.i18n.emptyStateButton"
   />
 </template>

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_header.vue

@@ -9,6 +9,8 @@ export default {
   name: 'GeoNodeHeader',
   i18n: {
     currentNodeLabel: __('Current'),
+    expand: __('Expand'),
+    collapse: __('Collapse'),
   },
   components: {
     GlButton,
@@ -33,7 +35,7 @@ export default {
       return this.collapsed ? 'chevron-right' : 'chevron-down';
     },
     chevronLabel() {
-      return this.collapsed ? __('Expand') : __('Collapse');
+      return this.collapsed ? this.$options.i18n.expand : this.$options.i18n.collapse;
     },
     statusCheckTimestamp() {
       return this.node.lastSuccessfulStatusCheckTimestamp * 1000;

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_last_updated.vue

@@ -10,6 +10,12 @@ import timeAgoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   name: 'GeoNodeLastUpdated',
+  i18n: {
+    troubleshootText: s__('Geo|Consult Geo troubleshooting information'),
+    learnMoreText: s__('Geo|Learn more about Geo node statuses'),
+    timeAgoMainText: s__('Geo|Updated %{timeAgo}'),
+    timeAgoPopoverText: s__(`Geo|Node's status was updated %{timeAgo}.`),
+  },
   components: {
     GlPopover,
     GlLink,
@@ -30,13 +36,13 @@ export default {
     syncHelp() {
       if (this.isSyncStale) {
         return {
-          text: s__('GeoNodes|Consult Geo troubleshooting information'),
+          text: this.$options.i18n.troubleshootText,
           link: GEO_TROUBLESHOOTING_URL,
         };
       }
 
       return {
-        text: s__('GeoNodes|Learn more about Geo node statuses'),
+        text: this.$options.i18n.learnMoreText,
         link: HELP_NODE_HEALTH_URL,
       };
     },
@@ -44,8 +50,8 @@ export default {
       const timeAgo = this.timeFormatted(this.statusCheckTimestamp);
 
       return {
-        mainText: sprintf(s__('GeoNodes|Updated %{timeAgo}'), { timeAgo }),
-        popoverText: sprintf(s__("GeoNodes|Node's status was updated %{timeAgo}."), { timeAgo }),
+        mainText: sprintf(this.$options.i18n.timeAgoMainText, { timeAgo }),
+        popoverText: sprintf(this.$options.i18n.timeAgoPopoverText, { timeAgo }),
       };
     },
   },

ee/app/assets/javascripts/geo_nodes_beta/store/actions.js

 import Api from 'ee/api';
 import createFlash from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import * as types from './mutation_types';
 
 export const fetchNodes = ({ commit }) => {
@@ -21,7 +21,7 @@ export const fetchNodes = ({ commit }) => {
       commit(types.RECEIVE_NODES_SUCCESS, inflatedNodes);
     })
     .catch(() => {
-      createFlash({ message: __('There was an error fetching the Geo Nodes') });
+      createFlash({ message: s__('Geo|There was an error fetching the Geo Nodes') });
       commit(types.RECEIVE_NODES_ERROR);
     });
 };

locale/gitlab.pot

@@ -14425,6 +14425,9 @@ msgstr ""
 msgid "Geo|Connection timeout should be between 1-120"
 msgstr ""
 
+msgid "Geo|Consult Geo troubleshooting information"
+msgstr ""
+
 msgid "Geo|Could not remove tracking entry for an existing project."
 msgstr ""
 
@@ -14497,6 +14500,9 @@ msgstr ""
 msgid "Geo|Learn more about Geo"
 msgstr ""
 
+msgid "Geo|Learn more about Geo node statuses"
+msgstr ""
+
 msgid "Geo|Make everyone on your team more productive regardless of their location. GitLab Geo creates read-only mirrors of your GitLab instance so you can reduce the time it takes to clone and fetch large repos."
 msgstr ""
 
@@ -14512,6 +14518,9 @@ msgstr ""
 msgid "Geo|Node name should be between 1 and 255 characters"
 msgstr ""
 
+msgid "Geo|Node's status was updated %{timeAgo}."
+msgstr ""
+
 msgid "Geo|Not synced yet"
 msgstr ""
 
@@ -14650,6 +14659,9 @@ msgstr ""
 msgid "Geo|There are no %{replicable_type} to show"
 msgstr ""
 
+msgid "Geo|There was an error fetching the Geo Nodes"
+msgstr ""
+
 msgid "Geo|Tracking database entry will be removed. Are you sure?"
 msgstr ""
 
@@ -14671,6 +14683,9 @@ msgstr ""
 msgid "Geo|Unknown state"
 msgstr ""
 
+msgid "Geo|Updated %{timeAgo}"
+msgstr ""
+
 msgid "Geo|Verification"
 msgstr ""
 
@@ -32022,9 +32037,6 @@ msgstr ""
 msgid "There was an error fetching the %{replicableType}"
 msgstr ""
 
-msgid "There was an error fetching the Geo Nodes"
-msgstr ""
-
 msgid "There was an error fetching the Geo Settings"
 msgstr ""