Merge pull request metabase#8462 from metabase/param-reorder

Parameter reordering [WIP]

frontend/src/metabase-lib/lib/queries/NativeQuery.js

@@ -16,7 +16,7 @@ import {
   getEngineNativeRequiresTable,
 } from "metabase/lib/engine";
 
-import { chain, assoc, getIn, assocIn } from "icepick";
+import { chain, assoc, getIn, assocIn, updateIn } from "icepick";
 import _ from "underscore";
 
 import type {
@@ -159,6 +159,24 @@ export default class NativeQuery extends AtomicQuery {
     );
   }
 
+  setParameterIndex(id: string, newIndex: number) {
+    // NOTE: currently all NativeQuery parameters are implicitly generated from
+    // template tags, and the order is determined by the key order
+    return new NativeQuery(
+      this._originalQuestion,
+      updateIn(
+        this._datasetQuery,
+        ["native", "template_tags"],
+        templateTags => {
+          const entries = Array.from(Object.entries(templateTags));
+          const oldIndex = _.findIndex(entries, entry => entry[1].id === id);
+          entries.splice(newIndex, 0, entries.splice(oldIndex, 1)[0]);
+          return _.object(entries);
+        },
+      ),
+    );
+  }
+
   lineCount(): number {
     const queryText = this.queryText();
     return queryText ? countLines(queryText) : 0;

frontend/src/metabase/css/core/cursor.css

@@ -3,6 +3,11 @@
   cursor: pointer;
 }
 
+.cursor-grab,
+:local(.cursor-grab) {
+  cursor: grab;
+}
+
 .cursor-default,
 :local(.cursor-default) {
   cursor: default;

frontend/src/metabase/dashboard/components/Dashboard.jsx

@@ -243,6 +243,7 @@ export default class Dashboard extends Component {
           editingParameter={editingParameter}
           setEditingParameter={this.props.setEditingParameter}
           setParameterName={this.props.setParameterName}
+          setParameterIndex={this.props.setParameterIndex}
           setParameterDefaultValue={this.props.setParameterDefaultValue}
           removeParameter={this.props.removeParameter}
           setParameterValue={this.props.setParameterValue}

frontend/src/metabase/dashboard/dashboard.js

@@ -107,6 +107,7 @@ export const REMOVE_PARAMETER = "metabase/dashboard/REMOVE_PARAMETER";
 export const SET_PARAMETER_MAPPING = "metabase/dashboard/SET_PARAMETER_MAPPING";
 export const SET_PARAMETER_NAME = "metabase/dashboard/SET_PARAMETER_NAME";
 export const SET_PARAMETER_VALUE = "metabase/dashboard/SET_PARAMETER_VALUE";
+export const SET_PARAMETER_INDEX = "metabase/dashboard/SET_PARAMETER_INDEX";
 export const SET_PARAMETER_DEFAULT_VALUE =
   "metabase/dashboard/SET_PARAMETER_DEFAULT_VALUE";
 
@@ -729,6 +730,28 @@ export const setParameterDefaultValue = createThunkAction(
   },
 );
 
+export const setParameterIndex = createThunkAction(
+  SET_PARAMETER_INDEX,
+  (parameterId, index) => (dispatch, getState) => {
+    const dashboard = getDashboard(getState());
+    const parameterIndex = _.findIndex(
+      dashboard.parameters,
+      p => p.id === parameterId,
+    );
+    if (parameterIndex >= 0) {
+      const parameters = dashboard.parameters.slice();
+      parameters.splice(index, 0, parameters.splice(parameterIndex, 1)[0]);
+      dispatch(
+        setDashboardAttributes({
+          id: dashboard.id,
+          attributes: { parameters },
+        }),
+      );
+    }
+    return { id: parameterId, index };
+  },
+);
+
 export const setParameterValue = createThunkAction(
   SET_PARAMETER_VALUE,
   (parameterId, value) => (dispatch, getState) => {

frontend/src/metabase/parameters/components/ParameterWidget.jsx

@@ -65,6 +65,7 @@ export default class ParameterWidget extends Component {
       setValue,
       setDefaultValue,
       remove,
+      children,
     } = this.props;
 
     const isEditingDashboard = isEditing;
@@ -90,6 +91,7 @@ export default class ParameterWidget extends Component {
             parameter.name,
             isFullscreen,
           )}
+          {children}
         </FieldSet>
       );
     };
@@ -119,6 +121,7 @@ export default class ParameterWidget extends Component {
             }}
             autoFocus
           />
+          {children}
         </FieldSet>
       );
     };
@@ -153,6 +156,7 @@ export default class ParameterWidget extends Component {
             parameter.name,
             isFullscreen,
           )}
+          {children}
         </FieldSet>
       );
     };
@@ -177,6 +181,7 @@ export default class ParameterWidget extends Component {
               <span className="ml1">{t`Remove`}</span>
             </div>
           </div>
+          {children}
         </FieldSet>
       );
     };
@@ -189,7 +194,7 @@ export default class ParameterWidget extends Component {
       } else {
         return <span className="hide" />;
       }
-    } else if (!isEditingDashboard) {
+    } else if (!isEditingDashboard || !setEditingParameter) {
       return renderFieldInNormalMode();
     } else if (isEditingParameter) {
       if (this.state.isEditingName) {

frontend/src/metabase/parameters/components/Parameters.jsx

@@ -2,7 +2,9 @@
 
 import React, { Component } from "react";
 
-import ParameterWidget from "./ParameterWidget.jsx";
+import StaticParameterWidget from "./ParameterWidget.jsx";
+import Icon from "metabase/components/Icon";
+import colors from "metabase/lib/colors";
 
 import querystring from "querystring";
 import cx from "classnames";
@@ -98,6 +100,11 @@ export default class Parameters extends Component {
     }
   }
 
+  handleSortEnd = ({ oldIndex, newIndex }) => {
+    const { parameters, setParameterIndex } = this.props;
+    setParameterIndex(parameters[oldIndex].id, newIndex);
+  };
+
   render() {
     const {
       className,
@@ -110,26 +117,43 @@ export default class Parameters extends Component {
       setParameterName,
       setParameterValue,
       setParameterDefaultValue,
+      setParameterIndex,
       removeParameter,
       vertical,
       commitImmediately,
     } = this.props;
 
     const parameters = this._parametersWithValues();
 
+    let ParameterWidget;
+    let ParameterWidgetList;
+    if (isEditing) {
+      ParameterWidget = SortableParameterWidget;
+      ParameterWidgetList = SortableParameterWidgetList;
+    } else {
+      ParameterWidget = StaticParameterWidget;
+      ParameterWidgetList = StaticParameterWidgetList;
+    }
+
     return (
-      <div
+      <ParameterWidgetList
         className={cx(
           className,
           "flex align-end flex-wrap",
           vertical ? "flex-column" : "flex-row",
           { mt1: isQB },
         )}
+        axis="x"
+        distance={9}
+        onSortEnd={this.handleSortEnd}
       >
-        {parameters.map(parameter => (
+        {parameters.map((parameter, index) => (
           <ParameterWidget
-            className={vertical ? "mb2" : null}
             key={parameter.id}
+            index={index}
+            className={cx("relative hover-parent hover--visibility", {
+              mb2: vertical,
+            })}
             isEditing={isEditing}
             isFullscreen={isFullscreen}
             isNightMode={isNightMode}
@@ -150,9 +174,43 @@ export default class Parameters extends Component {
             }
             remove={removeParameter && (() => removeParameter(parameter.id))}
             commitImmediately={commitImmediately}
-          />
+          >
+            {/* show drag handle if editing and setParameterIndex provided */}
+            {isEditing && setParameterIndex ? (
+              <SortableParameterHandle />
+            ) : null}
+          </ParameterWidget>
         ))}
-      </div>
+      </ParameterWidgetList>
     );
   }
 }
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+  arrayMove,
+} from "react-sortable-hoc";
+
+const StaticParameterWidgetList = ({ children, ...props }) => {
+  return <div {...props}>{children}</div>;
+};
+
+const SortableParameterHandle = SortableHandle(() => (
+  <div
+    className="absolute top bottom left flex layout-centered hover-child cursor-grab"
+    style={{
+      color: colors["border"],
+      // width should match the left padding of the ParameterWidget container class so that it's centered
+      width: "1em",
+      marginLeft: "1px",
+    }}
+  >
+    <Icon name="grabber2" size={12} />
+  </div>
+));
+
+const SortableParameterWidget = SortableElement(StaticParameterWidget);
+const SortableParameterWidgetList = SortableContainer(
+  StaticParameterWidgetList,
+);

frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx

@@ -278,6 +278,13 @@ export default class NativeQueryEditor extends Component {
     }
   };
 
+  setParameterIndex = (parameterId, parameterIndex) => {
+    const { query, setDatasetQuery } = this.props;
+    query
+      .setParameterIndex(parameterId, parameterIndex)
+      .update(setDatasetQuery);
+  };
+
   render() {
     const { query, setParameterValue, location } = this.props;
     const database = query.database();
@@ -363,7 +370,9 @@ export default class NativeQueryEditor extends Component {
               parameters={parameters}
               query={location.query}
               setParameterValue={setParameterValue}
+              setParameterIndex={this.setParameterIndex}
               syncQueryString
+              isEditing
               isQB
               commitImmediately
             />