Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution][RAC] - Hide hover actions overflow #109693

Merged
merged 2 commits into from
Aug 24, 2021
Merged

[Security Solution][RAC] - Hide hover actions overflow #109693

merged 2 commits into from
Aug 24, 2021

Conversation

michaelolo24
Copy link
Contributor

@michaelolo24 michaelolo24 commented Aug 23, 2021 •
edited
Loading

Summary

Fixes #108891

Shown with the building block styling below to show that the styles aren't overriden:

overflow.mp4

@michaelolo24 michaelolo24 added bug Fixes for quality problems that affect the customer experience v8.0.0 release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting Security Solution Threat Hunting Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. auto-backport Deprecated - use backport:version if exact versions are needed Theme: rac label obsolete v7.15.0 v7.16.0 labels Aug 23, 2021
@michaelolo24 michaelolo24 requested a review from a team as a code owner August 23, 2021 16:36
@elasticmachine
Copy link
Contributor

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

@elasticmachine
Copy link
Contributor

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

@michaelolo24 michaelolo24 enabled auto-merge (squash) August 23, 2021 17:53
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
timelines 436.8KB 437.1KB +264.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

stephmilovic
stephmilovic reviewed Aug 23, 2021
View reviewed changes
x-pack/plugins/timelines/public/components/t_grid/body/index.tsx
@@ -595,10 +595,17 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
const rowData = rowIndex < data.length ? data[rowIndex].data : null;
const header = columnHeaders.find((h) => h.id === columnId);
const eventId = rowIndex < data.length ? data[rowIndex]._id : null;
const defaultStyles = useMemo(
() => ({
overflow: 'hidden',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😎

@stephmilovic
Copy link
Contributor

Screen Shot 2021-08-23 at 2 37 29 PM

nit: im no designer, but this seems not great? the actions sitting on whatever is to the column to the right. no advice other than adding a `background: white` to the actions menu

@michaelolo24
Copy link
Contributor Author

michaelolo24 commented Aug 24, 2021 •
edited
Loading

@stephmilovic I'm trying to reproduce what you saw, but it's working on my end:
image

EDIT: I was able to reproduce it when I switched branches without rebuilding.

stephmilovic
stephmilovic approved these changes Aug 24, 2021
View reviewed changes
Copy link
Contributor

@stephmilovic stephmilovic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!

@michaelolo24 michaelolo24 merged commit 9014e11 into elastic:master Aug 24, 2021
@kibanamachine kibanamachine mentioned this pull request Aug 24, 2021
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Aug 24, 2021
@michaelolo24 @kibanamachine
[Security Solution][RAC] - Hide hover actions overflow (elastic#109693)
bda3070 
* add overflow

* fix types error
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Aug 24, 2021
@michaelolo24 @kibanamachine
[Security Solution][RAC] - Hide hover actions overflow (elastic#109693)
99e2125 
* add overflow

* fix types error
@kibanamachine kibanamachine mentioned this pull request Aug 24, 2021
Merged
@kibanamachine
Copy link
Contributor

💚 Backport successful

Status Branch Result
✅ 7.15
✅ 7.x

The backport PRs will be merged automatically after passing CI.

kibanamachine added a commit that referenced this pull request Aug 24, 2021
@kibanamachine @michaelolo24
[Security Solution][RAC] - Hide hover actions overflow (#109693) (#10…
b0f8ffd 
…9819)

* add overflow

* fix types error

Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co>
kibanamachine added a commit that referenced this pull request Aug 24, 2021
@kibanamachine @michaelolo24
[Security Solution][RAC] - Hide hover actions overflow (#109693) (#10…
113d5f2 
…9818)

* add overflow

* fix types error

Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co>
@snide
Copy link
Contributor

snide commented Aug 24, 2021

I'm reopening the issue this PR was against. This change doesn't fix the core issue, which is that you have too many actions for small columns. Before the buttons were unclickable, now they can no longer be seen (but are still no longer clickable).

If we want to have 5 actions per cell, we need to set a minwidth to the column to account for the width of the actions OR we need to remove the amount of actions we allow and surface them into the popover (I'd prefer the later) since 5 actions per cell seems like way too much going on in such a small space.

cc @mdefazio @MikePaquette

@michaelolo24
Copy link
Contributor Author

@snide We spoke about this in our meeting and @andrew-goldstein is going to create an EUI issue specifically for focusing on the number of fields to show

@michaelolo24 michaelolo24 mentioned this pull request Aug 24, 2021
Closed
48 tasks
@mdefazio
Copy link
Contributor

There's a full write up here: https://github.com/elastic/stack-design-team/issues/85 for what the end goal for this should be. I'm happy to discuss this further and figure out how to iterate to this. I think whether the popover layout is correct or not is something we can continue working on, but to Dave's point, the primary goal here is to remove the 5 icons from the cell hover.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@stephmilovic stephmilovic stephmilovic approved these changes

Assignees
No one assigned
Labels
auto-backport Deprecated - use backport:version if exact versions are needed bug Fixes for quality problems that affect the customer experience release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team Theme: rac label obsolete v7.15.0 v7.16.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Security Solution] Icons in alerts data grid overflow small columns
6 participants
@michaelolo24 @elasticmachine @kibanamachine @stephmilovic @snide @mdefazio