[Security Solution] [META] UX / frontend cleanup of Security Solution

[snide]

This is a meta document that will house UX frontend cleanup and suggestions of the Security solution. Issues should mostly cover tasks that can be be done mostly through CSS / template cleanup without changing any of the core functionality.

cc @elastic/security-design who might want to check over some of these suggestions and provide more guidance.

Low-hanging fruit

These issues look like they could be addressed with minimal design involvement or a brief consult.

• [Security Solution] Update Timeline tooltips to use action words / fewer words #126973
• [Security Solution] Timeline title editing / saving should not be available if you don't have permissions #120019
• [Security Solution] Fixed search bar needs shadow definition #120281
• [Security Solution] Suggestion: remove dead space in the header of the Alerts section #120287
• [Security Solution] Suggestion. Collapse Alerting graphs into one view #120282
• [Security Solution] Error in Add Rule Exception modal is mis-aligned #108899
• [Security Solution] Dropzone for timeline search is inconsistent #120296
• [Security Solution] Apply an overflow on max-height of body when opening timeline #120300
• [Security Solution] No results screen for Alerts page should be simplified #120359
• [Security Solution] Suggestion: Visual cleanup of correlation textarea in Timeline #120302
• [Security Solution] Alert attachment in case is missing border #121246
• [Security Solution] Avatar size and spacing of user emails in the cases detail page #121248
• [Security Solution] Inconsistent placement of update time and description across several pages #121252
• [Security Solution] Decreasing spacing between header buttons on cases page #121253
• https://github.com/elastic/security-team/issues/2154
• [Security Solution] Download icon looks like a share icon #121759
• [Security Solution] Data is not rendered on mobile viewport < 767 px #121403

Large frontend fixes

These are larger issues that either are tricky on the FE, or would require some more design thought.

• [Security Solution] Suggestion: Alerting application needs to used fixed layouts for proper scrolling / virtualization #120291
• [Security Solution] Loading states across applications needs to be consistant #120355
• [Security Solution] Suggestion: Utilize dark toolbar for fixed position timeline #120295
• [Security Solution] The pagination bar of the Timeline is unclear and needs some FE cleanup #120297
• [Security Solution] UX issues with the Rules creation flow #120372
• [Security Solution] [UX] Component tracking: aligning table's utility bar / bulk actions in various Security tables when EUI component is ready #121695
• https://github.com/elastic/security-team/issues/1912 (Pending product to finalize the product requirements)
• [Security Solution] [UX] Component tracking: Update bulk actions component for Rule's table when EUI component is ready #121685

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[monina-n]

Small UX bugs

• [Security Solution] Alert attachment in case is missing border #121246
• [Security Solution] Avatar size and spacing of user emails in the cases detail page #121248
• [Security Solution] Inconsistent placement of update time and description across several pages #121252
• [Security Solution] Decreasing spacing between header buttons on cases page #121253

[snide]

@monina-n added these. feel free to just edit it directly whenever you need.

[bfishel]

I was going to attach a few I added last week, but one of my devs went in and fixed them all while I've been out! Will link below for reference. In the meantime, I will link another that still needs to be worked on and will find more when I am back from pto.

Still needs fixing

• [UX Bug] Remove header from endpoint empty state #2154

Fixed!!

• [UX Bug] move endpoint details breadcrumb above the header in the endpoint details flyout #2394
• [UX Bug] Double horizontal rule underneath tabs in endpoint details #2395
• [UX Bug] Fix spacing and button color on endpoint list search and refresh block #2396
• [UX Bug] Change isolate host icon to a lock #2397
• [UX writing bug] Change "endpoint hosts" breadcrumb to "endpoints" #2398

[yiyangliu9286]

Adding these issues to the original list:

Low-hanging fruit

• [Security Solution] [UX] Component tracking: Update bulk actions component for Rule's table when EUI component is ready #121685

Large frontend fixes

• [Security Solution] [UX] Component tracking: aligning table's utility bar / bulk actions in various Security tables when EUI component is ready #121695
• https://github.com/elastic/security-team/issues/1912 (Pending product to finalize the product requirements)

Fixed

• [Meta] [UX] Table truncation / UI enhancements for Rules / Rule monitoring / Exceptions tables #117460

[gavinwye]

Adding some more issues to this list

• [Security Solution] Exceptions list delete is dissabled #121761
• [Security Solution] Download icon looks like a share icon #121759
• [Security Solution] Secondary text fails AAA colour contrast #121758
• [Security Solution] Exceptions or exception lists #121756
• [Security Solution] Pagination shown when there is nothing to paginate #121755
• [Security Solution] rules count is wrong #121754
• [Security Solution] Threat intelligence tab displayed with no data #121752
• [Security Solution] Data is not rendered on mobile viewport < 767 px #121403
• [Security Solution] Data sources, drop-down list drops out of the bottom of the overlay #121400