Dashboard Listing Page Papercuts

[timductive]

Standardize the name column to just be labeled "Name". If the name includes the description and tags we don't need to clarify that in the column name.

Can we remove tag color combinations that are difficult to see in light or dark mode? Basically remove all whites and blacks.

Can we select a less overloaded icon for a "View details" action? How hard would it be to add an edit and delete action here too? Do we agree that actions should be icons or should they be words?

---

Suggested papercut fixes (added by @ryankeairns)

• [ ] Change column title to just 'Name'
• [ ] Use default EuiBadge color (i.e. no color prop setting) for 'Managed' tags
• [ ] For the actions column, change the iInCircle icon to controlsVertical

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[ryankeairns]

Did a little spelunking...

It looks like the tags are being set to white, here, and applied when the assets are imported for a given integration:

https://github.com/elastic/kibana/blob/f3addae0052fd177924a056df0e4715917af796c/x-pack/plugins/security_solution/server/lib/detection_engine/rule_monitoring/logic/detection_engine_health/assets/tag_managed.json#L7

Passing the color #FFFFFF to EuiBadge produces this result of what looks like a borderless badge. It may seem like a potential EUI fix, but there could be a legitimate case for wanting to use a white badge (i.e. its open source; we aren't the only use case).

Suggesed fix for papercuts

Pass no color value and use the default (gray) provided by EuiBadge. See the EUI docs

[ryankeairns]

Regarding actions, EuiTable guidelines are to show up to two primary actions alongside an overflow menu. See the EUI docs example and toggle on the 'Multiple actions' switch to see it in action.

If we're able to add Edit and Delete, those could be the primary actions.

Suggested fix for papercuts

For papercut purposes, adding primary actions might be beyond the scope of what we want to tackle as that gets into RBAC considerations and might also lead to changing the dashboard title to open in the 'view' state (it appears to open in edit mode today which is a bit odd in light of this change).

One quick improvement could be to change the icon. iInCircle is one of the oddly small glyphs in the icon set. The flyout is both settings and info, so we need something that works for both. Let's try controlsVertical and save the pencil icon for future use if/when we add more actions in this column.