Geo Settings Form - Validations and Save

This MR is an attempt at MVC.

This MR hooks up the form validations
and PUT actions.  With this change,
it fully replaces the existing
functionality of the Rails/HAML form.

Following this form we can delete the legacy code
and remove the need of a feature flag.

ee/app/assets/javascripts/api.js

@@ -355,4 +355,9 @@ export default {
     const url = Api.buildUrl(this.applicationSettingsPath);
     return axios.get(url);
   },
+
+  updateApplicationSettings(data) {
+    const url = Api.buildUrl(this.applicationSettingsPath);
+    return axios.put(url, data);
+  },
 };

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

 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlFormGroup, GlFormInput, GlButton } from '@gitlab/ui';
+import { mapComputed } from '~/vuex_shared/bindings';
 import { visitUrl } from '~/lib/utils/url_utility';
+import { validateTimeout, validateAllowedIp } from '../validations';
+import { FORM_VALIDATION_FIELDS } from '../constants';
 
 export default {
   name: 'GeoSettingsForm',
@@ -11,14 +14,30 @@ export default {
     GlButton,
   },
   computed: {
-    // The real connection between vuex and the component will be implemented in
-    // a later MR, this feature is anyhow behind feature flag
-    ...mapState(['timeout', 'allowedIp']),
+    ...mapState(['formErrors']),
+    ...mapGetters(['formHasError']),
+    ...mapComputed([
+      { key: 'timeout', updateFn: 'setTimeout' },
+      { key: 'allowedIp', updateFn: 'setAllowedIp' },
+    ]),
   },
   methods: {
+    ...mapActions(['updateGeoSettings', 'setFormError']),
     redirect() {
       visitUrl('/admin/geo/nodes');
     },
+    checkTimeout() {
+      this.setFormError({
+        key: FORM_VALIDATION_FIELDS.TIMEOUT,
+        error: validateTimeout(this.timeout),
+      });
+    },
+    checkAllowedIp() {
+      this.setFormError({
+        key: FORM_VALIDATION_FIELDS.ALLOWED_IP,
+        error: validateAllowedIp(this.allowedIp),
+      });
+    },
   },
 };
 </script>
@@ -29,19 +48,32 @@ export default {
       :label="__('Connection timeout')"
       label-for="settings-timeout-field"
       :description="__('Time in seconds')"
+      :state="Boolean(formErrors.timeout)"
+      :invalid-feedback="formErrors.timeout"
     >
-      <gl-form-input id="settings-timeout-field" v-model="timeout" class="col-sm-2" type="number" />
+      <gl-form-input
+        id="settings-timeout-field"
+        v-model="timeout"
+        class="col-sm-2"
+        type="number"
+        :class="{ 'is-invalid': Boolean(formErrors.timeout) }"
+        @blur="checkTimeout"
+      />
     </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\'')"
+      :state="Boolean(formErrors.allowedIp)"
+      :invalid-feedback="formErrors.allowedIp"
     >
       <gl-form-input
         id="settings-allowed-ip-field"
         v-model="allowedIp"
         class="col-sm-6"
         type="text"
+        :class="{ 'is-invalid': Boolean(formErrors.allowedIp) }"
+        @blur="checkAllowedIp"
       />
     </gl-form-group>
     <section
