Display call to action for jira issues

- Display a different messaged based on the user subscription.
- Add changelog

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

 <script>
-import {
-  GlFormGroup,
-  GlFormCheckbox,
-  GlFormInput,
-  GlSprintf,
-  GlLink,
-  GlButton,
-  GlCard,
-} from '@gitlab/ui';
+import { GlFormGroup, GlFormCheckbox, GlFormInput, GlSprintf, GlLink } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../event_hub';
+import JiraUpgradeCta from './jira_upgrade_cta.vue';
 
 export default {
   name: 'JiraIssuesFields',
@@ -19,8 +12,7 @@ export default {
     GlFormInput,
     GlSprintf,
     GlLink,
-    GlButton,
-    GlCard,
+    JiraUpgradeCta,
     JiraIssueCreationVulnerabilities: () =>
       import('ee_component/integrations/edit/components/jira_issue_creation_vulnerabilities.vue'),
   },
@@ -84,11 +76,13 @@ export default {
       return !this.enableJiraIssues || Boolean(this.projectKey) || !this.validated;
     },
     showJiraVulnerabilitiesOptions() {
-      return (
-        this.enableJiraIssues &&
-        this.showJiraVulnerabilitiesIntegration &&
-        this.glFeatures.jiraForVulnerabilities
-      );
+      return this.showJiraVulnerabilitiesIntegration && this.glFeatures.jiraForVulnerabilities;
+    },
+    showUltimateUpgrade() {
+      return this.showJiraIssuesIntegration && !this.showJiraVulnerabilitiesIntegration;
+    },
+    showPremiumUpgrade() {
+      return !this.showJiraIssuesIntegration;
     },
   },
   created() {
@@ -135,27 +129,23 @@ export default {
             </template>
           </gl-form-checkbox>
           <jira-issue-creation-vulnerabilities
-            v-if="showJiraVulnerabilitiesOptions"
+            v-if="enableJiraIssues"
             :project-key="projectKey"
             :initial-is-enabled="initialEnableJiraVulnerabilities"
             :initial-issue-type-id="initialVulnerabilitiesIssuetype"
+            :show-full-feature="showJiraVulnerabilitiesOptions"
             data-testid="jira-for-vulnerabilities"
             @request-get-issue-types="getJiraIssueTypes"
           />
         </template>
-        <gl-card v-else class="gl-mt-7">
-          <strong>{{ __('This is a Premium feature') }}</strong>
-          <p>{{ __('Upgrade your plan to enable this feature of the Jira Integration.') }}</p>
-          <gl-button
-            v-if="upgradePlanPath"
-            category="primary"
-            variant="info"
-            :href="upgradePlanPath"
-            target="_blank"
-          >
-            {{ __('Upgrade your plan') }}
-          </gl-button>
-        </gl-card>
+        <jira-upgrade-cta
+          v-if="showUltimateUpgrade || showPremiumUpgrade"
+          class="gl-mt-2"
+          :class="{ 'gl-ml-6': showUltimateUpgrade }"
+          :upgrade-plan-path="upgradePlanPath"
+          :show-ultimate-message="showUltimateUpgrade"
+          :show-premium-message="showPremiumUpgrade"
+        />
       </div>
     </gl-form-group>
     <template v-if="showJiraIssuesIntegration">

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

+<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>

ee/app/assets/javascripts/integrations/edit/components/jira_issue_creation_vulnerabilities.vue

@@ -50,6 +50,11 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    showFullFeature: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     projectKey: {
       type: String,
       required: false,
@@ -129,12 +134,14 @@ export default {
     <gl-form-checkbox
       v-model="isJiraVulnerabilitiesEnabled"
       data-testid="enable-jira-vulnerabilities"
+      :disabled="!showFullFeature"
     >
       {{ $options.i18n.checkbox.label }}
       <template #help>
         {{ $options.i18n.checkbox.description }}
       </template>
     </gl-form-checkbox>
+    <template v-if="showFullFeature">
       <input
         name="service[vulnerabilities_enabled]"
         type="hidden"
@@ -195,5 +202,6 @@ export default {
           </p>
         </div>
       </gl-form-group>
+    </template>
   </div>
 </template>

ee/changelogs/unreleased/321617-jira-integration-show-upgrade-to-ultime.yml

+---
+title: Display ultimate or premium upgrade plan banner for jira issues
+merge_request: 58877
+author:
+type: added

ee/spec/frontend/integrations/edit/components/jira_issue_creation_vulnerabilities_spec.js

@@ -51,7 +51,6 @@ describe('JiraIssuesFields', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('content', () => {
@@ -101,6 +100,16 @@ describe('JiraIssuesFields', () => {
     });
   });
 
+  describe('when showFullFeature is off', () => {
+    beforeEach(() => {
+      wrapper = createShallowComponent({ props: { showFullFeature: false } });
+    });
+
+    it('does not show the issue type section', () => {
+      expect(findIssueTypeSection().exists()).toBe(false);
+    });
+  });
+
   describe('Jira issue type dropdown', () => {
     describe('with no Jira issues fetched', () => {
       beforeEach(async () => {

locale/gitlab.pot

@@ -18031,6 +18031,12 @@ msgstr ""
 msgid "JiraService|This feature requires a Premium plan."
 msgstr ""
 
+msgid "JiraService|This is a Premium feature"
+msgstr ""
+
+msgid "JiraService|This is an Ultimate feature"
+msgstr ""
+
 msgid "JiraService|This issue is synchronized with Jira"
 msgstr ""
 
@@ -18040,6 +18046,9 @@ msgstr ""
 msgid "JiraService|Transition Jira issues to their final state:"
 msgstr ""
 
+msgid "JiraService|Upgrade your plan to enable this feature of the Jira Integration."
+msgstr ""
+
 msgid "JiraService|Use a password for server version and an API token for cloud version."
 msgstr ""
 
@@ -31944,9 +31953,6 @@ msgstr ""
 msgid "This is a Jira user."
 msgstr ""
 
-msgid "This is a Premium feature"
-msgstr ""
-
 msgid "This is a confidential %{noteableTypeText}."
 msgstr ""
 
@@ -33651,9 +33657,6 @@ msgstr ""
 msgid "Upgrade your plan to activate Group Webhooks."
 msgstr ""
 
-msgid "Upgrade your plan to enable this feature of the Jira Integration."
-msgstr ""
-
 msgid "Upgrade your plan to improve merge requests."
 msgstr ""
 

spec/frontend/integrations/edit/components/jira_issues_fields_spec.js

 import { GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-
 import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
+import JiraUpgradeCta from '~/integrations/edit/components/jira_upgrade_cta.vue';
 import eventHub from '~/integrations/edit/event_hub';
 
 describe('JiraIssuesFields', () => {
@@ -28,23 +28,46 @@ describe('JiraIssuesFields', () => {
     }
   });
 
-  const findEnableCheckbox = () => wrapper.find(GlFormCheckbox);
-  const findProjectKey = () => wrapper.find(GlFormInput);
-  const expectedBannerText = 'This is a Premium feature';
+  const findEnableCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findProjectKey = () => wrapper.findComponent(GlFormInput);
+  const findJiraUpgradeCta = () => wrapper.findComponent(JiraUpgradeCta);
   const findJiraForVulnerabilities = () => wrapper.find('[data-testid="jira-for-vulnerabilities"]');
   const setEnableCheckbox = async (isEnabled = true) =>
     findEnableCheckbox().vm.$emit('input', isEnabled);
 
+  describe('jira issues call to action', () => {
+    it('shows the premium message', () => {
+      createComponent({
+        props: { showJiraIssuesIntegration: false },
+      });
+
+      expect(findJiraUpgradeCta().props()).toMatchObject({
+        showPremiumMessage: true,
+        showUltimateMessage: false,
+      });
+    });
+
+    it('shows the ultimate message', () => {
+      createComponent({
+        props: {
+          showJiraIssuesIntegration: true,
+          showJiraVulnerabilitiesIntegration: false,
+        },
+      });
+
+      expect(findJiraUpgradeCta().props()).toMatchObject({
+        showPremiumMessage: false,
+        showUltimateMessage: true,
+      });
+    });
+  });
+
   describe('template', () => {
     describe('upgrade banner for non-Premium user', () => {
       beforeEach(() => {
         createComponent({ props: { initialProjectKey: '', showJiraIssuesIntegration: false } });
       });
 
-      it('shows upgrade banner', () => {
-        expect(wrapper.text()).toContain(expectedBannerText);
-      });
-
       it('does not show checkbox and input field', () => {
         expect(findEnableCheckbox().exists()).toBe(false);
         expect(findProjectKey().exists()).toBe(false);
@@ -57,7 +80,7 @@ describe('JiraIssuesFields', () => {
       });
 
       it('does not show upgrade banner', () => {
-        expect(wrapper.text()).not.toContain(expectedBannerText);
+        expect(findJiraUpgradeCta().exists()).toBe(false);
       });
 
       // As per https://vuejs.org/v2/guide/forms.html#Checkbox-1,
@@ -125,6 +148,14 @@ describe('JiraIssuesFields', () => {
         },
       );
 
+      it('passes down the correct show-full-feature property', async () => {
+        await setEnableCheckbox(true);
+        expect(findJiraForVulnerabilities().attributes('show-full-feature')).toBe('true');
+        wrapper.setProps({ showJiraVulnerabilitiesIntegration: false });
+        await wrapper.vm.$nextTick();
+        expect(findJiraForVulnerabilities().attributes('show-full-feature')).toBeUndefined();
+      });
+
       it('passes down the correct initial-issue-type-id value when value is empty', async () => {
         await setEnableCheckbox(true);
         expect(findJiraForVulnerabilities().attributes('initial-issue-type-id')).toBeUndefined();

spec/frontend/integrations/edit/components/jira_upgrade_cta_spec.js

+import { shallowMount } from '@vue/test-utils';
+import JiraUpgradeCta from '~/integrations/edit/components/jira_upgrade_cta.vue';
+
+describe('JiraUpgradeCta', () => {
+  let wrapper;
+
+  const contentMessage = 'Upgrade your plan to enable this feature of the Jira Integration.';
+
+  const createComponent = (propsData) => {
+    wrapper = shallowMount(JiraUpgradeCta, {
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays the correct message for premium and lower users', () => {
+    createComponent({ showPremiumMessage: true });
+    expect(wrapper.html()).toContain('This is a Premium feature');
+    expect(wrapper.html()).toContain(contentMessage);
+  });
+
+  it('displays the correct message for ultimate and lower users', () => {
+    createComponent({ showUltimateMessage: true });
+    expect(wrapper.html()).toContain('This is an Ultimate feature');
+    expect(wrapper.html()).toContain(contentMessage);
+  });
+});