Add latest changes from gitlab-org/gitlab@master

2 files changed, 195 insertions, 0 deletions

diff --git a/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue b/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue
new file mode 100644
index 00000000000..5e16f6f3873
--- /dev/null
+++ b/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue
@@ -0,0 +1,168 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+import _ from 'underscore';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ToggleButton from '~/vue_shared/components/toggle_button.vue';
+import axios from '~/lib/utils/axios_utils';
+import { s__, __, sprintf } from '~/locale';
+import createFlash from '~/flash';
+
+export default {
+  COPY_TO_CLIPBOARD: __('Copy'),
+  RESET_KEY: __('Reset key'),
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlModal,
+    ClipboardButton,
+    ToggleButton,
+  },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
+  props: {
+    initialAuthorizationKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    formPath: {
+      type: String,
+      required: true,
+    },
+    url: {
+      type: String,
+      required: true,
+    },
+    learnMoreUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialActivated: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      activated: this.initialActivated,
+      loadingActivated: false,
+      authorizationKey: this.initialAuthorizationKey,
+    };
+  },
+  computed: {
+    learnMoreDescription() {
+      return sprintf(
+        s__(
+          'AlertService|%{linkStart}Learn more%{linkEnd} about configuring this endpoint to receive alerts.',
+        ),
+        {
+          linkStart: `<a href="${_.escape(
+            this.learnMoreUrl,
+          )}" target="_blank" rel="noopener noreferrer">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    sectionDescription() {
+      const desc = s__(
+        'AlertService|Each alert source must be authorized using the following URL and authorization key.',
+      );
+      const learnMoreDesc = this.learnMoreDescription ? ` ${this.learnMoreDescription}` : '';
+
+      return `${desc}${learnMoreDesc}`;
+    },
+  },
+  watch: {
+    activated() {
+      this.updateIcon();
+    },
+  },
+  methods: {
+    updateIcon() {
+      return document.querySelectorAll('.js-service-active-status').forEach(icon => {
+        if (icon.dataset.value === this.activated.toString()) {
+          icon.classList.remove('d-none');
+        } else {
+          icon.classList.add('d-none');
+        }
+      });
+    },
+    resetKey() {
+      return axios
+        .put(this.formPath, { service: { token: '' } })
+        .then(res => {
+          this.authorizationKey = res.data.token;
+        })
+        .catch(() => {
+          createFlash(__('Failed to reset key. Please try again.'));
+        });
+    },
+    toggleActivated(value) {
+      this.loadingActivated = true;
+      return axios
+        .put(this.formPath, { service: { active: value } })
+        .then(() => {
+          this.activated = value;
+          this.loadingActivated = false;
+        })
+        .catch(() => {
+          createFlash(__('Update failed. Please try again.'));
+          this.loadingActivated = false;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <p v-html="sectionDescription"></p>
+    <gl-form-group :label="__('Active')" label-for="activated" label-class="label-bold">
+      <toggle-button
+        id="activated"
+        :disabled-input="loadingActivated"
+        :is-loading="loadingActivated"
+        :value="activated"
+        @change="toggleActivated"
+      />
+    </gl-form-group>
+    <gl-form-group :label="__('URL')" label-for="url" label-class="label-bold">
+      <div class="input-group">
+        <gl-form-input id="url" :readonly="true" :value="url" />
+        <span class="input-group-append">
+          <clipboard-button :text="url" :title="$options.COPY_TO_CLIPBOARD" />
+        </span>
+      </div>
+    </gl-form-group>
+    <gl-form-group
+      :label="__('Authorization key')"
+      label-for="authorization-key"
+      label-class="label-bold"
+    >
+      <div class="input-group">
+        <gl-form-input id="authorization-key" :readonly="true" :value="authorizationKey" />
+        <span class="input-group-append">
+          <clipboard-button :text="authorizationKey" :title="$options.COPY_TO_CLIPBOARD" />
+        </span>
+      </div>
+      <gl-button v-gl-modal.authKeyModal class="mt-2">{{ $options.RESET_KEY }}</gl-button>
+      <gl-modal
+        modal-id="authKeyModal"
+        :title="$options.RESET_KEY"
+        :ok-title="$options.RESET_KEY"
+        ok-variant="danger"
+        @ok="resetKey"
+      >
+        {{
+          __(
+            'Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
+          )
+        }}
+      </gl-modal>
+    </gl-form-group>
+  </div>
+</template>
diff --git a/app/assets/javascripts/alerts_service_settings/index.js b/app/assets/javascripts/alerts_service_settings/index.js
new file mode 100644
index 00000000000..d49725c6a4d
--- /dev/null
+++ b/app/assets/javascripts/alerts_service_settings/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import AlertsServiceForm from './components/alerts_service_form.vue';
+
+export default el => {
+  if (!el) {
+    return null;
+  }
+
+  const { activated: activatedStr, formPath, authorizationKey, url, learnMoreUrl } = el.dataset;
+  const activated = parseBoolean(activatedStr);
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(AlertsServiceForm, {
+        props: {
+          initialActivated: activated,
+          formPath,
+          learnMoreUrl,
+          initialAuthorizationKey: authorizationKey,
+          url,
+        },
+      });
+    },
+  });
+};