Add latest changes from gitlab-org/gitlab@master

5 files changed, 50 insertions, 39 deletions

diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index 977811f81a4..74d99d02fc5 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -2,7 +2,6 @@ import { s__, __ } from '~/locale';
 
 export const TEST_INTEGRATION_EVENT = 'testIntegration';
 export const SAVE_INTEGRATION_EVENT = 'saveIntegration';
-export const TOGGLE_INTEGRATION_EVENT = 'toggleIntegration';
 export const VALIDATE_INTEGRATION_FORM_EVENT = 'validateIntegrationForm';
 
 export const integrationLevels = {
diff --git a/app/assets/javascripts/integrations/edit/components/active_checkbox.vue b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue
index 9804a9e15f6..5ddf3aeb639 100644
--- a/app/assets/javascripts/integrations/edit/components/active_checkbox.vue
+++ b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue
@@ -1,8 +1,6 @@
 <script>
 import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
-import { TOGGLE_INTEGRATION_EVENT } from '~/integrations/constants';
-import eventHub from '../event_hub';
 
 export default {
   name: 'ActiveCheckbox',
@@ -20,14 +18,11 @@ export default {
   },
   mounted() {
     this.activated = this.propsSource.initialActivated;
-    // Initialize view
-    this.$nextTick(() => {
-      this.onChange(this.activated);
-    });
+    this.onChange(this.activated);
   },
   methods: {
-    onChange(e) {
-      eventHub.$emit(TOGGLE_INTEGRATION_EVENT, e);
+    onChange(isChecked) {
+      this.$emit('toggle-integration-active', isChecked);
     },
   },
 };
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 767810950b1..a30c84bd4d2 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -37,12 +37,21 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
+    formSelector: {
+      type: String,
+      required: true,
+    },
     helpHtml: {
       type: String,
       required: false,
       default: '',
     },
   },
+  data() {
+    return {
+      integrationActive: false,
+    };
+  },
   computed: {
     ...mapGetters(['currentKey', 'propsSource', 'isDisabled']),
     ...mapState([
@@ -71,7 +80,7 @@ export default {
   },
   mounted() {
     // this form element is defined in Haml
-    this.form = document.querySelector('.js-integration-settings-form');
+    this.form = document.querySelector(this.formSelector);
   },
   methods: {
     ...mapActions([
@@ -84,11 +93,15 @@ export default {
     ]),
     onSaveClick() {
       this.setIsSaving(true);
-      eventHub.$emit(SAVE_INTEGRATION_EVENT);
+
+      const formValid = this.form.checkValidity() || this.integrationActive === false;
+      eventHub.$emit(SAVE_INTEGRATION_EVENT, formValid);
     },
     onTestClick() {
       this.setIsTesting(true);
-      eventHub.$emit(TEST_INTEGRATION_EVENT);
+
+      const formValid = this.form.checkValidity();
+      eventHub.$emit(TEST_INTEGRATION_EVENT, formValid);
     },
     onResetClick() {
       this.fetchResetIntegration();
@@ -97,6 +110,19 @@ export default {
       const formData = new FormData(this.form);
       this.requestJiraIssueTypes(formData);
     },
+    onToggleIntegrationState(integrationActive) {
+      this.integrationActive = integrationActive;
+      if (!this.form) {
+        return;
+      }
+
+      // If integration will be active, enable form validation.
+      if (integrationActive) {
+        this.form.removeAttribute('novalidate');
+      } else {
+        this.form.setAttribute('novalidate', true);
+      }
+    },
   },
   helpHtmlConfig: {
     ADD_ATTR: ['target'], // allow external links, can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427 is implemented
@@ -123,7 +149,11 @@ export default {
         <!-- helpHtml is trusted input -->
         <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div>
 
-        <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" />
+        <active-checkbox
+          v-if="propsSource.showActive"
+          :key="`${currentKey}-active-checkbox`"
+          @toggle-integration-active="onToggleIntegrationState"
+        />
         <jira-trigger-fields
           v-if="isJira"
           :key="`${currentKey}-jira-trigger-fields`"
@@ -167,6 +197,7 @@ export default {
             type="submit"
             :loading="isSaving"
             :disabled="isDisabled"
+            data-testid="save-button"
             data-qa-selector="save_changes_button"
             @click.prevent="onSaveClick"
           >
@@ -180,6 +211,7 @@ export default {
             :loading="isTesting"
             :disabled="isDisabled"
             :href="propsSource.testPath"
+            data-testid="test-button"
             @click.prevent="onTestClick"
           >
             {{ __('Test settings') }}
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index 792e7d8e85e..2e41d2914b7 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -85,7 +85,7 @@ function parseDatasetToProps(data) {
   };
 }
 
-export default (el, defaultEl) => {
+export default (el, defaultEl, formSelector) => {
   if (!el) {
     return null;
   }
@@ -112,6 +112,7 @@ export default (el, defaultEl) => {
       return createElement(IntegrationForm, {
         props: {
           helpHtml,
+          formSelector,
         },
       });
     },
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index 2b6959ed1cd..d3c227df1ee 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -5,7 +5,6 @@ import eventHub from './edit/event_hub';
 import {
   TEST_INTEGRATION_EVENT,
   SAVE_INTEGRATION_EVENT,
-  TOGGLE_INTEGRATION_EVENT,
   VALIDATE_INTEGRATION_FORM_EVENT,
   I18N_DEFAULT_ERROR_MESSAGE,
   I18N_SUCCESSFUL_CONNECTION_MESSAGE,
@@ -14,8 +13,8 @@ import { testIntegrationSettings } from './edit/api';
 
 export default class IntegrationSettingsForm {
   constructor(formSelector) {
+    this.formSelector = formSelector;
     this.$form = document.querySelector(formSelector);
-    this.formActive = false;
 
     this.vue = null;
 
@@ -28,26 +27,22 @@ export default class IntegrationSettingsForm {
     this.vue = initForm(
       document.querySelector('.js-vue-integration-settings'),
       document.querySelector('.js-vue-default-integration-settings'),
+      this.formSelector,
     );
-    eventHub.$on(TOGGLE_INTEGRATION_EVENT, (active) => {
-      this.formActive = active;
-      this.toggleServiceState();
+    eventHub.$on(TEST_INTEGRATION_EVENT, (formValid) => {
+      this.testIntegration(formValid);
     });
-    eventHub.$on(TEST_INTEGRATION_EVENT, () => {
-      this.testIntegration();
-    });
-    eventHub.$on(SAVE_INTEGRATION_EVENT, () => {
-      this.saveIntegration();
+    eventHub.$on(SAVE_INTEGRATION_EVENT, (formValid) => {
+      this.saveIntegration(formValid);
     });
   }
 
-  saveIntegration() {
+  saveIntegration(formValid) {
     // Save Service if not active and check the following if active;
     // 1) If form contents are valid
     // 2) If this service can be saved
     // If both conditions are true, we override form submission
     // and save the service using provided configuration.
-    const formValid = this.$form.checkValidity() || this.formActive === false;
 
     if (formValid) {
       delay(() => {
@@ -59,13 +54,13 @@ export default class IntegrationSettingsForm {
     }
   }
 
-  testIntegration() {
+  testIntegration(formValid) {
     // Service was marked active so now we check;
     // 1) If form contents are valid
     // 2) If this service can be tested
     // If both conditions are true, we override form submission
     // and test the service using provided configuration.
-    if (this.$form.checkValidity()) {
+    if (formValid) {
       this.testSettings(new FormData(this.$form));
     } else {
       eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
@@ -74,17 +69,6 @@ export default class IntegrationSettingsForm {
   }
 
   /**
-   * Change Form's validation enforcement based on service status (active/inactive)
-   */
-  toggleServiceState() {
-    if (this.formActive) {
-      this.$form.removeAttribute('novalidate');
-    } else if (!this.$form.getAttribute('novalidate')) {
-      this.$form.setAttribute('novalidate', 'novalidate');
-    }
-  }
-
-  /**
    * Get a list of Jira issue types for the currently configured project
    *
    * @param {string} formData - URL encoded string containing the form data