Allow Parameters on Public Dashboards

client/app/pages/dashboards/ShareDashboardDialog.jsx

@@ -16,7 +16,7 @@ const API_SHARE_URL = 'api/dashboards/{id}/share';
 class ShareDashboardDialog extends React.Component {
   static propTypes = {
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-    hasQueryParams: PropTypes.bool.isRequired,
+    hasOnlySafeQueries: PropTypes.bool.isRequired,
     dialog: DialogPropType.isRequired,
   };
 
@@ -35,7 +35,7 @@ class ShareDashboardDialog extends React.Component {
     };
 
     this.apiUrl = replace(API_SHARE_URL, '{id}', dashboard.id);
-    this.disabled = this.props.hasQueryParams && !dashboard.publicAccessEnabled;
+    this.enabled = this.props.hasOnlySafeQueries || dashboard.publicAccessEnabled;
   }
 
   static get headerContent() {
@@ -104,10 +104,10 @@ class ShareDashboardDialog extends React.Component {
         footer={null}
       >
         <Form layout="horizontal">
-          {this.props.hasQueryParams && (
+          {!this.props.hasOnlySafeQueries && (
             <Form.Item>
               <Alert
-                message="Sharing is currently not supported for dashboards containing queries with parameters."
+                message="For your security, sharing is currently not supported for dashboards containing queries with text parameters. Consider changing the text parameters in your query to a different type."
                 type="error"
               />
             </Form.Item>
@@ -117,12 +117,13 @@ class ShareDashboardDialog extends React.Component {
               checked={dashboard.publicAccessEnabled}
               onChange={this.onChange}
               loading={this.state.saving}
-              disabled={this.disabled}
+              disabled={!this.enabled}
+              data-test="PublicAccessEnabled"
             />
           </Form.Item>
           {dashboard.public_url && (
             <Form.Item label="Secret address" {...this.formItemProps}>
-              <InputWithCopy value={dashboard.public_url} />
+              <InputWithCopy value={dashboard.public_url} data-test="SecretAddress" />
             </Form.Item>
           )}
         </Form>

client/app/pages/dashboards/dashboard.html

@@ -67,7 +67,7 @@ <h3>
           <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()" ng-if="!$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
             <span class="zmdi zmdi-fullscreen"></span>
           </button>
-          <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="($ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled) && !$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
+          <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="($ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled) && !$ctrl.dashboard.is_draft && !$ctrl.layoutEditing" data-test="OpenShareForm">
             <span class="zmdi zmdi-share"></span>
           </button>
       </span>

client/app/pages/dashboards/dashboard.js

@@ -428,15 +428,14 @@ function DashboardCtrl(
   }
 
   this.openShareForm = () => {
-    // check if any of the wigets have query parameters
-    const hasQueryParams = _.some(
+    const hasOnlySafeQueries = _.every(
       this.dashboard.widgets,
-      w => !_.isEmpty(w.getQuery() && w.getQuery().getParametersDefs()),
+      w => w.getQuery() && w.getQuery().is_safe,
     );
 
     ShareDashboardDialog.showModal({
       dashboard: this.dashboard,
-      hasQueryParams,
+      hasOnlySafeQueries,
     });
   };
 }

client/app/pages/dashboards/public-dashboard-page.html

@@ -1,6 +1,10 @@
-<div class="container p-t-10 p-b-20">
+<div class="container p-t-10 p-b-20" ng-if="$ctrl.dashboard" data-test="PublicDashboard">
   <page-header title="$ctrl.dashboard.name"></page-header>
 
+  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0">
+    <parameters parameters="$ctrl.globalParameters"></parameters>
+  </div>
+
   <div class="m-b-5">
     <filters filters="$ctrl.filters" on-change="$ctrl.filtersOnChange"></filters>
   </div>

client/app/pages/dashboards/public-dashboard-page.js

@@ -22,40 +22,43 @@ const PublicDashboardPage = {
 
     this.logoUrl = logoUrl;
     this.public = true;
-    this.dashboard.widgets = Dashboard.prepareDashboardWidgets(this.dashboard.widgets);
+    this.globalParameters = [];
 
-    const refreshRate = Math.max(30, parseFloat($location.search().refresh));
+    this.extractGlobalParameters = () => {
+      this.globalParameters = this.dashboard.getParametersDefs();
+    };
 
-    if (refreshRate) {
-      const refresh = () => {
-        loadDashboard($http, $route).then((data) => {
-          this.dashboard = data;
-          this.dashboard.widgets = Dashboard.prepareDashboardWidgets(this.dashboard.widgets);
+    $scope.$on('dashboard.update-parameters', () => {
+      this.extractGlobalParameters();
+    });
 
-          this.filters = []; // TODO: implement (@/services/dashboard.js:collectDashboardFilters)
-          this.filtersOnChange = (allFilters) => {
-            this.filters = allFilters;
-            $scope.$applyAsync();
-          };
+    const refreshRate = Math.max(30, parseFloat($location.search().refresh));
+
+    const refresh = () => {
+      loadDashboard($http, $route).then((data) => {
+        this.dashboard = new Dashboard(data);
+        this.dashboard.widgets = Dashboard.prepareDashboardWidgets(this.dashboard.widgets);
+        this.filters = []; // TODO: implement (@/services/dashboard.js:collectDashboardFilters)
+        this.filtersOnChange = (allFilters) => {
+          this.filters = allFilters;
+          $scope.$applyAsync();
+        };
 
-          $timeout(refresh, refreshRate * 1000.0);
-        });
-      };
+        this.extractGlobalParameters();
+      });
+    };
 
+    if (refreshRate) {
       $timeout(refresh, refreshRate * 1000.0);
     }
+
+    refresh();
   },
 };
 
 export default function init(ngModule) {
   ngModule.component('publicDashboardPage', PublicDashboardPage);
 
-  function loadPublicDashboard($http, $route) {
-    'ngInject';
-
-    return loadDashboard($http, $route);
-  }
-
   function session($http, $route, Auth) {
     const token = $route.current.params.token;
     Auth.setApiKey(token);
@@ -64,10 +67,9 @@ export default function init(ngModule) {
 
   ngModule.config(($routeProvider) => {
     $routeProvider.when('/public/dashboards/:token', {
-      template: '<public-dashboard-page dashboard="$resolve.dashboard"></public-dashboard-page>',
+      template: '<public-dashboard-page></public-dashboard-page>',
       reloadOnSearch: false,
       resolve: {
-        dashboard: loadPublicDashboard,
         session,
       },
     });

client/app/services/dashboard.js

@@ -181,7 +181,6 @@ function DashboardService($resource, $http, $location, currentUser, Widget, dash
 
   resource.prepareDashboardWidgets = prepareDashboardWidgets;
   resource.prepareWidgetsForDashboard = prepareWidgetsForDashboard;
-
   resource.prototype.getParametersDefs = function getParametersDefs() {
     const globalParams = {};
     const queryParams = $location.search();
@@ -190,7 +189,7 @@ function DashboardService($resource, $http, $location, currentUser, Widget, dash
         const mappings = widget.getParameterMappings();
         widget
           .getQuery()
-          .getParametersDefs()
+          .getParametersDefs(false)
           .forEach((param) => {
             const mapping = mappings[param.name];
             if (mapping.type === Widget.MappingType.DashboardLevel) {

client/app/services/query.js

@@ -231,13 +231,13 @@ class Parameters {
     return parameters;
   }
 
-  updateParameters() {
+  updateParameters(update) {
     if (this.query.query === this.cachedQueryText) {
       return;
     }
 
     this.cachedQueryText = this.query.query;
-    const parameterNames = this.parseQuery();
+    const parameterNames = update ? this.parseQuery() : map(this.query.options.parameters, p => p.name);
 
     this.query.options.parameters = this.query.options.parameters || [];
 
@@ -269,8 +269,8 @@ class Parameters {
     });
   }
 
-  get() {
-    this.updateParameters();
+  get(update = true) {
+    this.updateParameters(update);
     return this.query.options.parameters;
   }
 
@@ -576,8 +576,8 @@ function QueryResource(
     return this.$parameters;
   };
 
-  QueryService.prototype.getParametersDefs = function getParametersDefs() {
-    return this.getParameters().get();
+  QueryService.prototype.getParametersDefs = function getParametersDefs(update = true) {
+    return this.getParameters().get(update);
   };
 
   return QueryService;

client/app/services/widget.js

@@ -217,7 +217,7 @@ function WidgetFactory($http, $location, Query, dashboardGridOptions) {
 
       const existingParams = {};
       // textboxes does not have query
-      const params = this.getQuery() ? this.getQuery().getParametersDefs() : [];
+      const params = this.getQuery() ? this.getQuery().getParametersDefs(false) : [];
       each(params, (param) => {
         existingParams[param.name] = true;
         if (!isObject(this.options.parameterMappings[param.name])) {

client/cypress/integration/dashboard/dashboard_spec.js

@@ -107,6 +107,107 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('Sharing', () => {
+    beforeEach(function () {
+      createDashboard('Foo Bar').then(({ slug, id }) => {
+        this.dashboardId = id;
+        this.dashboardUrl = `/dashboard/${slug}`;
+      });
+    });
+
+    it('is possible if all queries are safe', function () {
+      const options = {
+        parameters: [{
+          name: 'foo',
+          type: 'number',
+        }],
+      };
+
+      const dashboardUrl = this.dashboardUrl;
+      createQuery({ options }).then(({ id: queryId }) => {
+        cy.visit(dashboardUrl);
+        editDashboard();
+        cy.contains('a', 'Add Widget').click();
+        cy.getByTestId('AddWidgetDialog').within(() => {
+          cy.get(`.query-selector-result[data-test="QueryId${queryId}"]`).click();
+        });
+        cy.contains('button', 'Add to Dashboard').click();
+        cy.getByTestId('AddWidgetDialog').should('not.exist');
+        cy.clickThrough({ button: `
+          Done Editing
+          Publish
+        ` },
+        `OpenShareForm
+        PublicAccessEnabled`);
+
+        cy.getByTestId('SecretAddress').should('exist');
+      });
+    });
+
+    it('is available to unauthenticated users', function () {
+      const options = {
+        parameters: [{
+          name: 'foo',
+          type: 'number',
+        }],
+      };
+
+      const dashboardUrl = this.dashboardUrl;
+      createQuery({ options }).then(({ id: queryId }) => {
+        cy.visit(dashboardUrl);
+        editDashboard();
+        cy.contains('a', 'Add Widget').click();
+        cy.getByTestId('AddWidgetDialog').within(() => {
+          cy.get(`.query-selector-result[data-test="QueryId${queryId}"]`).click();
+        });
+        cy.contains('button', 'Add to Dashboard').click();
+        cy.getByTestId('AddWidgetDialog').should('not.exist');
+        cy.clickThrough({ button: `
+          Done Editing
+          Publish
+        ` },
+        `OpenShareForm
+        PublicAccessEnabled`);
+
+        cy.getByTestId('SecretAddress').invoke('val').then((secretAddress) => {
+          cy.logout();
+          cy.visit(secretAddress);
+          cy.getByTestId('PublicDashboard', { timeout: 10000 }).should('exist');
+          cy.percySnapshot('Successfully Shared Parameterized Dashboard');
+        });
+      });
+    });
+
+    it('is not possible if some queries are not safe', function () {
+      const options = {
+        parameters: [{
+          name: 'foo',
+          type: 'text',
+        }],
+      };
+
+      const dashboardUrl = this.dashboardUrl;
+      createQuery({ options }).then(({ id: queryId }) => {
+        cy.visit(dashboardUrl);
+        editDashboard();
+        cy.contains('a', 'Add Widget').click();
+        cy.getByTestId('AddWidgetDialog').within(() => {
+          cy.get(`.query-selector-result[data-test="QueryId${queryId}"]`).click();
+        });
+        cy.contains('button', 'Add to Dashboard').click();
+        cy.getByTestId('AddWidgetDialog').should('not.exist');
+        cy.clickThrough({ button: `
+          Done Editing
+          Publish
+        ` },
+        'OpenShareForm');
+
+        cy.getByTestId('PublicAccessEnabled').should('be.disabled');
+      });
+    });
+  });
+
+
   describe('Textbox', () => {
     beforeEach(function () {
       createDashboard('Foo Bar').then(({ slug, id }) => {

client/cypress/support/commands.js

@@ -12,11 +12,31 @@ Cypress.Commands.add('login', (email = 'admin@redash.io', password = 'password')
 
 Cypress.Commands.add('logout', () => cy.request('/logout'));
 Cypress.Commands.add('getByTestId', element => cy.get('[data-test="' + element + '"]'));
-Cypress.Commands.add('clickThrough', (elements) => {
-  elements
-    .trim()
-    .split(/\s/)
-    .filter(Boolean)
-    .forEach(element => cy.getByTestId(element).click());
+
+/* Clicks a series of elements. Pass in a newline-seperated string in order to click all elements by their test id,
+ or enclose the above string in an object with 'button' as key to click the buttons by name. For example:
+
+  cy.clickThrough(`
+    TestId1
+    TestId2
+    TestId3
+    `, { button: `
+    Label of button 4
+    Label of button 5
+    ` }, `
+    TestId6
+    TestId7`);
+*/
+Cypress.Commands.add('clickThrough', (...args) => {
+  args.forEach((elements) => {
+    const names = elements.button || elements;
+
+    const click = element => (elements.button ?
+      cy.contains('button', element.trim()) :
+      cy.getByTestId(element.trim())).click();
+
+    names.trim().split(/\n/).filter(Boolean).forEach(click);
+  });
+
   return undefined;
 });

redash/handlers/authentication.py

@@ -258,6 +258,18 @@ def messages():
     return messages
 
 
+def messages():
+    messages = []
+
+    if not current_user.is_email_verified:
+        messages.append('email-not-verified')
+
+    if settings.ALLOW_PARAMETERS_IN_EMBEDS:
+        messages.append('using-deprecated-embed-feature')
+
+    return messages
+
+
 @routes.route('/api/config', methods=['GET'])
 def config(org_slug=None):
     return json_response({