Merge branch '216134_02-add-geo-settings-fields' into 'master'

Geo Settings Form - UI

See merge request gitlab-org/gitlab!34404

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 ""
 
@@ -20346,6 +20355,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 ""
 
@@ -23308,6 +23320,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 ""