diff options
Diffstat (limited to 'app/assets/javascripts/integrations/edit/components/integration_form.vue')
| -rw-r--r-- | app/assets/javascripts/integrations/edit/components/integration_form.vue | 183 |
1 files changed, 103 insertions, 80 deletions
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> |