Geo Node Status 2.0 - GitLab UI Cleanup

This change cleans up some usages
of GitLab UI elements.

This change also removes
the need for `mount` in specs.

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

 <script>
-import { GlLink, GlButton, GlLoadingIcon, GlModal } from '@gitlab/ui';
+import { GlLink, GlButton, GlLoadingIcon, GlModal, GlSprintf } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
 import { s__, __ } from '~/locale';
 import { GEO_INFO_URL, REMOVE_NODE_MODAL_ID } from '../constants';
@@ -11,9 +11,8 @@ export default {
   i18n: {
     geoSites: s__('Geo|Geo sites'),
     helpText: s__(
-      'Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere.',
+      'Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere. %{linkStart}Learn more%{linkEnd}',
     ),
-    learnMore: __('Learn more'),
     addSite: s__('Geo|Add site'),
     modalTitle: s__('Geo|Remove secondary node'),
     modalBody: s__(
@@ -27,6 +26,7 @@ export default {
     GeoNodes,
     GeoNodesEmptyState,
     GlModal,
+    GlSprintf,
   },
   props: {
     newNodeUrl: {
@@ -71,10 +71,13 @@ export default {
       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>{{ $options.i18n.helpText }}</span>
-        <gl-link class="gl-ml-2" :href="$options.GEO_INFO_URL" target="_blank">{{
-          $options.i18n.learnMore
-        }}</gl-link>
+        <gl-sprintf :message="$options.i18n.helpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.GEO_INFO_URL" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
       </div>
       <gl-button
         v-if="!noNodes"

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

@@ -81,7 +81,6 @@ export default {
       </gl-button>
       <gl-icon
         ref="replicationDetails"
-        tabindex="0"
         name="question"
         class="gl-text-blue-500 gl-cursor-pointer gl-ml-2"
       />
@@ -90,7 +89,7 @@ export default {
         placement="top"
         triggers="hover focus"
       >
-        <p>
+        <p class="gl-font-base">
           {{ $options.i18n.popoverText }}
         </p>
         <gl-link :href="$options.GEO_REPLICATION_TYPES_URL" target="_blank">{{

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

@@ -63,14 +63,9 @@ export default {
     <span class="gl-text-gray-500" data-testid="last-updated-main-text">{{
       syncTimeAgo.mainText
     }}</span>
-    <gl-icon
-      ref="lastUpdated"
-      tabindex="0"
-      name="question"
-      class="gl-text-blue-500 gl-cursor-pointer gl-ml-2"
-    />
+    <gl-icon ref="lastUpdated" name="question" class="gl-text-blue-500 gl-cursor-pointer gl-ml-2" />
     <gl-popover :target="() => $refs.lastUpdated.$el" placement="top">
-      <p>{{ syncTimeAgo.popoverText }}</p>
+      <p class="gl-font-base">{{ syncTimeAgo.popoverText }}</p>
       <gl-link :href="syncHelp.link" target="_blank">{{ syncHelp.text }}</gl-link>
     </gl-popover>
   </div>

ee/spec/frontend/geo_nodes_beta/components/app_spec.js

-import { GlLink, GlButton, GlLoadingIcon, GlModal } from '@gitlab/ui';
+import { GlLink, GlButton, GlLoadingIcon, GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -38,6 +38,7 @@ describe('GeoNodesBetaApp', () => {
         ...defaultProps,
         ...props,
       },
+      stubs: { GlSprintf },
     });
   };
 

ee/spec/frontend/geo_nodes_beta/components/details/primary_node/geo_node_verification_info_spec.js

 import { GlCard, GlIcon, GlPopover, GlLink } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import GeoNodeProgressBar from 'ee/geo_nodes_beta/components/details/geo_node_progress_bar.vue';
@@ -25,12 +25,13 @@ describe('GeoNodeVerificationInfo', () => {
     });
 
     wrapper = extendedWrapper(
-      mount(GeoNodeVerificationInfo, {
+      shallowMount(GeoNodeVerificationInfo, {
         store,
         propsData: {
           ...defaultProps,
           ...props,
         },
+        stubs: { GlCard },
       }),
     );
   };

locale/gitlab.pot

@@ -14778,7 +14778,7 @@ msgstr ""
 msgid "Geo|Waiting for scheduler"
 msgstr ""
 
-msgid "Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere."
+msgid "Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere. %{linkStart}Learn more%{linkEnd}"
 msgstr ""
 
 msgid "Geo|You are on a secondary, %{b_open}read-only%{b_close} Geo node."