diff options
Diffstat (limited to 'app/assets/javascripts/integrations/edit/components')
9 files changed, 152 insertions, 92 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_checkbox.vue b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue index 6698984d02f..8677f139723 100644 --- a/app/assets/javascripts/integrations/edit/components/active_checkbox.vue +++ b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue @@ -1,6 +1,6 @@ <script> -import { mapGetters } from 'vuex'; import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; import eventHub from '../event_hub'; export default { diff --git a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue index 93ea1f4f636..bcf4b036fd2 100644 --- a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue +++ b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue @@ -1,6 +1,6 @@ <script> -import { mapGetters } from 'vuex'; import { GlModal } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; import { __ } from '~/locale'; export default { diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue index f568f7e6d3d..a4baca20ac9 100644 --- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue +++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue @@ -1,10 +1,10 @@ <script> /* eslint-disable vue/no-v-html */ -import { mapGetters } from 'vuex'; -import { capitalize, lowerCase, isEmpty } from 'lodash'; import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui'; -import eventHub from '../event_hub'; +import { capitalize, lowerCase, isEmpty } from 'lodash'; +import { mapGetters } from 'vuex'; import { __, sprintf } from '~/locale'; +import eventHub from '../event_hub'; export default { name: 'DynamicField', diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index ac8a64d5f3b..3ec0c23e55d 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -1,18 +1,18 @@ <script> +import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { mapState, mapActions, mapGetters } from 'vuex'; -import { GlButton, GlModalDirective } from '@gitlab/ui'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import eventHub from '../event_hub'; import { integrationLevels } from '../constants'; +import eventHub from '../event_hub'; -import OverrideDropdown from './override_dropdown.vue'; import ActiveCheckbox from './active_checkbox.vue'; -import JiraTriggerFields from './jira_trigger_fields.vue'; -import JiraIssuesFields from './jira_issues_fields.vue'; -import TriggerFields from './trigger_fields.vue'; -import DynamicField from './dynamic_field.vue'; import ConfirmationModal from './confirmation_modal.vue'; +import DynamicField from './dynamic_field.vue'; +import JiraIssuesFields from './jira_issues_fields.vue'; +import JiraTriggerFields from './jira_trigger_fields.vue'; +import OverrideDropdown from './override_dropdown.vue'; import ResetConfirmationModal from './reset_confirmation_modal.vue'; +import TriggerFields from './trigger_fields.vue'; export default { name: 'IntegrationForm', @@ -28,9 +28,17 @@ export default { GlButton, }, directives: { - 'gl-modal': GlModalDirective, + GlModal: GlModalDirective, + SafeHtml, }, mixins: [glFeatureFlagsMixin()], + props: { + helpHtml: { + type: String, + required: false, + default: '', + }, + }, computed: { ...mapGetters(['currentKey', 'propsSource', 'isDisabled']), ...mapState([ @@ -80,11 +88,14 @@ export default { this.fetchResetIntegration(); }, }, + helpHtmlConfig: { + ADD_TAGS: ['use'], // to support icon SVGs + }, }; </script> <template> - <div> + <div class="gl-mb-3"> <override-dropdown v-if="defaultState !== null" :inherit-from-id="defaultState.id" @@ -92,80 +103,92 @@ export default { :learn-more-path="propsSource.learnMorePath" @change="setOverride" /> - <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" /> - <jira-trigger-fields - v-if="isJira" - :key="`${currentKey}-jira-trigger-fields`" - v-bind="propsSource.triggerFieldsProps" - /> - <trigger-fields - v-else-if="propsSource.triggerEvents.length" - :key="`${currentKey}-trigger-fields`" - :events="propsSource.triggerEvents" - :type="propsSource.type" - /> - <dynamic-field - v-for="field in propsSource.fields" - :key="`${currentKey}-${field.name}`" - v-bind="field" - /> - <jira-issues-fields - v-if="showJiraIssuesFields" - :key="`${currentKey}-jira-issues-fields`" - v-bind="propsSource.jiraIssuesProps" - /> - <div v-if="isEditable" class="footer-block row-content-block"> - <template v-if="isInstanceOrGroupLevel"> - <gl-button - v-gl-modal.confirmSaveIntegration - category="primary" - variant="success" - :loading="isSaving" - :disabled="isDisabled" - data-qa-selector="save_changes_button" - > - {{ __('Save changes') }} - </gl-button> - <confirmation-modal @submit="onSaveClick" /> - </template> - <gl-button - v-else - category="primary" - variant="success" - type="submit" - :loading="isSaving" - :disabled="isDisabled" - data-qa-selector="save_changes_button" - @click.prevent="onSaveClick" - > - {{ __('Save changes') }} - </gl-button> - <gl-button - v-if="propsSource.canTest" - :loading="isTesting" - :disabled="isDisabled" - :href="propsSource.testPath" - @click.prevent="onTestClick" - > - {{ __('Test settings') }} - </gl-button> + <div class="row"> + <div class="col-lg-4"></div> + + <div class="col-lg-8"> + <!-- helpHtml is trusted input --> + <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div> + + <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" /> + <jira-trigger-fields + v-if="isJira" + :key="`${currentKey}-jira-trigger-fields`" + v-bind="propsSource.triggerFieldsProps" + /> + <trigger-fields + v-else-if="propsSource.triggerEvents.length" + :key="`${currentKey}-trigger-fields`" + :events="propsSource.triggerEvents" + :type="propsSource.type" + /> + <dynamic-field + v-for="field in propsSource.fields" + :key="`${currentKey}-${field.name}`" + v-bind="field" + /> + <jira-issues-fields + v-if="showJiraIssuesFields" + :key="`${currentKey}-jira-issues-fields`" + v-bind="propsSource.jiraIssuesProps" + /> + <div v-if="isEditable" class="footer-block row-content-block"> + <template v-if="isInstanceOrGroupLevel"> + <gl-button + v-gl-modal.confirmSaveIntegration + category="primary" + variant="success" + :loading="isSaving" + :disabled="isDisabled" + data-qa-selector="save_changes_button" + > + {{ __('Save changes') }} + </gl-button> + <confirmation-modal @submit="onSaveClick" /> + </template> + <gl-button + v-else + category="primary" + variant="success" + type="submit" + :loading="isSaving" + :disabled="isDisabled" + data-qa-selector="save_changes_button" + @click.prevent="onSaveClick" + > + {{ __('Save changes') }} + </gl-button> + + <gl-button + v-if="propsSource.canTest" + :loading="isTesting" + :disabled="isDisabled" + :href="propsSource.testPath" + @click.prevent="onTestClick" + > + {{ __('Test settings') }} + </gl-button> - <template v-if="showReset"> - <gl-button - v-gl-modal.confirmResetIntegration - category="secondary" - variant="default" - :loading="isResetting" - :disabled="isDisabled" - data-testid="reset-button" - > - {{ __('Reset') }} - </gl-button> - <reset-confirmation-modal @reset="onResetClick" /> - </template> + <template v-if="showReset"> + <gl-button + v-gl-modal.confirmResetIntegration + category="secondary" + variant="default" + :loading="isResetting" + :disabled="isDisabled" + data-testid="reset-button" + > + {{ __('Reset') }} + </gl-button> + <reset-confirmation-modal @reset="onResetClick" /> + </template> - <gl-button class="btn-cancel" :href="propsSource.cancelPath">{{ __('Cancel') }}</gl-button> + <gl-button class="btn-cancel" :href="propsSource.cancelPath">{{ + __('Cancel') + }}</gl-button> + </div> + </div> </div> </div> </template> 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 1baa2b440b0..d3d1fd8ddc3 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue @@ -8,6 +8,7 @@ import { GlButton, GlCard, } from '@gitlab/ui'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import eventHub from '../event_hub'; export default { @@ -20,18 +21,36 @@ export default { GlLink, GlButton, GlCard, + JiraIssueCreationVulnerabilities: () => + import('ee_component/integrations/edit/components/jira_issue_creation_vulnerabilities.vue'), }, + mixins: [glFeatureFlagsMixin()], props: { showJiraIssuesIntegration: { type: Boolean, required: false, default: false, }, + showJiraVulnerabilitiesIntegration: { + type: Boolean, + required: false, + default: false, + }, initialEnableJiraIssues: { type: Boolean, required: false, default: null, }, + initialEnableJiraVulnerabilities: { + type: Boolean, + required: false, + default: false, + }, + initialVulnerabilitiesIssuetype: { + type: String, + required: false, + default: undefined, + }, initialProjectKey: { type: String, required: false, @@ -45,12 +64,12 @@ export default { upgradePlanPath: { type: String, required: false, - default: null, + default: '', }, editProjectPath: { type: String, required: false, - default: null, + default: '', }, }, data() { @@ -64,6 +83,13 @@ export default { validProjectKey() { return !this.enableJiraIssues || Boolean(this.projectKey) || !this.validated; }, + showJiraVulnerabilitiesOptions() { + return ( + this.enableJiraIssues && + this.showJiraVulnerabilitiesIntegration && + this.glFeatures.jiraForVulnerabilities + ); + }, }, created() { eventHub.$on('validateForm', this.validateForm); @@ -75,6 +101,9 @@ export default { validateForm() { this.validated = true; }, + getJiraIssueTypes() { + eventHub.$emit('getJiraIssueTypes'); + }, }, }; </script> @@ -105,6 +134,14 @@ export default { }} </template> </gl-form-checkbox> + <jira-issue-creation-vulnerabilities + v-if="showJiraVulnerabilitiesOptions" + :project-key="projectKey" + :initial-is-enabled="initialEnableJiraVulnerabilities" + :initial-issue-type-id="initialVulnerabilitiesIssuetype" + 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> diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue index bc005aa16e9..af4e9acf4ba 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue @@ -1,6 +1,6 @@ <script> -import { mapGetters } from 'vuex'; import { GlFormGroup, GlFormCheckbox, GlFormRadio } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; import { s__ } from '~/locale'; const commentDetailOptions = [ diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue index 4e2c37ac7f3..7b3a067b186 100644 --- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue +++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue @@ -1,6 +1,6 @@ <script> -import { mapState } from 'vuex'; import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui'; +import { mapState } from 'vuex'; import { s__ } from '~/locale'; import { defaultIntegrationLevel, overrideDropdownDescriptions } from '../constants'; diff --git a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue index d8503910566..9472a3eeafe 100644 --- a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue +++ b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue @@ -1,6 +1,6 @@ <script> -import { mapGetters } from 'vuex'; import { GlModal } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; import { __ } from '~/locale'; diff --git a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue index 32878c6afa4..1bbecea05ad 100644 --- a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue @@ -1,7 +1,7 @@ <script> -import { mapGetters } from 'vuex'; -import { startCase } from 'lodash'; import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui'; +import { startCase } from 'lodash'; +import { mapGetters } from 'vuex'; import { __ } from '~/locale'; const typeWithPlaceholder = { |