1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue
new file mode 100644
index 00000000000..d8503910566
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue
@@ -0,0 +1,61 @@
+<script>
+import { mapGetters } from 'vuex';
+import { GlModal } from '@gitlab/ui';
+
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+  },
+  computed: {
+    ...mapGetters(['isDisabled']),
+    primaryProps() {
+      return {
+        text: __('Reset'),
+        attributes: [
+          { variant: 'warning' },
+          { category: 'primary' },
+          { disabled: this.isDisabled },
+        ],
+      };
+    },
+    cancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+  },
+  methods: {
+    onReset() {
+      this.$emit('reset');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    modal-id="confirmResetIntegration"
+    size="sm"
+    :title="s__('Integrations|Reset integration?')"
+    :action-primary="primaryProps"
+    :action-cancel="cancelProps"
+    @primary="onReset"
+  >
+    <p>
+      {{
+        s__(
+          'Integrations|Resetting this integration will clear the settings and deactivate this integration.',
+        )
+      }}
+    </p>
+    <p>
+      {{ s__('Integrations|All projects inheriting these settings will also be reset.') }}
+    </p>
+
+    <p class="gl-mb-0">
+      {{ s__('Integrations|Projects using custom settings will not be affected.') }}
+    </p>
+  </gl-modal>
+</template>