Merge branch '334976-fix-misleading-upgrade-cta-jira-issues' into 'master'

Fix misleading upgrade CTA in Jira configuration

See merge request gitlab-org/gitlab!65302

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>
+          <template v-if="enableJiraIssues">
             <jira-issue-creation-vulnerabilities
-            v-if="enableJiraIssues"
               :project-key="projectKey"
               :initial-is-enabled="initialEnableJiraVulnerabilities"
               :initial-issue-type-id="initialVulnerabilitiesIssuetype"
-            :show-full-feature="showJiraVulnerabilitiesOptions"
+              :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,60 +37,79 @@ 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 },
-      });
-
-      expect(findJiraUpgradeCta().props()).toMatchObject({
-        showPremiumMessage: true,
-        showUltimateMessage: false,
-      });
-    });
-
-    it('shows the ultimate message', () => {
+  describe('template', () => {
+    describe.each`
+      showJiraIssuesIntegration | showJiraVulnerabilitiesIntegration
+      ${false}                  | ${false}
+      ${false}                  | ${true}
+      ${true}                   | ${false}
+      ${true}                   | ${true}
+    `(
+      'when `showJiraIssuesIntegration` is $jiraIssues and `showJiraVulnerabilitiesIntegration` is $jiraVulnerabilities',
+      ({ showJiraIssuesIntegration, showJiraVulnerabilitiesIntegration }) => {
+        beforeEach(() => {
           createComponent({
             props: {
-          showJiraIssuesIntegration: true,
-          showJiraVulnerabilitiesIntegration: false,
+              showJiraIssuesIntegration,
+              showJiraVulnerabilitiesIntegration,
             },
           });
-
-      expect(findJiraUpgradeCta().props()).toMatchObject({
-        showPremiumMessage: false,
-        showUltimateMessage: true,
-      });
         });
+
+        if (showJiraIssuesIntegration) {
+          it('renders checkbox and input field', () => {
+            expect(findEnableCheckbox().exists()).toBe(true);
+            expect(findEnableCheckboxDisabled()).toBeUndefined();
+            expect(findProjectKey().exists()).toBe(true);
           });
 
-  describe('template', () => {
-    describe('upgrade banner for non-Premium user', () => {
-      beforeEach(() => {
-        createComponent({ props: { initialProjectKey: '', showJiraIssuesIntegration: false } });
+          it('does not render the Premium CTA', () => {
+            expect(findPremiumUpgradeCTA().exists()).toBe(false);
           });
 
-      it('does not show checkbox and input field', () => {
+          if (!showJiraVulnerabilitiesIntegration) {
+            it.each`
+              scenario                                                                          | enableJiraIssues
+              ${'when "Enable Jira issues" is checked, renders Ultimate upgrade CTA'}           | ${true}
+              ${'when "Enable Jira issues" is unchecked, does not render Ultimate upgrade CTA'} | ${false}
+            `('$scenario', async ({ enableJiraIssues }) => {
+              if (enableJiraIssues) {
+                await setEnableCheckbox();
+              }
+              expect(findUltimateUpgradeCTA().exists()).toBe(enableJiraIssues);
+            });
+          }
+        } else {
+          it('does not render checkbox and input field', () => {
             expect(findEnableCheckbox().exists()).toBe(false);
             expect(findProjectKey().exists()).toBe(false);
           });
+
+          it('renders the Premium CTA', () => {
+            const premiumUpgradeCTA = findPremiumUpgradeCTA();
+
+            expect(premiumUpgradeCTA.exists()).toBe(true);
+            expect(premiumUpgradeCTA.props('upgradePlanPath')).toBe(defaultProps.upgradePlanPath);
           });
+        }
+
+        it('does not render the Ultimate CTA', () => {
+          expect(findUltimateUpgradeCTA().exists()).toBe(false);
+        });
+      },
+    );
 
     describe('Enable Jira issues checkbox', () => {
       beforeEach(() => {
         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', () => {