diff --git a/ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_file_viewer.vue b/ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_file_viewer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f82c0eecbeb3768d74a90c1becbb4870379c83cf
--- /dev/null
+++ b/ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_file_viewer.vue
@@ -0,0 +1,14 @@
+<script>
+import { s__ } from '~/locale';
+
+export default {
+ name: 'CodeFlowFileViewer',
+ i18n: {
+ tempText: s__('Vulnerability|code area'),
+ },
+};
+</script>
+
+<template>
+ <div class="file-holder">{{ $options.i18n.tempText }}</div>
+</template>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_steps_section.vue b/ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_steps_section.vue
new file mode 100644
index 0000000000000000000000000000000000000000..371bb67065a204c288a2587b2a462cea5e55cfac
--- /dev/null
+++ b/ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_steps_section.vue
@@ -0,0 +1,272 @@
+<script>
+import { GlBadge, GlButton, GlButtonGroup, GlCollapse, GlPopover } from '@gitlab/ui';
+import { flattenDeep } from 'lodash';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { __, s__, sprintf } from '~/locale';
+
+export default {
+ name: 'CodeFlowStepsSection',
+ components: {
+ GlPopover,
+ GlButton,
+ GlButtonGroup,
+ GlCollapse,
+ GlBadge,
+ },
+ directives: {
+ SafeHtml,
+ },
+ props: {
+ description: {
+ type: String,
+ required: false,
+ default: null,
+ },
+ descriptionHtml: {
+ type: String,
+ required: false,
+ default: null,
+ },
+ details: {
+ type: Object,
+ required: true,
+ },
+ rawTextBlobs: {
+ type: Object,
+ required: false,
+ default: () => {},
+ },
+ },
+ data() {
+ return {
+ stepsExpanded: [],
+ selectedStepNumber: 1,
+ selectedVulnerability: this.details?.items[0][0],
+ };
+ },
+ computed: {
+ vulnerabilityFlowDetails() {
+ const groupedItems = this.details.items[0].reduce((acc, item, index) => {
+ const { fileName } = item.fileLocation;
+ if (!acc[fileName]) {
+ acc[fileName] = [];
+ }
+ const fileDescription = this.getDescription(
+ this.rawTextBlobs[item.fileLocation.fileName],
+ item.fileLocation.lineStart - 1,
+ );
+
+ acc[fileName].push({
+ ...item,
+ stepNumber: index + 1,
+ rawTextBlob: this.rawTextBlobs[item.fileLocation.fileName],
+ fileDescription,
+ });
+ return acc;
+ }, {});
+ const vulnerabilityFlow = [{ items: Object.values(groupedItems) }];
+ return vulnerabilityFlow[0].items;
+ },
+ numOfSteps() {
+ return this.details.items[0].length;
+ },
+ numOfFiles() {
+ return this.vulnerabilityFlowDetails.length;
+ },
+ stepsHeader() {
+ return sprintf(__('%{numOfSteps} steps across %{numOfFiles} files'), {
+ numOfSteps: this.numOfSteps,
+ numOfFiles: this.numOfFiles,
+ });
+ },
+ },
+
+ mounted() {
+ // Use renderGFM() to add syntax highlighting to the markdown.
+ renderGFM(this.$refs.markdownContent);
+ this.stepsExpanded = Array(this.vulnerabilityFlowDetails.length).fill(true);
+ },
+ methods: {
+ openFileSteps(index) {
+ const copyStepsExpanded = [...this.stepsExpanded];
+ copyStepsExpanded[index] = !this.stepsExpanded[index];
+ this.stepsExpanded = copyStepsExpanded;
+ },
+ getPathIcon(index) {
+ return this.stepsExpanded[index] ? 'chevron-down' : 'chevron-right';
+ },
+ getBoldFileName(filepath) {
+ const parts = filepath.split('/');
+ const filename = parts[parts.length - 1];
+ return filepath.replace(filename, `<b>${filename}</b>`);
+ },
+ selectStep(vulnerabilityItem) {
+ this.selectedStepNumber = vulnerabilityItem.stepNumber;
+ this.selectedVulnerability = vulnerabilityItem;
+ },
+ getNextIndex(isNext) {
+ return isNext ? this.selectedStepNumber + 1 : this.selectedStepNumber - 1;
+ },
+ isOutOfRange(isNext) {
+ const calculation = this.getNextIndex(isNext);
+ return calculation > this.numOfSteps || calculation <= 0;
+ },
+ changeSelectedVulnerability(isNextVulnerability) {
+ if (this.isOutOfRange(isNextVulnerability)) return;
+ this.selectedVulnerability = flattenDeep(this.vulnerabilityFlowDetails).find(
+ (item) => item.stepNumber === this.getNextIndex(isNextVulnerability),
+ );
+ this.selectedStepNumber = this.selectedVulnerability.stepNumber;
+ },
+ showNodeTypePopover(nodeType) {
+ return nodeType === 'source'
+ ? this.$options.i18n.sourceNodeTypePopover
+ : this.$options.i18n.sinkNodeTypePopover;
+ },
+ toggleAriaLabel(index) {
+ return this.stepsExpanded[index] ? __('Collapse') : __('Expand');
+ },
+ getDescription(rawTextBlob, startLine) {
+ return rawTextBlob?.split(/\r?\n/)[startLine];
+ },
+ },
+ i18n: {
+ codeFlowInfoButton: s__('Vulnerability|What is code flow?'),
+ codeFlowInfoAnswer: s__(
+ "Vulnerability|Code flow helps trace and flag risky data ('tainted data') as it moves through your software. Vulnerabilities are detected by pinpointing how untrusted inputs, like user data or network traffic, are utilized. This technique finds and fixes data handling flaws, securing software from injection and cross-site scripting attacks.",
+ ),
+ steps: s__('Vulnerability|Steps'),
+ sourceNodeTypePopover: s__(
+ "Vulnerability|A 'source' refers to untrusted inputs like user data or external data sources. These inputs can introduce security risks into the software system and are monitored to prevent vulnerabilities.",
+ ),
+ sinkNodeTypePopover: s__(
+ "Vulnerability|A 'sink' is where untrusted data is used in a potentially risky way, such as in SQL queries or HTML output. Sink points are monitored to prevent security vulnerabilities in the software.",
+ ),
+ },
+};
+</script>
+
+<template>
+ <div class="gl-flex gl-flex-col gl-w-4/10">
+ <div>
+ <div class="gl-flex gl-justify-between">
+ <span class="gl-text-lg item-title">{{ __('Description') }}</span>
+ <span
+ id="what-is-code-flow"
+ data-testid="what-is-code-flow"
+ class="gl-text-blue-400 gl-cursor-default"
+ >
+ {{ $options.i18n.codeFlowInfoButton }}
+ </span>
+ <gl-popover
+ triggers="hover focus"
+ placement="top"
+ target="what-is-code-flow"
+ :content="$options.i18n.codeFlowInfoAnswer"
+ data-testid="what-is-code-flow-popover"
+ :show="false"
+ />
+ </div>
+ <div class="gl-pt-3">
+ <span
+ v-if="descriptionHtml"
+ ref="markdownContent"
+ v-safe-html="descriptionHtml"
+ data-testid="description"
+ ></span>
+ <span v-else data-testid="description">
+ {{ description }}
+ </span>
+ </div>
+ </div>
+
+ <div>
+ <div class="gl-flex gl-justify-between">
+ <div>
+ <div class="gl-text-lg item-title">{{ $options.i18n.steps }}</div>
+ <div class="gl-pt-2" data-testid="steps-header">{{ stepsHeader }}</div>
+ </div>
+ <gl-button-group>
+ <gl-button
+ icon="chevron-up"
+ :aria-label="__(`Previous step`)"
+ :disabled="isOutOfRange(false)"
+ @click="changeSelectedVulnerability(false)"
+ />
+ <gl-button
+ icon="chevron-down"
+ :aria-label="__(`Next step`)"
+ :disabled="isOutOfRange(true)"
+ @click="changeSelectedVulnerability(true)"
+ />
+ </gl-button-group>
+ </div>
+ <div class="gl-pt-3">
+ <div
+ v-for="(vulnerabilityFlow, index) in vulnerabilityFlowDetails"
+ :key="index"
+ class="-gl-ml-4"
+ :data-testid="`file-steps-${index}`"
+ >
+ <gl-button
+ :icon="getPathIcon(index)"
+ category="tertiary"
+ :aria-label="toggleAriaLabel(index)"
+ @click="openFileSteps(index)"
+ />
+ <span v-safe-html="getBoldFileName(vulnerabilityFlow[0].fileLocation.fileName)"></span>
+ <gl-collapse class="gl-mt-2 gl-pl-6" :visible="!!stepsExpanded[index]">
+ <div
+ v-for="(vulnerabilityItem, i) in vulnerabilityFlow"
+ :key="i"
+ class="gl-flex align-content-center gl-justify-between gl-pt-2 gl-pb-2 gl-pr-2 gl-pl-2"
+ :class="{
+ 'gl-bg-blue-50 gl-rounded-base':
+ selectedStepNumber === vulnerabilityItem.stepNumber,
+ }"
+ :data-testid="`step-row-${i}`"
+ @click="selectStep(vulnerabilityItem)"
+ >
+ <gl-badge
+ class="gl-mr-3 gl-rounded-base gl-pr-4 gl-pl-4"
+ :class="{
+ '!gl-bg-blue-500 !gl-text-white':
+ selectedStepNumber === vulnerabilityItem.stepNumber,
+ }"
+ size="lg"
+ variant="muted"
+ >
+ {{ vulnerabilityItem.stepNumber }}
+ </gl-badge>
+ <span class="align-content-center gl-mr-auto">
+ <gl-badge
+ v-if="['source', 'sink'].includes(vulnerabilityItem.nodeType)"
+ :id="vulnerabilityItem.nodeType"
+ :data-testid="vulnerabilityItem.nodeType"
+ class="gl-mr-3 gl-pr-4 gl-pl-4"
+ size="md"
+ variant="muted"
+ >
+ {{ vulnerabilityItem.nodeType }}
+ </gl-badge>
+ <gl-popover
+ triggers="hover focus"
+ placement="top"
+ :target="vulnerabilityItem.nodeType"
+ :content="showNodeTypePopover(vulnerabilityItem.nodeType)"
+ :show="false"
+ />
+
+ {{ vulnerabilityItem.fileDescription }}
+ </span>
+ <span class="align-content-center gl-pr-3">{{
+ vulnerabilityItem.fileLocation.lineStart
+ }}</span>
+ </div>
+ </gl-collapse>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue
index 49be5b500dc910e786670d2eb81dd152c2fb6b71..6ea564d6051daf5098a5d22d73d6c6463c5069d0 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue
@@ -123,7 +123,12 @@ export default {
</gl-tab>
<gl-tab :title="$options.i18n.VULNERABILITY_TAB_NAMES.CODE_FLOW">
- <vulnerability-code-flow :branch-ref="ref" :details="vulnerability.details.codeFlows" />
+ <vulnerability-code-flow
+ :branch-ref="ref"
+ :details="vulnerability.details.codeFlows"
+ :description="vulnerability.description"
+ :description-html="vulnerability.descriptionHtml"
+ />
</gl-tab>
</gl-tabs>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_code_flow.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_code_flow.vue
index 121e297be65a3916d17b48c4a24777950506aacc..43a279fceb4965ce8e106f860907aac7ac327ba0 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_code_flow.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_code_flow.vue
@@ -2,12 +2,16 @@
import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import { uniq, map } from 'lodash';
import blobInfoQuery from 'shared_queries/repository/blob_info.query.graphql';
+import CodeFlowFileViewer from 'ee/vulnerabilities/components/code_flow/code_flow_file_viewer.vue';
+import CodeFlowStepsSection from 'ee/vulnerabilities/components/code_flow/code_flow_steps_section.vue';
export default {
name: 'VulnerabilityCodeFlow',
components: {
GlAlert,
GlLoadingIcon,
+ CodeFlowFileViewer,
+ CodeFlowStepsSection,
},
inject: ['projectFullPath'],
props: {
@@ -19,13 +23,23 @@ export default {
type: Object,
required: true,
},
+ description: {
+ type: String,
+ required: false,
+ default: null,
+ },
+ descriptionHtml: {
+ type: String,
+ required: false,
+ default: null,
+ },
},
data() {
return {
loadingError: false,
- isLoading: true,
blobInfo: [],
project: null,
+ rawTextBlobs: {},
};
},
computed: {
@@ -47,11 +61,22 @@ export default {
};
},
update({ project }) {
- this.blobInfo = project?.repository?.blobs?.nodes || [];
- this.isLoading = false;
+ const allBlobInfo = project?.repository?.blobs?.nodes || [];
+ allBlobInfo.forEach((blobInfo) => {
+ const { rawTextBlob, path } = blobInfo;
+
+ this.rawTextBlobs = {
+ ...this.rawTextBlobs,
+ [path]: rawTextBlob,
+ };
+
+ this.blobInfo = {
+ ...this.blobInfo,
+ [path]: { data: blobInfo },
+ };
+ });
},
error() {
- this.isLoading = false;
this.loadingError = true;
},
},
@@ -62,7 +87,7 @@ export default {
<template>
<div class="gl-flex gl-gap-5 gl-pt-5">
<gl-loading-icon
- v-if="isLoading"
+ v-if="$apollo.queries.project.loading"
size="sm"
class="gl-flex gl-items-center gl-justify-center flex-fill"
/>
@@ -75,5 +100,19 @@ export default {
>
{{ s__('Vulnerability|Something went wrong while trying to get the source file.') }}
</gl-alert>
+
+ <template v-else>
+ <code-flow-steps-section
+ ref="codeFlowStepSection"
+ :description="description"
+ :description-html="descriptionHtml"
+ :details="details"
+ :raw-text-blobs="rawTextBlobs"
+ />
+
+ <div class="gl-flex gl-flex-col gl-gap-5 flex-fill gl-w-12/20">
+ <code-flow-file-viewer />
+ </div>
+ </template>
</div>
</template>
diff --git a/ee/spec/frontend/vulnerabilities/mock_data.js b/ee/spec/frontend/vulnerabilities/mock_data.js
index c8abec0dbd8d5dd7ba51b039ae6220b76bb3d24d..22fbf1ed834c0a3dfc7473ff8b0e7df03280951c 100644
--- a/ee/spec/frontend/vulnerabilities/mock_data.js
+++ b/ee/spec/frontend/vulnerabilities/mock_data.js
@@ -210,3 +210,48 @@ export const TEST_ALL_BLOBS_INFO_GRAPHQL_SUCCESS_RESPONSE = {
},
},
};
+
+export const mockVulnerability = {
+ id: 123,
+ description: 'vulnerability description',
+ descriptionHtml: 'vulnerability description <code>sample</code>',
+ details: {
+ name: 'code_flows',
+ type: 'code_flows',
+ items: [
+ [
+ {
+ nodeType: 'source',
+ fileDescription: '{',
+ rawTextBlobs: '{ a: 1, a: 2 }',
+ stepNumber: 1,
+ fileLocation: {
+ fileName: 'src/url/test.java',
+ lineStart: 1,
+ },
+ },
+ {
+ nodeType: 'propagation',
+ fileDescription: '{',
+ rawTextBlobs: '{ b: 1, b: 2 }',
+ stepNumber: 2,
+ fileLocation: { fileName: 'src/url/test.java', lineStart: 1 },
+ },
+ {
+ nodeType: 'sink',
+ fileDescription: '{',
+ rawTextBlobs: '{ c: 1, c: 2 }',
+ stepNumber: 3,
+ fileLocation: {
+ lineEnd: 2,
+ fileName: 'src/url/test.java',
+ lineStart: 1,
+ },
+ },
+ ],
+ ],
+ },
+ rawTextBlobs: {
+ 'src/url/test.java': '{\n "newArray": [],\n }',
+ },
+};
diff --git a/ee/spec/frontend/vulnerabilities/vulnerability_code_flow_spec.js b/ee/spec/frontend/vulnerabilities/vulnerability_code_flow_spec.js
index 4accacdd47cd27f1326795251cfa04b8fcec2509..5ff9ac4605841b42b3aaa732192e258738e548e5 100644
--- a/ee/spec/frontend/vulnerabilities/vulnerability_code_flow_spec.js
+++ b/ee/spec/frontend/vulnerabilities/vulnerability_code_flow_spec.js
@@ -7,49 +7,15 @@ import createMockApollo from 'helpers/mock_apollo_helper';
import blobInfoQuery from 'shared_queries/repository/blob_info.query.graphql';
import waitForPromises from 'helpers/wait_for_promises';
import { s__ } from '~/locale';
-import { TEST_ALL_BLOBS_INFO_GRAPHQL_SUCCESS_RESPONSE } from './mock_data';
+import CodeFlowStepsSection from 'ee/vulnerabilities/components/code_flow/code_flow_steps_section.vue';
+import CodeFlowFileViewer from 'ee/vulnerabilities/components/code_flow/code_flow_file_viewer.vue';
+import { mockVulnerability, TEST_ALL_BLOBS_INFO_GRAPHQL_SUCCESS_RESPONSE } from './mock_data';
Vue.use(VueApollo);
describe('Vulnerability Code Flow', () => {
let wrapper;
- const vulnerability = {
- id: 123,
- description: 'vulnerability description',
- descriptionHtml: 'vulnerability description <code>sample</code>',
- details: {
- name: 'code_flows',
- type: 'code_flows',
- items: [
- [
- {
- nodeType: 'source',
- fileLocation: {
- fileName: 'src/url/test.java',
- lineStart: 129,
- },
- },
- {
- nodeType: 'propagation',
- fileLocation: { fileName: 'src/url/test.java', lineStart: 74 },
- },
- {
- nodeType: 'sink',
- fileLocation: {
- lineEnd: 77,
- fileName: 'src/url/test.java',
- lineStart: 76,
- },
- },
- ],
- ],
- },
- rawTextBlobs: {
- 'src/url/test.java': '{\n "newArray": [],\n }',
- },
- };
-
const codeFlowProps = {
projectFullPath: 'path/to/project',
branchRef: 'main',
@@ -59,10 +25,16 @@ describe('Vulnerability Code Flow', () => {
.fn()
.mockResolvedValue(TEST_ALL_BLOBS_INFO_GRAPHQL_SUCCESS_RESPONSE);
- const createWrapper = ({ mutationResponse = getMutationResponse } = {}) => {
+ const createWrapper = (
+ { mutationResponse = getMutationResponse } = {},
+ vulnerabilityOverrides = {},
+ ) => {
const propsData = {
+ description: mockVulnerability.description,
+ descriptionHtml: mockVulnerability.descriptionHtml,
branchRef: codeFlowProps.branchRef,
- details: vulnerability.details,
+ details: mockVulnerability.details,
+ ...vulnerabilityOverrides,
};
wrapper = shallowMountExtended(VulnerabilityCodeFlow, {
@@ -72,6 +44,8 @@ describe('Vulnerability Code Flow', () => {
});
};
+ const findCodeFlowStepsSection = () => wrapper.findComponent(CodeFlowStepsSection);
+ const findCodeFlowFileViewer = () => wrapper.findComponent(CodeFlowFileViewer);
const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findGlAlert = () => wrapper.findComponent(GlAlert);
const getById = (id) => wrapper.findByTestId(id);
@@ -79,6 +53,8 @@ describe('Vulnerability Code Flow', () => {
describe('default behavior', () => {
it('shows the properties that should always be shown', () => {
createWrapper();
+ expect(findCodeFlowStepsSection().exists()).toBe(false);
+ expect(findCodeFlowFileViewer().exists()).toBe(false);
expect(findGlLoadingIcon().exists()).toBe(true);
expect(findGlAlert().exists()).toBe(false);
});
@@ -98,13 +74,25 @@ describe('Vulnerability Code Flow', () => {
expect(getMutationResponse).toHaveBeenCalledTimes(1);
expect(getMutationResponse).toHaveBeenCalledWith({
projectPath: codeFlowProps.projectFullPath,
- filePath: [vulnerability.details.items[0][0].fileLocation.fileName],
+ filePath: [mockVulnerability.details.items[0][0].fileLocation.fileName],
ref: codeFlowProps.branchRef,
refType: null,
shouldFetchRawText: true,
});
});
+ it('should show code flow section component', async () => {
+ await waitForPromises();
+ expect(findCodeFlowStepsSection().exists()).toBe(true);
+ expect(findCodeFlowFileViewer().exists()).toBe(true);
+ expect(findCodeFlowStepsSection().props()).toStrictEqual({
+ description: mockVulnerability.description,
+ descriptionHtml: mockVulnerability.descriptionHtml,
+ details: mockVulnerability.details,
+ rawTextBlobs: mockVulnerability.rawTextBlobs,
+ });
+ });
+
it('shows error alert on query error', async () => {
const errorResponse = jest.fn().mockRejectedValue({});
createWrapper({ mutationResponse: errorResponse });
diff --git a/ee/spec/frontend/vulnerabilities/vulnerability_code_flow_steps_section_spec.js b/ee/spec/frontend/vulnerabilities/vulnerability_code_flow_steps_section_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..be24fe671ae598c7a89b102ddf6c8d984da91b3b
--- /dev/null
+++ b/ee/spec/frontend/vulnerabilities/vulnerability_code_flow_steps_section_spec.js
@@ -0,0 +1,158 @@
+import { GlButton, GlButtonGroup, GlCollapse, GlPopover } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
+import CodeFlowStepsSection from 'ee/vulnerabilities/components/code_flow/code_flow_steps_section.vue';
+import { mockVulnerability } from 'ee_jest/vulnerabilities/mock_data';
+
+jest.mock('~/behaviors/markdown/render_gfm');
+
+describe('Vulnerability Code Flow', () => {
+ let wrapper;
+
+ const createWrapper = (vulnerabilityOverrides) => {
+ const propsData = {
+ description: mockVulnerability.description,
+ descriptionHtml: mockVulnerability.descriptionHtml,
+ details: mockVulnerability.details,
+ rawTextBlobs: mockVulnerability.rawTextBlobs,
+ ...vulnerabilityOverrides,
+ };
+ wrapper = mountExtended(CodeFlowStepsSection, {
+ propsData,
+ });
+ };
+
+ const getById = (id) => wrapper.findByTestId(id);
+ const getText = (id) => getById(id).text();
+ const findAllPopovers = () => wrapper.findAllComponents(GlPopover);
+ const findAllCollapses = () => wrapper.findAllComponents(GlCollapse);
+ const findButtonGroup = () => wrapper.findComponent(GlButtonGroup);
+ const findButtons = () => findButtonGroup().findAllComponents(GlButton);
+
+ beforeEach(() => {
+ createWrapper();
+ });
+
+ it('shows the properties that should always be shown', () => {
+ expect(getById('description').html()).toContain(mockVulnerability.descriptionHtml);
+ expect(getById('what-is-code-flow').exists()).toBe(true);
+ expect(getById('what-is-code-flow-popover').exists()).toBe(true);
+ expect(getById('source').exists()).toBe(true);
+ expect(getById('sink').exists()).toBe(true);
+ expect(getById('steps-header').exists()).toBe(true);
+ expect(findAllPopovers().exists()).toBe(true);
+ expect(findAllPopovers().exists()).toBe(true);
+ expect(findButtonGroup().exists()).toBe(true);
+ expect(findButtons().exists()).toBe(true);
+ expect(findButtons().length).toBe(2);
+ });
+
+ it('renders gfm', () => {
+ expect(renderGFM).toHaveBeenCalledWith(getById('description').element);
+ });
+
+ it('renders description when descriptionHtml is not present', () => {
+ createWrapper({
+ descriptionHtml: null,
+ });
+ expect(getById('description').html()).not.toContain(mockVulnerability.descriptionHtml);
+ expect(getText('description')).toBe(mockVulnerability.description);
+ });
+
+ describe('check popovers content', () => {
+ it('checks all popovers data', () => {
+ expect(findAllPopovers().at(0).attributes('content')).toContain(
+ 'Code flow helps trace and flag risky data',
+ );
+ expect(findAllPopovers().at(1).attributes('content')).toContain(
+ "A 'source' refers to untrusted inputs like user data",
+ );
+ expect(findAllPopovers().at(2).attributes('content')).toContain(
+ "A 'sink' is where untrusted data is used in a potentially risky way",
+ );
+ });
+ });
+
+ it('shows the steps header test', () => {
+ expect(getText('steps-header')).toBe(`3 steps across 1 files`);
+ });
+
+ it('check that collapse is visible by default', async () => {
+ await nextTick();
+ findAllCollapses().wrappers.forEach((collapseWrapper) => {
+ expect(collapseWrapper.props('visible')).toBe(true);
+ });
+ });
+
+ it('moves back and forward correctly', async () => {
+ const steps = wrapper.vm.numOfSteps;
+ const findBackButton = findButtons().wrappers[0];
+ const findForwardButton = findButtons().wrappers[1];
+
+ expect(findBackButton.attributes('disabled')).toBe('disabled');
+ expect(findForwardButton.attributes('disabled')).toBeUndefined();
+
+ for (let step = 1; step < steps; step += 1) {
+ // eslint-disable-next-line no-await-in-loop
+ await findForwardButton.trigger('click');
+
+ if (step < steps - 1) {
+ // intermediate steps: both buttons should be enabled
+ expect(findBackButton.attributes('disabled')).toBeUndefined();
+ expect(findForwardButton.attributes('disabled')).toBeUndefined();
+ } else {
+ // last step: forward button should be disabled, back button should be enabled
+ expect(findBackButton.attributes('disabled')).toBeUndefined();
+ expect(findForwardButton.attributes('disabled')).toBe('disabled');
+ }
+ }
+ });
+
+ describe('check step row', () => {
+ let files;
+ let rows;
+
+ beforeEach(() => {
+ files = wrapper.findAll('[data-testid^="file-steps-"]');
+ rows = wrapper.findAll('[data-testid^="step-row-"]');
+ });
+
+ it('selects first row', () => {
+ expect(files.length).toBe(1);
+ expect(rows.length).toBe(3);
+
+ files.wrappers.forEach((file, index) => {
+ const fileRows = file.findAll('[data-testid^="step-row-"]');
+ fileRows.wrappers.forEach((row, i) => {
+ if (i === 0 && index === 0) {
+ expect(row.classes()).toContain('gl-bg-blue-50');
+ } else {
+ expect(row.classes()).not.toContain('gl-bg-blue-50');
+ }
+ });
+ });
+ });
+
+ it('validate data under each row', () => {
+ let globalIndex = 0;
+
+ files.wrappers.forEach((file) => {
+ const fileRows = file.findAll('[data-testid^="step-row-"]');
+
+ fileRows.wrappers.forEach((row) => {
+ globalIndex += 1;
+
+ const componentsUnderRow = row.text();
+ expect(componentsUnderRow).toContain(`${globalIndex}`);
+ expect(componentsUnderRow).toContain(
+ `${mockVulnerability.details.items[0][globalIndex - 1].fileLocation.lineStart}`,
+ );
+ expect(componentsUnderRow).toContain(
+ `${mockVulnerability.details.items[0][globalIndex - 1].fileDescription}`,
+ );
+ });
+ });
+ });
+ });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2791e1695510ae5a6a6d7f6a6061bcb2253938b8..4d45fe2e2275c58e27b2b2232164d91037e4a6c8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1054,6 +1054,9 @@ msgid_plural "%{no_of_days} days"
msgstr[0] ""
msgstr[1] ""
+msgid "%{numOfSteps} steps across %{numOfFiles} files"
+msgstr ""
+
msgid "%{numberOfSelectedTags} tags"
msgstr ""
@@ -34761,6 +34764,9 @@ msgstr ""
msgid "Next scan"
msgstr ""
+msgid "Next step"
+msgstr ""
+
msgid "Next unresolved thread"
msgstr ""
@@ -40080,6 +40086,9 @@ msgstr ""
msgid "Previous file in diff"
msgstr ""
+msgid "Previous step"
+msgstr ""
+
msgid "Previous unresolved thread"
msgstr ""
@@ -58984,6 +58993,12 @@ msgstr ""
msgid "Vulnerability|%{scannerName} (version %{scannerVersion})"
msgstr ""
+msgid "Vulnerability|A 'sink' is where untrusted data is used in a potentially risky way, such as in SQL queries or HTML output. Sink points are monitored to prevent security vulnerabilities in the software."
+msgstr ""
+
+msgid "Vulnerability|A 'source' refers to untrusted inputs like user data or external data sources. These inputs can introduce security risks into the software system and are monitored to prevent vulnerabilities."
+msgstr ""
+
msgid "Vulnerability|A solution is available for this vulnerability"
msgstr ""
@@ -59020,6 +59035,9 @@ msgstr ""
msgid "Vulnerability|Code flow"
msgstr ""
+msgid "Vulnerability|Code flow helps trace and flag risky data ('tainted data') as it moves through your software. Vulnerabilities are detected by pinpointing how untrusted inputs, like user data or network traffic, are utilized. This technique finds and fixes data handling flaws, securing software from injection and cross-site scripting attacks."
+msgstr ""
+
msgid "Vulnerability|Comments"
msgstr ""
@@ -59173,6 +59191,9 @@ msgstr ""
msgid "Vulnerability|Status:"
msgstr ""
+msgid "Vulnerability|Steps"
+msgstr ""
+
msgid "Vulnerability|The scanner determined this vulnerability to be a false positive. Verify the evaluation before changing its status. %{linkStart}Learn more about false positive detection.%{linkEnd}"
msgstr ""
@@ -59212,9 +59233,15 @@ msgstr ""
msgid "Vulnerability|Warning: possible secrets detected"
msgstr ""
+msgid "Vulnerability|What is code flow?"
+msgstr ""
+
msgid "Vulnerability|You can also %{message}."
msgstr ""
+msgid "Vulnerability|code area"
+msgstr ""
+
msgid "Vulnerability|code_flow"
msgstr ""