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 (
- {this.props.mappings.map((mapping, index) => (
-
-
this.updateParamMapping(mapping, newMapping)}
- clientConfig={clientConfig}
- Query={Query}
- />
-
- ))}
+ {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 (
+
+
this.updateParamMapping(mapping, newMapping)}
+ clientConfig={clientConfig}
+ Query={Query}
+ />
+
+ );
+ })}
);
}
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 {
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) &&
this.updateParamMappings(mappings)}
clientConfig={clientConfig}
Query={Query}