Change stored mapping attributes

getredash · Feb 21, 2020 · bdd7b14 · bdd7b14
1 parent b7478de
commit bdd7b14
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 51 deletions.
diff --git a/client/app/components/EditParameterSettingsDialog.jsx b/client/app/components/EditParameterSettingsDialog.jsx
@@ -1,5 +1,5 @@
-import { includes, words, capitalize, clone, isNull, keys, values, omit } from "lodash";
-import React, { useState, useEffect, useRef } from "react";
+import { includes, words, capitalize, clone, isNull, values, get } from "lodash";
+import React, { useState, useEffect, useRef, useReducer } from "react";
 import PropTypes from "prop-types";
 import Checkbox from "antd/lib/checkbox";
 import Modal from "antd/lib/modal";
@@ -75,32 +75,30 @@ NameInput.propTypes = {
 };
 
 // TODO: put this component in its own file
-function QueryBasedParamMappingEditor({ parameter, mappingType, staticValue, searchAvailable, onChange }) {
+function QueryBasedParamMappingEditor({ parameter, mapping, searchAvailable, onChange }) {
   const [showPopover, setShowPopover] = useState(false);
-  const [newMappingType, setNewMappingType] = useState(mappingType);
-  const [newStaticValue, setNewStaticValue] = useState(staticValue);
+  const [newMapping, setNewMapping] = useReducer((prevState, updates) => ({ ...prevState, ...updates }), mapping);
 
   const parameterRef = useRef(parameter);
   useEffect(() => {
-    parameterRef.current.setValue(staticValue);
-  }, [staticValue]);
+    parameterRef.current.setValue(mapping.staticValue);
+  }, [mapping.staticValue]);
 
   const onCancel = () => {
-    setNewMappingType(mappingType);
-    setNewStaticValue(staticValue);
+    setNewMapping(mapping);
     setShowPopover(false);
   };
 
   const onSave = () => {
-    onChange({ mappingType: newMappingType, staticValue: newStaticValue });
+    onChange(newMapping);
     setShowPopover(false);
   };
 
   let currentState = "Undefined";
