diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 394bb7d183c8..6768a0f7bb54 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -23,6 +23,7 @@ "@deck.gl/mesh-layers": "~9.2.5", "@deck.gl/react": "~9.2.5", "@dnd-kit/core": "^6.3.1", + "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@emotion/cache": "^11.4.0", @@ -3041,6 +3042,20 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@dnd-kit/modifiers": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz", + "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==", + "license": "MIT", + "dependencies": { + "@dnd-kit/utilities": "^3.2.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@dnd-kit/core": "^6.3.0", + "react": ">=16.8.0" + } + }, "node_modules/@dnd-kit/sortable": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index e29796d314b0..c2e5c7921913 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -104,6 +104,7 @@ "@deck.gl/mesh-layers": "~9.2.5", "@deck.gl/react": "~9.2.5", "@dnd-kit/core": "^6.3.1", + "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@emotion/cache": "^11.4.0", @@ -133,16 +134,16 @@ "@superset-ui/legacy-plugin-chart-partition": "file:./plugins/legacy-plugin-chart-partition", "@superset-ui/legacy-plugin-chart-rose": "file:./plugins/legacy-plugin-chart-rose", "@superset-ui/legacy-plugin-chart-world-map": "file:./plugins/legacy-plugin-chart-world-map", - "@superset-ui/preset-chart-deckgl": "file:./plugins/preset-chart-deckgl", "@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3", "@superset-ui/plugin-chart-ag-grid-table": "file:./plugins/plugin-chart-ag-grid-table", "@superset-ui/plugin-chart-cartodiagram": "file:./plugins/plugin-chart-cartodiagram", "@superset-ui/plugin-chart-echarts": "file:./plugins/plugin-chart-echarts", - "@superset-ui/plugin-chart-point-cluster-map": "file:./plugins/plugin-chart-point-cluster-map", "@superset-ui/plugin-chart-handlebars": "file:./plugins/plugin-chart-handlebars", "@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table", + "@superset-ui/plugin-chart-point-cluster-map": "file:./plugins/plugin-chart-point-cluster-map", "@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table", "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud", + "@superset-ui/preset-chart-deckgl": "file:./plugins/preset-chart-deckgl", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", "@types/d3-format": "^3.0.1", "@types/d3-selection": "^3.0.11", diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx index 1bd518e95114..09cca7d7f837 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx @@ -134,6 +134,14 @@ test('Should have SortableDragger icon', async () => { expect(await screen.findByLabelText('Drag to reorder')).toBeVisible(); }); +test('Drag activator exposes aria-label="Drag to reorder"', async () => { + const props = createProps(); + render(); + const dragActivator = await screen.findByLabelText('Drag to reorder'); + expect(dragActivator).toHaveAttribute('aria-label', 'Drag to reorder'); + expect(dragActivator.tagName).toBe('BUTTON'); +}); + test('Should call Control component', async () => { const props = createProps(); render(); diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx index 0e33183e753c..deacd450c63e 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useCallback, useMemo } from 'react'; -import { IconTooltip, List } from '@superset-ui/core/components'; +import { Button, IconTooltip, List } from '@superset-ui/core/components'; import { nanoid } from 'nanoid'; import { t } from '@apache-superset/core/translation'; import { useTheme, type SupersetTheme } from '@apache-superset/core/theme'; @@ -27,14 +27,17 @@ import { useSensor, useSensors, PointerSensor, + KeyboardSensor, type DragEndEvent, } from '@dnd-kit/core'; import { SortableContext, verticalListSortingStrategy, useSortable, + sortableKeyboardCoordinates, arrayMove, } from '@dnd-kit/sortable'; +import { restrictToVerticalAxis } from '@dnd-kit/modifiers'; import { CSS } from '@dnd-kit/utilities'; import { Icons } from '@superset-ui/core/components/Icons'; import { @@ -68,8 +71,7 @@ interface CollectionControlProps { function DragHandle() { return ( @@ -93,8 +95,14 @@ function SortableItem({ onChangeItem, onRemoveItem, }: SortableItemProps) { - const { attributes, listeners, setNodeRef, transform, transition } = - useSortable({ id }); + const { + attributes, + listeners, + setNodeRef, + setActivatorNodeRef, + transform, + transition, + } = useSortable({ id }); const style = { transform: CSS.Transform.toString(transform), transition: transition ?? undefined, @@ -116,8 +124,17 @@ function SortableItem({ paddingInline: theme.sizeUnit * 6, })} > - - + +