Fix misleading upgrade CTA in Jira configuration

- only show Ultimate upgrade CTA when "Enable Jira issues" is checked
- remove unused/redundant computed values

Changelog: changed

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

@@ -75,15 +75,6 @@ export default {
     validProjectKey() {
       return !this.enableJiraIssues || Boolean(this.projectKey) || !this.validated;
     },
-    showJiraVulnerabilitiesOptions() {
-      return this.showJiraVulnerabilitiesIntegration;
-    },
-    showUltimateUpgrade() {
-      return this.showJiraIssuesIntegration && !this.showJiraVulnerabilitiesIntegration;
-    },
-    showPremiumUpgrade() {
-      return !this.showJiraIssuesIntegration;
-    },
   },
   created() {
     eventHub.$on('validateForm', this.validateForm);
@@ -128,23 +119,30 @@ export default {
               }}
             </template>
           </gl-form-checkbox>
-          <jira-issue-creation-vulnerabilities
-            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 v-if="enableJiraIssues">
+            <jira-issue-creation-vulnerabilities
+              :project-key="projectKey"
+              :initial-is-enabled="initialEnableJiraVulnerabilities"
+              :initial-issue-type-id="initialVulnerabilitiesIssuetype"
+              :show-full-feature="showJiraVulnerabilitiesIntegration"
+              data-testid="jira-for-vulnerabilities"
+              @request-get-issue-types="getJiraIssueTypes"
+            />
+            <jira-upgrade-cta
+              v-if="!showJiraVulnerabilitiesIntegration"
+              class="gl-mt-2 gl-ml-6"
+              data-testid="ultimate-upgrade-cta"
+              show-ultimate-message
+              :upgrade-plan-path="upgradePlanPath"
+            />
+          </template>
         </template>
         <jira-upgrade-cta
-          v-if="showUltimateUpgrade || showPremiumUpgrade"
+          v-else
           class="gl-mt-2"
-          :class="{ 'gl-ml-6': showUltimateUpgrade }"
+          data-testid="premium-upgrade-cta"
+          show-premium-message
           :upgrade-plan-path="upgradePlanPath"
-          :show-ultimate-message="showUltimateUpgrade"
-          :show-premium-message="showPremiumUpgrade"
         />
       </div>
     </gl-form-group>

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

