Skip to content

Update dependencies table UI

Mark Florian requested to merge 195928-update-dependency-table-ui into master

What does this MR do?

Part of Update dependencies table UI.

This is the largest piece that implements the new table layout. It's behind the dependency_list_ui feature flag, which is currently disabled by default. This means that the existing UI is still in place, and unaffected.

Specifically, this:

  • Reimplements the table using GlTable from GitLab UI
  • Removes the UI tabs
  • Combines the component name and version columns
  • Adds a warning badge for rows with vulnerabilities
  • Adds a document icon to the location column

Notes

This is marked as WIP, since it's blocked by and depends on !28671 (merged).

In addition, there are some UI/styling issues with this:

  1. Badges do not render correctly.
  2. Table font colours are very light.

Since this new UI is not visible unless the feature flag is enabled, I think it's fine to merge this (once unblocked by !28671 (merged)), even with the above styling issues. Those issues can be address later, before the feature flag is enabled by default or removed.

Screenshots

Before/dependency_list_ui disabled After/dependency_list_ui enabled
mfx1.home_3002_gitlab-org_dependency-list-test_-dependencies__11 mfx1.home_3002_gitlab-org_dependency-list-test_-dependencies__8

The once !28356 (closed) and gitlab-ui!1248 (merged) are merged, the badges will look like this:

badges_in_dependency_list

Finally, this video briefly demonstrates the row expanding/collapsing behaviour, when clicking on the caret or vulnerability badge.

dependency-list-ui

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Mark Florian

Merge request reports