Commit 8e76c5c8 authored by Fernando's avatar Fernando

Add tooltips for responses

* Add tooltip text
parent d19eafe8
<script> <script>
import { GlLink, GlSprintf } from '@gitlab/ui'; import { GlLink, GlSprintf, GlTooltipDirective, GlIcon } from '@gitlab/ui';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue'; import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
import CodeBlock from '~/vue_shared/components/code_block.vue'; import CodeBlock from '~/vue_shared/components/code_block.vue';
import { __ } from '~/locale'; import { __ } from '~/locale';
...@@ -7,7 +7,10 @@ import DetailItem from './detail_item.vue'; ...@@ -7,7 +7,10 @@ import DetailItem from './detail_item.vue';
export default { export default {
name: 'VulnerabilityDetails', name: 'VulnerabilityDetails',
components: { CodeBlock, GlLink, SeverityBadge, DetailItem, GlSprintf }, components: { CodeBlock, GlLink, SeverityBadge, DetailItem, GlSprintf, GlIcon },
directives: {
GlTooltip: GlTooltipDirective,
},
props: { props: {
vulnerability: { vulnerability: {
type: Object, type: Object,
...@@ -289,16 +292,26 @@ export default { ...@@ -289,16 +292,26 @@ export default {
<div v-if="responseData.length || recordedResponseData.length" class="row"> <div v-if="responseData.length || recordedResponseData.length" class="row">
<section <section
v-if="responseData.length" v-if="recordedResponseData.length"
:class="recordedResponseData.length ? 'col-6' : 'col'" :class="responseData.length ? 'col-6' : 'col'"
data-testid="response" data-testid="response"
> >
<ul> <ul>
<detail-item <detail-item
v-for="({ label, isCode, content }, index) in responseData" v-for="({ label, isCode, content }, index) in recordedResponseData"
:key="`${index}:${label}`" :key="`${index}:${label}`"
:sprintf-message="label" :sprintf-message="label"
> >
<gl-icon
v-gl-tooltip
name="information-o"
class="gl-hover-cursor-pointer gl-mr-3"
:title="
s__(
'Vulnerability|The unmodified response is the original response that had no mutations done to the request',
)
"
/>
<code-block v-if="isCode" class="mt-1" :code="content" max-height="225px" /> <code-block v-if="isCode" class="mt-1" :code="content" max-height="225px" />
<template v-else> <template v-else>
{{ content }} {{ content }}
...@@ -308,16 +321,27 @@ export default { ...@@ -308,16 +321,27 @@ export default {
</section> </section>
<section <section
v-if="recordedResponseData.length" v-if="responseData.length"
:class="responseData.length ? 'col-6' : 'col'" :class="recordedResponseData.length ? 'col-6' : 'col'"
data-testid="response" data-testid="response"
> >
<ul> <ul>
<detail-item <detail-item
v-for="({ label, isCode, content }, index) in recordedResponseData" v-for="({ label, isCode, content }, index) in responseData"
:key="`${index}:${label}`" :key="`${index}:${label}`"
:sprintf-message="label" :sprintf-message="label"
> >
<gl-icon
v-gl-tooltip
name="information-o"
:size="16"
class="gl-hover-cursor-pointer gl-mr-3"
:title="
s__(
'Vulnerability|Actual received response is the one received when this fault was detected',
)
"
/>
<code-block v-if="isCode" class="mt-1" :code="content" max-height="225px" /> <code-block v-if="isCode" class="mt-1" :code="content" max-height="225px" />
<template v-else> <template v-else>
{{ content }} {{ content }}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment