Add latest changes from gitlab-org/gitlab@master

10 files changed, 37 insertions, 102 deletions

diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index 177e3d6f9cc..84656bd41bb 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -1,6 +1,5 @@
 import { s__, __ } from '~/locale';
 
-export const SAVE_INTEGRATION_EVENT = 'saveIntegration';
 export const VALIDATE_INTEGRATION_FORM_EVENT = 'validateIntegrationForm';
 
 export const integrationLevels = {
diff --git a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue
index 89f7e3b7a89..bc6aa231a93 100644
--- a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue
+++ b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue
@@ -1,22 +1,17 @@
 <script>
 import { GlModal } from '@gitlab/ui';
-import { mapGetters } from 'vuex';
 import { __ } from '~/locale';
 
 export default {
   components: {
     GlModal,
   },
+
   computed: {
-    ...mapGetters(['isDisabled']),
     primaryProps() {
       return {
         text: __('Save'),
-        attributes: [
-          { variant: 'confirm' },
-          { category: 'primary' },
-          { disabled: this.isDisabled },
-        ],
+        attributes: [{ variant: 'confirm' }, { category: 'primary' }],
       };
     },
     cancelProps() {
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 60a6d13ce69..e570a468944 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -4,7 +4,6 @@ import * as Sentry from '@sentry/browser';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
-  SAVE_INTEGRATION_EVENT,
   VALIDATE_INTEGRATION_FORM_EVENT,
   I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
   I18N_DEFAULT_ERROR_MESSAGE,
@@ -54,12 +53,13 @@ export default {
   data() {
     return {
       integrationActive: false,
-      testingLoading: false,
+      isTesting: false,
+      isSaving: false,
     };
   },
   computed: {
-    ...mapGetters(['currentKey', 'propsSource', 'isDisabled']),
-    ...mapState(['defaultState', 'customState', 'override', 'isSaving', 'isResetting']),
+    ...mapGetters(['currentKey', 'propsSource']),
+    ...mapState(['defaultState', 'customState', 'override', 'isResetting']),
     isEditable() {
       return this.propsSource.editable;
     },
@@ -78,11 +78,8 @@ export default {
     showTestButton() {
       return this.propsSource.canTest;
     },
-    disableSaveButton() {
-      return Boolean(this.isResetting || this.testingLoading);
-    },
-    disableResetButton() {
-      return Boolean(this.isSaving || this.testingLoading);
+    disableButtons() {
+      return Boolean(this.isSaving || this.isResetting || this.isTesting);
     },
   },
   mounted() {
@@ -90,21 +87,20 @@ export default {
     this.form = document.querySelector(this.formSelector);
   },
   methods: {
-    ...mapActions([
-      'setOverride',
-      'setIsSaving',
-      'setIsResetting',
-      'fetchResetIntegration',
-      'requestJiraIssueTypes',
-    ]),
+    ...mapActions(['setOverride', 'fetchResetIntegration', 'requestJiraIssueTypes']),
     onSaveClick() {
-      this.setIsSaving(true);
+      this.isSaving = true;
+
+      if (this.integrationActive && !this.form.checkValidity()) {
+        this.isSaving = false;
+        eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
+        return;
+      }
 
-      const formValid = this.form.checkValidity() || this.integrationActive === false;
-      eventHub.$emit(SAVE_INTEGRATION_EVENT, formValid);
+      this.form.submit();
     },
     onTestClick() {
-      this.testingLoading = true;
+      this.isTesting = true;
 
       if (!this.form.checkValidity()) {
         eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
@@ -126,7 +122,7 @@ export default {
           Sentry.captureException(error);
         })
         .finally(() => {
-          this.testingLoading = false;
+          this.isTesting = false;
         });
     },
     onResetClick() {
@@ -211,7 +207,7 @@ export default {
               category="primary"
               variant="confirm"
               :loading="isSaving"
-              :disabled="disableSaveButton"
+              :disabled="disableButtons"
               data-qa-selector="save_changes_button"
             >
               {{ __('Save changes') }}
@@ -224,7 +220,7 @@ export default {
             variant="confirm"
             type="submit"
             :loading="isSaving"
-            :disabled="disableSaveButton"
+            :disabled="disableButtons"
             data-testid="save-button"
             data-qa-selector="save_changes_button"
             @click.prevent="onSaveClick"
@@ -236,8 +232,8 @@ export default {
             v-if="showTestButton"
             category="secondary"
             variant="confirm"
-            :loading="testingLoading"
-            :disabled="isDisabled"
+            :loading="isTesting"
+            :disabled="disableButtons"
             data-testid="test-button"
             @click.prevent="onTestClick"
           >
@@ -250,7 +246,7 @@ export default {
               category="secondary"
               variant="confirm"
               :loading="isResetting"
-              :disabled="disableResetButton"
+              :disabled="disableButtons"
               data-testid="reset-button"
             >
               {{ __('Reset') }}
diff --git a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue
index 9472a3eeafe..5a445235219 100644
--- a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue
+++ b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlModal } from '@gitlab/ui';
-import { mapGetters } from 'vuex';
 
 import { __ } from '~/locale';
 
@@ -9,15 +8,10 @@ export default {
     GlModal,
   },
   computed: {
-    ...mapGetters(['isDisabled']),
     primaryProps() {
       return {
         text: __('Reset'),
-        attributes: [
-          { variant: 'warning' },
-          { category: 'primary' },
-          { disabled: this.isDisabled },
-        ],
+        attributes: [{ variant: 'warning' }, { category: 'primary' }],
       };
     },
     cancelProps() {
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index 2e41d2914b7..9c9e3edbeb8 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -85,28 +85,31 @@ function parseDatasetToProps(data) {
   };
 }
 
-export default (el, defaultEl, formSelector) => {
-  if (!el) {
+export default function initIntegrationSettingsForm(formSelector) {
+  const customSettingsEl = document.querySelector('.js-vue-integration-settings');
+  const defaultSettingsEl = document.querySelector('.js-vue-default-integration-settings');
+
+  if (!customSettingsEl) {
     return null;
   }
 
-  const props = parseDatasetToProps(el.dataset);
+  const customSettingsProps = parseDatasetToProps(customSettingsEl.dataset);
   const initialState = {
     defaultState: null,
-    customState: props,
+    customState: customSettingsProps,
   };
-  if (defaultEl) {
-    initialState.defaultState = Object.freeze(parseDatasetToProps(defaultEl.dataset));
+  if (defaultSettingsEl) {
+    initialState.defaultState = Object.freeze(parseDatasetToProps(defaultSettingsEl.dataset));
   }
 
   // Here, we capture the "helpHtml", so we can pass it to the Vue component
   // to position it where ever it wants.
   // Because this node is a _child_ of `el`, it will be removed when the Vue component is mounted,
   // so we don't need to manually remove it.
-  const helpHtml = el.querySelector('.js-integration-help-html')?.innerHTML;
+  const helpHtml = customSettingsEl.querySelector('.js-integration-help-html')?.innerHTML;
 
   return new Vue({
-    el,
+    el: customSettingsEl,
     store: createStore(initialState),
     render(createElement) {
       return createElement(IntegrationForm, {
@@ -117,4 +120,4 @@ export default (el, defaultEl, formSelector) => {
       });
     },
   });
-};
+}
diff --git a/app/assets/javascripts/integrations/edit/store/actions.js b/app/assets/javascripts/integrations/edit/store/actions.js
index 6c1bfaa7858..97565a3a69c 100644
--- a/app/assets/javascripts/integrations/edit/store/actions.js
+++ b/app/assets/javascripts/integrations/edit/store/actions.js
@@ -10,7 +10,6 @@ import eventHub from '../event_hub';
 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 setIsResetting = ({ commit }, isResetting) =>
   commit(types.SET_IS_RESETTING, isResetting);
 
diff --git a/app/assets/javascripts/integrations/edit/store/getters.js b/app/assets/javascripts/integrations/edit/store/getters.js
index 10d370de856..b79132128cc 100644
--- a/app/assets/javascripts/integrations/edit/store/getters.js
+++ b/app/assets/javascripts/integrations/edit/store/getters.js
@@ -1,7 +1,5 @@
 export const isInheriting = (state) => (state.defaultState === null ? false : !state.override);
 
-export const isDisabled = (state) => state.isSaving || state.isResetting;
-
 export const propsSource = (state, getters) =>
   getters.isInheriting ? state.defaultState : 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 dd4a79f6fe0..ddf6bef7554 100644
--- a/app/assets/javascripts/integrations/edit/store/mutation_types.js
+++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js
@@ -1,5 +1,4 @@
 export const SET_OVERRIDE = 'SET_OVERRIDE';
-export const SET_IS_SAVING = 'SET_IS_SAVING';
 export const SET_IS_RESETTING = 'SET_IS_RESETTING';
 
 export const SET_IS_LOADING_JIRA_ISSUE_TYPES = 'SET_IS_LOADING_JIRA_ISSUE_TYPES';
diff --git a/app/assets/javascripts/integrations/edit/store/mutations.js b/app/assets/javascripts/integrations/edit/store/mutations.js
index f76081e62f0..e7e312ce650 100644
--- a/app/assets/javascripts/integrations/edit/store/mutations.js
+++ b/app/assets/javascripts/integrations/edit/store/mutations.js
@@ -4,9 +4,6 @@ export default {
   [types.SET_OVERRIDE](state, override) {
     state.override = override;
   },
-  [types.SET_IS_SAVING](state, isSaving) {
-    state.isSaving = isSaving;
-  },
   [types.SET_IS_RESETTING](state, isResetting) {
     state.isResetting = isResetting;
   },
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
deleted file mode 100644
index 193bc1c4e9b..00000000000
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { delay } from 'lodash';
-import initForm from './edit';
-import eventHub from './edit/event_hub';
-import { SAVE_INTEGRATION_EVENT, VALIDATE_INTEGRATION_FORM_EVENT } from './constants';
-
-export default class IntegrationSettingsForm {
-  constructor(formSelector) {
-    this.formSelector = formSelector;
-    this.$form = document.querySelector(formSelector);
-
-    this.vue = null;
-
-    // Form Metadata
-    this.testEndPoint = this.$form.dataset.testUrl;
-  }
-
-  init() {
-    // Init Vue component
-    this.vue = initForm(
-      document.querySelector('.js-vue-integration-settings'),
-      document.querySelector('.js-vue-default-integration-settings'),
-      this.formSelector,
-    );
-    eventHub.$on(SAVE_INTEGRATION_EVENT, (formValid) => {
-      this.saveIntegration(formValid);
-    });
-  }
-
-  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.
-
-    if (formValid) {
-      delay(() => {
-        this.$form.submit();
-      }, 100);
-    } else {
-      eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
-      this.vue.$store.dispatch('setIsSaving', false);
-    }
-  }
-}