Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

2 files changed, 85 insertions, 1 deletions

diff --git a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue
new file mode 100644
index 00000000000..890381a8f29
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue
@@ -0,0 +1,60 @@
+<script>
+import { mapGetters } from 'vuex';
+import { GlModal } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+  },
+  computed: {
+    ...mapGetters(['isSavingOrTesting']),
+    primaryProps() {
+      return {
+        text: __('Save'),
+        attributes: [
+          { variant: 'success' },
+          { category: 'primary' },
+          { disabled: this.isSavingOrTesting },
+        ],
+      };
+    },
+    cancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$emit('submit');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    modal-id="confirmSaveIntegration"
+    size="sm"
+    :title="s__('Integrations|Save settings?')"
+    :action-primary="primaryProps"
+    :action-cancel="cancelProps"
+    @primary="onSubmit"
+  >
+    <p>
+      {{
+        s__(
+          'Integrations|Saving will update the default settings for all projects that are not using custom settings.',
+        )
+      }}
+    </p>
+    <p class="gl-mb-0">
+      {{
+        s__(
+          'Integrations|Projects using custom settings will not be impacted unless the project owner chooses to use instance-level defaults.',
+        )
+      }}
+    </p>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 0460ed6791e..0fd39c5635d 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -1,8 +1,9 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlModalDirective } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../event_hub';
+import { integrationLevels } from '../constants';
 
 import OverrideDropdown from './override_dropdown.vue';
 import ActiveCheckbox from './active_checkbox.vue';
@@ -10,6 +11,7 @@ import JiraTriggerFields from './jira_trigger_fields.vue';
 import JiraIssuesFields from './jira_issues_fields.vue';
 import TriggerFields from './trigger_fields.vue';
 import DynamicField from './dynamic_field.vue';
+import ConfirmationModal from './confirmation_modal.vue';
 
 export default {
   name: 'IntegrationForm',
@@ -20,8 +22,12 @@ export default {
     JiraIssuesFields,
     TriggerFields,
     DynamicField,
+    ConfirmationModal,
     GlButton,
   },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
   mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapGetters(['currentKey', 'propsSource', 'isSavingOrTesting']),
@@ -32,6 +38,9 @@ export default {
     isJira() {
       return this.propsSource.type === 'jira';
     },
+    isInstanceLevel() {
+      return this.propsSource.integrationLevel === integrationLevels.INSTANCE;
+    },
     showJiraIssuesFields() {
       return this.isJira && this.glFeatures.jiraIssuesIntegration;
     },
@@ -82,7 +91,21 @@ export default {
       v-bind="propsSource.jiraIssuesProps"
     />
     <div v-if="isEditable" class="footer-block row-content-block">
+      <template v-if="isInstanceLevel">
+        <gl-button
+          v-gl-modal.confirmSaveIntegration
+          category="primary"
+          variant="success"
+          :loading="isSaving"
+          :disabled="isSavingOrTesting"
+          data-qa-selector="save_changes_button"
+        >
+          {{ __('Save changes') }}
+        </gl-button>
+        <confirmation-modal @submit="onSaveClick" />
+      </template>
       <gl-button
+        v-else
         category="primary"
         variant="success"
         type="submit"
@@ -93,6 +116,7 @@ export default {
       >
         {{ __('Save changes') }}
       </gl-button>
+
       <gl-button
         v-if="propsSource.canTest"
         :loading="isTesting"