Add latest changes from gitlab-org/gitlab@master

4 files changed, 276 insertions, 150 deletions

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 2e66a1196a4..e17ce022403 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -11,6 +11,7 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Tracking from '~/tracking';
 import { trackAlertIntegrationsViewsOptions, integrationToDeleteDefault } from '../constants';
 import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
@@ -48,6 +49,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     integrations: {
       type: Array,
@@ -96,7 +98,7 @@ export default {
     tbodyTrClass(item) {
       return {
         [bodyTrClass]: this.integrations.length,
-        'gl-bg-blue-50': item?.id === this.currentIntegration?.id,
+        'gl-bg-blue-50': (item !== null && item.id) === this.currentIntegration?.id,
       };
     },
     trackPageViews() {
@@ -150,7 +152,7 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <gl-button-group>
+        <gl-button-group v-if="glFeatures.httpIntegrationsList">
           <gl-button icon="pencil" @click="$emit('edit-integration', { id: item.id })" />
           <gl-button
             v-gl-modal.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 2aabe0b8e07..edce46babd1 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
@@ -23,7 +23,9 @@ import {
   integrationTypesNew,
   JSON_VALIDATE_DELAY,
   targetPrometheusUrlPlaceholder,
+  targetOpsgenieUrlPlaceholder,
   typeSet,
+  sectionHash,
 } from '../constants';
 // Mocks will be removed when integrating with BE is ready
 // data format is defined and will be the same as mocked (maybe with some minor changes)
@@ -31,7 +33,10 @@ import {
 import mockedCustomMapping from './mocks/parsedMapping.json';
 
 export default {
-  targetPrometheusUrlPlaceholder,
+  placeholders: {
+    prometheus: targetPrometheusUrlPlaceholder,
+    opsgenie: targetOpsgenieUrlPlaceholder,
+  },
   JSON_VALIDATE_DELAY,
   typeSet,
   i18n: {
@@ -84,6 +89,13 @@ export default {
           'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
         ),
       },
+      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+      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.',
+        ),
+      },
     },
   },
   components: {
@@ -111,6 +123,10 @@ export default {
     prometheus: {
       default: {},
     },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    opsgenie: {
+      default: {},
+    },
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -131,7 +147,6 @@ export default {
   data() {
     return {
       selectedIntegration: integrationTypesNew[0].value,
-      options: integrationTypesNew,
       active: false,
       formVisible: false,
       integrationTestPayload: {
@@ -142,18 +157,33 @@ export default {
       customMapping: null,
       parsingPayload: false,
       currentIntegration: null,
+      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+      isManagingOpsgenie: false,
     };
   },
   computed: {
     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];
+    },
+    options() {
+      return integrationTypesNew.map(el => ({
+        ...el,
+        disabled: this.disabledIntegrations.includes(el.value),
+      }));
+    },
     selectedIntegrationType() {
       switch (this.selectedIntegration) {
-        case this.$options.typeSet.http:
+        case typeSet.http:
           return this.generic;
-        case this.$options.typeSet.prometheus:
+        case typeSet.prometheus:
           return this.prometheus;
+        // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+        case typeSet.opsgenie:
+          return this.opsgenie;
         default:
           return {};
       }
@@ -214,6 +244,30 @@ export default {
       } else {
         this.formVisible = true;
       }
+
+      // 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) {
+        this.isManagingOpsgenie = true;
+        this.active = this.opsgenie.active;
+        this.integrationForm.apiUrl = this.opsgenie.opsgenieMvcTargetUrl;
+      }
+    },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    submitWithOpsgenie() {
+      return service
+        .updateGenericActive({
+          endpoint: this.opsgenie.formPath,
+          params: {
+            service: {
+              opsgenie_mvc_target_url: this.integrationForm.apiUrl,
+              opsgenie_mvc_enabled: this.active,
+            },
+          },
+        })
+        .then(() => {
+          window.location.hash = sectionHash;
+          window.location.reload();
+        });
     },
     submitWithTestPayload() {
       return service
@@ -226,9 +280,14 @@ export default {
         });
     },
     submit() {
+      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+      if (this.isManagingOpsgenie) {
+        return this.submitWithOpsgenie();
+      }
+
       const { name, apiUrl } = this.integrationForm;
       const variables =
-        this.selectedIntegration === this.$options.typeSet.http
+        this.selectedIntegration === typeSet.http
           ? { name, active: this.active }
           : { apiUrl, active: this.active };
       const integrationPayload = { type: this.selectedIntegration, variables };
@@ -312,7 +371,6 @@ export default {
 <template>
   <gl-form class="gl-mt-6" @submit.prevent="submit" @reset.prevent="reset">
     <h5 class="gl-font-lg gl-my-5">{{ s__('AlertSettings|Add new integrations') }}</h5>
-
     <gl-form-group
       id="integration-type"
       :label="$options.i18n.integrationFormSteps.step1.label"
@@ -340,170 +398,206 @@ export default {
       </div>
     </gl-form-group>
     <gl-collapse v-model="formVisible" class="gl-mt-3">
-      <gl-form-group
-        id="name-integration"
-        :label="$options.i18n.integrationFormSteps.step2.label"
-        label-for="name-integration"
-      >
-        <gl-form-input
-          v-model="integrationForm.name"
-          type="text"
-          :placeholder="$options.i18n.integrationFormSteps.step2.placeholder"
-        />
-      </gl-form-group>
-      <gl-form-group
-        id="integration-webhook"
-        :label="$options.i18n.integrationFormSteps.step3.label"
-        label-for="integration-webhook"
-      >
-        <alert-settings-form-help-block
-          :message="$options.i18n.integrationFormSteps.step3.help"
-          link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
-        />
-
-        <gl-toggle
-          v-model="active"
-          :is-loading="loading"
-          :label="__('Active')"
-          class="gl-my-4 gl-font-weight-normal"
-        />
-
-        <div v-if="selectedIntegration === $options.typeSet.prometheus" class="gl-my-4">
-          <span>
-            {{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }}
+      <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
+      <div v-if="isManagingOpsgenie">
+        <gl-form-group
+          id="integration-webhook"
+          :label="$options.i18n.integrationFormSteps.opsgenie.label"
+          label-for="integration-webhook"
+        >
+          <span class="gl-my-4">
+            {{ $options.i18n.integrationFormSteps.opsgenie.info }}
           </span>
 
+          <gl-toggle
+            v-model="active"
+            :is-loading="loading"
+            :label="__('Active')"
+            class="gl-my-4 gl-font-weight-normal"
+          />
+
           <gl-form-input
-            id="integration-apiUrl"
+            id="opsgenie-opsgenieMvcTargetUrl"
             v-model="integrationForm.apiUrl"
             type="text"
-            :placeholder="$options.targetPrometheusUrlPlaceholder"
+            :placeholder="$options.placeholders.opsgenie"
           />
 
-          <span class="gl-text-gray-400">
+          <span class="gl-text-gray-400 gl-my-1">
             {{ $options.i18n.integrationFormSteps.prometheusFormUrl.help }}
           </span>
-        </div>
+        </gl-form-group>
+      </div>
+      <div v-else>
+        <gl-form-group
+          id="name-integration"
+          :label="$options.i18n.integrationFormSteps.step2.label"
+          label-for="name-integration"
+        >
+          <gl-form-input
+            v-model="integrationForm.name"
+            type="text"
+            :placeholder="$options.i18n.integrationFormSteps.step2.placeholder"
+          />
+        </gl-form-group>
+        <gl-form-group
+          id="integration-webhook"
+          :label="$options.i18n.integrationFormSteps.step3.label"
+          label-for="integration-webhook"
+        >
+          <alert-settings-form-help-block
+            :message="$options.i18n.integrationFormSteps.step3.help"
+            link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
+          />
 
-        <div class="gl-my-4">
-          <span>
-            {{ s__('AlertSettings|Webhook URL') }}
-          </span>
+          <gl-toggle
+            v-model="active"
+            :is-loading="loading"
+            :label="__('Active')"
+            class="gl-my-4 gl-font-weight-normal"
+          />
 
-          <gl-form-input-group id="url" readonly :value="integrationForm.url">
-            <template #append>
-              <clipboard-button
-                :text="integrationForm.url || ''"
-                :title="__('Copy')"
-                class="gl-m-0!"
-              />
-            </template>
-          </gl-form-input-group>
-        </div>
+          <div v-if="selectedIntegration === $options.typeSet.prometheus" class="gl-my-4">
+            <span>
+              {{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }}
+            </span>
 
-        <div class="gl-my-4">
-          <span>
-            {{ $options.i18n.integrationFormSteps.step3.info }}
-          </span>
+            <gl-form-input
+              id="integration-apiUrl"
+              v-model="integrationForm.apiUrl"
+              type="text"
+              :placeholder="$options.targetPrometheusUrlPlaceholder"
+            />
 
-          <gl-form-input-group
-            id="authorization-key"
-            class="gl-mb-2"
-            readonly
-            :value="integrationForm.token"
-          >
-            <template #append>
-              <clipboard-button
-                :text="integrationForm.token || ''"
-                :title="__('Copy')"
-                class="gl-m-0!"
-              />
-            </template>
-          </gl-form-input-group>
+            <span class="gl-text-gray-400">
+              {{ $options.i18n.integrationFormSteps.prometheusFormUrl.help }}
+            </span>
+          </div>
 
-          <gl-button v-gl-modal.authKeyModal :disabled="!active" class="gl-mt-3">
-            {{ $options.i18n.integrationFormSteps.step3.reset }}
-          </gl-button>
-          <gl-modal
-            modal-id="authKeyModal"
-            :title="$options.i18n.integrationFormSteps.step3.reset"
-            :ok-title="$options.i18n.integrationFormSteps.step3.reset"
-            ok-variant="danger"
-            @ok="resetAuthKey"
-          >
-            {{ $options.i18n.integrationFormSteps.restKeyInfo.label }}
-          </gl-modal>
-        </div>
-      </gl-form-group>
-      <gl-form-group
-        id="test-integration"
-        :label="$options.i18n.integrationFormSteps.step4.label"
-        label-for="test-integration"
-        :invalid-feedback="integrationTestPayload.error"
-      >
-        <alert-settings-form-help-block
-          :message="$options.i18n.integrationFormSteps.step4.help"
-          :link="generic.alertsUsageUrl"
-        />
+          <div class="gl-my-4">
+            <span>
+              {{ s__('AlertSettings|Webhook URL') }}
+            </span>
 
-        <gl-form-textarea
-          id="test-payload"
-          v-model.trim="integrationTestPayload.json"
-          :disabled="isPayloadEditDisabled"
-          :state="jsonIsValid"
-          :placeholder="$options.i18n.integrationFormSteps.step4.placeholder"
-          class="gl-my-4"
-          :debounce="$options.JSON_VALIDATE_DELAY"
-          rows="6"
-          max-rows="10"
-          @input="validateJson"
-        />
+            <gl-form-input-group id="url" readonly :value="integrationForm.url">
+              <template #append>
+                <clipboard-button
+                  :text="integrationForm.url || ''"
+                  :title="__('Copy')"
+                  class="gl-m-0!"
+                />
+              </template>
+            </gl-form-input-group>
+          </div>
+
+          <div class="gl-my-4">
+            <span>
+              {{ $options.i18n.integrationFormSteps.step3.info }}
+            </span>
+
+            <gl-form-input-group
+              id="authorization-key"
+              class="gl-mb-2"
+              readonly
+              :value="integrationForm.token"
+            >
+              <template #append>
+                <clipboard-button
+                  :text="integrationForm.token || ''"
+                  :title="__('Copy')"
+                  class="gl-m-0!"
+                />
+              </template>
+            </gl-form-input-group>
+
+            <gl-button v-gl-modal.authKeyModal :disabled="!active" class="gl-mt-3">
+              {{ $options.i18n.integrationFormSteps.step3.reset }}
+            </gl-button>
+            <gl-modal
+              modal-id="authKeyModal"
+              :title="$options.i18n.integrationFormSteps.step3.reset"
+              :ok-title="$options.i18n.integrationFormSteps.step3.reset"
+              ok-variant="danger"
+              @ok="resetAuthKey"
+            >
+              {{ $options.i18n.integrationFormSteps.restKeyInfo.label }}
+            </gl-modal>
+          </div>
+        </gl-form-group>
+        <gl-form-group
+          id="test-integration"
+          :label="$options.i18n.integrationFormSteps.step4.label"
+          label-for="test-integration"
+          :invalid-feedback="integrationTestPayload.error"
+        >
+          <alert-settings-form-help-block
+            :message="$options.i18n.integrationFormSteps.step4.help"
+            :link="generic.alertsUsageUrl"
+          />
+
+          <gl-form-textarea
+            id="test-payload"
+            v-model.trim="integrationTestPayload.json"
+            :disabled="isPayloadEditDisabled"
+            :state="jsonIsValid"
+            :placeholder="$options.i18n.integrationFormSteps.step4.placeholder"
+            class="gl-my-4"
+            :debounce="$options.JSON_VALIDATE_DELAY"
+            rows="6"
+            max-rows="10"
+            @input="validateJson"
+          />
 
-        <template v-if="showMappingBuilder">
-          <gl-button
-            v-if="canEditPayload"
-            v-gl-modal.resetPayloadModal
-            :disabled="!active"
-            class="gl-mt-3"
-          >
-            {{ $options.i18n.integrationFormSteps.step4.editPayload }}
-          </gl-button>
+          <template v-if="showMappingBuilder">
+            <gl-button
+              v-if="canEditPayload"
+              v-gl-modal.resetPayloadModal
+              :disabled="!active"
+              class="gl-mt-3"
+            >
+              {{ $options.i18n.integrationFormSteps.step4.editPayload }}
+            </gl-button>
 
-          <gl-button
-            v-else
-            :disabled="!active"
-            :loading="parsingPayload"
-            class="gl-mt-3"
-            @click="parseMapping"
-          >
-            {{ $options.i18n.integrationFormSteps.step4.submitPayload }}
-          </gl-button>
-          <gl-modal
-            modal-id="resetPayloadModal"
-            :title="$options.i18n.integrationFormSteps.step4.resetHeader"
-            :ok-title="$options.i18n.integrationFormSteps.step4.resetOk"
-            ok-variant="danger"
-            @ok="resetSamplePayloadConfirmed = true"
-          >
-            {{ $options.i18n.integrationFormSteps.step4.resetBody }}
-          </gl-modal>
-        </template>
-      </gl-form-group>
+            <gl-button
+              v-else
+              :disabled="!active"
+              :loading="parsingPayload"
+              class="gl-mt-3"
+              @click="parseMapping"
+            >
+              {{ $options.i18n.integrationFormSteps.step4.submitPayload }}
+            </gl-button>
+            <gl-modal
+              modal-id="resetPayloadModal"
+              :title="$options.i18n.integrationFormSteps.step4.resetHeader"
+              :ok-title="$options.i18n.integrationFormSteps.step4.resetOk"
+              ok-variant="danger"
+              @ok="resetSamplePayloadConfirmed = true"
+            >
+              {{ $options.i18n.integrationFormSteps.step4.resetBody }}
+            </gl-modal>
+          </template>
+        </gl-form-group>
 
-      <gl-form-group
-        v-if="showMappingBuilder"
-        id="mapping-builder"
-        :label="$options.i18n.integrationFormSteps.step5.label"
-        label-for="mapping-builder"
-      >
-        <span class="gl-text-gray-500">{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
-        <mapping-builder :payload-fields="mappingBuilderFields" :mapping="mappingBuilderMapping" />
-      </gl-form-group>
+        <gl-form-group
+          v-if="showMappingBuilder"
+          id="mapping-builder"
+          :label="$options.i18n.integrationFormSteps.step5.label"
+          label-for="mapping-builder"
+        >
+          <span class="gl-text-gray-500">{{ $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>
+        <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
         <gl-button
           data-testid="integration-test-and-submit"
-          :disabled="Boolean(integrationTestPayload.error)"
+          :disabled="Boolean(integrationTestPayload.error) || isManagingOpsgenie"
           category="secondary"
           variant="success"
           class="gl-mr-1 js-no-auto-disable"
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 4f341ac07e9..bb8f2325bf6 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { fetchPolicies } from '~/lib/graphql';
@@ -38,6 +39,10 @@ export default {
     integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'),
   },
   components: {
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    GlAlert,
+    GlLink,
+    GlSprintf,
     IntegrationsList,
     SettingsFormOld,
     SettingsFormNew,
@@ -50,6 +55,10 @@ export default {
     prometheus: {
       default: {},
     },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    opsgenie: {
+      default: {},
+    },
     projectPath: {
       default: '',
     },
@@ -274,7 +283,27 @@ export default {
 
 <template>
   <div>
+    <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
+    <gl-alert v-if="opsgenie.active" :dismissible="false" variant="tip">
+      <gl-sprintf
+        :message="
+          s__(
+            'AlertSettings|We will soon be introducing the ability to create multiple unique HTTP endpoints. When this functionality is live,  you will be able to configure an integration with Opsgenie to surface Opsgenie alerts in GitLab. This will replace the current Opsgenie integration which will be deprecated. %{linkStart}More Information%{linkEnd}',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link
+            class="gl-display-inline-block"
+            href="https://gitlab.com/gitlab-org/gitlab/-/issues/273657"
+            target="_blank"
+            >{{ content }}</gl-link
+          >
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <integrations-list
+      v-else
       :integrations="glFeatures.httpIntegrationsList ? integrations.list : integrationsOptionsOld"
       :loading="loading"
       @edit-integration="editIntegration"
diff --git a/app/assets/javascripts/alerts_settings/constants.js b/app/assets/javascripts/alerts_settings/constants.js
index 19eaccf05fc..e30dc2ad553 100644
--- a/app/assets/javascripts/alerts_settings/constants.js
+++ b/app/assets/javascripts/alerts_settings/constants.js
@@ -55,6 +55,7 @@ export const integrationTypesNew = [
 export const typeSet = {
   http: 'HTTP',
   prometheus: 'PROMETHEUS',
+  opsgenie: 'OPSGENIE',
 };
 
 export const integrationToDeleteDefault = { id: null, name: '' };