Merge branch 'feature-flags-prop-pocalypse' into 'master'

Remove Feature Flags Vuex Modules, Favour Individual Stores

See merge request gitlab-org/gitlab!44638

app/assets/javascripts/feature_flags/components/edit_feature_flag.vue

 <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, {

app/assets/javascripts/feature_flags/components/feature_flags.vue

 <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',

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: {

app/assets/javascripts/feature_flags/components/new_feature_flag.vue

 <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, {

app/assets/javascripts/feature_flags/edit.js

 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,

app/assets/javascripts/feature_flags/index.js

 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,
         },
       });
     },
   });
+};

app/assets/javascripts/feature_flags/new.js

 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,

app/assets/javascripts/feature_flags/store/modules/edit/actions.js → app/assets/javascripts/feature_flags/store/edit/actions.js

@@ -3,23 +3,9 @@ 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.
  *

app/assets/javascripts/feature_flags/store/modules/new/index.js → app/assets/javascripts/feature_flags/store/edit/index.js

+import Vuex from 'vuex';
 import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
 
-export default {
-  namespaced: true,
-  actions,
-  mutations,
-  state: state(),
-};
+export default data =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(data),
+  });

app/assets/javascripts/feature_flags/store/modules/edit/mutation_types.js → app/assets/javascripts/feature_flags/store/edit/mutation_types.js

-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';

app/assets/javascripts/feature_flags/store/modules/edit/mutations.js → app/assets/javascripts/feature_flags/store/edit/mutations.js

 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;
   },

app/assets/javascripts/feature_flags/store/modules/edit/state.js → app/assets/javascripts/feature_flags/store/edit/state.js

-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: [],
 

app/assets/javascripts/feature_flags/store/modules/helpers.js → 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

app/assets/javascripts/feature_flags/store/index.js

-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();

app/assets/javascripts/feature_flags/store/modules/index/actions.js → 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');
 

app/assets/javascripts/feature_flags/store/modules/edit/index.js → app/assets/javascripts/feature_flags/store/index/index.js

+import Vuex from 'vuex';
 import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
 
-export default {
-  namespaced: true,
-  actions,
-  mutations,
-  state: state(),
-};
+export default data =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(data),
+  });

app/assets/javascripts/feature_flags/store/modules/index/mutation_types.js → app/assets/javascripts/feature_flags/store/index/mutation_types.js

-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';

app/assets/javascripts/feature_flags/store/modules/index/mutations.js → app/assets/javascripts/feature_flags/store/index/mutations.js

 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;
   },

app/assets/javascripts/feature_flags/store/modules/index/state.js → app/assets/javascripts/feature_flags/store/index/state.js

-import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../../constants';
+import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../constants';
 
