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

This commit is contained in:
Kamil Gabryjelski
2021-01-29 03:34:56 +01:00
committed by GitHub
parent 34549cb5b7
commit fcaa0acad5
31 changed files with 200 additions and 332 deletions

View File

@@ -8847,6 +8847,21 @@
"react-lifecycles-compat": "^3.0.4"
}
},
"@react-dnd/asap": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
"integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
},
"@react-dnd/invariant": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
"integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw=="
},
"@react-dnd/shallowequal": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
"integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg=="
},
"@scarf/scarf": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.0.6.tgz",
@@ -28253,11 +28268,6 @@
"integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
"dev": true
},
"disposables": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/disposables/-/disposables-1.0.2.tgz",
"integrity": "sha1-NsamdEdfVaLWkTVnpgFETkh7S24="
},
"distributions": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/distributions/-/distributions-1.1.0.tgz",
@@ -28266,30 +28276,6 @@
"mathfn": "^1.0.0"
}
},
"dnd-core": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-2.6.0.tgz",
"integrity": "sha1-ErrWbVh0LG5ffPKUP7aFlED4CcQ=",
"requires": {
"asap": "^2.0.6",
"invariant": "^2.0.0",
"lodash": "^4.2.0",
"redux": "^3.7.1"
},
"dependencies": {
"redux": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
"integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
"requires": {
"lodash": "^4.2.1",
"lodash-es": "^4.2.1",
"loose-envify": "^1.1.0",
"symbol-observable": "^1.0.3"
}
}
}
},
"dns-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -31264,7 +31250,7 @@
"dependencies": {
"core-js": {
"version": "1.2.7",
"resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
}
}
@@ -45859,31 +45845,46 @@
}
},
"react-dnd": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-2.6.0.tgz",
"integrity": "sha1-f6JWds+CfViokSk+PBq1naACVFo=",
"version": "11.1.3",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz",
"integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==",
"requires": {
"disposables": "^1.0.1",
"dnd-core": "^2.6.0",
"hoist-non-react-statics": "^2.1.0",
"invariant": "^2.1.0",
"lodash": "^4.2.0",
"prop-types": "^15.5.10"
"@react-dnd/shallowequal": "^2.0.0",
"@types/hoist-non-react-statics": "^3.3.1",
"dnd-core": "^11.1.3",
"hoist-non-react-statics": "^3.3.0"
},
"dependencies": {
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
"dnd-core": {
"version": "11.1.3",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz",
"integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==",
"requires": {
"@react-dnd/asap": "^4.0.0",
"@react-dnd/invariant": "^2.0.0",
"redux": "^4.0.4"
}
}
}
},
"react-dnd-html5-backend": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-2.6.0.tgz",
"integrity": "sha1-WQzRzKeEQbsnTt1XH+9MCxbdz44=",
"version": "11.1.3",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz",
"integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==",
"requires": {
"lodash": "^4.2.0"
"dnd-core": "^11.1.3"
},
"dependencies": {
"dnd-core": {
"version": "11.1.3",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz",
"integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==",
"requires": {
"@react-dnd/asap": "^4.0.0",
"@react-dnd/invariant": "^2.0.0",
"redux": "^4.0.4"
}
}
}
},
"react-docgen": {

View File

@@ -106,7 +106,6 @@
"d3-array": "^1.2.4",
"d3-color": "^1.2.0",
"d3-scale": "^2.1.2",
"dnd-core": "^2.6.0",
"dom-to-image": "^2.6.0",
"fontsource-fira-code": "^3.0.5",
"fontsource-inter": "^3.0.5",
@@ -138,8 +137,8 @@
"react-checkbox-tree": "^1.5.1",
"react-color": "^2.13.8",
"react-datetime": "^3.0.4",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",
"react-dom": "^16.13.0",
"react-gravatar": "^2.6.1",
"react-hot-loader": "^4.12.20",

View File

@@ -1,45 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import getDragDropManager from 'src/dashboard/util/getDragDropManager';
// A helper component that provides a DragDropContext for components that require it
class WithDragDropContext extends React.Component {
getChildContext() {
return {
dragDropManager: this.context.dragDropManager || getDragDropManager(),
};
}
render() {
return this.props.children;
}
}
WithDragDropContext.propTypes = {
children: PropTypes.node.isRequired,
};
WithDragDropContext.childContextTypes = {
dragDropManager: PropTypes.object.isRequired,
};
export default WithDragDropContext;

View File

@@ -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,

View File

@@ -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,

View File

@@ -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,

View File

@@ -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;
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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,

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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 };
}

