Add latest changes from gitlab-org/gitlab@master

3 files changed, 169 insertions, 9 deletions

diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
new file mode 100644
index 00000000000..ab6a3f97bfd
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -0,0 +1,42 @@
+<script>
+import ActiveToggle from './active_toggle.vue';
+import JiraTriggerFields from './jira_trigger_fields.vue';
+
+export default {
+  name: 'IntegrationForm',
+  components: {
+    ActiveToggle,
+    JiraTriggerFields,
+  },
+  props: {
+    activeToggleProps: {
+      type: Object,
+      required: true,
+    },
+    showActive: {
+      type: Boolean,
+      required: true,
+    },
+    triggerFieldsProps: {
+      type: Object,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isJira() {
+      return this.type === 'jira';
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <active-toggle v-if="showActive" v-bind="activeToggleProps" />
+    <jira-trigger-fields v-if="isJira" v-bind="triggerFieldsProps" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
new file mode 100644
index 00000000000..70278e401ce
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
@@ -0,0 +1,99 @@
+<script>
+import { GlFormCheckbox, GlFormRadio } from '@gitlab/ui';
+
+export default {
+  name: 'JiraTriggerFields',
+  components: {
+    GlFormCheckbox,
+    GlFormRadio,
+  },
+  props: {
+    initialTriggerCommit: {
+      type: Boolean,
+      required: true,
+    },
+    initialTriggerMergeRequest: {
+      type: Boolean,
+      required: true,
+    },
+    initialEnableComments: {
+      type: Boolean,
+      required: true,
+    },
+    initialCommentDetail: {
+      type: String,
+      required: false,
+      default: 'standard',
+    },
+  },
+  data() {
+    return {
+      triggerCommit: this.initialTriggerCommit,
+      triggerMergeRequest: this.initialTriggerMergeRequest,
+      enableComments: this.initialEnableComments,
+      commentDetail: this.initialCommentDetail,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="form-group row pt-2" role="group">
+    <label for="service[trigger]" class="col-form-label col-sm-2 pt-0">{{ __('Trigger') }}</label>
+    <div class="col-sm-10">
+      <label class="weight-normal mb-2">
+        {{
+          s__(
+            'Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) will be created.',
+          )
+        }}
+      </label>
+
+      <input name="service[commit_events]" type="hidden" value="false" />
+      <gl-form-checkbox v-model="triggerCommit" name="service[commit_events]">
+        {{ __('Commit') }}
+      </gl-form-checkbox>
+
+      <input name="service[merge_requests_events]" type="hidden" value="false" />
+      <gl-form-checkbox v-model="triggerMergeRequest" name="service[merge_requests_events]">
+        {{ __('Merge request') }}
+      </gl-form-checkbox>
+
+      <div
+        v-show="triggerCommit || triggerMergeRequest"
+        class="mt-4"
+        data-testid="comment-settings"
+      >
+        <label>
+          {{ s__('Integrations|Comment settings:') }}
+        </label>
+        <input name="service[comment_on_event_enabled]" type="hidden" value="false" />
+        <gl-form-checkbox v-model="enableComments" name="service[comment_on_event_enabled]">
+          {{ s__('Integrations|Enable comments') }}
+        </gl-form-checkbox>
+
+        <div v-show="enableComments" class="mt-4" data-testid="comment-detail">
+          <label>
+            {{ s__('Integrations|Comment detail:') }}
+          </label>
+          <gl-form-radio v-model="commentDetail" value="standard" name="service[comment_detail]">
+            {{ s__('Integrations|Standard') }}
+            <template #help>
+              {{ s__('Integrations|Includes commit title and branch') }}
+            </template>
+          </gl-form-radio>
+          <gl-form-radio v-model="commentDetail" value="all_details" name="service[comment_detail]">
+            {{ s__('Integrations|All details') }}
+            <template #help>
+              {{
+                s__(
+                  'Integrations|Includes Standard plus entire commit message, commit hash, and issue IDs',
+                )
+              }}
+            </template>
+          </gl-form-radio>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index 25ae6015f1d..7b476528a33 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -1,26 +1,45 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import ActiveToggle from './components/active_toggle.vue';
+import IntegrationForm from './components/integration_form.vue';
 
 export default el => {
   if (!el) {
     return null;
   }
 
-  const { showActive: showActiveStr, activated: activatedStr } = el.dataset;
-  const showActive = parseBoolean(showActiveStr);
-  const activated = parseBoolean(activatedStr);
-
-  if (!showActive) {
-    return null;
+  function parseBooleanInData(data) {
+    const result = {};
+    Object.entries(data).forEach(([key, value]) => {
+      result[key] = parseBoolean(value);
+    });
+    return result;
   }
 
+  const { type, commentDetail, ...booleanAttributes } = el.dataset;
+  const {
+    showActive,
+    activated,
+    commitEvents,
+    mergeRequestEvents,
+    enableComments,
+  } = parseBooleanInData(booleanAttributes);
+
   return new Vue({
     el,
     render(createElement) {
-      return createElement(ActiveToggle, {
+      return createElement(IntegrationForm, {
         props: {
-          initialActivated: activated,
+          activeToggleProps: {
+            initialActivated: activated,
+          },
+          showActive,
+          type,
+          triggerFieldsProps: {
+            initialTriggerCommit: commitEvents,
+            initialTriggerMergeRequest: mergeRequestEvents,
+            initialEnableComments: enableComments,
+            initialCommentDetail: commentDetail,
+          },
         },
       });
     },