Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

8 files changed, 157 insertions, 56 deletions

diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index b9975eed716..e4f6e931ec0 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -27,15 +27,51 @@ export const settingsTabTitle = __('Settings');
 export const overridesTabTitle = s__('Integrations|Projects using custom settings');
 
 export const integrationFormSections = {
+  CONFIGURATION: 'configuration',
   CONNECTION: 'connection',
   JIRA_TRIGGER: 'jira_trigger',
   JIRA_ISSUES: 'jira_issues',
+  TRIGGER: 'trigger',
 };
 
 export const integrationFormSectionComponents = {
+  [integrationFormSections.CONFIGURATION]: 'IntegrationSectionConfiguration',
   [integrationFormSections.CONNECTION]: 'IntegrationSectionConnection',
   [integrationFormSections.JIRA_TRIGGER]: 'IntegrationSectionJiraTrigger',
   [integrationFormSections.JIRA_ISSUES]: 'IntegrationSectionJiraIssues',
+  [integrationFormSections.TRIGGER]: 'IntegrationSectionTrigger',
+};
+
+export const integrationTriggerEvents = {
+  PUSH: 'push_events',
+  ISSUE: 'issues_events',
+  CONFIDENTIAL_ISSUE: 'confidential_issues_events',
+  MERGE_REQUEST: 'merge_requests_events',
+  NOTE: 'note_events',
+  CONFIDENTIAL_NOTE: 'confidential_note_events',
+  TAG_PUSH: 'tag_push_events',
+  PIPELINE: 'pipeline_events',
+  WIKI_PAGE: 'wiki_page_events',
+};
+
+export const integrationTriggerEventTitles = {
+  [integrationTriggerEvents.PUSH]: s__('IntegrationEvents|A push is made to the repository'),
+  [integrationTriggerEvents.ISSUE]: s__(
+    'IntegrationEvents|An issue is created, updated, or closed',
+  ),
+  [integrationTriggerEvents.CONFIDENTIAL_ISSUE]: s__(
+    'IntegrationEvents|A confidential issue is created, updated, or closed',
+  ),
+  [integrationTriggerEvents.MERGE_REQUEST]: s__(
+    'IntegrationEvents|A merge request is created, updated, or merged',
+  ),
+  [integrationTriggerEvents.NOTE]: s__('IntegrationEvents|A comment is added on an issue'),
+  [integrationTriggerEvents.CONFIDENTIAL_NOTE]: s__(
+    'IntegrationEvents|A comment is added on a confidential issue',
+  ),
+  [integrationTriggerEvents.TAG_PUSH]: s__('IntegrationEvents|A tag is pushed to the repository'),
+  [integrationTriggerEvents.PIPELINE]: s__('IntegrationEvents|A pipeline status changes'),
+  [integrationTriggerEvents.WIKI_PAGE]: s__('IntegrationEvents|A wiki page is created or updated'),
 };
 
 export const billingPlans = {
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 9f43360fb73..9307d7c2d3d 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -37,6 +37,10 @@ export default {
     DynamicField,
     ConfirmationModal,
     ResetConfirmationModal,
+    IntegrationSectionConfiguration: () =>
+      import(
+        /* webpackChunkName: 'integrationSectionConfiguration' */ '~/integrations/edit/components/sections/configuration.vue'
+      ),
     IntegrationSectionConnection: () =>
       import(
         /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue'
@@ -49,6 +53,10 @@ export default {
       import(
         /* webpackChunkName: 'integrationSectionJiraTrigger' */ '~/integrations/edit/components/sections/jira_trigger.vue'
       ),
+    IntegrationSectionTrigger: () =>
+      import(
+        /* webpackChunkName: 'integrationSectionTrigger' */ '~/integrations/edit/components/sections/trigger.vue'
+      ),
     GlBadge,
     GlButton,
     GlForm,
@@ -193,7 +201,7 @@ export default {
   <gl-form
     ref="integrationForm"
     method="post"
-    class="gl-mb-3 gl-show-field-errors integration-settings-form"
+    class="gl-mt-6 gl-mb-3 gl-show-field-errors integration-settings-form"
     :action="propsSource.formPath"
     :novalidate="!integrationActive"
   >
diff --git a/app/assets/javascripts/integrations/edit/components/jira_upgrade_cta.vue b/app/assets/javascripts/integrations/edit/components/jira_upgrade_cta.vue
deleted file mode 100644
index 9164e484440..00000000000
--- a/app/assets/javascripts/integrations/edit/components/jira_upgrade_cta.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-import { GlButton, GlCard } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
-
-export default {
-  components: {
-    GlButton,
-    GlCard,
-  },
-  props: {
-    upgradePlanPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    showPremiumMessage: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    showUltimateMessage: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    title() {
-      return this.showUltimateMessage
-        ? this.$options.i18n.titleUltimate
-        : this.$options.i18n.titlePremium;
-    },
-  },
-  i18n: {
-    titleUltimate: s__('JiraService|This is an Ultimate feature'),
-    titlePremium: s__('JiraService|This is a Premium feature'),
-    content: s__('JiraService|Upgrade your plan to enable this feature of the Jira Integration.'),
-    upgrade: __('Upgrade your plan'),
-  },
-};
-</script>
-
-<template>
-  <gl-card>
-    <strong>{{ title }}</strong>
-    <p>{{ $options.i18n.content }}</p>
-    <gl-button v-if="upgradePlanPath" category="primary" variant="info" :href="upgradePlanPath">
-      {{ $options.i18n.upgrade }}
-    </gl-button>
-  </gl-card>
-</template>
diff --git a/app/assets/javascripts/integrations/edit/components/sections/configuration.vue b/app/assets/javascripts/integrations/edit/components/sections/configuration.vue
new file mode 100644
index 00000000000..9e1ad24ae9f
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/sections/configuration.vue
@@ -0,0 +1,38 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import DynamicField from '../dynamic_field.vue';
+
+export default {
+  name: 'IntegrationSectionConfiguration',
+  components: {
+    DynamicField,
+  },
+  props: {
+    fields: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isValidated: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters(['currentKey']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <dynamic-field
+      v-for="field in fields"
+      :key="`${currentKey}-${field.name}`"
+      v-bind="field"
+      :is-validated="isValidated"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/edit/components/sections/trigger.vue b/app/assets/javascripts/integrations/edit/components/sections/trigger.vue
new file mode 100644
index 00000000000..9af5070d4cf
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/sections/trigger.vue
@@ -0,0 +1,26 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import TriggerField from '../trigger_field.vue';
+
+export default {
+  name: 'IntegrationSectionTrigger',
+  components: {
+    TriggerField,
+  },
+  computed: {
+    ...mapGetters(['currentKey', 'propsSource']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <trigger-field
+      v-for="event in propsSource.triggerEvents"
+      :key="`${currentKey}-trigger-fields-${event.name}`"
+      :event="event"
+      class="gl-mb-3"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/edit/components/trigger_field.vue b/app/assets/javascripts/integrations/edit/components/trigger_field.vue
new file mode 100644
index 00000000000..dc5ae2f3a3d
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/trigger_field.vue
@@ -0,0 +1,46 @@
+<script>
+import { GlFormCheckbox } from '@gitlab/ui';
+import { mapGetters } from 'vuex';
+
+import { integrationTriggerEventTitles } from '~/integrations/constants';
+
+export default {
+  name: 'TriggerField',
+  components: {
+    GlFormCheckbox,
+  },
+  props: {
+    event: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      value: false,
+    };
+  },
+  computed: {
+    ...mapGetters(['isInheriting']),
+    name() {
+      return `service[${this.event.name}]`;
+    },
+    title() {
+      return integrationTriggerEventTitles[this.event.name];
+    },
+  },
+  mounted() {
+    this.value = this.event.value || false;
+  },
+};
+</script>
+
+<template>
+  <div>
+    <input :name="name" type="hidden" :value="value" />
+    <gl-form-checkbox v-model="value" :disabled="isInheriting">
+      {{ title }}
+    </gl-form-checkbox>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index 92e6ca509c3..2360588ab39 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -21,7 +21,6 @@ function parseDatasetToProps(data) {
     type,
     commentDetail,
     projectKey,
-    upgradePlanPath,
     learnMorePath,
     aboutPricingUrl,
     triggerEvents,
@@ -80,12 +79,11 @@ function parseDatasetToProps(data) {
       initialEnableJiraVulnerabilities: enableJiraVulnerabilities,
       initialVulnerabilitiesIssuetype: vulnerabilitiesIssuetype,
       initialProjectKey: projectKey,
-      upgradePlanPath,
     },
     learnMorePath,
     aboutPricingUrl,
     triggerEvents: JSON.parse(triggerEvents),
-    sections: JSON.parse(sections, { deep: true }),
+    sections: JSON.parse(sections),
     fields: convertObjectPropsToCamelCase(JSON.parse(fields), { deep: true }),
     inheritFromId: parseInt(inheritFromId, 10),
     integrationLevel,
diff --git a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
index f2d3e6489ee..1255ed01f6d 100644
--- a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
+++ b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
@@ -136,7 +136,7 @@ export default {
       </template>
 
       <template #table-busy>
-        <gl-loading-icon size="md" class="gl-my-2" />
+        <gl-loading-icon size="lg" class="gl-my-2" />
       </template>
     </gl-table>
     <div class="gl-display-flex gl-justify-content-center gl-mt-5">