diff options
Diffstat (limited to 'app/assets/javascripts/integrations')
4 files changed, 78 insertions, 64 deletions
diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js index c5ed5bb08a9..b9975eed716 100644 --- a/app/assets/javascripts/integrations/constants.js +++ b/app/assets/javascripts/integrations/constants.js @@ -37,3 +37,13 @@ export const integrationFormSectionComponents = { [integrationFormSections.JIRA_TRIGGER]: 'IntegrationSectionJiraTrigger', [integrationFormSections.JIRA_ISSUES]: 'IntegrationSectionJiraIssues', }; + +export const billingPlans = { + PREMIUM: 'premium', + ULTIMATE: 'ultimate', +}; + +export const billingPlanNames = { + [billingPlans.PREMIUM]: s__('BillingPlans|Premium'), + [billingPlans.ULTIMATE]: s__('BillingPlans|Ultimate'), +}; diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index 661299920c7..9f43360fb73 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -1,5 +1,11 @@ <script> -import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml, GlForm } from '@gitlab/ui'; +import { + GlBadge, + GlButton, + GlModalDirective, + GlSafeHtmlDirective as SafeHtml, + GlForm, +} from '@gitlab/ui'; import axios from 'axios'; import * as Sentry from '@sentry/browser'; import { mapState, mapActions, mapGetters } from 'vuex'; @@ -10,6 +16,7 @@ import { I18N_SUCCESSFUL_CONNECTION_MESSAGE, integrationLevels, integrationFormSectionComponents, + billingPlanNames, } from '~/integrations/constants'; import { refreshCurrentPage } from '~/lib/utils/url_utility'; import csrf from '~/lib/utils/csrf'; @@ -42,6 +49,7 @@ export default { import( /* webpackChunkName: 'integrationSectionJiraTrigger' */ '~/integrations/edit/components/sections/jira_trigger.vue' ), + GlBadge, GlButton, GlForm, }, @@ -177,6 +185,7 @@ export default { }, csrf, integrationFormSectionComponents, + billingPlanNames, }; </script> @@ -214,7 +223,20 @@ export default { > <div class="row"> <div class="col-lg-4"> - <h4 class="gl-mt-0">{{ section.title }}</h4> + <h4 class="gl-mt-0"> + {{ section.title + }}<gl-badge + v-if="section.plan" + :href="propsSource.aboutPricingUrl" + target="_blank" + rel="noopener noreferrer" + variant="tier" + icon="license" + class="gl-ml-3" + > + {{ $options.billingPlanNames[section.plan] }} + </gl-badge> + </h4> <p v-safe-html:[$options.descriptionHtmlConfig]="section.description"></p> </div> 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 f00339c92fa..584d23e17e1 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue @@ -2,7 +2,6 @@ import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui'; import { mapGetters } from 'vuex'; import { s__, __ } from '~/locale'; -import JiraUpgradeCta from './jira_upgrade_cta.vue'; export default { name: 'JiraIssuesFields', @@ -10,7 +9,6 @@ export default { GlFormGroup, GlFormCheckbox, GlFormInput, - JiraUpgradeCta, JiraIssueCreationVulnerabilities: () => import('ee_component/integrations/edit/components/jira_issue_creation_vulnerabilities.vue'), }, @@ -45,11 +43,6 @@ export default { required: false, default: null, }, - upgradePlanPath: { - type: String, - required: false, - default: '', - }, isValidated: { type: Boolean, required: false, @@ -64,6 +57,9 @@ export default { }, computed: { ...mapGetters(['isInheriting']), + checkboxDisabled() { + return !this.showJiraIssuesIntegration || this.isInheriting; + }, validProjectKey() { return !this.enableJiraIssues || Boolean(this.projectKey) || !this.isValidated; }, @@ -85,64 +81,48 @@ export default { <template> <div> - <template v-if="showJiraIssuesIntegration"> - <input name="service[issues_enabled]" type="hidden" :value="enableJiraIssues || false" /> - <gl-form-checkbox - v-model="enableJiraIssues" - :disabled="isInheriting" - data-qa-selector="service_jira_issues_enabled_checkbox" - > - {{ $options.i18n.enableCheckboxLabel }} - <template #help> - {{ $options.i18n.enableCheckboxHelp }} - </template> - </gl-form-checkbox> + <input name="service[issues_enabled]" type="hidden" :value="enableJiraIssues || false" /> + <gl-form-checkbox + v-model="enableJiraIssues" + :disabled="checkboxDisabled" + data-qa-selector="service_jira_issues_enabled_checkbox" + > + {{ $options.i18n.enableCheckboxLabel }} + <template #help> + {{ $options.i18n.enableCheckboxHelp }} + </template> + </gl-form-checkbox> - <div v-if="enableJiraIssues" class="gl-pl-6 gl-mt-3"> - <gl-form-group - :label="$options.i18n.projectKeyLabel" - label-for="service_project_key" - :invalid-feedback="$options.i18n.requiredFieldFeedback" + <div v-if="enableJiraIssues" class="gl-pl-6 gl-mt-3"> + <gl-form-group + :label="$options.i18n.projectKeyLabel" + label-for="service_project_key" + :invalid-feedback="$options.i18n.requiredFieldFeedback" + :state="validProjectKey" + class="gl-max-w-26" + data-testid="project-key-form-group" + > + <gl-form-input + id="service_project_key" + v-model="projectKey" + name="service[project_key]" + data-qa-selector="service_jira_project_key_field" + :placeholder="$options.i18n.projectKeyPlaceholder" + :required="enableJiraIssues" :state="validProjectKey" - class="gl-max-w-26" - data-testid="project-key-form-group" - > - <gl-form-input - id="service_project_key" - v-model="projectKey" - name="service[project_key]" - data-qa-selector="service_jira_project_key_field" - :placeholder="$options.i18n.projectKeyPlaceholder" - :required="enableJiraIssues" - :state="validProjectKey" - :readonly="isInheriting" - /> - </gl-form-group> - - <jira-issue-creation-vulnerabilities - :project-key="projectKey" - :initial-is-enabled="initialEnableJiraVulnerabilities" - :initial-issue-type-id="initialVulnerabilitiesIssuetype" - :show-full-feature="showJiraVulnerabilitiesIntegration" - class="gl-mt-6" - data-testid="jira-for-vulnerabilities" - @request-jira-issue-types="$emit('request-jira-issue-types')" - /> - <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" + :readonly="isInheriting" /> - </div> - </template> + </gl-form-group> - <jira-upgrade-cta - v-else - data-testid="premium-upgrade-cta" - show-premium-message - :upgrade-plan-path="upgradePlanPath" - /> + <jira-issue-creation-vulnerabilities + :project-key="projectKey" + :initial-is-enabled="initialEnableJiraVulnerabilities" + :initial-issue-type-id="initialVulnerabilitiesIssuetype" + :show-full-feature="showJiraVulnerabilitiesIntegration" + class="gl-mt-6" + data-testid="jira-for-vulnerabilities" + @request-jira-issue-types="$emit('request-jira-issue-types')" + /> + </div> </div> </template> diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js index 9a9aae36657..92e6ca509c3 100644 --- a/app/assets/javascripts/integrations/edit/index.js +++ b/app/assets/javascripts/integrations/edit/index.js @@ -23,6 +23,7 @@ function parseDatasetToProps(data) { projectKey, upgradePlanPath, learnMorePath, + aboutPricingUrl, triggerEvents, sections, fields, @@ -82,6 +83,7 @@ function parseDatasetToProps(data) { upgradePlanPath, }, learnMorePath, + aboutPricingUrl, triggerEvents: JSON.parse(triggerEvents), sections: JSON.parse(sections, { deep: true }), fields: convertObjectPropsToCamelCase(JSON.parse(fields), { deep: true }), |