Add reorder to dashboard parameter widgets

client/app/components/Parameters.jsx

@@ -23,19 +23,23 @@ export default class Parameters extends React.Component {
   static propTypes = {
     parameters: PropTypes.arrayOf(PropTypes.instanceOf(Parameter)),
     editable: PropTypes.bool,
+    sortable: PropTypes.bool,
     disableUrlUpdate: PropTypes.bool,
     onValuesChange: PropTypes.func,
     onPendingValuesChange: PropTypes.func,
     onParametersEdit: PropTypes.func,
+    appendSortableToParent: PropTypes.bool,
   };
 
   static defaultProps = {
     parameters: [],
     editable: false,
+    sortable: false,
     disableUrlUpdate: false,
     onValuesChange: () => {},
     onPendingValuesChange: () => {},
     onParametersEdit: () => {},
+    appendSortableToParent: true,
   };
 
   constructor(props) {
@@ -85,7 +89,7 @@ export default class Parameters extends React.Component {
     if (oldIndex !== newIndex) {
       this.setState(({ parameters }) => {
         parameters.splice(newIndex, 0, parameters.splice(oldIndex, 1)[0]);
-        onParametersEdit();
+        onParametersEdit(parameters);
         return { parameters };
       });
     }
@@ -110,7 +114,7 @@ export default class Parameters extends React.Component {
       this.setState(({ parameters }) => {
         const updatedParameter = extend(parameter, updated);
         parameters[index] = createParameter(updatedParameter, updatedParameter.parentQueryId);
-        onParametersEdit();
+        onParametersEdit(parameters);
         return { parameters };
       });
     });
@@ -146,15 +150,17 @@ export default class Parameters extends React.Component {
 
   render() {
     const { parameters } = this.state;
-    const { editable } = this.props;
+    const { sortable, appendSortableToParent } = this.props;
     const dirtyParamCount = size(filter(parameters, "hasPendingValue"));
+
     return (
       <SortableContainer
-        disabled={!editable}
+        disabled={!sortable}
         axis="xy"
         useDragHandle
         lockToContainerEdges
         helperClass="parameter-dragged"
+        helperContainer={containerEl => (appendSortableToParent ? containerEl : document.body)}
         updateBeforeSortStart={this.onBeforeSortStart}
         onSortEnd={this.moveParameter}
         containerProps={{
@@ -163,8 +169,11 @@ export default class Parameters extends React.Component {
         }}>
         {parameters.map((param, index) => (
           <SortableElement key={param.name} index={index}>
-            <div className="parameter-block" data-editable={editable || null}>
-              {editable && <DragHandle data-test={`DragHandle-${param.name}`} />}
+            <div
+              className="parameter-block"
+              data-editable={sortable || null}
+              data-test={`ParameterBlock-${param.name}`}>
+              {sortable && <DragHandle data-test={`DragHandle-${param.name}`} />}
               {this.renderParameter(param, index)}
             </div>
           </SortableElement>

client/app/components/Parameters.less

@@ -21,6 +21,8 @@
 
   &.parameter-dragged {
     z-index: 2;
+    margin: 4px 0 0 4px;
+    padding: 3px 6px 6px;
     box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
   }
 }

client/app/components/dashboards/DashboardGrid.jsx

@@ -41,6 +41,7 @@ const DashboardWidget = React.memo(
     onRefreshWidget,
     onRemoveWidget,
     onParameterMappingsChange,
+    isEditing,
     canEdit,
     isPublic,
     isLoading,
@@ -57,6 +58,7 @@ const DashboardWidget = React.memo(
           widget={widget}
           dashboard={dashboard}
           filters={filters}
+          isEditing={isEditing}
           canEdit={canEdit}
           isPublic={isPublic}
           isLoading={isLoading}
@@ -77,7 +79,8 @@ const DashboardWidget = React.memo(
     prevProps.canEdit === nextProps.canEdit &&
     prevProps.isPublic === nextProps.isPublic &&
     prevProps.isLoading === nextProps.isLoading &&
-    prevProps.filters === nextProps.filters
+    prevProps.filters === nextProps.filters &&
+    prevProps.isEditing === nextProps.isEditing
 );
 
 class DashboardGrid extends React.Component {
@@ -223,7 +226,6 @@ class DashboardGrid extends React.Component {
   });
 
   render() {
-    const className = cx("dashboard-wrapper", this.props.isEditing ? "editing-mode" : "preview-mode");
     const {
       onLoadWidget,
       onRefreshWidget,
@@ -232,19 +234,21 @@ class DashboardGrid extends React.Component {
       filters,
       dashboard,
       isPublic,
+      isEditing,
       widgets,
     } = this.props;
+    const className = cx("dashboard-wrapper", isEditing ? "editing-mode" : "preview-mode");
 
     return (
       <div className={className}>
         <ResponsiveGridLayout
-          draggableCancel="input"
+          draggableCancel="input,.sortable-container"
           className={cx("layout", { "disable-animations": this.state.disableAnimations })}
           cols={{ [MULTI]: cfg.columns, [SINGLE]: 1 }}
           rowHeight={cfg.rowHeight - cfg.margins}
           margin={[cfg.margins, cfg.margins]}
-          isDraggable={this.props.isEditing}
-          isResizable={this.props.isEditing}
+          isDraggable={isEditing}
+          isResizable={isEditing}
           onResizeStart={this.autoHeightCtrl.stop}
           onResizeStop={this.onWidgetResize}
           layouts={this.state.layouts}
@@ -266,6 +270,7 @@ class DashboardGrid extends React.Component {
                 filters={filters}
                 isPublic={isPublic}
                 isLoading={widget.loading}
+                isEditing={isEditing}
                 canEdit={dashboard.canEdit()}
                 onLoadWidget={onLoadWidget}
                 onRefreshWidget={onRefreshWidget}

client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { compact, isEmpty, invoke } from "lodash";
+import { compact, isEmpty, invoke, map } from "lodash";
 import { markdown } from "markdown";
 import cx from "classnames";
 import Menu from "antd/lib/menu";
@@ -84,7 +84,14 @@ function RefreshIndicator({ refreshStartedAt }) {
 RefreshIndicator.propTypes = { refreshStartedAt: Moment };
 RefreshIndicator.defaultProps = { refreshStartedAt: null };
 
-function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onParametersUpdate }) {
+function VisualizationWidgetHeader({
+  widget,
+  refreshStartedAt,
+  parameters,
+  isEditing,
+  onParametersUpdate,
+  onParametersEdit,
+}) {
   const canViewQuery = currentUser.hasPermission("view_query");
 
   return (
@@ -104,7 +111,13 @@ function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onPar
       </div>
       {!isEmpty(parameters) && (
         <div className="m-b-10">
-          <Parameters parameters={parameters} onValuesChange={onParametersUpdate} />
+          <Parameters
+            parameters={parameters}
+            sortable={isEditing}
+            appendSortableToParent={false}
+            onValuesChange={onParametersUpdate}
+            onParametersEdit={onParametersEdit}
+          />
         </div>
       )}
     </>
@@ -115,12 +128,16 @@ VisualizationWidgetHeader.propTypes = {
   widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   refreshStartedAt: Moment,
   parameters: PropTypes.arrayOf(PropTypes.object),
+  isEditing: PropTypes.bool,
   onParametersUpdate: PropTypes.func,
+  onParametersEdit: PropTypes.func,
 };
 
 VisualizationWidgetHeader.defaultProps = {
   refreshStartedAt: null,
   onParametersUpdate: () => {},
+  onParametersEdit: () => {},
+  isEditing: false,
   parameters: [],
 };
 
@@ -190,6 +207,7 @@ class VisualizationWidget extends React.Component {
     isPublic: PropTypes.bool,
     isLoading: PropTypes.bool,
     canEdit: PropTypes.bool,
+    isEditing: PropTypes.bool,
     onLoad: PropTypes.func,
     onRefresh: PropTypes.func,
     onDelete: PropTypes.func,
@@ -201,6 +219,7 @@ class VisualizationWidget extends React.Component {
     isPublic: false,
     isLoading: false,
     canEdit: false,
+    isEditing: false,
     onLoad: () => {},
     onRefresh: () => {},
     onDelete: () => {},
@@ -284,10 +303,15 @@ class VisualizationWidget extends React.Component {
   }
 
   render() {
-    const { widget, isLoading, isPublic, canEdit, onRefresh } = this.props;
+    const { widget, isLoading, isPublic, canEdit, isEditing, onRefresh } = this.props;
     const { localParameters } = this.state;
     const widgetQueryResult = widget.getQueryResult();
     const isRefreshing = isLoading && !!(widgetQueryResult && widgetQueryResult.getStatus());
+    const onParametersEdit = parameters => {
+      const paramOrder = map(parameters, "name");
+      widget.options.paramOrder = paramOrder;
+      widget.save("options", { paramOrder });
+    };
 
     return (
       <Widget
@@ -303,7 +327,9 @@ class VisualizationWidget extends React.Component {
             widget={widget}
             refreshStartedAt={isRefreshing ? widget.refreshStartedAt : null}
             parameters={localParameters}
+            isEditing={isEditing}
             onParametersUpdate={onRefresh}
+            onParametersEdit={onParametersEdit}
           />
         }
         footer={

client/app/pages/dashboards/DashboardPage.jsx

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash";
+import { isEmpty, map } from "lodash";
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
@@ -24,8 +24,8 @@ import DashboardHeader from "./components/DashboardHeader";
 
 import "./DashboardPage.less";
 
-function DashboardSettings({ dashboardOptions }) {
-  const { dashboard, updateDashboard } = dashboardOptions;
+function DashboardSettings({ dashboardConfiguration }) {
+  const { dashboard, updateDashboard } = dashboardConfiguration;
   return (
     <div className="m-b-10 p-15 bg-white tiled">
       <Checkbox
@@ -39,11 +39,11 @@ function DashboardSettings({ dashboardOptions }) {
 }
 
 DashboardSettings.propTypes = {
-  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  dashboardConfiguration: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-function AddWidgetContainer({ dashboardOptions, className, ...props }) {
-  const { showAddTextboxDialog, showAddWidgetDialog } = dashboardOptions;
+function AddWidgetContainer({ dashboardConfiguration, className, ...props }) {
+  const { showAddTextboxDialog, showAddWidgetDialog } = dashboardConfiguration;
   return (
     <div className={cx("add-widget-container", className)} {...props}>
       <h2>
@@ -66,12 +66,12 @@ function AddWidgetContainer({ dashboardOptions, className, ...props }) {
 }
 
 AddWidgetContainer.propTypes = {
-  dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  dashboardConfiguration: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   className: PropTypes.string,
 };
 
 function DashboardComponent(props) {
-  const dashboardOptions = useDashboard(props.dashboard);
+  const dashboardConfiguration = useDashboard(props.dashboard);
   const {
     dashboard,
     filters,
@@ -81,14 +81,19 @@ function DashboardComponent(props) {
     removeWidget,
     saveDashboardLayout,
     globalParameters,
+    updateDashboard,
     refreshDashboard,
     refreshWidget,
     editingLayout,
     setGridDisabled,
-  } = dashboardOptions;
+  } = dashboardConfiguration;
 
   const [pageContainer, setPageContainer] = useState(null);
   const [bottomPanelStyles, setBottomPanelStyles] = useState({});
+  const onParametersEdit = parameters => {
+    const paramOrder = map(parameters, "name");
+    updateDashboard({ options: { globalParamOrder: paramOrder } });
+  };
 
   useEffect(() => {
     if (pageContainer) {
@@ -114,22 +119,31 @@ function DashboardComponent(props) {
   return (
     <div className="container" ref={setPageContainer} data-test={`DashboardId${dashboard.id}Container`}>
       <DashboardHeader
-        dashboardOptions={dashboardOptions}
+        dashboardConfiguration={dashboardConfiguration}
         headerExtra={
-          <DynamicComponent name="Dashboard.HeaderExtra" dashboard={dashboard} dashboardOptions={dashboardOptions} />
+          <DynamicComponent
+            name="Dashboard.HeaderExtra"
+            dashboard={dashboard}
+            dashboardConfiguration={dashboardConfiguration}
+          />
         }
       />
       {!isEmpty(globalParameters) && (
         <div className="dashboard-parameters m-b-10 p-15 bg-white tiled" data-test="DashboardParameters">
-          <Parameters parameters={globalParameters} onValuesChange={refreshDashboard} />
+          <Parameters
+            parameters={globalParameters}
+            onValuesChange={refreshDashboard}
+            sortable={editingLayout}
+            onParametersEdit={onParametersEdit}
+          />
         </div>
       )}
       {!isEmpty(filters) && (
         <div className="m-b-10 p-15 bg-white tiled" data-test="DashboardFilters">
           <Filters filters={filters} onChange={setFilters} />
         </div>
       )}
-      {editingLayout && <DashboardSettings dashboardOptions={dashboardOptions} />}
+      {editingLayout && <DashboardSettings dashboardConfiguration={dashboardConfiguration} />}
       <div id="dashboard-container">
         <DashboardGrid
           dashboard={dashboard}
@@ -144,7 +158,9 @@ function DashboardComponent(props) {
           onParameterMappingsChange={loadDashboard}
         />
       </div>
-      {editingLayout && <AddWidgetContainer dashboardOptions={dashboardOptions} style={bottomPanelStyles} />}
+      {editingLayout && (
+        <AddWidgetContainer dashboardConfiguration={dashboardConfiguration} style={bottomPanelStyles} />
+      )}
     </div>
   );
 }