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

[Lens] refactor DimensionContainer and fix flyout bug #79277

Merged
merged 6 commits into from
Oct 5, 2020

Conversation

mbondyra
Copy link
Contributor

@mbondyra mbondyra commented Oct 2, 2020

Summary

Fixes #79255

Refactors DimensionContainer by separating triggers from flyout. Before each trigger has its flyout and it made its state very complicated to manage. Here I've changed it so that we have multiple triggers and only one flyout.

I know this one can be tricky but I would appreciate a quick feedback to ship it in 7.10 before feature freeze as it is also fix of a bug @flash1293 @dej611 @cchaos @wylieconlon 🙏

@mbondyra mbondyra added Feature:Lens release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.10.0 v8.0.0 labels Oct 2, 2020
@mbondyra mbondyra marked this pull request as ready for review October 2, 2020 13:04
@mbondyra mbondyra requested a review from a team October 2, 2020 13:04
@mbondyra mbondyra requested a review from a team as a code owner October 2, 2020 13:04
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@mbondyra mbondyra changed the title [Lens] fix pie chart bug on grouping order change and refactor DimensionContainer [Lens] refactor DimensionContainer and fix flyout bug Oct 2, 2020
.lnsDimensionContainer__footer,
.lnsDimensionContainer__header {
padding: $euiSizeS;
}

.lnsDimensionContainer__trigger {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this wasn't used anywhere

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

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

Looks pretty good, so far I just have a small question. Will check it in greater detail on Monday

<div
role="dialog"
aria-labelledby="lnsDimensionContainerTitle"
className={classNames('lnsDimensionContainer', {
'lnsDimensionContainer--noAnimation': openByCreation,
Copy link
Contributor

Choose a reason for hiding this comment

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

If I understand correctly this line was responsible for directly showing the flyout without having it sliding out if it's a new dimension. Is there a special reason we don't want to do it anymore?

Copy link
Contributor Author

@mbondyra mbondyra Oct 2, 2020

Choose a reason for hiding this comment

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

@flash1293 this is a weird construct that is a legacy from popover (each trigger has its own popover/flyout).

In master, when you open a new dimension, there is an animation of opening a flyout. Then, if you configure it to the correct dimension, under the hood we close 'empty-dimension' flyout and open the 'configured dimension' flyout (it has to be different because the trigger is different). But we want the user to perceive it as seamless change, without the animation of what's really happening (close new dimension flyout, open existing dimension flyout). Adding this classname was causing the animation not to trigger in this case so it looked like it's the same flyout.

In this PR, as we have one dimensionContainer for all of the triggers, when a user switches from new dimension to configured one, it's still the same DimensionContainer so nothing has to be hacked. :)

Copy link
Contributor

Choose a reason for hiding this comment

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

@mbondyra Got it, thanks for the explanation!

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Works well for me. I didn't run into any weird edge cases. I'm glad we could get rid of that animation hack. Looks great!

Copy link
Contributor

@wylieconlon wylieconlon left a comment

Choose a reason for hiding this comment

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

Changes LGTM, nice improvement! Tested in FF

@mbondyra
Copy link
Contributor Author

mbondyra commented Oct 4, 2020

@elasticmachine merge upstream

@mbondyra
Copy link
Contributor Author

mbondyra commented Oct 5, 2020

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

async chunks size

id before after diff
lens 1.1MB 1.0MB -2.8KB

History

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

@mbondyra mbondyra merged commit ce97982 into elastic:master Oct 5, 2020
@mbondyra mbondyra deleted the refactor_dimension_container branch October 5, 2020 10:41
mbondyra added a commit to mbondyra/kibana that referenced this pull request Oct 5, 2020
jloleysens added a commit to jloleysens/kibana that referenced this pull request Oct 5, 2020
…nes/fix-description-field

* 'master' of github.com:elastic/kibana:
  A11y tests for user page (elastic#79199)
  [Ingest Pipelines] Processors editor a11y focus states (elastic#79122)
  [Ingest pipelines] Clean up component integration tests (elastic#78838)
  Drilldowns in examples (elastic#75640)
  Storybook and Jest cleanup (elastic#79305)
  adds EQL sequence rule test (elastic#79287)
  PR template a11y checklist item improvement (elastic#79243)
  [Security Solution] Adding tests for dns pipeline in the endpoint package (elastic#79177)
  [ML] Only adjust the bounds of SMV if annotations are visible (elastic#79210)
  global search to ts refs (elastic#79446)
  [Index management] Update TemplateDeserialized interface (elastic#78913)
  [Telemetry] server fetcher check all collectors ready before sending (elastic#79398)
  [Mappings editor] Fix app crash when selecting "other" field type (elastic#79434)
  [`/api/stats`] Add documentation + small improvement (elastic#79330)
  [Discover] "View surrounding documents" encodes spaces in filters (elastic#79283)
  [Lens] refactor DimensionContainer and fix flyout bug (elastic#79277)

# Conflicts:
#	x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
#	x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Lens release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Lens] when changing grouping order for pie, the flyout closes and opens again
6 participants