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.

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

[UnifiedDocViewer] Implement floating actions #171365

Closed

Conversation

lukasolson
Copy link
Member

@lukasolson lukasolson commented Nov 15, 2023

Summary

Closes #164617.

Before:

Before.mov

After:

After.mov

Checklist

@lukasolson lukasolson added Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. Feature:UnifiedDocViewer Issues relating to the unified doc viewer component v8.12.0 labels Nov 15, 2023
@lukasolson lukasolson self-assigned this Nov 15, 2023
@lukasolson lukasolson changed the title Implement floating actions in kbn-unified-doc-viewer [UnifiedDocViewer] Implement floating actions Nov 16, 2023
Copy link
Contributor

@davismcphee davismcphee left a comment

Choose a reason for hiding this comment

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

Looks and works great! Definitely allows the doc viewer to make better use of the available space. A couple initial points of feedback:

  • I noticed that currently the floating actions aren't keyboard accessible, and the focus just skips over the whole table. I debugged this a bit and found that removing the visibility CSS styles from kbnDocViewer__buttons fixed the issue and still seemed to work as intended, but maybe there's another reason these are needed.
  • I'd recommend we remove the iconSize="s" from table_cell_actions.tsx since the icons currently are a bit small compared to the mockups.
  • I found the slower hover leave transition looked a bit strange (laggy maybe?) when moving the cursor over multiple rows. I see there's a comment about using a slower transition on hover leave in case the user accidentally stops hovering, but personally I find it looks better and functions just as well using $euiAnimSpeedFast for both transitions.

@lukasolson
Copy link
Member Author

  • I noticed that currently the floating actions aren't keyboard accessible, and the focus just skips over the whole table. I debugged this a bit and found that removing the visibility CSS styles from kbnDocViewer__buttons fixed the issue and still seemed to work as intended, but maybe there's another reason these are needed.

Yeah, unfortunately the suggested fix introduces its own set of strange behavior (can't copy the field name). I think @kertal had suggested something as well, but now I'm coming to a blank on what it was - Do you remember Matthias?

@kibana-ci
Copy link
Collaborator

kibana-ci commented Dec 5, 2023

💔 Build Failed

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #16 / a11y tests using flights sample data Discover a11y tests a11y test for actions on a field
  • [job] [logs] FTR Configs #16 / a11y tests using flights sample data Discover a11y tests a11y test for actions on a field
  • [job] [logs] FTR Configs #24 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] FTR Configs #28 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] FTR Configs #35 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] FTR Configs #64 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] FTR Configs #24 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] FTR Configs #35 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] FTR Configs #28 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] FTR Configs #64 / context app context filters inclusive filter should be addable via expanded data grid rows
  • [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Correlation tab should update timeline after removing eql should update timeline after removing eql
  • [job] [logs] FTR Configs #42 / discover/classic discover doc table legacy expand a document row should show allow toggling columns from the expanded document
  • [job] [logs] FTR Configs #42 / discover/classic discover doc table legacy expand a document row should show allow toggling columns from the expanded document
  • [job] [logs] x-pack/test_serverless/functional/test_suites/observability/common_configs/config.group5.ts / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] x-pack/test_serverless/functional/test_suites/security/common_configs/config.group5.ts / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] FTR Configs #36 / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] FTR Configs #50 / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] x-pack/test_serverless/functional/test_suites/observability/common_configs/config.group5.ts / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] x-pack/test_serverless/functional/test_suites/security/common_configs/config.group5.ts / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] FTR Configs #36 / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] FTR Configs #50 / discover/group2 discover data grid doc link should create an exists filter from doc view of the selected document
  • [job] [logs] FTR Configs #73 / management scripted fields creating and using Painless date scripted fields should filter by scripted field value in Discover
  • [job] [logs] FTR Configs #73 / management scripted fields creating and using Painless date scripted fields should filter by scripted field value in Discover

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
unifiedDocViewer 58.5KB 58.4KB -143.0B

History

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

cc @lukasolson

@kertal
Copy link
Member

kertal commented Dec 5, 2023

I think @kertal had suggested something as well, but now I'm coming to a blank on what it was - Do you remember Matthias?

Hmm, I don't remember I had a valid suggestion, maybe it comes to my mind when out of planning mode 😃

@lukasolson
Copy link
Member Author

Closing as we are considering using cell actions & data grid here instead.

@lukasolson lukasolson closed this Jan 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:UnifiedDocViewer Issues relating to the unified doc viewer component Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[UnifiedDocViewer] Use the floating actions and get rid of that empty space on the left
5 participants