Add latest changes from gitlab-org/gitlab@master

4 files changed, 287 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..40eaef55c48
--- /dev/null
+++ b/app/assets/javascripts/incidents_settings/components/alerts_form.vue
@@ -0,0 +1,156 @@
+<script>
+import {
+  GlButton,
+  GlSprintf,
+  GlLink,
+  GlIcon,
+  GlFormGroup,
+  GlFormCheckbox,
+  GlNewDropdown,
+  GlNewDropdownItem,
+} from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+import { refreshCurrentPage } from '~/lib/utils/url_utility';
+import createFlash from '~/flash';
+import {
+  I18N_ALERT_SETTINGS_FORM,
+  NO_ISSUE_TEMPLATE_SELECTED,
+  TAKING_INCIDENT_ACTION_DOCS_LINK,
+  ISSUE_TEMPLATES_DOCS_LINK,
+  ERROR_MSG,
+} from '../constants';
+
+export default {
+  components: {
+    GlButton,
+    GlSprintf,
+    GlLink,
+    GlFormGroup,
+    GlIcon,
+    GlFormCheckbox,
+    GlNewDropdown,
+    GlNewDropdownItem,
+  },
+  inject: ['alertSettings', 'operationsSettingsEndpoint'],
+  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;
+      return axios
+        .patch(this.operationsSettingsEndpoint, {
+          project: {
+            incident_management_setting_attributes: this.formData,
+          },
+        })
+        .then(() => {
+          refreshCurrentPage();
+        })
+        .catch(({ response }) => {
+          const message = response?.data?.message || '';
+
+          createFlash(`${ERROR_MSG} ${message}`, 'alert');
+        })
+        .finally(() => {
+          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>
diff --git a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue
new file mode 100644
index 00000000000..763568fd2c9
--- /dev/null
+++ b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlButton, GlTabs, GlTab } from '@gitlab/ui';
+import AlertsSettingsForm from './alerts_form.vue';
+import { INTEGRATION_TABS_CONFIG, I18N_INTEGRATION_TABS } from '../constants';
+
+export default {
+  components: {
+    GlButton,
+    GlTabs,
+    GlTab,
+    AlertsSettingsForm,
+  },
+  tabs: INTEGRATION_TABS_CONFIG,
+  i18n: I18N_INTEGRATION_TABS,
+};
+</script>
+
+<template>
+  <section
+    id="incident-management-settings"
+    data-qa-selector="incidents_settings_content"
+    class="settings no-animate qa-incident-management-settings"
+  >
+    <div class="settings-header">
+      <h3 ref="sectionHeader" class="h4">
+        {{ $options.i18n.headerText }}
+      </h3>
+      <gl-button ref="toggleBtn" class="js-settings-toggle">{{
+        $options.i18n.expandBtnLabel
+      }}</gl-button>
+      <p ref="sectionSubHeader">
+        {{ $options.i18n.subHeaderText }}
+      </p>
+    </div>
+
+    <div class="settings-content">
+      <gl-tabs>
+        <gl-tab
+          v-for="(tab, index) in $options.tabs"
+          v-if="tab.active"
+          :key="`${tab.title}_${index}`"
+          :title="tab.title"
+        >
+          <component :is="tab.component" class="gl-pt-3" :data-testid="`${tab.component}-tab`" />
+        </gl-tab>
+      </gl-tabs>
+    </div>
+  </section>
+</template>
diff --git a/app/assets/javascripts/incidents_settings/constants.js b/app/assets/javascripts/incidents_settings/constants.js
new file mode 100644
index 00000000000..bd6ee55ae42
--- /dev/null
+++ b/app/assets/javascripts/incidents_settings/constants.js
@@ -0,0 +1,51 @@
+import { __, s__ } from '~/locale';
+
+export const INTEGRATION_TABS_CONFIG = [
+  {
+    title: s__('IncidentSettings|Alert integration'),
+    component: 'AlertsSettingsForm',
+    active: true,
+  },
+  {
+    title: s__('IncidentSettings|PagerDuty integration'),
+    component: '',
+    active: false,
+  },
+  {
+    title: s__('IncidentSettings|Grafana integration'),
+    component: '',
+    active: false,
+  },
+];
+
+export const I18N_INTEGRATION_TABS = {
+  headerText: s__('IncidentSettings|Incidents'),
+  expandBtnLabel: __('Expand'),
+  saveBtnLabel: __('Save changes'),
+  subHeaderText: s__(
+    'IncidentSettings|Set up integrations with external tools to help better manage incidents.',
+  ),
+};
+
+export const I18N_ALERT_SETTINGS_FORM = {
+  saveBtnLabel: __('Save changes'),
+  introText: __('Action to take when receiving an alert. %{docsLink}'),
+  introLinkText: __('More information.'),
+  createIssue: {
+    label: __('Create an issue. Issues are created for each alert triggered.'),
+  },
+  issueTemplate: {
+    label: __('Issue template (optional)'),
+  },
+  sendEmail: {
+    label: __('Send a separate email notification to Developers.'),
+  },
+};
+
+export const NO_ISSUE_TEMPLATE_SELECTED = { key: '', name: __('No template selected') };
+export const TAKING_INCIDENT_ACTION_DOCS_LINK =
+  '/help/user/project/integrations/prometheus#taking-action-on-incidents-ultimate';
+export const ISSUE_TEMPLATES_DOCS_LINK =
+  '/help/user/project/description_templates#creating-issue-templates';
+
+export const ERROR_MSG = __('There was an error saving your changes.');
diff --git a/app/assets/javascripts/incidents_settings/index.js b/app/assets/javascripts/incidents_settings/index.js
new file mode 100644
index 00000000000..25fed0d10de
--- /dev/null
+++ b/app/assets/javascripts/incidents_settings/index.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import SettingsTabs from './components/incidents_settings_tabs.vue';
+
+export default () => {
+  const el = document.querySelector('.js-incidents-settings');
+
+  if (!el) {
+    return null;
+  }
+
+  const {
+    dataset: { operationsSettingsEndpoint, templates, createIssue, issueTemplateKey, sendEmail },
+  } = el;
+
+  return new Vue({
+    el,
+    provide: {
+      operationsSettingsEndpoint,
+      alertSettings: {
+        templates: JSON.parse(templates),
+        createIssue: parseBoolean(createIssue),
+        issueTemplateKey,
+        sendEmail: parseBoolean(sendEmail),
+      },
+    },
+    render(createElement) {
+      return createElement(SettingsTabs);
+    },
+  });
+};