change DS and LC icons

Release notes

Problem to solve

The “dash” icon is used in various MR widgets, but its meaning is not clear: Is everything is ok? Is it a progress bar? A null result?

The x and √ icons used here are also supposed to be reserved for pipeline status. Current icons:

See #296513 (comment 570178231) for more.

Proposal

Update our icons in the Secure MR widget for DS and LC to be the circular icons. Also indent the icons to match the latest update in the other security widgets (see this MR).

Proposed design:

• Uses 8px spacing between icon and text

Documentation

Update user doc images as needed

Availability & Testing

you may need to update tests? unlikely but check

Is this a cross-stage feature?

We are about to no longer match the rest of devopssecure and devopsprotect

Do the other PMs want us to update to the round-bubble icons for them too?

@tmccaslin @derekferguson @sam.white

Implementation Plan

• Update SVG icons here https://gitlab.com/gitlab-org/gitlab/-/blob/v14.0.0-rc42-ee/app/assets/javascripts/reports/components/issue_status_icon.vue#L23

• Change the following:

status_failed_borderless -> status-failed

status_success_borderless -> status-success

dash -> status-alert

• Change gl-mr-3 to gl-mr-2 in https://gitlab.com/gitlab-org/gitlab/-/blob/v14.0.0-rc42-ee/app/assets/javascripts/reports/components/report_item.vue#L55
• Update unit tests
• Verify all usages of issue_status_icon below:

app/assets/javascripts/reports/components/report_item.vue

app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue

ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue

ee/app/assets/javascripts/vue_shared/license_compliance/components/license_management_row.vue

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.