Merge branch '335964-refactor-create-approvals-store' into 'master'

Update createStore to allow for multiple approval modules

See merge request gitlab-org/gitlab!66953

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