chore: Upgrade react-dnd to 11.1.3 (#12815)

2026-04-18 23:55:00 +00:00 · 2021-01-29 03:34:56 +01:00
parent 34549cb5b7
commit fcaa0acad5
31 changed files with 200 additions and 332 deletions
--- a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
@@ -25,6 +25,8 @@ import { ParentSize } from '@vx/responsive';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { Sticky, StickyContainer } from 'react-sticky';
 import { TabContainer, TabContent, TabPane } from 'react-bootstrap';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import BuilderComponentPane from 'src/dashboard/components/BuilderComponentPane';
 import DashboardBuilder from 'src/dashboard/components/DashboardBuilder';
@@ -39,7 +41,6 @@ import {
 } from 'spec/fixtures/mockDashboardLayout';

 import { mockStore, mockStoreWithTabs } from 'spec/fixtures/mockStore';
-import WithDragDropContext from 'spec/helpers/WithDragDropContext';

 const dashboardLayout = undoableDashboardLayout.present;
 const layoutWithTabs = undoableDashboardLayoutWithTabs.present;
@@ -77,7 +78,7 @@ describe('DashboardBuilder', () => {
    return useProvider
      ? mount(
          <Provider store={store}>
-            <WithDragDropContext>{builder}</WithDragDropContext>
+            <DndProvider backend={HTML5Backend}>{builder}</DndProvider>
          </Provider>,
          {
            wrappingComponent: ThemeProvider,
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/ChartHolder_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/ChartHolder_spec.jsx
@@ -21,6 +21,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import Chart from 'src/dashboard/containers/Chart';
 import ChartHolder from 'src/dashboard/components/gridComponents/ChartHolder';
@@ -33,7 +35,6 @@ import { getMockStore } from 'spec/fixtures/mockStore';
 import { sliceId } from 'spec/fixtures/mockChartQueries';
 import dashboardInfo from 'spec/fixtures/mockDashboardInfo';
 import { dashboardLayout as mockLayout } from 'spec/fixtures/mockDashboardLayout';
-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
 import { sliceEntitiesForChart } from 'spec/fixtures/mockSliceEntities';

 describe('ChartHolder', () => {
@@ -65,9 +66,9 @@ describe('ChartHolder', () => {
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
      <Provider store={mockStore}>
-        <WithDragDropContext>
+        <DndProvider backend={HTML5Backend}>
          <ChartHolder {...props} {...overrideProps} />
-        </WithDragDropContext>
+        </DndProvider>
      </Provider>,
      {
        wrappingComponent: ThemeProvider,
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Column_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Column_spec.jsx
@@ -21,6 +21,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import BackgroundStyleDropdown from 'src/dashboard/components/menu/BackgroundStyleDropdown';
 import Column from 'src/dashboard/components/gridComponents/Column';
@@ -32,7 +34,6 @@ import IconButton from 'src/dashboard/components/IconButton';
 import ResizableContainer from 'src/dashboard/components/resizable/ResizableContainer';
 import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';

-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
 import { mockStore } from 'spec/fixtures/mockStore';
 import { dashboardLayout as mockLayout } from 'spec/fixtures/mockDashboardLayout';

@@ -66,9 +67,9 @@ describe('Column', () => {
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
      <Provider store={mockStore}>
-        <WithDragDropContext>
+        <DndProvider backend={HTML5Backend}>
          <Column {...props} {...overrideProps} />
-        </WithDragDropContext>
+        </DndProvider>
      </Provider>,
      {
        wrappingComponent: ThemeProvider,
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Divider_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Divider_spec.jsx
@@ -19,6 +19,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
 import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
@@ -30,8 +32,6 @@ import {
  DASHBOARD_GRID_TYPE,
 } from 'src/dashboard/util/componentTypes';

-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
-
 describe('Divider', () => {
  const props = {
    id: 'id',
@@ -49,9 +49,9 @@ describe('Divider', () => {
    // We have to wrap provide DragDropContext for the underlying DragDroppable
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
-      <WithDragDropContext>
+      <DndProvider backend={HTML5Backend}>
        <Divider {...props} {...overrideProps} />
-      </WithDragDropContext>,
+      </DndProvider>,
    );
    return wrapper;
  }
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Header_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Header_spec.jsx
@@ -20,6 +20,8 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
 import EditableTitle from 'src/components/EditableTitle';
@@ -33,7 +35,6 @@ import {
  DASHBOARD_GRID_TYPE,
 } from 'src/dashboard/util/componentTypes';

-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
 import { mockStoreWithTabs } from 'spec/fixtures/mockStore';

 describe('Header', () => {
@@ -56,9 +57,9 @@ describe('Header', () => {
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
      <Provider store={mockStoreWithTabs}>
-        <WithDragDropContext>
+        <DndProvider backend={HTML5Backend}>
          <Header {...props} {...overrideProps} />
-        </WithDragDropContext>
+        </DndProvider>
      </Provider>,
    );
    return wrapper;
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Markdown_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Markdown_spec.jsx
@@ -21,6 +21,9 @@ import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
 import ReactMarkdown from 'react-markdown';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
 import { act } from 'react-dom/test-utils';
 import { MarkdownEditor } from 'src/components/AsyncAceEditor';
 import Markdown from 'src/dashboard/components/gridComponents/Markdown';
@@ -31,7 +34,6 @@ import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
 import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
 import ResizableContainer from 'src/dashboard/components/resizable/ResizableContainer';

-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
 import { mockStore } from 'spec/fixtures/mockStore';
 import { dashboardLayout as mockLayout } from 'spec/fixtures/mockDashboardLayout';

@@ -63,9 +65,9 @@ describe('Markdown', () => {
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
      <Provider store={mockStore}>
-        <WithDragDropContext>
+        <DndProvider backend={HTML5Backend}>
          <Markdown {...props} {...overrideProps} />
-        </WithDragDropContext>
+        </DndProvider>
      </Provider>,
    );
    return wrapper;
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Row_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Row_spec.jsx
@@ -20,6 +20,8 @@ import { Provider } from 'react-redux';
 import React from 'react';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import BackgroundStyleDropdown from 'src/dashboard/components/menu/BackgroundStyleDropdown';
 import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
@@ -32,7 +34,6 @@ import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
 import { DASHBOARD_GRID_ID } from 'src/dashboard/util/constants';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';

-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
 import { mockStore } from 'spec/fixtures/mockStore';
 import { dashboardLayout as mockLayout } from 'spec/fixtures/mockDashboardLayout';

@@ -62,9 +63,9 @@ describe('Row', () => {
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
      <Provider store={mockStore}>
-        <WithDragDropContext>
+        <DndProvider backend={HTML5Backend}>
          <Row {...props} {...overrideProps} />
-        </WithDragDropContext>
+        </DndProvider>
      </Provider>,
      {
        wrappingComponent: ThemeProvider,
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx
@@ -20,6 +20,8 @@ import { Provider } from 'react-redux';
 import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
 import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
@@ -28,7 +30,6 @@ import Tab, {
  RENDER_TAB,
  RENDER_TAB_CONTENT,
 } from 'src/dashboard/components/gridComponents/Tab';
-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
 import { dashboardLayoutWithTabs } from 'spec/fixtures/mockDashboardLayout';
 import { mockStoreWithTabs } from 'spec/fixtures/mockStore';

@@ -63,9 +64,9 @@ describe('Tabs', () => {
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
      <Provider store={mockStoreWithTabs}>
-        <WithDragDropContext>
+        <DndProvider backend={HTML5Backend}>
          <Tab {...props} {...overrideProps} />
-        </WithDragDropContext>
+        </DndProvider>
      </Provider>,
    );
    return wrapper;
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tabs_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tabs_spec.jsx
@@ -20,6 +20,9 @@ import { Provider } from 'react-redux';
 import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
 import { LineEditableTabs } from 'src/common/components/Tabs';
 import { Modal } from 'src/common/components';
 import fetchMock from 'fetch-mock';
@@ -30,7 +33,6 @@ import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
 import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
 import Tabs from 'src/dashboard/components/gridComponents/Tabs';
 import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
-import WithDragDropContext from 'spec/helpers/WithDragDropContext';
 import { dashboardLayoutWithTabs } from 'spec/fixtures/mockDashboardLayout';
 import { mockStoreWithTabs } from 'spec/fixtures/mockStore';

@@ -64,9 +66,9 @@ describe('Tabs', () => {
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
      <Provider store={mockStoreWithTabs}>
-        <WithDragDropContext>
+        <DndProvider backend={HTML5Backend}>
          <Tabs {...props} {...overrideProps} />
-        </WithDragDropContext>
+        </DndProvider>
      </Provider>,
    );
    return wrapper;
--- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/new/DraggableNewComponent_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/new/DraggableNewComponent_spec.jsx
@@ -18,6 +18,8 @@
 */
 import React from 'react';
 import { mount } from 'enzyme';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
 import DraggableNewComponent from 'src/dashboard/components/gridComponents/new/DraggableNewComponent';
@@ -26,7 +28,6 @@ import {
  NEW_COMPONENT_SOURCE_TYPE,
  CHART_TYPE,
 } from 'src/dashboard/util/componentTypes';
-import WithDragDropContext from 'spec/helpers/WithDragDropContext';

 describe('DraggableNewComponent', () => {
  const props = {
@@ -40,9 +41,9 @@ describe('DraggableNewComponent', () => {
    // We have to wrap provide DragDropContext for the underlying DragDroppable
    // otherwise we cannot assert on DragDroppable children
    const wrapper = mount(
-      <WithDragDropContext>
+      <DndProvider backend={HTML5Backend}>
        <DraggableNewComponent {...props} {...overrideProps} />
-      </WithDragDropContext>,
+      </DndProvider>,
    );
    return wrapper;
  }
--- a/superset-frontend/spec/javascripts/explore/components/AdhocFilterControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/AdhocFilterControl_spec.jsx
@@ -71,7 +71,7 @@ function setup(overrides) {
    ...overrides,
  };
  const wrapper = shallow(<AdhocFilterControl {...props} />);
-  const component = wrapper.dive().dive().shallow();
+  const component = wrapper.dive().shallow();
  return { wrapper, component, onChange };
 }

--- a/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx
@@ -56,6 +56,6 @@ describe('AdhocFilterOption', () => {
    const popover = overlay.find(Popover);
    expect(popover).toHaveLength(1);
    expect(popover.props().defaultVisible).toBe(false);
-    expect(overlay.find('DraggableOptionControlLabel')).toExist();
+    expect(overlay.find('OptionControlLabel')).toExist();
  });
 });
--- a/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx
@@ -60,7 +60,7 @@ describe('AdhocMetricOption', () => {
  it('renders an overlay trigger wrapper for the label', () => {
    const { wrapper } = setup();
    expect(wrapper.find(Popover)).toExist();
-    expect(wrapper.find('DraggableOptionControlLabel')).toExist();
+    expect(wrapper.find('OptionControlLabel')).toExist();
  });

  it('overwrites the adhocMetric in state with onLabelChange', () => {
--- a/superset-frontend/spec/javascripts/explore/components/MetricsControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/MetricsControl_spec.jsx
@@ -55,7 +55,7 @@ function setup(overrides) {
    ...overrides,
  };
  const wrapper = shallow(<MetricsControl {...props} />);
-  const component = wrapper.dive().dive().shallow();
+  const component = wrapper.dive().shallow();
  return { wrapper, component, onChange };
 }

--- a/superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx
+++ b/superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx
@@ -120,9 +120,7 @@ describe('VerifiedMetricsControl', () => {
      onChange: mockOnChange,
    });

-    const child = wrapper.find(MetricsControl) as ReactWrapper<{
-      onChange: (str: string[]) => void;
-    }>;
+    const child = wrapper.find(MetricsControl);
    child.props().onChange(['abc']);

    expect(child.length).toBe(1);