[Lens] Drag within dimension group to reorder #80547

mbondyra · 2020-10-14T15:47:09Z

Summary

Fixes #67226
Works only for pie or table because of the bug in elastic-charts for xyChart (elastic/elastic-charts#868) - once the bug is fixed, it's one line change to make it work for xyCharts.

Here's the little demo:

Accessibility

Process for drag and drop with keyboard:

To enter keyboard mode, user has to select the first of three focus points in the button (1 -> drag and drop controller, second opens the flyout, third is a delete button).
Then press space bar / enter to start a drag - the buttons in the group will turn green.
Use arrows up/down to move items – the changes are applied immediately to the chart
Escape dragging mode with pressing space/enter/escape.

I've also added an aria-described-by element on the level of the group with description:

Press space bar to start a drag. When dragging, use arrow keys to reorder. Press space bar again to finish.

and a aria-live element that has 3 states:

"" (empty) when drag is inactive.
"You have lifted an item in position {position}" when element has been lifted but no changes happened yet.
"You have moved the item from position {prevPosition} to position {position}" when element has just been repositioned

Checklist

accessibility check
tests for keyboard behavior
To avoid conflicts, this branch is build on top of [Lens] Split up dimension panel code #80423 (will be rebased once we merge the above)
Documentation
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility) – the reorder functionality drag and drop is not keyboard usable, but we have another way of achieving the same effect (dropdown list on 'group by' setting)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
cross browser check (Safari)

cchaos

Visually I only saw one slight hiccup in the shifting of the dimensions where if you pull an item from the middle the margins are a bit off so that if you move to the top and drop it theres a slight moment where they then all shift down a couple pixels. Here's a movie: https://share.getcloudapp.com/JrugxKll

Do we now also get to remove the Group by option in from the flyout?

Also, we need to figure out the keyboard accessibility of this interaction. I mentioned in Slack the EuiDragDrop has this out of the box, but if we can't use that here, we'll need a custom implementation.

x-pack/plugins/lens/public/drag_drop/drag_drop.scss

flash1293

Tested in Chrome and Firefox and this works really slick now! Just left a small nit but otherwise I don't see any issues with the functionality.

x-pack/plugins/lens/public/types.ts

wylieconlon

I found a screenreader bug and left some comments. Overall still looking good, but I will want to do another test with screen reader before approving.

x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx

x-pack/plugins/lens/public/drag_drop/drag_drop.tsx

x-pack/plugins/lens/public/drag_drop/providers.tsx

wylieconlon · 2020-10-30T16:48:39Z

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

+                      >
+                        <div className="lnsLayerPanel__dimension">
+                          <NativeRenderer
+                            render={props.datasourceMap[datasourceId].renderDimensionTrigger}


x-pack/plugins/lens/public/drag_drop/drag_drop.tsx

mbondyra · 2020-11-02T12:51:06Z

@elasticmachine merge upstream

MichaelMarcialis

Hey, @mbondyra. Those focus changes we discussed look great! Well done.

I've left two small review comments for your attention. Additionally, I was wondering if it would be possible for you to change the size props for the current EuiSpacer components that appear before and after the .lnsLayerPanel__row elements from s to m? Doing so will better match the provided designs.

Otherwise, this looks good from my perspective once these comments are addressed. Thanks so much!

x-pack/plugins/lens/public/drag_drop/drag_drop.scss

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss

MichaelMarcialis

Hey, @mbondyra. Thanks for making those changes. This looks great.

I noticed one last issue when dragging items within a dimension. The white background of the element being dragged doesn't appear to have a border-radius to match the rounded corners shown on the dashed border, as shown in the gif below. It's a super minor thing, but mentioning it in case it's a quick fix.

Aside from that, this looks good from my perspective. Approving.

wylieconlon

LGTM, tested again and it looks ready to me

…_to_reorder

kibanamachine · 2020-11-03T18:19:41Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 5e220b8

Metrics [docs]

async chunks size

id	before	after	diff
`lens`	1.0MB	1.0MB	+16.4KB

History

💚 Build #85457 succeeded f2f19e4
💚 Build #85248 succeeded 14625f1
💔 Build #85137 failed c9c6651
💔 Build #85065 failed f754fd4
💚 Build #84820 succeeded cac17f1

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

mbondyra force-pushed the lens/dnd_to_reorder branch 3 times, most recently from 411d2b7 to 65a8695 Compare October 16, 2020 13:40

mbondyra added v7.11.0 v8.0.0 enhancement New value added to drive a business result Feature:Lens Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Oct 16, 2020

mbondyra changed the title ~~[Lens] drag and drop to reorder~~ [Lens] Drag within dimension group to reorder Oct 16, 2020

mbondyra force-pushed the lens/dnd_to_reorder branch 6 times, most recently from dfc2172 to e9de46e Compare October 19, 2020 15:05

elastic deleted a comment from kibanamachine Oct 19, 2020

mbondyra added 3 commits October 19, 2020 17:29

