diff options
Diffstat (limited to 'app/assets/javascripts/ci/reports/codequality_report/components/codequality_issue_body.vue')
-rw-r--r-- | app/assets/javascripts/ci/reports/codequality_report/components/codequality_issue_body.vue | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/reports/codequality_report/components/codequality_issue_body.vue b/app/assets/javascripts/ci/reports/codequality_report/components/codequality_issue_body.vue new file mode 100644 index 00000000000..5a7ee9c9b28 --- /dev/null +++ b/app/assets/javascripts/ci/reports/codequality_report/components/codequality_issue_body.vue @@ -0,0 +1,76 @@ +<script> +/** + * Renders Code quality body text + * Fixed: [name] in [link]:[line] + */ +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import ReportLink from '~/ci/reports/components/report_link.vue'; +import { STATUS_SUCCESS, STATUS_NEUTRAL } from '~/ci/reports/constants'; +import { SEVERITY_CLASSES, SEVERITY_ICONS } from '../constants'; + +export default { + name: 'CodequalityIssueBody', + components: { + GlIcon, + ReportLink, + }, + directives: { + tooltip: GlTooltipDirective, + }, + props: { + status: { + type: String, + required: false, + default: STATUS_NEUTRAL, + }, + issue: { + type: Object, + required: true, + }, + }, + computed: { + issueName() { + return `${this.severityLabel} - ${this.issue.name}`; + }, + issueSeverity() { + return this.issue.severity?.toLowerCase(); + }, + isStatusSuccess() { + return this.status === STATUS_SUCCESS; + }, + severityClass() { + return SEVERITY_CLASSES[this.issueSeverity] || SEVERITY_CLASSES.unknown; + }, + severityIcon() { + return SEVERITY_ICONS[this.issueSeverity] || SEVERITY_ICONS.unknown; + }, + severityLabel() { + return this.$options.severityText[this.issueSeverity] || this.$options.severityText.unknown; + }, + }, + severityText: { + info: s__('severity|Info'), + minor: s__('severity|Minor'), + major: s__('severity|Major'), + critical: s__('severity|Critical'), + blocker: s__('severity|Blocker'), + unknown: s__('severity|Unknown'), + }, +}; +</script> +<template> + <div class="gl-display-flex gl-mt-2 gl-mb-2 gl-w-full"> + <span :class="severityClass" class="gl-mr-5" data-testid="codequality-severity-icon"> + <gl-icon v-tooltip="severityLabel" :name="severityIcon" :size="12" /> + </span> + <div class="gl-flex-grow-1"> + <div> + <strong v-if="isStatusSuccess">{{ s__('ciReport|Fixed:') }}</strong> + {{ issueName }} + </div> + + <report-link v-if="issue.path" :issue="issue" /> + </div> + </div> +</template> |