Add latest changes from gitlab-org/gitlab@master

29 files changed, 135 insertions, 269 deletions

diff --git a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
index 7c9744da0e8..b4a6286eb55 100644
--- a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
@@ -1,17 +1,13 @@
 <script>
 import { GlAlert, GlLoadingIcon, GlToggle } from '@gitlab/ui';
-import { createNamespacedHelpers } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import axios from '~/lib/utils/axios_utils';
 import { sprintf, s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { LEGACY_FLAG, NEW_FLAG_ALERT } from '../constants';
-import store from '../store/index';
 import FeatureFlagForm from './form.vue';
 
-const { mapState, mapActions } = createNamespacedHelpers('edit');
-
 export default {
-  store,
   components: {
     GlAlert,
     GlLoadingIcon,
@@ -20,14 +16,6 @@ export default {
   },
   mixins: [glFeatureFlagMixin()],
   props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
-    path: {
-      type: String,
-      required: true,
-    },
     environmentsEndpoint: {
       type: String,
       required: true,
@@ -71,6 +59,7 @@ export default {
   },
   computed: {
     ...mapState([
+      'path',
       'error',
       'name',
       'description',
@@ -110,17 +99,10 @@ export default {
     },
   },
   created() {
-    this.setPath(this.path);
-    return this.setEndpoint(this.endpoint).then(() => this.fetchFeatureFlag());
+    return this.fetchFeatureFlag();
   },
   methods: {
-    ...mapActions([
-      'updateFeatureFlag',
-      'setEndpoint',
-      'setPath',
-      'fetchFeatureFlag',
-      'toggleActive',
-    ]),
+    ...mapActions(['updateFeatureFlag', 'fetchFeatureFlag', 'toggleActive']),
     dismissNewVersionFlagAlert() {
       this.userShouldSeeNewFlagAlert = false;
       axios.post(this.userCalloutsPath, {
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue
index 18008111a18..2ea92ca0d9c 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue
@@ -1,12 +1,11 @@
 <script>
-import { createNamespacedHelpers } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { isEmpty } from 'lodash';
 import { GlButton, GlModalDirective, GlTabs } from '@gitlab/ui';
 import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants';
 import FeatureFlagsTab from './feature_flags_tab.vue';
 import FeatureFlagsTable from './feature_flags_table.vue';
 import UserListsTable from './user_lists_table.vue';
-import store from '../store';
 import { s__ } from '~/locale';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import {
@@ -17,12 +16,9 @@ import {
 
 import ConfigureFeatureFlagsModal from './configure_feature_flags_modal.vue';
 
-const { mapState, mapActions } = createNamespacedHelpers('index');
-
 const SCOPES = { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE };
 
 export default {
-  store,
   components: {
     FeatureFlagsTable,
     UserListsTable,
@@ -36,14 +32,6 @@ export default {
     GlModal: GlModalDirective,
   },
   props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
-    projectId: {
-      type: String,
-      required: true,
-    },
     csrfToken: {
       type: String,
       required: true,
@@ -56,19 +44,10 @@ export default {
       type: String,
       required: true,
     },
-    rotateInstanceIdPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     unleashApiUrl: {
       type: String,
       required: true,
     },
-    unleashApiInstanceId: {
-      type: String,
-      required: true,
-    },
     canUserConfigure: {
       type: Boolean,
       required: true,
@@ -144,23 +123,15 @@ export default {
     },
   },
   created() {
-    this.setFeatureFlagsEndpoint(this.endpoint);
     this.setFeatureFlagsOptions({ scope: this.scope, page: this.page });
-    this.setProjectId(this.projectId);
     this.fetchFeatureFlags();
     this.fetchUserLists();
-    this.setInstanceId(this.unleashApiInstanceId);
-    this.setInstanceIdEndpoint(this.rotateInstanceIdPath);
   },
   methods: {
     ...mapActions([
-      'setFeatureFlagsEndpoint',
       'setFeatureFlagsOptions',
       'fetchFeatureFlags',
       'fetchUserLists',
-      'setInstanceIdEndpoint',
-      'setInstanceId',
-      'setProjectId',
       'rotateInstanceId',
       'toggleFeatureFlag',
       'deleteUserList',
diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue
index 8d065933316..2858f02688f 100644
--- a/app/assets/javascripts/feature_flags/components/form.vue
+++ b/app/assets/javascripts/feature_flags/components/form.vue
@@ -28,7 +28,7 @@ import {
   NEW_VERSION_FLAG,
   LEGACY_FLAG,
 } from '../constants';
-import { createNewEnvironmentScope } from '../store/modules/helpers';
+import { createNewEnvironmentScope } from '../store/helpers';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
index df19667a3ae..927265b83a1 100644
--- a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
@@ -1,8 +1,7 @@
 <script>
-import { createNamespacedHelpers } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { GlAlert } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
-import store from '../store/index';
 import FeatureFlagForm from './form.vue';
 import {
   LEGACY_FLAG,
@@ -10,28 +9,17 @@ import {
   NEW_FLAG_ALERT,
   ROLLOUT_STRATEGY_ALL_USERS,
 } from '../constants';
-import { createNewEnvironmentScope } from '../store/modules/helpers';
+import { createNewEnvironmentScope } from '../store/helpers';
 
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
-const { mapState, mapActions } = createNamespacedHelpers('new');
-
 export default {
-  store,
   components: {
     GlAlert,
     FeatureFlagForm,
   },
   mixins: [featureFlagsMixin()],
   props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
-    path: {
-      type: String,
-      required: true,
-    },
     environmentsEndpoint: {
       type: String,
       required: true,
@@ -64,7 +52,7 @@ export default {
     newFlagAlert: NEW_FLAG_ALERT,
   },
   computed: {
-    ...mapState(['error']),
+    ...mapState(['error', 'path']),
     scopes() {
       return [
         createNewEnvironmentScope(
@@ -89,12 +77,8 @@ export default {
       return [{ name: ROLLOUT_STRATEGY_ALL_USERS, parameters: {}, scopes: [] }];
     },
   },
-  created() {
-    this.setEndpoint(this.endpoint);
-    this.setPath(this.path);
-  },
   methods: {
-    ...mapActions(['createFeatureFlag', 'setEndpoint', 'setPath']),
+    ...mapActions(['createFeatureFlag']),
     dismissNewVersionFlagAlert() {
       this.userShouldSeeNewFlagAlert = false;
       axios.post(this.userCalloutsPath, {
diff --git a/app/assets/javascripts/feature_flags/edit.js b/app/assets/javascripts/feature_flags/edit.js
index 390a1f7555d..2e2e2383eb6 100644
--- a/app/assets/javascripts/feature_flags/edit.js
+++ b/app/assets/javascripts/feature_flags/edit.js
@@ -1,25 +1,30 @@
 import Vue from 'vue';
-import EditFeatureFlag from '~/feature_flags/components/edit_feature_flag.vue';
+import Vuex from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import createStore from './store/edit';
+import EditFeatureFlag from './components/edit_feature_flag.vue';
+
+Vue.use(Vuex);
 
 export default () => {
   const el = document.querySelector('#js-edit-feature-flag');
-  const { environmentsScopeDocsPath, strategyTypeDocsPagePath } = el.dataset;
+  const {
+    environmentsScopeDocsPath,
+    strategyTypeDocsPagePath,
+    endpoint,
+    featureFlagsPath,
+  } = el.dataset;
 
   return new Vue({
+    store: createStore({ endpoint, path: featureFlagsPath }),
     el,
-    components: {
-      EditFeatureFlag,
-    },
     provide: {
       environmentsScopeDocsPath,
       strategyTypeDocsPagePath,
     },
     render(createElement) {
-      return createElement('edit-feature-flag', {
+      return createElement(EditFeatureFlag, {
         props: {
-          endpoint: el.dataset.endpoint,
-          path: el.dataset.featureFlagsPath,
           environmentsEndpoint: el.dataset.environmentsEndpoint,
           projectId: el.dataset.projectId,
           featureFlagIssuesEndpoint: el.dataset.featureFlagIssuesEndpoint,
diff --git a/app/assets/javascripts/feature_flags/index.js b/app/assets/javascripts/feature_flags/index.js
index 90857c5f2da..48160fe687c 100644
--- a/app/assets/javascripts/feature_flags/index.js
+++ b/app/assets/javascripts/feature_flags/index.js
@@ -1,41 +1,47 @@
 import Vue from 'vue';
-import FeatureFlagsComponent from '~/feature_flags/components/feature_flags.vue';
+import Vuex from 'vuex';
 import csrf from '~/lib/utils/csrf';
+import FeatureFlagsComponent from './components/feature_flags.vue';
+import createStore from './store/index';
 
-export default () =>
-  new Vue({
-    el: '#feature-flags-vue',
-    components: {
-      FeatureFlagsComponent,
-    },
-    data() {
-      return {
-        dataset: document.querySelector(this.$options.el).dataset,
-      };
-    },
+Vue.use(Vuex);
+
+export default () => {
+  const el = document.querySelector('#feature-flags-vue');
+
+  const {
+    projectName,
+    featureFlagsHelpPagePath,
+    errorStateSvgPath,
+    endpoint,
+    projectId,
+    unleashApiInstanceId,
+    rotateInstanceIdPath,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    store: createStore({ endpoint, projectId, unleashApiInstanceId, rotateInstanceIdPath }),
     provide() {
       return {
-        projectName: this.dataset.projectName,
-        featureFlagsHelpPagePath: this.dataset.featureFlagsHelpPagePath,
-        errorStateSvgPath: this.dataset.errorStateSvgPath,
+        projectName,
+        featureFlagsHelpPagePath,
+        errorStateSvgPath,
       };
     },
     render(createElement) {
-      return createElement('feature-flags-component', {
+      return createElement(FeatureFlagsComponent, {
         props: {
-          endpoint: this.dataset.endpoint,
-          projectId: this.dataset.projectId,
-          featureFlagsClientLibrariesHelpPagePath: this.dataset
-            .featureFlagsClientLibrariesHelpPagePath,
-          featureFlagsClientExampleHelpPagePath: this.dataset.featureFlagsClientExampleHelpPagePath,
-          unleashApiUrl: this.dataset.unleashApiUrl,
-          unleashApiInstanceId: this.dataset.unleashApiInstanceId || '',
+          featureFlagsClientLibrariesHelpPagePath:
+            el.dataset.featureFlagsClientLibrariesHelpPagePath,
+          featureFlagsClientExampleHelpPagePath: el.dataset.featureFlagsClientExampleHelpPagePath,
+          unleashApiUrl: el.dataset.unleashApiUrl,
           csrfToken: csrf.token,
-          canUserConfigure: this.dataset.canUserAdminFeatureFlag,
-          newFeatureFlagPath: this.dataset.newFeatureFlagPath,
-          rotateInstanceIdPath: this.dataset.rotateInstanceIdPath,
-          newUserListPath: this.dataset.newUserListPath,
+          canUserConfigure: el.dataset.canUserAdminFeatureFlag,
+          newFeatureFlagPath: el.dataset.newFeatureFlagPath,
+          newUserListPath: el.dataset.newUserListPath,
         },
       });
     },
   });
+};
diff --git a/app/assets/javascripts/feature_flags/new.js b/app/assets/javascripts/feature_flags/new.js
index f14dd151910..8f1436314e0 100644
--- a/app/assets/javascripts/feature_flags/new.js
+++ b/app/assets/javascripts/feature_flags/new.js
@@ -1,25 +1,30 @@
 import Vue from 'vue';
-import NewFeatureFlag from '~/feature_flags/components/new_feature_flag.vue';
+import Vuex from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import createStore from './store/new';
+import NewFeatureFlag from './components/new_feature_flag.vue';
+
+Vue.use(Vuex);
 
 export default () => {
   const el = document.querySelector('#js-new-feature-flag');
-  const { environmentsScopeDocsPath, strategyTypeDocsPagePath } = el.dataset;
+  const {
+    environmentsScopeDocsPath,
+    strategyTypeDocsPagePath,
+    endpoint,
+    featureFlagsPath,
+  } = el.dataset;
 
   return new Vue({
     el,
-    components: {
-      NewFeatureFlag,
-    },
+    store: createStore({ endpoint, path: featureFlagsPath }),
     provide: {
       environmentsScopeDocsPath,
       strategyTypeDocsPagePath,
     },
     render(createElement) {
-      return createElement('new-feature-flag', {
+      return createElement(NewFeatureFlag, {
         props: {
-          endpoint: el.dataset.endpoint,
-          path: el.dataset.featureFlagsPath,
           environmentsEndpoint: el.dataset.environmentsEndpoint,
           projectId: el.dataset.projectId,
           userCalloutsPath: el.dataset.userCalloutsPath,
diff --git a/app/assets/javascripts/feature_flags/store/modules/edit/actions.js b/app/assets/javascripts/feature_flags/store/edit/actions.js
index 351f36d8fa6..3678c2f7788 100644
--- a/app/assets/javascripts/feature_flags/store/modules/edit/actions.js
+++ b/app/assets/javascripts/feature_flags/store/edit/actions.js
@@ -3,24 +3,10 @@ import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
-import { NEW_VERSION_FLAG } from '../../../constants';
+import { NEW_VERSION_FLAG } from '../../constants';
 import { mapFromScopesViewModel, mapStrategiesToRails } from '../helpers';
 
 /**
- * Commits mutation to set the main endpoint
- * @param {String} endpoint
- */
-export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);
-
-/**
- * Commits mutation to set the feature flag path.
- * Used to redirect the user after form submission
- *
- * @param {String} path
- */
-export const setPath = ({ commit }, path) => commit(types.SET_PATH, path);
-
-/**
  * Handles the edition of a feature flag.
  *
  * Will dispatch `requestUpdateFeatureFlag`
diff --git a/app/assets/javascripts/feature_flags/store/edit/index.js b/app/assets/javascripts/feature_flags/store/edit/index.js
new file mode 100644
index 00000000000..f737e0517fc
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/store/edit/index.js
@@ -0,0 +1,11 @@
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+export default data =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(data),
+  });
diff --git a/app/assets/javascripts/feature_flags/store/modules/edit/mutation_types.js b/app/assets/javascripts/feature_flags/store/edit/mutation_types.js
index b2715e501f4..c215dad3513 100644
--- a/app/assets/javascripts/feature_flags/store/modules/edit/mutation_types.js
+++ b/app/assets/javascripts/feature_flags/store/edit/mutation_types.js
@@ -1,6 +1,3 @@
-export const SET_ENDPOINT = 'SET_ENDPOINT';
-export const SET_PATH = 'SET_PATH';
-
 export const REQUEST_UPDATE_FEATURE_FLAG = 'REQUEST_UPDATE_FEATURE_FLAG';
 export const RECEIVE_UPDATE_FEATURE_FLAG_SUCCESS = 'RECEIVE_UPDATE_FEATURE_FLAG_SUCCESS';
 export const RECEIVE_UPDATE_FEATURE_FLAG_ERROR = 'RECEIVE_UPDATE_FEATURE_FLAG_ERROR';
diff --git a/app/assets/javascripts/feature_flags/store/modules/edit/mutations.js b/app/assets/javascripts/feature_flags/store/edit/mutations.js
index 1d2721e037d..e60dbaf4a34 100644
--- a/app/assets/javascripts/feature_flags/store/modules/edit/mutations.js
+++ b/app/assets/javascripts/feature_flags/store/edit/mutations.js
@@ -1,14 +1,8 @@
 import * as types from './mutation_types';
 import { mapToScopesViewModel, mapStrategiesToViewModel } from '../helpers';
-import { LEGACY_FLAG } from '../../../constants';
+import { LEGACY_FLAG } from '../../constants';
 
 export default {
-  [types.SET_ENDPOINT](state, endpoint) {
-    state.endpoint = endpoint;
-  },
-  [types.SET_PATH](state, path) {
-    state.path = path;
-  },
   [types.REQUEST_FEATURE_FLAG](state) {
     state.isLoading = true;
   },
diff --git a/app/assets/javascripts/feature_flags/store/modules/edit/state.js b/app/assets/javascripts/feature_flags/store/edit/state.js
index 7de05b49482..ec507532d6a 100644
--- a/app/assets/javascripts/feature_flags/store/modules/edit/state.js
+++ b/app/assets/javascripts/feature_flags/store/edit/state.js
@@ -1,8 +1,8 @@
-import { LEGACY_FLAG } from '../../../constants';
+import { LEGACY_FLAG } from '../../constants';
 
-export default () => ({
-  endpoint: null,
-  path: null,
+export default ({ path, endpoint }) => ({
+  endpoint,
+  path,
   isSendingRequest: false,
   error: [],
 
diff --git a/app/assets/javascripts/feature_flags/store/modules/helpers.js b/app/assets/javascripts/feature_flags/store/helpers.js
index bbde3cad7cd..db6da815abf 100644
--- a/app/assets/javascripts/feature_flags/store/modules/helpers.js
+++ b/app/assets/javascripts/feature_flags/store/helpers.js
@@ -10,7 +10,7 @@ import {
   fetchPercentageParams,
   fetchUserIdParams,
   LEGACY_FLAG,
-} from '../../constants';
+} from '../constants';
 
 /**
  * Converts raw scope objects fetched from the API into an array of scope
diff --git a/app/assets/javascripts/feature_flags/store/index.js b/app/assets/javascripts/feature_flags/store/index.js
deleted file mode 100644
index f4f49c20895..00000000000
--- a/app/assets/javascripts/feature_flags/store/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import indexModule from './modules/index';
-import newModule from './modules/new';
-import editModule from './modules/edit';
-
-Vue.use(Vuex);
-
-export const createStore = () =>
-  new Vuex.Store({
-    modules: {
-      index: indexModule,
-      new: newModule,
-      edit: editModule,
-    },
-  });
-
-export default createStore();
diff --git a/app/assets/javascripts/feature_flags/store/modules/index/actions.js b/app/assets/javascripts/feature_flags/store/index/actions.js
index ed41dd34e4d..a8c1a72c016 100644
--- a/app/assets/javascripts/feature_flags/store/modules/index/actions.js
+++ b/app/assets/javascripts/feature_flags/store/index/actions.js
@@ -2,19 +2,9 @@ import Api from '~/api';
 import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 
-export const setFeatureFlagsEndpoint = ({ commit }, endpoint) =>
-  commit(types.SET_FEATURE_FLAGS_ENDPOINT, endpoint);
-
 export const setFeatureFlagsOptions = ({ commit }, options) =>
   commit(types.SET_FEATURE_FLAGS_OPTIONS, options);
 
-export const setInstanceIdEndpoint = ({ commit }, endpoint) =>
-  commit(types.SET_INSTANCE_ID_ENDPOINT, endpoint);
-
-export const setProjectId = ({ commit }, endpoint) => commit(types.SET_PROJECT_ID, endpoint);
-
-export const setInstanceId = ({ commit }, instanceId) => commit(types.SET_INSTANCE_ID, instanceId);
-
 export const fetchFeatureFlags = ({ state, dispatch }) => {
   dispatch('requestFeatureFlags');
 
diff --git a/app/assets/javascripts/feature_flags/store/index/index.js b/app/assets/javascripts/feature_flags/store/index/index.js
new file mode 100644
index 00000000000..f737e0517fc
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/store/index/index.js
@@ -0,0 +1,11 @@
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+export default data =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(data),
+  });
diff --git a/app/assets/javascripts/feature_flags/store/modules/index/mutation_types.js b/app/assets/javascripts/feature_flags/store/index/mutation_types.js
index 4a4bd13c945..189c763782e 100644
--- a/app/assets/javascripts/feature_flags/store/modules/index/mutation_types.js
+++ b/app/assets/javascripts/feature_flags/store/index/mutation_types.js
@@ -1,8 +1,4 @@
-export const SET_FEATURE_FLAGS_ENDPOINT = 'SET_FEATURE_FLAGS_ENDPOINT';
 export const SET_FEATURE_FLAGS_OPTIONS = 'SET_FEATURE_FLAGS_OPTIONS';
-export const SET_INSTANCE_ID_ENDPOINT = 'SET_INSTANCE_ID_ENDPOINT';
-export const SET_INSTANCE_ID = 'SET_INSTANCE_ID';
-export const SET_PROJECT_ID = 'SET_PROJECT_ID';
 
 export const REQUEST_FEATURE_FLAGS = 'REQUEST_FEATURE_FLAGS';
 export const RECEIVE_FEATURE_FLAGS_SUCCESS = 'RECEIVE_FEATURE_FLAGS_SUCCESS';
diff --git a/app/assets/javascripts/feature_flags/store/modules/index/mutations.js b/app/assets/javascripts/feature_flags/store/index/mutations.js
index 948786a3533..bdc23e66214 100644
--- a/app/assets/javascripts/feature_flags/store/modules/index/mutations.js
+++ b/app/assets/javascripts/feature_flags/store/index/mutations.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import * as types from './mutation_types';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
-import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../../constants';
+import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../constants';
 import { mapToScopesViewModel } from '../helpers';
 
 const mapFlag = flag => ({ ...flag, scopes: mapToScopesViewModel(flag.scopes || []) });
@@ -23,21 +23,9 @@ const createPaginationInfo = (state, headers) => {
 };
 
 export default {
-  [types.SET_FEATURE_FLAGS_ENDPOINT](state, endpoint) {
-    state.endpoint = endpoint;
-  },
   [types.SET_FEATURE_FLAGS_OPTIONS](state, options = {}) {
     state.options = options;
   },
-  [types.SET_INSTANCE_ID_ENDPOINT](state, endpoint) {
-    state.rotateEndpoint = endpoint;
-  },
-  [types.SET_INSTANCE_ID](state, instance) {
-    state.instanceId = instance;
-  },
-  [types.SET_PROJECT_ID](state, project) {
-    state.projectId = project;
-  },
   [types.REQUEST_FEATURE_FLAGS](state) {
     state.isLoading = true;
   },
diff --git a/app/assets/javascripts/feature_flags/store/index/state.js b/app/assets/javascripts/feature_flags/store/index/state.js
new file mode 100644
index 00000000000..f8439b02639
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/store/index/state.js
@@ -0,0 +1,18 @@
+import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../constants';
+
+export default ({ endpoint, projectId, unleashApiInstanceId, rotateInstanceIdPath }) => ({
+  [FEATURE_FLAG_SCOPE]: [],
+  [USER_LIST_SCOPE]: [],
+  alerts: [],
+  count: {},
+  pageInfo: { [FEATURE_FLAG_SCOPE]: {}, [USER_LIST_SCOPE]: {} },
+  isLoading: true,
+  hasError: false,
+  endpoint,
+  rotateEndpoint: rotateInstanceIdPath,
+  instanceId: unleashApiInstanceId,
+  isRotating: false,
+  hasRotateError: false,
+  options: {},
+  projectId,
+});
diff --git a/app/assets/javascripts/feature_flags/store/modules/edit/index.js b/app/assets/javascripts/feature_flags/store/modules/edit/index.js
deleted file mode 100644
index 665bb29a17e..00000000000
--- a/app/assets/javascripts/feature_flags/store/modules/edit/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import state from './state';
-import * as actions from './actions';
-import mutations from './mutations';
-
-export default {
-  namespaced: true,
-  actions,
-  mutations,
-  state: state(),
-};
diff --git a/app/assets/javascripts/feature_flags/store/modules/index/index.js b/app/assets/javascripts/feature_flags/store/modules/index/index.js
deleted file mode 100644
index 665bb29a17e..00000000000
--- a/app/assets/javascripts/feature_flags/store/modules/index/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import state from './state';
-import * as actions from './actions';
-import mutations from './mutations';
-
-export default {
-  namespaced: true,
-  actions,
-  mutations,
-  state: state(),
-};
diff --git a/app/assets/javascripts/feature_flags/store/modules/index/state.js b/app/assets/javascripts/feature_flags/store/modules/index/state.js
deleted file mode 100644
index 443a12d485d..00000000000
--- a/app/assets/javascripts/feature_flags/store/modules/index/state.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../../constants';
-
-export default () => ({
-  [FEATURE_FLAG_SCOPE]: [],
-  [USER_LIST_SCOPE]: [],
-  alerts: [],
-  count: {},
-  pageInfo: { [FEATURE_FLAG_SCOPE]: {}, [USER_LIST_SCOPE]: {} },
-  isLoading: true,
-  hasError: false,
-  endpoint: null,
-  rotateEndpoint: null,
-  instanceId: '',
-  isRotating: false,
-  hasRotateError: false,
-  options: {},
-  projectId: '',
-});
diff --git a/app/assets/javascripts/feature_flags/store/modules/new/index.js b/app/assets/javascripts/feature_flags/store/modules/new/index.js
deleted file mode 100644
index 665bb29a17e..00000000000
--- a/app/assets/javascripts/feature_flags/store/modules/new/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import state from './state';
-import * as actions from './actions';
-import mutations from './mutations';
-
-export default {
-  namespaced: true,
-  actions,
-  mutations,
-  state: state(),
-};
diff --git a/app/assets/javascripts/feature_flags/store/modules/new/state.js b/app/assets/javascripts/feature_flags/store/modules/new/state.js
deleted file mode 100644
index 6f9263dbb2a..00000000000
--- a/app/assets/javascripts/feature_flags/store/modules/new/state.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default () => ({
-  endpoint: null,
-  path: null,
-  isSendingRequest: false,
-  error: [],
-});
diff --git a/app/assets/javascripts/feature_flags/store/modules/new/actions.js b/app/assets/javascripts/feature_flags/store/new/actions.js
index d2159d55d53..e21c128cd39 100644
--- a/app/assets/javascripts/feature_flags/store/modules/new/actions.js
+++ b/app/assets/javascripts/feature_flags/store/new/actions.js
@@ -1,24 +1,10 @@
 import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { NEW_VERSION_FLAG } from '../../../constants';
+import { NEW_VERSION_FLAG } from '../../constants';
 import { mapFromScopesViewModel, mapStrategiesToRails } from '../helpers';
 
 /**
- * Commits mutation to set the main endpoint
- * @param {String} endpoint
- */
-export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);
-
-/**
- * Commits mutation to set the feature flag path.
- * Used to redirect the user after form submission
- *
- * @param {String} path
- */
-export const setPath = ({ commit }, path) => commit(types.SET_PATH, path);
-
-/**
  * Handles the creation of a new feature flag.
  *
  * Will dispatch `requestCreateFeatureFlag`
diff --git a/app/assets/javascripts/feature_flags/store/new/index.js b/app/assets/javascripts/feature_flags/store/new/index.js
new file mode 100644
index 00000000000..f737e0517fc
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/store/new/index.js
@@ -0,0 +1,11 @@
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+export default data =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(data),
+  });
diff --git a/app/assets/javascripts/feature_flags/store/modules/new/mutation_types.js b/app/assets/javascripts/feature_flags/store/new/mutation_types.js
index 317f3689dfd..71cc57c8d2e 100644
--- a/app/assets/javascripts/feature_flags/store/modules/new/mutation_types.js
+++ b/app/assets/javascripts/feature_flags/store/new/mutation_types.js
@@ -1,6 +1,3 @@
-export const SET_ENDPOINT = 'SET_ENDPOINT';
-export const SET_PATH = 'SET_PATH';
-
 export const REQUEST_CREATE_FEATURE_FLAG = 'REQUEST_CREATE_FEATURE_FLAG';
 export const RECEIVE_CREATE_FEATURE_FLAG_SUCCESS = 'RECEIVE_CREATE_FEATURE_FLAG_SUCCESS';
 export const RECEIVE_CREATE_FEATURE_FLAG_ERROR = 'RECEIVE_CREATE_FEATURE_FLAG_ERROR';
diff --git a/app/assets/javascripts/feature_flags/store/modules/new/mutations.js b/app/assets/javascripts/feature_flags/store/new/mutations.js
index 06e467c04f1..eeefc8413e8 100644
--- a/app/assets/javascripts/feature_flags/store/modules/new/mutations.js
+++ b/app/assets/javascripts/feature_flags/store/new/mutations.js
@@ -1,12 +1,6 @@
 import * as types from './mutation_types';
 
 export default {
-  [types.SET_ENDPOINT](state, endpoint) {
-    state.endpoint = endpoint;
-  },
-  [types.SET_PATH](state, path) {
-    state.path = path;
-  },
   [types.REQUEST_CREATE_FEATURE_FLAG](state) {
     state.isSendingRequest = true;
     state.error = [];
diff --git a/app/assets/javascripts/feature_flags/store/new/state.js b/app/assets/javascripts/feature_flags/store/new/state.js
new file mode 100644
index 00000000000..56940925aa0
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/store/new/state.js
@@ -0,0 +1,6 @@
+export default ({ endpoint, path }) => ({
+  endpoint,
+  path,
+  isSendingRequest: false,
+  error: [],
+});