feat: Implement drag & drop for metrics and filters labels (#12184)

superset-frontend/src/explore/components/controls/AdhocFilterControl.jsx

@@ -18,7 +18,6 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { t, logging, SupersetClient, withTheme } from '@superset-ui/core';
 
 import ControlHeader from '../ControlHeader';
@@ -39,6 +38,7 @@ import {
 } from '../OptionControls';
 import Icon from '../../../components/Icon';
 import AdhocFilterPopoverTrigger from '../AdhocFilterPopoverTrigger';
+import DndWithHTML5Backend from '../../DndContextProvider';
 
 const propTypes = {
   name: PropTypes.string,
@@ -75,6 +75,7 @@ class AdhocFilterControl extends React.Component {
     this.onRemoveFilter = this.onRemoveFilter.bind(this);
     this.onNewFilter = this.onNewFilter.bind(this);
     this.onFilterEdit = this.onFilterEdit.bind(this);
+    this.moveLabel = this.moveLabel.bind(this);
     this.onChange = this.onChange.bind(this);
     this.getMetricExpression = this.getMetricExpression.bind(this);
 
@@ -86,11 +87,14 @@ class AdhocFilterControl extends React.Component {
     this.valueRenderer = (adhocFilter, index) => (
       <AdhocFilterOption
         key={index}
+        index={index}
         adhocFilter={adhocFilter}
         onFilterEdit={this.onFilterEdit}
         options={this.state.options}
         datasource={this.props.datasource}
         onRemoveFilter={() => this.onRemoveFilter(index)}
+        onMoveLabel={this.moveLabel}
+        onDropLabel={() => this.props.onChange(this.state.values)}
       />
     );
     this.state = {
@@ -256,6 +260,17 @@ class AdhocFilterControl extends React.Component {
     ).expression;
   }
 
+  moveLabel(dragIndex, hoverIndex) {
+    const { values } = this.state;
+
+    const newValues = [...values];
+    [newValues[hoverIndex], newValues[dragIndex]] = [
+      newValues[dragIndex],
+      newValues[hoverIndex],
+    ];
+    this.setState({ values: newValues });
+  }
+
   optionsForSelect(props) {
     const options = [
       ...props.columns,
@@ -349,4 +364,4 @@ class AdhocFilterControl extends React.Component {
 AdhocFilterControl.propTypes = propTypes;
 AdhocFilterControl.defaultProps = defaultProps;
 
-export default withTheme(AdhocFilterControl);
+export default DndWithHTML5Backend(withTheme(AdhocFilterControl));

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

@@ -20,7 +20,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { t, withTheme } from '@superset-ui/core';
 import { isEqual } from 'lodash';
-
 import ControlHeader from '../ControlHeader';
 import MetricDefinitionOption from '../MetricDefinitionOption';
 import MetricDefinitionValue from '../MetricDefinitionValue';
@@ -41,6 +40,7 @@ import {
   HeaderContainer,
   LabelsContainer,
 } from '../OptionControls';
+import DndWithHTML5Backend from '../../DndContextProvider';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -116,6 +116,7 @@ class MetricsControl extends React.PureComponent {
     this.onMetricEdit = this.onMetricEdit.bind(this);
     this.onNewMetric = this.onNewMetric.bind(this);
     this.onRemoveMetric = this.onRemoveMetric.bind(this);
+    this.moveLabel = this.moveLabel.bind(this);
     this.checkIfAggregateInInput = this.checkIfAggregateInInput.bind(this);
     this.optionsForSelect = this.optionsForSelect.bind(this);
     this.selectFilterOption = this.selectFilterOption.bind(this);
@@ -124,12 +125,15 @@ class MetricsControl extends React.PureComponent {
     this.valueRenderer = (option, index) => (
       <MetricDefinitionValue
         key={index}
+        index={index}
         option={option}
         onMetricEdit={this.onMetricEdit}
         onRemoveMetric={() => this.onRemoveMetric(index)}
         columns={this.props.columns}
         savedMetrics={this.props.savedMetrics}
         datasourceType={this.props.datasourceType}
+        onMoveLabel={this.moveLabel}
+        onDropLabel={() => this.props.onChange(this.state.value)}
       />
     );
     this.select = null;
@@ -238,6 +242,17 @@ class MetricsControl extends React.PureComponent {
     this.props.onChange(this.props.multi ? optionValues : optionValues[0]);
   }
 
+  moveLabel(dragIndex, hoverIndex) {
+    const { value } = this.state;
+
+    const newValues = [...value];
+    [newValues[hoverIndex], newValues[dragIndex]] = [
+      newValues[dragIndex],
+      newValues[hoverIndex],
+    ];
+    this.setState({ value: newValues });
+  }
+
   isAddNewMetricDisabled() {
     return !this.props.multi && this.state.value.length > 0;
   }
@@ -377,4 +392,4 @@ class MetricsControl extends React.PureComponent {
 MetricsControl.propTypes = propTypes;
 MetricsControl.defaultProps = defaultProps;
 
-export default withTheme(MetricsControl);
+export default DndWithHTML5Backend(withTheme(MetricsControl));