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

doc/user/application_security/dependency_list/index.md

@@ -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
 

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

@@ -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" />

ee/app/controllers/projects/dependencies_controller.rb

@@ -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

ee/changelogs/unreleased/195928-dependency-list-ui-enabled.yml

+---
+title: Improve readability of Dependency List
+merge_request: 29593
+author:
+type: changed