Refactor init logic of merge request options on project settings page

Changelog: fixed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/67334

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

@@ -2,7 +2,7 @@
 
 import '~/pages/projects/edit';
 import mountApprovals from 'ee/approvals/mount_project_settings';
-import initMergeOptionSettings from 'ee/pages/projects/edit/merge_options';
+import { initMergeOptionSettings } from 'ee/pages/projects/edit/merge_options';
 import initProjectAdjournedDeleteButton from 'ee/projects/project_adjourned_delete_button';
 import mountStatusChecks from 'ee/status_checks/mount';
 import groupsSelect from '~/groups_select';

ee/app/assets/javascripts/pages/projects/edit/merge_options.js

 import gql from 'graphql-tag';
+import createFlash from '~/flash';
 import createDefaultClient from '~/lib/graphql';
+import { s__ } from '~/locale';
 
-const containerEl = document.querySelector('#project-merge-options');
+export const ERROR_LOADING_MERGE_OPTION_SETTINGS = s__(
+  'Settings|Unable to load the merge request options settings. Try reloading the page.',
+);
 const mergePipelinesCheckbox = document.querySelector('.js-merge-options-merge-pipelines');
 const mergeTrainsCheckbox = document.querySelector('.js-merge-options-merge-trains');
 
@@ -18,39 +22,49 @@ const getCiCdSettingsQuery = (projectFullPath) =>
     }
   `;
 
-const disableMergeTrains = () => {
-  mergeTrainsCheckbox.disabled = true;
-  mergeTrainsCheckbox.checked = false;
+const initMergeOptions = (mergePipelinesEnabled, mergeTrainsEnabled) => {
+  if (!mergePipelinesCheckbox) {
+    return;
+  }
+
+  mergePipelinesCheckbox.disabled = false;
+  mergePipelinesCheckbox.checked = mergePipelinesEnabled;
+
+  if (mergeTrainsCheckbox) {
+    mergeTrainsCheckbox.disabled = !mergePipelinesEnabled;
+    mergeTrainsCheckbox.checked = mergeTrainsEnabled;
+
+    mergePipelinesCheckbox.addEventListener('change', () => {
+      if (!mergePipelinesCheckbox.checked) {
+        mergeTrainsCheckbox.checked = false;
+      }
+      mergeTrainsCheckbox.disabled = !mergePipelinesCheckbox.checked;
+    });
+  }
 };
 
-export default function initMergeOptions() {
+const fetchMergeOptions = () => {
+  const containerEl = document.querySelector('#project-merge-options');
   const { projectFullPath } = containerEl.dataset;
   const defaultClient = createDefaultClient();
 
-  defaultClient
+  return defaultClient
     .query({
       query: getCiCdSettingsQuery(projectFullPath),
     })
     .then((result) => {
       const { mergePipelinesEnabled, mergeTrainsEnabled } = result?.data?.project?.ciCdSettings;
-      mergePipelinesCheckbox.checked = mergePipelinesEnabled;
-      mergeTrainsCheckbox.checked = mergeTrainsEnabled;
 
-      if (!mergePipelinesEnabled) {
-        disableMergeTrains();
-      }
-    })
-    .catch(() => {
-      if (!mergePipelinesCheckbox.checked) {
-        disableMergeTrains();
-      }
+      return { mergePipelinesEnabled, mergeTrainsEnabled };
     });
+};
 
-  mergePipelinesCheckbox.addEventListener('change', () => {
-    mergeTrainsCheckbox.disabled = !mergePipelinesCheckbox.checked;
-
-    if (!mergePipelinesCheckbox.checked) {
-      mergeTrainsCheckbox.checked = false;
-    }
-  });
-}
+export const initMergeOptionSettings = () => {
+  return fetchMergeOptions()
+    .then(({ mergePipelinesEnabled, mergeTrainsEnabled }) => {
+      initMergeOptions(mergePipelinesEnabled, mergeTrainsEnabled);
+    })
+    .catch((error) => {
+      createFlash({ message: ERROR_LOADING_MERGE_OPTION_SETTINGS, error, captureError: true });
+    });
+};

ee/app/views/projects/_merge_pipelines_settings.html.haml

 - return unless merge_pipelines_available?
 
 .form-check.builds-feature
-  = form.check_box :merge_pipelines_enabled, class: 'form-check-input js-merge-options-merge-pipelines', data: { qa_selector: 'merged_results_pipeline_checkbox' }
+  = form.check_box :merge_pipelines_enabled, class: 'form-check-input js-merge-options-merge-pipelines', data: { qa_selector: 'merged_results_pipeline_checkbox' }, disabled: 'disabled'
   = form.label :merge_pipelines_enabled, class: 'form-check-label' do
     = s_('ProjectSettings|Enable merged results pipelines')
     .text-secondary.mb-2

ee/spec/frontend/pages/projects/edit/merge_options_spec.js

+import {
+  initMergeOptionSettings,
+  ERROR_LOADING_MERGE_OPTION_SETTINGS,
+} from 'ee/pages/projects/edit/merge_options';
+import { setHTMLFixture } from 'helpers/fixtures';
+import createFlash from '~/flash';
+import * as createDefaultClient from '~/lib/graphql';
+
+jest.mock('~/flash');
+
+describe('MergOptions', () => {
+  beforeEach(() => {
+    setHTMLFixture(`
+      <div id="project-merge-options"></div/>
+    `);
+
+    createDefaultClient.default = jest.fn(() => ({
+      query: jest.fn().mockRejectedValue('Error'),
+    }));
+  });
+
+  it('shows flash message on network error', async () => {
+    await initMergeOptionSettings();
+
+    expect(createFlash).toHaveBeenCalledWith({
+      message: ERROR_LOADING_MERGE_OPTION_SETTINGS,
+      error: 'Error',
+      captureError: true,
+    });
+  });
+});

locale/gitlab.pot

@@ -30231,6 +30231,9 @@ msgstr ""
 msgid "Settings"
 msgstr ""
 
+msgid "Settings|Unable to load the merge request options settings. Try reloading the page."
+msgstr ""
+
 msgid "Setup"
 msgstr ""