Add helpText support to item title

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

 <script>
   import { s__ } from '~/locale';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import Icon from '~/vue_shared/components/icon.vue';
   import stackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
 
   import { VALUE_TYPE, CUSTOM_TYPE } from '../constants';
@@ -9,10 +11,14 @@
 
   export default {
     components: {
+      Icon,
       stackedProgressBar,
       geoNodeSyncSettings,
       geoNodeEventStatus,
     },
+    directives: {
+      tooltip,
+    },
     props: {
       itemTitle: {
         type: String,
@@ -56,8 +62,16 @@
         required: false,
         default: false,
       },
+      helpText: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
     computed: {
+      hasHelpText() {
+        return this.helpText !== '';
+      },
       isValueTypePlain() {
         return this.itemValueType === VALUE_TYPE.PLAIN;
       },
@@ -77,7 +91,17 @@
 <template>
   <div class="node-detail-item prepend-top-15 prepend-left-10">
     <div class="node-detail-title">
-      {{ itemTitle }}
+      <span>
+        {{ itemTitle }}
+      </span>
+      <icon
+        v-tooltip
+        v-if="hasHelpText"
+        css-classes="node-detail-help-text prepend-left-5"
+        name="question"
+        :size="12"
+        :title="helpText"
+      />
     </div>
     <div
       v-if="isValueTypePlain"

spec/javascripts/geo_nodes/components/geo_node_detail_item_spec.js

@@ -8,7 +8,7 @@ import { rawMockNodeDetails } from '../mock_data';
 const createComponent = (config) => {
   const Component = Vue.extend(geoNodeDetailItemComponent);
   const defaultConfig = Object.assign({
-    itemTitle: 'GitLab version:',
+    itemTitle: 'GitLab version',
     cssClass: 'node-version',
     itemValue: '10.4.0-pre',
     successLabel: 'Synced',
@@ -26,7 +26,7 @@ describe('GeoNodeDetailItemComponent', () => {
       const vm = createComponent();
       expect(vm.$el.classList.contains('node-detail-item')).toBeTruthy();
       expect(vm.$el.querySelectorAll('.node-detail-title').length).not.toBe(0);
-      expect(vm.$el.querySelector('.node-detail-title').innerText.trim()).toBe('GitLab version:');
+      expect(vm.$el.querySelector('.node-detail-title').innerText.trim()).toBe('GitLab version');
       vm.$destroy();
     });
 
@@ -37,6 +37,16 @@ describe('GeoNodeDetailItemComponent', () => {
       vm.$destroy();
     });
 
+    it('renders item title help text icon and tooltip', () => {
+      const helpText = 'Foo title tooltip';
+      const vm = createComponent({ helpText });
+      const helpTextEl = vm.$el.querySelector('.node-detail-help-text');
+
+      expect(helpTextEl).not.toBeNull();
+      expect(helpTextEl.dataset.originalTitle).toBe(helpText);
+      vm.$destroy();
+    });
+
     it('renders graph item value', () => {
       const vm = createComponent({
         itemValueType: VALUE_TYPE.GRAPH,