Add checkboxes to automatically run AutoDevops pipeline

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38962

5 files changed, 40 insertions, 4 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 34708977d20..9e84e441ae8 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -521,6 +521,13 @@ import ProjectVariables from './project_variables';
         case 'projects:settings:ci_cd:show':
           // Initialize expandable settings panels
           initSettingsPanels();
+
+          import(/* webpackChunkName: "ci-cd-settings" */ './projects/ci_cd_settings_bundle')
+            .then(ciCdSettings => ciCdSettings.default())
+            .catch((err) => {
+              Flash(s__('ProjectSettings|Problem setting up the CI/CD settings JavaScript'));
+              throw err;
+            });
         case 'groups:settings:ci_cd:show':
           new ProjectVariables();
           break;
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 67261c1c9b4..44deab9288e 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -41,7 +41,7 @@ const createFlashEl = (message, type, isInContentWrapper = false) => `
 `;
 
 const removeFlashClickListener = (flashEl, fadeTransition) => {
-  flashEl.parentNode.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
+  flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
 };
 
 /*
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 08e326cba9c..5e0edd823be 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -301,6 +301,8 @@ $(function () {
   const flashContainer = document.querySelector('.flash-container');
 
   if (flashContainer && flashContainer.children.length) {
-    removeFlashClickListener(flashContainer.children[0]);
+    flashContainer.querySelectorAll('.flash-alert, .flash-notice, .flash-success').forEach((flashEl) => {
+      removeFlashClickListener(flashEl);
+    });
   }
 });
diff --git a/app/assets/javascripts/projects/ci_cd_settings_bundle.js b/app/assets/javascripts/projects/ci_cd_settings_bundle.js
new file mode 100644
index 00000000000..90e418f6771
--- /dev/null
+++ b/app/assets/javascripts/projects/ci_cd_settings_bundle.js
@@ -0,0 +1,19 @@
+function updateAutoDevopsRadios(radioWrappers) {
+  radioWrappers.forEach((radioWrapper) => {
+    const radio = radioWrapper.querySelector('.js-auto-devops-enable-radio');
+    const runPipelineCheckboxWrapper = radioWrapper.querySelector('.js-run-auto-devops-pipeline-checkbox-wrapper');
+    const runPipelineCheckbox = radioWrapper.querySelector('.js-run-auto-devops-pipeline-checkbox');
+
+    if (runPipelineCheckbox) {
+      runPipelineCheckbox.checked = radio.checked;
+      runPipelineCheckboxWrapper.classList.toggle('hide', !radio.checked);
+    }
+  });
+}
+
+export default function initCiCdSettings() {
+  const radioWrappers = document.querySelectorAll('.js-auto-devops-enable-radio-wrapper');
+  radioWrappers.forEach(radioWrapper =>
+    radioWrapper.addEventListener('change', () => updateAutoDevopsRadios(radioWrappers)),
+  );
+}
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index e1b086ebb2b..88ce119ee3a 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -34,8 +34,15 @@
     }
   }
 
+  .flash-success {
+    @extend .alert;
+    @extend .alert-success;
+    margin: 0;
+  }
+
   .flash-notice,
-  .flash-alert {
+  .flash-alert,
+  .flash-success {
     border-radius: $border-radius-default;
 
     .container-fluid,
@@ -48,7 +55,8 @@
     margin-bottom: 0;
 
     .flash-notice,
-    .flash-alert {
+    .flash-alert,
+    .flash-success {
       border-radius: 0;
     }
   }