Fix dashboard parameter mapping issues

client/app/components/ParameterMappingInput.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 
-import { isString, extend, each, map, includes, findIndex, find, fromPairs, clone, isEmpty } from 'lodash';
+import { isString, extend, each, has, map, includes, findIndex, find,
+  fromPairs, clone, isEmpty } from 'lodash';
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -158,6 +159,13 @@ export class ParameterMappingInput extends React.Component {
       newMapping.param = newMapping.param.clone();
       newMapping.param.setValue(newMapping.value);
     }
+    if (has(update, 'type')) {
+      if (update.type === MappingType.StaticValue) {
+        newMapping.value = newMapping.param.value;
+      } else {
+        newMapping.value = null;
+      }
+    }
     onChange(newMapping);
   };
 
@@ -168,7 +176,7 @@ export class ParameterMappingInput extends React.Component {
         value={this.props.mapping.type}
         onChange={e => this.updateSourceType(e.target.value)}
       >
-        <Radio className="radio" value={MappingType.DashboardAddNew}>
+        <Radio className="radio" value={MappingType.DashboardAddNew} data-test="NewDashboardParameterOption">
           New dashboard parameter
         </Radio>
         <Radio
@@ -183,10 +191,10 @@ export class ParameterMappingInput extends React.Component {
             </Tooltip>
           ) : null }
         </Radio>
-        <Radio className="radio" value={MappingType.WidgetLevel}>
+        <Radio className="radio" value={MappingType.WidgetLevel} data-test="WidgetParameterOption">
           Widget parameter
         </Radio>
-        <Radio className="radio" value={MappingType.StaticValue}>
+        <Radio className="radio" value={MappingType.StaticValue} data-test="StaticValueOption">
           Static value
         </Radio>
       </Radio.Group>
