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

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().shallow();
+  const component = wrapper.dive().dive().shallow();
   return { wrapper, component, onChange };
 }
 

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('OptionControlLabel')).toExist();
+    expect(overlay.find('DraggableOptionControlLabel')).toExist();
   });
 });

superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx

@@ -45,6 +45,9 @@ function setup(overrides) {
     savedMetrics: [],
     onMetricEdit,
     columns,
+    onMoveLabel: () => {},
+    onDropLabel: () => {},
+    index: 0,
     ...overrides,
   };
   const wrapper = shallow(<AdhocMetricOption {...props} />)
@@ -57,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('OptionControlLabel')).toExist();
+    expect(wrapper.find('DraggableOptionControlLabel')).toExist();
   });
 
   it('overwrites the adhocMetric in state with onLabelChange', () => {

superset-frontend/spec/javascripts/explore/components/MetricsControl_spec.jsx

@@ -53,7 +53,7 @@ function setup(overrides) {
     ...overrides,
   };
   const wrapper = shallow(<MetricsControl {...props} />);
-  const component = wrapper.dive().shallow();
+  const component = wrapper.dive().dive().shallow();
   return { wrapper, component, onChange };
 }
 

superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx

@@ -120,7 +120,9 @@ describe('VerifiedMetricsControl', () => {
       onChange: mockOnChange,
     });
 
-    const child = wrapper.find(MetricsControl);
+    const child = wrapper.find(MetricsControl) as ReactWrapper<{
+      onChange: (str: string[]) => void;
+    }>;
     child.props().onChange(['abc']);
 
     expect(child.length).toBe(1);

superset-frontend/src/explore/DndContextProvider.js

@@ -0,0 +1,23 @@
+/**
+ * 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);

superset-frontend/src/explore/components/AdhocFilterOption.jsx

@@ -22,7 +22,8 @@ import AdhocFilter from '../AdhocFilter';
 import columnType from '../propTypes/columnType';
 import adhocMetricType from '../propTypes/adhocMetricType';
 import AdhocFilterPopoverTrigger from './AdhocFilterPopoverTrigger';
-import { OptionControlLabel } from './OptionControls';
+import { DraggableOptionControlLabel } from './OptionControls';
+import { OPTION_TYPES } from './optionTypes';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,
@@ -37,6 +38,9 @@ const propTypes = {
   ).isRequired,
   datasource: PropTypes.object,
   partitionColumn: PropTypes.string,
+  onMoveLabel: PropTypes.func,
+  onDropLabel: PropTypes.func,
+  index: PropTypes.number,
 };
 
 const AdhocFilterOption = ({
@@ -46,6 +50,9 @@ const AdhocFilterOption = ({
   onFilterEdit,
   onRemoveFilter,
   partitionColumn,
+  onMoveLabel,
+  onDropLabel,
+  index,
 }) => (
   <AdhocFilterPopoverTrigger
     adhocFilter={adhocFilter}
@@ -54,9 +61,13 @@ const AdhocFilterOption = ({
     onFilterEdit={onFilterEdit}
     partitionColumn={partitionColumn}
   >
-    <OptionControlLabel
+    <DraggableOptionControlLabel
       label={adhocFilter.getDefaultLabel()}
       onRemove={onRemoveFilter}
+      onMoveLabel={onMoveLabel}
+      onDropLabel={onDropLabel}
+      index={index}
+      type={OPTION_TYPES.filter}
       isAdhoc
     />
   </AdhocFilterPopoverTrigger>

superset-frontend/src/explore/components/AdhocMetricOption.jsx

@@ -21,8 +21,9 @@ import PropTypes from 'prop-types';
 import AdhocMetric from '../AdhocMetric';
 import columnType from '../propTypes/columnType';
 import savedMetricType from '../propTypes/savedMetricType';
-import { OptionControlLabel } from './OptionControls';
+import { DraggableOptionControlLabel } from './OptionControls';
 import AdhocMetricPopoverTrigger from './AdhocMetricPopoverTrigger';
+import { OPTION_TYPES } from './optionTypes';
 
 const propTypes = {
   adhocMetric: PropTypes.instanceOf(AdhocMetric),
@@ -32,6 +33,9 @@ const propTypes = {
   savedMetrics: PropTypes.arrayOf(savedMetricType),
   savedMetric: savedMetricType,
   datasourceType: PropTypes.string,
+  onMoveLabel: PropTypes.func,
+  onDropLabel: PropTypes.func,
+  index: PropTypes.number,
 };
 
 class AdhocMetricOption extends React.PureComponent {
@@ -53,6 +57,9 @@ class AdhocMetricOption extends React.PureComponent {
       savedMetrics,
       savedMetric,
       datasourceType,
+      onMoveLabel,
+      onDropLabel,
+      index,
     } = this.props;
     return (
       <AdhocMetricPopoverTrigger
@@ -63,10 +70,14 @@ class AdhocMetricOption extends React.PureComponent {
         savedMetric={savedMetric}
         datasourceType={datasourceType}
       >
-        <OptionControlLabel
+        <DraggableOptionControlLabel
           savedMetric={savedMetric}
           label={adhocMetric.label}
           onRemove={this.onRemoveMetric}
+          onMoveLabel={onMoveLabel}
+          onDropLabel={onDropLabel}
+          index={index}
+          type={OPTION_TYPES.metric}
           isAdhoc
           isFunction
         />

superset-frontend/src/explore/components/MetricDefinitionValue.jsx

@@ -18,18 +18,21 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import AdhocMetricOption from './AdhocMetricOption';
 import AdhocMetric from '../AdhocMetric';
 import columnType from '../propTypes/columnType';
 import savedMetricType from '../propTypes/savedMetricType';
 import adhocMetricType from '../propTypes/adhocMetricType';
-import { OptionControlLabel } from './OptionControls';
+import { DraggableOptionControlLabel } from './OptionControls';
+import { OPTION_TYPES } from './optionTypes';
 
 const propTypes = {
   option: PropTypes.oneOfType([savedMetricType, adhocMetricType]).isRequired,
+  index: PropTypes.number.isRequired,
   onMetricEdit: PropTypes.func,
   onRemoveMetric: PropTypes.func,
+  onMoveLabel: PropTypes.func,
+  onDropLabel: PropTypes.func,
   columns: PropTypes.arrayOf(columnType),
   savedMetrics: PropTypes.arrayOf(savedMetricType),
   multi: PropTypes.bool,
@@ -43,6 +46,9 @@ export default function MetricDefinitionValue({
   columns,
   savedMetrics,
   datasourceType,
+  onMoveLabel,
+  onDropLabel,
+  index,
 }) {
   const getSavedMetricByName = metricName =>
     savedMetrics.find(metric => metric.metric_name === metricName);
@@ -65,14 +71,25 @@ export default function MetricDefinitionValue({
       savedMetrics,
       datasourceType,
       adhocMetric,
+      onMoveLabel,
+      onDropLabel,
+      index,
       savedMetric: savedMetric ?? {},
     };
 
     return <AdhocMetricOption {...metricOptionProps} />;
   }
   if (typeof option === 'string') {
     return (
-      <OptionControlLabel label={option} onRemove={onRemoveMetric} isFunction />
+      <DraggableOptionControlLabel
+        label={option}
+        onRemove={onRemoveMetric}
+        onMoveLabel={onMoveLabel}
+        onDropLabel={onDropLabel}
+        type={OPTION_TYPES.metric}
+        index={index}
+        isFunction
+      />
     );
   }
   return null;