Update approvals createStore

Update the approval rules createStore function to allow for
multiple modules, this will by the project approval app
to mount with both the approval and approvalSettings stores.

ee/app/assets/javascripts/approvals/components/approval_settings.vue

@@ -23,10 +23,10 @@ export default {
   },
   computed: {
     ...mapState({
-      isLoading: (state) => state.approvals.isLoading,
-      isUpdated: (state) => state.approvals.isUpdated,
-      settings: (state) => state.approvals.settings,
-      errorMessage: (state) => state.approvals.errorMessage,
+      isLoading: (state) => state.approvalSettings.isLoading,
+      isUpdated: (state) => state.approvalSettings.isUpdated,
+      settings: (state) => state.approvalSettings.settings,
+      errorMessage: (state) => state.approvalSettings.errorMessage,
     }),
     ...mapComputed(
       [
@@ -37,7 +37,7 @@ export default {
         { key: 'requireUserPassword', updateFn: 'setRequireUserPassword' },
       ],
       undefined,
-      (state) => state.approvals.settings,
+      (state) => state.approvalSettings.settings,
     ),
     hasSettings() {
       return !isEmpty(this.settings);

ee/app/assets/javascripts/approvals/mount_group_settings.js

@@ -11,7 +11,9 @@ const mountGroupApprovalSettings = (el) => {
   }
 
   const { defaultExpanded, approvalSettingsPath } = el.dataset;
-  const store = createStore(approvalSettingsModule(groupApprovalsMappers));
+  const store = createStore({
+    approvalSettings: approvalSettingsModule(groupApprovalsMappers),
+  });
 
   return new Vue({
     el,

ee/app/assets/javascripts/approvals/mount_mr_edit.js

@@ -13,15 +13,18 @@ export default function mountApprovalInput(el) {
     document.querySelector('#js-target-branch-title')?.textContent ||
     document.querySelector('#merge_request_target_branch')?.value;
 
-  const store = createStore(mrEditModule(), {
-    ...el.dataset,
-    prefix: 'mr-edit',
-    canEdit: parseBoolean(el.dataset.canEdit),
-    canUpdateApprovers: parseBoolean(el.dataset.canUpdateApprovers),
-    showCodeOwnerTip: parseBoolean(el.dataset.showCodeOwnerTip),
-    allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
-    canOverride: parseBoolean(el.dataset.canOverride),
-  });
+  const store = createStore(
+    { approvals: mrEditModule() },
+    {
+      ...el.dataset,
+      prefix: 'mr-edit',
+      canEdit: parseBoolean(el.dataset.canEdit),
+      canUpdateApprovers: parseBoolean(el.dataset.canUpdateApprovers),
+      showCodeOwnerTip: parseBoolean(el.dataset.showCodeOwnerTip),
+      allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
+      canOverride: parseBoolean(el.dataset.canOverride),
+    },
+  );
 
   store.dispatch('setTargetBranch', targetBranch);
 

ee/app/assets/javascripts/approvals/mount_project_settings.js

@@ -15,12 +15,15 @@ export default function mountProjectSettingsApprovals(el) {
     coverageCheckHelpPagePath,
   } = el.dataset;
 
-  const store = createStore(projectSettingsModule(), {
-    ...el.dataset,
-    prefix: 'project-settings',
-    allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
-    canEdit: parseBoolean(el.dataset.canEdit),
-  });
+  const store = createStore(
+    { approvals: projectSettingsModule() },
+    {
+      ...el.dataset,
+      prefix: 'project-settings',
+      allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
+      canEdit: parseBoolean(el.dataset.canEdit),
+    },
+  );
 
   return new Vue({
     el,

ee/app/assets/javascripts/approvals/stores/index.js

@@ -3,10 +3,10 @@ import securityConfigurationModule from 'ee/security_configuration/modules/confi
 import modalModule from '~/vuex_shared/modules/modal';
 import state from './state';
 
-export const createStoreOptions = (approvalsModule, settings) => ({
+export const createStoreOptions = (approvalsModules, settings) => ({
   state: state(settings),
   modules: {
-    ...(approvalsModule ? { approvals: approvalsModule } : {}),
+    ...approvalsModules,
     createModal: modalModule(),
     deleteModal: modalModule(),
     securityConfiguration: securityConfigurationModule({
@@ -15,5 +15,5 @@ export const createStoreOptions = (approvalsModule, settings) => ({
   },
 });
 
-export default (approvalsModule, settings = {}) =>
-  new Vuex.Store(createStoreOptions(approvalsModule, settings));
+export default (approvalModules, settings = {}) =>
+  new Vuex.Store(createStoreOptions(approvalModules, settings));

ee/spec/frontend/approvals/components/app_spec.js

@@ -38,10 +38,13 @@ describe('EE Approvals App', () => {
       rules: `<div class="${TEST_RULES_CLASS}">These are the rules!</div>`,
     };
 
-    store = createStoreOptions(settingsModule(), {
-      canEdit: true,
-      prefix: APP_PREFIX,
-    });
+    store = createStoreOptions(
+      { approvals: settingsModule() },
+      {
+        canEdit: true,
+        prefix: APP_PREFIX,
+      },
+    );
 
     store.modules.approvals.actions = {
       fetchRules: jest.fn().mockResolvedValue(),

ee/spec/frontend/approvals/components/approval_settings_spec.js

@@ -30,7 +30,7 @@ describe('ApprovalSettings', () => {
     jest.spyOn(actions, 'dismissErrorMessage').mockImplementation();
     jest.spyOn(actions, 'dismissSuccessMessage').mockImplementation();
 
-    store = createStore(module);
+    store = createStore({ approvalSettings: module });
   };
 
   const createWrapper = () => {

ee/spec/frontend/approvals/components/group_settings/app_spec.js

@@ -43,7 +43,7 @@ describe('EE Approvals Group Settings App', () => {
     axiosMock = new MockAdapter(axios);
     axiosMock.onGet('*');
 
-    store = createStoreOptions(approvalSettingsModule(groupApprovalsMappers));
+    store = createStoreOptions({ approvalSettings: approvalSettingsModule(groupApprovalsMappers) });
   });
 
   afterEach(() => {

ee/spec/frontend/approvals/components/mr_edit/app_spec.js

@@ -32,7 +32,7 @@ describe('EE Approvals MREditApp', () => {
     axiosMock = new MockAdapter(axios);
     axiosMock.onGet('*');
 
-    store = createStoreOptions(MREditModule());
+    store = createStoreOptions({ approvals: MREditModule() });
     store.modules.approvals.state.hasLoaded = true;
   });
 

ee/spec/frontend/approvals/components/mr_edit/mr_rules_hidden_inputs_spec.js

@@ -34,7 +34,7 @@ describe('EE Approvlas MRRulesHiddenInputs', () => {
   };
 
   beforeEach(() => {
-    store = createStoreOptions(MREditModule());
+    store = createStoreOptions({ approvals: MREditModule() });
     store.modules.approvals.state = {
       rules: [],
       rulesToDelete: [],

ee/spec/frontend/approvals/components/mr_edit/mr_rules_spec.js

@@ -46,7 +46,7 @@ describe('EE Approvals MRRules', () => {
       .fn()
       .mockImplementation((args) => new OriginalMutationObserver(args));
 
-    store = createStoreOptions(MREditModule());
+    store = createStoreOptions({ approvals: MREditModule() });
     store.modules.approvals.state = {
       hasLoaded: true,
       rules: [],

ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js

@@ -26,7 +26,7 @@ describe('Rule Input', () => {
   };
 
   beforeEach(() => {
-    store = createStoreOptions(MREditModule());
+    store = createStoreOptions({ approvals: MREditModule() });
     store.state.settings.canEdit = true;
 
     store.modules.approvals.actions = {

ee/spec/frontend/approvals/components/project_settings/project_rules_spec.js

@@ -41,7 +41,7 @@ describe('Approvals ProjectRules', () => {
   };
 
   beforeEach(() => {
-    store = createStoreOptions(projectSettingsModule());
+    store = createStoreOptions({ approvals: projectSettingsModule() });
     store.modules.approvals.state.rules = TEST_RULES;
   });
 

ee/spec/frontend/approvals/components/rule_controls_spec.js

@@ -33,7 +33,7 @@ describe('EE Approvals RuleControls', () => {
   const findRemoveButton = () => findButton('Remove');
 
   beforeEach(() => {
-    store = createStoreOptions(MREditModule());
+    store = createStoreOptions({ approvals: MREditModule() });
     ({ actions } = store.modules.approvals);
     ['requestEditRule', 'requestDeleteRule'].forEach((actionName) =>
       jest.spyOn(actions, actionName),

ee/spec/frontend/approvals/components/rule_form_spec.js

@@ -104,7 +104,10 @@ describe('EE Approvals RuleForm', () => {
   ];
 
   beforeEach(() => {
-    store = createStoreOptions(projectSettingsModule(), { projectId: TEST_PROJECT_ID });
+    store = createStoreOptions(
+      { approvals: projectSettingsModule() },
+      { projectId: TEST_PROJECT_ID },
+    );
 
     ['postRule', 'putRule', 'deleteRule', 'putFallbackRule'].forEach((actionName) => {
       jest.spyOn(store.modules.approvals.actions, actionName).mockImplementation(() => {});

ee/spec/frontend/approvals/components/security_configuration/unconfigured_security_rules_spec.js

@@ -31,7 +31,7 @@ describe('UnconfiguredSecurityRules component', () => {
 
   beforeEach(() => {
     store = new Vuex.Store(
-      createStoreOptions(projectSettingsModule(), { projectId: TEST_PROJECT_ID }),
+      createStoreOptions({ approvals: projectSettingsModule() }, { projectId: TEST_PROJECT_ID }),
     );
     jest.spyOn(store, 'dispatch');
   });