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

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
       >
         <div />
       </AdhocFilterPopoverTrigger>

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
       >
         <div />
       </AdhocMetricPopoverTrigger>

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<HTMLDivElement>(null);
   const labelRef = useRef<HTMLDivElement>(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%

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}
       </AdhocFilterPopoverTrigger>

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx

@@ -29,7 +29,6 @@ interface AdhocFilterPopoverTriggerProps {
   datasource: Record<string, any>;
   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}
       </Popover>

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}
       </Popover>

superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx

@@ -236,7 +236,6 @@ const MetricsControl = ({
           datasource={datasource}
           savedMetric={emptySavedMetric}
           datasourceType={datasourceType}
-          createNew
         >
           {trigger}
         </AdhocMetricPopoverTrigger>