@@ -2,7 +2,6 @@ import { GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 
 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';
 import { createStore } from '~/integrations/edit/store';
 
@@ -14,6 +13,7 @@ describe('JiraIssuesFields', () => {
     editProjectPath: '/edit',
     showJiraIssuesIntegration: true,
     showJiraVulnerabilitiesIntegration: true,
+    upgradePlanPath: 'https://gitlab.com',
   };
 
   const createComponent = ({ isInheriting = false, props, ...options } = {}) => {
@@ -37,47 +37,71 @@ describe('JiraIssuesFields', () => {
   const findEnableCheckboxDisabled = () =>
     findEnableCheckbox().find('[type=checkbox]').attributes('disabled');
   const findProjectKey = () => wrapper.findComponent(GlFormInput);
-  const findJiraUpgradeCta = () => wrapper.findComponent(JiraUpgradeCta);
+  const findPremiumUpgradeCTA = () => wrapper.findByTestId('premium-upgrade-cta');
+  const findUltimateUpgradeCTA = () => wrapper.findByTestId('ultimate-upgrade-cta');
   const findJiraForVulnerabilities = () => wrapper.findByTestId('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 },
+  describe('template', () => {
+    describe('when `showJiraIssuesIntegration` is false', () => {
+      beforeEach(() => {
+        createComponent({
+          props: { showJiraIssuesIntegration: false },
+        });
       });
 
-      expect(findJiraUpgradeCta().props()).toMatchObject({
-        showPremiumMessage: true,
-        showUltimateMessage: false,
-      });
-    });
+      it('shows the premium CTA', () => {
+        const premiumUpgradeCTA = findPremiumUpgradeCTA();
 
-    it('shows the ultimate message', () => {
-      createComponent({
-        props: {
-          showJiraIssuesIntegration: true,
-          showJiraVulnerabilitiesIntegration: false,
-        },
+        expect(premiumUpgradeCTA.exists()).toBe(true);
+        expect(premiumUpgradeCTA.props('upgradePlanPath')).toBe(defaultProps.upgradePlanPath);
       });
 
-      expect(findJiraUpgradeCta().props()).toMatchObject({
-        showPremiumMessage: false,
-        showUltimateMessage: true,
+      it('does not show checkbox and input field', () => {
+        expect(findEnableCheckbox().exists()).toBe(false);
+        expect(findProjectKey().exists()).toBe(false);
       });
     });
-  });
 
-  describe('template', () => {
-    describe('upgrade banner for non-Premium user', () => {
+    describe('when `showJiraIssuesIntegration` is true and `showJiraVulnerabilitiesIntegration` is false', () => {
       beforeEach(() => {
-        createComponent({ props: { initialProjectKey: '', showJiraIssuesIntegration: false } });
+        createComponent({
+          props: { showJiraIssuesIntegration: true, showJiraVulnerabilitiesIntegration: false },
+        });
       });
 
-      it('does not show checkbox and input field', () => {
-        expect(findEnableCheckbox().exists()).toBe(false);
-        expect(findProjectKey().exists()).toBe(false);
+      it('renders "Enable Jira Issues" checkbox', () => {
+        expect(findEnableCheckbox().exists()).toBe(true);
+        expect(findEnableCheckboxDisabled()).toBeUndefined();
+      });
+
+      it.each`
+        scenario                                                                        | enableJiraIssues
+        ${'when "Enable Jira Issues" is checked, shows ultimate upgrade CTA'}           | ${true}
+        ${'when "Enable Jira Issues" is unchecked, does not show ultimate upgrade CTA'} | ${false}
+      `('$scenario', async ({ enableJiraIssues }) => {
+        createComponent({
+          props: { showJiraIssuesIntegration: true, showJiraVulnerabilitiesIntegration: false },
+        });
+
+        if (enableJiraIssues) {
+          await setEnableCheckbox();
+        }
+
+        expect(findPremiumUpgradeCTA().exists()).toBe(false);
+        expect(findUltimateUpgradeCTA().exists()).toBe(enableJiraIssues);
+      });
+    });
+
+    describe('when `showJiraIssuesIntegration` is true and `showJiraVulnerabilitiesIntegration` is true', () => {
+      it('does not show any upgrade CTA', () => {
+        createComponent({
+          props: { showJiraIssuesIntegration: true, showJiraVulnerabilitiesIntegration: true },
+        });
+
+        expect(findPremiumUpgradeCTA().exists()).toBe(false);
+        expect(findUltimateUpgradeCTA().exists()).toBe(false);
       });
     });
 
@@ -86,11 +110,6 @@ describe('JiraIssuesFields', () => {
         createComponent({ props: { initialProjectKey: '' } });
       });
 
-      it('renders enabled checkbox', () => {
-        expect(findEnableCheckbox().exists()).toBe(true);
-        expect(findEnableCheckboxDisabled()).toBeUndefined();
-      });
-
       it('renders disabled project_key input', () => {
         const projectKey = findProjectKey();
 
@@ -99,10 +118,6 @@ describe('JiraIssuesFields', () => {
         expect(projectKey.attributes('required')).toBeUndefined();
       });
 
-      it('does not show upgrade banner', () => {
-        expect(findJiraUpgradeCta().exists()).toBe(false);
-      });
-
       // As per https://vuejs.org/v2/guide/forms.html#Checkbox-1,
       // browsers don't include unchecked boxes in form submissions.
       it('includes issues_enabled as false even if unchecked', () => {