Truncate long table values in on-demand scans page (!73641) · Merge requests · GitLab.org / GitLab

Paul Gascou-Vaillancourt requested to merge 341370-dast-view-scans-truncate-values-gl-truncate into master Nov 03, 2021

What does this MR do and why?

This improves the on-demand scans page UX by...

...adjusting columns' width to make more room for longer values.
...truncating scan names and target URLs when they are too long to fit in their cells.
...exposing truncated values' full text in a tooltip (made possible with gitlab-ui!2467 (merged)).
...top-positioning Started at tooltips to make them consistent with other tooltips in the list.

Screenshots or screen recordings

Before

Overflow	Start date tooltip

After

Responsiveness
responsive

Name	Target URL	Start date

How to set up and validate locally

Enable the on-demands scans page.
```
Feature.enable(:dast_view_scans)
```
~~This MR is temporarily running a development build of @gitlab/ui, so make sure your dependencies are up-to-date by running:~~
```
yarn
```
Visit any project's on-demand scans page such as http://127.0.0.1:3000/groups/flightjs/-/on_demand_scans.
- If you have never run on-demand scans before, follow the empty state's instructions to run at least one, then comme back to this page.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

I have evaluated the MR acceptance checklist for this MR.

Related to #341370 (closed)

Edited Nov 08, 2021 by Jannik Lehmann

Truncate long table values in on-demand scans page