[Security Solution] Session view UI polish based on the QA notes

[animehart]

Background

Some of the UI props on Session view page needs to be updated to follow the latest Figma design. The list of the changes required are listed on the QA Notes ( https://www.figma.com/file/3v90FFYIKKZ7aIPxj2fxiH/%5B8.2%5D-%5BSession-viewer%5D-Session-View-for-Sessions-and-Processes?node-id=1885%3A361276 )

Tasks

Detail panel

➡️ Link to Figma file

• Detail Panels sizing: Default size: 25% of viewport, but no less than 320 px. Max size: 40% of viewport ➡️ Link to Figma file QA
• Fix typography in Detail Items
• Detail Items height: 32 px
• Fix spacing between Items
• Fix padding between last Item and next section. Should be 16 px
• Add Border-left to Details Panel Border-left box-shadow: 1px 0px 0px 0px #D3DAE6 inset;
• Fix button states for Detail Panel ➡️ Toggle button specs in EUI
• In a case when the row has a multiple values, we display first 5 and the link 'Show more'. After clicking on this link we expand all list of values and link copy changed to 'Show less' ➡️ Link to Figma file QA

Toolbar

• Change background color to background: #EEF2F7;
• Change copy in search field from "Search" to "Find"
• Add divider between Toolbar and Session frame: EuiHorizontalRule https://elastic.github.io/eui/#/layout/horizontal-rule

Find results interaction

• Highlighted findings specs: Selected state: $euiColorWarning, Default state: $euiColorWarning 32% opacity
• No border-radius for highlight
• Jump to findings below the viewport should scroll the session viewer content
• There is an issue with a long text in the search field. It overlaps with stepper-control. Text should go under stepper control. Example EuiFieldSearch https://codesandbox.io/s/hz7boq?file=/demo.js

Session viewer frame

• Border around the entire session viewer: border: 1px solid #D3DAE6
• Fix Expandable badges style. ➡️ Link to Figma file QA
• Fix paddings in process line ➡️ Link to Figma file QA
• Fix font styles for process lines ➡️ Link to Figma file QA
• States for process rows ➡️ Link to Figma file QA
• Update icons ➡️ Link to Figma file QA

[codearos]

Details panel QA

➡️ Link to Figma file

Panel component specs

Default width: 360 px. For resize states: Min width: 320 px; Max width: 640 px;

Item specs

Button states

For Detal Panel btn used EuiButton toggle.
https://elastic.github.io/eui/#:~:text=Props-,Toggle%20buttons,-You%20can%20create

[codearos]

Find results interaction

Screen.Recording.2022-03-21.at.2.55.51.PM.mov

[codearos]

Detail Panels sizing

Default size: 25% of viewport, but no less than 320 px. Max size: 40% of viewport.

➡️ Link to Figma file QA