Add latest changes from gitlab-org/gitlab@master

8 files changed, 97 insertions, 83 deletions

diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index f74818ac87c..17f910a9d75 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -1,6 +1,8 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
+import { GlButton } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import eventHub from '../event_hub';
 
 import OverrideDropdown from './override_dropdown.vue';
 import ActiveCheckbox from './active_checkbox.vue';
@@ -18,11 +20,15 @@ export default {
     JiraIssuesFields,
     TriggerFields,
     DynamicField,
+    GlButton,
   },
   mixins: [glFeatureFlagsMixin()],
   computed: {
-    ...mapGetters(['currentKey', 'propsSource']),
-    ...mapState(['adminState', 'override']),
+    ...mapGetters(['currentKey', 'propsSource', 'isSavingOrTesting']),
+    ...mapState(['adminState', 'override', 'isSaving', 'isTesting']),
+    isEditable() {
+      return this.propsSource.editable;
+    },
     isJira() {
       return this.propsSource.type === 'jira';
     },
@@ -31,7 +37,15 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setOverride']),
+    ...mapActions(['setOverride', 'setIsSaving', 'setIsTesting']),
+    onSaveClick() {
+      this.setIsSaving(true);
+      eventHub.$emit('saveIntegration');
+    },
+    onTestClick() {
+      this.setIsTesting(true);
+      eventHub.$emit('testIntegration');
+    },
   },
 };
 </script>
