From a01a43c6e90374905968fc93404750d18638b2c4 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Tue, 4 Mar 2025 15:12:06 +0100
Subject: [PATCH] Add header info to the dependency path drawer
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/521597
---
.../dependencies/components/dependency_path_drawer.vue | 6 ++++--
.../dependencies/components/dependency_path_drawer_spec.js | 5 ++---
locale/gitlab.pot | 3 +++
3 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/ee/app/assets/javascripts/dependencies/components/dependency_path_drawer.vue b/ee/app/assets/javascripts/dependencies/components/dependency_path_drawer.vue
index ba9f5b17a55a2..e1529f60fcd70 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependency_path_drawer.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependency_path_drawer.vue
@@ -38,6 +38,7 @@ export default {
i18n: {
drawerTitle: s__('Vulnerability|Dependency paths'),
projectTitle: s__('Vulnerability|Project'),
+ componentTitle: s__('Vulnerability|Component'),
},
getContentWrapperHeight,
DRAWER_Z_INDEX,
@@ -60,8 +61,9 @@ export default {
</template>
<template v-if="showHeader" #header>
<div class="gl-mt-3" data-testid="dependency-path-drawer-header">
- <strong>{{ dependency.name }}</strong>
- <span class="gl-ml-2">{{ dependency.version }}</span>
+ <strong>{{ $options.i18n.componentTitle }}:</strong>
+ <span>{{ dependency.name }}</span>
+ <span>{{ dependency.version }}</span>
</div>
</template>
<div v-if="showProject" data-testid="dependency-path-drawer-project">
diff --git a/ee/spec/frontend/dependencies/components/dependency_path_drawer_spec.js b/ee/spec/frontend/dependencies/components/dependency_path_drawer_spec.js
index a15f0183ff0de..9ba9dad084f09 100644
--- a/ee/spec/frontend/dependencies/components/dependency_path_drawer_spec.js
+++ b/ee/spec/frontend/dependencies/components/dependency_path_drawer_spec.js
@@ -65,9 +65,8 @@ describe('DependencyPathDrawer component', () => {
it('shows header text when component exists', () => {
createComponent({ showDrawer: true });
- const header = findHeader();
- expect(header.text()).toContain(defaultDependency.name);
- expect(header.text()).toContain(defaultDependency.version);
+ const { name, version } = defaultDependency;
+ expect(findHeader().text()).toBe(`Component: ${name} ${version}`);
});
it('does not show header text when component does not exist', () => {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 865c59be2098a..1433b7dbc2830 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -64697,6 +64697,9 @@ msgstr ""
msgid "Vulnerability|Comments"
msgstr ""
+msgid "Vulnerability|Component"
+msgstr ""
+
msgid "Vulnerability|Crash address:"
msgstr ""
--
GitLab