feat: dnd to reorder

ebbf9c9

tests for droppable

a1e0827

test for layer_panel

e7c0070

mbondyra force-pushed the lens/dnd_to_reorder branch from e9de46e to e7c0070 Compare October 19, 2020 15:31

mbondyra added 2 commits October 19, 2020 19:06

tests

029e3c8

fixes

3d6671b

mbondyra force-pushed the lens/dnd_to_reorder branch from b56f8a3 to 3d6671b Compare October 19, 2020 18:38

mbondyra requested a review from cchaos October 19, 2020 18:38

elastic deleted a comment from kibanamachine Oct 19, 2020

Update drag_drop.tsx

d19edb2

cchaos reviewed Oct 19, 2020

View reviewed changes

x-pack/plugins/lens/public/drag_drop/drag_drop.scss Outdated Show resolved Hide resolved

x-pack/plugins/lens/public/drag_drop/drag_drop.scss Outdated Show resolved Hide resolved

x-pack/plugins/lens/public/drag_drop/drag_drop.scss Outdated Show resolved Hide resolved

mbondyra marked this pull request as ready for review October 20, 2020 07:37

mbondyra requested a review from a team October 20, 2020 07:37

mbondyra requested a review from a team as a code owner October 20, 2020 07:37

removing dead code

9be0338

flash1293 approved these changes Oct 30, 2020

View reviewed changes

x-pack/plugins/lens/public/types.ts Show resolved Hide resolved

doc description

cac17f1

mbondyra force-pushed the lens/dnd_to_reorder branch from 54d2004 to cac17f1 Compare October 30, 2020 12:47

mbondyra requested review from cchaos, wylieconlon and dej611 October 30, 2020 12:49

wylieconlon reviewed Oct 30, 2020

View reviewed changes

mbondyra added 3 commits November 2, 2020 10:01

CR corrections

f754fd4

design changes

c35d414

eslint

878384e

mbondyra force-pushed the lens/dnd_to_reorder branch from 4f4a1f4 to 878384e Compare November 2, 2020 12:50

kibanamachine and others added 2 commits November 2, 2020 07:51

Merge branch 'master' into lens/dnd_to_reorder

c9c6651

no message

14625f1

MichaelMarcialis requested changes Nov 3, 2020

View reviewed changes

x-pack/plugins/lens/public/drag_drop/drag_drop.scss Outdated Show resolved Hide resolved

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss Show resolved Hide resolved

visual changes in the code

f2f19e4

mbondyra requested review from MichaelMarcialis and wylieconlon November 3, 2020 11:15

mbondyra mentioned this pull request Nov 3, 2020

[Lens] Dimension Panel: Keyboard reorder doesn't update accessibility focus #82417

Closed

MichaelMarcialis approved these changes Nov 3, 2020

View reviewed changes

wylieconlon approved these changes Nov 3, 2020

View reviewed changes

Merge commit 'c974f56e1ca9ddd0c5f0460fd2737ae8c580716f' into lens/dnd…

5e220b8

…_to_reorder

mbondyra merged commit 6689167 into elastic:master Nov 3, 2020

mbondyra deleted the lens/dnd_to_reorder branch November 3, 2020 20:18

mbondyra added a commit to mbondyra/kibana that referenced this pull request Nov 3, 2020

[Lens] Drag within dimension group to reorder (elastic#80547)

71000c4

mbondyra mentioned this pull request Nov 3, 2020

[7.x] [Lens] Drag within dimension group to reorder (#80547) #82500

Merged

mbondyra added a commit that referenced this pull request Nov 4, 2020

[Lens] Drag within dimension group to reorder (#80547) (#82500)

2103911

MichaelMarcialis mentioned this pull request Nov 10, 2020

[Lens] Color in dimension trigger #76871

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Drag within dimension group to reorder #80547

[Lens] Drag within dimension group to reorder #80547

mbondyra commented Oct 14, 2020 •

edited

Loading

cchaos left a comment

flash1293 left a comment

wylieconlon left a comment

wylieconlon Oct 30, 2020

mbondyra commented Nov 2, 2020

MichaelMarcialis left a comment

MichaelMarcialis left a comment

wylieconlon left a comment

kibanamachine commented Nov 3, 2020

[Lens] Drag within dimension group to reorder #80547

[Lens] Drag within dimension group to reorder #80547

Conversation

mbondyra commented Oct 14, 2020 • edited Loading

Summary

Accessibility

Checklist

cchaos left a comment

Choose a reason for hiding this comment

flash1293 left a comment

Choose a reason for hiding this comment

wylieconlon left a comment

Choose a reason for hiding this comment

wylieconlon Oct 30, 2020

Choose a reason for hiding this comment

mbondyra commented Nov 2, 2020

MichaelMarcialis left a comment

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

wylieconlon left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 3, 2020

💚 Build Succeeded

Metrics [docs]

async chunks size

History

mbondyra commented Oct 14, 2020 •

edited

Loading