@@ -67,5 +81,29 @@ export default {
       :key="`${currentKey}-jira-issues-fields`"
       v-bind="propsSource.jiraIssuesProps"
     />
+    <div v-if="isEditable" class="footer-block row-content-block">
+      <gl-button
+        category="primary"
+        variant="success"
+        type="submit"
+        :loading="isSaving"
+        :disabled="isSavingOrTesting"
+        data-qa-selector="save_changes_button"
+        @click.prevent="onSaveClick"
+      >
+        {{ __('Save changes') }}
+      </gl-button>
+      <gl-button
+        v-if="propsSource.canTest"
+        :loading="isTesting"
+        :disabled="isSavingOrTesting"
+        :href="propsSource.testPath"
+        @click.prevent="onTestClick"
+      >
+        {{ __('Test settings') }}
+      </gl-button>
+
+      <gl-button class="btn-cancel" :href="propsSource.cancelPath">{{ __('Cancel') }}</gl-button>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index 2ee25bcb1e7..5413226078d 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -24,11 +24,15 @@ function parseDatasetToProps(data) {
     fields,
     inheritFromId,
     integrationLevel,
+    cancelPath,
+    testPath,
     ...booleanAttributes
   } = data;
   const {
     showActive,
     activated,
+    editable,
+    canTest,
     commitEvents,
     mergeRequestEvents,
     enableComments,
@@ -41,6 +45,10 @@ function parseDatasetToProps(data) {
     initialActivated: activated,
     showActive,
     type,
+    cancelPath,
+    editable,
+    canTest,
+    testPath,
     triggerFieldsProps: {
       initialTriggerCommit: commitEvents,
       initialTriggerMergeRequest: mergeRequestEvents,
diff --git a/app/assets/javascripts/integrations/edit/store/actions.js b/app/assets/javascripts/integrations/edit/store/actions.js
index 1a1873979c9..199c9074ead 100644
--- a/app/assets/javascripts/integrations/edit/store/actions.js
+++ b/app/assets/javascripts/integrations/edit/store/actions.js
@@ -1,3 +1,5 @@
 import * as types from './mutation_types';
 
 export const setOverride = ({ commit }, override) => commit(types.SET_OVERRIDE, override);
+export const setIsSaving = ({ commit }, isSaving) => commit(types.SET_IS_SAVING, isSaving);
+export const setIsTesting = ({ commit }, isTesting) => commit(types.SET_IS_TESTING, isTesting);
diff --git a/app/assets/javascripts/integrations/edit/store/getters.js b/app/assets/javascripts/integrations/edit/store/getters.js
index b68bd668980..4b494c30845 100644
--- a/app/assets/javascripts/integrations/edit/store/getters.js
+++ b/app/assets/javascripts/integrations/edit/store/getters.js
@@ -1,5 +1,7 @@
 export const isInheriting = state => (state.adminState === null ? false : !state.override);
 
+export const isSavingOrTesting = state => state.isSaving || state.isTesting;
+
 export const propsSource = (state, getters) =>
   getters.isInheriting ? state.adminState : state.customState;
 
diff --git a/app/assets/javascripts/integrations/edit/store/mutation_types.js b/app/assets/javascripts/integrations/edit/store/mutation_types.js
index dfba3c6d640..0dae8ea079e 100644
--- a/app/assets/javascripts/integrations/edit/store/mutation_types.js
+++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js
@@ -1 +1,3 @@
 export const SET_OVERRIDE = 'SET_OVERRIDE';
+export const SET_IS_SAVING = 'SET_IS_SAVING';
+export const SET_IS_TESTING = 'SET_IS_TESTING';
diff --git a/app/assets/javascripts/integrations/edit/store/mutations.js b/app/assets/javascripts/integrations/edit/store/mutations.js
index 8757d415197..8ac3c476f9e 100644
--- a/app/assets/javascripts/integrations/edit/store/mutations.js
+++ b/app/assets/javascripts/integrations/edit/store/mutations.js
@@ -4,4 +4,10 @@ export default {
   [types.SET_OVERRIDE](state, override) {
     state.override = override;
   },
+  [types.SET_IS_SAVING](state, isSaving) {
+    state.isSaving = isSaving;
+  },
+  [types.SET_IS_TESTING](state, isTesting) {
+    state.isTesting = isTesting;
+  },
 };
diff --git a/app/assets/javascripts/integrations/edit/store/state.js b/app/assets/javascripts/integrations/edit/store/state.js
index 95c1a2be500..7f1cd5c6e4d 100644
--- a/app/assets/javascripts/integrations/edit/store/state.js
+++ b/app/assets/javascripts/integrations/edit/store/state.js
@@ -5,5 +5,7 @@ export default ({ adminState = null, customState = {} } = {}) => {
     override,
     adminState,
     customState,
+    isSaving: false,
+    isTesting: false,
   };
 };
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index 1135065b06c..529358a5f0b 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import axios from '../lib/utils/axios_utils';
-import { deprecatedCreateFlash as flash } from '../flash';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
+import toast from '~/vue_shared/plugins/global_toast';
 import initForm from './edit';
 import eventHub from './edit/event_hub';
 
@@ -10,65 +10,63 @@ export default class IntegrationSettingsForm {
     this.$form = $(formSelector);
     this.formActive = false;
 
+    this.vue = null;
+
     // Form Metadata
-    this.canTestService = this.$form.data('canTest');
     this.testEndPoint = this.$form.data('testUrl');
-
-    // Form Child Elements
-    this.$submitBtn = this.$form.find('button[type="submit"]');
-    this.$submitBtnLoader = this.$submitBtn.find('.js-btn-spinner');
-    this.$submitBtnLabel = this.$submitBtn.find('.js-btn-label');
   }
 
   init() {
     // Init Vue component
-    initForm(
+    this.vue = initForm(
       document.querySelector('.js-vue-integration-settings'),
       document.querySelector('.js-vue-admin-integration-settings'),
     );
     eventHub.$on('toggle', active => {
       this.formActive = active;
-      this.handleServiceToggle();
+      this.toggleServiceState();
+    });
+    eventHub.$on('testIntegration', () => {
+      this.testIntegration();
+    });
+    eventHub.$on('saveIntegration', () => {
+      this.saveIntegration();
     });
-
-    // Bind Event Listeners
-    this.$submitBtn.on('click', e => this.handleSettingsSave(e));
   }
 
-  handleSettingsSave(e) {
-    // Check if Service is marked active, as if not marked active,
-    // We can skip testing it and directly go ahead to allow form to
-    // be submitted
-    if (!this.formActive) {
-      return;
+  saveIntegration() {
+    // Service was marked active so now we check;
+    // 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.
+    if (this.$form.get(0).checkValidity()) {
+      this.$form.submit();
+    } else {
+      eventHub.$emit('validateForm');
+      this.vue.$store.dispatch('setIsSaving', false);
     }
+  }
 
+  testIntegration() {
     // 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.get(0).checkValidity()) {
-      if (this.canTestService) {
-        e.preventDefault();
-        // eslint-disable-next-line no-jquery/no-serialize
-        this.testSettings(this.$form.serialize());
-      }
+      // eslint-disable-next-line no-jquery/no-serialize
+      this.testSettings(this.$form.serialize());
     } else {
-      e.preventDefault();
       eventHub.$emit('validateForm');
+      this.vue.$store.dispatch('setIsTesting', false);
     }
   }
 
-  handleServiceToggle() {
-    this.toggleServiceState();
-  }
-
   /**
    * Change Form's validation enforcement based on service status (active/inactive)
    */
   toggleServiceState() {
-    this.toggleSubmitBtnLabel();
     if (this.formActive) {
       this.$form.removeAttr('novalidate');
     } else if (!this.$form.attr('novalidate')) {
@@ -77,67 +75,23 @@ export default class IntegrationSettingsForm {
   }
 
   /**
-   * Toggle Submit button label based on Integration status and ability to test service
-   */
-  toggleSubmitBtnLabel() {
-    let btnLabel = __('Save changes');
-
-    if (this.formActive && this.canTestService) {
-      btnLabel = __('Test settings and save changes');
-    }
-
-    this.$submitBtnLabel.text(btnLabel);
-  }
-
-  /**
-   * Toggle Submit button state based on provided boolean value of `saveTestActive`
-   * When enabled, it does two things, and reverts back when disabled
-   *
-   * 1. It shows load spinner on submit button
-   * 2. Makes submit button disabled
-   */
-  toggleSubmitBtnState(saveTestActive) {
-    if (saveTestActive) {
-      this.$submitBtn.disable();
-      this.$submitBtnLoader.removeClass('hidden');
-    } else {
-      this.$submitBtn.enable();
-      this.$submitBtnLoader.addClass('hidden');
-    }
-  }
-
-  /**
    * Test Integration config
    */
   testSettings(formData) {
-    this.toggleSubmitBtnState(true);
-
     return axios
       .put(this.testEndPoint, formData)
       .then(({ data }) => {
         if (data.error) {
-          let flashActions;
-
-          if (data.test_failed) {
-            flashActions = {
-              title: __('Save anyway'),
-              clickHandler: e => {
-                e.preventDefault();
-                this.$form.submit();
-              },
-            };
-          }
-
-          flash(`${data.message} ${data.service_response}`, 'alert', document, flashActions);
+          toast(`${data.message} ${data.service_response}`);
         } else {
-          this.$form.submit();
+          toast(s__('Integrations|Connection successful.'));
         }
-
-        this.toggleSubmitBtnState(false);
       })
       .catch(() => {
-        flash(__('Something went wrong on our end.'));
-        this.toggleSubmitBtnState(false);
+        toast(__('Something went wrong on our end.'));
+      })
+      .finally(() => {
+        this.vue.$store.dispatch('setIsTesting', false);
       });
   }
 }