@@ -335,7 +343,7 @@ class MappingEditor extends React.Component {
     const { mapping, inputError } = this.state;
 
     return (
-      <div className="parameter-mapping-editor">
+      <div className="parameter-mapping-editor" data-test="EditParamMappingPopover">
         <header>
           Edit Source and Value <HelpTrigger type="VALUE_SOURCE_OPTIONS" />
         </header>
@@ -354,15 +362,16 @@ class MappingEditor extends React.Component {
   }
 
   render() {
+    const { visible, mapping } = this.state;
     return (
       <Popover
         placement="left"
         trigger="click"
         content={this.renderContent()}
-        visible={this.state.visible}
+        visible={visible}
         onVisibleChange={this.onVisibleChange}
       >
-        <Button size="small" type="dashed">
+        <Button size="small" type="dashed" data-test={`EditParamMappingButon-${mapping.param.name}`}>
           <Icon type="edit" />
         </Button>
       </Popover>

client/app/components/ParameterValueInput.jsx

@@ -185,7 +185,7 @@ class ParameterValueInput extends React.Component {
     const { isDirty } = this.state;
 
     return (
-      <div className="parameter-input" data-dirty={isDirty || null}>
+      <div className="parameter-input" data-dirty={isDirty || null} data-test="ParameterValueInput">
         {this.renderInput()}
       </div>
     );

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

@@ -214,14 +214,14 @@ class VisualizationWidget extends React.Component {
   };
 
   editParameterMappings = () => {
-    const { widget, dashboard, onParameterMappingsChange } = this.props;
+    const { widget, dashboard, onRefresh, onParameterMappingsChange } = this.props;
     EditParameterMappingsDialog.showModal({
       dashboard,
       widget,
     }).result.then((valuesChanged) => {
       // refresh widget if any parameter value has been updated
       if (valuesChanged) {
-        this.refresh();
+        onRefresh();
       }
       onParameterMappingsChange();
       this.setState({ localParameters: widget.getLocalParameters() });

client/app/pages/dashboards/dashboard.html

@@ -93,7 +93,7 @@ <h3>
     </label>
   </div>
 
-  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0">
+  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0" data-test="DashboardParameters">
     <parameters parameters="$ctrl.globalParameters" on-values-change="$ctrl.refreshDashboard"></parameters>
   </div>
 

client/cypress/integration/dashboard/parameter_mapping_spec.js

@@ -0,0 +1,137 @@
+import { createDashboard } from '../../support/redash-api';
+import { createQueryAndAddWidget } from '../../support/dashboard';
+
+describe('Parameter Mapping', () => {
+  beforeEach(function () {
+    cy.login();
+    createDashboard('Foo Bar').then(({ slug, id }) => {
+      this.dashboardId = id;
+      this.dashboardUrl = `/dashboard/${slug}`;
+    }).then(() => {
+      const queryData = {
+        name: 'Text Parameter',
+        query: "SELECT '{{test-parameter}}' AS parameter",
+        options: {
+          parameters: [
+            { name: 'test-parameter', title: 'Test Parameter', type: 'text', value: 'example' },
+          ],
+        },
+      };
+      const widgetOptions = { position: { col: 0, row: 0, sizeX: 3, sizeY: 10, autoHeight: false } };
+      createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then((widgetTestId) => {
+        cy.visit(this.dashboardUrl);
+        this.widgetTestId = widgetTestId;
+      });
+    });
+  });
+
+  const openMappingOptions = (widgetTestId, paramName) => {
+    cy.getByTestId(widgetTestId)
+      .within(() => {
+        cy.getByTestId('WidgetDropdownButton')
+          .click();
+      });
+
+    cy.getByTestId('WidgetDropdownButtonMenu')
+      .contains('Edit Parameters')
+      .click();
+
+    cy.getByTestId(`EditParamMappingButon-${paramName}`)
+      .click();
+  };
+
+  const saveMappingOptions = () => {
+    cy.getByTestId('EditParamMappingPopover')
+      .within(() => {
+        cy.contains('button', 'OK')
+          .click();
+      });
+
+    cy.contains('button', 'OK')
+      .click();
+  };
+
+  it('supports widget parameters', function () {
+    // widget parameter mapping is the default for the API
+    cy.getByTestId(this.widgetTestId)
+      .within(() => {
+        cy.getByTestId('TableVisualization')
+          .should('contain', 'example');
+
+        cy.getByTestId('ParameterName-test-parameter')
+          .find('input')
+          .type('{selectall}Redash');
+
+        cy.getByTestId('ParameterApplyButton')
+          .click();
+
+        cy.getByTestId('TableVisualization')
+          .should('contain', 'Redash');
+      });
+
+    cy.getByTestId('DashboardParameters')
+      .should('not.exist');
+  });
+
+  it('supports dashboard parameters', function () {
+    openMappingOptions(this.widgetTestId, 'test-parameter');
+
+    cy.getByTestId('NewDashboardParameterOption')
+      .click();
+
+    saveMappingOptions();
+
+    cy.getByTestId(this.widgetTestId)
+      .within(() => {
+        cy.getByTestId('ParameterName-test-parameter')
+          .should('not.exist');
+      });
+
+    cy.getByTestId('DashboardParameters')
+      .within(() => {
+        cy.getByTestId('ParameterName-test-parameter')
+          .find('input')
+          .type('{selectall}DashboardParam');
+
+        cy.getByTestId('ParameterApplyButton')
+          .click();
+      });
+
+    cy.getByTestId(this.widgetTestId)
+      .within(() => {
+        cy.getByTestId('TableVisualization')
+          .should('contain', 'DashboardParam');
+      });
+  });
+
+  it('supports static values for parameters', function () {
+    openMappingOptions(this.widgetTestId, 'test-parameter');
+
+    cy.getByTestId('StaticValueOption')
+      .click();
+
+    cy.getByTestId('EditParamMappingPopover')
+      .within(() => {
+        cy.getByTestId('ParameterValueInput')
+          .find('input')
+          .type('{selectall}StaticValue');
+      });
+
+    saveMappingOptions();
+
+    cy.getByTestId(this.widgetTestId)
+      .within(() => {
+        cy.getByTestId('ParameterName-test-parameter')
+          .should('not.exist');
+      });
+
+    cy.getByTestId('DashboardParameters')
+      .should('not.exist');
+
+    cy.getByTestId(this.widgetTestId)
+      .within(() => {
+        cy.getByTestId('TableVisualization')
+          .should('contain', 'StaticValue');
+      });
+  });
+});