Remove New 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/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,
@@ -14,24 +13,13 @@ import { createNewEnvironmentScope } from '../store/modules/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/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/modules/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/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 import indexModule from './modules/index';
-import newModule from './modules/new';
 
 Vue.use(Vuex);
 
@@ -9,7 +8,6 @@ export const createStore = () =>
   new Vuex.Store({
     modules: {
       index: indexModule,
-      new: newModule,
     },
   });
 

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

@@ -4,20 +4,6 @@ import { visitUrl } from '~/lib/utils/url_utility';
 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/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

-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

 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

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

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/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/modules/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/new/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,
   createFeatureFlag,
   requestCreateFeatureFlag,
   receiveCreateFeatureFlagSuccess,
@@ -29,33 +27,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

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