From 14d4d9d10f307f1576fdddb242d67b311def4917 Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Wed, 17 Jan 2024 10:04:16 +0000
Subject: [PATCH] Hide count and table header in empty state
Changelog: added
EE: true
---
.../vulnerability_report/vulnerability_list.vue | 17 ++++++++++-------
.../vulnerability_list_graphql.vue | 1 +
.../vulnerability_list_graphql_spec.js | 11 +++++++++--
.../vulnerability_list_spec.js | 4 ++--
4 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue
index 5552049cbd4c4..ddfe4628ea904 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue
@@ -125,6 +125,9 @@ export default {
shouldShowSelectionSummary() {
return this.numOfSelectedVulnerabilities > 0;
},
+ shouldShowTable() {
+ return this.isLoading || this.vulnerabilities.length;
+ },
},
watch: {
vulnerabilities() {
@@ -237,11 +240,14 @@ export default {
</portal>
<gl-table
+ v-if="shouldShowTable"
class="vulnerability-list"
:busy="isLoading"
:fields="displayFields"
:items="vulnerabilities"
- :thead-class="{ 'below-selection-summary': shouldShowSelectionSummary }"
+ :thead-class="{
+ 'below-selection-summary': shouldShowSelectionSummary,
+ }"
:sort-desc="sort.sortDesc"
:sort-by="sort.sortBy"
sort-direction="last"
@@ -249,7 +255,6 @@ export default {
no-local-sorting
no-sort-reset
stacked="sm"
- show-empty
hover
primary-key="id"
:tbody-tr-class="{ 'gl-cursor-pointer': canAdminVulnerability }"
@@ -391,11 +396,9 @@ export default {
<template #table-busy>
<gl-skeleton-loader v-for="n in pageSize" :key="n" :lines="2" />
</template>
-
- <template #empty>
- <filters-produced-no-results v-if="hasVulnerabilities" class="gl-cursor-default" />
- <dashboard-has-no-vulnerabilities v-else class="gl-cursor-default" />
- </template>
</gl-table>
+
+ <filters-produced-no-results v-else-if="hasVulnerabilities" class="gl-cursor-default gl-my-5" />
+ <dashboard-has-no-vulnerabilities v-else class="gl-cursor-default gl-my-5" />
</div>
</template>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue
index 0c57482711c88..5cf2fcf89dd3a 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue
@@ -227,6 +227,7 @@ export default {
/>
<div
+ v-if="isLoadingVulnerabilities || vulnerabilities.length"
class="gl-mt-6"
:class="{
'gl-text-center gl-relative vulnerability-report-footer-mobile': hasPagination,
diff --git a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js
index 46fcc71ffd590..d9e7ed2f140ff 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js
@@ -30,14 +30,14 @@ const portalName = 'portal-name';
const SORT_OBJECT = { sortBy: 'detected', sortDesc: true };
const DEFAULT_SORT = `${FIELDS.SEVERITY.key}_desc`;
-const createVulnerabilitiesRequestHandler = (options) =>
+const createVulnerabilitiesRequestHandler = (options, nodes = vulnerabilities) =>
jest.fn().mockResolvedValue({
data: {
group: {
id: 'group-1',
__typename: 'Group',
vulnerabilities: {
- nodes: vulnerabilities,
+ nodes,
pageInfo: {
__typename: 'PageInfo',
startCursor: 'abc',
@@ -373,5 +373,12 @@ describe('Vulnerability list GraphQL component', () => {
expect(findLocalStorageSync().props('value')).toBe(pageSize);
});
+
+ it('is not shown when loaded and there are no vulnerabilities', async () => {
+ createWrapper({ vulnerabilitiesHandler: createVulnerabilitiesRequestHandler({}, []) });
+ await waitForPromises();
+
+ expect(findPageSizeSelector().exists()).toBe(false);
+ });
});
});
diff --git a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js
index 69df11eb6eadd..4bd4e4295d376 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js
@@ -593,7 +593,7 @@ describe('Vulnerability list component', () => {
describe('sorting', () => {
it('passes the sort prop to the table', () => {
const sort = { sortBy: 'a', sortDesc: true };
- createWrapper({ stubs: { GlTable: true }, props: { sort } });
+ createWrapper({ stubs: { GlTable: true }, props: { sort, vulnerabilities } });
expect(findTable().attributes()).toMatchObject({
'sort-by': sort.sortBy,
@@ -602,7 +602,7 @@ describe('Vulnerability list component', () => {
});
it('emits sort data in expected format', () => {
- createWrapper();
+ createWrapper({ props: { vulnerabilities } });
const sort = { sortBy: 'state', sortDesc: true };
findTable().vm.$emit('sort-changed', sort);
--
GitLab