[Cases] Add Lens markdown plugin followup UX changes

[yiyangliu9286]

Summary

Following up with the PR #96703, this is the updated UX/UI adjustments that are aligned with EUI components / guidelines. This issue also provides other product related information from users perceptive.

User story & problem statement I am a security analyst. I am trying to open up a case for the alert I saw and wanted to triage. But there is no way for me to graphically visualize my case investigation, because Security solutions does not support lens to be inserted in Cases comment, which makes feel that I am wasting my time describing the alert in the comment and trying to find work arounds.

Persona Security analysts

Other requirements

• The lens users have created is only for Cases comment but won't count towards Visualize Library
• Considering allow users to only insert one lens per comment to simplify the workflow.

Resources
Figma file

Feature Requirement
For now, users can only insert one lens per comment.

Solution

• Add visualization flow

Step 1 Click "Visualization" icon in comment

Step 2 See "Add visualization" modal with more information

Step 3 Hover on Beta badge to see more explanation about this feature

Step 4.1 Select visualization from template search bar / create new visualization

Step 4.2 Go to lens and make adjustments

Step 5 Click insert lens

• Edit visualization flow (no additional design needed)
  Step 1 Click overflow icon and select "Edit comment" (existing experience)
  Step 2 Click "Visualization" icon in comment
  Step 3 Go to lens and edit the existing lens they inserted for this Comment
  Step 4 Click "Save and return" directly them directly back to Markdown editor

[elasticmachine]

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

[elasticmachine]

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

[yiyangliu9286]

PR: #109178