From 786743bf538d2c602a629f34921c98cee71aac74 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Wed, 23 Jan 2019 15:25:28 +0200
Subject: [PATCH] Filtering out incompatible dashboard params

---
 .../app/components/ParameterMappingInput.jsx  | 35 ++++++++++++-------
 .../components/dashboards/AddWidgetDialog.jsx |  6 ++--
 .../EditParameterMappingsDialog.jsx           |  6 ++--
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/client/app/components/ParameterMappingInput.jsx b/client/app/components/ParameterMappingInput.jsx
index c5ebcf0013..54487b7abc 100644
--- a/client/app/components/ParameterMappingInput.jsx
+++ b/client/app/components/ParameterMappingInput.jsx
@@ -223,7 +223,10 @@ export class ParameterMappingInput extends React.Component {
 export class ParameterMappingListInput extends React.Component {
   static propTypes = {
     mappings: PropTypes.arrayOf(PropTypes.object),
-    existingParamNames: PropTypes.arrayOf(PropTypes.string),
+    existingParams: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+    })),
     onChange: PropTypes.func,
     clientConfig: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     Query: PropTypes.any, // eslint-disable-line react/forbid-prop-types
@@ -231,7 +234,7 @@ export class ParameterMappingListInput extends React.Component {
 
   static defaultProps = {
     mappings: [],
-    existingParamNames: [],
+    existingParams: [],
     onChange: () => {},
     clientConfig: null,
     Query: null,
@@ -255,17 +258,23 @@ export class ParameterMappingListInput extends React.Component {
 
     return (
       <div>
-        {this.props.mappings.map((mapping, index) => (
-          <div key={mapping.name} className={(index === 0 ? '' : ' m-t-15')}>
-            <ParameterMappingInput
-              mapping={mapping}
-              existingParamNames={this.props.existingParamNames}
-              onChange={newMapping => this.updateParamMapping(mapping, newMapping)}
-              clientConfig={clientConfig}
-              Query={Query}
-            />
-          </div>
-        ))}
+        {this.props.mappings.map((mapping, index) => {
+          const existingParamsNames = this.props.existingParams
+              .filter(({ type }) => type === mapping.param.type) // exclude mismatching param types
+              .map(({ name }) => name); // keep names only
+
+          return (
+            <div key={mapping.name} className={(index === 0 ? '' : ' m-t-15')}>
+              <ParameterMappingInput
+                mapping={mapping}
+                existingParamNames={existingParamsNames}
+                onChange={newMapping => this.updateParamMapping(mapping, newMapping)}
+                clientConfig={clientConfig}
+                Query={Query}
+              />
+            </div>
+          );
+        })}
       </div>
     );
   }
diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx
index a6922840e5..6d51a35e90 100644
--- a/client/app/components/dashboards/AddWidgetDialog.jsx
+++ b/client/app/components/dashboards/AddWidgetDialog.jsx
@@ -281,9 +281,9 @@ class AddWidgetDialog extends React.Component {
     const clientConfig = this.props.clientConfig; // eslint-disable-line react/prop-types
     const Query = this.props.Query; // eslint-disable-line react/prop-types
 
-    const existingParamNames = map(
+    const existingParams = map(
       this.props.dashboard.getParametersDefs(),
-      param => param.name,
+      ({ name, type }) => ({ name, type }),
     );
 
     return (
@@ -311,7 +311,7 @@ class AddWidgetDialog extends React.Component {
               <ParameterMappingListInput
                 key="parameters-list"
                 mappings={this.state.parameterMappings}
-                existingParamNames={existingParamNames}
+                existingParams={existingParams}
                 onChange={mappings => this.updateParamMappings(mappings)}
                 clientConfig={clientConfig}
                 Query={Query}
diff --git a/client/app/components/dashboards/EditParameterMappingsDialog.jsx b/client/app/components/dashboards/EditParameterMappingsDialog.jsx
index 3b1ba76ac7..2230224933 100644
--- a/client/app/components/dashboards/EditParameterMappingsDialog.jsx
+++ b/client/app/components/dashboards/EditParameterMappingsDialog.jsx
@@ -63,9 +63,9 @@ class EditParameterMappingsDialog extends React.Component {
     const clientConfig = this.props.clientConfig; // eslint-disable-line react/prop-types
     const Query = this.props.Query; // eslint-disable-line react/prop-types
 
-    const existingParamNames = map(
+    const existingParams = map(
       this.props.dashboard.getParametersDefs(),
-      param => param.name,
+      ({ name, type }) => ({ name, type }),
     );
 
     return (
@@ -87,7 +87,7 @@ class EditParameterMappingsDialog extends React.Component {
             (this.state.parameterMappings.length > 0) &&
             <ParameterMappingListInput
               mappings={this.state.parameterMappings}
-              existingParamNames={existingParamNames}
+              existingParams={existingParams}
               onChange={mappings => this.updateParamMappings(mappings)}
               clientConfig={clientConfig}
               Query={Query}