Geo Node Status 2.0 - UI Init

This change hooks up the Vuex store
to the UI and adds the top level elements.

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

 <script>
+import { GlLink, GlButton } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import { GEO_INFO_URL } from '../constants';
+import GeoNodes from './geo_nodes.vue';
+
 export default {
   name: 'GeoNodesBetaApp',
+  components: {
+    GlLink,
+    GlButton,
+    GeoNodes,
+  },
+  props: {
+    newNodeUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['nodes']),
+  },
+  created() {
+    this.fetchNodes();
+  },
+  methods: {
+    ...mapActions(['fetchNodes']),
+  },
+  GEO_INFO_URL,
 };
 </script>
 
 <template>
   <section>
-    <h2>{{ __('Geo Nodes Beta') }}</h2>
+    <h3>{{ s__('Geo|Geo sites') }}</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>
+        <gl-link class="gl-ml-2" :href="$options.GEO_INFO_URL" target="_blank">{{
+          __('Learn more')
+        }}</gl-link>
+      </div>
+      <gl-button
+        class="gl-w-full gl-md-w-auto gl-ml-auto gl-mr-5 gl-mt-5 gl-md-mt-0"
+        variant="confirm"
+        :href="newNodeUrl"
+        target="_blank"
+        >{{ s__('Geo|Add site') }}
+      </gl-button>
+    </div>
+    <geo-nodes v-for="node in nodes" :key="node.id" :node="node" />
   </section>
 </template>

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

+<script>
+import { s__ } from '~/locale';
+
+export default {
+  name: 'GeoNodes',
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    siteTitle() {
+      return this.node.primary ? s__('Geo|Primary site') : s__('Geo|Secondary site');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h4 class="gl-font-lg gl-my-5">{{ siteTitle }}</h4>
+  </div>
+</template>

ee/app/assets/javascripts/geo_nodes_beta/constants.js

+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export const GEO_INFO_URL = helpPagePath('administration/geo/index.md');

ee/app/assets/javascripts/geo_nodes_beta/index.js

@@ -13,7 +13,7 @@ export const initGeoNodesBeta = () => {
     return false;
   }
 
-  const { primaryVersion, primaryRevision } = el.dataset;
+  const { primaryVersion, primaryRevision, newNodeUrl } = el.dataset;
   let { replicableTypes } = el.dataset;
 
   replicableTypes = convertObjectPropsToCamelCase(JSON.parse(replicableTypes), { deep: true });
@@ -22,7 +22,11 @@ export const initGeoNodesBeta = () => {
     el,
     store: createStore({ primaryVersion, primaryRevision, replicableTypes }),
     render(createElement) {
-      return createElement(GeoNodesBetaApp);
+      return createElement(GeoNodesBetaApp, {
+        props: {
+          newNodeUrl,
+        },
+      });
     },
   });
 };

ee/app/helpers/ee/geo_helper.rb

@@ -32,7 +32,8 @@ module EE
         node_actions_allowed: ::Gitlab::Database.db_read_write?.to_s,
         node_edit_allowed: ::Gitlab::Geo.license_allows?.to_s,
         geo_troubleshooting_help_path: help_page_path('administration/geo/replication/troubleshooting.md'),
-        replicable_types: replicable_types.to_json
+        replicable_types: replicable_types.to_json,
+        new_node_url: new_admin_geo_node_path
       }
     end
 

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

-import { shallowMount } from '@vue/test-utils';
+import { GlLink, GlButton } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
 import GeoNodesBetaApp from 'ee/geo_nodes_beta/components/app.vue';
