Make Geo Node Url more Prominent

Currently the Geo Node url is not a link.
Yet it is a valid route.

This changes it from a span to a gllink.

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_main.vue

 <script>
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import GeoNodeHealthStatus from '../geo_node_health_status.vue';
@@ -6,6 +7,8 @@ import GeoNodeActions from '../geo_node_actions.vue';
 
 export default {
   components: {
+    GlLink,
+    GlIcon,
     GeoNodeHealthStatus,
     GeoNodeActions,
   },
@@ -70,9 +73,14 @@ export default {
   <div class="row-fluid clearfix py-3 primary-section">
     <div class="col-md-12">
       <div class="d-flex geo-node-actions-container">
-        <div class="d-flex flex-column">
-          <span class="text-secondary-700 js-node-url-title">{{ s__('GeoNodes|Node URL') }}</span>
-          <span class="mt-1 font-weight-bold js-node-url-value">{{ node.url }}</span>
+        <div data-testid="nodeUrl" class="d-flex flex-column">
+          <span class="gl-text-gray-700">{{ s__('GeoNodes|Node URL') }}</span>
+          <gl-link
+            class="gl-display-flex gl-align-items-center gl-text-black-normal gl-font-weight-bold gl-text-decoration-underline gl-mt-1"
+            :href="node.url"
+            target="_blank"
+            >{{ node.url }} <gl-icon name="external-link" class="gl-ml-1"
+          /></gl-link>
         </div>
         <geo-node-actions
           class="flex-grow-1"
@@ -83,20 +91,15 @@ export default {
           :node-missing-oauth="nodeDetails.missingOAuthApplication"
         />
       </div>
-      <div class="d-flex flex-column mt-2">
-        <span class="text-secondary-700 js-node-version-title">{{
-          s__('GeoNodes|GitLab version')
-        }}</span>
-        <span
-          :class="{ 'text-danger-500': versionMismatch }"
-          class="mt-1 font-weight-bold js-node-version-value"
-        >
+      <div data-testid="nodeVersion" class="d-flex flex-column mt-2">
+        <span class="gl-text-gray-700">{{ s__('GeoNodes|GitLab version') }}</span>
+        <span :class="{ 'gl-text-red-500': versionMismatch }" class="gl-mt-1 gl-font-weight-bold">
           {{ nodeVersion }}
         </span>
       </div>
       <div v-if="selectiveSyncronization" class="d-flex flex-column mt-2">
         <span class="text-secondary-700">{{ s__('GeoNodes|Selective synchronization') }}</span>
-        <span data-testid="selectiveSync" class="mt-1 font-weight-bold">
+        <span data-testid="selectiveSync" class="gl-mt-1 gl-font-weight-bold">
           {{ selectiveSyncronization }}
         </span>
       </div>

ee/changelogs/unreleased/214467-make-node-url-prominent.yml

+---
+title: Add link to Node URL
+merge_request: 32471
+author:
+type: changed

ee/spec/frontend/geo_nodes/components/node_detail_sections/__snapshots__/node_details_section_main_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NodeDetailsSectionMain template node url section renders section correctly 1`] = `
+<div
+  class="d-flex flex-column"
+  data-testid="nodeUrl"
+>
+  <span
+    class="gl-text-gray-700"
+  >
+    Node URL
+  </span>
+   
+  <a
+    class="gl-link gl-display-flex gl-align-items-center gl-text-black-normal gl-font-weight-bold gl-text-decoration-underline gl-mt-1"
+    href="http://127.0.0.1:3001/"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    http://127.0.0.1:3001/ 
+    <svg
+      class="gl-ml-1 gl-icon s16"
+    >
+      <use
+        href="#external-link"
+      />
+    </svg>
+  </a>
+</div>
+`;
+
+exports[`NodeDetailsSectionMain template node version section renders section correctly 1`] = `
+<div
+  class="d-flex flex-column mt-2"
+  data-testid="nodeVersion"
+>
+  <span
+    class="gl-text-gray-700"
+  >
+    GitLab version
+  </span>
+   
+  <span
+    class="gl-mt-1 gl-font-weight-bold"
+  >
+    
+        10.4.0-pre (b93c51849b)
+      
+  </span>
+</div>
+`;

ee/spec/frontend/geo_nodes/components/node_detail_sections/node_details_section_main_spec.js

@@ -123,19 +123,43 @@ describe('NodeDetailsSectionMain', () => {
       expect(vm.$el.classList.contains('primary-section')).toBe(true);
     });
 
-    it('renders node url element', () => {
-      expect(vm.$el.querySelector('.js-node-url-title').innerText.trim()).toBe('Node URL');
-      expect(vm.$el.querySelector('.js-node-url-value').innerText.trim()).toBe(vm.node.url);
+    describe('node url section', () => {
+      const findNodeUrlContainer = () => vm.$el.querySelector('[data-testid="nodeUrl"]');
+      const findNodeUrlContainerTitle = () =>
+        findNodeUrlContainer().querySelector('span:first-child');
+      const findNodeUrl = () => findNodeUrlContainer().querySelector('a');
+
+      it('renders section correctly', () => {
+        expect(findNodeUrlContainer()).toMatchSnapshot();
       });
 
-    it('renders node version element', () => {
-      expect(vm.$el.querySelector('.js-node-version-title').innerText.trim()).toBe(
-        'GitLab version',
-      );
+      it('renders node url title correctly', () => {
+        expect(findNodeUrlContainerTitle().innerText.trim()).toBe('Node URL');
+      });
 
-      expect(vm.$el.querySelector('.js-node-version-value').innerText.trim()).toBe(
-        MOCK_VERSION_TEXT,
-      );
+      it('renders node url element correctly', () => {
+        expect(findNodeUrl().innerText.trim()).toContain(mockNode.url);
+        expect(findNodeUrl().href).toBe(mockNode.url);
+      });
+    });
+
+    describe('node version section', () => {
+      const findNodeVersionContainer = () => vm.$el.querySelector('[data-testid="nodeVersion"]');
+      const findNodeVersionContainerTitle = () =>
+        findNodeVersionContainer().querySelector('span:first-child');
+      const findNodeVersion = () => findNodeVersionContainer().querySelector('span:last-child');
+
+      it('renders section correctly', () => {
+        expect(findNodeVersionContainer()).toMatchSnapshot();
+      });
+
+      it('renders node version title correctly', () => {
+        expect(findNodeVersionContainerTitle().innerText.trim()).toBe('GitLab version');
+      });
+
+      it('renders node version element correctly', () => {
+        expect(findNodeVersion().innerText.trim()).toContain(MOCK_VERSION_TEXT);
+      });
     });
   });
 });