Geo Settings Form - UI

This MR is an attempt at MVC.

This MR adds the form elements to
the new setting form.

Following this MR we will add
the API hook up and validations.

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

 <script>
+import GeoSettingsForm from './geo_settings_form.vue';
+
 export default {
   name: 'GeoSettingsApp',
+  components: {
+    GeoSettingsForm,
+  },
 };
 </script>
 
 <template>
   <article data-testid="geoSettingsContainer">
     <h3 class="page-title">{{ __('Geo Settings') }}</h3>
+    <p>
+      {{
+        __(
+          'Set the timeout in seconds to send a secondary node status to the primary and IPs allowed for the secondary nodes.',
+        )
+      }}
+    </p>
+    <geo-settings-form />
   </article>
 </template>

ee/app/assets/javascripts/geo_settings/components/geo_settings_form.vue

+<script>
+import { GlFormGroup, GlFormInput, GlButton } from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { DEFAULT_TIMEOUT, DEFAULT_ALLOWED_IP } from '../constants';
+
+export default {
+  name: 'GeoSettingsForm',
+  components: {
+    GlFormGroup,
+    GlFormInput,
+    GlButton,
+  },
+  data() {
+    return {
+      timeout: DEFAULT_TIMEOUT,
+      allowedIp: DEFAULT_ALLOWED_IP,
+    };
+  },
+  methods: {
+    redirect() {
+      visitUrl('/admin/geo/nodes');
+    },
+  },
+};
+</script>
+
+<template>
+  <form>
+    <gl-form-group
+      :label="__('Connection timeout')"
+      label-for="settings-timeout-field"
+      :description="__('Time in seconds')"
+    >
+      <gl-form-input id="settings-timeout-field" v-model="timeout" class="col-sm-2" type="number" />
+    </gl-form-group>
+    <gl-form-group
+      :label="__('Allowed Geo IP')"
+      label-for="settings-allowed-ip-field"
+      :description="__('Comma-separated, e.g. \'1.1.1.1, 2.2.2.0/24\'')"
+    >
+      <gl-form-input
+        id="settings-allowed-ip-field"
+        v-model="allowedIp"
+        class="col-sm-6"
+        type="text"
+      />
+    </gl-form-group>
+    <section
+      class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-200"
+    >
+      <gl-button
+        data-testid="settingsSaveButton"
+        data-qa-selector="add_node_button"
+        variant="success"
+        >{{ __('Save changes') }}</gl-button
+      >
+      <gl-button data-testid="settingsCancelButton" class="gl-ml-auto" @click="redirect">{{
+        __('Cancel')
+      }}</gl-button>
+    </section>
+  </form>
+</template>

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

+export const DEFAULT_TIMEOUT = 10;
+export const DEFAULT_ALLOWED_IP = '0.0.0.0/0, ::/0';

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

 import { shallowMount } from '@vue/test-utils';
 import GeoSettingsApp from 'ee/geo_settings/components/app.vue';
+import GeoSettingsForm from 'ee/geo_settings/components/geo_settings_form.vue';
 
 describe('GeoSettingsApp', () => {
   let wrapper;
@@ -13,18 +14,23 @@ describe('GeoSettingsApp', () => {
   });
 
   const findGeoSettingsContainer = () => wrapper.find('[data-testid="geoSettingsContainer"]');
+  const findGeoSettingsForm = () => wrapper.find(GeoSettingsForm);
 
-  describe('template', () => {
+  describe('renders', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('renders the settings container', () => {
+    it('the settings container', () => {
       expect(findGeoSettingsContainer().exists()).toBe(true);
     });
 
-    it('`Geo Settings` header text', () => {
+    it('header text', () => {
       expect(findGeoSettingsContainer().text()).toContain('Geo Settings');
     });
+
+    it('Geo Settings Form', () => {
+      expect(findGeoSettingsForm().exists()).toBe(true);
+    });
   });
 });

ee/spec/frontend/geo_settings/components/geo_settings_form_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { visitUrl } from '~/lib/utils/url_utility';
+import GeoSettingsForm from 'ee/geo_settings/components/geo_settings_form.vue';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  visitUrl: jest.fn().mockName('visitUrlMock'),
+}));
+
+describe('GeoSettingsForm', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(GeoSettingsForm);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGeoSettingsTimeoutField = () => wrapper.find('#settings-timeout-field');
+  const findGeoSettingsAllowedIpField = () => wrapper.find('#settings-allowed-ip-field');
+  const findSettingsCancelButton = () => wrapper.find('[data-testid="settingsCancelButton"]');
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders Geo Node Form Name Field', () => {
+      expect(findGeoSettingsTimeoutField().exists()).toBe(true);
+    });
+
+    it('renders Geo Node Form Url Field', () => {
+      expect(findGeoSettingsAllowedIpField().exists()).toBe(true);
+    });
+  });
+
+  describe('methods', () => {
+    describe('redirect', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('calls visitUrl when cancel is clicked', () => {
+        findSettingsCancelButton().vm.$emit('click');
+        expect(visitUrl).toHaveBeenCalledWith('/admin/geo/nodes');
+      });
+    });
+  });
+});

locale/gitlab.pot

@@ -2140,6 +2140,9 @@ msgstr ""
 msgid "Allow users to request access (if visibility is public or internal)"
 msgstr ""
 
+msgid "Allowed Geo IP"
+msgstr ""
+
 msgid "Allowed email domain restriction only permitted for top-level groups"
 msgstr ""
 
@@ -5644,6 +5647,9 @@ msgstr ""
 msgid "Coming soon"
 msgstr ""
 
+msgid "Comma-separated, e.g. '1.1.1.1, 2.2.2.0/24'"
+msgstr ""
+
 msgid "Command"
 msgstr ""
 
@@ -5952,6 +5958,9 @@ msgstr ""
 msgid "Connection timed out"
 msgstr ""
 
+msgid "Connection timeout"
+msgstr ""
+
 msgid "Contact sales to upgrade"
 msgstr ""
 
@@ -20304,6 +20313,9 @@ msgstr ""
 msgid "Set the milestone to %{milestone_reference}."
 msgstr ""
 
+msgid "Set the timeout in seconds to send a secondary node status to the primary and IPs allowed for the secondary nodes."
+msgstr ""
+
 msgid "Set time estimate"
 msgstr ""
 
@@ -23266,6 +23278,9 @@ msgstr ""
 msgid "Time from last commit to merge"
 msgstr ""
 
+msgid "Time in seconds"
+msgstr ""
+
 msgid "Time in seconds GitLab will wait for a response from the external service. When the service does not respond in time, access will be denied."
 msgstr ""