Commit 61be8524 authored by Mark Florian's avatar Mark Florian Committed by Nathan Friend

Enable new Dependency List UI

This enables by default the `dependency_list_ui` feature flag. In
addition, some styling workarounds have been applied, which will be
removed in later iterations.

Part of [Update dependencies table UI][1].

[1]: https://gitlab.com/gitlab-org/gitlab/-/issues/195928
parent 2fd91cff
......@@ -17,32 +17,25 @@ sidebar. This information is sometimes referred to as a Software Bill of Materia
## Viewing dependencies
![Dependency List](img/dependency_list_v12_4.png)
![Dependency List](img/dependency_list_v12_10.png)
Dependencies are displayed with the following information:
| Field | Description |
| --------- | ----------- |
| Status | Displays whether or not the dependency has any known vulnerabilities |
| Component | The dependency's name |
| Version | The exact locked version of the dependency your project uses |
| Component | The dependency's name and version |
| Packager | The packager used to install the depedency |
| Location | A link to the packager-specific lockfile in your project that declared the dependency |
| License | Links to dependency's software licenses |
Dependencies shown are initially sorted by their names. They can also be sorted
by the packager they were installed by, or by the severity of their known
vulnerabilities.
There is a second list under the `Vulnerable components` tab displaying only
those dependencies with known vulnerabilities. If there are none, this tab is
disabled.
Dependencies shown are initially sorted by the severity of their known vulnerabilities, if any. They
can also be sorted by name or by the packager that installed them.
### Vulnerabilities
If a dependency has known vulnerabilities, they can be viewed by clicking on the
`Status` cell of that dependency. The severity and description of each
vulnerability will then be displayed below it.
If a dependency has known vulnerabilities, you can view them by clicking the arrow next to the
dependency's name or the badge that indicates how many known vulnerabilities exist. For each
vulnerability, its severity and description then appears below it.
## Licenses
......
......@@ -93,6 +93,8 @@ export default {
</script>
<template>
<!-- tbody- and thead-class props can be removed when
https://gitlab.com/gitlab-org/gitlab/-/issues/213324 is fixed -->
<gl-table
v-if="glFeatures.dependencyListUi"
:fields="$options.fields"
......@@ -100,6 +102,8 @@ export default {
:busy="isLoading"
details-td-class="pt-0"
stacked="md"
thead-class="gl-text-gray-900"
tbody-class="gl-text-gray-900"
>
<!-- toggleDetails and detailsShowing are scoped slot props provided by
GlTable; they mutate/read the item's _showDetails property, which GlTable
......@@ -134,10 +138,13 @@ export default {
</template>
<template #cell(isVulnerable)="{ item, toggleDetails }">
<!-- This badge usage will be simplified by
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28356 -->
<gl-badge
v-if="item.vulnerabilities.length"
variant="warning"
href="#"
class="d-inline-flex align-items-center bg-warning-100 text-warning-700 bold"
@click.native="toggleDetails"
>
<gl-icon name="warning" class="text-warning-500 mr-1" />
......
......@@ -5,7 +5,7 @@ module Projects
before_action :authorize_read_dependency_list!
before_action only: [:index] do
push_frontend_feature_flag(:dependency_list_ui, project)
push_frontend_feature_flag(:dependency_list_ui, project, default_enabled: true)
end
def index
......
---
title: Improve readability of Dependency List
merge_request: 29593
author:
type: changed
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