View File

@@ -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();
});
});

View File

@@ -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', () => {

View File

@@ -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 };
}

View File

@@ -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);

View File

@@ -20,7 +20,8 @@ import { hot } from 'react-hot-loader/root';
import React from 'react';
import { Provider } from 'react-redux';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DynamicPluginProvider } from 'src/components/DynamicPlugins';
import setupApp from '../setup/setupApp';
import setupPlugins from '../setup/setupPlugins';
@@ -31,11 +32,13 @@ setupPlugins();
const App = ({ store }) => (
<Provider store={store}>
<ThemeProvider theme={supersetTheme}>
<DynamicPluginProvider>
<DashboardContainer />
</DynamicPluginProvider>
</ThemeProvider>
<DndProvider backend={HTML5Backend}>
<ThemeProvider theme={supersetTheme}>
<DynamicPluginProvider>
<DashboardContainer />
</DynamicPluginProvider>
</ThemeProvider>
</DndProvider>
</Provider>
);

View File

@@ -37,7 +37,6 @@ import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
import ToastPresenter from 'src/messageToasts/containers/ToastPresenter';
import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
import getDragDropManager from 'src/dashboard/util/getDragDropManager';
import findTabIndexByComponentId from 'src/dashboard/util/findTabIndexByComponentId';
import getDirectPathToTabIndex from 'src/dashboard/util/getDirectPathToTabIndex';
@@ -161,12 +160,6 @@ class DashboardBuilder extends React.Component {
);
}
getChildContext() {
return {
dragDropManager: this.context.dragDropManager || getDragDropManager(),
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
const nextFocusComponent = getLeafComponentIdFromPath(
nextProps.directPathToChild,

View File

@@ -155,6 +155,6 @@ UnwrappedDragDroppable.defaultProps = defaultProps;
// note that the composition order here determines using
// component.method() vs decoratedComponentInstance.method() in the drag/drop config
export default DropTarget(...dropConfig)(
DragSource(...dragConfig)(UnwrappedDragDroppable),
export default DragSource(...dragConfig)(
DropTarget(...dropConfig)(UnwrappedDragDroppable),
);

View File

@@ -55,22 +55,17 @@ export const dropConfig = [
TYPE,
{
hover(props, monitor, component) {
if (
component &&
component.decoratedComponentInstance &&
component.decoratedComponentInstance.mounted
) {
handleHover(props, monitor, component.decoratedComponentInstance);
if (component && component.mounted) {
handleHover(props, monitor, component);
}
},
// note:
// the react-dnd api requires that the drop() method return a result or undefined
// monitor.didDrop() cannot be used because it returns true only for the most-nested target
drop(props, monitor, component) {
const Component = component.decoratedComponentInstance;
const dropResult = monitor.getDropResult();
if ((!dropResult || !dropResult.destination) && Component.mounted) {
return handleDrop(props, monitor, Component);
if ((!dropResult || !dropResult.destination) && component.mounted) {
return handleDrop(props, monitor, component);
}
return undefined;
},

View File

@@ -1,35 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { DragDropManager } from 'dnd-core';
import HTML5Backend from 'react-dnd-html5-backend';
let defaultManager;
// we use this method to ensure that there is a singleton of the DragDropManager
// within the app this seems to work fine, but in tests multiple are initialized
// see this issue for more details https://github.com/react-dnd/react-dnd/issues/186
// @TODO re-evaluate whether this is required when we move to jest
// the alternative is simply using an HOC like:
// DragDropContext(HTML5Backend)(DashboardBuilder);
export default function getDragDropManager() {
if (!defaultManager) {
defaultManager = new DragDropManager(HTML5Backend);
}
return defaultManager;
}

View File

@@ -19,6 +19,8 @@
import React from 'react';
import { hot } from 'react-hot-loader/root';
import { Provider } from 'react-redux';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import { DynamicPluginProvider } from 'src/components/DynamicPlugins';
import ToastPresenter from '../messageToasts/containers/ToastPresenter';
@@ -33,12 +35,14 @@ setupPlugins();
const App = ({ store }) => (
<Provider store={store}>
<ThemeProvider theme={supersetTheme}>
<DynamicPluginProvider>
<ExploreViewContainer />
<ToastPresenter />
</DynamicPluginProvider>
</ThemeProvider>
<DndProvider backend={HTML5Backend}>
<ThemeProvider theme={supersetTheme}>
<DynamicPluginProvider>
<ExploreViewContainer />
<ToastPresenter />
</DynamicPluginProvider>
</ThemeProvider>
</DndProvider>
</Provider>
);

View File

@@ -1,23 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// TODO: convert to .ts after we upgrade react-dnd
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
export default DragDropContext(HTML5Backend);

View File

@@ -16,19 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { findDOMNode } from 'react-dom';
// Current version of react-dnd (2.5.4) doesn't work well with typescript
// TODO: remove ts-ignore after we upgrade react-dnd
// @ts-ignore
import { DragSource, DropTarget } from 'react-dnd';
import React, { useRef } from 'react';
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
import { styled, useTheme } from '@superset-ui/core';
import { ColumnOption } from '@superset-ui/chart-controls';
import Icon from 'src/components/Icon';
import { savedMetricType } from 'src/explore/components/controls/MetricControl/types';
const TYPE = 'label-dnd';
const DragContainer = styled.div`
margin-bottom: ${({ theme }) => theme.gridUnit}px;
:last-child {
@@ -128,93 +122,90 @@ export const AddIconButton = styled.button`
}
`;
const labelSource = {
beginDrag({ index, type }: { index: number; type: string }) {
return {
index,
type,
};
},
};
const labelTarget = {
hover(props: Record<string, any>, monitor: any, component: any) {
const { index: dragIndex, type: dragType } = monitor.getItem();
const { index: hoverIndex, type: hoverType } = props;
// Don't replace items with themselves
// Don't allow to drag items between filters and metrics boxes
if (dragIndex === hoverIndex || dragType !== hoverType) {
return;
}
// Determine rectangle on screen
// TODO: refactor with references when we upgrade react-dnd
// For now we disable warnings about findDOMNode, but we should refactor after we upgrade react-dnd
// Current version (2.5.4) doesn't work well with refs
// @ts-ignore
// eslint-disable-next-line react/no-find-dom-node
const hoverBoundingRect = findDOMNode(component)?.getBoundingClientRect();
// Get vertical middle
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
// Determine mouse position
const clientOffset = monitor.getClientOffset();
// Get pixels to the top
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return;
}
// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return;
}
// Time to actually perform the action
props.onMoveLabel?.(dragIndex, hoverIndex);
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
// eslint-disable-next-line no-param-reassign
monitor.getItem().index = hoverIndex;
},
drop(props: Record<string, any>) {
return props.onDropLabel?.();
},
};
interface DragItem {
index: number;
type: string;
}
export const OptionControlLabel = ({
label,
savedMetric,
onRemove,
onMoveLabel,
onDropLabel,
isAdhoc,
isFunction,
isDraggable,
connectDragSource,
connectDropTarget,
type,
index,
...props
}: {
label: string | React.ReactNode;
savedMetric?: savedMetricType;
onRemove: () => void;
onMoveLabel: (dragIndex: number, hoverIndex: number) => void;
onDropLabel: () => void;
isAdhoc?: boolean;
isFunction?: boolean;
isDraggable?: boolean;
connectDragSource?: any;
connectDropTarget?: any;
type: string;
index: number;
}) => {
const theme = useTheme();
const ref = useRef<HTMLDivElement>(null);
const [, drop] = useDrop({
accept: type,
drop() {
onDropLabel?.();
},
hover(item: DragItem, monitor: DropTargetMonitor) {
if (!ref.current) {
return;
}
const dragIndex = item.index;
const hoverIndex = index;
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return;
}
// Determine rectangle on screen
const hoverBoundingRect = ref.current?.getBoundingClientRect();
// Get vertical middle
const hoverMiddleY =
(hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
// Determine mouse position
const clientOffset = monitor.getClientOffset();
// Get pixels to the top
const hoverClientY = clientOffset?.y
? clientOffset?.y - hoverBoundingRect.top
: 0;
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return;
}
// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return;
}
// Time to actually perform the action
onMoveLabel?.(dragIndex, hoverIndex);
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
// eslint-disable-next-line no-param-reassign
item.index = hoverIndex;
},
});
const [, drag] = useDrag({
item: { type, index },
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
});
const getLabelContent = () => {
if (savedMetric?.metric_name) {
// add column_name to fix typescript error
@@ -252,28 +243,6 @@ export const OptionControlLabel = ({
</OptionControlContainer>
);
return (
<DragContainer>
{isDraggable
? connectDragSource(
connectDropTarget(<div>{getOptionControlContent()}</div>),
)
: getOptionControlContent()}
</DragContainer>
);
drag(drop(ref));
return <DragContainer ref={ref}>{getOptionControlContent()}</DragContainer>;
};
export const DraggableOptionControlLabel = DropTarget(
TYPE,
labelTarget,
(connect: any) => ({
connectDropTarget: connect.dropTarget(),
}),
)(
DragSource(TYPE, labelSource, (connect: any) => ({
connectDragSource: connect.dragSource(),
isDraggable: true,
}))(OptionControlLabel),
);
DraggableOptionControlLabel.displayName = 'DraggableOptionControlLabel';

View File

@@ -34,7 +34,6 @@ import {
LabelsContainer,
} from 'src/explore/components/OptionControls';
import Icon from 'src/components/Icon';
import DndWithHTML5Backend from 'src/explore/DndContextProvider';
import AdhocFilterPopoverTrigger from './AdhocFilterPopoverTrigger';
import AdhocFilterOption from './AdhocFilterOption';
import AdhocFilter, { CLAUSES, EXPRESSION_TYPES } from './AdhocFilter';
@@ -362,4 +361,4 @@ class AdhocFilterControl extends React.Component {
AdhocFilterControl.propTypes = propTypes;
AdhocFilterControl.defaultProps = defaultProps;
export default DndWithHTML5Backend(withTheme(AdhocFilterControl));
export default withTheme(AdhocFilterControl);

View File

@@ -20,7 +20,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import columnType from 'src/explore/propTypes/columnType';
import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
import { DraggableOptionControlLabel } from 'src/explore/components/OptionControls';
import { OptionControlLabel } from 'src/explore/components/OptionControls';
import { OPTION_TYPES } from 'src/explore/components/optionTypes';
import AdhocFilterPopoverTrigger from './AdhocFilterPopoverTrigger';
import AdhocFilter from './AdhocFilter';
@@ -61,7 +61,7 @@ const AdhocFilterOption = ({
onFilterEdit={onFilterEdit}
partitionColumn={partitionColumn}
>
<DraggableOptionControlLabel
<OptionControlLabel
label={adhocFilter.getDefaultLabel()}
onRemove={onRemoveFilter}
onMoveLabel={onMoveLabel}

View File

@@ -20,7 +20,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'src/common/components/Tooltip';
import columnType from 'src/explore/propTypes/columnType';
import { DraggableOptionControlLabel } from 'src/explore/components/OptionControls';
import { OptionControlLabel } from 'src/explore/components/OptionControls';
import { OPTION_TYPES } from 'src/explore/components/optionTypes';
import AdhocMetric from './AdhocMetric';
import savedMetricType from './savedMetricType';
@@ -75,7 +75,7 @@ class AdhocMetricOption extends React.PureComponent {
placement="top"
title={savedMetric.expression || adhocMetric.label}
>
<DraggableOptionControlLabel
<OptionControlLabel
savedMetric={savedMetric}
label={adhocMetric.label}
onRemove={this.onRemoveMetric}

View File

@@ -19,7 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import columnType from 'src/explore/propTypes/columnType';
import { DraggableOptionControlLabel } from 'src/explore/components/OptionControls';
import { OptionControlLabel } from 'src/explore/components/OptionControls';
import { OPTION_TYPES } from 'src/explore/components/optionTypes';
import AdhocMetricOption from './AdhocMetricOption';
import AdhocMetric from './AdhocMetric';
@@ -83,7 +83,7 @@ export default function MetricDefinitionValue({
}
if (typeof option === 'string') {
return (
<DraggableOptionControlLabel
<OptionControlLabel
label={option}
onRemove={onRemoveMetric}
onMoveLabel={onMoveLabel}

View File

@@ -34,7 +34,6 @@ import {
HeaderContainer,
LabelsContainer,
} from 'src/explore/components/OptionControls';
import DndWithHTML5Backend from 'src/explore/DndContextProvider';
import MetricDefinitionOption from './MetricDefinitionOption';
import MetricDefinitionValue from './MetricDefinitionValue';
import AdhocMetric from './AdhocMetric';
@@ -411,4 +410,4 @@ class MetricsControl extends React.PureComponent {
MetricsControl.propTypes = propTypes;
MetricsControl.defaultProps = defaultProps;
export default DndWithHTML5Backend(withTheme(MetricsControl));
export default withTheme(MetricsControl);