@@ -51,6 +83,8 @@ export default {
         data-testid="settingsSaveButton"
         data-qa-selector="add_node_button"
         variant="success"
+        :disabled="formHasError"
+        @click="updateGeoSettings"
         >{{ __('Save changes') }}</gl-button
       >
       <gl-button data-testid="settingsCancelButton" class="gl-ml-auto" @click="redirect">{{

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

 export const DEFAULT_TIMEOUT = 10;
 export const DEFAULT_ALLOWED_IP = '0.0.0.0/0, ::/0';
+
+export const FORM_VALIDATION_FIELDS = {
+  TIMEOUT: 'timeout',
+  ALLOWED_IP: 'allowedIp',
+};

ee/app/assets/javascripts/geo_settings/store/actions.js

@@ -3,7 +3,6 @@ import createFlash from '~/flash';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
 
-// eslint-disable-next-line import/prefer-default-export
 export const fetchGeoSettings = ({ commit }) => {
   commit(types.REQUEST_GEO_SETTINGS);
   Api.getApplicationSettings()
@@ -18,3 +17,33 @@ export const fetchGeoSettings = ({ commit }) => {
       commit(types.RECEIVE_GEO_SETTINGS_ERROR);
     });
 };
+
+export const updateGeoSettings = ({ commit, state }) => {
+  commit(types.REQUEST_UPDATE_GEO_SETTINGS);
+  Api.updateApplicationSettings({
+    geo_status_timeout: state.timeout,
+    geo_node_allowed_ips: state.allowedIp,
+  })
+    .then(({ data }) => {
+      commit(types.RECEIVE_UPDATE_GEO_SETTINGS_SUCCESS, {
+        timeout: data.geo_status_timeout,
+        allowedIp: data.geo_node_allowed_ips,
+      });
+    })
+    .catch(() => {
+      createFlash(__('There was an error updating the Geo Settings'));
+      commit(types.RECEIVE_UPDATE_GEO_SETTINGS_ERROR);
+    });
+};
+
+export const setTimeout = ({ commit }, { timeout }) => {
+  commit(types.SET_TIMEOUT, timeout);
+};
+
+export const setAllowedIp = ({ commit }, { allowedIp }) => {
+  commit(types.SET_ALLOWED_IP, allowedIp);
+};
+
+export const setFormError = ({ commit }, { key, error }) => {
+  commit(types.SET_FORM_ERROR, { key, error });
+};

ee/app/assets/javascripts/geo_settings/store/getters.js

+// eslint-disable-next-line import/prefer-default-export
+export const formHasError = state =>
+  Object.keys(state.formErrors)
+    .map(key => state.formErrors[key])
+    .some(val => Boolean(val));

ee/app/assets/javascripts/geo_settings/store/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 import * as actions from './actions';
+import * as getters from './getters';
 import mutations from './mutations';
 import createState from './state';
 
@@ -10,5 +11,6 @@ export default () =>
   new Vuex.Store({
     actions,
     mutations,
+    getters,
     state: createState(),
   });

ee/app/assets/javascripts/geo_settings/store/mutation_types.js

 export const REQUEST_GEO_SETTINGS = 'REQUEST_GEO_SETTINGS';
 export const RECEIVE_GEO_SETTINGS_SUCCESS = 'RECEIVE_GEO_SETTINGS_SUCCESS';
 export const RECEIVE_GEO_SETTINGS_ERROR = 'RECEIVE_GEO_SETTINGS_ERROR';
+
+export const REQUEST_UPDATE_GEO_SETTINGS = 'REQUEST_UPDATE_GEO_SETTINGS';
+export const RECEIVE_UPDATE_GEO_SETTINGS_SUCCESS = 'RECEIVE_UPDATE_GEO_SETTINGS_SUCCESS';
+export const RECEIVE_UPDATE_GEO_SETTINGS_ERROR = 'RECEIVE_UPDATE_GEO_SETTINGS_ERROR';
+
+export const SET_TIMEOUT = 'SET_TIMEOUT';
+export const SET_ALLOWED_IP = 'SET_ALLOWED_IP';
+export const SET_FORM_ERROR = 'SET_FORM_ERROR';

ee/app/assets/javascripts/geo_settings/store/mutations.js

@@ -15,4 +15,26 @@ export default {
     state.timeout = DEFAULT_TIMEOUT;
     state.allowedIp = DEFAULT_ALLOWED_IP;
   },
+  [types.REQUEST_UPDATE_GEO_SETTINGS](state) {
+    state.isLoading = true;
+  },
+  [types.RECEIVE_UPDATE_GEO_SETTINGS_SUCCESS](state, { timeout, allowedIp }) {
+    state.isLoading = false;
+    state.timeout = timeout;
+    state.allowedIp = allowedIp;
+  },
+  [types.RECEIVE_UPDATE_GEO_SETTINGS_ERROR](state) {
+    state.isLoading = false;
+    state.timeout = DEFAULT_TIMEOUT;
+    state.allowedIp = DEFAULT_ALLOWED_IP;
+  },
+  [types.SET_TIMEOUT](state, timeout) {
+    state.timeout = timeout;
+  },
+  [types.SET_ALLOWED_IP](state, allowedIp) {
+    state.allowedIp = allowedIp;
+  },
+  [types.SET_FORM_ERROR](state, { key, error }) {
+    state.formErrors[key] = error;
+  },
 };

ee/app/assets/javascripts/geo_settings/store/state.js

-import { DEFAULT_TIMEOUT, DEFAULT_ALLOWED_IP } from '../constants';
+import { DEFAULT_TIMEOUT, DEFAULT_ALLOWED_IP, FORM_VALIDATION_FIELDS } from '../constants';
 
 export default () => ({
   isLoading: false,
   timeout: DEFAULT_TIMEOUT,
   allowedIp: DEFAULT_ALLOWED_IP,
+  formErrors: Object.keys(FORM_VALIDATION_FIELDS)
+    .map(key => FORM_VALIDATION_FIELDS[key])
+    .reduce((acc, cur) => ({ ...acc, [cur]: '' }), {}),
 });

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

+import ipaddr from 'ipaddr.js';
+import { s__ } from '~/locale';
+
+const validateAddress = address => {
+  try {
+    // Checks if Valid IPv4/IPv6 (CIDR) - Throws if not
+    return Boolean(ipaddr.parseCIDR(address));
+  } catch (e) {
+    // Checks if Valid IPv4/IPv6 (Non-CIDR) - Does not Throw
+    return ipaddr.isValid(address);
+  }
+};
+
+const validateIP = data => {
+  let addresses = data.replace(/\s/g, '').split(',');
+
+  addresses = addresses.map(address => validateAddress(address));
+
+  return !addresses.some(a => !a);
+};
+
+export const validateTimeout = data => {
+  if (!data && data !== 0) {
+    return s__("Geo|Connection timeout can't be blank");
+  } else if (data && Number.isNaN(Number(data))) {
+    return s__('Geo|Connection timeout must be a number');
+  } else if (data < 1 || data > 120) {
+    return s__('Geo|Connection timeout should be between 1-120');
+  }
+
+  return '';
+};
+
+export const validateAllowedIp = data => {
+  if (!data) {
+    return s__("Geo|Allowed Geo IP can't be blank");
+  } else if (data.length > 255) {
+    return s__('Geo|Allowed Geo IP should be between 1 and 255 characters');
+  } else if (!validateIP(data)) {
+    return s__('Geo|Allowed Geo IP should contain valid IP addresses');
+  }
+
+  return '';
+};

ee/spec/frontend/api_spec.js

@@ -842,18 +842,35 @@ describe('Api', () => {
     });
   });
 
