1 files changed, 139 insertions, 0 deletions
diff --git a/app/assets/javascripts/incidents_settings/components/alerts_form.vue b/app/assets/javascripts/incidents_settings/components/alerts_form.vue
new file mode 100644
index 00000000000..a394f404ee1
--- /dev/null
+++ b/app/assets/javascripts/incidents_settings/components/alerts_form.vue
@@ -0,0 +1,139 @@
+<script>
+import {
+  GlButton,
+  GlSprintf,
+  GlLink,
+  GlIcon,
+  GlFormGroup,
+  GlFormCheckbox,
+  GlNewDropdown,
+  GlNewDropdownItem,
+} from '@gitlab/ui';
+import {
+  I18N_ALERT_SETTINGS_FORM,
+  NO_ISSUE_TEMPLATE_SELECTED,
+  TAKING_INCIDENT_ACTION_DOCS_LINK,
+  ISSUE_TEMPLATES_DOCS_LINK,
+} from '../constants';
+
+export default {
+  components: {
+    GlButton,
+    GlSprintf,
+    GlLink,
+    GlFormGroup,
+    GlIcon,
+    GlFormCheckbox,
+    GlNewDropdown,
+    GlNewDropdownItem,
+  },
+  inject: ['service', 'alertSettings'],
+  data() {
+    return {
+      templates: [NO_ISSUE_TEMPLATE_SELECTED, ...this.alertSettings.templates],
+      createIssueEnabled: this.alertSettings.createIssue,
+      issueTemplate: this.alertSettings.issueTemplateKey,
+      sendEmailEnabled: this.alertSettings.sendEmail,
+      loading: false,
+    };
+  },
+  i18n: I18N_ALERT_SETTINGS_FORM,
+  TAKING_INCIDENT_ACTION_DOCS_LINK,
+  ISSUE_TEMPLATES_DOCS_LINK,
+  computed: {
+    issueTemplateHeader() {
+      return this.issueTemplate || NO_ISSUE_TEMPLATE_SELECTED.name;
+    },
+    formData() {
+      return {
+        create_issue: this.createIssueEnabled,
+        issue_template_key: this.issueTemplate,
+        send_email: this.sendEmailEnabled,
+      };
+    },
+  },
+  methods: {
+    selectIssueTemplate(templateKey) {
+      this.issueTemplate = templateKey;
+    },
+    isTemplateSelected(templateKey) {
+      return templateKey === this.issueTemplate;
+    },
+    updateAlertsIntegrationSettings() {
+      this.loading = true;
+
+      this.service.updateSettings(this.formData).catch(() => {
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <p>
+      <gl-sprintf :message="$options.i18n.introText">
+        <template #docsLink>
+          <gl-link :href="$options.TAKING_INCIDENT_ACTION_DOCS_LINK" target="_blank">
+            <span>{{ $options.i18n.introLinkText }}</span>
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <form ref="settingsForm" @submit.prevent="updateAlertsIntegrationSettings">
+      <gl-form-group class="gl-pl-0">
+        <gl-form-checkbox v-model="createIssueEnabled" data-qa-selector="create_issue_checkbox">
+          <span>{{ $options.i18n.createIssue.label }}</span>
+        </gl-form-checkbox>
+      </gl-form-group>
+
+      <gl-form-group
+        label-size="sm"
+        label-for="alert-integration-settings-issue-template"
+        class="col-8 col-md-9 gl-px-6"
+      >
+        <label class="gl-display-inline-flex" for="alert-integration-settings-issue-template">
+          {{ $options.i18n.issueTemplate.label }}
+          <gl-link :href="$options.ISSUE_TEMPLATES_DOCS_LINK" target="_blank">
+            <gl-icon name="question" :size="12" />
+          </gl-link>
+        </label>
+        <gl-new-dropdown
+          id="alert-integration-settings-issue-template"
+          data-qa-selector="incident_templates_dropdown"
+          :text="issueTemplateHeader"
+          :block="true"
+        >
+          <gl-new-dropdown-item
+            v-for="template in templates"
+            :key="template.key"
+            data-qa-selector="incident_templates_item"
+            :is-check-item="true"
+            :is-checked="isTemplateSelected(template.key)"
+            @click="selectIssueTemplate(template.key)"
+          >
+            {{ template.name }}
+          </gl-new-dropdown-item>
+        </gl-new-dropdown>
+      </gl-form-group>
+
+      <gl-form-group class="gl-pl-0 gl-mb-5">
+        <gl-form-checkbox v-model="sendEmailEnabled">
+          <span>{{ $options.i18n.sendEmail.label }}</span>
+        </gl-form-checkbox>
+      </gl-form-group>
+
+      <gl-button
+        ref="submitBtn"
+        data-qa-selector="save_changes_button"
+        :disabled="loading"
+        variant="success"
+        type="submit"
+        class="js-no-auto-disable"
+      >
+        {{ $options.i18n.saveBtnLabel }}
+      </gl-button>
+    </form>
+  </div>
+</template>