GeoNode NodeDetailsSectionMain Component

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

+<script>
+  import { __ } from '~/locale';
+
+  import GeoNodeHealthStatus from '../geo_node_health_status.vue';
+  import GeoNodeActions from '../geo_node_actions.vue';
+
+  export default {
+    components: {
+      GeoNodeHealthStatus,
+      GeoNodeActions,
+    },
+    props: {
+      node: {
+        type: Object,
+        required: true,
+      },
+      nodeDetails: {
+        type: Object,
+        required: true,
+      },
+      nodeActionsAllowed: {
+        type: Boolean,
+        required: true,
+      },
+      nodeEditAllowed: {
+        type: Boolean,
+        required: true,
+      },
+      versionMismatch: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      nodeVersion() {
+        if (this.nodeDetails.version == null &&
+            this.nodeDetails.revision == null) {
+          return __('Unknown');
+        }
+        return `${this.nodeDetails.version} (${this.nodeDetails.revision})`;
+      },
+      nodeHealthStatus() {
+        return this.nodeDetails.healthy ? this.nodeDetails.health : this.nodeDetails.healthStatus;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="row-fluid clearfix node-detail-section primary-section">
+    <div class="col-md-8">
+      <div class="detail-section-item node-version">
+        <div class="node-detail-title">
+          {{ s__('GeoNodes|GitLab version:') }}
+        </div>
+        <div
+          class="node-detail-value node-detail-value-bold"
+          :class="{ 'node-detail-value-error': versionMismatch }"
+        >
+          {{ nodeVersion }}
+        </div>
+      </div>
+      <geo-node-health-status
+        :status="nodeHealthStatus"
+      />
+    </div>
+    <geo-node-actions
+      v-if="nodeActionsAllowed"
+      :node="node"
+      :node-edit-allowed="nodeEditAllowed"
+      :node-missing-oauth="nodeDetails.missingOAuthApplication"
+    />
+  </div>
+</template>

spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_main_spec.js

+import Vue from 'vue';
+
+import NodeDetailsSectionMainComponent from 'ee/geo_nodes/components/node_detail_sections/node_details_section_main.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mockNode, mockNodeDetails } from '../../mock_data';
+
+const createComponent = ({
+  node = Object.assign({}, mockNode),
+  nodeDetails = Object.assign({}, mockNodeDetails),
+  nodeActionsAllowed = true,
+  nodeEditAllowed = true,
+  versionMismatch = false,
+}) => {
+  const Component = Vue.extend(NodeDetailsSectionMainComponent);
+
+  return mountComponent(Component, {
+    node,
+    nodeDetails,
+    nodeActionsAllowed,
+    nodeEditAllowed,
+    versionMismatch,
+  });
+};
+
+describe('NodeDetailsSectionMain', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent({});
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('nodeVersion', () => {
+      it('returns `Unknown` when `version` and `revision` are null', (done) => {
+        vm.nodeDetails.version = null;
+        vm.nodeDetails.revision = null;
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.nodeVersion).toBe('Unknown');
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('returns version string', () => {
+        expect(vm.nodeVersion).toBe('10.4.0-pre (b93c51849b)');
+      });
+    });
+
+    describe('nodeHealthStatus', () => {
+      it('returns health status string', (done) => {
+        // With default mock data
+        expect(vm.nodeHealthStatus).toBe('Healthy');
+
+        // With altered mock data for Unhealthy status
+        vm.nodeDetails.healthStatus = 'Unhealthy';
+        vm.nodeDetails.healthy = false;
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.nodeHealthStatus).toBe('Unhealthy');
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element', () => {
+      expect(vm.$el.classList.contains('primary-section')).toBe(true);
+    });
+
+    it('renders node version element', () => {
+      expect(vm.$el.querySelector('.node-detail-title').innerText.trim()).toBe('GitLab version:');
+      expect(vm.$el.querySelector('.node-detail-value').innerText.trim()).toBe('10.4.0-pre (b93c51849b)');
+    });
+  });
+});