Update dependencies table UI
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:
- Badges do not render correctly.
- This will be addressed by gitlab-ui!1248 (merged), and the related !28356 (closed) integration MR.
- Table font colours are very light.
- This is tracked by #213324 (closed).
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 |
---|---|
![]() |
![]() |
The once !28356 (closed) and gitlab-ui!1248 (merged) are merged, the badges will look like this:
Finally, this video briefly demonstrates the row expanding/collapsing behaviour, when clicking on the caret or vulnerability badge.
Does this MR meet the acceptance criteria?
Conformity
- [-] Changelog entry
- [-] Documentation (if required)
-
Code review guidelines - [-] Merge request performance guidelines
-
Style guides - [-] Database guides
-
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.