Truncation issues on right sidebar on the Security Alert Details page
Summary
When collapsing the right-hand sidebar on the Threat Monitoring Alert Details page while viewing the details of an alert, the assignee information does not truncate correctly.
Steps to reproduce
- Navigate to a project that has Container Security Alerts in place (https://staging.gitlab.com/defend-team-test/cnp-alert-demo/-/threat_monitoring/alerts/)
- Select an alert from the list.
- On the alert details page, collapse the right-hand menu that allows you to create todos, set status, and assign an alert.
- Observe that for an unassigned issue the truncation results in "ass", for an assigned alert the user icon is misaligned & the first few characters of the username attempts to display next to the icon.
Example Project
https://staging.gitlab.com/defend-team-test/cnp-alert-demo/-/threat_monitoring/alerts/93#/
What is the current bug behavior?
The truncation of the assignee information in the right-hand side-bar clips words & misaligns icons.
What is the expected correct behavior?
The behavior should match the truncation of the assignee field on the issues page (like this one)
Relevant logs and/or screenshots
Page | When Someone is not assigned | When someone is assigned |
---|---|---|
Issue (Copy this behavior) | ||
Alert Details |
Output of checks
Results of GitLab environment info
Expand for output related to GitLab environment info
(For installations with omnibus-gitlab package run and paste the output of: `sudo gitlab-rake gitlab:env:info`) (For installations from source run and paste the output of: `sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)
Results of GitLab application Check
Expand for output related to the GitLab application check
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true
)(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true
)(we will only investigate if the tests are passing)
Possible fixes
-
frontend this is breaking on both operations
andthreat monitoring
alert details page because this is a shared component. Update https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue#L196 to match what is done in https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue (or one of the files in that directory)