[Security Solution] Suggestion: Visual cleanup of correlation textarea in Timeline

[snide]

Shadows on toolbar under correlation are pretty heavy / unnecessary. Part of this looks like help text, while the other part is controls for the query. Suggestion would be to move the controls closer to the label, and leave the left text below as a typical form help text.

Likely can use some more definition from design. These are just suggestions. Short term though, that pretty ugly shadow probably be removed. This content could stand on it's own without the weight.

Resources

Figma design link

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[yiyangliu9286]

Please see the Figma design here.

Here is the screenshot of this UX/UI improvement view + list of UX/UI improvements have update to Timeline page under Correlation tab:

• Updated the Refresh button colour as less primary here, ideally, there should be only one primary button in a page which in this case, would be "Attach to case" CTA.
• Updated the "lock" button to better inline with the actual user intent (right now a single icon doesn't seem to be that intuitive). The question icon will explain this action further with the existing tooltip.
• Update EQL form field design to use the EuiFormRow component.
  • Changed the EQL settings as a button and moved to the top right of this form field
  • Move Event Query Language (EQL) Overview to the helper text area
  • Question: Can we add any placeholders or query examples to the EQL query form filed or leave as blank in the empty state?

[christineweng]

I think we can close this ticket per #173015 @michaelolo24 ?

[PhilippeOberti]

the UI for timeline has changed quite drastically over the last few recent months. We're now displaying a UI much closer to the Discover application, hence we can close this ticket!