Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

9 files changed, 65 insertions, 41 deletions

diff --git a/app/assets/javascripts/integrations/edit/constants.js b/app/assets/javascripts/integrations/constants.js
index b74ae209eb7..8a8d38b295c 100644
--- a/app/assets/javascripts/integrations/edit/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -1,5 +1,11 @@
 import { s__ } from '~/locale';
 
+export const TEST_INTEGRATION_EVENT = 'testIntegration';
+export const SAVE_INTEGRATION_EVENT = 'saveIntegration';
+export const GET_JIRA_ISSUE_TYPES_EVENT = 'getJiraIssueTypes';
+export const TOGGLE_INTEGRATION_EVENT = 'toggleIntegration';
+export const VALIDATE_INTEGRATION_FORM_EVENT = 'validateIntegrationForm';
+
 export const integrationLevels = {
   GROUP: 'group',
   INSTANCE: 'instance',
diff --git a/app/assets/javascripts/integrations/edit/components/active_checkbox.vue b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue
index f7d7f4aa010..9804a9e15f6 100644
--- a/app/assets/javascripts/integrations/edit/components/active_checkbox.vue
+++ b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue
@@ -1,6 +1,7 @@
 <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 {
@@ -26,7 +27,7 @@ export default {
   },
   methods: {
     onChange(e) {
-      eventHub.$emit('toggle', e);
+      eventHub.$emit(TOGGLE_INTEGRATION_EVENT, e);
     },
   },
 };
diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
index 1fd4083b920..f30298676df 100644
--- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
+++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
@@ -9,6 +9,7 @@ import {
 } from '@gitlab/ui';
 import { capitalize, lowerCase, isEmpty } from 'lodash';
 import { mapGetters } from 'vuex';
+import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants';
 import eventHub from '../event_hub';
 
 export default {
@@ -121,10 +122,10 @@ export default {
     if (this.isNonEmptyPassword) {
       this.model = null;
     }
-    eventHub.$on('validateForm', this.validateForm);
+    eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   beforeDestroy() {
-    eventHub.$off('validateForm', this.validateForm);
+    eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   methods: {
     validateForm() {
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 63f007170d0..ba1aeb28616 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -2,7 +2,11 @@
 import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { integrationLevels } from '../constants';
+import {
+  TEST_INTEGRATION_EVENT,
+  SAVE_INTEGRATION_EVENT,
+  integrationLevels,
+} from '~/integrations/constants';
 import eventHub from '../event_hub';
 
 import ActiveCheckbox from './active_checkbox.vue';
@@ -75,11 +79,11 @@ export default {
     ]),
     onSaveClick() {
       this.setIsSaving(true);
-      eventHub.$emit('saveIntegration');
+      eventHub.$emit(SAVE_INTEGRATION_EVENT);
     },
     onTestClick() {
       this.setIsTesting(true);
-      eventHub.$emit('testIntegration');
+      eventHub.$emit(TEST_INTEGRATION_EVENT);
     },
     onResetClick() {
       this.fetchResetIntegration();
diff --git a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
index 1242493fb57..0521e1eeea5 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
@@ -1,6 +1,10 @@
 <script>
 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlSprintf, GlLink } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
+import {
+  VALIDATE_INTEGRATION_FORM_EVENT,
+  GET_JIRA_ISSUE_TYPES_EVENT,
+} from '~/integrations/constants';
 import eventHub from '../event_hub';
 import JiraUpgradeCta from './jira_upgrade_cta.vue';
 
@@ -77,17 +81,17 @@ export default {
     },
   },
   created() {
-    eventHub.$on('validateForm', this.validateForm);
+    eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   beforeDestroy() {
-    eventHub.$off('validateForm', this.validateForm);
+    eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   methods: {
     validateForm() {
       this.validated = true;
     },
     getJiraIssueTypes() {
-      eventHub.$emit('getJiraIssueTypes');
+      eventHub.$emit(GET_JIRA_ISSUE_TYPES_EVENT);
     },
   },
 };
diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
index 1cc5a185f03..249a3e105b1 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
@@ -9,6 +9,7 @@ import {
 } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
@@ -118,10 +119,10 @@ export default {
     },
   },
   created() {
-    eventHub.$on('validateForm', this.validateForm);
+    eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   beforeDestroy() {
-    eventHub.$off('validateForm', this.validateForm);
+    eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   methods: {
     validateForm() {
diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
index 7b3a067b186..63650400bb7 100644
--- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
+++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
@@ -2,7 +2,7 @@
 import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { defaultIntegrationLevel, overrideDropdownDescriptions } from '../constants';
+import { defaultIntegrationLevel, overrideDropdownDescriptions } from '~/integrations/constants';
 
 const dropdownOptions = [
   {
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index 801cf3ed27e..f33364d5545 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -1,20 +1,26 @@
-import $ from 'jquery';
 import { delay } from 'lodash';
 import { __, s__ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
 import axios from '../lib/utils/axios_utils';
 import initForm from './edit';
 import eventHub from './edit/event_hub';
+import {
+  TEST_INTEGRATION_EVENT,
+  SAVE_INTEGRATION_EVENT,
+  GET_JIRA_ISSUE_TYPES_EVENT,
+  TOGGLE_INTEGRATION_EVENT,
+  VALIDATE_INTEGRATION_FORM_EVENT,
+} from './constants';
 
 export default class IntegrationSettingsForm {
   constructor(formSelector) {
-    this.$form = $(formSelector);
+    this.$form = document.querySelector(formSelector);
     this.formActive = false;
 
     this.vue = null;
 
     // Form Metadata
-    this.testEndPoint = this.$form.data('testUrl');
+    this.testEndPoint = this.$form.dataset.testUrl;
   }
 
   init() {
@@ -23,22 +29,19 @@ export default class IntegrationSettingsForm {
       document.querySelector('.js-vue-integration-settings'),
       document.querySelector('.js-vue-default-integration-settings'),
     );
-    eventHub.$on('toggle', (active) => {
+    eventHub.$on(TOGGLE_INTEGRATION_EVENT, (active) => {
       this.formActive = active;
       this.toggleServiceState();
     });
-    eventHub.$on('testIntegration', () => {
+    eventHub.$on(TEST_INTEGRATION_EVENT, () => {
       this.testIntegration();
     });
-    eventHub.$on('saveIntegration', () => {
+    eventHub.$on(SAVE_INTEGRATION_EVENT, () => {
       this.saveIntegration();
     });
-    eventHub.$on('getJiraIssueTypes', () => {
-      // eslint-disable-next-line no-jquery/no-serialize
-      this.getJiraIssueTypes(this.$form.serialize());
+    eventHub.$on(GET_JIRA_ISSUE_TYPES_EVENT, () => {
+      this.getJiraIssueTypes(new FormData(this.$form));
     });
-
-    eventHub.$emit('formInitialized');
   }
 
   saveIntegration() {
@@ -47,14 +50,14 @@ export default class IntegrationSettingsForm {
     // 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.get(0).checkValidity() || this.formActive === false;
+    const formValid = this.$form.checkValidity() || this.formActive === false;
 
     if (formValid) {
       delay(() => {
-        this.$form.trigger('submit');
+        this.$form.submit();
       }, 100);
     } else {
-      eventHub.$emit('validateForm');
+      eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
       this.vue.$store.dispatch('setIsSaving', false);
     }
   }
@@ -65,11 +68,10 @@ export default class IntegrationSettingsForm {
     // 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()) {
-      // eslint-disable-next-line no-jquery/no-serialize
-      this.testSettings(this.$form.serialize());
+    if (this.$form.checkValidity()) {
+      this.testSettings(new FormData(this.$form));
     } else {
-      eventHub.$emit('validateForm');
+      eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
       this.vue.$store.dispatch('setIsTesting', false);
     }
   }
@@ -79,9 +81,9 @@ export default class IntegrationSettingsForm {
    */
   toggleServiceState() {
     if (this.formActive) {
-      this.$form.removeAttr('novalidate');
-    } else if (!this.$form.attr('novalidate')) {
-      this.$form.attr('novalidate', 'novalidate');
+      this.$form.removeAttribute('novalidate');
+    } else if (!this.$form.getAttribute('novalidate')) {
+      this.$form.setAttribute('novalidate', 'novalidate');
     }
   }
 
@@ -109,7 +111,7 @@ export default class IntegrationSettingsForm {
           },
         }) => {
           if (error || !issuetypes?.length) {
-            eventHub.$emit('validateForm');
+            eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
             throw new Error(message);
           }
 
diff --git a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
index 707ac946b98..85018f133cb 100644
--- a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
+++ b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
@@ -1,8 +1,8 @@
 <script>
-import { GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
+import { GlLink, GlLoadingIcon, GlPagination, GlTable, GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 
 import { DEFAULT_PER_PAGE } from '~/api';
-import createFlash from '~/flash';
 import { fetchOverrides } from '~/integrations/overrides/api';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { truncateNamespace } from '~/lib/utils/text_utility';
@@ -16,6 +16,7 @@ export default {
     GlLoadingIcon,
     GlPagination,
     GlTable,
+    GlAlert,
     ProjectAvatar,
   },
   props: {
@@ -36,6 +37,7 @@ export default {
       overrides: [],
       page: 1,
       totalItems: 0,
+      errorMessage: null,
     };
   },
   computed: {
@@ -49,6 +51,7 @@ export default {
   methods: {
     loadOverrides(page = this.page) {
       this.isLoading = true;
+      this.errorMessage = null;
 
       fetchOverrides(this.overridesPath, {
         page,
@@ -61,11 +64,9 @@ export default {
           this.overrides = data;
         })
         .catch((error) => {
-          createFlash({
-            message: this.$options.i18n.defaultErrorMessage,
-            error,
-            captureError: true,
-          });
+          this.errorMessage = this.$options.i18n.defaultErrorMessage;
+
+          Sentry.captureException(error);
         })
         .finally(() => {
           this.isLoading = false;
@@ -85,7 +86,11 @@ export default {
 
 <template>
   <div>
+    <gl-alert v-if="errorMessage" variant="danger" :dismissible="false">
+      {{ errorMessage }}
+    </gl-alert>
     <gl-table
+      v-else
       :items="overrides"
       :fields="$options.fields"
       :busy="isLoading"