+import GeoNodes from 'ee/geo_nodes_beta/components/geo_nodes.vue';
+import { GEO_INFO_URL } from 'ee/geo_nodes_beta/constants';
+import {
+  MOCK_PRIMARY_VERSION,
+  MOCK_REPLICABLE_TYPES,
+  MOCK_NODES,
+  MOCK_NEW_NODE_URL,
+} from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe('GeoNodesBetaApp', () => {
   let wrapper;
 
-  const createComponent = () => {
-    wrapper = shallowMount(GeoNodesBetaApp);
+  const actionSpies = {
+    fetchNodes: jest.fn(),
+  };
+
+  const defaultProps = {
+    newNodeUrl: MOCK_NEW_NODE_URL,
+  };
+
+  const createComponent = (initialState, props) => {
+    const store = new Vuex.Store({
+      state: {
+        primaryVersion: MOCK_PRIMARY_VERSION.version,
+        primaryRevision: MOCK_PRIMARY_VERSION.revision,
+        replicableTypes: MOCK_REPLICABLE_TYPES,
+        ...initialState,
+      },
+      actions: actionSpies,
+    });
+
+    wrapper = shallowMount(GeoNodesBetaApp, {
+      localVue,
+      store,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
   };
 
   afterEach(() => {
@@ -14,14 +52,47 @@ describe('GeoNodesBetaApp', () => {
   });
 
   const findGeoNodesBetaContainer = () => wrapper.find('section');
+  const findGeoLearnMoreLink = () => wrapper.find(GlLink);
+  const findGeoAddSiteButton = () => wrapper.find(GlButton);
+  const findGeoNodes = () => wrapper.findAll(GeoNodes);
 
   describe('template', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('renders the container always', () => {
+    it('renders the Geo Nodes Beta Container always', () => {
       expect(findGeoNodesBetaContainer().exists()).toBe(true);
     });
+
+    it('renders the Learn more link correctly', () => {
+      expect(findGeoLearnMoreLink().exists()).toBe(true);
+      expect(findGeoLearnMoreLink().attributes('href')).toBe(GEO_INFO_URL);
+    });
+
+    it('renders the Add site button correctly', () => {
+      expect(findGeoAddSiteButton().exists()).toBe(true);
+      expect(findGeoAddSiteButton().attributes('href')).toBe(MOCK_NEW_NODE_URL);
+    });
+  });
+
+  describe('Geo Nodes', () => {
+    beforeEach(() => {
+      createComponent({ nodes: MOCK_NODES });
+    });
+
+    it('renders a Geo Node component for each node', () => {
+      expect(findGeoNodes()).toHaveLength(MOCK_NODES.length);
+    });
+  });
+
+  describe('onCreate', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('calls fetchNodes', () => {
+      expect(actionSpies.fetchNodes).toHaveBeenCalledTimes(1);
+    });
   });
 });

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

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import GeoNodes from 'ee/geo_nodes_beta/components/geo_nodes.vue';
+import { MOCK_PRIMARY_VERSION, MOCK_REPLICABLE_TYPES, MOCK_NODES } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GeoNodes', () => {
+  let wrapper;
+
+  const defaultProps = {
+    node: MOCK_NODES[0],
+  };
+
+  const createComponent = (initialState, props) => {
+    const store = new Vuex.Store({
+      state: {
+        primaryVersion: MOCK_PRIMARY_VERSION.version,
+        primaryRevision: MOCK_PRIMARY_VERSION.revision,
+        replicableTypes: MOCK_REPLICABLE_TYPES,
+        ...initialState,
+      },
+    });
+
+    wrapper = shallowMount(GeoNodes, {
+      localVue,
+      store,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findGeoNodesContainer = () => wrapper.find('div');
+  const findGeoSiteTitle = () => wrapper.find('h4');
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the Geo Nodes Container always', () => {
+      expect(findGeoNodesContainer().exists()).toBe(true);
+    });
+  });
+
+  describe.each`
+    node             | siteTitle
+    ${MOCK_NODES[0]} | ${'Primary site'}
+    ${MOCK_NODES[1]} | ${'Secondary site'}
+  `(`Site Title`, ({ node, siteTitle }) => {
+    beforeEach(() => {
+      createComponent(null, { node });
+    });
+
+    it(`is ${siteTitle} when primary is ${node.primary}`, () => {
+      expect(findGeoSiteTitle().exists()).toBe(true);
+      expect(findGeoSiteTitle().text()).toBe(siteTitle);
+    });
+  });
+});

ee/spec/frontend/geo_nodes_beta/mock_data.js

+export const MOCK_NEW_NODE_URL = 'http://localhost:3000/admin/geo/nodes/new';
+
 export const MOCK_PRIMARY_VERSION = {
   version: '10.4.0-pre',
   revision: 'b93c51849b',

locale/gitlab.pot

@@ -13350,9 +13350,6 @@ msgstr ""
 msgid "Geo Nodes"
 msgstr ""
 
-msgid "Geo Nodes Beta"
-msgstr ""
-
 msgid "Geo Nodes|Cannot remove a primary node if there is a secondary node"
 msgstr ""
 
@@ -13515,6 +13512,9 @@ msgstr ""
 msgid "Geo|%{name} is scheduled for re-verify"
 msgstr ""
 
+msgid "Geo|Add site"
+msgstr ""
+
 msgid "Geo|Adjust your filters/search criteria above. If you believe this may be an error, please refer to the %{linkStart}Geo Troubleshooting%{linkEnd} documentation for more information."
 msgstr ""
 
@@ -13563,6 +13563,9 @@ msgstr ""
 msgid "Geo|Geo Status"
 msgstr ""
 
+msgid "Geo|Geo sites"
+msgstr ""
+
 msgid "Geo|Go to the primary site"
 msgstr ""
 
@@ -13614,6 +13617,9 @@ msgstr ""
 msgid "Geo|Primary node"
 msgstr ""
 
+msgid "Geo|Primary site"
+msgstr ""
+
 msgid "Geo|Project"
 msgstr ""
 
@@ -13659,6 +13665,9 @@ msgstr ""
 msgid "Geo|Secondary node"
 msgstr ""
 
+msgid "Geo|Secondary site"
+msgstr ""
+
 msgid "Geo|Status"
 msgstr ""
 
@@ -13710,6 +13719,9 @@ msgstr ""
 msgid "Geo|Waiting for scheduler"
 msgstr ""
 
+msgid "Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere."
+msgstr ""
+
 msgid "Geo|You are on a secondary, %{b_open}read-only%{b_close} Geo node."
 msgstr ""