Skip to content

Commit

Permalink
[Lens] Drag and drop performance improvements (#91641) (#92122)
Browse files Browse the repository at this point in the history
  • Loading branch information
mbondyra authored Feb 21, 2021
1 parent d9828c2 commit 90fc153
Show file tree
Hide file tree
Showing 22 changed files with 694 additions and 742 deletions.
3 changes: 3 additions & 0 deletions x-pack/plugins/lens/public/drag_drop/drag_drop.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@
.lnsDragDrop-isDropTarget {
@include lnsDroppable;
@include lnsDroppableActive;
> * {
pointer-events: none;
}
}

.lnsDragDrop-isActiveGroup {
Expand Down
82 changes: 35 additions & 47 deletions x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
ReorderProvider,
DragDropIdentifier,
DraggingIdentifier,
DropTargets,
DropIdentifier,
} from './providers';
import { act } from 'react-dom/test-utils';
import { DropType } from '../types';
Expand All @@ -32,6 +32,7 @@ describe('DragDrop', () => {
setDragging: jest.fn(),
setActiveDropTarget: jest.fn(),
activeDropTarget: undefined,
dropTargetsByOrder: undefined,
keyboardMode: false,
setKeyboardMode: () => {},
setA11yMessage: jest.fn(),
Expand Down Expand Up @@ -255,11 +256,10 @@ describe('DragDrop', () => {
dragging = { id: '1', humanData: { label: 'Label1' } };
}}
setActiveDropTarget={setActiveDropTarget}
activeDropTarget={
({ activeDropTarget: value } as unknown) as DragContextState['activeDropTarget']
}
activeDropTarget={value as DragContextState['activeDropTarget']}
keyboardMode={false}
setKeyboardMode={(keyboardMode) => true}
dropTargetsByOrder={undefined}
registerDropTarget={jest.fn()}
>
<DragDrop
Expand Down Expand Up @@ -349,12 +349,10 @@ describe('DragDrop', () => {
dragging: { ...items[0].value, ghost: { children: <div />, style: {} } },
setActiveDropTarget,
setA11yMessage,
activeDropTarget: {
activeDropTarget: { ...items[1].value, onDrop, dropType: 'move_compatible' },
dropTargetsByOrder: {
'2,0,1,0': { ...items[1].value, onDrop, dropType: 'move_compatible' },
'2,0,2,0': { ...items[2].value, onDrop, dropType: 'replace_compatible' },
},
activeDropTarget: { ...items[1].value, onDrop, dropType: 'move_compatible' },
dropTargetsByOrder: {
'2,0,1,0': { ...items[1].value, onDrop, dropType: 'move_compatible' },
'2,0,2,0': { ...items[2].value, onDrop, dropType: 'replace_compatible' },
},
keyboardMode: true,
}}
Expand Down Expand Up @@ -463,11 +461,9 @@ describe('DragDrop', () => {
dragging: { ...items[0].value, ghost: { children: <div>Hello</div>, style: {} } },
setActiveDropTarget,
setA11yMessage,
activeDropTarget: {
activeDropTarget: { ...items[1].value, onDrop, dropType: 'move_compatible' },
dropTargetsByOrder: {
'2,0,1,0': { ...items[1].value, onDrop, dropType: 'move_compatible' },
},
activeDropTarget: { ...items[1].value, onDrop, dropType: 'move_compatible' },
dropTargetsByOrder: {
'2,0,1,0': { ...items[1].value, onDrop, dropType: 'move_compatible' },
},
keyboardMode: true,
}}
Expand Down Expand Up @@ -525,11 +521,12 @@ describe('DragDrop', () => {
keyboardMode = mode;
}),
setActiveDropTarget: (target?: DragDropIdentifier) => {
activeDropTarget = { activeDropTarget: target } as DropTargets;
activeDropTarget = target as DropIdentifier;
},
activeDropTarget,
setA11yMessage,
registerDropTarget,
dropTargetsByOrder: undefined,
};

const dragDropSharedProps = {
Expand Down Expand Up @@ -665,13 +662,11 @@ describe('DragDrop', () => {
const component = mountComponent({
dragging: { ...items[0] },
keyboardMode: true,
activeDropTarget: {
activeDropTarget: undefined,
dropTargetsByOrder: {
'2,0,0': undefined,
'2,0,1': { ...items[1], onDrop, dropType: 'reorder' },
'2,0,2': { ...items[2], onDrop, dropType: 'reorder' },
},
activeDropTarget: undefined,
dropTargetsByOrder: {
'2,0,0': undefined,
'2,0,1': { ...items[1], onDrop, dropType: 'reorder' },
'2,0,2': { ...items[2], onDrop, dropType: 'reorder' },
},
setActiveDropTarget,
setA11yMessage,
Expand All @@ -693,15 +688,12 @@ describe('DragDrop', () => {
test(`Keyboard navigation: user can drop element to an activeDropTarget`, () => {
const component = mountComponent({
dragging: { ...items[0] },
activeDropTarget: {
activeDropTarget: { ...items[2], dropType: 'reorder', onDrop },
dropTargetsByOrder: {
'2,0,0': { ...items[0], onDrop, dropType: 'reorder' },
'2,0,1': { ...items[1], onDrop, dropType: 'reorder' },
'2,0,2': { ...items[2], onDrop, dropType: 'reorder' },
},
activeDropTarget: { ...items[2], dropType: 'reorder', onDrop },
dropTargetsByOrder: {
'2,0,0': { ...items[0], onDrop, dropType: 'reorder' },
'2,0,1': { ...items[1], onDrop, dropType: 'reorder' },
'2,0,2': { ...items[2], onDrop, dropType: 'reorder' },
},

keyboardMode: true,
});
const keyboardHandler = component
Expand Down Expand Up @@ -747,13 +739,11 @@ describe('DragDrop', () => {
const component = mountComponent({
dragging: { ...items[0] },
keyboardMode: true,
activeDropTarget: {
activeDropTarget: undefined,
dropTargetsByOrder: {
'2,0,0': undefined,
'2,0,1': { ...items[1], onDrop, dropType: 'reorder' },
'2,0,2': { ...items[2], onDrop, dropType: 'reorder' },
},
activeDropTarget: undefined,
dropTargetsByOrder: {
'2,0,0': undefined,
'2,0,1': { ...items[1], onDrop, dropType: 'reorder' },
'2,0,2': { ...items[2], onDrop, dropType: 'reorder' },
},
setA11yMessage,
});
Expand Down Expand Up @@ -799,15 +789,13 @@ describe('DragDrop', () => {
{...defaultContext}
keyboardMode={true}
activeDropTarget={{
activeDropTarget: {
...items[1],
onDrop,
dropType: 'reorder',
},
dropTargetsByOrder: {
'2,0,1,0': undefined,
'2,0,1,1': { ...items[1], onDrop, dropType: 'reorder' },
},
...items[1],
onDrop,
dropType: 'reorder',
}}
dropTargetsByOrder={{
'2,0,1,0': undefined,
'2,0,1,1': { ...items[1], onDrop, dropType: 'reorder' },
}}
dragging={{ ...items[0] }}
setActiveDropTarget={setActiveDropTarget}
Expand Down
Loading

0 comments on commit 90fc153

Please sign in to comment.