Merge branch '337177-geo-relative-urls' into 'master'

Geo Node Form Regression - Relative URLs broken

See merge request gitlab-org/gitlab!67253

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

 <script>
 import { GlButton } from '@gitlab/ui';
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { visitUrl } from '~/lib/utils/url_utility';
 import GeoNodeFormCapacities from './geo_node_form_capacities.vue';
 import GeoNodeFormCore from './geo_node_form_core.vue';
@@ -50,6 +50,7 @@ export default {
   },
   computed: {
     ...mapGetters(['formHasError']),
+    ...mapState(['nodesPath']),
   },
   created() {
     if (this.node) {
@@ -59,7 +60,7 @@ export default {
   methods: {
     ...mapActions(['saveGeoNode']),
     redirect() {
-      visitUrl('/admin/geo/nodes');
+      visitUrl(this.nodesPath);
     },
     addSyncOption({ key, value }) {
       this.nodeData[key].push(value);

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

@@ -9,17 +9,17 @@ Vue.use(Translate);
 export default () => {
   const el = document.getElementById('js-geo-node-form');
 
+  const {
+    dataset: { selectiveSyncTypes, syncShardsOptions, nodeData, nodesPath },
+  } = el;
+
   return new Vue({
     el,
-    store: createStore(),
+    store: createStore(nodesPath),
     components: {
       GeoNodeFormApp,
     },
     render(createElement) {
-      const {
-        dataset: { selectiveSyncTypes, syncShardsOptions, nodeData },
-      } = this.$options.el;
-
       let node;
       if (nodeData) {
         node = JSON.parse(nodeData);

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

@@ -40,9 +40,9 @@ export const fetchSyncNamespaces = ({ dispatch }, search) => {
 };
 
 export const requestSaveGeoNode = ({ commit }) => commit(types.REQUEST_SAVE_GEO_NODE);
-export const receiveSaveGeoNodeSuccess = ({ commit }) => {
+export const receiveSaveGeoNodeSuccess = ({ commit, state }) => {
   commit(types.RECEIVE_SAVE_GEO_NODE_COMPLETE);
-  visitUrl('/admin/geo/nodes');
+  visitUrl(state.nodesPath);
 };
 export const receiveSaveGeoNodeError = ({ commit }, data) => {
   let errorMessage = __('There was an error saving this Geo Node.');

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

@@ -7,11 +7,11 @@ import createState from './state';
 
 Vue.use(Vuex);
 
-const createStore = () =>
+const createStore = (nodesPath) =>
   new Vuex.Store({
     actions,
     mutations,
     getters,
-    state: createState(),
+    state: createState(nodesPath),
   });
 export default createStore;

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

 import { VALIDATION_FIELD_KEYS } from '../constants';
 
-const createState = () => ({
+const createState = (nodesPath) => ({
+  nodesPath,
   isLoading: false,
   synchronizationNamespaces: [],
   formErrors: Object.values(VALIDATION_FIELD_KEYS).reduce(

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

@@ -14,7 +14,7 @@ export default {
     GlButton,
   },
   computed: {
-    ...mapState(['formErrors']),
+    ...mapState(['formErrors', 'nodesPath']),
     ...mapGetters(['formHasError']),
     ...mapComputed([
       { key: 'timeout', updateFn: 'setTimeout' },
@@ -24,7 +24,7 @@ export default {
   methods: {
     ...mapActions(['updateGeoSettings', 'setFormError']),
     redirect() {
-      visitUrl('/admin/geo/nodes');
+      visitUrl(this.nodesPath);
     },
     checkTimeout() {
       this.setFormError({

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

@@ -8,9 +8,13 @@ Vue.use(Translate);
 export default () => {
   const el = document.getElementById('js-geo-settings-form');
 
+  const {
+    dataset: { nodesPath },
+  } = el;
+
   return new Vue({
     el,
-    store: createStore(),
+    store: createStore(nodesPath),
     components: {
       GeoSettingsApp,
     },

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

@@ -7,10 +7,10 @@ import createState from './state';
 
 Vue.use(Vuex);
 
-export default () =>
+export default (nodesPath) =>
   new Vuex.Store({
     actions,
     mutations,
     getters,
-    state: createState(),
+    state: createState(nodesPath),
   });

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

 import { DEFAULT_TIMEOUT, DEFAULT_ALLOWED_IP, FORM_VALIDATION_FIELDS } from '../constants';
 
-export default () => ({
+export default (nodesPath) => ({
+  nodesPath,
   isLoading: false,
   timeout: DEFAULT_TIMEOUT,
   allowedIp: DEFAULT_ALLOWED_IP,

ee/app/views/admin/geo/nodes/form.html.haml

@@ -3,4 +3,5 @@
 
 #js-geo-node-form{ data: { "selective-sync-types" => selective_sync_types_json,
   "sync-shards-options" => repository_storages_options_json,
-  "node-data" => @serialized_node } }
+  "node-data" => @serialized_node,
+  "nodes-path" => admin_geo_nodes_path } }

ee/app/views/admin/geo/settings/show.html.haml

@@ -2,6 +2,6 @@
 = render partial: 'admin/geo/shared/license_alert'
 
 - if Gitlab::Geo.license_allows?
-  #js-geo-settings-form
+  #js-geo-settings-form{ data: { "nodes-path" => admin_geo_nodes_path } }
 - else
   = render 'shared/empty_states/geo'

ee/spec/frontend/geo_node_form/components/geo_node_form_spec.js

@@ -4,9 +4,14 @@ import GeoNodeForm from 'ee/geo_node_form/components/geo_node_form.vue';
 import GeoNodeFormCapacities from 'ee/geo_node_form/components/geo_node_form_capacities.vue';
 import GeoNodeFormCore from 'ee/geo_node_form/components/geo_node_form_core.vue';
 import GeoNodeFormSelectiveSync from 'ee/geo_node_form/components/geo_node_form_selective_sync.vue';
-import store from 'ee/geo_node_form/store';
+import initStore from 'ee/geo_node_form/store';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { MOCK_NODE, MOCK_SELECTIVE_SYNC_TYPES, MOCK_SYNC_SHARDS } from '../mock_data';
+import {
+  MOCK_NODE,
+  MOCK_SELECTIVE_SYNC_TYPES,
+  MOCK_SYNC_SHARDS,
+  MOCK_NODES_PATH,
+} from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -26,7 +31,7 @@ describe('GeoNodeForm', () => {
 
   const createComponent = () => {
     wrapper = shallowMount(GeoNodeForm, {
-      store,
+      store: initStore(MOCK_NODES_PATH),
       propsData,
     });
   };
@@ -109,7 +114,7 @@ describe('GeoNodeForm', () => {
 
       it('calls visitUrl when cancel is clicked', () => {
         findGeoNodeCancelButton().vm.$emit('click');
-        expect(visitUrl).toHaveBeenCalledWith('/admin/geo/nodes');
+        expect(visitUrl).toHaveBeenCalledWith(MOCK_NODES_PATH);
       });
     });
 

ee/spec/frontend/geo_node_form/mock_data.js

@@ -67,3 +67,5 @@ export const MOCK_ERROR_MESSAGE = {
   name: ["can't be blank"],
   url: ["can't be blank", 'must be a valid URL'],
 };
+
+export const MOCK_NODES_PATH = 'gitlab/admin/geo/nodes';

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

@@ -6,7 +6,7 @@ import testAction from 'helpers/vuex_action_helper';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { MOCK_SYNC_NAMESPACES, MOCK_NODE, MOCK_ERROR_MESSAGE } from '../mock_data';
+import { MOCK_SYNC_NAMESPACES, MOCK_NODE, MOCK_ERROR_MESSAGE, MOCK_NODES_PATH } from '../mock_data';
 
 jest.mock('~/flash');
 jest.mock('~/lib/utils/url_utility', () => ({
@@ -24,11 +24,11 @@ describe('GeoNodeForm Store Actions', () => {
     createFlash.mockClear();
   };
   const visitUrlCallback = () => {
-    expect(visitUrl).toHaveBeenCalledWith('/admin/geo/nodes');
+    expect(visitUrl).toHaveBeenCalledWith(MOCK_NODES_PATH);
   };
 
   beforeEach(() => {
-    state = createState();
+    state = createState(MOCK_NODES_PATH);
     mock = new MockAdapter(axios);
   });
 

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

@@ -4,7 +4,7 @@ import GeoSettingsForm from 'ee/geo_settings/components/geo_settings_form.vue';
 import initStore from 'ee/geo_settings/store';
 import * as types from 'ee/geo_settings/store/mutation_types';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { STRING_OVER_255 } from '../mock_data';
+import { STRING_OVER_255, MOCK_NODES_PATH } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -18,7 +18,7 @@ describe('GeoSettingsForm', () => {
   let store;
 
   const createStore = () => {
-    store = initStore();
+    store = initStore(MOCK_NODES_PATH);
   };
 
   const createComponent = () => {
@@ -90,7 +90,7 @@ describe('GeoSettingsForm', () => {
     describe('cancel button', () => {
       it('calls visitUrl when clicked', () => {
         findGeoSettingsCancelButton().vm.$emit('click');
-        expect(visitUrl).toHaveBeenCalledWith('/admin/geo/nodes');
+        expect(visitUrl).toHaveBeenCalledWith(MOCK_NODES_PATH);
       });
     });
   });

ee/spec/frontend/geo_settings/mock_data.js

@@ -9,3 +9,5 @@ export const MOCK_BASIC_SETTINGS_DATA = {
 };
 
 export const STRING_OVER_255 = new Array(257).join('a');
+
+export const MOCK_NODES_PATH = 'gitlab/admin/geo/nodes';