-  if (mappingType === QueryBasedParameterMappingType.DROPDOWN_SEARCH) {
+  if (mapping.mappingType === QueryBasedParameterMappingType.DROPDOWN_SEARCH) {
     currentState = "Dropdown Search";
-  } else if (mappingType === QueryBasedParameterMappingType.STATIC) {
-    currentState = `Static value: ${staticValue}`;
+  } else if (mapping.mappingType === QueryBasedParameterMappingType.STATIC) {
+    currentState = `Static value: ${mapping.staticValue}`;
   }
   return (
     <>
@@ -112,7 +110,9 @@ function QueryBasedParamMappingEditor({ parameter, mappingType, staticValue, sea
           <ParameterMappingEditor header="Edit Parameter Source" onCancel={onCancel} onSave={onSave}>
             <Form>
               <Form.Item className="m-b-15" label="Source" {...formItemProps}>
-                <Radio.Group value={newMappingType} onChange={({ target }) => setNewMappingType(target.value)}>
+                <Radio.Group
+                  value={newMapping.mappingType}
+                  onChange={({ target }) => setNewMapping({ mappingType: target.value })}>
                   <Radio
                     className="radio"
                     value={QueryBasedParameterMappingType.DROPDOWN_SEARCH}
@@ -129,7 +129,7 @@ function QueryBasedParamMappingEditor({ parameter, mappingType, staticValue, sea
                   </Radio>
                 </Radio.Group>
               </Form.Item>
-              {newMappingType === QueryBasedParameterMappingType.STATIC && (
+              {newMapping.mappingType === QueryBasedParameterMappingType.STATIC && (
                 <Form.Item label="Value" {...formItemProps}>
                   <ParameterValueInput
                     type={parameter.type}
@@ -139,7 +139,7 @@ function QueryBasedParamMappingEditor({ parameter, mappingType, staticValue, sea
                     parameter={parameter}
                     onSelect={value => {
                       parameter.setValue(value);
-                      setNewStaticValue(parameter.getExecutionValue({ joinListValues: true }));
+                      setNewMapping({ staticValue: parameter.getExecutionValue({ joinListValues: true }) });
                     }}
                   />
                 </Form.Item>
@@ -301,7 +301,7 @@ function EditParameterSettingsDialog(props) {
               onChange={q => {
                 if (q) {
                   setParamQuery(q);
-                  setParam({ ...param, queryId: q.id, searchColumn: null, staticParams: {} });
+                  setParam({ ...param, queryId: q.id, parameterMapping: {} });
                 }
               }}
               type="select"
@@ -310,6 +310,7 @@ function EditParameterSettingsDialog(props) {
         )}
         {param.type === "query" && paramQuery && paramQuery.hasParameters() && (
           <Form.Item className="m-t-15 m-b-5" label="Parameters" {...formItemProps}>
+            {/* TODO: make sure Table rerenders on updates */}
             <Table
               dataSource={paramQuery.getParametersDefs()}
               size="middle"
@@ -326,38 +327,26 @@ function EditParameterSettingsDialog(props) {
                 title="Value Source"
                 key="source"
                 render={mappingParam => {
-                  const onChangeMapping = ({ mappingType, staticValue }) => {
-                    const paramUpdates = {};
-                    if (mappingType === QueryBasedParameterMappingType.DROPDOWN_SEARCH) {
-                      paramUpdates.searchColumn = mappingParam.name;
-                    } else if (param.searchColumn === mappingParam.name) {
-                      paramUpdates.searchColumn = null;
-                    }
-                    if (mappingType === QueryBasedParameterMappingType.STATIC) {
-                      paramUpdates.staticParams = {
-                        ...param.staticParams,
-                        [mappingParam.name]: staticValue,
-                      };
-                    } else {
-                      paramUpdates.staticParams = omit(param.staticParams, [mappingProps.name]);
-                    }
-                    setParam({ ...param, ...paramUpdates });
-                  };
-                  const mappingProps = {
-                    parameter: mappingParam,
+                  const existingMapping = get(param.parameterMapping, mappingParam.name, {
                     mappingType: QueryBasedParameterMappingType.UNDEFINED,
-                    searchAvailable: !param.searchColumn,
-                    onChange: onChangeMapping,
-                  };
-                  // TODO: Update backend verification accordingly and avoid this
-                  if (param.searchColumn === mappingParam.name) {
-                    mappingProps.mappingType = QueryBasedParameterMappingType.DROPDOWN_SEARCH;
-                    mappingProps.searchAvailable = true;
-                  } else if (includes(keys(param.staticParams), mappingParam.name)) {
-                    mappingProps.mappingType = QueryBasedParameterMappingType.STATIC;
-                    mappingProps.staticValue = param.staticParams[mappingParam.name];
-                  }
-                  return <QueryBasedParamMappingEditor {...mappingProps} />;
+                  });
+
+                  return (
+                    <QueryBasedParamMappingEditor
+                      parameter={mappingParam}
+                      mapping={existingMapping}
+                      searchAvailable={
+                        !param.searchColumn ||
+                        existingMapping.mappingType === QueryBasedParameterMappingType.DROPDOWN_SEARCH
+                      }
+                      onChange={mapping =>
+                        setParam({
+                          ...param,
+                          parameterMapping: { ...param.parameterMapping, [mappingParam.name]: mapping },
+                        })
+                      }
+                    />
+                  );
                 }}
               />
             </Table>

diff --git a/client/app/services/parameters/QueryBasedDropdownParameter.js b/client/app/services/parameters/QueryBasedDropdownParameter.js
@@ -1,4 +1,17 @@
-import { isNull, isUndefined, isArray, isEmpty, get, map, join, has, toString } from "lodash";
+import {
+  isNull,
+  isUndefined,
+  isArray,
+  isEmpty,
+  get,
+  map,
+  join,
+  has,
+  toString,
+  findKey,
+  mapValues,
+  pickBy,
+} from "lodash";
 import { Query } from "@/services/query";
 import QueryResult from "@/services/query-result";
 import Parameter from "./Parameter";
@@ -19,12 +32,22 @@ class QueryBasedDropdownParameter extends Parameter {
     this.queryId = parameter.queryId;
     this.multiValuesOptions = parameter.multiValuesOptions;
     this.parameterMapping = parameter.parameterMapping;
-    this.searchColumn = parameter.searchColumn;
     this.searchTerm = parameter.searchTerm;
-    this.staticParams = { ...parameter.staticParams };
     this.setValue(parameter.value);
   }
 
+  get searchColumn() {
+    return findKey(this.parameterMapping, { mappingType: QueryBasedParameterMappingType.DROPDOWN_SEARCH });
+  }
+
+  get staticParams() {
+    const staticParams = pickBy(
+      this.parameterMapping,
+      mapping => mapping.mappingType === QueryBasedParameterMappingType.STATIC
+    );
+    return mapValues(staticParams, value => value.staticValue);
+  }
+
   normalizeValue(value) {
     if (isUndefined(value) || isNull(value) || (isArray(value) && isEmpty(value))) {
       return null;