Remove Edit Module from Feature Flags Store

This allows us to pass initialization data into the store and remove a
few simple props and actions completely.

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/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/modules/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/store/index.js

@@ -2,7 +2,6 @@ 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);
 
@@ -11,7 +10,6 @@ export const createStore = () =>
     modules: {
       index: indexModule,
       new: newModule,
-      edit: editModule,
     },
   });
 

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

@@ -6,20 +6,6 @@ import { __ } from '~/locale';
 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/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

-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

@@ -3,12 +3,6 @@ import { mapToScopesViewModel, mapStrategiesToViewModel } from '../helpers';
 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

 import { LEGACY_FLAG } from '../../../constants';
 
-export default () => ({
-  endpoint: null,
-  path: null,
+export default ({ path, endpoint }) => ({
+  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();

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/modules/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/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,
@@ -33,33 +31,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

@@ -6,23 +6,7 @@ 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', () => {