diff --git a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
index ec93980251bf9393a7ceaf7387d3c46d63f1f987..1242493fb5757ea442111d6fef076cac79c78fff 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
+++ b/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>
diff --git a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
index eb5f7e9fe401d7e5682c955ece1405db9146ad8d..2860d3cc37a3b413d192f629a76d910d59a55639 100644
--- a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
+++ b/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', () => {
- 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 } });
- });
+ 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,
+ showJiraVulnerabilitiesIntegration,
+ },
+ });
+ });
- it('does not show checkbox and input field', () => {
- expect(findEnableCheckbox().exists()).toBe(false);
- expect(findProjectKey().exists()).toBe(false);
- });
- });
+ if (showJiraIssuesIntegration) {
+ it('renders checkbox and input field', () => {
+ expect(findEnableCheckbox().exists()).toBe(true);
+ expect(findEnableCheckboxDisabled()).toBeUndefined();
+ expect(findProjectKey().exists()).toBe(true);
+ });
+
+ it('does not render the Premium CTA', () => {
+ expect(findPremiumUpgradeCTA().exists()).toBe(false);
+ });
+
+ 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', () => {