Add Jira trigger and issues sections

These are specific sections used only by the Jira integration.

The "Issues" section is hidden for group / instance level
integrations since we currently only allow to set this up
on the project level.

app/assets/javascripts/integrations/constants.js

@@ -28,8 +28,12 @@ export const overridesTabTitle = s__('Integrations|Projects using custom setting
 
 export const integrationFormSections = {
   CONNECTION: 'connection',
+  JIRA_TRIGGER: 'jira_trigger',
+  JIRA_ISSUES: 'jira_issues',
 };
 
 export const integrationFormSectionComponents = {
   [integrationFormSections.CONNECTION]: 'IntegrationSectionConnection',
+  [integrationFormSections.JIRA_TRIGGER]: 'IntegrationSectionJiraTrigger',
+  [integrationFormSections.JIRA_ISSUES]: 'IntegrationSectionJiraIssues',
 };

app/assets/javascripts/integrations/edit/components/integration_form.vue

@@ -39,6 +39,14 @@ export default {
       import(
         /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue'
       ),
+    IntegrationSectionJiraIssues: () =>
+      import(
+        /* webpackChunkName: 'integrationSectionJiraIssues' */ '~/integrations/edit/components/sections/jira_issues.vue'
+      ),
+    IntegrationSectionJiraTrigger: () =>
+      import(
+        /* webpackChunkName: 'integrationSectionJiraTrigger' */ '~/integrations/edit/components/sections/jira_trigger.vue'
+      ),
     GlButton,
     GlForm,
   },
@@ -225,6 +233,7 @@ export default {
               :fields="fieldsForSection(section)"
               :is-validated="isValidated"
               @toggle-integration-active="onToggleIntegrationState"
+              @request-jira-issue-types="onRequestJiraIssueTypes"
             />
           </div>
         </div>
@@ -244,13 +253,13 @@ export default {
           @toggle-integration-active="onToggleIntegrationState"
         />
         <jira-trigger-fields
-          v-if="isJira"
+          v-if="isJira && !hasSections"
           :key="`${currentKey}-jira-trigger-fields`"
           v-bind="propsSource.triggerFieldsProps"
           :is-validated="isValidated"
         />
         <trigger-fields
-          v-else-if="propsSource.triggerEvents.length"
+          v-else-if="propsSource.triggerEvents.length && !hasSections"
           :key="`${currentKey}-trigger-fields`"
           :events="propsSource.triggerEvents"
           :type="propsSource.type"
@@ -262,7 +271,7 @@ export default {
           :is-validated="isValidated"
         />
         <jira-issues-fields
-          v-if="isJira && !isInstanceOrGroupLevel"
+          v-if="isJira && !isInstanceOrGroupLevel && !hasSections"
           :key="`${currentKey}-jira-issues-fields`"
           v-bind="propsSource.jiraIssuesProps"
           :is-validated="isValidated"

app/assets/javascripts/integrations/edit/components/sections/jira_issues.vue

+<script>
+import { mapGetters } from 'vuex';
+
+import JiraIssuesFields from '../jira_issues_fields.vue';
+
+export default {
+  name: 'IntegrationSectionJiraIssues',
+  components: {
+    JiraIssuesFields,
+  },
+  props: {
+    isValidated: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters(['currentKey', 'propsSource', 'isProjectLevel']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <jira-issues-fields
+      v-if="isProjectLevel"
+      :key="`${currentKey}-jira-issues-fields`"
+      v-bind="propsSource.jiraIssuesProps"
+      :is-validated="isValidated"
+      @request-jira-issue-types="$emit('request-jira-issue-types')"
+    />
+  </div>
+</template>

app/assets/javascripts/integrations/edit/components/sections/jira_trigger.vue

+<script>
+import { mapGetters } from 'vuex';
+
+import JiraTriggerFields from '../jira_trigger_fields.vue';
+
+export default {
+  name: 'IntegrationSectionJiraTrigger',
+  components: {
+    JiraTriggerFields,
+  },
+  props: {
+    isValidated: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters(['currentKey', 'propsSource']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <jira-trigger-fields
+      :key="`${currentKey}-jira-trigger-fields`"
+      v-bind="propsSource.triggerFieldsProps"
+      :is-validated="isValidated"
+    />
+  </div>
+</template>

app/models/integrations/jira.rb

@@ -15,6 +15,9 @@ module Integrations
     ATLASSIAN_REFERRER_GITLAB_COM = { atlOrigin: 'eyJpIjoiY2QyZTJiZDRkNGZhNGZlMWI3NzRkNTBmZmVlNzNiZTkiLCJwIjoianN3LWdpdGxhYi1pbnQifQ' }.freeze
     ATLASSIAN_REFERRER_SELF_MANAGED = { atlOrigin: 'eyJpIjoiYjM0MTA4MzUyYTYxNDVkY2IwMzVjOGQ3ZWQ3NzMwM2QiLCJwIjoianN3LWdpdGxhYlNNLWludCJ9' }.freeze
 
+    SECTION_TYPE_JIRA_TRIGGER = 'jira_trigger'
+    SECTION_TYPE_JIRA_ISSUES = 'jira_issues'
+
     validates :url, public_url: true, presence: true, if: :activated?
     validates :api_url, public_url: true, allow_blank: true
     validates :username, presence: true, if: :activated?
@@ -157,13 +160,31 @@ module Integrations
     end
 
     def sections
-      [
+      jira_issues_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('integration/jira/issues.html') }
+
+      sections = [
         {
           type: SECTION_TYPE_CONNECTION,
           title: s_('Integrations|Connection details'),
           description: help
+        },
+        {
+          type: SECTION_TYPE_JIRA_TRIGGER,
+          title: _('Trigger'),
+          description: s_('JiraService|When a Jira issue is mentioned in a commit or merge request, a remote link and comment (if enabled) will be created.')
         }
-      ].freeze
+      ]
+
+      # Jira issues is currently only configurable on the project level.
+      if project_level?
+        sections.push({
+          type: SECTION_TYPE_JIRA_ISSUES,
+          title: _('Issues'),
+          description: s_('JiraService|Work on Jira issues without leaving GitLab. Add a Jira menu to access a read-only list of your Jira issues. %{jira_issues_link_start}Learn more.%{link_end}') % { jira_issues_link_start: jira_issues_link_start, link_end: '</a>'.html_safe }
+        })
+      end
+
+      sections
     end
 
     def web_url(path = nil, **params)

spec/frontend/integrations/edit/components/sections/jira_issues_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import IntegrationSectionJiraIssue from '~/integrations/edit/components/sections/jira_issues.vue';
+import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
+import { createStore } from '~/integrations/edit/store';
+
+import { mockIntegrationProps } from '../../mock_data';
+
+describe('IntegrationSectionJiraIssue', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    const store = createStore({
+      customState: { ...mockIntegrationProps },
+    });
+    wrapper = shallowMount(IntegrationSectionJiraIssue, {
+      store,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findJiraIssuesFields = () => wrapper.findComponent(JiraIssuesFields);
+
+  describe('template', () => {
+    it('renders JiraIssuesFields', () => {
+      createComponent();
+
+      expect(findJiraIssuesFields().exists()).toBe(true);
+    });
+  });
+});

spec/frontend/integrations/edit/components/sections/jira_trigger_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import IntegrationSectionJiraTrigger from '~/integrations/edit/components/sections/jira_trigger.vue';
+import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue';
+import { createStore } from '~/integrations/edit/store';
+
+import { mockIntegrationProps } from '../../mock_data';
+
+describe('IntegrationSectionJiraTrigger', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    const store = createStore({
+      customState: { ...mockIntegrationProps },
+    });
+    wrapper = shallowMount(IntegrationSectionJiraTrigger, {
+      store,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findJiraTriggerFields = () => wrapper.findComponent(JiraTriggerFields);
+
+  describe('template', () => {
+    it('renders JiraTriggerFields', () => {
+      createComponent();
+
+      expect(findJiraTriggerFields().exists()).toBe(true);
+    });
+  });
+});