-  describe('getApplicationSettings', () => {
+  describe('Application Settings', () => {
     const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/application/settings`;
-    const apiResponse = { mock_setting: 1, mock_setting2: 2 };
+    const apiResponse = { mock_setting: 1, mock_setting2: 2, mock_setting3: 3 };
 
-    it('fetches applications settings', () => {
-      jest.spyOn(Api, 'buildUrl').mockReturnValue(expectedUrl);
-      jest.spyOn(axios, 'get');
-      mock.onGet(expectedUrl).replyOnce(200, apiResponse);
+    describe('getApplicationSettings', () => {
+      it('fetches applications settings', () => {
+        jest.spyOn(Api, 'buildUrl').mockReturnValue(expectedUrl);
+        jest.spyOn(axios, 'get');
+        mock.onGet(expectedUrl).replyOnce(200, apiResponse);
 
-      return Api.getApplicationSettings().then(({ data }) => {
-        expect(data).toEqual(apiResponse);
-        expect(axios.get).toHaveBeenCalledWith(expectedUrl);
+        return Api.getApplicationSettings().then(({ data }) => {
+          expect(data).toEqual(apiResponse);
+          expect(axios.get).toHaveBeenCalledWith(expectedUrl);
+        });
+      });
+    });
+
+    describe('updateApplicationSettings', () => {
+      const mockReq = { mock_setting: 10 };
+
+      it('updates applications settings', () => {
+        jest.spyOn(Api, 'buildUrl').mockReturnValue(expectedUrl);
+        jest.spyOn(axios, 'put');
+        mock.onPut(expectedUrl).replyOnce(201, apiResponse);
+
+        return Api.updateApplicationSettings(mockReq).then(({ data }) => {
+          expect(data).toEqual(apiResponse);
+          expect(axios.put).toHaveBeenCalledWith(expectedUrl, mockReq);
+        });
       });
     });
   });

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

 import Vuex from 'vuex';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import store from 'ee/geo_settings/store';
+import initStore from 'ee/geo_settings/store';
+import * as types from 'ee/geo_settings/store/mutation_types';
 import GeoSettingsForm from 'ee/geo_settings/components/geo_settings_form.vue';
+import { STRING_OVER_255 } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -13,9 +15,14 @@ jest.mock('~/lib/utils/url_utility', () => ({
 
 describe('GeoSettingsForm', () => {
   let wrapper;
+  let store;
+
+  const createStore = () => {
+    store = initStore();
+  };
 
   const createComponent = () => {
-    wrapper = shallowMount(GeoSettingsForm, {
+    wrapper = mount(GeoSettingsForm, {
       store,
     });
   };
@@ -26,10 +33,13 @@ describe('GeoSettingsForm', () => {
 
   const findGeoSettingsTimeoutField = () => wrapper.find('#settings-timeout-field');
   const findGeoSettingsAllowedIpField = () => wrapper.find('#settings-allowed-ip-field');
-  const findSettingsCancelButton = () => wrapper.find('[data-testid="settingsCancelButton"]');
+  const findGeoSettingsSaveButton = () => wrapper.find('[data-testid="settingsSaveButton"]');
+  const findGeoSettingsCancelButton = () => wrapper.find('[data-testid="settingsCancelButton"]');
+  const findErrorMessage = () => wrapper.find('.invalid-feedback');
 
   describe('template', () => {
     beforeEach(() => {
+      createStore();
       createComponent();
     });
 
@@ -40,17 +50,99 @@ describe('GeoSettingsForm', () => {
     it('renders Geo Node Form Url Field', () => {
       expect(findGeoSettingsAllowedIpField().exists()).toBe(true);
     });
+
+    describe('Save Button', () => {
+      describe('with errors on form', () => {
+        beforeEach(() => {
+          store.commit(types.SET_FORM_ERROR, {
+            key: 'timeout',
+            error: 'error',
+          });
+        });
+
+        it('disables button', () => {
+          expect(findGeoSettingsSaveButton().attributes('disabled')).toBeTruthy();
+        });
+      });
+
+      describe('with no errors on form', () => {
+        it('does not disable button', () => {
+          expect(findGeoSettingsSaveButton().attributes('disabled')).toBeFalsy();
+        });
+      });
+    });
   });
 
   describe('methods', () => {
-    describe('redirect', () => {
+    beforeEach(() => {
+      createStore();
+      jest.spyOn(store, 'dispatch').mockImplementation();
+      createComponent();
+    });
+
+    describe('save button', () => {
+      it('calls updateGeoSettings when clicked', () => {
+        findGeoSettingsSaveButton().vm.$emit('click');
+        expect(store.dispatch).toHaveBeenCalledWith('updateGeoSettings');
+      });
+    });
+
+    describe('cancel button', () => {
+      it('calls visitUrl when clicked', () => {
+        findGeoSettingsCancelButton().vm.$emit('click');
+        expect(visitUrl).toHaveBeenCalledWith('/admin/geo/nodes');
+      });
+    });
+  });
+
+  describe('errors', () => {
+    describe.each`
+      data    | showError | errorMessage
+      ${null} | ${true}   | ${"Connection timeout can't be blank"}
+      ${''}   | ${true}   | ${"Connection timeout can't be blank"}
+      ${0}    | ${true}   | ${'Connection timeout should be between 1-120'}
+      ${121}  | ${true}   | ${'Connection timeout should be between 1-120'}
+      ${10}   | ${false}  | ${null}
+    `(`Timeout Field`, ({ data, showError, errorMessage }) => {
       beforeEach(() => {
+        createStore();
         createComponent();
+        findGeoSettingsTimeoutField().vm.$emit('input', data);
+        findGeoSettingsTimeoutField().trigger('blur');
       });
 
-      it('calls visitUrl when cancel is clicked', () => {
-        findSettingsCancelButton().vm.$emit('click');
-        expect(visitUrl).toHaveBeenCalledWith('/admin/geo/nodes');
+      it(`${showError ? 'shows' : 'hides'} error when data is ${data}`, () => {
+        expect(findGeoSettingsTimeoutField().classes('is-invalid')).toBe(showError);
+        if (showError) {
+          expect(findErrorMessage().text()).toBe(errorMessage);
+        }
+      });
+    });
+
+    describe.each`
+      data               | showError | errorMessage
+      ${null}            | ${true}   | ${"Allowed Geo IP can't be blank"}
+      ${''}              | ${true}   | ${"Allowed Geo IP can't be blank"}
+      ${STRING_OVER_255} | ${true}   | ${'Allowed Geo IP should be between 1 and 255 characters'}
+      ${'asdf'}          | ${true}   | ${'Allowed Geo IP should contain valid IP addresses'}
+      ${'1.1.1.1, asdf'} | ${true}   | ${'Allowed Geo IP should contain valid IP addresses'}
+      ${'asdf, 1.1.1.1'} | ${true}   | ${'Allowed Geo IP should contain valid IP addresses'}
+      ${'1.1.1.1'}       | ${false}  | ${null}
+      ${'::/0'}          | ${false}  | ${null}
+      ${'1.1.1.1, ::/0'} | ${false}  | ${null}
+    `(`Allowed Geo IP Field`, ({ data, showError, errorMessage }) => {
+      beforeEach(() => {
+        createStore();
+        createComponent();
+        findGeoSettingsAllowedIpField().vm.$emit('input', data);
+        findGeoSettingsAllowedIpField().trigger('blur');
+      });
+
+      it(`${showError ? 'shows' : 'hides'} error when data is ${data}`, () => {
+        expect(findGeoSettingsAllowedIpField().classes('is-invalid')).toBe(showError);
+        if (showError) {
+          expect(findErrorMessage().text()).toBe(errorMessage);
+        }
       });
     });
   });

ee/spec/frontend/geo_settings/mock_data.js

@@ -7,3 +7,5 @@ export const MOCK_BASIC_SETTINGS_DATA = {
   timeout: MOCK_APPLICATION_SETTINGS_FETCH_RESPONSE.geo_status_timeout,
   allowedIp: MOCK_APPLICATION_SETTINGS_FETCH_RESPONSE.geo_node_allowed_ips,
 };
+
+export const STRING_OVER_255 = new Array(257).join('a');

ee/spec/frontend/geo_settings/store/actions_spec.js

+import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import flash from '~/flash';
-import Api from 'ee/api';
+import axios from '~/lib/utils/axios_utils';
 import * as actions from 'ee/geo_settings/store/actions';
 import * as types from 'ee/geo_settings/store/mutation_types';
 import state from 'ee/geo_settings/store/state';
@@ -9,45 +10,50 @@ import { MOCK_BASIC_SETTINGS_DATA, MOCK_APPLICATION_SETTINGS_FETCH_RESPONSE } fr
 jest.mock('~/flash');
 
 describe('GeoSettings Store Actions', () => {
-  describe('fetchGeoSettings', () => {
-    describe('on success', () => {
-      beforeEach(() => {
-        jest
-          .spyOn(Api, 'getApplicationSettings')
-          .mockResolvedValue({ data: MOCK_APPLICATION_SETTINGS_FETCH_RESPONSE });
-      });
+  let mock;
 
-      it('should commit the request and success actions', done => {
-        testAction(
-          actions.fetchGeoSettings,
-          {},
-          state,
-          [
-            { type: types.REQUEST_GEO_SETTINGS },
-            { type: types.RECEIVE_GEO_SETTINGS_SUCCESS, payload: MOCK_BASIC_SETTINGS_DATA },
-          ],
-          [],
-          done,
-        );
-      });
-    });
+  const noCallback = () => {};
+  const flashCallback = () => {
+    expect(flash).toHaveBeenCalledTimes(1);
+    flash.mockClear();
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
 
-    describe('on error', () => {
-      beforeEach(() => {
-        jest.spyOn(Api, 'getApplicationSettings').mockRejectedValue(new Error(500));
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe.each`
+    action                  | data                                                 | mutationName            | mutationCall                                                                   | callback
+    ${actions.setTimeout}   | ${{ timeout: MOCK_BASIC_SETTINGS_DATA.timeout }}     | ${types.SET_TIMEOUT}    | ${{ type: types.SET_TIMEOUT, payload: MOCK_BASIC_SETTINGS_DATA.timeout }}      | ${noCallback}
+    ${actions.setAllowedIp} | ${{ allowedIp: MOCK_BASIC_SETTINGS_DATA.allowedIp }} | ${types.SET_ALLOWED_IP} | ${{ type: types.SET_ALLOWED_IP, payload: MOCK_BASIC_SETTINGS_DATA.allowedIp }} | ${noCallback}
+    ${actions.setFormError} | ${{ key: 'timeout', error: 'error' }}                | ${types.SET_FORM_ERROR} | ${{ type: types.SET_FORM_ERROR, payload: { key: 'timeout', error: 'error' } }} | ${noCallback}
+  `(`non-axios calls`, ({ action, data, mutationName, mutationCall, callback }) => {
+    describe(action.name, () => {
+      it(`should commit mutation ${mutationName}`, () => {
+        return testAction(action, data, state, [mutationCall], []).then(() => callback());
       });
+    });
+  });
 
-      it('should commit the request and error actions', () => {
-        testAction(
-          actions.fetchGeoSettings,
-          {},
-          state,
-          [{ type: types.REQUEST_GEO_SETTINGS }, { type: types.RECEIVE_GEO_SETTINGS_ERROR }],
-          [],
-          () => {
-            expect(flash).toHaveBeenCalledTimes(1);
-          },
-        );
+  describe.each`
+    action                       | axiosMock                                                                        | type         | mutationCalls                                                                                                                            | callback
+    ${actions.fetchGeoSettings}  | ${{ method: 'onGet', code: 200, res: MOCK_APPLICATION_SETTINGS_FETCH_RESPONSE }} | ${'success'} | ${[{ type: types.REQUEST_GEO_SETTINGS }, { type: types.RECEIVE_GEO_SETTINGS_SUCCESS, payload: MOCK_BASIC_SETTINGS_DATA }]}               | ${noCallback}
+    ${actions.fetchGeoSettings}  | ${{ method: 'onGet', code: 500, res: null }}                                     | ${'error'}   | ${[{ type: types.REQUEST_GEO_SETTINGS }, { type: types.RECEIVE_GEO_SETTINGS_ERROR }]}                                                    | ${flashCallback}
+    ${actions.updateGeoSettings} | ${{ method: 'onPut', code: 200, res: MOCK_APPLICATION_SETTINGS_FETCH_RESPONSE }} | ${'success'} | ${[{ type: types.REQUEST_UPDATE_GEO_SETTINGS }, { type: types.RECEIVE_UPDATE_GEO_SETTINGS_SUCCESS, payload: MOCK_BASIC_SETTINGS_DATA }]} | ${noCallback}
+    ${actions.updateGeoSettings} | ${{ method: 'onPut', code: 500, res: null }}                                     | ${'error'}   | ${[{ type: types.REQUEST_UPDATE_GEO_SETTINGS }, { type: types.RECEIVE_UPDATE_GEO_SETTINGS_ERROR }]}                                      | ${flashCallback}
+  `(`axios calls`, ({ action, axiosMock, type, mutationCalls, callback }) => {
+    describe(action.name, () => {
+      describe(`on ${type}`, () => {
+        beforeEach(() => {
+          mock[axiosMock.method]().replyOnce(axiosMock.code, axiosMock.res);
+        });
+        it(`should dispatch the correct mutations`, () => {
+          return testAction(action, null, state, mutationCalls, []).then(() => callback());
+        });
       });
     });
   });

ee/spec/frontend/geo_settings/store/getters_spec.js

+import * as getters from 'ee/geo_settings/store/getters';
+import createState from 'ee/geo_settings/store/state';
+
+describe('Geo Settings Store Getters', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState();
+  });
+
+  describe('formHasError', () => {
+    it('with error returns true', () => {
+      state.formErrors.timeout = 'Error';
+
+      expect(getters.formHasError(state)).toBeTruthy();
+    });
+
+    it('without error returns false', () => {
+      state.formErrors.timeout = '';
+
+      expect(getters.formHasError(state)).toBeFalsy();
+    });
+  });
+});

ee/spec/frontend/geo_settings/store/mutations_spec.js

@@ -11,55 +11,88 @@ describe('GeoSettings Store Mutations', () => {
     state = createState();
   });
 
-  describe('REQUEST_GEO_SETTINGS', () => {
-    it('sets isLoading to true', () => {
-      mutations[types.REQUEST_GEO_SETTINGS](state);
-
-      expect(state.isLoading).toEqual(true);
+  describe.each`
+    mutation                                   | data                        | loadingBefore | loadingAfter
+    ${types.REQUEST_GEO_SETTINGS}              | ${null}                     | ${false}      | ${true}
+    ${types.RECEIVE_GEO_SETTINGS_SUCCESS}      | ${MOCK_BASIC_SETTINGS_DATA} | ${true}       | ${false}
+    ${types.RECEIVE_GEO_SETTINGS_ERROR}        | ${null}                     | ${true}       | ${false}
+    ${types.REQUEST_UPDATE_GEO_SETTINGS}       | ${null}                     | ${false}      | ${true}
+    ${types.RECEIVE_UPDATE_GEO_SETTINGS_ERROR} | ${null}                     | ${true}       | ${false}
+  `(`Loading Mutations: `, ({ mutation, data, loadingBefore, loadingAfter }) => {
+    describe(`${mutation}`, () => {
+      it(`sets isLoading to ${loadingAfter}`, () => {
+        state.isLoading = loadingBefore;
+
+        mutations[mutation](state, data);
+        expect(state.isLoading).toEqual(loadingAfter);
+      });
     });
   });
 
   describe('RECEIVE_GEO_SETTINGS_SUCCESS', () => {
-    const mockData = MOCK_BASIC_SETTINGS_DATA;
+    it('sets timeout and allowedIp array with data', () => {
+      mutations[types.RECEIVE_GEO_SETTINGS_SUCCESS](state, MOCK_BASIC_SETTINGS_DATA);
 
+      expect(state.timeout).toBe(MOCK_BASIC_SETTINGS_DATA.timeout);
+      expect(state.allowedIp).toBe(MOCK_BASIC_SETTINGS_DATA.allowedIp);
+    });
+  });
+
+  describe('RECEIVE_GEO_SETTINGS_ERROR', () => {
     beforeEach(() => {
-      state.isLoading = true;
+      state.timeout = MOCK_BASIC_SETTINGS_DATA.timeout;
+      state.allowedIp = MOCK_BASIC_SETTINGS_DATA.allowedIp;
     });
 
-    it('sets isLoading to false', () => {
-      mutations[types.RECEIVE_GEO_SETTINGS_SUCCESS](state, mockData);
+    it('resets timeout and allowedIp array', () => {
+      mutations[types.RECEIVE_GEO_SETTINGS_ERROR](state);
 
-      expect(state.isLoading).toEqual(false);
+      expect(state.timeout).toBe(DEFAULT_TIMEOUT);
+      expect(state.allowedIp).toBe(DEFAULT_ALLOWED_IP);
     });
+  });
 
+  describe('RECEIVE_UPDATE_GEO_SETTINGS_SUCCESS', () => {
     it('sets timeout and allowedIp array with data', () => {
-      mutations[types.RECEIVE_GEO_SETTINGS_SUCCESS](state, mockData);
+      mutations[types.RECEIVE_UPDATE_GEO_SETTINGS_SUCCESS](state, MOCK_BASIC_SETTINGS_DATA);
 
-      expect(state.timeout).toBe(mockData.timeout);
-      expect(state.allowedIp).toBe(mockData.allowedIp);
+      expect(state.timeout).toBe(MOCK_BASIC_SETTINGS_DATA.timeout);
+      expect(state.allowedIp).toBe(MOCK_BASIC_SETTINGS_DATA.allowedIp);
     });
   });
 
-  describe('RECEIVE_GEO_SETTINGS_ERROR', () => {
-    const mockData = MOCK_BASIC_SETTINGS_DATA;
-
+  describe('RECEIVE_UPDATE_GEO_SETTINGS_ERROR', () => {
     beforeEach(() => {
-      state.isLoading = true;
-      state.timeout = mockData.timeout;
-      state.allowedIp = mockData.allowedIp;
-    });
-
-    it('sets isLoading to false', () => {
-      mutations[types.RECEIVE_GEO_SETTINGS_ERROR](state);
-
-      expect(state.isLoading).toEqual(false);
+      state.timeout = MOCK_BASIC_SETTINGS_DATA.timeout;
+      state.allowedIp = MOCK_BASIC_SETTINGS_DATA.allowedIp;
     });
 
     it('resets timeout and allowedIp array', () => {
-      mutations[types.RECEIVE_GEO_SETTINGS_ERROR](state);
+      mutations[types.RECEIVE_UPDATE_GEO_SETTINGS_ERROR](state);
 
       expect(state.timeout).toBe(DEFAULT_TIMEOUT);
       expect(state.allowedIp).toBe(DEFAULT_ALLOWED_IP);
     });
   });
+
+  describe('SET_TIMEOUT', () => {
+    it('sets error for field', () => {
+      mutations[types.SET_TIMEOUT](state, 1);
+      expect(state.timeout).toBe(1);
+    });
+  });
+
+  describe('SET_ALLOWED_IP', () => {
+    it('sets error for field', () => {
+      mutations[types.SET_ALLOWED_IP](state, '0.0.0.0');
+      expect(state.allowedIp).toBe('0.0.0.0');
+    });
+  });
+
+  describe('SET_FORM_ERROR', () => {
+    it('sets error for field', () => {
+      mutations[types.SET_FORM_ERROR](state, { key: 'timeout', error: 'error' });
+      expect(state.formErrors.timeout).toBe('error');
+    });
+  });
 });

ee/spec/frontend/geo_settings/validations_spec.js

+import { validateTimeout, validateAllowedIp } from 'ee/geo_settings/validations';
+import { STRING_OVER_255 } from './mock_data';
+
+describe('Geo Settings Validations', () => {
+  let res = '';
+
+  describe.each`
+    data      | errorMessage
+    ${null}   | ${"Connection timeout can't be blank"}
+    ${''}     | ${"Connection timeout can't be blank"}
+    ${'asdf'} | ${'Connection timeout must be a number'}
+    ${0}      | ${'Connection timeout should be between 1-120'}
+    ${121}    | ${'Connection timeout should be between 1-120'}
+    ${10}     | ${''}
+  `(`validateTimeout`, ({ data, errorMessage }) => {
+    beforeEach(() => {
+      res = validateTimeout(data);
+    });
+
+    it(`return ${errorMessage} when data is ${data}`, () => {
+      expect(res).toBe(errorMessage);
+    });
+  });
+
+  describe.each`
+    data               | errorMessage
+    ${null}            | ${"Allowed Geo IP can't be blank"}
+    ${''}              | ${"Allowed Geo IP can't be blank"}
+    ${STRING_OVER_255} | ${'Allowed Geo IP should be between 1 and 255 characters'}
+    ${'asdf'}          | ${'Allowed Geo IP should contain valid IP addresses'}
+    ${'1.1.1.1, asdf'} | ${'Allowed Geo IP should contain valid IP addresses'}
+    ${'asdf, 1.1.1.1'} | ${'Allowed Geo IP should contain valid IP addresses'}
+    ${'1.1.1.1'}       | ${''}
+    ${'::/0'}          | ${''}
+    ${'1.1.1.1, ::/0'} | ${''}
+  `(`validateAllowedIp`, ({ data, errorMessage }) => {
+    beforeEach(() => {
+      res = validateAllowedIp(data);
+    });
+
+    it(`return ${errorMessage} when data is ${data}`, () => {
+      expect(res).toBe(errorMessage);
+    });
+  });
+});

locale/gitlab.pot

@@ -10660,6 +10660,24 @@ msgstr ""
 msgid "Geo|All projects are being scheduled for reverify"
 msgstr ""
 
+msgid "Geo|Allowed Geo IP can't be blank"
+msgstr ""
+
+msgid "Geo|Allowed Geo IP should be between 1 and 255 characters"
+msgstr ""
+
+msgid "Geo|Allowed Geo IP should contain valid IP addresses"
+msgstr ""
+
+msgid "Geo|Connection timeout can't be blank"
+msgstr ""
+
+msgid "Geo|Connection timeout must be a number"
+msgstr ""
+
+msgid "Geo|Connection timeout should be between 1-120"
+msgstr ""
+
 msgid "Geo|Could not remove tracking entry for an existing project."
 msgstr ""
 
@@ -23419,6 +23437,9 @@ msgstr ""
 msgid "There was an error trying to validate your query"
 msgstr ""
 
+msgid "There was an error updating the Geo Settings"
+msgstr ""
+
 msgid "There was an error updating the dashboard, branch name is invalid."
 msgstr ""
 

package.json

@@ -91,6 +91,7 @@
     "graphql-tag": "^2.10.1",
     "immer": "^5.2.1",
     "imports-loader": "^0.8.0",
+    "ipaddr.js": "^1.9.1",
     "jed": "^1.1.1",
     "jest-transform-graphql": "^2.1.0",
     "jquery": "^3.4.1",

yarn.lock

@@ -6130,11 +6130,16 @@ ip@^1.1.0, ip@^1.1.5:
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.9.0, ipaddr.js@^1.9.0:
+ipaddr.js@1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
   integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
 
+ipaddr.js@^1.9.0, ipaddr.js@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
 is-absolute-url@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"