From a547dcb73ef57861d41d46bbfe309cdef97d5b54 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Wed, 18 Aug 2021 18:39:05 +0200 Subject: [PATCH] fix(explore): reordering columns with dnd sometimes glitching (#16322) * fix(explore): reordering columns with dnd sometimes glitching * Fix metrics and filters popover being stale after reordering --- .../DndColumnSelectControl/DndFilterSelect.tsx | 1 - .../DndColumnSelectControl/DndMetricSelect.tsx | 1 - .../DndColumnSelectControl/OptionWrapper.tsx | 18 +++++++----------- .../FilterControl/AdhocFilterControl/index.jsx | 1 - .../AdhocFilterPopoverTrigger/index.tsx | 3 +-- .../AdhocMetricPopoverTrigger.tsx | 3 +-- .../controls/MetricControl/MetricsControl.jsx | 1 - 7 files changed, 9 insertions(+), 19 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx index 97842f5bb..a9e327bfd 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx @@ -401,7 +401,6 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => { visible={newFilterPopoverVisible} togglePopover={togglePopover} closePopover={closePopover} - createNew >
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx index 5967f33c3..8f3850525 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx @@ -378,7 +378,6 @@ export const DndMetricSelect = (props: any) => { visible={newMetricPopoverVisible} togglePopover={togglePopover} closePopover={closePopover} - createNew >
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx index 485919099..fc2399e81 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useMemo, useRef } from 'react'; +import React, { useRef } from 'react'; import { useDrag, useDrop, @@ -63,15 +63,11 @@ export default function OptionWrapper( const ref = useRef(null); const labelRef = useRef(null); - const item: OptionItemInterface = useMemo( - () => ({ - dragIndex: index, - type, - }), - [index, type], - ); const [{ isDragging }, drag] = useDrag({ - item, + item: { + type, + dragIndex: index, + }, collect: (monitor: DragSourceMonitor) => ({ isDragging: monitor.isDragging(), }), @@ -99,8 +95,8 @@ export default function OptionWrapper( // Determine mouse position const clientOffset = monitor.getClientOffset(); // Get pixels to the top - const hoverClientY = clientOffset?.y - ? clientOffset?.y - hoverBoundingRect.top + const hoverClientY = clientOffset + ? 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% diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx index edadc2a89..414745467 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx @@ -329,7 +329,6 @@ class AdhocFilterControl extends React.Component { options={this.state.options} onFilterEdit={this.onNewFilter} partitionColumn={this.state.partitionColumn} - createNew > {trigger} diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx index 530c1bb4f..e64778631 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx @@ -29,7 +29,6 @@ interface AdhocFilterPopoverTriggerProps { datasource: Record; onFilterEdit: (editedFilter: AdhocFilter) => void; partitionColumn?: string; - createNew?: boolean; isControlledComponent?: boolean; visible?: boolean; togglePopover?: (visible: boolean) => void; @@ -104,7 +103,7 @@ class AdhocFilterPopoverTrigger extends React.PureComponent< defaultVisible={visible} visible={visible} onVisibleChange={togglePopover} - destroyTooltipOnHide={this.props.createNew} + destroyTooltipOnHide > {this.props.children} diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx index e3f4e250e..2b3b55779 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx @@ -35,7 +35,6 @@ export type AdhocMetricPopoverTriggerProps = { savedMetric: savedMetricType; datasourceType: string; children: ReactNode; - createNew?: boolean; isControlledComponent?: boolean; visible?: boolean; togglePopover?: (visible: boolean) => void; @@ -232,7 +231,7 @@ class AdhocMetricPopoverTrigger extends React.PureComponent< visible={visible} onVisibleChange={togglePopover} title={popoverTitle} - destroyTooltipOnHide={this.props.createNew} + destroyTooltipOnHide > {this.props.children} diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx index 9e35d1de8..4e4925b9c 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx @@ -236,7 +236,6 @@ const MetricsControl = ({ datasource={datasource} savedMetric={emptySavedMetric} datasourceType={datasourceType} - createNew > {trigger}