-export default () => ({
+export default ({ endpoint, projectId, unleashApiInstanceId, rotateInstanceIdPath }) => ({
   [FEATURE_FLAG_SCOPE]: [],
   [USER_LIST_SCOPE]: [],
   alerts: [],
@@ -8,11 +8,11 @@ export default () => ({
   pageInfo: { [FEATURE_FLAG_SCOPE]: {}, [USER_LIST_SCOPE]: {} },
   isLoading: true,
   hasError: false,
-  endpoint: null,
-  rotateEndpoint: null,
-  instanceId: '',
+  endpoint,
+  rotateEndpoint: rotateInstanceIdPath,
+  instanceId: unleashApiInstanceId,
   isRotating: false,
   hasRotateError: false,
   options: {},
-  projectId: '',
+  projectId,
 });

app/assets/javascripts/feature_flags/store/modules/new/actions.js → app/assets/javascripts/feature_flags/store/new/actions.js

 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.
  *

app/assets/javascripts/feature_flags/store/modules/index/index.js → app/assets/javascripts/feature_flags/store/new/index.js

+import Vuex from 'vuex';
 import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
 
-export default {
-  namespaced: true,
-  actions,
-  mutations,
-  state: state(),
-};
+export default data =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(data),
+  });

app/assets/javascripts/feature_flags/store/modules/new/mutation_types.js → app/assets/javascripts/feature_flags/store/new/mutation_types.js

-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';

app/assets/javascripts/feature_flags/store/modules/new/mutations.js → app/assets/javascripts/feature_flags/store/new/mutations.js

 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 = [];

app/assets/javascripts/feature_flags/store/modules/new/state.js → app/assets/javascripts/feature_flags/store/new/state.js

-export default () => ({
-  endpoint: null,
-  path: null,
+export default ({ endpoint, path }) => ({
+  endpoint,
+  path,
   isSendingRequest: false,
   error: [],
 });

app/assets/javascripts/pages/projects/feature_flags/edit/index.js

 import initEditFeatureFlags from '~/feature_flags/edit';
 
-document.addEventListener('DOMContentLoaded', initEditFeatureFlags);
+initEditFeatureFlags();

app/assets/javascripts/pages/projects/feature_flags/index/index.js

 import initFeatureFlags from '~/feature_flags';
 
-document.addEventListener('DOMContentLoaded', initFeatureFlags);
+initFeatureFlags();

app/assets/javascripts/pages/projects/feature_flags/new/index.js

 import initNewFeatureFlags from '~/feature_flags/new';
 
-document.addEventListener('DOMContentLoaded', initNewFeatureFlags);
+initNewFeatureFlags();

spec/frontend/feature_flags/components/edit_feature_flag_spec.js

@@ -6,7 +6,7 @@ import { TEST_HOST } from 'spec/test_constants';
 import { mockTracking } from 'helpers/tracking_helper';
 import { LEGACY_FLAG, NEW_VERSION_FLAG, NEW_FLAG_ALERT } from '~/feature_flags/constants';
 import Form from '~/feature_flags/components/form.vue';
-import editModule from '~/feature_flags/store/modules/edit';
+import createStore from '~/feature_flags/store/edit';
 import EditFeatureFlag from '~/feature_flags/components/edit_feature_flag.vue';
 import axios from '~/lib/utils/axios_utils';
 
@@ -20,10 +20,9 @@ describe('Edit feature flag form', () => {
   let wrapper;
   let mock;
 
-  const store = new Vuex.Store({
-    modules: {
-      edit: editModule,
-    },
+  const store = createStore({
+    path: '/feature_flags',
+    endpoint: `${TEST_HOST}/feature_flags.json`,
   });
 
   const factory = (opts = {}) => {
@@ -34,8 +33,6 @@ describe('Edit feature flag form', () => {
     wrapper = shallowMount(EditFeatureFlag, {
       localVue,
       propsData: {
-        endpoint: `${TEST_HOST}/feature_flags.json`,
-        path: '/feature_flags',
         environmentsEndpoint: 'environments.json',
         projectId: '8',
         featureFlagIssuesEndpoint: `${TEST_HOST}/feature_flags/5/issues`,
@@ -105,7 +102,7 @@ describe('Edit feature flag form', () => {
 
   describe('with error', () => {
     it('should render the error', () => {
-      store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });
+      store.dispatch('receiveUpdateFeatureFlagError', { message: ['The name is required'] });
       return wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.alert-danger').exists()).toEqual(true);
         expect(wrapper.find('.alert-danger').text()).toContain('The name is required');

spec/frontend/feature_flags/components/feature_flags_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import MockAdapter from 'axios-mock-adapter';
 import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import Api from '~/api';
-import { createStore } from '~/feature_flags/store';
+import createStore from '~/feature_flags/store/index';
 import FeatureFlagsTab from '~/feature_flags/components/feature_flags_tab.vue';
 import FeatureFlagsComponent from '~/feature_flags/components/feature_flags.vue';
 import FeatureFlagsTable from '~/feature_flags/components/feature_flags_table.vue';
@@ -14,19 +15,25 @@ import TablePagination from '~/vue_shared/components/pagination/table_pagination
 import axios from '~/lib/utils/axios_utils';
 import { getRequestData, userList } from '../mock_data';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('Feature flags', () => {
   const mockData = {
-    endpoint: `${TEST_HOST}/endpoint.json`,
     csrfToken: 'testToken',
     featureFlagsClientLibrariesHelpPagePath: '/help/feature-flags#unleash-clients',
     featureFlagsClientExampleHelpPagePath: '/help/feature-flags#client-example',
     unleashApiUrl: `${TEST_HOST}/api/unleash`,
-    unleashApiInstanceId: 'oP6sCNRqtRHmpy1gw2-F',
     canUserConfigure: true,
     canUserRotateToken: true,
     newFeatureFlagPath: 'feature-flags/new',
     newUserListPath: '/user-list/new',
+  };
+
+  const mockState = {
+    endpoint: `${TEST_HOST}/endpoint.json`,
     projectId: '8',
+    unleashApiInstanceId: 'oP6sCNRqtRHmpy1gw2-F',
   };
 
   let wrapper;
@@ -34,8 +41,9 @@ describe('Feature flags', () => {
   let store;
 
   const factory = (propsData = mockData, fn = shallowMount) => {
-    store = createStore();
+    store = createStore(mockState);
     wrapper = fn(FeatureFlagsComponent, {
+      localVue,
       store,
       propsData,
       provide: {
@@ -76,7 +84,6 @@ describe('Feature flags', () => {
 
   describe('without permissions', () => {
     const propsData = {
-      endpoint: `${TEST_HOST}/endpoint.json`,
       csrfToken: 'testToken',
       errorStateSvgPath: '/assets/illustrations/feature_flag.svg',
       featureFlagsHelpPagePath: '/help/feature-flags',
@@ -85,8 +92,6 @@ describe('Feature flags', () => {
       featureFlagsClientLibrariesHelpPagePath: '/help/feature-flags#unleash-clients',
       featureFlagsClientExampleHelpPagePath: '/help/feature-flags#client-example',
       unleashApiUrl: `${TEST_HOST}/api/unleash`,
-      unleashApiInstanceId: 'oP6sCNRqtRHmpy1gw2-F',
-      projectId: '8',
     };
 
     beforeEach(done => {
@@ -134,7 +139,7 @@ describe('Feature flags', () => {
       let emptyState;
 
       beforeEach(async () => {
-        mock.onGet(mockData.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } }).reply(
+        mock.onGet(mockState.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } }).reply(
           200,
           {
             feature_flags: [],
@@ -154,8 +159,6 @@ describe('Feature flags', () => {
       });
 
       it('should render the empty state', async () => {
-        await axios.waitForAll();
-        emptyState = wrapper.find(GlEmptyState);
         expect(emptyState.exists()).toBe(true);
       });
 
@@ -182,7 +185,7 @@ describe('Feature flags', () => {
     describe('with paginated feature flags', () => {
       beforeEach(done => {
         mock
-          .onGet(mockData.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
+          .onGet(mockState.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
           .replyOnce(200, getRequestData, {
             'x-next-page': '2',
             'x-page': '1',
@@ -218,7 +221,7 @@ describe('Feature flags', () => {
         const [flag] = table.props(FEATURE_FLAG_SCOPE);
         table.vm.$emit('toggle-flag', flag);
 
-        expect(store.dispatch).toHaveBeenCalledWith('index/toggleFeatureFlag', flag);
+        expect(store.dispatch).toHaveBeenCalledWith('toggleFeatureFlag', flag);
       });
 
       it('renders configure button', () => {
@@ -287,7 +290,7 @@ describe('Feature flags', () => {
   describe('unsuccessful request', () => {
     beforeEach(done => {
       mock
-        .onGet(mockData.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
+        .onGet(mockState.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
         .replyOnce(500, {});
       Api.fetchFeatureFlagUserLists.mockRejectedValueOnce();
 

spec/frontend/feature_flags/components/new_feature_flag_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { GlAlert } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import Form from '~/feature_flags/components/form.vue';
-import newModule from '~/feature_flags/store/modules/new';
+import createStore from '~/feature_flags/store/new';
 import NewFeatureFlag from '~/feature_flags/components/new_feature_flag.vue';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
@@ -17,13 +17,15 @@ import { allUsersStrategy } from '../mock_data';
 const userCalloutId = 'feature_flags_new_version';
 const userCalloutsPath = `${TEST_HOST}/user_callouts`;
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('New feature flag form', () => {
   let wrapper;
 
-  const store = new Vuex.Store({
-    modules: {
-      new: newModule,
-    },
+  const store = createStore({
+    endpoint: `${TEST_HOST}/feature_flags.json`,
+    path: '/feature_flags',
   });
 
   const factory = (opts = {}) => {
@@ -32,9 +34,8 @@ describe('New feature flag form', () => {
       wrapper = null;
     }
     wrapper = shallowMount(NewFeatureFlag, {
+      localVue,
       propsData: {
-        endpoint: `${TEST_HOST}/feature_flags.json`,
-        path: '/feature_flags',
         environmentsEndpoint: 'environments.json',
         projectId: '8',
         showUserCallout: true,
@@ -63,7 +64,7 @@ describe('New feature flag form', () => {
 
   describe('with error', () => {
     it('should render the error', () => {
-      store.dispatch('new/receiveCreateFeatureFlagError', { message: ['The name is required'] });
+      store.dispatch('receiveCreateFeatureFlagError', { message: ['The name is required'] });
       return wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.alert').exists()).toEqual(true);
         expect(wrapper.find('.alert').text()).toContain('The name is required');

spec/frontend/feature_flags/store/edit/actions_spec.js

@@ -2,8 +2,6 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
 import {
-  setEndpoint,
-  setPath,
   updateFeatureFlag,
   requestUpdateFeatureFlag,
   receiveUpdateFeatureFlagSuccess,
@@ -13,18 +11,15 @@ import {
   receiveFeatureFlagSuccess,
   receiveFeatureFlagError,
   toggleActive,
-} from '~/feature_flags/store/modules/edit/actions';
-import state from '~/feature_flags/store/modules/edit/state';
-import {
-  mapStrategiesToRails,
-  mapFromScopesViewModel,
-} from '~/feature_flags/store/modules/helpers';
+} from '~/feature_flags/store/edit/actions';
+import state from '~/feature_flags/store/edit/state';
+import { mapStrategiesToRails, mapFromScopesViewModel } from '~/feature_flags/store/helpers';
 import {
   NEW_VERSION_FLAG,
   LEGACY_FLAG,
   ROLLOUT_STRATEGY_ALL_USERS,
 } from '~/feature_flags/constants';
-import * as types from '~/feature_flags/store/modules/edit/mutation_types';
+import * as types from '~/feature_flags/store/edit/mutation_types';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/lib/utils/url_utility');
@@ -33,33 +28,7 @@ describe('Feature flags Edit Module actions', () => {
   let mockedState;
 
   beforeEach(() => {
-    mockedState = state();
-  });
-
-  describe('setEndpoint', () => {
-    it('should commit SET_ENDPOINT mutation', done => {
-      testAction(
-        setEndpoint,
-        'feature_flags.json',
-        mockedState,
-        [{ type: types.SET_ENDPOINT, payload: 'feature_flags.json' }],
-        [],
-        done,
-      );
-    });
-  });
-
-  describe('setPath', () => {
-    it('should commit SET_PATH mutation', done => {
-      testAction(
-        setPath,
-        '/feature_flags',
-        mockedState,
-        [{ type: types.SET_PATH, payload: '/feature_flags' }],
-        [],
-        done,
-      );
-    });
+    mockedState = state({ endpoint: 'feature_flags.json', path: '/feature_flags' });
   });
 
   describe('updateFeatureFlag', () => {

spec/frontend/feature_flags/store/edit/mutations_spec.js

-import state from '~/feature_flags/store/modules/edit/state';
-import mutations from '~/feature_flags/store/modules/edit/mutations';
-import * as types from '~/feature_flags/store/modules/edit/mutation_types';
+import state from '~/feature_flags/store/edit/state';
+import mutations from '~/feature_flags/store/edit/mutations';
+import * as types from '~/feature_flags/store/edit/mutation_types';
 
 describe('Feature flags Edit Module Mutations', () => {
   let stateCopy;
 
   beforeEach(() => {
-    stateCopy = state();
-  });
-
-  describe('SET_ENDPOINT', () => {
-    it('should set endpoint', () => {
-      mutations[types.SET_ENDPOINT](stateCopy, 'feature_flags.json');
-
-      expect(stateCopy.endpoint).toEqual('feature_flags.json');
-    });
-  });
-
-  describe('SET_PATH', () => {
-    it('should set provided options', () => {
-      mutations[types.SET_PATH](stateCopy, 'feature_flags');
-
-      expect(stateCopy.path).toEqual('feature_flags');
-    });
+    stateCopy = state({ endpoint: 'feature_flags.json', path: '/feature_flags' });
   });
 
   describe('REQUEST_FEATURE_FLAG', () => {

spec/frontend/feature_flags/store/helpers_spec.js

@@ -5,7 +5,7 @@ import {
   createNewEnvironmentScope,
   mapStrategiesToViewModel,
   mapStrategiesToRails,
-} from '~/feature_flags/store/modules/helpers';
+} from '~/feature_flags/store/helpers';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,

spec/frontend/feature_flags/store/index/actions_spec.js

@@ -7,10 +7,7 @@ import {
   receiveFeatureFlagsSuccess,
   receiveFeatureFlagsError,
   fetchFeatureFlags,
-  setFeatureFlagsEndpoint,
   setFeatureFlagsOptions,
-  setInstanceIdEndpoint,
-  setInstanceId,
   rotateInstanceId,
   requestRotateInstanceId,
   receiveRotateInstanceIdSuccess,
@@ -26,10 +23,10 @@ import {
   deleteUserList,
   receiveDeleteUserListError,
   clearAlert,
-} from '~/feature_flags/store/modules/index/actions';
-import { mapToScopesViewModel } from '~/feature_flags/store/modules/helpers';
-import state from '~/feature_flags/store/modules/index/state';
-import * as types from '~/feature_flags/store/modules/index/mutation_types';
+} from '~/feature_flags/store/index/actions';
+import { mapToScopesViewModel } from '~/feature_flags/store/helpers';
+import state from '~/feature_flags/store/index/state';
+import * as types from '~/feature_flags/store/index/mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import { getRequestData, rotateData, featureFlag, userList } from '../../mock_data';
 
@@ -39,20 +36,7 @@ describe('Feature flags actions', () => {
   let mockedState;
 
   beforeEach(() => {
-    mockedState = state();
-  });
-
-  describe('setFeatureFlagsEndpoint', () => {
-    it('should commit SET_FEATURE_FLAGS_ENDPOINT mutation', done => {
-      testAction(
-        setFeatureFlagsEndpoint,
-        'feature_flags.json',
-        mockedState,
-        [{ type: types.SET_FEATURE_FLAGS_ENDPOINT, payload: 'feature_flags.json' }],
-        [],
-        done,
-      );
-    });
+    mockedState = state({});
   });
 
   describe('setFeatureFlagsOptions', () => {
@@ -68,32 +52,6 @@ describe('Feature flags actions', () => {
     });
   });
 
-  describe('setInstanceIdEndpoint', () => {
-    it('should commit SET_INSTANCE_ID_ENDPOINT mutation', done => {
-      testAction(
-        setInstanceIdEndpoint,
-        'instance_id.json',
-        mockedState,
-        [{ type: types.SET_INSTANCE_ID_ENDPOINT, payload: 'instance_id.json' }],
-        [],
-        done,
-      );
-    });
-  });
-
-  describe('setInstanceId', () => {
-    it('should commit SET_INSTANCE_ID mutation', done => {
-      testAction(
-        setInstanceId,
-        'test_instance_id',
-        mockedState,
-        [{ type: types.SET_INSTANCE_ID, payload: 'test_instance_id' }],
-        [],
-        done,
-      );
-    });
-  });
-
   describe('fetchFeatureFlags', () => {
     let mock;
 

spec/frontend/feature_flags/store/index/mutations_spec.js

-import state from '~/feature_flags/store/modules/index/state';
-import mutations from '~/feature_flags/store/modules/index/mutations';
-import * as types from '~/feature_flags/store/modules/index/mutation_types';
-import { mapToScopesViewModel } from '~/feature_flags/store/modules/helpers';
+import state from '~/feature_flags/store/index/state';
+import mutations from '~/feature_flags/store/index/mutations';
+import * as types from '~/feature_flags/store/index/mutation_types';
+import { mapToScopesViewModel } from '~/feature_flags/store/helpers';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { getRequestData, rotateData, featureFlag, userList } from '../../mock_data';
 
@@ -9,15 +9,7 @@ describe('Feature flags store Mutations', () => {
   let stateCopy;
 
   beforeEach(() => {
-    stateCopy = state();
-  });
-
-  describe('SET_FEATURE_FLAGS_ENDPOINT', () => {
-    it('should set endpoint', () => {
-      mutations[types.SET_FEATURE_FLAGS_ENDPOINT](stateCopy, 'feature_flags.json');
-
-      expect(stateCopy.endpoint).toEqual('feature_flags.json');
-    });
+    stateCopy = state({});
   });
 
   describe('SET_FEATURE_FLAGS_OPTIONS', () => {
@@ -27,23 +19,6 @@ describe('Feature flags store Mutations', () => {
       expect(stateCopy.options).toEqual({ page: '1', scope: 'all' });
     });
   });
-
-  describe('SET_INSTANCE_ID_ENDPOINT', () => {
-    it('should set provided endpoint', () => {
-      mutations[types.SET_INSTANCE_ID_ENDPOINT](stateCopy, 'rotate_token.json');
-
-      expect(stateCopy.rotateEndpoint).toEqual('rotate_token.json');
-    });
-  });
-
-  describe('SET_INSTANCE_ID', () => {
-    it('should set provided token', () => {
-      mutations[types.SET_INSTANCE_ID](stateCopy, rotateData.token);
-
-      expect(stateCopy.instanceId).toEqual(rotateData.token);
-    });
-  });
-
   describe('REQUEST_FEATURE_FLAGS', () => {
     it('should set isLoading to true', () => {
       mutations[types.REQUEST_FEATURE_FLAGS](stateCopy);

spec/frontend/feature_flags/store/new/actions_spec.js

@@ -2,25 +2,20 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
 import {
-  setEndpoint,
-  setPath,
   createFeatureFlag,
   requestCreateFeatureFlag,
   receiveCreateFeatureFlagSuccess,
   receiveCreateFeatureFlagError,
-} from '~/feature_flags/store/modules/new/actions';
-import state from '~/feature_flags/store/modules/new/state';
-import * as types from '~/feature_flags/store/modules/new/mutation_types';
+} from '~/feature_flags/store/new/actions';
+import state from '~/feature_flags/store/new/state';
+import * as types from '~/feature_flags/store/new/mutation_types';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
   LEGACY_FLAG,
   NEW_VERSION_FLAG,
 } from '~/feature_flags/constants';
-import {
-  mapFromScopesViewModel,
-  mapStrategiesToRails,
-} from '~/feature_flags/store/modules/helpers';
+import { mapFromScopesViewModel, mapStrategiesToRails } from '~/feature_flags/store/helpers';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/lib/utils/url_utility');
@@ -29,33 +24,7 @@ describe('Feature flags New Module Actions', () => {
   let mockedState;
 
   beforeEach(() => {
-    mockedState = state();
-  });
-
-  describe('setEndpoint', () => {
-    it('should commit SET_ENDPOINT mutation', done => {
-      testAction(
-        setEndpoint,
-        'feature_flags.json',
-        mockedState,
-        [{ type: types.SET_ENDPOINT, payload: 'feature_flags.json' }],
-        [],
-        done,
-      );
-    });
-  });
-
-  describe('setPath', () => {
-    it('should commit SET_PATH mutation', done => {
-      testAction(
-        setPath,
-        '/feature_flags',
-        mockedState,
-        [{ type: types.SET_PATH, payload: '/feature_flags' }],
-        [],
-        done,
-      );
-    });
+    mockedState = state({ endpoint: 'feature_flags.json', path: '/feature_flags' });
   });
 
   describe('createFeatureFlag', () => {

spec/frontend/feature_flags/store/new/mutations_spec.js

-import state from '~/feature_flags/store/modules/new/state';
-import mutations from '~/feature_flags/store/modules/new/mutations';
-import * as types from '~/feature_flags/store/modules/new/mutation_types';
+import state from '~/feature_flags/store/new/state';
+import mutations from '~/feature_flags/store/new/mutations';
+import * as types from '~/feature_flags/store/new/mutation_types';
 
 describe('Feature flags New Module Mutations', () => {
   let stateCopy;
 
   beforeEach(() => {
-    stateCopy = state();
-  });
-
-  describe('SET_ENDPOINT', () => {
-    it('should set endpoint', () => {
-      mutations[types.SET_ENDPOINT](stateCopy, 'feature_flags.json');
-
-      expect(stateCopy.endpoint).toEqual('feature_flags.json');
-    });
-  });
-
-  describe('SET_PATH', () => {
-    it('should set provided options', () => {
-      mutations[types.SET_PATH](stateCopy, 'feature_flags');
-
-      expect(stateCopy.path).toEqual('feature_flags');
-    });
+    stateCopy = state({ endpoint: 'feature_flags.json', path: 'feature_flags' });
   });
 
   describe('REQUEST_CREATE_FEATURE_FLAG', () => {