diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/shared/findings_drawer.vue')
| -rw-r--r-- | app/assets/javascripts/diffs/components/shared/findings_drawer.vue | 165 |
1 files changed, 100 insertions, 65 deletions
diff --git a/app/assets/javascripts/diffs/components/shared/findings_drawer.vue b/app/assets/javascripts/diffs/components/shared/findings_drawer.vue index fddd455b17e..2c1a8305935 100644 --- a/app/assets/javascripts/diffs/components/shared/findings_drawer.vue +++ b/app/assets/javascripts/diffs/components/shared/findings_drawer.vue @@ -1,46 +1,56 @@ <script> -import { GlDrawer, GlIcon, GlLink } from '@gitlab/ui'; -import SafeHtml from '~/vue_shared/directives/safe_html'; -import { s__ } from '~/locale'; +import { GlBadge, GlDrawer, GlIcon, GlLink } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; import { DRAWER_Z_INDEX } from '~/lib/utils/constants'; -import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/ci/reports/codequality_report/constants'; +import { getSeverity } from '~/ci/reports/utils'; import { getContentWrapperHeight } from '~/lib/utils/dom_utils'; +import DrawerItem from './findings_drawer_item.vue'; export const i18n = { - severity: s__('FindingsDrawer|Severity:'), - engine: s__('FindingsDrawer|Engine:'), - category: s__('FindingsDrawer|Category:'), - otherLocations: s__('FindingsDrawer|Other locations:'), + name: __('Name'), + description: __('Description'), + status: __('Status'), + sast: __('SAST'), + engine: __('Engine'), + identifiers: __('Identifiers'), + project: __('Project'), + file: __('File'), + tool: __('Tool'), + codeQualityFinding: s__('FindingsDrawer|Code Quality Finding'), + sastFinding: s__('FindingsDrawer|SAST Finding'), + codeQuality: s__('FindingsDrawer|Code Quality'), + detected: s__('FindingsDrawer|Detected in pipeline'), }; +export const codeQuality = 'codeQuality'; export default { i18n, - components: { GlDrawer, GlIcon, GlLink }, - directives: { - SafeHtml, - }, + codeQuality, + components: { GlBadge, GlDrawer, GlIcon, GlLink, DrawerItem }, props: { drawer: { type: Object, required: true, }, - }, - safeHtmlConfig: { - ALLOWED_TAGS: ['a', 'h1', 'h2', 'p'], - ALLOWED_ATTR: ['href', 'rel'], + project: { + type: Object, + required: false, + default: () => {}, + }, }, computed: { getDrawerHeaderHeight() { return getContentWrapperHeight(); }, + isCodeQuality() { + return this.drawer.scale === this.$options.codeQuality; + }, }, DRAWER_Z_INDEX, methods: { - severityClass(severity) { - return SEVERITY_CLASSES[severity] || SEVERITY_CLASSES.unknown; - }, - severityIcon(severity) { - return SEVERITY_ICONS[severity] || SEVERITY_ICONS.unknown; + getSeverity, + concatIdentifierName(name, index) { + return name + (index !== this.drawer.identifiers.length - 1 ? ', ' : ''); }, }, }; @@ -54,57 +64,82 @@ export default { @close="$emit('close')" > <template #title> - <h2 data-testid="findings-drawer-heading" class="gl-font-size-h2 gl-mt-0 gl-mb-0"> - {{ drawer.description }} + <h2 class="drawer-heading gl-font-base gl-mt-0 gl-mb-0"> + <gl-icon + :size="12" + :name="getSeverity(drawer).name" + :class="getSeverity(drawer).class" + class="inline-findings-severity-icon gl-vertical-align-baseline!" + /> + <span class="drawer-heading-severity">{{ drawer.severity }}</span> + {{ isCodeQuality ? $options.i18n.codeQualityFinding : $options.i18n.sastFinding }} </h2> </template> <template #default> <ul class="gl-list-style-none gl-border-b-initial gl-mb-0 gl-pb-0!"> - <li data-testid="findings-drawer-severity" class="gl-mb-4"> - <span class="gl-font-weight-bold">{{ $options.i18n.severity }}</span> - <gl-icon - data-testid="findings-drawer-severity-icon" - :size="12" - :name="severityIcon(drawer.severity)" - :class="severityClass(drawer.severity)" - class="inline-findings-severity-icon" - /> + <drawer-item v-if="drawer.title" :description="$options.i18n.name" :value="drawer.title" /> + + <drawer-item v-if="drawer.state" :description="$options.i18n.status"> + <template #value> + <gl-badge variant="warning" class="text-capitalize">{{ drawer.state }}</gl-badge> + </template> + </drawer-item> + + <drawer-item + v-if="drawer.description" + :description="$options.i18n.description" + :value="drawer.description" + /> + + <drawer-item + v-if="project && drawer.scale !== $options.codeQuality" + :description="$options.i18n.project" + > + <template #value> + <gl-link :href="`/${project.fullPath}`">{{ project.nameWithNamespace }}</gl-link> + </template> + </drawer-item> + + <drawer-item v-if="drawer.location || drawer.webUrl" :description="$options.i18n.file"> + <template #value> + <span v-if="drawer.webUrl && drawer.filePath && drawer.line"> + <gl-link :href="drawer.webUrl">{{ drawer.filePath }}:{{ drawer.line }}</gl-link> + </span> + <span v-else-if="drawer.location"> + {{ drawer.location.file }}:{{ drawer.location.startLine }} + </span> + </template> + </drawer-item> + + <drawer-item + v-if="drawer.identifiers && drawer.identifiers.length" + :description="$options.i18n.identifiers" + > + <template #value> + <span v-for="(identifier, index) in drawer.identifiers" :key="identifier.externalId"> + <gl-link v-if="identifier.url" :href="identifier.url"> + {{ concatIdentifierName(identifier.name, index) }} + </gl-link> + <span v-else> + {{ concatIdentifierName(identifier.name, index) }} + </span> + </span> + </template> + </drawer-item> + + <drawer-item + v-if="drawer.scale" + :description="$options.i18n.tool" + :value="isCodeQuality ? $options.i18n.codeQuality : $options.i18n.sast" + /> - {{ drawer.severity }} - </li> - <li data-testid="findings-drawer-engine" class="gl-mb-4"> - <span class="gl-font-weight-bold">{{ $options.i18n.engine }}</span> - {{ drawer.engineName }} - </li> - <li data-testid="findings-drawer-category" class="gl-mb-4"> - <span class="gl-font-weight-bold">{{ $options.i18n.category }}</span> - {{ drawer.categories ? drawer.categories[0] : '' }} - </li> - <li data-testid="findings-drawer-other-locations" class="gl-mb-4"> - <span class="gl-font-weight-bold gl-mb-3 gl-display-block">{{ - $options.i18n.otherLocations - }}</span> - <ul class="gl-pl-6"> - <li - v-for="otherLocation in drawer.otherLocations" - :key="otherLocation.path" - class="gl-mb-1" - > - <gl-link - data-testid="findings-drawer-other-locations-link" - :href="otherLocation.href" - >{{ otherLocation.path }}</gl-link - > - </li> - </ul> - </li> + <drawer-item + v-if="drawer.engineName" + :description="$options.i18n.engine" + :value="drawer.engineName" + /> </ul> - <span - v-safe-html:[$options.safeHtmlConfig]="drawer.content ? drawer.content.body : ''" - data-testid="findings-drawer-body" - class="drawer-body gl-display-block gl-px-3 gl-py-0!" - ></span> </template> </gl-drawer> </template> |