Add latest changes from gitlab-org/gitlab@master

5 files changed, 102 insertions, 46 deletions

diff --git a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
index ad1bbcd6218..f6474efcc1f 100644
--- a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
+++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
@@ -141,8 +141,13 @@ export default {
         />
       </h5>
     </div>
-    <div v-for="gitlabField in mappingData" :key="gitlabField.name" class="gl-display-table-row">
-      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p">
+
+    <div
+      v-for="(gitlabField, index) in mappingData"
+      :key="gitlabField.name"
+      class="gl-display-table-row"
+    >
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
         <gl-form-input
           aria-labelledby="gitlabFieldsHeader"
           disabled
@@ -151,17 +156,17 @@ export default {
       </div>
 
       <div class="gl-display-table-cell gl-py-3 gl-pr-3">
-        <div class="right-arrow gl-vertical-align-middle gl-mt-n1">
+        <div class="right-arrow" :class="{ 'gl-vertical-align-middle': index === 0 }">
           <i class="right-arrow-head"></i>
         </div>
       </div>
 
-      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p">
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
         <gl-dropdown
           :disabled="!gitlabField.mappingFields.length"
           aria-labelledby="parsedFieldsHeader"
           :text="selectedValue(gitlabField.mapping)"
-          class="gl-w-full gl-vertical-align-baseline!"
+          class="gl-w-full"
           :header-text="$options.i18n.selectMappingKey"
         >
           <gl-search-box-by-type @input="setSearchTerm($event, 'searchTerm', gitlabField.name)" />
@@ -186,7 +191,7 @@ export default {
           :disabled="!gitlabField.mappingFields.length"
           aria-labelledby="fallbackFieldsHeader"
           :text="selectedValue(gitlabField.fallback)"
-          class="gl-w-full gl-vertical-align-baseline!"
+          class="gl-w-full"
           :header-text="$options.i18n.selectMappingKey"
         >
           <gl-search-box-by-type
diff --git a/app/assets/javascripts/alerts_settings/components/alert_settings_form_help_block.vue b/app/assets/javascripts/alerts_settings/components/alert_settings_form_help_block.vue
index 674e3696eb5..35b7fe84c5f 100644
--- a/app/assets/javascripts/alerts_settings/components/alert_settings_form_help_block.vue
+++ b/app/assets/javascripts/alerts_settings/components/alert_settings_form_help_block.vue
@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <span class="gl-text-gray-500">
+  <span>
     <gl-sprintf :message="message">
       <template #link="{ content }">
         <gl-link class="gl-display-inline-block" :href="link" target="_blank">{{
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
index e17ce022403..a6a2d762fb6 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -13,7 +13,11 @@ import {
 import { s__, __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Tracking from '~/tracking';
-import { trackAlertIntegrationsViewsOptions, integrationToDeleteDefault } from '../constants';
+import {
+  trackAlertIntegrationsViewsOptions,
+  integrationToDeleteDefault,
+  typeSet,
+} from '../constants';
 import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
 
 export const i18n = {
@@ -36,6 +40,7 @@ const bodyTrClass =
 
 export default {
   i18n,
+  typeSet,
   components: {
     GlButtonGroup,
     GlButton,
@@ -77,6 +82,8 @@ export default {
     },
     {
       key: 'actions',
+      thClass: `gl-text-center`,
+      tdClass: `gl-text-center`,
       label: __('Actions'),
     },
   ],
@@ -121,6 +128,7 @@ export default {
   <div class="incident-management-list">
     <h5 class="gl-font-lg">{{ $options.i18n.title }}</h5>
     <gl-table
+      class="integration-list"
       :items="integrations"
       :fields="$options.fields"
       :busy="loading"
@@ -152,10 +160,11 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <gl-button-group v-if="glFeatures.httpIntegrationsList">
+        <gl-button-group v-if="glFeatures.httpIntegrationsList" class="gl-ml-3">
           <gl-button icon="pencil" @click="$emit('edit-integration', { id: item.id })" />
           <gl-button
             v-gl-modal.deleteIntegration
+            :disabled="item.type === $options.typeSet.prometheus"
             icon="remove"
             @click="setIntegrationToDelete(item)"
           />
@@ -168,7 +177,7 @@ export default {
 
       <template #empty>
         <div
-          class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3"
+          class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3 gl-px-5"
         >
           <p class="gl-text-gray-400 gl-py-3 gl-my-3">{{ $options.i18n.emptyState }}</p>
         </div>
@@ -176,7 +185,7 @@ export default {
     </gl-table>
     <gl-modal
       modal-id="deleteIntegration"
-      :title="__('Are you sure?')"
+      :title="s__('AlertSettings|Delete integration')"
       :ok-title="s__('AlertSettings|Delete integration')"
       ok-variant="danger"
       @ok="deleteIntegration"
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
index ea788060853..3656fc4d7ec 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
@@ -43,7 +43,6 @@ export default {
     integrationFormSteps: {
       step1: {
         label: s__('AlertSettings|1. Select integration type'),
-        help: s__('AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}'),
         enterprise: s__(
           'AlertSettings|In free versions of GitLab, only one integration for each type can be added. %{linkStart}Upgrade your subscription%{linkEnd} to add additional integrations.',
         ),
@@ -55,17 +54,23 @@ export default {
       step3: {
         label: s__('AlertSettings|3. Set up webhook'),
         help: s__(
-          'AlertSettings|Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.',
+          "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
+        ),
+        prometheusHelp: s__(
+          'AlertSettings|Utilize the URL and authorization key below to authorize Prometheus to send alerts to GitLab. Review the Prometheus documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.',
         ),
         info: s__('AlertSettings|Authorization key'),
         reset: s__('AlertSettings|Reset Key'),
       },
       step4: {
-        label: s__('AlertSettings|4. Test integration(optional)'),
+        label: s__('AlertSettings|4. Sample alert payload (optional)'),
         help: s__(
-          'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with to send a test alert to the %{linkStart}alerts page%{linkEnd}. This payload can be used to test the integration using the "save and test payload" button.',
+          'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to create a custom mapping (optional), or to test the integration (also optional).',
+        ),
+        prometheusHelp: s__(
+          'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional).',
         ),
-        placeholder: s__('AlertSettings|Enter test alert JSON....'),
+        placeholder: s__('AlertSettings|{ "events": [{ "application": "Name of application" }] }'),
         resetHeader: s__('AlertSettings|Reset the mapping'),
         resetBody: s__(
           "AlertSettings|If you edit the payload, the stored mapping will be reset, and you'll need to re-map the fields.",
@@ -96,7 +101,7 @@ export default {
       opsgenie: {
         label: s__('AlertSettings|2. Add link to your Opsgenie alert list'),
         info: s__(
-          'AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your exisiting Opsgenie instance. By selecting this option, you cannot recieve alerts from any other source in GitLab; it will effectivley be turing Alerts within GitLab off as a feature.',
+          'AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your existing Opsgenie instance. By selecting this option, you cannot receive alerts from any other source in GitLab; it will effectively be turning Alerts within GitLab off as a feature.',
         ),
       },
     },
@@ -141,6 +146,12 @@ export default {
       type: Boolean,
       required: true,
     },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    canManageOpsgenie: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   apollo: {
     currentIntegration: {
@@ -165,12 +176,22 @@ export default {
     };
   },
   computed: {
+    isPrometheus() {
+      return this.selectedIntegration === this.$options.typeSet.prometheus;
+    },
     jsonIsValid() {
       return this.integrationTestPayload.error === null;
     },
     // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
     disabledIntegrations() {
-      return this.opsgenie.active ? [typeSet.http, typeSet.prometheus] : [typeSet.opsgenie];
+      const options = [];
+      if (this.opsgenie.active) {
+        options.push(typeSet.http, typeSet.prometheus);
+      } else if (!this.canManageOpsgenie) {
+        options.push(typeSet.opsgenie);
+      }
+
+      return options;
     },
     options() {
       return integrationTypesNew.map(el => ({
@@ -249,10 +270,13 @@ export default {
       }
 
       // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
-      if (this.opsgenie.active && this.selectedIntegration === typeSet.opsgenie) {
+      if (this.canManageOpsgenie && this.selectedIntegration === typeSet.opsgenie) {
         this.isManagingOpsgenie = true;
         this.active = this.opsgenie.active;
         this.integrationForm.apiUrl = this.opsgenie.opsgenieMvcTargetUrl;
+      } else {
+        // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+        this.isManagingOpsgenie = false;
       }
     },
     // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
@@ -319,6 +343,9 @@ export default {
         error: null,
       };
       this.active = false;
+
+      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+      this.isManagingOpsgenie = false;
     },
     resetAuthKey() {
       if (!this.currentIntegration) {
@@ -388,13 +415,6 @@ export default {
         @change="integrationTypeSelect"
       />
 
-      <div class="gl-my-4">
-        <alert-settings-form-help-block
-          :message="$options.i18n.integrationFormSteps.step1.help"
-          link="https://gitlab.com/groups/gitlab-org/-/epics/4390"
-        />
-      </div>
-
       <div v-if="!canAddIntegration" class="gl-my-4" data-testid="multi-integrations-not-supported">
         <alert-settings-form-help-block
           :message="$options.i18n.integrationFormSteps.step1.enterprise"
@@ -451,7 +471,11 @@ export default {
           label-for="integration-webhook"
         >
           <alert-settings-form-help-block
-            :message="$options.i18n.integrationFormSteps.step3.help"
+            :message="
+              isPrometheus
+                ? $options.i18n.integrationFormSteps.step3.prometheusHelp
+                : $options.i18n.integrationFormSteps.step3.help
+            "
             link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
           />
 
@@ -462,8 +486,8 @@ export default {
             class="gl-my-4 gl-font-weight-normal"
           />
 
-          <div v-if="selectedIntegration === $options.typeSet.prometheus" class="gl-my-4">
-            <span>
+          <div v-if="isPrometheus" class="gl-my-4">
+            <span class="gl-font-weight-bold">
               {{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }}
             </span>
 
@@ -471,7 +495,7 @@ export default {
               id="integration-apiUrl"
               v-model="integrationForm.apiUrl"
               type="text"
-              :placeholder="$options.targetPrometheusUrlPlaceholder"
+              :placeholder="$options.placeholders.prometheus"
             />
 
             <span class="gl-text-gray-400">
@@ -480,7 +504,7 @@ export default {
           </div>
 
           <div class="gl-my-4">
-            <span>
+            <span class="gl-font-weight-bold">
               {{ s__('AlertSettings|Webhook URL') }}
             </span>
 
@@ -496,13 +520,13 @@ export default {
           </div>
 
           <div class="gl-my-4">
-            <span>
+            <span class="gl-font-weight-bold">
               {{ $options.i18n.integrationFormSteps.step3.info }}
             </span>
 
             <gl-form-input-group
               id="authorization-key"
-              class="gl-mb-2"
+              class="gl-mb-3"
               readonly
               :value="integrationForm.token"
             >
@@ -515,7 +539,7 @@ export default {
               </template>
             </gl-form-input-group>
 
-            <gl-button v-gl-modal.authKeyModal :disabled="!active" class="gl-mt-3">
+            <gl-button v-gl-modal.authKeyModal :disabled="!active">
               {{ $options.i18n.integrationFormSteps.step3.reset }}
             </gl-button>
             <gl-modal
@@ -529,6 +553,7 @@ export default {
             </gl-modal>
           </div>
         </gl-form-group>
+
         <gl-form-group
           id="test-integration"
           :label="$options.i18n.integrationFormSteps.step4.label"
@@ -537,7 +562,11 @@ export default {
           :invalid-feedback="integrationTestPayload.error"
         >
           <alert-settings-form-help-block
-            :message="$options.i18n.integrationFormSteps.step4.help"
+            :message="
+              isPrometheus || !showMappingBuilder
+                ? $options.i18n.integrationFormSteps.step4.prometheusHelp
+                : $options.i18n.integrationFormSteps.step4.help
+            "
             :link="generic.alertsUsageUrl"
           />
 
@@ -547,7 +576,7 @@ export default {
             :disabled="isPayloadEditDisabled"
             :state="jsonIsValid"
             :placeholder="$options.i18n.integrationFormSteps.step4.placeholder"
-            class="gl-my-4"
+            class="gl-my-3"
             :debounce="$options.JSON_VALIDATE_DELAY"
             rows="6"
             max-rows="10"
@@ -594,32 +623,38 @@ export default {
           :label="$options.i18n.integrationFormSteps.step5.label"
           label-for="mapping-builder"
         >
-          <span class="gl-text-gray-500">{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
+          <span>{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
           <mapping-builder
             :payload-fields="mappingBuilderFields"
             :mapping="mappingBuilderMapping"
           />
         </gl-form-group>
       </div>
-      <div class="gl-display-flex gl-justify-content-end">
-        <gl-button type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button>
+      <div class="gl-display-flex gl-justify-content-start gl-py-3">
+        <gl-button
+          type="submit"
+          variant="success"
+          class="js-no-auto-disable"
+          data-testid="integration-form-submit"
+          >{{ s__('AlertSettings|Save integration') }}
+        </gl-button>
         <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
         <gl-button
+          v-if="!isManagingOpsgenie"
           data-testid="integration-test-and-submit"
-          :disabled="Boolean(integrationTestPayload.error) || isManagingOpsgenie"
+          :disabled="Boolean(integrationTestPayload.error)"
           category="secondary"
           variant="success"
-          class="gl-mr-1 js-no-auto-disable"
+          class="gl-mx-3 js-no-auto-disable"
           @click="submitWithTestPayload"
           >{{ s__('AlertSettings|Save and test payload') }}</gl-button
         >
         <gl-button
-          type="submit"
-          variant="success"
+          type="reset"
           class="js-no-auto-disable"
-          data-testid="integration-form-submit"
-          >{{ s__('AlertSettings|Save integration') }}
-        </gl-button>
+          :class="{ 'gl-ml-3': isManagingOpsgenie }"
+          >{{ __('Cancel') }}</gl-button
+        >
       </div>
     </gl-collapse>
   </gl-form>
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index bb8f2325bf6..1ffc2f80148 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -118,6 +118,12 @@ export default {
     canAddIntegration() {
       return this.multiIntegrations || this.integrations?.list?.length < 2;
     },
+    canManageOpsgenie() {
+      return (
+        this.integrations?.list?.every(({ active }) => active === false) ||
+        this.integrations?.list?.length === 0
+      );
+    },
   },
   methods: {
     createNewIntegration({ type, variables }) {
@@ -313,6 +319,7 @@ export default {
       v-if="glFeatures.httpIntegrationsList"
       :loading="isUpdating"
       :can-add-integration="canAddIntegration"
+      :can-manage-opsgenie="canManageOpsgenie"
       @create-new-integration="createNewIntegration"
       @update-integration="updateIntegration"
       @reset-token="resetToken"