From 48aff82709769b098321c738f3444b9bdaa694c6 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Wed, 21 Oct 2020 07:08:36 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-5-stable-ee

---
 .../components/alerts_settings_form.vue            | 179 ++++++++++-----------
 1 file changed, 83 insertions(+), 96 deletions(-)

(limited to 'app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue')

diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
index f0bb8b0a90f..f885afae378 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -14,9 +14,11 @@ import {
   GlFormSelect,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { s__ } from '~/locale';
+import { doesHashExistInUrl } from '~/lib/utils/url_utility';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ToggleButton from '~/vue_shared/components/toggle_button.vue';
+import IntegrationsList from './alerts_integrations_list.vue';
 import csrf from '~/lib/utils/csrf';
 import service from '../services';
 import {
@@ -25,7 +27,9 @@ import {
   JSON_VALIDATE_DELAY,
   targetPrometheusUrlPlaceholder,
   targetOpsgenieUrlPlaceholder,
+  sectionHash,
 } from '../constants';
+import createFlash, { FLASH_TYPES } from '~/flash';
 
 export default {
   i18n,
@@ -46,11 +50,11 @@ export default {
     GlSprintf,
     ClipboardButton,
     ToggleButton,
+    IntegrationsList,
   },
   directives: {
     'gl-modal': GlModalDirective,
   },
-  mixins: [glFeatureFlagsMixin()],
   inject: ['prometheus', 'generic', 'opsgenie'],
   data() {
     return {
@@ -148,6 +152,20 @@ export default {
         ? this.$options.targetOpsgenieUrlPlaceholder
         : this.$options.targetPrometheusUrlPlaceholder;
     },
+    integrations() {
+      return [
+        {
+          name: s__('AlertSettings|HTTP endpoint'),
+          type: s__('AlertsIntegrations|HTTP endpoint'),
+          activated: this.generic.activated,
+        },
+        {
+          name: s__('AlertSettings|External Prometheus'),
+          type: s__('AlertsIntegrations|Prometheus'),
+          activated: this.prometheus.activated,
+        },
+      ];
+    },
   },
   watch: {
     'testAlert.json': debounce(function debouncedJsonValidate() {
@@ -173,9 +191,12 @@ export default {
     this.authKey = this.selectedService.authKey ?? '';
   },
   methods: {
-    createUserErrorMessage(errors = { error: [''] }) {
-      // eslint-disable-next-line prefer-destructuring
-      this.serverError = errors.error[0];
+    createUserErrorMessage(errors = {}) {
+      const error = Object.entries(errors)?.[0];
+      if (error) {
+        const [field, [msg]] = error;
+        this.serverError = `${field} ${msg}`;
+      }
     },
     setOpsgenieAsDefault() {
       this.options = this.options.map(el => {
@@ -245,29 +266,11 @@ export default {
             ? { service: { opsgenie_mvc_target_url: this.targetUrl, opsgenie_mvc_enabled: value } }
             : { service: { active: value } },
         })
-        .then(() => {
-          this.active = value;
-          this.toggleSuccess(value);
-
-          if (!this.isOpsgenie && value) {
-            if (!this.selectedService.authKey) {
-              return window.location.reload();
-            }
-
-            return this.removeOpsGenieOption();
-          }
-
-          if (this.isOpsgenie && value) {
-            return this.setOpsgenieAsDefault();
-          }
-
-          // eslint-disable-next-line no-return-assign
-          return (this.options = serviceOptions);
-        })
+        .then(() => this.notifySuccessAndReload())
         .catch(({ response: { data: { errors } = {} } = {} }) => {
           this.createUserErrorMessage(errors);
           this.setFeedback({
-            feedbackMessage: `${this.$options.i18n.errorMsg}.`,
+            feedbackMessage: this.$options.i18n.errorMsg,
             variant: 'danger',
           });
         })
@@ -276,6 +279,12 @@ export default {
           this.canSaveForm = false;
         });
     },
+    reload() {
+      if (!doesHashExistInUrl(sectionHash)) {
+        window.location.hash = sectionHash;
+      }
+      window.location.reload();
+    },
     togglePrometheusActive(value) {
       this.loading = true;
       return service
@@ -288,15 +297,11 @@ export default {
             redirect: window.location,
           },
         })
-        .then(() => {
-          this.active = value;
-          this.toggleSuccess(value);
-          this.removeOpsGenieOption();
-        })
+        .then(() => this.notifySuccessAndReload())
         .catch(({ response: { data: { errors } = {} } = {} }) => {
           this.createUserErrorMessage(errors);
           this.setFeedback({
-            feedbackMessage: `${this.$options.i18n.errorMsg}.`,
+            feedbackMessage: this.$options.i18n.errorMsg,
             variant: 'danger',
           });
         })
@@ -305,18 +310,9 @@ export default {
           this.canSaveForm = false;
         });
     },
-    toggleSuccess(value) {
-      if (value) {
-        this.setFeedback({
-          feedbackMessage: this.$options.i18n.endPointActivated,
-          variant: 'info',
-        });
-      } else {
-        this.setFeedback({
-          feedbackMessage: this.$options.i18n.changesSaved,
-          variant: 'info',
-        });
-      }
+    notifySuccessAndReload() {
+      createFlash({ message: this.$options.i18n.changesSaved, type: FLASH_TYPES.NOTICE });
+      setTimeout(() => this.reload(), 1000);
     },
     setFeedback({ feedbackMessage, variant }) {
       this.feedback = { feedbackMessage, variant };
@@ -375,47 +371,50 @@ export default {
 
 <template>
   <div>
-    <gl-alert v-if="showFeedbackMsg" :variant="feedback.variant" @dismiss="dismissFeedback">
-      {{ feedback.feedbackMessage }}
-      <br />
-      <i v-if="serverError">{{ __('Error message:') }} {{ serverError }}</i>
-      <gl-button
-        v-if="showAlertSave"
-        variant="danger"
-        category="primary"
-        class="gl-display-block gl-mt-3"
-        @click="toggle(active)"
-      >
-        {{ __('Save anyway') }}
-      </gl-button>
-    </gl-alert>
-    <div data-testid="alert-settings-description" class="gl-mt-5">
-      <p v-for="section in sections" :key="section.text">
-        <gl-sprintf :message="section.text">
-          <template #link="{ content }">
-            <gl-link :href="section.url" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </div>
+    <integrations-list :integrations="integrations" />
+
     <gl-form @submit.prevent="onSubmit" @reset.prevent="onReset">
-      <gl-form-group
-        :label="$options.i18n.integrationsLabel"
-        label-for="integrations"
-        label-class="label-bold"
-      >
+      <h5 class="gl-font-lg gl-my-5">{{ $options.i18n.integrationsLabel }}</h5>
+
+      <gl-alert v-if="showFeedbackMsg" :variant="feedback.variant" @dismiss="dismissFeedback">
+        {{ feedback.feedbackMessage }}
+        <br />
+        <i v-if="serverError">{{ __('Error message:') }} {{ serverError }}</i>
+        <gl-button
+          v-if="showAlertSave"
+          variant="danger"
+          category="primary"
+          class="gl-display-block gl-mt-3"
+          @click="toggle(active)"
+        >
+          {{ __('Save anyway') }}
+        </gl-button>
+      </gl-alert>
+
+      <div data-testid="alert-settings-description">
+        <p v-for="section in sections" :key="section.text">
+          <gl-sprintf :message="section.text">
+            <template #link="{ content }">
+              <gl-link :href="section.url" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </div>
+
+      <gl-form-group label-for="integration-type" :label="$options.i18n.integration">
         <gl-form-select
+          id="integration-type"
           v-model="selectedEndpoint"
           :options="options"
           data-testid="alert-settings-select"
           @change="resetFormValues"
         />
-        <span class="gl-text-gray-200">
+        <span class="gl-text-gray-500">
           <gl-sprintf :message="$options.i18n.integrationsInfo">
             <template #link="{ content }">
               <gl-link
                 class="gl-display-inline-block"
-                href="https://gitlab.com/groups/gitlab-org/-/epics/3362"
+                href="https://gitlab.com/groups/gitlab-org/-/epics/4390"
                 target="_blank"
                 >{{ content }}</gl-link
               >
@@ -423,11 +422,7 @@ export default {
           </gl-sprintf>
         </span>
       </gl-form-group>
-      <gl-form-group
-        :label="$options.i18n.activeLabel"
-        label-for="activated"
-        label-class="label-bold"
-      >
+      <gl-form-group :label="$options.i18n.activeLabel" label-for="activated">
         <toggle-button
           id="activated"
           :disabled-input="loading"
@@ -440,7 +435,6 @@ export default {
         v-if="isOpsgenie || isPrometheus"
         :label="$options.i18n.apiBaseUrlLabel"
         label-for="api-url"
-        label-class="label-bold"
       >
         <gl-form-input
           id="api-url"
@@ -449,12 +443,12 @@ export default {
           :placeholder="baseUrlPlaceholder"
           :disabled="!active"
         />
-        <span class="gl-text-gray-200">
+        <span class="gl-text-gray-500">
           {{ $options.i18n.apiBaseUrlHelpText }}
         </span>
       </gl-form-group>
       <template v-if="!isOpsgenie">
-        <gl-form-group :label="$options.i18n.urlLabel" label-for="url" label-class="label-bold">
+        <gl-form-group :label="$options.i18n.urlLabel" label-for="url">
           <gl-form-input-group id="url" readonly :value="selectedService.url">
             <template #append>
               <clipboard-button
@@ -464,15 +458,11 @@ export default {
               />
             </template>
           </gl-form-input-group>
-          <span class="gl-text-gray-200">
+          <span class="gl-text-gray-500">
             {{ prometheusInfo }}
           </span>
         </gl-form-group>
-        <gl-form-group
-          :label="$options.i18n.authKeyLabel"
-          label-for="authorization-key"
-          label-class="label-bold"
-        >
+        <gl-form-group :label="$options.i18n.authKeyLabel" label-for="authorization-key">
           <gl-form-input-group id="authorization-key" class="gl-mb-2" readonly :value="authKey">
             <template #append>
               <clipboard-button
@@ -498,7 +488,6 @@ export default {
         <gl-form-group
           :label="$options.i18n.alertJson"
           label-for="alert-json"
-          label-class="label-bold"
           :invalid-feedback="testAlert.error"
         >
           <gl-form-textarea
@@ -511,16 +500,11 @@ export default {
             max-rows="10"
           />
         </gl-form-group>
-        <div class="gl-display-flex gl-justify-content-end">
-          <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{
-            $options.i18n.testAlertInfo
-          }}</gl-button>
-        </div>
+        <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{
+          $options.i18n.testAlertInfo
+        }}</gl-button>
       </template>
       <div class="footer-block row-content-block gl-display-flex gl-justify-content-space-between">
-        <gl-button category="primary" :disabled="!canSaveConfig" @click="onReset">
-          {{ __('Cancel') }}
-        </gl-button>
         <gl-button
           variant="success"
           category="primary"
@@ -529,6 +513,9 @@ export default {
         >
           {{ __('Save changes') }}
         </gl-button>
+        <gl-button category="primary" :disabled="!canSaveConfig" @click="onReset">
+          {{ __('Cancel') }}
+        </gl-button>
       </div>
     </gl-form>
   </div>
-- 
cgit v1.2.1

