Fix: triggers not created for queries.search_vector (#3634)

This reverts commit 4768fd081e.

.circleci/Dockerfile.cypress

@@ -0,0 +1,12 @@
+FROM cypress/browsers:chrome67
+
+ENV APP /usr/src/app
+WORKDIR $APP
+
+COPY package.json $APP/package.json
+RUN npm run cypress:install > /dev/null
+
+COPY cypress $APP/cypress
+COPY cypress.json $APP/cypress.json
+
+RUN ./node_modules/.bin/cypress verify

.circleci/config.yml

@@ -34,7 +34,7 @@ jobs:
           command: docker-compose run --rm postgres psql -h postgres -U postgres -c "create database tests;"
       - run:
           name: Run Tests
-          command: docker-compose run --name tests redash tests --junitxml=junit.xml tests/
+          command: docker-compose run --name tests redash tests --junitxml=junit.xml --cov-report xml --cov=redash --cov-config .coveragerc tests/
       - run:
           name: Copy Test Results
           command: |
@@ -58,6 +58,7 @@ jobs:
     environment:
       COMPOSE_FILE: .circleci/docker-compose.cypress.yml
       COMPOSE_PROJECT_NAME: cypress
+      PERCY_TOKEN_ENCODED: ZGRiY2ZmZDQ0OTdjMzM5ZWE0ZGQzNTZiOWNkMDRjOTk4Zjg0ZjMxMWRmMDZiM2RjOTYxNDZhOGExMjI4ZDE3MA==
     docker:
       - image: circleci/node:8
     steps:
@@ -65,15 +66,16 @@ jobs:
       - checkout
       - run:
           name: Install npm dependencies
-          command: npm install
+          command: |
+            npm install
       - run:
           name: Setup Redash server
           command: |
-            npm run cypress:server start-ci
-            docker-compose run cypress node ./cypress/cypress-server.js setup
+            npm run cypress start
+            docker-compose run cypress node ./cypress/cypress.js db-seed
       - run:
           name: Execute Cypress tests
-          command: docker-compose run cypress ./node_modules/.bin/cypress run
+          command: npm run cypress run-ci
   build-tarball:
     docker:
       - image: circleci/node:8
@@ -81,9 +83,9 @@ jobs:
       - checkout
       - run: sudo apt install python-pip
       - run: npm install
+      - run: .circleci/update_version
       - run: npm run bundle
       - run: npm run build
-      - run: .circleci/update_version
       - run: .circleci/pack
       - store_artifacts:
           path: /tmp/artifacts/
@@ -94,9 +96,7 @@ jobs:
       - setup_remote_docker
       - checkout
       - run: .circleci/update_version
-      - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
-      - run: docker build -t redash/redash:$(.circleci/docker_tag) .
-      - run: docker push redash/redash:$(.circleci/docker_tag)
+      - run: .circleci/docker_build
 workflows:
   version: 2
   build:
@@ -107,21 +107,23 @@ workflows:
       - frontend-unit-tests
       - frontend-e2e-tests
       - build-tarball:
-           requires:
-             - backend-unit-tests
-           filters:
-             tags:
-               only: /v[0-9]+(\.[0-9\-a-z]+)*/
-             branches:
-               only:
-                 - master
-                 - /release\/.*/
+          requires:
+            - backend-unit-tests
+            - frontend-unit-tests
+            - frontend-e2e-tests
+          filters:
+            branches:
+              only:
+                - master
+                - /release\/.*/
       - build-docker-image:
-           requires:
-             - backend-unit-tests
-           filters:
-             branches:
-               only:
-                 - master
-                 - preview-build
-                 - /release\/.*/
+          requires:
+            - backend-unit-tests
+            - frontend-unit-tests
+            - frontend-e2e-tests
+          filters:
+            branches:
+              only:
+                - master
+                - preview-image
+                - /release\/.*/

.circleci/docker-compose.cypress.yml

@@ -23,17 +23,21 @@ services:
       REDASH_LOG_LEVEL: "INFO"
       REDASH_REDIS_URL: "redis://redis:6379/0"
       REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-      QUEUES: "queries,scheduled_queries,celery"
+      QUEUES: "queries,scheduled_queries,celery,schemas"
       WORKERS_COUNT: 2
   cypress:
     build:
       context: ../
-      dockerfile: Dockerfile.cypress
+      dockerfile: .circleci/Dockerfile.cypress
     depends_on:
       - server
       - worker
     environment:
       CYPRESS_baseUrl: "http://server:5000"
+      PERCY_TOKEN: ${PERCY_TOKEN}
+      PERCY_BRANCH: ${CIRCLE_BRANCH}
+      PERCY_COMMIT: ${CIRCLE_SHA1}
+      PERCY_PULL_REQUEST: ${CIRCLE_PR_NUMBER}
   redis:
     image: redis:3.0-alpine
     restart: unless-stopped

.circleci/docker_build

@@ -0,0 +1,17 @@
+#!/bin/bash
+VERSION=$(jq -r .version package.json)
+VERSION_TAG=$VERSION.b$CIRCLE_BUILD_NUM
+
+docker login -u $DOCKER_USER -p $DOCKER_PASS
+
+if [ $CIRCLE_BRANCH = master ] || [ $CIRCLE_BRANCH = preview-image ]
+then
+    docker build -t redash/redash:preview -t redash/preview:$VERSION_TAG .
+    docker push redash/redash:preview
+    docker push redash/preview:$VERSION_TAG
+else
+    docker build -t redash/redash:$VERSION_TAG .
+    docker push redash/redash:$VERSION_TAG
+fi
+
+echo "Built: $VERSION_TAG"

.circleci/docker_tag

@@ -1,10 +0,0 @@
-#!/bin/bash
-if [ $CIRCLE_BRANCH = master ] || [ $CIRCLE_BRANCH = preview-build ]
-then
-    FULL_VERSION='preview'
-else
-    VERSION=$(jq -r .version package.json)
-    FULL_VERSION=$VERSION.b$CIRCLE_BUILD_NUM
-fi
-
-echo $FULL_VERSION

.codeclimate.yml

@@ -1,22 +1,40 @@
-engines:
+version: "2"
+checks:
+  complex-logic:
+    enabled: false
+  file-lines:
+    enabled: false
+  method-complexity:
+    enabled: false
+  method-count:
+    enabled: false
+  method-lines:
+    config:
+      threshold: 100
+  nested-control-flow:
+    enabled: false
+  identical-code:
+    enabled: false
+  similar-code:
+    enabled: false
+plugins:
   pep8:
     enabled: true
   eslint:
     enabled: true
-    channel: "eslint-3"
+    channel: "eslint-5"
     config:
       config: client/.eslintrc.js
     checks:
       import/no-unresolved:
         enabled: false
-ratings:
-  paths:
-  - "redash/**/*.py"
-  - "client/**/*.js"
-exclude_paths:
-- tests/**/*.py
-- migrations/**/*.py
-- old_migrations/**/*.py
-- setup/**/*
-- bin/**/*
-
+      no-multiple-empty-lines: # TODO: Enable
+        enabled: false
+exclude_patterns:
+- "tests/**/*.py"
+- "migrations/**/*.py"
+- "setup/**/*"
+- "bin/**/*"
+- "**/node_modules/"
+- "client/dist/"
+- "**/*.pyc"

.dockerignore

@@ -3,4 +3,12 @@ client/dist/
 node_modules/
 .tmp/
 .venv/
+venv/
 .git/
+/.codeclimate.yml
+/.coverage
+/coverage.xml
+/.circleci/
+/.github/
+/netlify.toml
+/setup/

.github/ISSUE_TEMPLATE.md

@@ -1,34 +0,0 @@
-<!--
-#####################################################################
-#
-# Need support? USE THE FORUM! https://discuss.redash.io/c/support.
-#
-# Don't have steps to reproduce and actually not sure it's a bug?
-# Use the forum! https://discuss.redash.io/c/support.
-#
-#####################################################################
-
-**Got an idea for a new feature?** Check if it isn't on the roadmap already: https://bit.ly/redash-roadmap and start a new discussion in the features category: https://discuss.redash.io/c/feature-requests 🌟.
-
-Found a bug? Please fill out the sections below... thank you 👍
-
-Found a security vulnerability? Please email security@redash.io to report any security vulnerabilities. We will acknowledge receipt of your vulnerability and strive to send you regular updates about our progress. If you're curious about the status of your disclosure please feel free to email us again. If you want to encrypt your disclosure email, you can use this PGP key.
-
--->
-
-### Issue Summary
-
-A summary of the issue and the browser/OS environment in which it occurs.
-
-### Steps to Reproduce
-
-1. This is the first step
-2. This is the second step, etc.
-
-Any other info e.g. Why do you consider this to be a bug? What did you expect to happen instead?
-
-### Technical details:
-
-* Redash Version:
-* Browser/OS:
-* How did you install Redash:

.github/ISSUE_TEMPLATE/---bug_report.md

@@ -0,0 +1,34 @@
+---
+name: "\U0001F41B Bug report"
+about: Report reproducible software issues so we can improve
+---
+
+<!--
+
+We use GitHub only for bug reports 🐛
+
+Anything else should be posted to https://discuss.redash.io 👫
+
+🚨For support, help & questions use https://discuss.redash.io/c/support
+💡For feature requests & ideas use https://discuss.redash.io/c/feature-requests
+
+**Found a security vulnerability?** Please email security@redash.io to report any security vulnerabilities. We will acknowledge receipt of your vulnerability and strive to send you regular updates about our progress. If you're curious about the status of your disclosure please feel free to email us again. If you want to encrypt your disclosure email, you can use this PGP key.
+
+-->
+
+### Issue Summary
+
+A summary of the issue and the browser/OS environment in which it occurs.
+
+### Steps to Reproduce
+
+1. This is the first step
+2. This is the second step, etc.
+
+Any other info e.g. Why do you consider this to be a bug? What did you expect to happen instead?
+
+### Technical details:
+
+* Redash Version:
+* Browser/OS:
+* How did you install Redash:

.github/ISSUE_TEMPLATE/--anything_else.md

@@ -0,0 +1,17 @@
+---
+name: "\U0001F4A1Anything else"
+about: "For help, support, features & ideas - please use https://discuss.redash.io \U0001F46B "
+labels: "Support Question"
+---
+
+We use GitHub only for bug reports 🐛
+
+Anything else should be posted to https://discuss.redash.io 👫
+
+🚨For support, help & questions use https://discuss.redash.io/c/support
+💡For feature requests & ideas use https://discuss.redash.io/c/feature-requests
+
+Alternatively, check out these resources below. Thanks! 😁.
+
+- [Forum](https://disucss.redash.io)
+- [Knowledge Base](https://redash.io/help)

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+## What type of PR is this? (check all applicable)
+<!-- Please leave only what's applicable -->
+
+- [ ] Refactor
+- [ ] Feature
+- [ ] Bug Fix
+- [ ] New Query Runner (Data Source)
+- [ ] New Alert Destination
+- [ ] Other
+
+## Description
+
+## Related Tickets & Documents
+
+## Mobile & Desktop Screenshots/Recordings (if there are UI changes)

.github/support.yml

@@ -0,0 +1,23 @@
+# Configuration for Support Requests - https://github.com/dessant/support-requests
+
+# Label used to mark issues as support requests
+supportLabel: Support Question
+
+# Comment to post on issues marked as support requests, `{issue-author}` is an
+# optional placeholder. Set to `false` to disable
+supportComment: >
+  :wave: @{issue-author}, we use the issue tracker exclusively for bug reports
+  and planned work. However, this issue appears to be a support request.
+  Please use [our forum](https://discuss.redash.io) to get help.
+
+# Close issues marked as support requests
+close: true
+
+# Lock issues marked as support requests
+lock: false
+
+# Assign `off-topic` as the reason for locking. Set to `false` to disable
+setLockReason: true
+
+# Repository to extend settings from
+# _extends: repo

.github/weekly-digest.yml

@@ -0,0 +1,7 @@
+# Configuration for weekly-digest - https://github.com/apps/weekly-digest
+publishDay: mon
+canPublishIssues: true
+canPublishPullRequests: true
+canPublishContributors: true
+canPublishStargazers: true
+canPublishCommits: true

CHANGELOG.md

@@ -1,27 +1,132 @@
 # Change Log
 
+## v7.0.0 - 2019-03-17
+
+We're trying a new format for the CHANGELOG in this release. Focusing on the bigger changes, but for whoever interested, you can see all the changes [here](https://github.com/getredash/redash/compare/v6.0.0...master).
+
+Besides all the features, bug fixes and improvements listed below we managed to convert a large portion of Redash's frontend code from Angular.js to React. You can see status in [#3071](https://github.com/getredash/redash/issues/3071).
+
+This release was made possible with the help of 34 contributors. 🙇‍♂️
+
+### Data Sources
+
+- **All data source options are now encrypted in the database.** By default the encryption uses the `REDASH_COOKIE_SECRET` value (`redash.settings.COOKIE_SECRET`), but you can specify a different value by setting the `REDASH_SECRET_KEY` environment variable value. Note that you need to set this _before_ doing the upgrade.
+- New Data Sources: Uptycs and Apache Drill.
+- Snowplow: is now enabled by default & supports region setting.
+- Elasticsearch: add support for Amazon Elasticsearch IAM authentication (with IAM profile or key/secret pair).
+- PostgreSQL: add support for serializing range values.
+- Redshift: remove duplicate column information for late-binding views.
+- Athena: load all databases (using pagination).
+- BigQuery: correctly handle temp tables with no schema field.
+- Jira (JQL): support for fetching all records with pagination.
+- Prometheus: fix schema loading and add support for query range.
+
+### In-app Help
+
+You can now open the [Knowledge Base](https://redash.io/help) inside the application. We also added a few "help triggers" in the app, that will open the Knowledge Base in context of what you're currently doing.
+
+### Parameters
+
+- **Dashboard Parameters**: We improved the flow of adding queries with parameters to dashboards and now give you full control over how parameters are mapped. You no longer have to make sure all parameters have the same name or use the `Global` checkbox. We also added new options, like keeping the parameter local to the widget or setting a static value. [Read more in our Knowledge Base →](https://redash.io/help/user-guide/querying/query-parameters#Parameter-Mapping-on-Dashboards)
+- We added server side validation of parameter values for all parameter types, except for parameters of `text` type. All validated parameter types are considered safe. When a query is using safe parameters (or no parameters at all), View Only users can refresh it.
+- Refreshing safe queries is done using the new results API endpoint, which takes only a query ID (and optionally parameter values) and does not need the query text.
+
+### Query Editor Improvements
+
+- Run only the highlighted query text: hit Execute after highlighting a portion of your query and only the selected portion will be sent to the database. This is useful for testing sub-SELECT statements and CTE's.
+- Improved auto complete: add a dot . after a table name in the query editor and auto complete will only suggest columns on that table.
+- Autosave parameter configuration changes.
+- YAML syntax support (for data sources like Yandex Metrica).
+
+### Improved Query Scheduler
+
+The Query Scheduler got a face lift and some new options: you can pick a day for a weekly schedule to run on and also set an end date after which the query will no longer execute on schedule.
+
+### Data Sources
+
+We added Apache Drill, Uptycs and a new JSON data source. Also fixed a few bugs in Athena's query runner and others.
+
+### User Management
+
+The users page got revamped with a new look and feel and few new features:
+
+- An indication when a user was last active.
+- Show if an invited user hasn't finished the setup process yet (Pending Invitations section).
+- You can now generate a new API key for users, if there's a concern it was compromised.
+
+### Admin
+
+- New Celery queues status screens, replacing the old Queries Status and better reflecting the status of running queries.
+- Make the queue name for schema refresh job configurable. The default used to be hard coded `schemas`, which is not available on all setups. Now it's `celery`.
+- The `gevent` library is installed by default, and you can now setup gunicorn to use `gevent` based workers.
+- New Docker entrypoint command to do a health check for a worker process.
+- Flask-Admin is no longer setup or supported.
+
+### Other Changes
+
+- New Alert destination: Google Hangouts Chat.
+- When downloading results from the results API it will set a user friendly filename for the downloaded file.
+- Archived Queries section added to the queries list.
+
+### Bug Fixes
+
+- Fixed: fork query does not fork tables but instead adds default table.
+- Fixed: when deleting a visualization, any widget using it was left empty on the dashboard.
+- Fixed: issues with Query Editor resizing on new versions of Chrome.
+- Fixed: issues with exporting dictionaries to Excel.
+- Fixed: Cohort visualization gets stuck when passing string values.
+- Fixed: use series name for Pie chart label.
+- Make sure Flask app created in Celery's worker process (could cause some query runners to get stuck while running queries).
+
+## v6.0.0 - 2018-12-16
+
+v6.0.0 release version. Mainly includes fixes for regressions from the beta version.
+
+This release had contributions from 5 people: @rauchy, @denisov-vlad, @arikfr, @ariarijp, and @gabrieldutra. Thank you, everyone 🙏
+
+### Changed
+
+- #3183 Make refresh_queries less noisey in logs. @arikfr
+
+### Fixed
+
+- #3163 Include correct version in production builds. @rauchy
+- #3161 Clickhouse: fix int() conversion error. @denisov-vlad
+- #3166 Directly using record_event task requires timestamp. @arikfr
+- #3167 Alert.evaluate failing when the column is missing. @arikfr
+- ##3162 Remove API permissions for users who have been disabled. @rauchy
+- #3171 Reject empty query name. @ariarijp
+- #3175, #3186 Fix disable error message. @rauchy, @gabrieldutra
+- #3182 [Redshift] support for schema names with dots. @arikfr
+- #3187 Safely create_app in Celery code (try to fetch current_app first). @arikfr
+
+### Other
+
+- #3155 Add DB Seed to Cypress and setup Percy. @gabrieldutra
+- #3180 Remove coverage from pytest terminal output. @rauchy
+
 ## v6.0.0-beta - 2018-12-03
 
-This release was 2 months in the making and it is full with good stuff! 
+This release was 2 months in the making and it is full with good stuff!
 
-* We have 5 new data sources: Databricks, IBM DB2, Kylin, Druid and Rockset. ⌗
-* There are fixes and improvements to 11 existing data sources (MySQL, Redshift, Postgres, MongoDB, Google BigQuery, Vertica, TreasureData, Presto, ClickHouse, Google Sheets and Google Analytics).
-* The Query Results data source can now load cached results, just use the `cached_query_` prefix instead of `query_`.
-* On the visualizations front we added a Heatmap visualization and did updated the table and counter visualizations.
-* Alerts got some fixes and a new destination: PagerDuty.
-* If the live autocomplete in the code editor annoys you, you can disable it now (although we're working to make it better, see #3092).
-* Fast queries will now load faster. 🏃‍♂️
-* We improved the layout of visualizations and content on smaller screen sizes. 📱
-* For those of you who like sharing, you can now enable the ability to share ownership of queries and dashboards and let others to edit them. Check the Settings page to enable this feature.
+- We have 5 new data sources: Databricks, IBM DB2, Kylin, Druid and Rockset. ⌗
+- There are fixes and improvements to 11 existing data sources (MySQL, Redshift, Postgres, MongoDB, Google BigQuery, Vertica, TreasureData, Presto, ClickHouse, Google Sheets and Google Analytics).
+- The Query Results data source can now load cached results, just use the `cached_query_` prefix instead of `query_`.
+- On the visualizations front we added a Heatmap visualization and did updated the table and counter visualizations.
+- Alerts got some fixes and a new destination: PagerDuty.
+- If the live autocomplete in the code editor annoys you, you can disable it now (although we're working to make it better, see #3092).
+- Fast queries will now load faster. 🏃‍♂️
+- We improved the layout of visualizations and content on smaller screen sizes. 📱
+- For those of you who like sharing, you can now enable the ability to share ownership of queries and dashboards and let others to edit them. Check the Settings page to enable this feature.
 
-There were also important changes to the code and infrastructure: 
+There were also important changes to the code and infrastructure:
 
-* More components moved to React.
-* We switched to Webpack 4 with the help of @dmonego.
-* We upgraded to Celery 4 with the help of @emtwo, @jezdez, @mashrikt and @atharvai.
-* We started moving towards Python 3 for our backend. The first step was to make sure our code pass basic sanity tests with Flake 8, which was implemented by @cclauss.
-* We improved our testing on the frontend by adding setup for Jest tests and E2E testing using Cypress (@gabrieldutra).
-* Each pull request now gets a deploy preview using Netlify to easily test frontend changes.
+- More components moved to React.
+- We switched to Webpack 4 with the help of @dmonego.
+- We upgraded to Celery 4 with the help of @emtwo, @jezdez, @mashrikt and @atharvai.
+- We started moving towards Python 3 for our backend. The first step was to make sure our code pass basic sanity tests with Flake 8, which was implemented by @cclauss.
+- We improved our testing on the frontend by adding setup for Jest tests and E2E testing using Cypress (@gabrieldutra).
+- Each pull request now gets a deploy preview using Netlify to easily test frontend changes.
 
 This is just a summary, you're welcome to review the full list below. ⬇
 
@@ -29,226 +134,220 @@ This release had contributions from 38 people: @arikfr, @kravets-levko, @jezdez,
 
 ### Added
 
-* #2747, #3143 Add a new Databricks query runner. @alison985, @jezdez, @arikfr
-* #2767 Add ability to add viz to dashboard from query edit page. @alison985, @jezdez
-* #2780 Add a query autocomplete toggle. @alison985, @jezdez, @arikfr
-* #2768 Add authentication via JWT providers. @SakuradaJun
-* #2790 Add the ability to sort favorited queries, paginate the dashboard list and improve UI inconsistencies. @jezdez
-* #2681 Add ability to search table column names in schema browser. @alison985
-* #2855 Add option to query cached results. @yoavbls
-* #2740 Add ability for extensions to add periodic tasks. @emtwo
-* #2924 Google Spreadsheets: Add support for opening by URL. @alexanderlz
-* #2903 Add PagerDuty as an Alert Destination. @alexanderlz
-* #2824 Add support for expanding dashboard visualizations. @sjakthol
-* #2900 Add ability to specify a counter label. @ralphilius
-* #2565 Add frontend extension capabilities. @emtwo
-* #2848 Add IBM Db2 as a data source using the ibm-db Python package. @nicof38
-* #2959 Add option to auto reload widget data in shared dashboards. @arikfr
-* #2993 Add page size settings. @kyoshidajp
-* #2080 New Heatmap chart visualization with Plotly. @deecay
-* #2991 Show users in CLI group list. @GitSumito
-* #2342 New SQLPARSE_FORMAT_OPTIONS setting to configure query formatter. @ariarijp
-* #3031 Add some tests for Query Results. @ariarijp
-* #2936 Add Kylin data source. @Trigl
-* #3047 Add Druid data source. @rauchy
-* #3077 New user interface for the feature flag of the share edit permissions feature. @arikfr
-* #3007 Add permissions to the result of "manage.py groups list" command. @Udomomo
-* #3088 Add get_current_user() fuction for the Python query runner. @kyoshidajp
-* #3114 Add event tracking to autocomplete toggle. @arikfr
-* #3068 Add Rockset query runner. @igorcanadi, @arikfr
-* #3105 Display frontend version. @rauchy
+- #2747, #3143 Add a new Databricks query runner. @alison985, @jezdez, @arikfr
+- #2767 Add ability to add viz to dashboard from query edit page. @alison985, @jezdez
+- #2780 Add a query autocomplete toggle. @alison985, @jezdez, @arikfr
+- #2768 Add authentication via JWT providers. @SakuradaJun
+- #2790 Add the ability to sort favorited queries, paginate the dashboard list and improve UI inconsistencies. @jezdez
+- #2681 Add ability to search table column names in schema browser. @alison985
+- #2855 Add option to query cached results. @yoavbls
+- #2740 Add ability for extensions to add periodic tasks. @emtwo
+- #2924 Google Spreadsheets: Add support for opening by URL. @alexanderlz
+- #2903 Add PagerDuty as an Alert Destination. @alexanderlz
+- #2824 Add support for expanding dashboard visualizations. @sjakthol
+- #2900 Add ability to specify a counter label. @ralphilius
+- #2565 Add frontend extension capabilities. @emtwo
+- #2848 Add IBM Db2 as a data source using the ibm-db Python package. @nicof38
+- #2959 Add option to auto reload widget data in shared dashboards. @arikfr
+- #2993 Add page size settings. @kyoshidajp
+- #2080 New Heatmap chart visualization with Plotly. @deecay
+- #2991 Show users in CLI group list. @GitSumito
+- #2342 New SQLPARSE_FORMAT_OPTIONS setting to configure query formatter. @ariarijp
+- #3031 Add some tests for Query Results. @ariarijp
+- #2936 Add Kylin data source. @Trigl
+- #3047 Add Druid data source. @rauchy
+- #3077 New user interface for the feature flag of the share edit permissions feature. @arikfr
+- #3007 Add permissions to the result of "manage.py groups list" command. @Udomomo
+- #3088 Add get_current_user() fuction for the Python query runner. @kyoshidajp
+- #3114 Add event tracking to autocomplete toggle. @arikfr
+- #3068 Add Rockset query runner. @igorcanadi, @arikfr
+- #3105 Display frontend version. @rauchy
 
 ### Changed
 
-* #2636 Rewrite query editor with React. @washort, @arikfr
-* #2637 Convert edit-in-place component to React. @washort, @arikfr
-* #2766 Suitable events are now being recorded server side instead of in the frontend. @alison985, @jezdez
-* #2796 Change placement (right/bottom) of chart legend depending on chart width. @kravets-levko
-* #2833 Uses server side sort order for tag list and show count of tagged items. @jezdez
-* #2318 Support authentication for the URL data source. @jezdez
-* #2884 Rename Yandex Metrika to Metrica. @jezdez
-* #2909 MySQL: hide sys tables. @arikfr
-* #2817 Consistently use simplejson for loading and dumping JSON. @jezdez
-* #2872 Use Plotly's function to clean y-values (x may be category or date/time). @kravets-levko
-* #2938 Auto focus tag input. @kyoshidajp
-* #2927 Design refinements for queries pages. @kocsmy
-* #2950 Show activity status in CLI user list. @GitSumito
-* #2968 Presto data source: setting protocol (http/https), safe loading of error messages. @arikfr
-* #2967 Show groups in CLI user list. @GitSumito
-* #2603 MongoDB: Update requirements to support srv. @arikfr
-* #2961 MongoDB: Skip system collections when loading schema. @arikfr
-* #2960 Add timeout to various HTTP requests. @arikfr
-* #2983 Databricks: New logo, updated name and enabled by default. @arikfr
-* #2982 Table visualization: change default size to 25 and add more size options. @arikfr
-* #2866 Redshift: Hide tables the configured user cannot access. @sjakthol
-* #3058 Mustache: don't html-escape query parameters values. @kravets-levko
-* #3079 Always use basic autocomplete, as well as the live autocomplete. @arikfr
-* #3084 Support tel://, sms://, mailto:// links in query results. @zhujunsan
-* #3083 Clickhouse: Add WITH TOTALS option support. @denisov-vlad
-* #3063 Allow setting colors for bubble charts. @toph
-* #3085 BigQuery: Switch to Standard SQL as the default. @kyoshidajp
-* #3094 Tags autocomplete: Show note when creating a new label. @kravets-levko
-* #2984 Autocomplete toggle improvements. @arikfr
-* #3089 Open new tab when forking a query. @kyoshidajp
-* #3126 MongoDB: add support for sorting columns. @arikfr
-* #3128 Improve backoff algorithm of query results polling to speed it up. @arikfr
-* #3125 Vertica: update driver & add support for connection timeout. @arikfr
-* #3124 Support unicode in Postgres/Redshift schema. @arikfr
-* #3138 Migrate all tags components to React. @kravets-levko
-* #3139 Better manage permissions modal. @kocsmy
-* #3149 Improve tag link colors and fix group tags on Users page. @kocsmy
-* #3146 Update, replace and fix new alert destination logos so it fits better. @kocsmy
-* #3147 Add and improve recent db logos that didn't fit in size properly. @kocsmy
-* #3148 Fix label positioning on no found screen. @kocsmy
-* #3156 json_dumps: add support for serializing buffer objects. @arikfr
+- #2636 Rewrite query editor with React. @washort, @arikfr
+- #2637 Convert edit-in-place component to React. @washort, @arikfr
+- #2766 Suitable events are now being recorded server side instead of in the frontend. @alison985, @jezdez
+- #2796 Change placement (right/bottom) of chart legend depending on chart width. @kravets-levko
+- #2833 Uses server side sort order for tag list and show count of tagged items. @jezdez
+- #2318 Support authentication for the URL data source. @jezdez
+- #2884 Rename Yandex Metrika to Metrica. @jezdez
+- #2909 MySQL: hide sys tables. @arikfr
+- #2817 Consistently use simplejson for loading and dumping JSON. @jezdez
+- #2872 Use Plotly's function to clean y-values (x may be category or date/time). @kravets-levko
+- #2938 Auto focus tag input. @kyoshidajp
+- #2927 Design refinements for queries pages. @kocsmy
+- #2950 Show activity status in CLI user list. @GitSumito
+- #2968 Presto data source: setting protocol (http/https), safe loading of error messages. @arikfr
+- #2967 Show groups in CLI user list. @GitSumito
+- #2603 MongoDB: Update requirements to support srv. @arikfr
+- #2961 MongoDB: Skip system collections when loading schema. @arikfr
+- #2960 Add timeout to various HTTP requests. @arikfr
+- #2983 Databricks: New logo, updated name and enabled by default. @arikfr
+- #2982 Table visualization: change default size to 25 and add more size options. @arikfr
+- #2866 Redshift: Hide tables the configured user cannot access. @sjakthol
+- #3058 Mustache: don't html-escape query parameters values. @kravets-levko
+- #3079 Always use basic autocomplete, as well as the live autocomplete. @arikfr
+- #3084 Support tel://, sms://, mailto:// links in query results. @zhujunsan
+- #3083 Clickhouse: Add WITH TOTALS option support. @denisov-vlad
+- #3063 Allow setting colors for bubble charts. @toph
+- #3085 BigQuery: Switch to Standard SQL as the default. @kyoshidajp
+- #3094 Tags autocomplete: Show note when creating a new label. @kravets-levko
+- #2984 Autocomplete toggle improvements. @arikfr
+- #3089 Open new tab when forking a query. @kyoshidajp
+- #3126 MongoDB: add support for sorting columns. @arikfr
+- #3128 Improve backoff algorithm of query results polling to speed it up. @arikfr
+- #3125 Vertica: update driver & add support for connection timeout. @arikfr
+- #3124 Support unicode in Postgres/Redshift schema. @arikfr
+- #3138 Migrate all tags components to React. @kravets-levko
+- #3139 Better manage permissions modal. @kocsmy
+- #3149 Improve tag link colors and fix group tags on Users page. @kocsmy
+- #3146 Update, replace and fix new alert destination logos so it fits better. @kocsmy
+- #3147 Add and improve recent db logos that didn't fit in size properly. @kocsmy
+- #3148 Fix label positioning on no found screen. @kocsmy
+- #3156 json_dumps: add support for serializing buffer objects. @arikfr
 
 ### Fixed
 
-* #2849 Fix invalid reference to alert.to_dict() in webhook. @wankdanker
-* #2840 Improve counter visualization text scaling. @kravets-levko
-* #2854 Widget titles are no longer rendered wrong on public dashboards. @kravets-levko
-* #2318 Removed redundant exception handling in data sources since that's handled in the query backend. @jezdez
-* #2886 Fix Javascript build that broke because registerAll tried to run EditInPlace component. @arikfr
-* #2911 Don’t show “Add to dashboard” in dropdown to unsaved queries. @jezdez
-* #2916 Fix export query results output file name. @gabrieldutra
-* #2917 Fix output file name not changing after rename query. @gabrieldutra
-* #2868 Address edge case when retrieving Glue schemas for Athena data source. @kadrach
-* #2929 Fix: date value in a filter is duplicated. @combineads
-* #2875 Unbreak charts with long legend break in horizontal mode. Update plotly.js. @kravets-levko
-* #2937 Fix event recording in admin API backend. @kyoshidajp
-* #2953 Minor fixes for the Clickhouse data source. @denisov-vlad
-* #2941 Bring back fix to Box plot hover. @arikfr
-* #2957 Apply missing CSS classes to EditInPlace component. @arikfr
-* #2897 Show "Add description" only after saving the query. @arikfr
-* #2922 Query page layout improvements for small screens. @kravets-levko
-* #2956 Clickhouse: move timeout to params. @denisov-vlad
-* #2964 Fix no tags shown when having empty set. @gabrieldutra
-* #2757 Use full text search ranking when searching in list views. @jezdez
-* #2969 Query Results data source: improved errors, quoted column names. @arikfr
-* #2906 Preventing open redirection in loging process. @kyoshidajp
-* #2867 TreasureData: Deduplicate column names. @zaimy
-* #2994 Fix scheme of various URLs from http to https. @kyoshidajp
-* #2992 Fix an invalid prop type warning in new version notifier. @kyoshidajp
-* #3022 Fix Toolbox covering part of a chart. @kravets-levko
-* #2998 Fix charts losing responsive features after refreshing the dashboard. @kravets-levko
-* #3034 Postgres: handle NaN/Infinity values. @kravets-levko
-* #2745 Sort columns with undefined values. @Yossi-a
-* #3041 Sort CLI output of lists. @GitSumito
-* #2803, #3006 Address various tag display issues on query list page. @kocsmy, @alison985
-* #3049 Fix edit-in-place component which ignored isEditable flag and didn't work on Groups page. @kravets-levko
-* #2965 Google Analytics: Fix crash when no results are returned. @alexanderlz
-* #3061 Fix table visualization so that the horizontal scrollbar is not be always visible. @kravets-levko
-* #3076 Add white-space padding to separators in the footer. @burnash
-* #2919 Fix URL data source to not require a URL. @arikfr
-* #3098 Force AngularJS to update query editor properly. @washort
-* #3100 Delete redundant regex segment in query result frontend. @zhujunsan
-* #2978 Prevent the query update timestamp from changing when it is linked to new query results. @rauchy
-* #3046 Fix query page header. @kravets-levko
-* #3097 Mongo: Fix collection fields retreival bug when Views are present. @jodevsa
-* #3107 Keep query text in local state for now. @washort
-* #3111 Fix mobile padding issues on Query results. @kocsmy
-* #3122 Show menu divider only if query is archived. @jezdez
-* #3120 Fix tag counts for dashboards and queries. @jezdez
-* #3141 Fix schema refresh to work on MySQL 8. @hoangphuoc25
-* #3142 Fix: editing dashboard title results in the visualizations being replaced by the loading markers. @kravets-levko
+- #2849 Fix invalid reference to alert.to_dict() in webhook. @wankdanker
+- #2840 Improve counter visualization text scaling. @kravets-levko
+- #2854 Widget titles are no longer rendered wrong on public dashboards. @kravets-levko
+- #2318 Removed redundant exception handling in data sources since that's handled in the query backend. @jezdez
+- #2886 Fix Javascript build that broke because registerAll tried to run EditInPlace component. @arikfr
+- #2911 Don’t show “Add to dashboard” in dropdown to unsaved queries. @jezdez
+- #2916 Fix export query results output file name. @gabrieldutra
+- #2917 Fix output file name not changing after rename query. @gabrieldutra
+- #2868 Address edge case when retrieving Glue schemas for Athena data source. @kadrach
+- #2929 Fix: date value in a filter is duplicated. @combineads
+- #2875 Unbreak charts with long legend break in horizontal mode. Update plotly.js. @kravets-levko
+- #2937 Fix event recording in admin API backend. @kyoshidajp
+- #2953 Minor fixes for the Clickhouse data source. @denisov-vlad
+- #2941 Bring back fix to Box plot hover. @arikfr
+- #2957 Apply missing CSS classes to EditInPlace component. @arikfr
+- #2897 Show "Add description" only after saving the query. @arikfr
+- #2922 Query page layout improvements for small screens. @kravets-levko
+- #2956 Clickhouse: move timeout to params. @denisov-vlad
+- #2964 Fix no tags shown when having empty set. @gabrieldutra
+- #2757 Use full text search ranking when searching in list views. @jezdez
+- #2969 Query Results data source: improved errors, quoted column names. @arikfr
+- #2906 Preventing open redirection in loging process. @kyoshidajp
+- #2867 TreasureData: Deduplicate column names. @zaimy
+- #2994 Fix scheme of various URLs from http to https. @kyoshidajp
+- #2992 Fix an invalid prop type warning in new version notifier. @kyoshidajp
+- #3022 Fix Toolbox covering part of a chart. @kravets-levko
+- #2998 Fix charts losing responsive features after refreshing the dashboard. @kravets-levko
+- #3034 Postgres: handle NaN/Infinity values. @kravets-levko
+- #2745 Sort columns with undefined values. @Yossi-a
+- #3041 Sort CLI output of lists. @GitSumito
+- #2803, #3006 Address various tag display issues on query list page. @kocsmy, @alison985
+- #3049 Fix edit-in-place component which ignored isEditable flag and didn't work on Groups page. @kravets-levko
+- #2965 Google Analytics: Fix crash when no results are returned. @alexanderlz
+- #3061 Fix table visualization so that the horizontal scrollbar is not be always visible. @kravets-levko
+- #3076 Add white-space padding to separators in the footer. @burnash
+- #2919 Fix URL data source to not require a URL. @arikfr
+- #3098 Force AngularJS to update query editor properly. @washort
+- #3100 Delete redundant regex segment in query result frontend. @zhujunsan
+- #2978 Prevent the query update timestamp from changing when it is linked to new query results. @rauchy
+- #3046 Fix query page header. @kravets-levko
+- #3097 Mongo: Fix collection fields retreival bug when Views are present. @jodevsa
+- #3107 Keep query text in local state for now. @washort
+- #3111 Fix mobile padding issues on Query results. @kocsmy
+- #3122 Show menu divider only if query is archived. @jezdez
+- #3120 Fix tag counts for dashboards and queries. @jezdez
+- #3141 Fix schema refresh to work on MySQL 8. @hoangphuoc25
+- #3142 Fix: editing dashboard title results in the visualizations being replaced by the loading markers. @kravets-levko
 
 ### Other
 
-* #2850 The setup scripts are now based on Ubuntu 18.04 LTS and Docker. @pashaxp, @arikfr
-* #2985 Add Jest based tests to our stack. @arikfr
-* #2999 Add netlify configuration. @arikfr
-* #3000 Initial Cypress based E2E test infrastructure. @gabrieldutra
-* #2898 Move Ant styles into a central location. @arikfr
-* #2910 Fix webpack build error about BigMessage. @jezdez
-* #2928 Speed up builds by skipping installing requirements_all_ds.txt in CI unit tests. @arikfr
-* #2963 Fix tarball build failure. @emtwo
-* #2996 Fix setup.sh failures when run as root. @arikfr
-* #2989 Rearrange make targets. @koooge
-* #3036 Update Flask-Admin to 1.5.2. @yoavbls
-* #2901 Fix documentation links. @kravets-levko
-* #3073 Remove only Redash containers in clean Make task. @ariarijp
-* #3048 Remove pytest-watch dependency to workaround an issue with watchdog. @rauchy
-* #2905 Update development docker-compose.yml file to use latest Redis and Postgres servers and specify working volume explictly. @Rovel
-* #3032 Makefile: Add make targets for test. @koooge
-* #2933 Switch to Webpack 4. @dmonego
-* #2908 Update setup files. @arikfr
-* #2946 Update snowflake_connector_python version. @arikfr
-* #2773 Upgrade to Celery 4.2.1. @emtwo, @jezdez
-* #2881 CircleCI: Make flake8 tests pass on Legacy Python and Python 3. @cclauss
-* #2907 Remove unused dependencies (honcho, wsgiref). @arikfr
-* #3039 Build docker image on master branch. @arikfr
-* #3106 Fix registerAll failures after minification. @arikfr
-
+- #2850 The setup scripts are now based on Ubuntu 18.04 LTS and Docker. @pashaxp, @arikfr
+- #2985 Add Jest based tests to our stack. @arikfr
+- #2999 Add netlify configuration. @arikfr
+- #3000 Initial Cypress based E2E test infrastructure. @gabrieldutra
+- #2898 Move Ant styles into a central location. @arikfr
+- #2910 Fix webpack build error about BigMessage. @jezdez
+- #2928 Speed up builds by skipping installing requirements_all_ds.txt in CI unit tests. @arikfr
+- #2963 Fix tarball build failure. @emtwo
+- #2996 Fix setup.sh failures when run as root. @arikfr
+- #2989 Rearrange make targets. @koooge
+- #3036 Update Flask-Admin to 1.5.2. @yoavbls
+- #2901 Fix documentation links. @kravets-levko
+- #3073 Remove only Redash containers in clean Make task. @ariarijp
+- #3048 Remove pytest-watch dependency to workaround an issue with watchdog. @rauchy
+- #2905 Update development docker-compose.yml file to use latest Redis and Postgres servers and specify working volume explictly. @Rovel
+- #3032 Makefile: Add make targets for test. @koooge
+- #2933 Switch to Webpack 4. @dmonego
+- #2908 Update setup files. @arikfr
+- #2946 Update snowflake_connector_python version. @arikfr
+- #2773 Upgrade to Celery 4.2.1. @emtwo, @jezdez
+- #2881 CircleCI: Make flake8 tests pass on Legacy Python and Python 3. @cclauss
+- #2907 Remove unused dependencies (honcho, wsgiref). @arikfr
+- #3039 Build docker image on master branch. @arikfr
+- #3106 Fix registerAll failures after minification. @arikfr
 
 ## v5.0.2 - 2018-10-18
 
 ### Security
 
-* Fix: prevent Open Redirect vulnerability.
-
+- Fix: prevent Open Redirect vulnerability.
 
 ## v5.0.1 - 2018-09-27
 
 ### Added
 
-* Added support for JWT authentication (for services like Cloudflare Access or Google IAP).
+- Added support for JWT authentication (for services like Cloudflare Access or Google IAP).
 
 ### Changed
 
-* Upgraded Celery version to 3.1.26 to make upgrade to Celery 4 easier.
-
+- Upgraded Celery version to 3.1.26 to make upgrade to Celery 4 easier.
 
 ## v5.0.0 - 2018-09-21
 
 Final release for V5. Most of the changes were already in the beta release of V5, but this includes several fixes along
 with UI improvements.
 
-
 🙏 Thanks to @arikfr, @jezdez, @kravets-levko, @alison985, @kocsmy, @yossi-a, @tdsmith, @nasmithan, @jrbenny35, @sjakthol, @ariarijp and @combineads who contributed to this release.
 
-
 ### Security
 
-* Fix: don't expose Google OAuth client secret. @arikfr
+- Fix: don't expose Google OAuth client secret. @arikfr
 
 ### Changed
 
-* Improve mobile rendering of dashboards and queries. @kocsmy
-* UI improvements for favorites and empty state. @arikfr
-* Remove unnecessary X at the end of the query search. @kocsmy
-* Add server-side sorting to dashboard list. @jezdez
-* Sort queries in descending order. @jezdez
-* Throw error when non-owner tries to add a user to dashboard permissions. @alison985
-* Propagate query execution errors from Celery tasks properly. @alison985
-* Reload the route when using the app header search input. @jezdez
+- Improve mobile rendering of dashboards and queries. @kocsmy
+- UI improvements for favorites and empty state. @arikfr
+- Remove unnecessary X at the end of the query search. @kocsmy
+- Add server-side sorting to dashboard list. @jezdez
+- Sort queries in descending order. @jezdez
+- Throw error when non-owner tries to add a user to dashboard permissions. @alison985
+- Propagate query execution errors from Celery tasks properly. @alison985
+- Reload the route when using the app header search input. @jezdez
 
 ### Fixed
 
-* Fix: BigQuery default location is null and not US. @arikfr
-* Fix: query embeds are broken. @arikfr
-* Fix: typo in Celery log foramt. @ariarijp
-* Use QuerySerializer in outdated queries list. @jezdez
-* Fix: sometimes widgets are getting zero height. @kravets-levko
-* Athena: Switch to simple_json to serialize NaN/Infinity values as nulls. @kravets-levko, @jezdez
-* Fix: queries with parameters with no value breaking the scheduler. @arikfr
-* Fix: MongoDB query results parser didn't support unicode keys. @arikfr
-* Fix: Google Analytics schema wasn't loading in some cases. @arikfr
-* Fix: date/time parameters not working as global param @kravets-levko.
-* Fix: Widgets crumble when trying to move / resize a widget. @kravets-levko
-* Fix: handling rows with "length" field with forOwn method. @yossi-a
-* Fix: query selection not working on alert page. @sjakthol
-* Fix: query_results for Embedded Parameters (removed deprecated to_dict function). @nasmithan
-* Fix: unicode not supported in dashboard search. @combineads
-* Fix: unicode not supported in users search. @arikfr
+- Fix: BigQuery default location is null and not US. @arikfr
+- Fix: query embeds are broken. @arikfr
+- Fix: typo in Celery log foramt. @ariarijp
+- Use QuerySerializer in outdated queries list. @jezdez
+- Fix: sometimes widgets are getting zero height. @kravets-levko
+- Athena: Switch to simple_json to serialize NaN/Infinity values as nulls. @kravets-levko, @jezdez
+- Fix: queries with parameters with no value breaking the scheduler. @arikfr
+- Fix: MongoDB query results parser didn't support unicode keys. @arikfr
+- Fix: Google Analytics schema wasn't loading in some cases. @arikfr
+- Fix: date/time parameters not working as global param @kravets-levko.
+- Fix: Widgets crumble when trying to move / resize a widget. @kravets-levko
+- Fix: handling rows with "length" field with forOwn method. @yossi-a
+- Fix: query selection not working on alert page. @sjakthol
+- Fix: query_results for Embedded Parameters (removed deprecated to_dict function). @nasmithan
+- Fix: unicode not supported in dashboard search. @combineads
+- Fix: unicode not supported in users search. @arikfr
 
 ### Other
 
-* Add test for using saved parameters in scheduled queries. @alison985
-* Minor code smell cleanup. @jezdez
-* Update QueryResultListResource docstring. @tdsmith
-* Switch to CirlceCI 2.0 @jrbenny35, @arikfr
-* Remove unnecessary init methods. @jezdez
-
+- Add test for using saved parameters in scheduled queries. @alison985
+- Minor code smell cleanup. @jezdez
+- Update QueryResultListResource docstring. @tdsmith
+- Switch to CirlceCI 2.0 @jrbenny35, @arikfr
+- Remove unnecessary init methods. @jezdez
 
 ## v5.0.0-Beta - 2018-08-06
 
@@ -256,19 +355,19 @@ This is the first beta of the V5 release (and hopefully the last one). This vers
 
 Some notable changes:
 
-* Extensive work on parameters UI:
-  * New Date Range parameter type.
-  * UI for creating new parameters.
-  * Support for Now/Today as default value of date/time parameter.
-* Tagging and favorites ⭐️ support for queries and dashboards.
-* Users list page was improved (search, additional information) and you can now disable users.
-* Query editor improvements: additional keyboard shortcuts and support for searching in query text.
-* Visualizations improvements: option to select colors of pie chart sectors, X Axis type auto detect and option to format values, labels and tooltips.
-* Data Sources:
-  * Support for Yandex Metrika and AppMetrika.
-  * BigQuery: location property support and schema will load all tables now.
-  * Elasticsearch: stop sending source_content_type parameter which wasn't supported in older versions.
-* Started migrating the frontend codebase to React.
+- Extensive work on parameters UI:
+  - New Date Range parameter type.
+  - UI for creating new parameters.
+  - Support for Now/Today as default value of date/time parameter.
+- Tagging and favorites ⭐️ support for queries and dashboards.
+- Users list page was improved (search, additional information) and you can now disable users.
+- Query editor improvements: additional keyboard shortcuts and support for searching in query text.
+- Visualizations improvements: option to select colors of pie chart sectors, X Axis type auto detect and option to format values, labels and tooltips.
+- Data Sources:
+  - Support for Yandex Metrika and AppMetrika.
+  - BigQuery: location property support and schema will load all tables now.
+  - Elasticsearch: stop sending source_content_type parameter which wasn't supported in older versions.
+- Started migrating the frontend codebase to React.
 
 And much more!
 
@@ -276,82 +375,82 @@ And much more!
 
 ### Added
 
-* #2712: Date/Time Range parameter type (@kravets-levko)
-* #2482: Add support for ChatWork Alert Destination. (@matsumo)
-* #2678: Explicit "Add Parameter" Button in Query Editor. (@kravets-levko)
-* #2513: Add location property to BigQuery data source settings. (@kyoshidajp)
-* #2616: Pie chart: support setting pie chart sector colors. (@kravets-levko)
-* #2697: Date/Time parameters: support for "Now" as default value. (@kravets-levko)
-* #2693: Enable search function in Query Editor. (@arikfr)
-* #2573: Tagging and favorites for Queries and Dashboards (@arikfr)
-* #2640: Keyboard shortcut to collapse query editor/schema browser (@kravets-levko)
-* #2674: Add support for the Chrome Logger extension (@arikfr)
-* #2653: Add redash db size to status page (@alison985)
-* #2669: Store Athena query id with result metadata (@tdawber)
-* #2546: Configuration for incorporating React components (@washort)
-* #2533: New datasource: Yandex Metrika & AppMetrika (@denisov-vlad)
-* #2536: Chart: formats for values, labels and tooltips (@kravets-levko)
-* #2560: Introduce Policy object (@arikfr)
-* #2380: Admin should be able to disable a user (@kravets-levko)
-* #2509: Show custom date format on settings page (@kyoshidajp)
+- #2712: Date/Time Range parameter type (@kravets-levko)
+- #2482: Add support for ChatWork Alert Destination. (@matsumo)
+- #2678: Explicit "Add Parameter" Button in Query Editor. (@kravets-levko)
+- #2513: Add location property to BigQuery data source settings. (@kyoshidajp)
+- #2616: Pie chart: support setting pie chart sector colors. (@kravets-levko)
+- #2697: Date/Time parameters: support for "Now" as default value. (@kravets-levko)
+- #2693: Enable search function in Query Editor. (@arikfr)
+- #2573: Tagging and favorites for Queries and Dashboards (@arikfr)
+- #2640: Keyboard shortcut to collapse query editor/schema browser (@kravets-levko)
+- #2674: Add support for the Chrome Logger extension (@arikfr)
+- #2653: Add redash db size to status page (@alison985)
+- #2669: Store Athena query id with result metadata (@tdawber)
+- #2546: Configuration for incorporating React components (@washort)
+- #2533: New datasource: Yandex Metrika & AppMetrika (@denisov-vlad)
+- #2536: Chart: formats for values, labels and tooltips (@kravets-levko)
+- #2560: Introduce Policy object (@arikfr)
+- #2380: Admin should be able to disable a user (@kravets-levko)
+- #2509: Show custom date format on settings page (@kyoshidajp)
 
 ### Changed
 
-* #2715: Improve users list page (@arikfr)
-* #2710: Update Ant variables to fit Redash's style (@kocsmy)
-* #2709: Move format button next Add New Param button. (@arikfr)
-* #2664: Dashboard shows a spinner when query failed to load (@kravets-levko)
-* #2626: Show real status when loading cached query result (@kravets-levko)
-* #2663: Set column name implicitly when column name is blank (@ariarijp)
-* #2695: Improve Date/DateTime type parameters (@kravets-levko)
-* #2694: Block users with disposable email addresses (@arikfr)
-* #2687: YAML: changed load to safe_load (@denisov-vlad)
-* #2514: Update value parsing for google spreadsheets source (@atharvai)
-* #2570: fixes query pagination alignment (@alison985)
-* #2584: keep query result pagination out of scroll (@alison985)
-* #2647: Improve Script Query Runner (@ariarijp)
-* #2583: Query header improvements on widgets (@kocsmy)
-* #2671: Save some space (@kocsmy)
-* #2658: delaying schema filtering to improve responsiveness (@alison985)
-* #2648: Update datasource documentation links (@Pablohn26)
-* #2613: Improve Script Query Runner (@ariarijp)
-* #2619: data source sort case insensitive (@alison985)
-* #2604: Improve Google Spreadsheets Query Runner (@ariarijp)
-* #2542: Closes #2541: x-axis improvements. (@emtwo)
-* #2590: Remove redundant variables (@ariarijp)
-* #2585: Show data only mode: allow to add and delete visualizations (@kravets-levko)
-* #2549: Allow get_tables to see views and v10-style partitioned tables (@coreyhuinker)
-* #2568: sort datasources alphabetically (@alison985)
-* #2444: feat: show error if saml response cannot be parsed (@sjakthol)
-* #2554: Display name to be delete (@kyoshidajp)
-* #2510: Display confirmation dialog when deleting a item (@kyoshidajp)
-* #2518: Design improvements (@kocsmy)
-* #2520: Filter data sources in a data source input area (@kyoshidajp)
+- #2715: Improve users list page (@arikfr)
+- #2710: Update Ant variables to fit Redash's style (@kocsmy)
+- #2709: Move format button next Add New Param button. (@arikfr)
+- #2664: Dashboard shows a spinner when query failed to load (@kravets-levko)
+- #2626: Show real status when loading cached query result (@kravets-levko)
+- #2663: Set column name implicitly when column name is blank (@ariarijp)
+- #2695: Improve Date/DateTime type parameters (@kravets-levko)
+- #2694: Block users with disposable email addresses (@arikfr)
+- #2687: YAML: changed load to safe_load (@denisov-vlad)
+- #2514: Update value parsing for google spreadsheets source (@atharvai)
+- #2570: fixes query pagination alignment (@alison985)
+- #2584: keep query result pagination out of scroll (@alison985)
+- #2647: Improve Script Query Runner (@ariarijp)
+- #2583: Query header improvements on widgets (@kocsmy)
+- #2671: Save some space (@kocsmy)
+- #2658: delaying schema filtering to improve responsiveness (@alison985)
+- #2648: Update datasource documentation links (@Pablohn26)
+- #2613: Improve Script Query Runner (@ariarijp)
+- #2619: data source sort case insensitive (@alison985)
+- #2604: Improve Google Spreadsheets Query Runner (@ariarijp)
+- #2542: Closes #2541: x-axis improvements. (@emtwo)
+- #2590: Remove redundant variables (@ariarijp)
+- #2585: Show data only mode: allow to add and delete visualizations (@kravets-levko)
+- #2549: Allow get_tables to see views and v10-style partitioned tables (@coreyhuinker)
+- #2568: sort datasources alphabetically (@alison985)
+- #2444: feat: show error if saml response cannot be parsed (@sjakthol)
+- #2554: Display name to be delete (@kyoshidajp)
+- #2510: Display confirmation dialog when deleting a item (@kyoshidajp)
+- #2518: Design improvements (@kocsmy)
+- #2520: Filter data sources in a data source input area (@kyoshidajp)
 
 ### Fixed
 
-* #2722: Elasticsearch: Don't send source_content_type parameter. (@arikfr)
-* #2719: Remove closing input tags (@maxv)
-* #2458: Get all tables in the BigQuery (@kyoshidajp)
-* #2698: Make sure we return distinct data source values (@arikfr)
-* #2315: Fix: pyHive type matches (@yuua)
-* #2638: Dashboard stops rendering when adding widget with empty query (@kravets-levko)
-* #2610: Fix export query results output file name (@gabrieldutra)
-* #2574: commit query result to db before evaluating alerts (@mtrbean)
-* #2580: add break-word wrap to add/edit text box on dashboard (@alison985)
-* #2578: Fix connection error when you run "create_tables" (@ariarijp)
-* #2572: remove extra menu line if query is archived (@alison985)
-* #2526: Fix pivot hide control in dashboards (@deecay)
-* #2511: Fixing signed_out.html template (@kocsmy)
-* #2523: Frontend: fix boolean field with null value display as null. (@innovia)
+- #2722: Elasticsearch: Don't send source_content_type parameter. (@arikfr)
+- #2719: Remove closing input tags (@maxv)
+- #2458: Get all tables in the BigQuery (@kyoshidajp)
+- #2698: Make sure we return distinct data source values (@arikfr)
+- #2315: Fix: pyHive type matches (@yuua)
+- #2638: Dashboard stops rendering when adding widget with empty query (@kravets-levko)
+- #2610: Fix export query results output file name (@gabrieldutra)
+- #2574: commit query result to db before evaluating alerts (@mtrbean)
+- #2580: add break-word wrap to add/edit text box on dashboard (@alison985)
+- #2578: Fix connection error when you run "create_tables" (@ariarijp)
+- #2572: remove extra menu line if query is archived (@alison985)
+- #2526: Fix pivot hide control in dashboards (@deecay)
+- #2511: Fixing signed_out.html template (@kocsmy)
+- #2523: Frontend: fix boolean field with null value display as null. (@innovia)
 
 ### Other
 
-* #2682: Add Zeit's now support to have preview builds for every PR (@arikfr)
-* #2668: Upgrade bootstrap script to Redash 4.0.1 (@ariarijp)
-* #2639: Add tests for SpreadSheets (@ariarijp)
-* #2635: Add tests for Query Results (@ariarijp)
-* #2537: Remove trailing semicolon (@sieben)
+- #2682: Add Zeit's now support to have preview builds for every PR (@arikfr)
+- #2668: Upgrade bootstrap script to Redash 4.0.1 (@ariarijp)
+- #2639: Add tests for SpreadSheets (@ariarijp)
+- #2635: Add tests for Query Results (@ariarijp)
+- #2537: Remove trailing semicolon (@sieben)
 
 ## v4.0.1 - 2018-05-02
 
@@ -543,7 +642,6 @@ And much more!
 - Handling whitespace characters in Query Results data source. @ariarijp
 - [MySQL] Close cursor when cancellig the query. @jasonsmithj
 
-
 ## v3.0.0 - 2017-11-13
 
 ### Added
@@ -589,7 +687,7 @@ And much more!
 - Salesforce: improve error messages we receive from the API. @akiray03
 - Custom JS code visualization improvements. @deecay
 - DQL: Update version to 0.5.24. @aterreno
-- Cassandra: get_schema support for both C* 2.x and 3.x, support for SortedSet type serialization. (@mfouilleul))
+- Cassandra: get_schema support for both C\* 2.x and 3.x, support for SortedSet type serialization. (@mfouilleul))
 - Replace deprecated ng-annotate with babel plugin. @44px
 - Update Python dependencies to recent versions. @alison985
 - Bootstrap script: create /opt/redash directory only if it doesn't exist. @isomura
@@ -625,7 +723,6 @@ And much more!
 
 This is a patch release, that adds support for Redshift ACM certificates (see #2044 for details).
 
-
 ## v2.0.0 - 2017-08-08
 
 ### Added
@@ -635,7 +732,7 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 - Add the propertyOrder field to specify order of data source settings. @rmakulov
 - Add Plotly based Boxplot visualization. @deecay
 - [Presto] Add: query cancellation support. @fbertsch
-- [MongoDB] add $oids JSON extension.
+- [MongoDB] add \$oids JSON extension.
 - [PostgreSQL] support for loading materialized views in schema.
 - [MySQL] Add option to hide SSL settings.
 - [MySQL] support for RDS MySQL and SSL.
@@ -705,7 +802,7 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 - [Google Spreadsheets] handle distant future dates.
 - [SQLite] better handle utf-8 error messages.
 - Fix: don't remove locks for queries with task status of PENDING.
-- Only split columns with __/:: that end with filter/MultiFilter.
+- Only split columns with \_\_/:: that end with filter/MultiFilter.
 - Alert notifications fail (sometime) with a SQLAlchemy error.
 - Safeguard against empty query results when checking alert status. @danielerapati
 - Delete data source doesn't work when query results referenced by queries.
@@ -724,7 +821,6 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 - PostgreSQL passwords with spaces were not supported. (#1056)
 - PivotTable wasn't updating after first save.
 
-
 ## v1.0.3 - 2017-04-18
 
 ### Fixed
@@ -771,7 +867,7 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 - Fix: query embed dialog close button wasn't working @r0fls
 - Fix: make errors from Presto runner JSON-serializable @washort
 - Fix: race condition in query task status reporting @washort
-- Fix: remove $$hashKey from Pivot table
+- Fix: remove \$\$hashKey from Pivot table
 - Fix: map visualization had severe performance issue.
 - Fix: pemrission dialog wasn't rendering.
 - Fix: word cloud visualization didn't show column names.
@@ -788,7 +884,7 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 ### Changed
 
 - [#1563](https://github.com/getredash/redash/pull/1563) Send events to webhook as JSON with a schema.
-- [#1601] [Presto] friendlier error messages. (@aslotnick)
+- [#1601][presto] friendlier error messages. (@aslotnick)
 - Move the query runner unavailable log message to be DEBUG level instead of WARNING, as it was mainly confusing people.
 - Remove "Send to Cloud" button from Plotly based visualizations.
 - Change Plotly's default hover mode to "Compare".
@@ -797,7 +893,7 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 ### Fixed
 
 - [#1564] Fix: map visualization column picker wasn't populated. (@janusd)
-- [#1597] [SQL Server] Fix: schema wasn't loading on case sensitive servers. (@deecay)
+- [#1597][sql server] Fix: schema wasn't loading on case sensitive servers. (@deecay)
 - Fix: dashbonard owner couldn't edit his dashboard.
 - Fix: toggle_publish event wasn't logged properly.
 - Fix: events with API keys were not logged.
@@ -812,7 +908,7 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 - Fix: extra whitespace created by the filters component.
 - Fix: query results cleanup task was trying to delete query objects.
 - Fix: alert subscriptions were not triggered.
-- [DynamoDB] Fix: count(*) queries were broken. (@kopanitsa))
+- [DynamoDB] Fix: count(\*) queries were broken. (@kopanitsa))
 - Fix: Redash is using too many database connections.
 - Fix: download links were not working in dashboards.
 - Fix: the first selection in multi filters was broken in dashboards.
@@ -829,9 +925,9 @@ This is a patch release, that adds support for Redshift ACM certificates (see #2
 
 This version has two big changes behind the scenes:
 
-* Refactor the frontend to use latest (at the time) Angular version (1.5) along with better frontend pipeline based on)
+- Refactor the frontend to use latest (at the time) Angular version (1.5) along with better frontend pipeline based on)
   WebPack.
-* Refactor the backend code to use SQLAlchemy and Alembic, for easier migrations/upgrades.)
+- Refactor the backend code to use SQLAlchemy and Alembic, for easier migrations/upgrades.)
 
 Along with that we have many fixes, additions, new data sources (Google Analytics, ClickHouse, Amazon Athena, Snowflake)
 and fixes to the existing ones (mainly ElasticSearch and Cassandra).
@@ -914,7 +1010,7 @@ We're releasing a new upgrade script -- see [here](https://redash.io/help-onprem
 
 ### Added
 
-- 61fe16e #1374: Add: allow '*' in REDASH_CORS_ACCESS_CONTROL_ALLOW_ORIGIN (Allen Short)
+- 61fe16e #1374: Add: allow '\*' in REDASH_CORS_ACCESS_CONTROL_ALLOW_ORIGIN (Allen Short)
 - 2f09043 #1113: Add: share modify/access permissions for queries and dashboard (whummer)
 - 3db0eea #1341: Add: support for specifying SAML nameid-format (zoetrope)
 - b0ecd0e #1343: Add: support for local SAML metadata file (zoetrope)
@@ -978,7 +1074,6 @@ We're releasing a new upgrade script -- see [here](https://redash.io/help-onprem
 - 5d43cbe #1198: Change: add support for Standard SQL in BigQuery query runner (mystelynx)
 - 84d0c22 #1193: Change: modify the argument order of moment.add function call (Kenya Yamaguchi)
 
-
 ### Fixed
 
 - d6febb0 #1375: Fix: Download Dataset does not work when not logged in (Joshua Dechant)
@@ -1032,7 +1127,7 @@ The main features of this release are:
 
 Also, this release includes numerous smaller features, improvements, and bug fixes.
 
-A big thank you goes to all who contributed code and documentation in this release: @AntoineAugusti, @James226, @adamlwgriffiths, @alexdebrie, @anthony-coble, @ariarijp, @dheerajrav, @edwardsharp, @machira, @nabilblk, @ninneko, @ordd, @tomerben,  @toru-takahashi, @vishesh92, @vorakumar and @whummer.
+A big thank you goes to all who contributed code and documentation in this release: @AntoineAugusti, @James226, @adamlwgriffiths, @alexdebrie, @anthony-coble, @ariarijp, @dheerajrav, @edwardsharp, @machira, @nabilblk, @ninneko, @ordd, @tomerben, @toru-takahashi, @vishesh92, @vorakumar and @whummer.
 
 ### Added
 
@@ -1047,7 +1142,7 @@ A big thank you goes to all who contributed code and documentation in this relea
 - f64622d #1089: Add support for serialising UUID type within MSSQL #961 (@James226)
 - 857caab #1085: Feature: API to pause a data source (@arikfr)
 - 214aa3b #1060: Feature: support configuring user's groups with SAML (@vorakumar)
-- e20a005 #1007: Issue#1006:  Make bottom margin editable for Chart visualization (@vorakumar)
+- e20a005 #1007: Issue#1006: Make bottom margin editable for Chart visualization (@vorakumar)
 - 6e0dd2b #1063: Add support for date/time Y axis (@tomerben)
 - b5a4a6b #979: Feature: Add CLI to edit group permissions (@ninneko)
 - 6d495d2 #1014: Add server-side parameter handling for embeds (@whummer)
@@ -1093,7 +1188,7 @@ A big thank you goes to all who contributed code and documentation in this relea
 - e10ecd2 #1058: Bring back filters if dashboard filters are enabled (@AntoineAugusti)
 - 701035f #1059: Fix: DynamoDB having issues when setting host (@arikfr)
 - 2924d4f #1040: Small fixes to visualizations view (@arikfr)
-- fec0d5f #1037: Fix: multi filter wasn't working with __ syntax (@dheerajrav)
+- fec0d5f #1037: Fix: multi filter wasn't working with \_\_ syntax (@dheerajrav)
 - b066ce4 #1033: Fix: only ask for notification permissions if wasn't denied (@arikfr)
 - 960c416 #1032: Fix: make sure we return dashboards only for current org only (@arikfr)
 - b3844d3 #1029: Hive: close connection only if it exists (@arikfr)

CONTRIBUTING.md

@@ -6,7 +6,6 @@ The following is a set of guidelines for contributing to Redash. These are guide
 
 ## Quick Links:
 
-- [Feature Roadmap](https://trello.com/b/b2LUHU7A/redash-roadmap)
 - [Feature Requests](https://discuss.redash.io/c/feature-requests)
 - [Documentation](https://redash.io/help/)
 - [Blog](https://blog.redash.io/)
@@ -61,7 +60,7 @@ If you would like to suggest an enhancement or ask for a new feature:
 
 ### Documentation
 
-The project's documentation can be found at [https://redash.io/help/](https://redash.io/help/). The [documentation sources](https://github.com/getredash/website/tree/master/website/_kb) are hosted on GitHub. To contribute edits / new pages, you can use GitHub's interface. Click the "Edit on GitHub" link on the documentation page to quickly open the edit interface.
+The project's documentation can be found at [https://redash.io/help/](https://redash.io/help/). The [documentation sources](https://github.com/getredash/website/tree/master/src/pages/kb) are hosted on GitHub. To contribute edits / new pages, you can use GitHub's interface. Click the "Edit on GitHub" link on the documentation page to quickly open the edit interface.
 
 ## Additional Notes
 

Dockerfile

@@ -1,3 +1,12 @@
+FROM node:10 as frontend-builder
+
+WORKDIR /frontend
+COPY package.json package-lock.json /frontend/
+RUN npm install
+
+COPY . /frontend
+RUN npm run build
+
 FROM redash/base:latest
 
 # Controls whether to install extra dependencies needed for all data sources.
@@ -9,10 +18,10 @@ COPY requirements.txt requirements_dev.txt requirements_all_ds.txt ./
 RUN pip install -r requirements.txt -r requirements_dev.txt
 RUN if [ "x$skip_ds_deps" = "x" ] ; then pip install -r requirements_all_ds.txt ; else echo "Skipping pip install -r requirements_all_ds.txt" ; fi
 
-COPY . ./
-RUN npm install && npm run bundle && npm run build && rm -rf node_modules
+COPY . /app
+COPY --from=frontend-builder /frontend/client/dist /app/client/dist
 RUN chown -R redash /app
 USER redash
 
 ENTRYPOINT ["/app/bin/docker-entrypoint"]
-CMD ["server"]
+CMD ["server"]

Dockerfile.cypress

@@ -1,10 +0,0 @@
-FROM cypress/browsers:chrome67
-
-WORKDIR /usr/src/app
-
-RUN npm install cypress > /dev/null
-
-COPY cypress /usr/src/app/cypress
-COPY cypress.json /usr/src/app/cypress.json
-
-RUN ./node_modules/.bin/cypress verify

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2013-2018, Arik Fraimovich.
+Copyright (c) 2013-2019, Arik Fraimovich.
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, 

Makefile

@@ -1,4 +1,4 @@
-.PHONY: compose_build up test_db create_database clean down bundle tests lint backend-unit-tests frontend-unit-tests test build watch start
+.PHONY: compose_build up test_db create_database clean down bundle tests lint backend-unit-tests frontend-unit-tests test build watch start redis-cli bash
 
 compose_build:
 	docker-compose build
@@ -49,3 +49,9 @@ watch: bundle
 
 start: bundle
 	npm run start
+
+redis-cli:
+	docker-compose run --rm redis redis-cli -h redis
+
+bash:
+	docker-compose run --rm server bash

README.md

@@ -28,13 +28,12 @@ Today **_Redash_** has support for querying multiple databases, including: Redsh
 
 ## Supported Data Sources
 
-Redash supports more than 25 [data sources](https://redash.io/help/data-sources/supported-data-sources). 
+Redash supports more than 35 [data sources](https://redash.io/help/data-sources/supported-data-sources). 
 
 ## Getting Help
 
 * Issues: https://github.com/getredash/redash/issues
 * Discussion Forum: https://discuss.redash.io/
-* Slack: http://slack.redash.io/
 
 ## Reporting Bugs and Contributing Code
 

bin/docker-entrypoint

@@ -3,7 +3,7 @@ set -e
 
 worker() {
   WORKERS_COUNT=${WORKERS_COUNT:-2}
-  QUEUES=${QUEUES:-queries,scheduled_queries,celery}
+  QUEUES=${QUEUES:-queries,scheduled_queries,celery,schemas}
 
   echo "Starting $WORKERS_COUNT workers for queues: $QUEUES..."
   exec /usr/local/bin/celery worker --app=redash.worker -c$WORKERS_COUNT -Q$QUEUES -linfo --maxtasksperchild=10 -Ofair
@@ -12,10 +12,11 @@ worker() {
 scheduler() {
   WORKERS_COUNT=${WORKERS_COUNT:-1}
   QUEUES=${QUEUES:-celery}
+  SCHEDULE_DB=${SCHEDULE_DB:-celerybeat-schedule}
 
   echo "Starting scheduler and $WORKERS_COUNT workers for queues: $QUEUES..."
 
-  exec /usr/local/bin/celery worker --app=redash.worker --beat -c$WORKERS_COUNT -Q$QUEUES -linfo --maxtasksperchild=10 -Ofair
+  exec /usr/local/bin/celery worker --app=redash.worker --beat -s$SCHEDULE_DB -c$WORKERS_COUNT -Q$QUEUES -linfo --maxtasksperchild=10 -Ofair
 }
 
 server() {
@@ -26,6 +27,10 @@ create_db() {
   exec /app/manage.py database create_tables
 }
 
+celery_healthcheck() {
+  exec /usr/local/bin/celery inspect ping --app=redash.worker -d celery@$HOSTNAME
+}
+
 help() {
   echo "Redash Docker."
   echo ""
@@ -35,9 +40,11 @@ help() {
   echo "server -- start Redash server (with gunicorn)"
   echo "worker -- start Celery worker"
   echo "scheduler -- start Celery worker with a beat (scheduler) process"
+  echo "celery_healthcheck -- runs a Celery healthcheck. Useful for Docker's HEALTHCHECK mechanism."
   echo ""
   echo "shell -- open shell"
   echo "dev_server -- start Flask development server with debugger and auto reload"
+  echo "debug -- start Flask development server with remote debugger via ptvsd"
   echo "create_db -- create database tables"
   echo "manage -- CLI to manage redash"
   echo "tests -- run tests"
@@ -71,6 +78,11 @@ case "$1" in
     export FLASK_DEBUG=1
     exec /app/manage.py runserver --debugger --reload -h 0.0.0.0
     ;;
+  debug)
+    export FLASK_DEBUG=1
+    export REMOTE_DEBUG=1
+    exec /app/manage.py runserver --debugger --no-reload -h 0.0.0.0
+    ;;
   shell)
     exec /app/manage.py shell
     ;;

client/.babelrc

@@ -1,8 +1,15 @@
 {
-  "presets": ["env", "react", "stage-2"],
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": "> 0.5%, last 2 versions, Firefox ESR, ie 11, not dead",
+      "useBuiltIns": "usage"
+    }],
+    "@babel/preset-react"
+  ],
   "plugins": [
     "angularjs-annotate",
-    "transform-object-assign",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-object-assign",
     ["babel-plugin-transform-builtin-extend", {
       "globals": ["Error"]
     }]

client/.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     'no-param-reassign': 0,
     'no-mixed-operators': 0,
     'no-underscore-dangle': 0,
+    "no-use-before-define": ["error", "nofunc"],
     "prefer-destructuring": "off",
     "prefer-template": "off",
     "no-restricted-properties": "off",
@@ -26,19 +27,34 @@ module.exports = {
     "no-lonely-if": "off",
     "consistent-return": "off",
     "no-control-regex": "off",
+    'no-multiple-empty-lines': 'warn',
+    "no-script-url": "off", // some <a> tags should have href="javascript:void(0)"
+    'operator-linebreak': 'off',
+    'react/destructuring-assignment': 'off',
     "react/jsx-filename-extension": "off",
+    'react/jsx-one-expression-per-line': 'off',
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
+    'react/jsx-wrap-multilines': 'warn',
+    'react/no-access-state-in-setstate': 'warn',
     "react/prefer-stateless-function": "warn",
     "react/forbid-prop-types": "warn",
     "react/prop-types": "warn",
     "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/label-has-associated-control": ["warn", {
+      "controlComponents": true
+    }],
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
     "max-len": ['error', 120, 2, {
       ignoreUrls: true,
       ignoreComments: false,
       ignoreRegExpLiterals: true,
       ignoreStrings: true,
       ignoreTemplateLiterals: true,
-    }]
+    }],
+    "no-else-return": ["error", {"allowElseIf": true}],
+    "object-curly-newline": ["error", {"consistent": true}],
   }
 };

client/app/__tests__/enzyme_setup.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });

client/app/__tests__/mocks.js

@@ -0,0 +1,5 @@
+import MockDate from 'mockdate';
+
+const date = new Date('2000-01-01T02:00:00.000');
+
+MockDate.set(date);

client/app/assets/less/ant.less

@@ -0,0 +1,249 @@
+@import '~antd/lib/style/core/iconfont';
+@import '~antd/lib/style/core/motion';
+@import '~antd/lib/alert/style/index';
+@import '~antd/lib/input/style/index';
+@import '~antd/lib/input-number/style/index';
+@import '~antd/lib/date-picker/style/index';
+@import '~antd/lib/modal/style/index';
+@import '~antd/lib/tooltip/style/index';
+@import '~antd/lib/select/style/index';
+@import '~antd/lib/checkbox/style/index';
+@import '~antd/lib/upload/style/index';
+@import '~antd/lib/form/style/index';
+@import '~antd/lib/button/style/index';
+@import '~antd/lib/radio/style/index';
+@import '~antd/lib/time-picker/style/index';
+@import '~antd/lib/pagination/style/index';
+@import '~antd/lib/table/style/index';
+@import '~antd/lib/popover/style/index';
+@import '~antd/lib/icon/style/index';
+@import '~antd/lib/tag/style/index';
+@import '~antd/lib/grid/style/index';
+@import '~antd/lib/switch/style/index';
+@import '~antd/lib/drawer/style/index';
+@import '~antd/lib/divider/style/index';
+@import '~antd/lib/dropdown/style/index';
+@import '~antd/lib/menu/style/index';
+@import '~antd/lib/list/style/index';
+@import "~antd/lib/badge/style/index";
+@import "~antd/lib/card/style/index";
+@import "~antd/lib/spin/style/index";
+@import "~antd/lib/tabs/style/index";
+@import 'inc/ant-variables';
+
+// Remove bold in labels for Ant checkboxes and radio buttons
+.ant-checkbox-wrapper,
+.ant-radio-wrapper {
+  font-weight: normal;
+}
+
+// Fix for disabled button styles inside Tooltip component.
+// Tooltip wraps disabled buttons with `<span>` and moves all styles
+// and classes to that `<span>`. This resets all button styles and
+// turns it into simple inline element (because now it's wrapper is a button)
+.btn {
+  button[disabled] {
+    -moz-appearance: none !important;
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    border: 0 !important;
+    outline: none !important;
+    background: transparent !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+}
+
+// Fix for Ant dropdowns when they are used in Boootstrap modals
+.ant-dropdown-in-bootstrap-modal {
+  z-index: 1050;
+}
+
+// Button overrides
+.@{btn-prefix-cls} {
+  transition-duration: 150ms;
+}
+
+// Fix ant input number showing duplicate arrows
+.ant-input-number-input::-webkit-outer-spin-button,
+.ant-input-number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+// Pagination overrides (based on existing Bootstrap overrides)
+.@{pagination-prefix-cls} {
+  display: inline-block;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  vertical-align: top;
+
+  &-item {
+    background-color: @pagination-bg;
+    border-color: transparent;
+    color: @pagination-color;
+    font-size: 14px;
+    margin-right: 5px;
+
+    a {
+      color: inherit;
+    }
+
+    &:focus,
+    &:hover {
+      background-color: @pagination-hover-bg;
+      border-color: transparent;
+      color: @pagination-hover-color;
+      a {
+        color: inherit;
+      }
+    }
+
+    &-active {
+      &,
+      &:hover,
+      &:focus {
+        background-color: @pagination-active-bg;
+        color: @pagination-active-color;
+        border-color: transparent;
+        pointer-events: none;
+        cursor: default;
+
+        a {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &-disabled {
+    &,
+    &:hover,
+    &:focus {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  &-prev,
+  &-next {
+    .@{pagination-prefix-cls}-item-link {
+      background-color: @pagination-bg;
+      border-color: transparent;
+      color: @pagination-color;
+      line-height: @pagination-item-size - 2px;
+    }
+
+    &:focus .@{pagination-prefix-cls}-item-link,
+    &:hover .@{pagination-prefix-cls}-item-link {
+      background-color: @pagination-hover-bg;
+      border-color: transparent;
+      color: @pagination-hover-color;
+    }
+  }
+
+  &-prev,
+  &-jump-prev,
+  &-jump-next {
+    margin-right: 5px;
+  }
+
+  &-jump-prev,
+  &-jump-next {
+    .@{pagination-prefix-cls}-item-container {
+      .@{pagination-prefix-cls}-item-link-icon {
+        color: @pagination-color;
+      }
+    }
+  }
+}
+
+// Table
+
+.@{table-prefix-cls} {
+  color: inherit;
+
+  tr,
+  th,
+  td {
+    transition: none !important;
+  }
+
+  &-thead > tr > th {
+    padding: @table-padding-vertical * 2 @table-padding-horizontal;
+  }
+
+  .@{table-prefix-cls}-column-sorters {
+    &:before,
+    &:hover:before {
+      content: none;
+    }
+  }
+
+  &-thead > tr > th {
+    .@{table-prefix-cls}-column-sorter {
+      &-up,
+      &-down {
+        &.on {
+          color: @table-header-icon-active-color;
+        }
+      }
+    }
+  }
+
+  // Custom styles
+
+  &-headerless &-tbody > tr:first-child > td {
+    border-top: @border-width-base @border-style-base @border-color-split;
+  }
+}
+
+// List
+
+.@{list-prefix-cls} {
+  &-item {
+    // custom rule
+    &.selected {
+      background-color: #F6F8F9;
+    }
+
+    &.disabled {
+      background-color: fade(#F6F8F9, 40%);
+
+      & > * {
+        opacity: 0.4;
+      }
+    }
+  }
+}
+
+// styling for short modals (no lines)
+.@{dialog-prefix-cls}.shortModal {
+  .@{dialog-prefix-cls} {
+    &-header,
+    &-footer {
+      border: none;
+      padding: 16px;
+    }
+    &-body {
+      padding: 10px 16px;
+    }
+    &-close-x {
+      width: 46px;
+      height: 46px;
+      line-height: 46px;
+    }
+  }
+}
+
+// description in modal header
+.modal-header-desc {
+  font-size: @font-size-base;
+  color: @text-color-secondary;
+  font-weight: normal;
+  margin-top: 4px;
+}
+
+.ant-popover {
+  z-index: 1000; // make sure it doesn't cover drawer
+}

client/app/assets/less/inc/ant-variables.less

@@ -0,0 +1,74 @@
+/* --------------------------------------------------------
+    Colors
+-----------------------------------------------------------*/
+@lightblue:                             #03A9F4;
+@primary-color:                        #2196F3;
+
+@redash-gray: rgba(102, 136, 153, 1);
+@redash-orange: rgba(255, 120, 100, 1);
+@redash-black: rgba(0, 0, 0, 1);
+@redash-yellow: rgba(252, 252, 161, 0.75);
+
+/* --------------------------------------------------------
+    Font
+-----------------------------------------------------------*/
+@redash-font:                          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+@font-family-no-number:                @redash-font;
+@font-family:                          @redash-font;
+@code-family:                          @redash-font;
+@font-size-base:                       13px;
+
+
+/* --------------------------------------------------------
+    Typograpgy
+-----------------------------------------------------------*/
+@text-color:                           #595959;
+
+
+/* --------------------------------------------------------
+    Form
+-----------------------------------------------------------*/
+@input-height-base:                    35px;
+@input-color:                          #595959;
+@border-radius-base: 2px;
+@border-color-base:                    #E8E8E8;
+
+
+/* --------------------------------------------------------
+    Button
+-----------------------------------------------------------*/
+@btn-danger-bg: fade(@redash-gray, 10%);
+@btn-danger-border: fade(@redash-gray, 15%);
+
+
+/* --------------------------------------------------------
+    Pagination
+-----------------------------------------------------------*/
+@pagination-item-size: 33px;
+@pagination-font-family: @redash-font;
+@pagination-font-weight-active: normal;
+
+@pagination-bg:                         fade(@redash-gray, 15%);
+@pagination-color:                      #7E7E7E;
+@pagination-active-bg:                  @lightblue;
+@pagination-active-color:               #FFF;
+@pagination-disabled-bg:                fade(@redash-gray, 15%);
+@pagination-hover-color:                #333;
+@pagination-hover-bg:                   fade(@redash-gray, 25%);
+
+
+/* --------------------------------------------------------
+    Table
+-----------------------------------------------------------*/
+@table-border-radius-base: 0;
+@table-header-color: #333;
+@table-header-bg: fade(@redash-gray, 3%);
+@table-header-icon-color: fade(@text-color, 20%);
+@table-header-icon-active-color: @text-color;
+@table-header-sort-bg: @table-header-bg;
+@table-header-sort-active-bg: @table-header-bg;
+@table-header-filter-active-bg: @table-header-bg;
+@table-body-sort-bg: transparent;
+@table-row-hover-bg: fade(@redash-gray, 5%);
+@table-padding-vertical: 7px;
+@table-padding-horizontal: 10px;

client/app/assets/less/inc/base.less

@@ -73,6 +73,10 @@ strong {
 
 }
 
+.clickable {
+    cursor: pointer;
+}
+
 .resize-vertical {
     resize: vertical !important;
     transition: height 0s !important;

client/app/assets/less/inc/generics.less

@@ -146,6 +146,8 @@
     Width
 -----------------------------------------------------------*/
 .w-100 { width: 100% !important; }
+.w-50 { width: 50% !important; }
+.w-25 { width: 25% !important; }
 
 
 /* --------------------------------------------------------

client/app/assets/less/inc/navbar.less

@@ -1,6 +1,5 @@
 a.navbar-brand {
   padding: 5px 5px 0px 0px;
-  margin-left: 0px !important;
 }
 
 .navbar .fa {

client/app/assets/less/inc/variables.less

@@ -55,6 +55,7 @@
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
+@input-color:                           #595959;
 @input-color-placeholder:               #b4b4b4;
 @input-border:                          #e8e8e8;
 @input-border-radius:                   0;
@@ -98,7 +99,6 @@
 @state-success-text:                    @green;
 @state-info-text:                       @blue;
 @state-danger-text:                     lighten(@red, 5%);
-@state-warning-text:                    @orange;
 
 
 /* --------------------------------------------------------
@@ -106,19 +106,16 @@
 -----------------------------------------------------------*/
 @alert-success-border:                  transparent;
 @alert-info-border:                     transparent;
-@alert-warning-border:		 	        transparent;
 @alert-danger-border:		 	        transparent;
 @alert-inverse-border:		 	        transparent;
 
 @alert-success-bg:                      fade(@green, 70%);
 @alert-info-bg:		 		            fade(@blue, 70%);
-@alert-warning-bg:                      fade(@amber, 70%);
 @alert-danger-bg:                       fade(@red, 70%);
 @alert-inverse-bg:                      #333;
 
 @alert-success-text:                    #fff;
 @alert-info-text:                       #fff;
-@alert-warning-text:                    #fff;
 @alert-danger-text:                     #fff;
 @alert-inverse-text:                    #fff;
 

client/app/assets/less/inc/visualizations/misc.less

@@ -1,3 +1,6 @@
-visualization-renderer .pagination {
-  margin: 0;
+visualization-renderer {
+  .pagination,
+  .ant-pagination {
+    margin: 0;
+  }
 }

client/app/assets/less/main.less

@@ -1,5 +1,3 @@
-@import 'redash/ant';
-
 /** LESS Plugins **/
 @import 'inc/less-plugins/for';
 

client/app/assets/less/redash/ant.less

@@ -1,38 +0,0 @@
-@import '~antd/lib/style/core/iconfont.less';
-@import '~antd/lib/style/core/motion.less';
-@import '~antd/lib/input/style/index.less';
-@import '~antd/lib/date-picker/style/index.less';
-@import '~antd/lib/tooltip/style/index.less';
-@import '~antd/lib/select/style/index.less';
-
-// Overwritting Ant Design defaults to fit into Redash current style
-@font-family-no-number  : @redash-font;
-@font-family            : @redash-font;
-@code-family            : @redash-font;
-
-@border-radius-base     : @redash-input-radius;
-@border-color-base      : #e8e8e8;
-
-@primary-color          : @blue;
-
-// Fix for disabled button styles inside Tooltip component.
-// Tooltip wraps disabled buttons with `<span>` and moves all styles
-// and classes to that `<span>`. This resets all button styles and
-// turns it into simple inline element (because now it's wrapper is a button)
-.btn {
-  button[disabled] {
-    -moz-appearance: none !important;
-    -webkit-appearance: none !important;
-    appearance: none !important;
-    border: 0 !important;
-    outline: none !important;
-    background: transparent !important;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-}
-
-// Fix for Ant dropdowns when they are used in Boootstrap modals
-.ant-dropdown-in-bootstrap-modal {
-  z-index: 1050;
-}

client/app/assets/less/redash/query.less

@@ -202,8 +202,11 @@ edit-in-place p.editable:hover {
   }
 }
 
-.visualization-renderer .pagination {
-  margin-top: 10px;
+.visualization-renderer {
+  .pagination,
+  .ant-pagination {
+    margin-top: 10px;
+  }
 }
 
 .embed__vis {
@@ -649,10 +652,6 @@ nav .rg-bottom {
     }
   }
 
-  a.navbar-brand {
-    display: none;
-  }
-
   .datasource-small {
     visibility: visible;
   }
@@ -663,10 +662,6 @@ nav .rg-bottom {
     display: none;
   }
 
-  a.navbar-brand {
-    display: block;
-  }
-
   .filter-container {
     padding-right: 0;
   }

client/app/assets/less/redash/redash-newstyle.less

@@ -35,6 +35,10 @@ body {
   }
 }
 
+.word-wrap-break {
+  word-wrap: break-word;
+}
+
 .clearboth {
   clear: both;
 }
@@ -54,27 +58,9 @@ body {
   border-left-color: #1b809e;
 }
 
-.list-content {
-  @media (min-width: 992px) {
-    padding-right: 0;
-  }
-}
-
-.list-control-r-b {
-  @media (max-width: 992px) {
-    display: none;
-  }
-}
-
-.list-control-t {
-  @media (min-width: 992px) {
-    display: none;
-  }
-}
-
 // Fixed width layout for specific pages
 @media (min-width: 768px) {
-  settings-screen, home-page, page-dashboard-list, page-queries-list, alerts-list-page, alert-page, queries-search-results-page, .fixed-container {
+  settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
     .container {
       width: 750px;
     }
@@ -82,7 +68,7 @@ body {
 }
 
 @media (min-width: 992px) {
-  settings-screen, home-page, page-dashboard-list, page-queries-list, alerts-list-page, alert-page, queries-search-results-page, .fixed-container {
+  settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
     .container {
       width: 970px;
     }
@@ -90,7 +76,7 @@ body {
 }
 
 @media (min-width: 1200px) {
-  settings-screen, home-page, page-dashboard-list, page-queries-list, alerts-list-page, alert-page, queries-search-results-page, .fixed-container {
+  settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
     .container {
       width: 1170px;
     }
@@ -168,16 +154,12 @@ body {
   box-shadow: inset 3px 0px 0px @brand-primary;
 }
 
-.table.table-data {
-  > tbody > tr > td {
+.table-data {
+  tbody > tr > td {
     padding-top: 5px !important;
   }
 
-  tr:hover {
-    cursor: pointer;
-  }
-
-  .btn-favourite {
+  .btn-favourite, .btn-archive {
     font-size: 15px;
   }
 }
@@ -190,7 +172,7 @@ body {
   }
 }
 
-.btn-favourite {
+.btn-favourite, .btn-archive {
   color: #d4d4d4;
   transition: all .25s ease-in-out;
 
@@ -203,7 +185,20 @@ body {
   }
 }
 
-.page-header--new .btn-favourite {
+.btn-archive {
+  color: #d4d4d4;
+  transition: all .25s ease-in-out;
+
+  &:hover, &:focus {
+    color: @gray-light;
+  }
+
+  .fa-archive {
+    color: @gray-light;
+  }
+}
+
+.page-header--new .btn-favourite, .page-header--new .btn-archive {
   font-size: 19px;
 }
 
@@ -239,7 +234,7 @@ body {
   }
 }
 
-.navbar li a .btn-favourite .fa {
+.navbar li a .btn-favourite .fa, .navbar li a .btn-archive .fa {
   font-size: 100%;
 }
 
@@ -366,7 +361,7 @@ body {
   padding: 20px;
 }
 
-page-header, .page-header--new {
+.page-header-wrapper, .page-header--new {
   h3 {
     margin: 0.2em 0;
     line-height: 1.3;
@@ -468,7 +463,7 @@ page-header, .page-header--new {
 .label-tag-archived,
 .label-tag {
   margin-right: 3px;
-  display: inline-block;
+  display: inline;
   margin-top: 2px;
   max-width: 24ch;
   .text-overflow();
@@ -640,11 +635,6 @@ page-header, .page-header--new {
   background: #fff;
   margin-bottom: 10px;
 
-  a.navbar-brand {
-    padding: 4px 0px 0px 0px;
-    margin-left: -3px !important;
-  }
-
   .btn-group.open .dropdown-toggle {
     -webkit-box-shadow: none;
     box-shadow: none;
@@ -655,6 +645,18 @@ page-header, .page-header--new {
   }
 }
 
+.navbar-link-ANGULAR_REMOVE_ME {
+  line-height: 18px;
+  padding: 10px 15px;
+  display: block;
+
+  @media (min-width: 768px) {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+}
+
+.navbar-link-ANGULAR_REMOVE_ME,
 .navbar-default .navbar-nav > li > a {
   color: #000;
   font-weight: 500;
@@ -706,6 +708,11 @@ page-header, .page-header--new {
   height: 20px;
 }
 
+.user_list__user--invitation-pending {
+    color: fade(@alert-danger-bg, 75%);
+    font-weight: 500;
+}
+
 .btn__new {
   margin-left: 15px;
 }
@@ -717,11 +724,10 @@ page-header, .page-header--new {
 
 .navbar-brand {
   position: absolute;
-  left: 49%;
-  margin-left: -50px !important;
+  left: 50%;
+  margin-left: -25px !important; // center
   display: block;
   zoom: 0.9;
-  margin-top: 3px;
 }
 
 .va-top {
@@ -806,11 +812,9 @@ page-header, .page-header--new {
 // Forms
 .form-control {
   border-radius: @redash-input-radius;
-  color: #9E9E9E;
 
   &:focus {
     box-shadow: none !important;
-    color: #111;
     border-color: @blue;
   }
 
@@ -843,6 +847,7 @@ text.slicetext {
 
   .navbar-brand {
     left: 2%;
+    margin-left: 0 !important;
   }
 
   //Fix navbar collapse
@@ -883,13 +888,28 @@ text.slicetext {
   }
 }
 
-@media (min-width: 768px) and (max-width: 850px) {
-  .menu-search {
-    width: 175px;
+@media (min-width: 768px) {
+  @media (max-width: 880px) {
+    .navbar-link-ANGULAR_REMOVE_ME,
+    .navbar-default .navbar-nav > li > a,
+    .navbar-form {
+      padding-left: 10px !important;
+      padding-right: 10px !important;
+    }
+
+    a.navbar-brand {
+      margin-left: -15px !important;
+    }
   }
 
-  a.navbar-brand {
-    display: none !important;
+  @media (max-width: 810px) {
+    .menu-search {
+      width: 175px;
+    }
+
+    a.navbar-brand {
+      margin-left: 13px !important;
+    }
   }
 }
 
@@ -933,3 +953,26 @@ text.slicetext {
   }
 }
 
+.ui-select-choices-row.disabled > span {
+  background-color: inherit !important;
+}
+
+.list-group-item.inactive,
+.ui-select-choices-row.disabled {
+  background-color: #eee !important;
+  border-color: transparent;
+  opacity: 0.5;
+  box-shadow: none;
+  color: #333;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.select-option-divider {
+  margin: 10px 0 !important;
+}
+
+.table-data .label-tag {
+  display: inline-block;
+  max-width: 135px;
+}

client/app/assets/less/redash/tags-control.less

@@ -8,6 +8,15 @@
 
   &.inline-tags-control {
     display: inline-block;
-    vertical-align: middle;
+  }
+
+  &.disabled {
+    opacity: 0.4;
   }
 }
+
+// This is for using .inline-tags-control in Angular which renders
+// a little differently than React (e.g. in Alert.html)
+.inline-tags-control .tags-control {
+  display: inline-block;
+}

client/app/components/AutocompleteToggle.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Tooltip from 'antd/lib/tooltip';
 import PropTypes from 'prop-types';
 import '@/redash-font/style.less';
-import recordEvent from '@/lib/recordEvent';
+import recordEvent from '@/services/recordEvent';
 
 export default function AutocompleteToggle({ state, disabled, onToggle }) {
   let tooltipMessage = 'Live Autocomplete Enabled';

client/app/components/BigMessage.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 
-export function BigMessage({ message, icon, children }) {
+export function BigMessage({ message, icon, children, className }) {
   return (
-    <div className="tiled bg-white p-15 text-center">
+    <div className={'p-15 text-center ' + className}>
       <h3 className="m-t-0 m-b-0">
         <i className={'fa ' + icon} />
       </h3>
@@ -19,11 +19,13 @@ BigMessage.propTypes = {
   message: PropTypes.string,
   icon: PropTypes.string.isRequired,
   children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 BigMessage.defaultProps = {
   message: '',
   children: null,
+  className: 'tiled bg-white',
 };
 
 export default function init(ngModule) {

client/app/components/DateInput.jsx

@@ -1,14 +1,14 @@
-import moment from 'moment';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
 
-function DateInput({
+export function DateInput({
   value,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
+  className,
 }) {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
   const additionalAttributes = {};
@@ -17,6 +17,7 @@ function DateInput({
   }
   return (
     <DatePicker
+      className={className}
       {...additionalAttributes}
       format={format}
       placeholder="Select Date"
@@ -26,23 +27,19 @@ function DateInput({
 }
 
 DateInput.propTypes = {
-  value: (props, propName, componentName) => {
-    const value = props[propName];
-    if ((value !== null) && !moment.isMoment(value)) {
-      return new Error('Prop `' + propName + '` supplied to `' + componentName +
-        '` should be a Moment.js instance.');
-    }
-  },
+  value: Moment,
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateInput.defaultProps = {
   value: null,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateInput', react2angular(DateInput, null, ['clientConfig']));
+  ngModule.component('dateInput', react2angular(DateInput));
 }
 
 init.init = true;

client/app/components/DateRangeInput.jsx

@@ -1,15 +1,17 @@
-import moment from 'moment';
 import { isArray } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
-import { RangePicker } from 'antd/lib/date-picker';
+import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
 
-function DateRangeInput({
+const { RangePicker } = DatePicker;
+
+export function DateRangeInput({
   value,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
+  className,
 }) {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
   const additionalAttributes = {};
@@ -18,6 +20,7 @@ function DateRangeInput({
   }
   return (
     <RangePicker
+      className={className}
       {...additionalAttributes}
       format={format}
       onChange={onSelect}
@@ -26,28 +29,19 @@ function DateRangeInput({
 }
 
 DateRangeInput.propTypes = {
-  value: (props, propName, componentName) => {
-    const value = props[propName];
-    if (
-      (value !== null) && !(
-        isArray(value) && (value.length === 2) &&
-        moment.isMoment(value[0]) && moment.isMoment(value[1])
-      )
-    ) {
-      return new Error('Prop `' + propName + '` supplied to `' + componentName +
-        '` should be an array of two Moment.js instances.');
-    }
-  },
+  value: PropTypes.arrayOf(Moment),
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateRangeInput.defaultProps = {
   value: null,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateRangeInput', react2angular(DateRangeInput, null, ['clientConfig']));
+  ngModule.component('dateRangeInput', react2angular(DateRangeInput));
 }
 
 init.init = true;

client/app/components/DateTimeInput.jsx

@@ -1,15 +1,15 @@
-import moment from 'moment';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
 
-function DateTimeInput({
+export function DateTimeInput({
   value,
   withSeconds,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
+  className,
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
@@ -19,6 +19,7 @@ function DateTimeInput({
   }
   return (
     <DatePicker
+      className={className}
       showTime
       {...additionalAttributes}
       format={format}
@@ -29,25 +30,21 @@ function DateTimeInput({
 }
 
 DateTimeInput.propTypes = {
-  value: (props, propName, componentName) => {
-    const value = props[propName];
-    if ((value !== null) && !moment.isMoment(value)) {
-      return new Error('Prop `' + propName + '` supplied to `' + componentName +
-        '` should be a Moment.js instance.');
-    }
-  },
+  value: Moment,
   withSeconds: PropTypes.bool,
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateTimeInput.defaultProps = {
   value: null,
   withSeconds: false,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateTimeInput', react2angular(DateTimeInput, null, ['clientConfig']));
+  ngModule.component('dateTimeInput', react2angular(DateTimeInput));
 }
 
 init.init = true;

client/app/components/DateTimeRangeInput.jsx

@@ -1,16 +1,18 @@
-import moment from 'moment';
 import { isArray } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
-import { RangePicker } from 'antd/lib/date-picker';
+import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
+import { Moment } from '@/components/proptypes';
 
-function DateTimeRangeInput({
+const { RangePicker } = DatePicker;
+
+export function DateTimeRangeInput({
   value,
   withSeconds,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
+  className,
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
@@ -20,6 +22,7 @@ function DateTimeRangeInput({
   }
   return (
     <RangePicker
+      className={className}
       showTime
       {...additionalAttributes}
       format={format}
@@ -29,31 +32,21 @@ function DateTimeRangeInput({
 }
 
 DateTimeRangeInput.propTypes = {
-  value: (props, propName, componentName) => {
-    const value = props[propName];
-    if (
-      (value !== null) && !(
-        isArray(value) && (value.length === 2) &&
-        moment.isMoment(value[0]) && moment.isMoment(value[1])
-      )
-    ) {
-      return new Error('Prop `' + propName + '` supplied to `' + componentName +
-        '` should be an array of two Moment.js instances.');
-    }
-  },
+  value: PropTypes.arrayOf(Moment),
   withSeconds: PropTypes.bool,
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateTimeRangeInput.defaultProps = {
   value: null,
   withSeconds: false,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput, null, ['clientConfig']));
+  ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput));
 }
 
 init.init = true;
-

client/app/components/DialogWrapper.jsx

@@ -0,0 +1,209 @@
+import { isFunction } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+
+/**
+  Wrapper for dialogs based on Ant's <Modal> component.
+
+
+  Using wrapped dialogs
+  =====================
+
+  Wrapped component is an object with two fields:
+
+    {
+      showModal: (dialogProps) => object({
+          result: Promise,
+          close: (result) => void,
+          dismiss: (reason) => void,
+        }),
+      Component: React.Component, // wrapped dialog component
+    }
+
+  To open dialog, use `showModal` method; optionally you can pass additional properties that
+  will be expanded on wrapped component:
+
+    const dialog = SomeWrappedDialog.showModal()
+
+    const dialog = SomeWrappedDialog.showModal({ greeting: 'Hello' })
+
+  To get result of modal, use `result` property:
+
+    dialog.result
+      .then(...) // pressed OK button or used `close` method; resolved value is a result of dialog
+      .catch(...) // pressed Cancel button or used `dismiss` method; optional argument is a rejection reason.
+
+  Also, dialog has `close` and `dismiss` methods that allows to close dialog by caller. Passed arguments
+  will be used to resolve/reject `dialog.result` promise. `update` methods allows to pass new properties
+  to dialog.
+
+
+  Creating a dialog
+  ================
+
+  1. Add imports:
+
+    import { wrap as wrapDialog, DialogPropType } from 'path/to/DialogWrapper';
+
+  2. define a `dialog` property on your component:
+
+    propTypes = {
+      dialog: DialogPropType.isRequired,
+    };
+
+  `dialog` property is an object:
+
+    {
+      props: object, // properties for <Modal> component;
+      close: (result) => void, // method to confirm dialog; `result` will be returned to caller
+      dismiss: (reason) => void, // method to reject dialog; `reason` will be returned to caller
+    }
+
+  3. expand additional properties on <Modal> component:
+
+    render() {
+      const { dialog } = this.props;
+      return (
+        <Modal {...dialog.props}>
+      );
+    }
+
+  4. wrap your component and export it:
+
+    export default wrapDialog(YourComponent).
+
+  Your component is ready to use. Wrapper will manage <Modal>'s visibility and events.
+  If you want to override behavior of `onOk`/`onCancel` - don't forget to close dialog:
+
+    customOkHandler() {
+      this.saveData().then(() => {
+         this.props.dialog.close({ success: true }); // or dismiss();
+      });
+    }
+
+    render() {
+      const { dialog } = this.props;
+        return (
+          <Modal {...dialog.props} onOk={() => this.customOkHandler()}>
+        );
+    }
+
+
+  Settings
+  ========
+
+  You can setup this wrapper to use custom `Promise` library (for example, Bluebird):
+
+    import DialogWrapper from 'path/to/DialogWrapper';
+    import Promise from 'bluebird';
+
+    DialogWrapper.Promise = Promise;
+
+  It could be useful to avoid `unhandledrejection` exception that would fire with native Promises,
+  or when some custom Promise library is used in application.
+
+*/
+
+export const DialogPropType = PropTypes.shape({
+  props: PropTypes.shape({
+    visible: PropTypes.bool,
+    onOk: PropTypes.func,
+    onCancel: PropTypes.func,
+    afterClose: PropTypes.func,
+  }).isRequired,
+  close: PropTypes.func.isRequired,
+  dismiss: PropTypes.func.isRequired,
+});
+
+// default export of module
+const DialogWrapper = {
+  Promise,
+  DialogPropType,
+  wrap() {},
+};
+
+function openDialog(DialogComponent, props) {
+  const dialog = {
+    props: {
+      visible: true,
+      onOk: () => {},
+      onCancel: () => {},
+      afterClose: () => {},
+    },
+    close: () => {},
+    dismiss: () => {},
+  };
+
+  const dialogResult = {
+    resolve: () => {},
+    reject: () => {},
+  };
+
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  function render() {
+    ReactDOM.render(<DialogComponent {...props} dialog={dialog} />, container);
+  }
+
+  function destroyDialog() {
+    // Allow calling chain to roll up, and then destroy component
+    setTimeout(() => {
+      ReactDOM.unmountComponentAtNode(container);
+      document.body.removeChild(container);
+    }, 10);
+  }
+
+  function closeDialog(result) {
+    dialogResult.resolve(result);
+    dialog.props.visible = false;
+    render();
+  }
+
+  function dismissDialog(reason) {
+    dialogResult.reject(reason);
+    dialog.props.visible = false;
+    render();
+  }
+
+  dialog.props.onOk = closeDialog;
+  dialog.props.onCancel = dismissDialog;
+  dialog.props.afterClose = destroyDialog;
+  dialog.close = closeDialog;
+  dialog.dismiss = dismissDialog;
+
+  const result = {
+    close: closeDialog,
+    dismiss: dismissDialog,
+    update: (newProps) => {
+      props = { ...props, ...newProps };
+      render();
+    },
+    result: new DialogWrapper.Promise((resolve, reject) => {
+      dialogResult.resolve = resolve;
+      dialogResult.reject = reject;
+    }),
+  };
+
+  render(); // show it only when all structures initialized to avoid unnecessary re-rendering
+
+  // Some known libraries support
+  // Bluebird: http://bluebirdjs.com/docs/api/suppressunhandledrejections.html
+  if (isFunction(result.result.suppressUnhandledRejections)) {
+    result.result.suppressUnhandledRejections();
+  }
+
+  return result;
+}
+
+export function wrap(DialogComponent) {
+  return {
+    Component: DialogComponent,
+    showModal: props => openDialog(DialogComponent, props),
+  };
+}
+
+DialogWrapper.wrap = wrap;
+
+export default DialogWrapper;

client/app/components/DynamicComponent.jsx

@@ -0,0 +1,50 @@
+import { isFunction, isString } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const componentsRegistry = new Map();
+const activeInstances = new Set();
+
+export function registerComponent(name, component) {
+  if (isString(name) && name !== '') {
+    componentsRegistry.set(name, isFunction(component) ? component : null);
+    // Refresh active DynamicComponent instances which use this component
+    activeInstances.forEach((dynamicComponent) => {
+      if (dynamicComponent.props.name === name) {
+        dynamicComponent.forceUpdate();
+      }
+    });
+  }
+}
+
+export function unregisterComponent(name) {
+  registerComponent(name, null);
+}
+
+export default class DynamicComponent extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    children: PropTypes.node,
+  };
+
+  static defaultProps = {
+    children: null,
+  };
+
+  componentDidMount() {
+    activeInstances.add(this);
+  }
+
+  componentWillUnmount() {
+    activeInstances.delete(this);
+  }
+
+  render() {
+    const { name, children, ...props } = this.props;
+    const RealComponent = componentsRegistry.get(name);
+    if (!RealComponent) {
+      return null;
+    }
+    return <RealComponent {...props}>{children}</RealComponent>;
+  }
+}

client/app/components/EditInPlace.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
+import { trim } from 'lodash';
 
 export class EditInPlace extends React.Component {
   static propTypes = {
@@ -18,6 +19,7 @@ export class EditInPlace extends React.Component {
     placeholder: '',
     value: '',
   };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -39,8 +41,8 @@ export class EditInPlace extends React.Component {
   };
 
   stopEditing = () => {
-    const newValue = this.inputRef.current.value;
-    const ignorableBlank = this.props.ignoreBlanks && this.props.value === '';
+    const newValue = trim(this.inputRef.current.value);
+    const ignorableBlank = this.props.ignoreBlanks && newValue === '';
     if (!ignorableBlank && newValue !== this.props.value) {
       this.props.onDone(newValue);
     }
@@ -67,14 +69,13 @@ export class EditInPlace extends React.Component {
     </span>
   );
 
-  renderEdit = () =>
-    React.createElement(this.props.editor, {
-      ref: this.inputRef,
-      className: 'rd-form-control',
-      defaultValue: this.props.value,
-      onBlur: this.stopEditing,
-      onKeyDown: this.keyDown,
-    });
+  renderEdit = () => React.createElement(this.props.editor, {
+    ref: this.inputRef,
+    className: 'rd-form-control',
+    defaultValue: this.props.value,
+    onBlur: this.stopEditing,
+    onKeyDown: this.keyDown,
+  });
 
   render() {
     return (

client/app/components/EditParameterSettingsDialog.jsx

@@ -0,0 +1,218 @@
+
+import { includes, startsWith, words, capitalize, clone, isNull } from 'lodash';
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Modal from 'antd/lib/modal';
+import Form from 'antd/lib/form';
+import Checkbox from 'antd/lib/checkbox';
+import Button from 'antd/lib/button';
+import Select from 'antd/lib/select';
+import Input from 'antd/lib/input';
+import Divider from 'antd/lib/divider';
+import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import { QuerySelector } from '@/components/QuerySelector';
+import { Query } from '@/services/query';
+
+const { Option } = Select;
+const formItemProps = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
+
+function getDefaultTitle(text) {
+  return capitalize(words(text).join(' ')); // humanize
+}
+
+function isTypeDate(type) {
+  return startsWith(type, 'date') && !isTypeDateRange(type);
+}
+
+function isTypeDateRange(type) {
+  return /-range/.test(type);
+}
+
+function NameInput({ name, type, onChange, existingNames, setValidation }) {
+  let helpText = '';
+  let validateStatus = '';
+
+  if (!name) {
+    helpText = 'Choose a keyword for this parameter';
+    setValidation(false);
+  } else if (includes(existingNames, name)) {
+    helpText = 'Parameter with this name already exists';
+    setValidation(false);
+    validateStatus = 'error';
+  } else {
+    if (isTypeDateRange(type)) {
+      helpText = (
+        <React.Fragment>
+          Appears in query as {' '}
+          <code style={{ display: 'inline-block', color: 'inherit' }}>
+            {`{{${name}.start}} {{${name}.end}}`}
+          </code>
+        </React.Fragment>
+      );
+    }
+    setValidation(true);
+  }
+
+  return (
+    <Form.Item
+      required
+      label="Keyword"
+      help={helpText}
+      validateStatus={validateStatus}
+      {...formItemProps}
+    >
+      <Input onChange={e => onChange(e.target.value)} autoFocus />
+    </Form.Item>
+  );
+}
+
+NameInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  existingNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setValidation: PropTypes.func.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+function EditParameterSettingsDialog(props) {
+  const [param, setParam] = useState(clone(props.parameter));
+  const [isNameValid, setIsNameValid] = useState(true);
+  const [initialQuery, setInitialQuery] = useState();
+
+  const isNew = !props.parameter.name;
+
+  // fetch query by id
+  useEffect(() => {
+    const { queryId } = props.parameter;
+    if (queryId) {
+      Query.get({ id: queryId }, (query) => {
+        setInitialQuery(query);
+      });
+    }
+  }, []);
+
+  function isFulfilled() {
+    // name
+    if (!isNameValid) {
+      return false;
+    }
+
+    // title
+    if (param.title === '') {
+      return false;
+    }
+
+    // query
+    if (param.type === 'query' && !param.queryId) {
+      return false;
+    }
+
+    return true;
+  }
+
+  function onConfirm(e) {
+    // update title to default
+    if (!param.title) {
+      // forced to do this cause param won't update in time for save
+      param.title = getDefaultTitle(param.name);
+      setParam(param);
+    }
+
+    props.dialog.close(param);
+
+    e.preventDefault(); // stops form redirect
+  }
+
+  return (
+    <Modal
+      {...props.dialog.props}
+      title={isNew ? 'Add Parameter' : param.name}
+      width={600}
+      footer={[(
+        <Button key="cancel" onClick={props.dialog.dismiss}>Cancel</Button>
+      ), (
+        <Button key="submit" htmlType="submit" disabled={!isFulfilled()} type="primary" form="paramForm">
+          {isNew ? 'Add Parameter' : 'OK'}
+        </Button>
+      )]}
+    >
+      <Form layout="horizontal" onSubmit={onConfirm} id="paramForm">
+        {isNew && (
+          <NameInput
+            name={param.name}
+            onChange={name => setParam({ ...param, name })}
+            setValidation={setIsNameValid}
+            existingNames={props.existingParams}
+            type={param.type}
+          />
+        )}
+        <Form.Item label="Title" {...formItemProps}>
+          <Input
+            value={isNull(param.title) ? getDefaultTitle(param.name) : param.title}
+            onChange={e => setParam({ ...param, title: e.target.value })}
+          />
+        </Form.Item>
+        <Form.Item label="Type" {...formItemProps}>
+          <Select value={param.type} onChange={type => setParam({ ...param, type })}>
+            <Option value="text">Text</Option>
+            <Option value="number">Number</Option>
+            <Option value="enum">Dropdown List</Option>
+            <Option value="query">Query Based Dropdown List</Option>
+            <Option disabled key="dv1">
+              <Divider className="select-option-divider" />
+            </Option>
+            <Option value="date">Date</Option>
+            <Option value="datetime-local">Date and Time</Option>
+            <Option value="datetime-with-seconds">Date and Time (with seconds)</Option>
+            <Option disabled key="dv2">
+              <Divider className="select-option-divider" />
+            </Option>
+            <Option value="date-range">Date Range</Option>
+            <Option value="datetime-range">Date and Time Range</Option>
+            <Option value="datetime-range-with-seconds">Date and Time Range (with seconds)</Option>
+          </Select>
+        </Form.Item>
+        {isTypeDate(param.type) && (
+          <Form.Item label=" " colon={false} {...formItemProps}>
+            <Checkbox
+              defaultChecked={param.useCurrentDateTime}
+              onChange={e => setParam({ ...param, useCurrentDateTime: e.target.checked })}
+            >
+              Default to Today/Now if no other value is set
+            </Checkbox>
+          </Form.Item>
+        )}
+        {param.type === 'enum' && (
+          <Form.Item label="Values" help="Dropdown list values (newline delimeted)" {...formItemProps}>
+            <Input.TextArea
+              rows={3}
+              value={param.enumOptions}
+              onChange={e => setParam({ ...param, enumOptions: e.target.value })}
+            />
+          </Form.Item>
+        )}
+        {param.type === 'query' && (
+          <Form.Item label="Query" help="Select query to load dropdown values from" {...formItemProps}>
+            <QuerySelector
+              selectedQuery={initialQuery}
+              onChange={q => setParam({ ...param, queryId: q && q.id })}
+              type="select"
+            />
+          </Form.Item>
+        )}
+      </Form>
+    </Modal>
+  );
+}
+
+EditParameterSettingsDialog.propTypes = {
+  parameter: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  dialog: DialogPropType.isRequired,
+  existingParams: PropTypes.arrayOf(PropTypes.string),
+};
+
+EditParameterSettingsDialog.defaultProps = {
+  existingParams: [],
+};
+
+export default wrapDialog(EditParameterSettingsDialog);

client/app/components/EmailSettingsWarning.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { currentUser, clientConfig } from '@/services/auth';
+
+export function EmailSettingsWarning({ featureName }) {
+  return (clientConfig.mailSettingsMissing && currentUser.isAdmin) ? (
+    <p className="alert alert-danger">
+      {`It looks like your mail server isn't configured. Make sure to configure it for the ${featureName} to work.`}
+    </p>
+  ) : null;
+}
+
+EmailSettingsWarning.propTypes = {
+  featureName: PropTypes.string.isRequired,
+};
+
+export default function init(ngModule) {
+  ngModule.component('emailSettingsWarning', react2angular(EmailSettingsWarning));
+}
+
+init.init = true;

client/app/components/FavoritesControl.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { $rootScope } from '@/services/ng';
+
+export class FavoritesControl extends React.Component {
+  static propTypes = {
+    item: PropTypes.shape({
+      is_favorite: PropTypes.bool.isRequired,
+    }).isRequired,
+    onChange: PropTypes.func,
+    // Force component update when `item` changes.
+    // Remove this when `react2angular` will finally go to hell
+    forceUpdate: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  };
+
+  static defaultProps = {
+    onChange: () => {},
+    forceUpdate: '',
+  };
+
+  toggleItem(event, item, callback) {
+    const action = item.is_favorite ? item.$unfavorite.bind(item) : item.$favorite.bind(item);
+    const savedIsFavorite = item.is_favorite;
+
+    action().then(() => {
+      item.is_favorite = !savedIsFavorite;
+      this.forceUpdate();
+      $rootScope.$broadcast('reloadFavorites');
+      callback();
+    });
+  }
+
+  render() {
+    const { item, onChange } = this.props;
+    const icon = item.is_favorite ? 'fa fa-star' : 'fa fa-star-o';
+    const title = item.is_favorite ? 'Remove from favorites' : 'Add to favorites';
+    return (
+      <a
+        href="javascript:void(0)"
+        title={title}
+        className="btn-favourite"
+        onClick={event => this.toggleItem(event, item, onChange)}
+      >
+        <i className={icon} aria-hidden="true" />
+      </a>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('favoritesControlImpl', react2angular(FavoritesControl));
+  ngModule.component('favoritesControl', {
+    template: `
+      <favorites-control-impl 
+        ng-if="$ctrl.item" 
+        item="$ctrl.item" 
+        on-change="$ctrl.onChange"
+        force-update="$ctrl.forceUpdateTag"
+      ></favorites-control-impl>
+    `,
+    bindings: {
+      item: '=',
+    },
+    controller($scope) {
+      // See comment for FavoritesControl.propTypes.forceUpdate
+      this.forceUpdateTag = 'force' + Date.now();
+      $scope.$on('reloadFavorites', () => {
+        this.forceUpdateTag = 'force' + Date.now();
+      });
+
+      this.onChange = () => {
+        $scope.$applyAsync();
+      };
+    },
+  });
+}
+
+init.init = true;

client/app/components/Footer.jsx

@@ -1,28 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import { react2angular } from 'react2angular';
 
-import frontendVersion from '../version.json';
-
-export function Footer({ clientConfig, currentUser }) {
-  const backendVersion = clientConfig.version;
-  const newVersionAvailable = clientConfig.newVersionAvailable && currentUser.isAdmin;
+export function Footer() {
   const separator = ' \u2022 ';
 
-  let newVersionString = '';
-  if (newVersionAvailable) {
-    newVersionString = (
-      <small>
-        <a href="https://version.redash.io/">(New Redash version available)</a>
-      </small>
-    );
-  }
-
   return (
     <div id="footer">
-      <a href="https://redash.io">Redash</a> {backendVersion} ({frontendVersion.substring(0, 8)})
-      {newVersionString}
+      <a href="https://redash.io">Redash</a>
       {separator}
       <a href="https://redash.io/help/">Documentation</a>
       {separator}
@@ -31,18 +15,8 @@ export function Footer({ clientConfig, currentUser }) {
   );
 }
 
-Footer.propTypes = {
-  clientConfig: PropTypes.shape({
-    version: PropTypes.string,
-    newVersionAvailable: PropTypes.bool,
-  }).isRequired,
-  currentUser: PropTypes.shape({
-    isAdmin: PropTypes.bool,
-  }).isRequired,
-};
-
 export default function init(ngModule) {
-  ngModule.component('footer', react2angular(Footer, [], ['clientConfig', 'currentUser']));
+  ngModule.component('footer', react2angular(Footer));
 }
 
 init.init = true;

client/app/components/Footer.test.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { Footer } from './Footer';
-
-test('Footer renders', () => {
-  const clientConfig = {
-    version: '5.0.1',
-    newVersionAvailable: true,
-  };
-  const currentUser = {
-    isAdmin: true,
-  };
-  const component = renderer.create(<Footer clientConfig={clientConfig} currentUser={currentUser} />);
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
-});

client/app/components/HelpTrigger.jsx

@@ -0,0 +1,150 @@
+import { react2angular } from 'react2angular';
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Tooltip from 'antd/lib/tooltip';
+import Drawer from 'antd/lib/drawer';
+import { BigMessage } from '@/components/BigMessage';
+import DynamicComponent from '@/components/DynamicComponent';
+
+import './HelpTrigger.less';
+
+const DOMAIN = 'https://redash.io';
+const HELP_PATH = '/help';
+const IFRAME_TIMEOUT = 20000;
+const TYPES = {
+  HOME: [
+    '',
+    'Help',
+  ],
+  VALUE_SOURCE_OPTIONS: [
+    '/user-guide/querying/query-parameters#Value-Source-Options',
+    'Guide: Value Source Options',
+  ],
+  SHARE_DASHBOARD: [
+    '/user-guide/dashboards/sharing-dashboards',
+    'Guide: Sharing and Embedding Dashboards',
+  ],
+};
+
+export class HelpTrigger extends React.Component {
+  static propTypes = {
+    type: PropTypes.oneOf(Object.keys(TYPES)).isRequired,
+    className: PropTypes.string,
+  }
+
+  static defaultProps = {
+    className: null,
+  };
+
+  iframeRef = null
+
+  iframeLoadingTimeout = null
+
+  constructor(props) {
+    super(props);
+    this.iframeRef = React.createRef();
+  }
+
+  state = {
+    visible: false,
+    loading: false,
+    error: false,
+  };
+
+  componentWillUnmount() {
+    clearTimeout(this.iframeLoadingTimeout);
+  }
+
+  loadIframe = (url) => {
+    clearTimeout(this.iframeLoadingTimeout);
+    this.setState({ loading: true, error: false });
+
+    this.iframeRef.current.src = url;
+    this.iframeLoadingTimeout = setTimeout(() => {
+      this.setState({ error: url, loading: false });
+    }, IFRAME_TIMEOUT); // safety
+  }
+
+  onIframeLoaded = () => {
+    this.setState({ loading: false });
+    clearTimeout(this.iframeLoadingTimeout);
+  }
+
+  openDrawer = () => {
+    this.setState({ visible: true });
+    const [pagePath] = TYPES[this.props.type];
+    const url = DOMAIN + HELP_PATH + pagePath;
+
+    // wait for drawer animation to complete so there's no animation jank
+    setTimeout(() => this.loadIframe(url), 300);
+  }
+
+  closeDrawer = () => {
+    this.setState({ visible: false });
+  }
+
+  render() {
+    const [, tooltip] = TYPES[this.props.type];
+    const className = cx('help-trigger', this.props.className);
+
+    return (
+      <React.Fragment>
+        <Tooltip title={tooltip}>
+          <a href="javascript: void(0)" onClick={this.openDrawer} className={className}>
+            <i className="fa fa-question-circle" />
+          </a>
+        </Tooltip>
+        <Drawer
+          placement="right"
+          onClose={this.closeDrawer}
+          visible={this.state.visible}
+          className="help-drawer"
+          destroyOnClose
+          width={400}
+        >
+          <div className="drawer-wrapper">
+            {/* iframe */}
+            {!this.state.error && (
+              <iframe
+                ref={this.iframeRef}
+                title="Redash Help"
+                src="about:blank"
+                className={cx({ ready: !this.state.loading })}
+                onLoad={this.onIframeLoaded}
+              />
+            )}
+
+            {/* loading indicator */}
+            {this.state.loading && (
+              <BigMessage icon="fa-spinner fa-2x fa-pulse" message="Loading..." className="help-message" />
+            )}
+
+            {/* error message */}
+            {this.state.error && (
+              <BigMessage icon="fa-exclamation-circle" className="help-message">
+                Something went wrong.<br />
+                {/* eslint-disable-next-line react/jsx-no-target-blank */}
+                <a href={this.state.error} target="_blank" rel="noopener">Click here</a>{' '}
+                to open the page in a new window.
+              </BigMessage>
+            )}
+          </div>
+
+          {/* extra content */}
+          <DynamicComponent
+            name="HelpDrawerExtraContent"
+            onLeave={this.closeDrawer}
+            openPageUrl={this.loadIframe}
+          />
+        </Drawer>
+      </React.Fragment>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('helpTrigger', react2angular(HelpTrigger));
+}
+
+init.init = true;

client/app/components/HelpTrigger.less

@@ -0,0 +1,34 @@
+.help-trigger {
+  font-size: 15px;
+}
+
+.help-drawer {
+  .ant-drawer-body {
+    padding: 0;
+    height: 100%; // to allow iframe full dimensions
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .drawer-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+  }
+
+  iframe {
+    width: 0;
+    visibility: hidden;
+  }
+
+  iframe.ready {
+    border: 0;
+    width: 100%;
+    height: 100%;
+    visibility: visible;
+  }
+}

client/app/components/InputWithCopy.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Input from 'antd/lib/input';
+import Icon from 'antd/lib/icon';
+import Tooltip from 'antd/lib/tooltip';
+
+export default class InputWithCopy extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { copied: null };
+    this.ref = React.createRef();
+    this.copyFeatureSupported = document.queryCommandSupported('copy');
+    this.resetCopyState = null;
+  }
+
+  componentWillUnmount() {
+    if (this.resetCopyState) {
+      clearTimeout(this.resetCopyState);
+    }
+  }
+
+  copy = () => {
+    // select text
+    this.ref.current.select();
+
+    // copy
+    try {
+      const success = document.execCommand('copy');
+      if (!success) {
+        throw new Error();
+      }
+      this.setState({ copied: 'Copied!' });
+    } catch (err) {
+      this.setState({
+        copied: 'Copy failed',
+      });
+    }
+
+    // reset tooltip
+    this.resetCopyState = setTimeout(() => this.setState({ copied: null }), 2000);
+  };
+
+  render() {
+    const copyButton = (
+      <Tooltip title={this.state.copied || 'Copy'}>
+        <Icon
+          type="copy"
+          style={{ cursor: 'pointer' }}
+          onClick={this.copy}
+        />
+      </Tooltip>
+    );
+
+    return (
+      <Input {...this.props} ref={this.ref} addonAfter={this.copyFeatureSupported && copyButton} />
+    );
+  }
+}

client/app/components/NoTaggedObjectsFound.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import { BigMessage } from '@/components/BigMessage';
-import TagsControl from '@/components/tags-control/TagsControl';
+import { TagsControl } from '@/components/tags-control/TagsControl';
 
-function NoTaggedObjectsFound({ objectType, tags }) {
+export function NoTaggedObjectsFound({ objectType, tags }) {
   return (
     <BigMessage icon="fa-tags">
       No {objectType} found tagged with&nbsp;<TagsControl className="inline-tags-control" tags={Array.from(tags)} />.
@@ -14,7 +14,10 @@ function NoTaggedObjectsFound({ objectType, tags }) {
 
 NoTaggedObjectsFound.propTypes = {
   objectType: PropTypes.string.isRequired,
-  tags: PropTypes.objectOf(Set).isRequired,
+  tags: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.objectOf(Set),
+  ]).isRequired,
 };
 
 export default function init(ngModule) {

client/app/components/PageHeader.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+
+export function PageHeader({ title }) {
+  return (
+    <div className="page-header-wrapper row p-l-15 p-r-15 m-b-10 m-l-0 m-r-0">
+      <div className="col-sm-9 p-l-0 p-r-0">
+        <h3>{ title }</h3>
+      </div>
+    </div>
+  );
+}
+
+PageHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default function init(ngModule) {
+  ngModule.component('pageHeader', react2angular(PageHeader));
+}
+
+init.init = true;

client/app/components/Paginator.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import Pagination from 'antd/lib/pagination';
+
+export function Paginator({
+  page,
+  itemsPerPage,
+  totalCount,
+  onChange,
+}) {
+  if (totalCount <= itemsPerPage) {
+    return null;
+  }
+  return (
+    <div className="paginator-container">
+      <Pagination
+        defaultCurrent={page}
+        defaultPageSize={itemsPerPage}
+        total={totalCount}
+        onChange={onChange}
+      />
+    </div>
+  );
+}
+
+Paginator.propTypes = {
+  page: PropTypes.number.isRequired,
+  itemsPerPage: PropTypes.number.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  onChange: PropTypes.func,
+};
+
+Paginator.defaultProps = {
+  onChange: () => {},
+};
+
+export default function init(ngModule) {
+  ngModule.component('paginatorImpl', react2angular(Paginator));
+  ngModule.component('paginator', {
+    template: `
+      <paginator-impl
+        page="$ctrl.paginator.page"
+        items-per-page="$ctrl.paginator.itemsPerPage"
+        total-count="$ctrl.paginator.totalCount"
+        on-change="$ctrl.onPageChanged"
+      ></paginator-impl>`,
+    bindings: {
+      paginator: '<',
+    },
+    controller($scope) {
+      this.onPageChanged = (page) => {
+        this.paginator.setPage(page);
+        $scope.$applyAsync();
+      };
+    },
+  });
+}
+
+init.init = true;

client/app/components/ParameterMappingInput.jsx

@@ -0,0 +1,642 @@
+/* eslint-disable react/no-multi-comp */
+
+import { isString, extend, each, map, includes, findIndex, find, fromPairs, clone, isEmpty } from 'lodash';
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Select from 'antd/lib/select';
+import Table from 'antd/lib/table';
+import Popover from 'antd/lib/popover';
+import Button from 'antd/lib/button';
+import Icon from 'antd/lib/icon';
+import Tag from 'antd/lib/tag';
+import Input from 'antd/lib/input';
+import Radio from 'antd/lib/radio';
+import Form from 'antd/lib/form';
+import Tooltip from 'antd/lib/tooltip';
+import { ParameterValueInput } from '@/components/ParameterValueInput';
+import { ParameterMappingType } from '@/services/widget';
+import { clientConfig } from '@/services/auth';
+import { Query, Parameter } from '@/services/query';
+import { HelpTrigger } from '@/components/HelpTrigger';
+
+import './ParameterMappingInput.less';
+
+const { Option } = Select;
+
+export const MappingType = {
+  DashboardAddNew: 'dashboard-add-new',
+  DashboardMapToExisting: 'dashboard-map-to-existing',
+  WidgetLevel: 'widget-level',
+  StaticValue: 'static-value',
+};
+
+export function parameterMappingsToEditableMappings(mappings, parameters, existingParameterNames = []) {
+  return map(mappings, (mapping) => {
+    const result = extend({}, mapping);
+    const alreadyExists = includes(existingParameterNames, mapping.mapTo);
+    result.param = find(parameters, p => p.name === mapping.name);
+    switch (mapping.type) {
+      case ParameterMappingType.DashboardLevel:
+        result.type = alreadyExists ? MappingType.DashboardMapToExisting : MappingType.DashboardAddNew;
+        result.value = null;
+        break;
+      case ParameterMappingType.StaticValue:
+        result.type = MappingType.StaticValue;
+        result.param = result.param.clone();
+        result.param.setValue(result.value);
+        break;
+      case ParameterMappingType.WidgetLevel:
+        result.type = MappingType.WidgetLevel;
+        result.value = null;
+        break;
+      // no default
+    }
+    return result;
+  });
+}
+
+export function editableMappingsToParameterMappings(mappings) {
+  return fromPairs(map( // convert to map
+    mappings,
+    (mapping) => {
+      const result = extend({}, mapping);
+      switch (mapping.type) {
+        case MappingType.DashboardAddNew:
+          result.type = ParameterMappingType.DashboardLevel;
+          result.value = null;
+          break;
+        case MappingType.DashboardMapToExisting:
+          result.type = ParameterMappingType.DashboardLevel;
+          result.value = null;
+          break;
+        case MappingType.StaticValue:
+          result.type = ParameterMappingType.StaticValue;
+          result.param = mapping.param.clone();
+          result.param.setValue(result.value);
+          result.value = result.param.value;
+          break;
+        case MappingType.WidgetLevel:
+          result.type = ParameterMappingType.WidgetLevel;
+          result.value = null;
+          break;
+        // no default
+      }
+      delete result.param;
+      return [result.name, result];
+    },
+  ));
+}
+
+export function synchronizeWidgetTitles(sourceMappings, widgets) {
+  const affectedWidgets = [];
+
+  each(sourceMappings, (sourceMapping) => {
+    if (sourceMapping.type === ParameterMappingType.DashboardLevel) {
+      each(widgets, (widget) => {
+        const widgetMappings = widget.options.parameterMappings;
+        each(widgetMappings, (widgetMapping) => {
+          // check if mapped to the same dashboard-level parameter
+          if (
+            (widgetMapping.type === ParameterMappingType.DashboardLevel) &&
+            (widgetMapping.mapTo === sourceMapping.mapTo)
+          ) {
+            // dirty check - update only when needed
+            if (widgetMapping.title !== sourceMapping.title) {
+              widgetMapping.title = sourceMapping.title;
+              affectedWidgets.push(widget);
+            }
+          }
+        });
+      });
+    }
+  });
+
+  return affectedWidgets;
+}
+
+export class ParameterMappingInput extends React.Component {
+  static propTypes = {
+    mapping: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    existingParamNames: PropTypes.arrayOf(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
+    inputError: PropTypes.string,
+  };
+
+  static defaultProps = {
+    mapping: {},
+    existingParamNames: [],
+    onChange: () => {},
+    clientConfig: null,
+    Query: null,
+    inputError: null,
+  };
+
+  formItemProps = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 16 },
+    className: 'form-item',
+  };
+
+  updateSourceType = (type) => {
+    let { mapping: { mapTo } } = this.props;
+    const { existingParamNames } = this.props;
+
+    // if mapped name doesn't already exists
+    // default to first select option
+    if (
+      type === MappingType.DashboardMapToExisting &&
+      !includes(existingParamNames, mapTo)
+    ) {
+      mapTo = existingParamNames[0];
+    }
+
+    this.updateParamMapping({ type, mapTo });
+  };
+
+  updateParamMapping = (update) => {
+    const { onChange, mapping } = this.props;
+    const newMapping = extend({}, mapping, update);
+    onChange(newMapping);
+  };
+
+  renderMappingTypeSelector() {
+    const noExisting = isEmpty(this.props.existingParamNames);
+    return (
+      <Radio.Group
+        value={this.props.mapping.type}
+        onChange={e => this.updateSourceType(e.target.value)}
+      >
+        <Radio className="radio" value={MappingType.DashboardAddNew}>
+          New dashboard parameter
+        </Radio>
+        <Radio
+          className="radio"
+          value={MappingType.DashboardMapToExisting}
+          disabled={noExisting}
+        >
+          Existing dashboard parameter{' '}
+          {noExisting ? (
+            <Tooltip title="There are no dashboard parameters corresponding to this data type">
+              <Icon type="question-circle" theme="filled" />
+            </Tooltip>
+          ) : null }
+        </Radio>
+        <Radio className="radio" value={MappingType.WidgetLevel}>
+          Widget parameter
+        </Radio>
+        <Radio className="radio" value={MappingType.StaticValue}>
+          Static value
+        </Radio>
+      </Radio.Group>
+    );
+  }
+
+  renderDashboardAddNew() {
+    const { mapping: { mapTo } } = this.props;
+    return (
+      <Input
+        value={mapTo}
+        onChange={e => this.updateParamMapping({ mapTo: e.target.value })}
+      />
+    );
+  }
+
+  renderDashboardMapToExisting() {
+    const { mapping, existingParamNames } = this.props;
+
+    return (
+      <Select
+        value={mapping.mapTo}
+        onChange={mapTo => this.updateParamMapping({ mapTo })}
+        dropdownMatchSelectWidth={false}
+      >
+        {map(existingParamNames, name => (
+          <Option value={name} key={name}>{ name }</Option>
+        ))}
+      </Select>
+    );
+  }
+
+  renderStaticValue() {
+    const { mapping } = this.props;
+    return (
+      <ParameterValueInput
+        type={mapping.param.type}
+        value={mapping.param.normalizedValue}
+        enumOptions={mapping.param.enumOptions}
+        queryId={mapping.param.queryId}
+        onSelect={value => this.updateParamMapping({ value })}
+        clientConfig={this.props.clientConfig}
+        Query={this.props.Query}
+      />
+    );
+  }
+
+  renderInputBlock() {
+    const { mapping } = this.props;
+    switch (mapping.type) {
+      case MappingType.DashboardAddNew:
+        return [
+          'Key',
+          'Enter a new parameter keyword',
+          this.renderDashboardAddNew(),
+        ];
+      case MappingType.DashboardMapToExisting:
+        return [
+          'Key',
+          'Select from a list of existing parameters',
+          this.renderDashboardMapToExisting(),
+        ];
+      case MappingType.StaticValue:
+        return [
+          'Value',
+          null,
+          this.renderStaticValue(),
+        ];
+      default: return [];
+    }
+  }
+
+  render() {
+    const { inputError } = this.props;
+    const [label, help, input] = this.renderInputBlock();
+
+    return (
+      <Form layout="horizontal">
+        <Form.Item label="Source" {...this.formItemProps}>
+          {this.renderMappingTypeSelector()}
+        </Form.Item>
+        <Form.Item
+          style={{ height: 60, visibility: input ? 'visible' : 'hidden' }}
+          label={label}
+          {...this.formItemProps}
+          validateStatus={inputError ? 'error' : ''}
+          help={inputError || help} // empty space so line doesn't collapse
+        >
+          {input}
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+class MappingEditor extends React.Component {
+  static propTypes = {
+    mapping: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    existingParamNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onChange: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      mapping: clone(this.props.mapping),
+      inputError: null,
+    };
+  }
+
+  onVisibleChange = (visible) => {
+    if (visible) this.show(); else this.hide();
+  };
+
+  onChange = (mapping) => {
+    let inputError = null;
+
+    if (mapping.type === MappingType.DashboardAddNew) {
+      if (isEmpty(mapping.mapTo)) {
+        inputError = 'Keyword must have a value';
+      } else if (includes(this.props.existingParamNames, mapping.mapTo)) {
+        inputError = 'A parameter with this name already exists';
+      }
+    }
+
+    this.setState({ mapping, inputError });
+  };
+
+  save = () => {
+    this.props.onChange(this.props.mapping, this.state.mapping);
+    this.hide();
+  };
+
+  show = () => {
+    this.setState({
+      visible: true,
+      mapping: clone(this.props.mapping), // restore original state
+    });
+  };
+
+  hide = () => {
+    this.setState({ visible: false });
+  };
+
+  renderContent() {
+    const { mapping, inputError } = this.state;
+
+    return (
+      <div className="parameter-mapping-editor">
+        <header>
+          Edit Source and Value <HelpTrigger type="VALUE_SOURCE_OPTIONS" />
+        </header>
+        <ParameterMappingInput
+          mapping={mapping}
+          existingParamNames={this.props.existingParamNames}
+          onChange={this.onChange}
+          clientConfig={clientConfig}
+          Query={Query}
+          inputError={inputError}
+        />
+        <footer>
+          <Button onClick={this.hide}>Cancel</Button>
+          <Button onClick={this.save} disabled={!!inputError} type="primary">OK</Button>
+        </footer>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Popover
+        placement="left"
+        trigger="click"
+        content={this.renderContent()}
+        visible={this.state.visible}
+        onVisibleChange={this.onVisibleChange}
+      >
+        <Button size="small" type="dashed">
+          <Icon type="edit" />
+        </Button>
+      </Popover>
+    );
+  }
+}
+
+class TitleEditor extends React.Component {
+  static propTypes = {
+    existingParams: PropTypes.arrayOf(PropTypes.object),
+    mapping: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    onChange: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    existingParams: [],
+  };
+
+  state = {
+    showPopup: false,
+    title: '', // will be set on editing
+  };
+
+  onPopupVisibleChange = (showPopup) => {
+    this.setState({
+      showPopup,
+      title: showPopup ? this.getMappingTitle() : '',
+    });
+  };
+
+  onEditingTitleChange = (event) => {
+    this.setState({ title: event.target.value });
+  };
+
+  getMappingTitle() {
+    let { mapping } = this.props;
+
+    if (isString(mapping.title) && (mapping.title !== '')) {
+      return mapping.title;
+    }
+
+    // if mapped to dashboard, find source param and return it's title
+    if (mapping.type === MappingType.DashboardMapToExisting) {
+      const source = find(this.props.existingParams, { name: mapping.mapTo });
+      if (source) {
+        mapping = source;
+      }
+    }
+
+    return mapping.title || mapping.param.title;
+  }
+
+  save = () => {
+    const newMapping = extend({}, this.props.mapping, { title: this.state.title });
+    this.props.onChange(newMapping);
+    this.hide();
+  };
+
+  hide = () => {
+    this.setState({ showPopup: false });
+  };
+
+  renderPopover() {
+    const { param: { title: paramTitle } } = this.props.mapping;
+
+    return (
+      <div className="parameter-mapping-title-editor">
+        <Input
+          size="small"
+          value={this.state.title}
+          placeholder={paramTitle}
+          onChange={this.onEditingTitleChange}
+          onPressEnter={this.save}
+          maxLength={100}
+          autoFocus
+        />
+        <Button size="small" type="dashed" onClick={this.hide}>
+          <Icon type="close" />
+        </Button>
+        <Button size="small" type="dashed" onClick={this.save}>
+          <Icon type="check" />
+        </Button>
+      </div>
+    );
+  }
+
+  renderEditButton() {
+    const { mapping } = this.props;
+    if (mapping.type === MappingType.StaticValue) {
+      return (
+        <Tooltip placement="right" title="Titles for static values don't appear in widgets">
+          <i className="fa fa-eye-slash" />
+        </Tooltip>
+      );
+    }
+    return (
+      <Popover
+        placement="right"
+        trigger="click"
+        content={this.renderPopover()}
+        visible={this.state.showPopup}
+        onVisibleChange={this.onPopupVisibleChange}
+      >
+        <Button size="small" type="dashed">
+          <Icon type="edit" />
+        </Button>
+      </Popover>
+    );
+  }
+
+  render() {
+    const { mapping } = this.props;
+    // static value are non-editable hence disabled
+    const disabled = mapping.type === MappingType.StaticValue;
+
+    return (
+      <div className={classNames('parameter-mapping-title', { disabled })}>
+        <span className="text">{this.getMappingTitle()}</span>
+        {this.renderEditButton()}
+      </div>
+    );
+  }
+}
+
+export class ParameterMappingListInput extends React.Component {
+  static propTypes = {
+    mappings: PropTypes.arrayOf(PropTypes.object),
+    existingParams: PropTypes.arrayOf(PropTypes.object),
+    onChange: PropTypes.func,
+  };
+
+  static defaultProps = {
+    mappings: [],
+    existingParams: [],
+    onChange: () => {},
+  };
+
+  static getStringValue(value) {
+    // null
+    if (!value) {
+      return '';
+    }
+
+    // range
+    if (value instanceof Object && 'start' in value && 'end' in value) {
+      return `${value.start} ~ ${value.end}`;
+    }
+
+    // just to be safe, array or object
+    if (typeof value === 'object') {
+      return map(value, v => this.getStringValue(v)).join(', ');
+    }
+
+    // rest
+    return value.toString();
+  }
+
+  static getDefaultValue(mapping, existingParams) {
+    const { type, mapTo, name } = mapping;
+    let { param } = mapping;
+
+    // if mapped to another param, swap 'em
+    if (type === MappingType.DashboardMapToExisting && mapTo !== name) {
+      const mappedTo = find(existingParams, { name: mapTo });
+      if (mappedTo) { // just being safe
+        param = mappedTo;
+      }
+
+    // static type is different since it's fed param.normalizedValue
+    } else if (type === MappingType.StaticValue) {
+      param = param.clone().setValue(mapping.value);
+    }
+
+    const value = Parameter.getValue(param);
+    return this.getStringValue(value);
+  }
+
+  static getSourceTypeLabel({ type, mapTo }) {
+    switch (type) {
+      case MappingType.DashboardAddNew:
+      case MappingType.DashboardMapToExisting:
+        return (
+          <Fragment>
+            Dashboard{' '}
+            <Tag className="tag">{mapTo}</Tag>
+          </Fragment>
+        );
+      case MappingType.WidgetLevel:
+        return 'Widget parameter';
+      case MappingType.StaticValue:
+        return 'Static value';
+      default:
+        return ''; // won't happen (typescript-ftw)
+    }
+  }
+
+  updateParamMapping(oldMapping, newMapping) {
+    const mappings = [...this.props.mappings];
+    const index = findIndex(mappings, oldMapping);
+    if (index >= 0) {
+      // This should be the only possible case, but need to handle `else` too
+      mappings[index] = newMapping;
+    } else {
+      mappings.push(newMapping);
+    }
+    this.props.onChange(mappings);
+  }
+
+  render() {
+    const { existingParams } = this.props; // eslint-disable-line react/prop-types
+    const dataSource = this.props.mappings.map(mapping => ({ mapping }));
+
+    return (
+      <div className="parameters-mapping-list">
+        <Table
+          dataSource={dataSource}
+          size="middle"
+          pagination={false}
+          rowKey={(record, idx) => `row${idx}`}
+        >
+          <Table.Column
+            title="Title"
+            dataIndex="mapping"
+            key="title"
+            render={mapping => (
+              <TitleEditor
+                existingParams={existingParams}
+                mapping={mapping}
+                onChange={newMapping => this.updateParamMapping(mapping, newMapping)}
+              />
+            )}
+          />
+          <Table.Column
+            title="Keyword"
+            dataIndex="mapping"
+            key="keyword"
+            className="keyword"
+            render={mapping => <code>{`{{ ${mapping.name} }}`}</code>}
+          />
+          <Table.Column
+            title="Default Value"
+            dataIndex="mapping"
+            key="value"
+            render={mapping => (
+              this.constructor.getDefaultValue(mapping, this.props.existingParams)
+            )}
+          />
+          <Table.Column
+            title="Value Source"
+            dataIndex="mapping"
+            key="source"
+            render={(mapping) => {
+              const existingParamsNames = existingParams
+                .filter(({ type }) => type === mapping.param.type) // exclude mismatching param types
+                .map(({ name }) => name); // keep names only
+
+              return (
+                <Fragment>
+                  {this.constructor.getSourceTypeLabel(mapping)}{' '}
+                  <MappingEditor
+                    mapping={mapping}
+                    existingParamNames={existingParamsNames}
+                    onChange={(oldMapping, newMapping) => this.updateParamMapping(oldMapping, newMapping)}
+                  />
+                </Fragment>
+              );
+            }}
+          />
+        </Table>
+      </div>
+    );
+  }
+}

client/app/components/ParameterMappingInput.less

@@ -0,0 +1,83 @@
+@import '~antd/lib/modal/style/index'; // for ant @vars
+
+.parameters-mapping-list {
+  .keyword {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    code {
+      white-space: nowrap; // so the curly braces don't line break
+    }
+  }
+
+  // Ant <Tag> overrides
+  .tag {
+    margin: 0;
+    pointer-events: none; // unclickable
+
+    &:empty {
+      display: none;
+    }
+  }
+}
+
+.parameter-mapping-editor {
+  width: 390px;
+
+  .radio {
+    display: block;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .form-item {
+    margin-bottom: 10px;
+  }
+
+  header {
+    padding: 0 16px 10px;
+    margin: 0 -16px 20px;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+    font-size: @font-size-lg;
+    font-weight: 500;
+    color: @heading-color;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  footer {
+    border-top: @border-width-base @border-style-base @border-color-split;
+    padding: 10px 16px 0;
+    margin: 0 -16px;
+    text-align: right;
+
+    button {
+      margin-left: 8px;
+    }
+  }
+}
+
+.parameter-mapping-title {
+  .text {
+    margin-right: 3px;
+  }
+
+  &.disabled, .fa {
+    color: #a4a4a4;
+  }
+
+  .fa-eye-slash {
+    margin-left: 1px;
+  }
+}
+
+.parameter-mapping-title-editor {
+  input {
+    width: 100px;
+  }
+
+  button {
+    margin-left: 2px;
+  }
+}

client/app/components/ParameterValueInput.jsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import Select from 'antd/lib/select';
+import Input from 'antd/lib/input';
+import InputNumber from 'antd/lib/input-number';
+import { DateInput } from './DateInput';
+import { DateRangeInput } from './DateRangeInput';
+import { DateTimeInput } from './DateTimeInput';
+import { DateTimeRangeInput } from './DateTimeRangeInput';
+import { QueryBasedParameterInput } from './QueryBasedParameterInput';
+
+const { Option } = Select;
+
+export class ParameterValueInput extends React.Component {
+  static propTypes = {
+    type: PropTypes.string,
+    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    enumOptions: PropTypes.string,
+    queryId: PropTypes.number,
+    onSelect: PropTypes.func,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    type: 'text',
+    value: null,
+    enumOptions: '',
+    queryId: null,
+    onSelect: () => {},
+    className: '',
+  };
+
+  renderDateTimeWithSecondsInput() {
+    const { value, onSelect } = this.props;
+    return (
+      <DateTimeInput
+        className={this.props.className}
+        value={value}
+        onSelect={onSelect}
+        withSeconds
+      />
+    );
+  }
+
+  renderDateTimeInput() {
+    const { value, onSelect } = this.props;
+    return (
+      <DateTimeInput
+        className={this.props.className}
+        value={value}
+        onSelect={onSelect}
+      />
+    );
+  }
+
+  renderDateInput() {
+    const { value, onSelect } = this.props;
+    return (
+      <DateInput
+        className={this.props.className}
+        value={value}
+        onSelect={onSelect}
+      />
+    );
+  }
+
+  renderDateTimeRangeWithSecondsInput() {
+    const { value, onSelect } = this.props;
+    return (
+      <DateTimeRangeInput
+        className={this.props.className}
+        value={value}
+        onSelect={onSelect}
+        withSeconds
+      />
+    );
+  }
+
+  renderDateTimeRangeInput() {
+    const { value, onSelect } = this.props;
+    return (
+      <DateTimeRangeInput
+        className={this.props.className}
+        value={value}
+        onSelect={onSelect}
+      />
+    );
+  }
+
+  renderDateRangeInput() {
+    const { value, onSelect } = this.props;
+    return (
+      <DateRangeInput
+        className={this.props.className}
+        value={value}
+        onSelect={onSelect}
+      />
+    );
+  }
+
+  renderEnumInput() {
+    const { value, onSelect, enumOptions } = this.props;
+    const enumOptionsArray = enumOptions.split('\n').filter(v => v !== '');
+    return (
+      <Select
+        className={this.props.className}
+        disabled={enumOptionsArray.length === 0}
+        defaultValue={value}
+        onChange={onSelect}
+        dropdownMatchSelectWidth={false}
+        dropdownClassName="ant-dropdown-in-bootstrap-modal"
+      >
+        {enumOptionsArray.map(option => (<Option key={option} value={option}>{ option }</Option>))}
+      </Select>
+    );
+  }
+
+  renderQueryBasedInput() {
+    const { value, onSelect, queryId } = this.props;
+    return (
+      <QueryBasedParameterInput
+        className={this.props.className}
+        value={value}
+        queryId={queryId}
+        onSelect={onSelect}
+      />
+    );
+  }
+
+  renderNumberInput() {
+    const { value, onSelect, className } = this.props;
+    return (
+      <InputNumber
+        className={'form-control ' + className}
+        defaultValue={!isNaN(value) && value || 0}
+        onChange={onSelect}
+      />
+    );
+  }
+
+  renderTextInput() {
+    const { value, onSelect, className } = this.props;
+    return (
+      <Input
+        className={'form-control ' + className}
+        defaultValue={value || ''}
+        onChange={event => onSelect(event.target.value)}
+      />
+    );
+  }
+
+  render() {
+    const { type } = this.props;
+    switch (type) {
+      case 'datetime-with-seconds': return this.renderDateTimeWithSecondsInput();
+      case 'datetime-local': return this.renderDateTimeInput();
+      case 'date': return this.renderDateInput();
+      case 'datetime-range-with-seconds': return this.renderDateTimeRangeWithSecondsInput();
+      case 'datetime-range': return this.renderDateTimeRangeInput();
+      case 'date-range': return this.renderDateRangeInput();
+      case 'enum': return this.renderEnumInput();
+      case 'query': return this.renderQueryBasedInput();
+      case 'number': return this.renderNumberInput();
+      default: return this.renderTextInput();
+    }
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('parameterValueInput', {
+    template: `
+      <parameter-value-input-impl
+        type="$ctrl.param.type"
+        value="$ctrl.param.normalizedValue"
+        enum-options="$ctrl.param.enumOptions"
+        query-id="$ctrl.param.queryId"
+        on-select="$ctrl.setValue"
+      ></parameter-value-input-impl>
+    `,
+    bindings: {
+      param: '<',
+    },
+    controller($scope) {
+      this.setValue = (value) => {
+        this.param.setValue(value);
+        $scope.$applyAsync();
+      };
+    },
+  });
+  ngModule.component('parameterValueInputImpl', react2angular(ParameterValueInput));
+}
+
+init.init = true;

client/app/components/PreviewCard.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// PreviewCard
+
+export function PreviewCard({ imageUrl, title, body, children, className, ...props }) {
+  return (
+    <div {...props} className={className + ' w-100 d-flex align-items-center'}>
+      <img src={imageUrl} width="32" height="32" className="profile__image--settings m-r-5" alt="Logo/Avatar" />
+      <div className="flex-fill">
+        <div>{title}</div>
+        {body && <div className="text-muted">{body}</div>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+PreviewCard.propTypes = {
+  imageUrl: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+  body: PropTypes.node,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+PreviewCard.defaultProps = {
+  body: null,
+  className: '',
+  children: null,
+};
+
+// UserPreviewCard
+
+export function UserPreviewCard({ user, withLink, children, ...props }) {
+  const title = withLink ? <a href={'users/' + user.id}>{user.name}</a> : user.name;
+  return (
+    <PreviewCard {...props} imageUrl={user.profile_image_url} title={title} body={user.email}>
+      {children}
+    </PreviewCard>
+  );
+}
+
+UserPreviewCard.propTypes = {
+  user: PropTypes.shape({
+    profile_image_url: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+  }).isRequired,
+  withLink: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+UserPreviewCard.defaultProps = {
+  withLink: false,
+  children: null,
+};
+
+// DataSourcePreviewCard
+
+export function DataSourcePreviewCard({ dataSource, withLink, children, ...props }) {
+  const imageUrl = `/static/images/db-logos/${dataSource.type}.png`;
+  const title = withLink ? <a href={'data_sources/' + dataSource.id}>{dataSource.name}</a> : dataSource.name;
+  return <PreviewCard {...props} imageUrl={imageUrl} title={title}>{children}</PreviewCard>;
+}
+
+DataSourcePreviewCard.propTypes = {
+  dataSource: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
+  withLink: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+DataSourcePreviewCard.defaultProps = {
+  withLink: false,
+  children: null,
+};

client/app/components/QueryBasedParameterInput.jsx

@@ -0,0 +1,85 @@
+import { find, isFunction } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import Select from 'antd/lib/select';
+import { Query } from '@/services/query';
+
+const { Option } = Select;
+
+export class QueryBasedParameterInput extends React.Component {
+  static propTypes = {
+    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    queryId: PropTypes.number,
+    onSelect: PropTypes.func,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    value: null,
+    queryId: null,
+    onSelect: () => {},
+    className: '',
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      options: [],
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    this._loadOptions(this.props.queryId);
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.queryId !== this.props.queryId) {
+      this._loadOptions(nextProps.queryId, nextProps.value);
+    }
+  }
+
+  _loadOptions(queryId) {
+    if (queryId && (queryId !== this.state.queryId)) {
+      this.setState({ loading: true });
+      Query.dropdownOptions({ id: queryId }, (options) => {
+        if (this.props.queryId === queryId) {
+          this.setState({ options, loading: false });
+
+          const found = find(options, option => option.value === this.props.value) !== undefined;
+          if (!found && isFunction(this.props.onSelect)) {
+            this.props.onSelect(options[0].value);
+          }
+        }
+      });
+    }
+  }
+
+  render() {
+    const { className, value, onSelect } = this.props;
+    const { loading, options } = this.state;
+    return (
+      <span>
+        <Select
+          className={className}
+          disabled={loading || (options.length === 0)}
+          loading={loading}
+          defaultValue={'' + value}
+          onChange={onSelect}
+          dropdownMatchSelectWidth={false}
+          dropdownClassName="ant-dropdown-in-bootstrap-modal"
+        >
+          {options.map(option => (<Option value={option.value} key={option.value}>{option.name}</Option>))}
+        </Select>
+      </span>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('queryBasedParameterInput', react2angular(QueryBasedParameterInput));
+}
+
+init.init = true;

client/app/components/QueryEditor.css

@@ -0,0 +1,3 @@
+.editor__container[data-executing="true"] .ace_marker-layer .ace_selection {
+    background-color: rgb(255, 210, 181);
+}

client/app/components/QueryEditor.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { map } from 'lodash';
 import Tooltip from 'antd/lib/tooltip';
 import { react2angular } from 'react2angular';
 
@@ -12,13 +11,21 @@ import 'brace/ext/language_tools';
 import 'brace/mode/json';
 import 'brace/mode/python';
 import 'brace/mode/sql';
+import 'brace/mode/yaml';
 import 'brace/theme/textmate';
 import 'brace/ext/searchbox';
 
+import { Query } from '@/services/query';
+import { QuerySnippet } from '@/services/query-snippet';
+import { KeyboardShortcuts } from '@/services/keyboard-shortcuts';
+
 import localOptions from '@/lib/localOptions';
 import AutocompleteToggle from '@/components/AutocompleteToggle';
+import keywordBuilder from './keywordBuilder';
 import { DataSource, Schema } from './proptypes';
 
+import './QueryEditor.css';
+
 const langTools = ace.acequire('ace/ext/language_tools');
 const snippetsModule = ace.acequire('ace/snippets');
 
@@ -34,24 +41,7 @@ function defineDummySnippets(mode) {
 defineDummySnippets('python');
 defineDummySnippets('sql');
 defineDummySnippets('json');
-
-function buildKeywordsFromSchema(schema) {
-  const keywords = {};
-  schema.forEach((table) => {
-    keywords[table.name] = 'Table';
-    table.columns.forEach((c) => {
-      keywords[c] = 'Column';
-      keywords[`${table.name}.${c}`] = 'Column';
-    });
-  });
-
-  return map(keywords, (v, k) => ({
-    name: k,
-    value: k,
-    score: 0,
-    meta: v,
-  }));
-}
+defineDummySnippets('yaml');
 
 class QueryEditor extends React.Component {
   static propTypes = {
@@ -69,6 +59,7 @@ class QueryEditor extends React.Component {
     queryExecuting: PropTypes.bool.isRequired,
     saveQuery: PropTypes.func.isRequired,
     updateQuery: PropTypes.func.isRequired,
+    updateSelectedQuery: PropTypes.func.isRequired,
     listenForResize: PropTypes.func.isRequired,
     listenForEditorCommand: PropTypes.func.isRequired,
   };
@@ -81,107 +72,166 @@ class QueryEditor extends React.Component {
 
   constructor(props) {
     super(props);
+
+    this.refEditor = React.createRef();
+
     this.state = {
       schema: null, // eslint-disable-line react/no-unused-state
-      keywords: [], // eslint-disable-line react/no-unused-state
+      keywords: {
+        table: [],
+        column: [],
+        tableColumn: [],
+      },
       autocompleteQuery: localOptions.get('liveAutocomplete', true),
       liveAutocompleteDisabled: false,
       // XXX temporary while interfacing with angular
       queryText: props.queryText,
+      selectedQueryText: null,
     };
-    langTools.addCompleter({
+
+    const schemaCompleter = {
+      identifierRegexps: [/[a-zA-Z_0-9.\-\u00A2-\uFFFF]/],
       getCompletions: (state, session, pos, prefix, callback) => {
-        if (prefix.length === 0) {
+        const tableKeywords = this.state.keywords.table;
+        const columnKeywords = this.state.keywords.column;
+        const tableColumnKeywords = this.state.keywords.tableColumn;
+
+        if (prefix.length === 0 || tableKeywords.length === 0) {
           callback(null, []);
           return;
         }
-        callback(null, this.state.keywords);
-      },
-    });
 
-    this.onLoad = (editor) => {
-      // Release Cmd/Ctrl+L to the browser
-      editor.commands.bindKey('Cmd+L', null);
-      editor.commands.bindKey('Ctrl+P', null);
-      editor.commands.bindKey('Ctrl+L', null);
-
-      // eslint-disable-next-line react/prop-types
-      this.props.QuerySnippet.query((snippets) => {
-        const snippetManager = snippetsModule.snippetManager;
-        const m = {
-          snippetText: '',
-        };
-        m.snippets = snippetManager.parseSnippetFile(m.snippetText);
-        snippets.forEach((snippet) => {
-          m.snippets.push(snippet.getSnippet());
-        });
-        snippetManager.register(m.snippets || [], m.scope);
-      });
-      editor.focus();
-      this.props.listenForResize(() => editor.resize());
-      this.props.listenForEditorCommand((e, command, ...args) => {
-        switch (command) {
-          case 'focus': {
-            editor.focus();
-            break;
-          }
-          case 'paste': {
-            const [text] = args;
-            editor.session.doc.replace(editor.selection.getRange(), text);
-            const range = editor.selection.getRange();
-            this.props.updateQuery(editor.session.getValue());
-            editor.selection.setRange(range);
-            break;
-          }
-          default:
-            break;
+        if (prefix[prefix.length - 1] === '.') {
+          const tableName = prefix.substring(0, prefix.length - 1);
+          callback(null, tableKeywords.concat(tableColumnKeywords[tableName]));
+          return;
         }
-      });
+        callback(null, tableKeywords.concat(columnKeywords));
+      },
     };
 
-    this.formatQuery = () => {
-      // eslint-disable-next-line react/prop-types
-      const format = this.props.Query.format;
-      format(this.props.dataSource.syntax || 'sql', this.props.queryText)
-        .then(this.updateQuery)
-        .catch(error => toastr.error(error));
-    };
+    langTools.setCompleters([
+      langTools.snippetCompleter,
+      langTools.keyWordCompleter,
+      langTools.textCompleter,
+      schemaCompleter,
+    ]);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
     if (!nextProps.schema) {
-      return { keywords: [], liveAutocompleteDisabled: false };
+      return {
+        keywords: {
+          table: [],
+          column: [],
+          tableColumn: [],
+        },
+        liveAutocompleteDisabled: false,
+      };
     } else if (nextProps.schema !== prevState.schema) {
       const tokensCount = nextProps.schema.reduce((totalLength, table) => totalLength + table.columns.length, 0);
       return {
         schema: nextProps.schema,
-        keywords: buildKeywordsFromSchema(nextProps.schema),
+        keywords: keywordBuilder.buildKeywordsFromSchema(nextProps.schema),
         liveAutocompleteDisabled: tokensCount > 5000,
       };
     }
     return null;
   }
 
+  onLoad = (editor) => {
+    // Release Cmd/Ctrl+L to the browser
+    editor.commands.bindKey('Cmd+L', null);
+    editor.commands.bindKey('Ctrl+P', null);
+    editor.commands.bindKey('Ctrl+L', null);
+
+    // Ignore Ctrl+P to open new parameter dialog
+    editor.commands.bindKey({ win: 'Ctrl+P', mac: null }, null);
+    // Lineup only mac
+    editor.commands.bindKey({ win: null, mac: 'Ctrl+P' }, 'golineup');
+
+    // Reset Completer in case dot is pressed
+    editor.commands.on('afterExec', (e) => {
+      if (e.command.name === 'insertstring' && e.args === '.'
+          && editor.completer) {
+        editor.completer.showPopup(editor);
+      }
+    });
+
+    QuerySnippet.query((snippets) => {
+      const snippetManager = snippetsModule.snippetManager;
+      const m = {
+        snippetText: '',
+      };
+      m.snippets = snippetManager.parseSnippetFile(m.snippetText);
+      snippets.forEach((snippet) => {
+        m.snippets.push(snippet.getSnippet());
+      });
+      snippetManager.register(m.snippets || [], m.scope);
+    });
+
+    editor.focus();
+    this.props.listenForResize(() => editor.resize());
+    this.props.listenForEditorCommand((e, command, ...args) => {
+      switch (command) {
+        case 'focus': {
+          editor.focus();
+          break;
+        }
+        case 'paste': {
+          const [text] = args;
+          editor.session.doc.replace(editor.selection.getRange(), text);
+          const range = editor.selection.getRange();
+          this.props.updateQuery(editor.session.getValue());
+          editor.selection.setRange(range);
+          break;
+        }
+        default:
+          break;
+      }
+    });
+  };
+
+  updateSelectedQuery = (selection) => {
+    const { editor } = this.refEditor.current;
+    const doc = editor.getSession().doc;
+    const rawSelectedQueryText = doc.getTextRange(selection.getRange());
+    const selectedQueryText = (rawSelectedQueryText.length > 1) ? rawSelectedQueryText : null;
+    this.setState({ selectedQueryText });
+    this.props.updateSelectedQuery(selectedQueryText);
+  };
+
   updateQuery = (queryText) => {
     this.props.updateQuery(queryText);
     this.setState({ queryText });
   };
 
+  formatQuery = () => {
+    Query.format(this.props.dataSource.syntax || 'sql', this.props.queryText)
+      .then(this.updateQuery)
+      .catch(error => toastr.error(error));
+  };
+
   toggleAutocomplete = (state) => {
     this.setState({ autocompleteQuery: state });
     localOptions.set('liveAutocomplete', state);
-  }
+  };
+
+  componentDidUpdate = () => {
+    // ANGULAR_REMOVE_ME  Work-around for a resizing issue, see https://github.com/getredash/redash/issues/3353
+    const { editor } = this.refEditor.current;
+    editor.resize();
+  };
 
   render() {
-    // eslint-disable-next-line react/prop-types
-    const modKey = this.props.KeyboardShortcuts.modKey;
+    const modKey = KeyboardShortcuts.modKey;
 
     const isExecuteDisabled = this.props.queryExecuting || !this.props.canExecuteQuery();
 
     return (
-      <section style={{ height: '100%' }}>
+      <section style={{ height: '100%' }} data-test="QueryEditor">
         <div className="container p-15 m-b-10" style={{ height: '100%' }}>
-          <div style={{ height: 'calc(100% - 40px)', marginBottom: '0px' }} className="editor__container">
+          <div data-executing={this.props.queryExecuting} style={{ height: 'calc(100% - 40px)', marginBottom: '0px' }} className="editor__container">
             <AceEditor
               ref={this.refEditor}
               theme="textmate"
@@ -202,6 +252,7 @@ class QueryEditor extends React.Component {
               onLoad={this.onLoad}
               onPaste={this.onPaste}
               onChange={this.updateQuery}
+              onSelectionChange={this.updateSelectedQuery}
             />
           </div>
 
@@ -209,11 +260,7 @@ class QueryEditor extends React.Component {
             <div className="form-inline d-flex">
               <Tooltip
                 placement="top"
-                title={
-                  <span>
-                    Add New Parameter (<i>{modKey} + P</i>)
-                  </span>
-                }
+                title={<span>Add New Parameter (<i>{modKey} + P</i>)</span>}
               >
                 <button type="button" className="btn btn-default m-r-5" onClick={this.props.addNewParameter}>
                   &#123;&#123;&nbsp;&#125;&#125;
@@ -242,7 +289,7 @@ class QueryEditor extends React.Component {
               </select>
               {this.props.canEdit ? (
                 <Tooltip placement="top" title={modKey + ' + S'}>
-                  <button className="btn btn-default m-l-5" onClick={this.props.saveQuery} title="Save">
+                  <button type="button" className="btn btn-default m-l-5" onClick={this.props.saveQuery} title="Save">
                     <span className="fa fa-floppy-o" />
                     <span className="hidden-xs m-l-5">Save</span>
                     {this.props.isDirty ? '*' : null}
@@ -262,9 +309,10 @@ class QueryEditor extends React.Component {
                   className={'btn btn-primary m-l-5' + (isExecuteDisabled ? ' disabled' : '')}
                   disabled={isExecuteDisabled}
                   onClick={this.props.executeQuery}
+                  data-test="ExecuteButton"
                 >
                   <span className="zmdi zmdi-play" />
-                  <span className="hidden-xs m-l-5">Execute</span>
+                  <span className="hidden-xs m-l-5">{ (this.state.selectedQueryText == null) ? 'Execute' : 'Execute Selected' }</span>
                 </button>
               </Tooltip>
             </div>
@@ -276,7 +324,7 @@ class QueryEditor extends React.Component {
 }
 
 export default function init(ngModule) {
-  ngModule.component('queryEditor', react2angular(QueryEditor, null, ['QuerySnippet', 'Query', 'KeyboardShortcuts']));
+  ngModule.component('queryEditor', react2angular(QueryEditor));
 }
 
 init.init = true;

client/app/components/QuerySelector.jsx

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { react2angular } from 'react2angular';
+import { debounce, find } from 'lodash';
+import Input from 'antd/lib/input';
+import Select from 'antd/lib/select';
+import { Query } from '@/services/query';
+import { toastr } from '@/services/ng';
+import { QueryTagsControl } from '@/components/tags-control/TagsControl';
+
+const SEARCH_DEBOUNCE_DURATION = 200;
+const { Option } = Select;
+
+class StaleSearchError extends Error {
+  constructor() {
+    super('stale search');
+  }
+}
+
+function search(term) {
+  // get recent
+  if (!term) {
+    return Query.recent().$promise
+      .then((results) => {
+        const filteredResults = results.filter(item => !item.is_draft); // filter out draft
+        return Promise.resolve(filteredResults);
+      });
+  }
+
+  // search by query
+  return Query.query({ q: term }).$promise
+    .then(({ results }) => Promise.resolve(results));
+}
+
+export function QuerySelector(props) {
+  const [searchTerm, setSearchTerm] = useState();
+  const [searching, setSearching] = useState();
+  const [searchResults, setSearchResults] = useState([]);
+  const [selectedQuery, setSelectedQuery] = useState();
+
+  let isStaleSearch = false;
+  const debouncedSearch = debounce(_search, SEARCH_DEBOUNCE_DURATION);
+  const placeholder = 'Search a query by name';
+  const clearIcon = <i className="fa fa-times" onClick={() => selectQuery(null)} />;
+  const spinIcon = <i className={cx('fa fa-spinner fa-pulse', { hidden: !searching })} />;
+
+  // set selected from prop
+  useEffect(() => {
+    if (props.selectedQuery) {
+      setSelectedQuery(props.selectedQuery);
+    }
+  }, [props.selectedQuery]);
+
+  // on search term changed, debounced
+  useEffect(() => {
+    // clear results, no search
+    if (searchTerm === null) {
+      setSearchResults(null);
+      return () => {};
+    }
+
+    // search
+    debouncedSearch(searchTerm);
+    return () => {
+      debouncedSearch.cancel();
+      isStaleSearch = true;
+    };
+  }, [searchTerm]);
+
+  function _search(term) {
+    setSearching(true);
+    search(term)
+      .then(rejectStale)
+      .then((results) => {
+        setSearchResults(results);
+        setSearching(false);
+      })
+      .catch((err) => {
+        if (!(err instanceof StaleSearchError)) {
+          setSearching(false);
+        }
+      });
+  }
+
+  function rejectStale(results) {
+    return isStaleSearch
+      ? Promise.reject(new StaleSearchError())
+      : Promise.resolve(results);
+  }
+
+  function selectQuery(queryId) {
+    let query = null;
+    if (queryId) {
+      query = find(searchResults, { id: queryId });
+      if (!query) { // shouldn't happen
+        toastr.error('Something went wrong... Couldn\'t select query');
+      }
+    }
+
+    setSearchTerm(query ? null : ''); // empty string triggers recent fetch
+    setSelectedQuery(query);
+    props.onChange(query);
+  }
+
+  function renderResults() {
+    if (!searchResults.length) {
+      return <div className="text-muted">No results matching search term.</div>;
+    }
+
+    return (
+      <div className="list-group">
+        {searchResults.map(q => (
+          <a
+            href="javascript:void(0)"
+            className={cx('list-group-item', { inactive: q.is_draft })}
+            key={q.id}
+            onClick={() => selectQuery(q.id)}
+          >
+            {q.name}
+            {' '}
+            <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className="inline-tags-control" />
+          </a>
+        ))}
+      </div>
+    );
+  }
+
+  if (props.disabled) {
+    return <Input value={selectedQuery && selectedQuery.name} placeholder={placeholder} disabled />;
+  }
+
+  if (props.type === 'select') {
+    const suffixIcon = selectedQuery ? clearIcon : null;
+    const value = selectedQuery ? selectedQuery.name : searchTerm;
+
+    return (
+      <Select
+        showSearch
+        dropdownMatchSelectWidth={false}
+        placeholder={placeholder}
+        value={value || undefined} // undefined for the placeholder to show
+        onSearch={setSearchTerm}
+        onChange={selectQuery}
+        suffixIcon={searching ? spinIcon : suffixIcon}
+        notFoundContent={null}
+        filterOption={false}
+        defaultActiveFirstOption={false}
+      >
+        {searchResults && searchResults.map((q) => {
+          const disabled = q.is_draft;
+          return (
+            <Option value={q.id} key={q.id} disabled={disabled}>
+              {q.name}{' '}
+              <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className={cx('inline-tags-control', { disabled })} />
+            </Option>
+          );
+        })}
+      </Select>
+    );
+  }
+
+  return (
+    <React.Fragment>
+      {selectedQuery ? (
+        <Input value={selectedQuery.name} suffix={clearIcon} readOnly />
+      ) : (
+        <Input
+          placeholder={placeholder}
+          value={searchTerm}
+          onChange={e => setSearchTerm(e.target.value)}
+          suffix={spinIcon}
+        />
+      )}
+      <div className="scrollbox" style={{ maxHeight: '50vh', marginTop: 15 }}>
+        {searchResults && renderResults()}
+      </div>
+    </React.Fragment>
+  );
+}
+
+QuerySelector.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  selectedQuery: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  type: PropTypes.oneOf(['select', 'default']),
+  disabled: PropTypes.bool,
+};
+
+QuerySelector.defaultProps = {
+  selectedQuery: null,
+  type: 'default',
+  disabled: false,
+};
+
+export default function init(ngModule) {
+  ngModule.component('querySelector', react2angular(QuerySelector));
+}
+
+init.init = true;

client/app/components/SelectItemsDialog.jsx

@@ -0,0 +1,184 @@
+import { filter, debounce, find } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Modal from 'antd/lib/modal';
+import Input from 'antd/lib/input';
+import List from 'antd/lib/list';
+import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import { BigMessage } from '@/components/BigMessage';
+
+import LoadingState from '@/components/items-list/components/LoadingState';
+import { toastr } from '@/services/ng';
+
+class SelectItemsDialog extends React.Component {
+  static propTypes = {
+    dialog: DialogPropType.isRequired,
+    dialogTitle: PropTypes.string,
+    inputPlaceholder: PropTypes.string,
+    selectedItemsTitle: PropTypes.string,
+    searchItems: PropTypes.func.isRequired, // (searchTerm: string): Promise<Items[]> if `searchTerm === ''` load all
+    itemKey: PropTypes.func, // (item) => string|number - return key of item (by default `id`)
+    // left list
+    // (item, { isSelected }) => {
+    //   content: node, // item contents
+    //   className: string = '', // additional class for item wrapper
+    //   isDisabled: bool = false, // is item clickable or disabled
+    // }
+    renderItem: PropTypes.func,
+    // right list; args/results save as for `renderItem`. if not specified - `renderItem` will be used
+    renderStagedItem: PropTypes.func,
+    save: PropTypes.func, // (selectedItems[]) => Promise<any>
+  };
+
+  static defaultProps = {
+    dialogTitle: 'Add Items',
+    inputPlaceholder: 'Search...',
+    selectedItemsTitle: 'Selected items',
+    itemKey: item => item.id,
+    renderItem: () => '',
+    renderStagedItem: null, // use `renderItem` by default
+    save: items => items,
+  };
+
+  state = {
+    searchTerm: '',
+    loading: false,
+    items: [],
+    selected: [],
+    saveInProgress: false,
+  };
+
+  // eslint-disable-next-line react/sort-comp
+  loadItems = (searchTerm = '') => {
+    this.setState({ searchTerm, loading: true }, () => {
+      this.props.searchItems(searchTerm)
+        .then((items) => {
+          // If another search appeared while loading data - just reject this set
+          if (this.state.searchTerm === searchTerm) {
+            this.setState({ items, loading: false });
+          }
+        })
+        .catch(() => {
+          if (this.state.searchTerm === searchTerm) {
+            this.setState({ items: [], loading: false });
+          }
+        });
+    });
+  };
+
+  search = debounce(this.loadItems, 200);
+
+  componentDidMount() {
+    this.loadItems();
+  }
+
+  isSelected(item) {
+    const key = this.props.itemKey(item);
+    return !!find(this.state.selected, i => this.props.itemKey(i) === key);
+  }
+
+  toggleItem(item) {
+    if (this.isSelected(item)) {
+      const key = this.props.itemKey(item);
+      this.setState(({ selected }) => ({
+        selected: filter(selected, i => this.props.itemKey(i) !== key),
+      }));
+    } else {
+      this.setState(({ selected }) => ({
+        selected: [...selected, item],
+      }));
+    }
+  }
+
+  save() {
+    this.setState({ saveInProgress: true }, () => {
+      const selectedItems = this.state.selected;
+      Promise.resolve(this.props.save(selectedItems))
+        .then(() => {
+          this.props.dialog.close(selectedItems);
+        })
+        .catch(() => {
+          this.setState({ saveInProgress: false });
+          toastr.error('Failed to save some of selected items.');
+        });
+    });
+  }
+
+  renderItem(item, isStagedList) {
+    const { renderItem, renderStagedItem } = this.props;
+    const isSelected = this.isSelected(item);
+    const render = isStagedList ? (renderStagedItem || renderItem) : renderItem;
+
+    const { content, className, isDisabled } = render(item, { isSelected });
+
+    return (
+      <List.Item
+        className={classNames('p-l-10', 'p-r-10', { clickable: !isDisabled, disabled: isDisabled }, className)}
+        onClick={isDisabled ? null : () => this.toggleItem(item)}
+      >
+        {content}
+      </List.Item>
+    );
+  }
+
+  render() {
+    const { dialog, dialogTitle, inputPlaceholder, selectedItemsTitle } = this.props;
+    const { loading, saveInProgress, items, selected } = this.state;
+    const hasResults = items.length > 0;
+    return (
+      <Modal
+        {...dialog.props}
+        width="80%"
+        title={dialogTitle}
+        okText="Save"
+        okButtonProps={{
+          loading: saveInProgress,
+          disabled: selected.length === 0,
+        }}
+        onOk={() => this.save()}
+      >
+        <div className="d-flex align-items-center m-b-10">
+          <div className="w-50 m-r-10">
+            <Input.Search
+              defaultValue={this.state.searchTerm}
+              onChange={event => this.search(event.target.value)}
+              placeholder={inputPlaceholder}
+              autoFocus
+            />
+          </div>
+          <div className="w-50 m-l-10">
+            <h5 className="m-0">{selectedItemsTitle}</h5>
+          </div>
+        </div>
+
+        <div className="d-flex align-items-stretch" style={{ minHeight: '30vh', maxHeight: '50vh' }}>
+          <div className="w-50 m-r-10 scrollbox">
+            {loading && <LoadingState className="" />}
+            {!loading && !hasResults && (
+              <BigMessage icon="fa-search" message="No items match your search." className="" />
+            )}
+            {!loading && hasResults && (
+              <List
+                size="small"
+                dataSource={items}
+                renderItem={item => this.renderItem(item, false)}
+              />
+            )}
+          </div>
+          <div className="w-50 m-l-10 scrollbox">
+            {(selected.length > 0) && (
+              <List
+                size="small"
+                dataSource={selected}
+                renderItem={item => this.renderItem(item, true)}
+              />
+            )}
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export default wrapDialog(SelectItemsDialog);

client/app/components/SortIcon.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+
+export function SortIcon({ column, sortColumn, reverse }) {
+  if (column !== sortColumn) {
+    return null;
+  }
+
+  return (
+    <span><i className={'fa fa-sort-' + (reverse ? 'desc' : 'asc')} /></span>
+  );
+}
+
+SortIcon.propTypes = {
+  column: PropTypes.string,
+  sortColumn: PropTypes.string,
+  reverse: PropTypes.bool,
+};
+
+SortIcon.defaultProps = {
+  column: null,
+  sortColumn: null,
+  reverse: false,
+};
+
+export default function init(ngModule) {
+  ngModule.component('sortIcon', react2angular(SortIcon));
+}
+
+init.init = true;

client/app/components/TagsList.jsx

@@ -0,0 +1,85 @@
+import { map } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import classNames from 'classnames';
+import getTags from '@/services/getTags';
+
+export class TagsList extends React.Component {
+  static propTypes = {
+    tagsUrl: PropTypes.string.isRequired,
+    onUpdate: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onUpdate: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // An array of objects that with the name and count of the tagged items
+      allTags: [],
+      // A set of tag names
+      selectedTags: new Set(),
+    };
+  }
+
+  componentDidMount() {
+    getTags(this.props.tagsUrl).then((allTags) => {
+      this.setState({ allTags });
+    });
+  }
+
+  toggleTag(event, tag) {
+    const { selectedTags } = this.state;
+    if (event.shiftKey) {
+      // toggle tag
+      if (selectedTags.has(tag)) {
+        selectedTags.delete(tag);
+      } else {
+        selectedTags.add(tag);
+      }
+    } else {
+      // if the tag is the only selected, deselect it, otherwise select only it
+      if (selectedTags.has(tag) && (selectedTags.size === 1)) {
+        selectedTags.clear();
+      } else {
+        selectedTags.clear();
+        selectedTags.add(tag);
+      }
+    }
+    this.forceUpdate();
+
+    this.props.onUpdate([...this.state.selectedTags]);
+  }
+
+  render() {
+    const { allTags, selectedTags } = this.state;
+    if (allTags.length > 0) {
+      return (
+        <div className="list-group m-t-10 tags-list tiled">
+          {map(allTags, tag => (
+            <a
+              key={tag.name}
+              href="javascript:void(0)"
+              className={classNames('list-group-item', 'max-character', { active: selectedTags.has(tag.name) })}
+              onClick={event => this.toggleTag(event, tag.name)}
+            >
+              <span className="badge badge-light">{tag.count}</span>
+              <span className="tags-list__name">{tag.name}</span>
+            </a>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('tagsList', react2angular(TagsList));
+}
+
+init.init = true;

client/app/components/TimeAgo.jsx

@@ -0,0 +1,98 @@
+import moment from 'moment';
+import { isNil } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { Moment } from '@/components/proptypes';
+import { clientConfig } from '@/services/auth';
+
+const autoUpdateList = new Set();
+
+function updateComponents() {
+  autoUpdateList.forEach(component => component.update());
+  setTimeout(updateComponents, 30 * 1000);
+}
+updateComponents();
+
+export class TimeAgo extends React.PureComponent {
+  static propTypes = {
+    // `date` and `placeholder` used in `getDerivedStateFromProps`
+    // eslint-disable-next-line react/no-unused-prop-types
+    date: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.instanceOf(Date),
+      Moment,
+    ]),
+    // eslint-disable-next-line react/no-unused-prop-types
+    placeholder: PropTypes.string,
+    autoUpdate: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    date: null,
+    placeholder: '',
+    autoUpdate: true,
+  };
+
+  // Initial state, to get rid of React warning
+  state = {
+    title: null,
+    value: null,
+  };
+
+  static getDerivedStateFromProps({ date, placeholder }) {
+    // if `date` prop is not empty and a valid date/time - convert it to `moment`
+    date = !isNil(date) ? moment(date) : null;
+    date = date && date.isValid() ? date : null;
+
+    return {
+      value: date ? date.fromNow() : placeholder,
+      title: date ? date.format(clientConfig.dateTimeFormat) : '',
+    };
+  }
+
+  componentDidMount() {
+    autoUpdateList.add(this);
+    this.update(true);
+  }
+
+  componentWillUnmount() {
+    autoUpdateList.delete(this);
+  }
+
+  update(force = false) {
+    if (force || this.props.autoUpdate) {
+      this.setState(this.constructor.getDerivedStateFromProps(this.props));
+    }
+  }
+
+  render() {
+    return <span title={this.state.title} data-test="TimeAgo">{this.state.value}</span>;
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.directive('amTimeAgo', () => ({
+    link($scope, element, attr) {
+      const modelName = attr.amTimeAgo;
+      $scope.$watch(modelName, (value) => {
+        ReactDOM.render(<TimeAgo date={value} />, element[0]);
+      });
+    },
+  }));
+
+  ngModule.component('rdTimeAgo', {
+    bindings: {
+      value: '=',
+    },
+    controller($scope, $element) {
+      $scope.$watch('$ctrl.value', () => {
+        // Initial render will occur here as well
+        ReactDOM.render(<TimeAgo date={this.value} placeholder="-" />, $element[0]);
+      });
+    },
+  });
+}
+
+init.init = true;

client/app/components/__snapshots__/Footer.test.js.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Footer renders 1`] = `
-<div
-  id="footer"
->
-  <a
-    href="https://redash.io"
-  >
-    Redash
-  </a>
-   
-  5.0.1
-   (
-  dev
-  )
-  <small>
-    <a
-      href="https://version.redash.io/"
-    >
-      (New Redash version available)
-    </a>
-  </small>
-   • 
-  <a
-    href="https://redash.io/help/"
-  >
-    Documentation
-  </a>
-   • 
-  <a
-    href="https://github.com/getredash/redash"
-  >
-    Contribute
-  </a>
-</div>
-`;

client/app/components/admin/CeleryStatus.jsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { $http } from '@/services/ng';
+import Table from 'antd/lib/table';
+import Col from 'antd/lib/col';
+import Row from 'antd/lib/row';
+import Card from 'antd/lib/card';
+import Spin from 'antd/lib/spin';
+import Badge from 'antd/lib/badge';
+import Tabs from 'antd/lib/tabs';
+import Alert from 'antd/lib/alert';
+import moment from 'moment';
+import values from 'lodash/values';
+import { Columns } from '@/components/items-list/components/ItemsTable';
+
+function parseTasks(tasks) {
+  const queues = {};
+  const queries = [];
+  const otherTasks = [];
+
+  const counters = { active: 0, reserved: 0, waiting: 0 };
+
+  tasks.forEach((task) => {
+    queues[task.queue] = queues[task.queue] || { name: task.queue, active: 0, reserved: 0, waiting: 0 };
+    queues[task.queue][task.state] += 1;
+
+    if (task.enqueue_time) {
+      task.enqueue_time = moment(task.enqueue_time * 1000.0);
+    }
+    if (task.start_time) {
+      task.start_time = moment(task.start_time * 1000.0);
+    }
+
+    counters[task.state] += 1;
+
+    if (task.task_name === 'redash.tasks.execute_query') {
+      queries.push(task);
+    } else {
+      otherTasks.push(task);
+    }
+  });
+
+  return { queues: values(queues), queries, otherTasks, counters };
+}
+
+function QueuesTable({ loading, queues }) {
+  const columns = ['Name', 'Active', 'Reserved', 'Waiting'].map(c => ({ title: c, dataIndex: c.toLowerCase() }));
+
+  return <Table columns={columns} rowKey="name" dataSource={queues} loading={loading} />;
+}
+
+QueuesTable.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  queues: PropTypes.arrayOf(PropTypes.any).isRequired,
+};
+
+function CounterCard({ title, value, loading }) {
+  return (
+    <Spin spinning={loading}>
+      <Card>
+        {title}
+        <div className="f-20">{value}</div>
+      </Card>
+    </Spin>
+  );
+}
+
+CounterCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  loading: PropTypes.bool.isRequired,
+};
+
+CounterCard.defaultProps = {
+  value: '',
+};
+
+export default class AdminCeleryStatus extends React.Component {
+  state = {
+    loading: true,
+    error: false,
+    counters: {},
+    queries: [],
+    otherTasks: [],
+    queues: [],
+  };
+
+  constructor(props) {
+    super(props);
+    this.fetch();
+  }
+
+  fetch() {
+    // TODO: handle error
+    $http
+      .get('/api/admin/queries/tasks')
+      .then(({ data }) => {
+        const { queues, queries, otherTasks, counters } = parseTasks(data.tasks);
+        this.setState({ loading: false, queries, otherTasks, queues, counters });
+      })
+      .catch(() => {
+        this.setState({ loading: false, error: true });
+      });
+  }
+
+  render() {
+    const commonColumns = [
+      {
+        title: 'Worker Name',
+        dataIndex: 'worker',
+      },
+      {
+        title: 'PID',
+        dataIndex: 'worker_pid',
+      },
+      {
+        title: 'Queue',
+        dataIndex: 'queue',
+      },
+      {
+        title: 'State',
+        dataIndex: 'state',
+        render: (value) => {
+          if (value === 'active') {
+            return (
+              <span>
+                <Badge status="processing" /> Active
+              </span>
+            );
+          }
+          return (
+            <span>
+              <Badge status="warning" /> {value}
+            </span>
+          );
+        },
+      },
+      Columns.timeAgo({ title: 'Start Time', dataIndex: 'start_time' }),
+    ];
+
+    const queryColumns = commonColumns.concat([
+      Columns.timeAgo({ title: 'Enqueue Time', dataIndex: 'enqueue_time' }),
+      {
+        title: 'Query ID',
+        dataIndex: 'query_id',
+      },
+      {
+        title: 'Org ID',
+        dataIndex: 'org_id',
+      },
+      {
+        title: 'Data Source ID',
+        dataIndex: 'data_source_id',
+      },
+      {
+        title: 'User ID',
+        dataIndex: 'user_id',
+      },
+      {
+        title: 'Scheduled',
+        dataIndex: 'scheduled',
+      },
+    ]);
+
+    const otherTasksColumns = commonColumns.concat([
+      {
+        title: 'Task Name',
+        dataIndex: 'task_name',
+      },
+    ]);
+
+    if (this.state.error) {
+      return (
+        <div className="p-5">
+          <Alert type="error" message="Failed loading status. Please refresh." />
+        </div>
+      );
+    }
+
+    return (
+      <div className="p-5">
+        <Row gutter={16}>
+          <Col span={4}>
+            <CounterCard title="Active Tasks" value={this.state.counters.active} loading={this.state.loading} />
+          </Col>
+          <Col span={4}>
+            <CounterCard title="Reserved Tasks" value={this.state.counters.reserved} loading={this.state.loading} />
+          </Col>
+          <Col span={4}>
+            <CounterCard title="Waiting Tasks" value={this.state.counters.waiting} loading={this.state.loading} />
+          </Col>
+        </Row>
+        <Row>
+          <Tabs defaultActiveKey="queues">
+            <Tabs.TabPane key="queues" tab="Queues">
+              <QueuesTable loading={this.state.loading} queues={this.state.queues} />
+            </Tabs.TabPane>
+            <Tabs.TabPane key="queries" tab="Queries">
+              <Table
+                rowKey="task_id"
+                dataSource={this.state.queries}
+                loading={this.state.loading}
+                columns={queryColumns}
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane key="other" tab="Other Tasks">
+              <Table
+                rowKey="task_id"
+                dataSource={this.state.otherTasks}
+                loading={this.state.loading}
+                columns={otherTasksColumns}
+              />
+            </Tabs.TabPane>
+          </Tabs>
+        </Row>
+      </div>
+    );
+  }
+}

client/app/components/alerts/alert-subscriptions/index.js

@@ -113,4 +113,3 @@ export default function init(ngModule) {
 }
 
 init.init = true;
-

client/app/components/app-header/app-header.css

@@ -1,3 +1,13 @@
 .menu-search input[type="text"] {
     height: 30px;
 }
+
+.dropdown-menu__version {
+    padding: 5px 10px 8px 17px;
+}
+
+.update-available .fa {
+    color: #52c41a;
+    vertical-align: bottom;
+    font-size: 16px !important;
+}

client/app/components/app-header/app-header.html

@@ -67,7 +67,7 @@
 
       <!-- Add New Button -->
       <div class="btn-group navbar-btn navbar-left btn__new hidden-xs" uib-dropdown is-open="status.isopen">
-        <button id="create-button" type="button" class="btn btn-primary btn--create" uib-dropdown-toggle ng-disabled="disabled">
+        <button id="create-button" data-test="CreateButton" type="button" class="btn btn-primary btn--create" uib-dropdown-toggle ng-disabled="disabled">
           Create <span class="caret caret--nav"></span>
         </button>
         <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="create-button">
@@ -79,6 +79,9 @@
 
       <!-- Profile -->
       <ul class="nav navbar-nav navbar-right">
+        <li>
+          <help-trigger type="'HOME'" class-name="'navbar-link-ANGULAR_REMOVE_ME'"></help-trigger>
+        </li>
         <li ng-show="$ctrl.currentUser.isAdmin">
           <a href="data_sources" title="Settings"><i class="fa fa-sliders" aria-hidden="true"></i></a>
         </li>
@@ -86,7 +89,7 @@
           <!--<a href="users" title="Settings"><i class="fa fa-cog"></i></a>-->
         <!--</li>-->
         <li class="dropdown" uib-dropdown>
-          <a href="#" class="dropdown-toggle dropdown--profile" uib-dropdown-toggle data-cy="dropdown-profile">
+          <a href="#" class="dropdown-toggle dropdown--profile" uib-dropdown-toggle data-test="ProfileDropdown">
             <img ng-src="{{ $ctrl.currentUser.profile_image_url }}" class="profile__image--navbar" width="20"/>
             <span class="dropdown--profile__username" ng-bind="$ctrl.currentUser.name"></span> <span
             class="caret caret--nav"></span></a>
@@ -112,7 +115,7 @@
               <a href="destinations" title="Settings">Alert Destinations</a>
             </li>
 
-            <li  ng-if="$ctrl.currentUser.hasPermission('super_admin')" class="divider"></li>
+            <li ng-if="$ctrl.currentUser.hasPermission('super_admin')" class="divider"></li>
 
             <li ng-if="$ctrl.currentUser.hasPermission('super_admin')"><a href="admin/status">System Status</a></li>
 
@@ -121,6 +124,19 @@
             <li>
               <a ng-click="$ctrl.logout()">Log out</a>
             </li>
+
+            <li class="divider"></li>
+            <li class="dropdown-menu__version">
+              Version: {{$ctrl.backendVersion}}
+              <span ng-if="$ctrl.frontendVersion !== $ctrl.backendVersion">
+                ({{$ctrl.frontendVersion.substring(0, 8)}})
+              </span>
+              <span class="update-available" ng-if="$ctrl.currentUser.hasPermission('super_admin') && $ctrl.newVersionAvailable">
+                <a href="https://version.redash.io/" target="_blank">
+                  <i class="fa fa-arrow-circle-down"></i>
+                </a>
+              </span>
+            </li>
           </ul>
         </li>
       </ul>

client/app/components/app-header/index.js

@@ -1,6 +1,7 @@
 import debug from 'debug';
 
 import logoUrl from '@/assets/images/redash_icon_small.png';
+import frontendVersion from '@/version.json';
 import template from './app-header.html';
 import './app-header.css';
 
@@ -16,6 +17,10 @@ function controller($rootScope, $location, $route, $uibModal, Auth, currentUser,
   this.showSettingsMenu = currentUser.hasPermission('list_users');
   this.showDashboardsMenu = currentUser.hasPermission('list_dashboards');
 
+  this.frontendVersion = frontendVersion;
+  this.backendVersion = clientConfig.version;
+  this.newVersionAvailable = clientConfig.newVersionAvailable && currentUser.isAdmin;
+
   this.reload = () => {
     logger('Reloading dashboards and queries.');
     Dashboard.favorites().$promise.then((data) => {

client/app/components/app-view/index.js

@@ -84,10 +84,9 @@ class AppViewComponent {
 export default function init(ngModule) {
   ngModule.factory(
     '$exceptionHandler',
-    () =>
-      function exceptionHandler(exception) {
-        handler.process(exception);
-      },
+    () => function exceptionHandler(exception) {
+      handler.process(exception);
+    },
   );
 
   ngModule.component('appView', {

client/app/components/dashboards/AddTextboxDialog.jsx

@@ -0,0 +1,104 @@
+import { markdown } from 'markdown';
+import { debounce } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from 'antd/lib/modal';
+import Input from 'antd/lib/input';
+import Tooltip from 'antd/lib/tooltip';
+import Divider from 'antd/lib/divider';
+import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import { toastr } from '@/services/ng';
+
+import './AddTextboxDialog.less';
+
+class AddTextboxDialog extends React.Component {
+  static propTypes = {
+    dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    dialog: DialogPropType.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+  };
+
+  state = {
+    saveInProgress: false,
+    text: '',
+    preview: '',
+  }
+
+  updatePreview = debounce(() => {
+    const text = this.state.text;
+    this.setState({
+      preview: markdown.toHTML(text),
+    });
+  }, 100);
+
+  onTextChanged = (event) => {
+    this.setState({ text: event.target.value });
+    this.updatePreview();
+  };
+
+  saveWidget() {
+    this.setState({ saveInProgress: true });
+
+    this.props.onConfirm(this.state.text)
+      .then(() => {
+        this.props.dialog.close();
+      })
+      .catch(() => {
+        toastr.error('Widget could not be added');
+      })
+      .finally(() => {
+        this.setState({ saveInProgress: false });
+      });
+  }
+
+  render() {
+    const { dialog } = this.props;
+
+    return (
+      <Modal
+        {...dialog.props}
+        title="Add Textbox"
+        onOk={() => this.saveWidget()}
+        okButtonProps={{
+          loading: this.state.saveInProgress,
+          disabled: !this.state.text,
+        }}
+        okText="Add to Dashboard"
+        width={500}
+      >
+        <div className="add-textbox">
+          <Input.TextArea
+            className="resize-vertical"
+            rows="5"
+            value={this.state.text}
+            onChange={this.onTextChanged}
+            autoFocus
+            placeholder="This is where you write some text"
+          />
+          <small>
+            Supports basic{' '}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.markdownguide.org/cheat-sheet/#basic-syntax"
+            >
+              <Tooltip title="Markdown guide opens in new window">Markdown</Tooltip>
+            </a>.
+          </small>
+          {this.state.text && (
+            <React.Fragment>
+              <Divider dashed />
+              <strong className="preview-title">Preview:</strong>
+              <p
+                dangerouslySetInnerHTML={{ __html: this.state.preview }} // eslint-disable-line react/no-danger
+                className="preview"
+              />
+            </React.Fragment>
+          )}
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export default wrapDialog(AddTextboxDialog);

client/app/components/dashboards/AddTextboxDialog.less

@@ -0,0 +1,18 @@
+.add-textbox {
+  small {
+    display: block;
+    margin-top: 4px;
+  }
+
+  .preview {
+    padding: 9px 9px 1px;
+    background-color: #f7f7f7;
+    margin-top: 8px;
+    word-wrap: break-word
+  }
+
+  .preview-title {
+    display: block;
+    margin-top: -5px;
+  }
+}

client/app/components/dashboards/AddWidgetDialog.jsx

@@ -0,0 +1,167 @@
+import { each, values, map, includes, first } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'antd/lib/select';
+import Modal from 'antd/lib/modal';
+import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import {
+  MappingType,
+  ParameterMappingListInput,
+} from '@/components/ParameterMappingInput';
+import { QuerySelector } from '@/components/QuerySelector';
+
+import { toastr } from '@/services/ng';
+
+import { Query } from '@/services/query';
+
+const { Option, OptGroup } = Select;
+
+class AddWidgetDialog extends React.Component {
+  static propTypes = {
+    dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    dialog: DialogPropType.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+  };
+
+  state = {
+    saveInProgress: false,
+    selectedQuery: null,
+    selectedVis: null,
+    parameterMappings: [],
+  };
+
+  selectQuery(selectedQuery) {
+    // Clear previously selected query (if any)
+    this.setState({
+      selectedQuery: null,
+      selectedVis: null,
+      parameterMappings: [],
+    });
+
+    if (selectedQuery) {
+      Query.get({ id: selectedQuery.id }, (query) => {
+        if (query) {
+          const existingParamNames = map(
+            this.props.dashboard.getParametersDefs(),
+            param => param.name,
+          );
+          this.setState({
+            selectedQuery: query,
+            parameterMappings: map(query.getParametersDefs(), param => ({
+              name: param.name,
+              type: includes(existingParamNames, param.name)
+                ? MappingType.DashboardMapToExisting : MappingType.DashboardAddNew,
+              mapTo: param.name,
+              value: param.normalizedValue,
+              title: '',
+              param,
+            })),
+          });
+          if (query.visualizations.length) {
+            this.setState({ selectedVis: query.visualizations[0] });
+          }
+        }
+      });
+    }
+  }
+
+  selectVisualization(query, visualizationId) {
+    each(query.visualizations, (visualization) => {
+      if (visualization.id === visualizationId) {
+        this.setState({ selectedVis: visualization });
+        return false;
+      }
+    });
+  }
+
+  saveWidget() {
+    const { selectedVis, parameterMappings } = this.state;
+
+    this.setState({ saveInProgress: true });
+
+    this.props.onConfirm(selectedVis, parameterMappings)
+      .then(() => {
+        this.props.dialog.close();
+      })
+      .catch(() => {
+        toastr.error('Widget could not be added');
+      })
+      .finally(() => {
+        this.setState({ saveInProgress: false });
+      });
+  }
+
+  updateParamMappings(parameterMappings) {
+    this.setState({ parameterMappings });
+  }
+
+  renderVisualizationInput() {
+    let visualizationGroups = {};
+    if (this.state.selectedQuery) {
+      each(this.state.selectedQuery.visualizations, (vis) => {
+        visualizationGroups[vis.type] = visualizationGroups[vis.type] || [];
+        visualizationGroups[vis.type].push(vis);
+      });
+    }
+    visualizationGroups = values(visualizationGroups);
+    return (
+      <div>
+        <div className="form-group">
+          <label htmlFor="choose-visualization">Choose Visualization</label>
+          <Select
+            id="choose-visualization"
+            className="w-100"
+            defaultValue={first(this.state.selectedQuery.visualizations).id}
+            onChange={visualizationId => this.selectVisualization(this.state.selectedQuery, visualizationId)}
+            dropdownClassName="ant-dropdown-in-bootstrap-modal"
+          >
+            {visualizationGroups.map(visualizations => (
+              <OptGroup label={visualizations[0].type} key={visualizations[0].type}>
+                {visualizations.map(visualization => (
+                  <Option value={visualization.id} key={visualization.id}>{visualization.name}</Option>
+                ))}
+              </OptGroup>
+            ))}
+          </Select>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const existingParams = this.props.dashboard.getParametersDefs();
+    const { dialog } = this.props;
+
+    return (
+      <Modal
+        {...dialog.props}
+        title="Add Widget"
+        onOk={() => this.saveWidget()}
+        okButtonProps={{
+          loading: this.state.saveInProgress,
+          disabled: !this.state.selectedQuery,
+        }}
+        okText="Add to Dashboard"
+        width={700}
+      >
+        <QuerySelector onChange={query => this.selectQuery(query)} />
+        {this.state.selectedQuery && this.renderVisualizationInput()}
+
+        {
+          (this.state.parameterMappings.length > 0) && [
+            <label key="parameters-title" htmlFor="parameter-mappings">Parameters</label>,
+            <ParameterMappingListInput
+              key="parameters-list"
+              id="parameter-mappings"
+              mappings={this.state.parameterMappings}
+              existingParams={existingParams}
+              onChange={mappings => this.updateParamMappings(mappings)}
+            />,
+          ]
+        }
+      </Modal>
+    );
+  }
+}
+
+export default wrapDialog(AddWidgetDialog);

client/app/components/dashboards/EditParameterMappingsDialog.jsx

@@ -0,0 +1,120 @@
+import { isMatch, map, find, sortBy } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from 'antd/lib/modal';
+import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import {
+  MappingType,
+  ParameterMappingListInput,
+  parameterMappingsToEditableMappings,
+  editableMappingsToParameterMappings,
+  synchronizeWidgetTitles,
+} from '@/components/ParameterMappingInput';
+
+export function getParamValuesSnapshot(mappings, dashboardParameters) {
+  return map(
+    sortBy(mappings, m => m.name),
+    (m) => {
+      let param;
+      switch (m.type) {
+        case MappingType.StaticValue:
+          return [m.name, m.value];
+        case MappingType.WidgetLevel:
+          return [m.name, m.param.value];
+        case MappingType.DashboardAddNew:
+        case MappingType.DashboardMapToExisting:
+          param = find(dashboardParameters, p => p.name === m.mapTo);
+          return [m.name, param ? param.value : null];
+        // no default
+      }
+    },
+  );
+}
+
+class EditParameterMappingsDialog extends React.Component {
+  static propTypes = {
+    dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    dialog: DialogPropType.isRequired,
+  };
+
+  originalParamValuesSnapshot = null
+
+  constructor(props) {
+    super(props);
+
+    const parameterMappings = parameterMappingsToEditableMappings(
+      props.widget.options.parameterMappings,
+      props.widget.query.getParametersDefs(),
+      map(this.props.dashboard.getParametersDefs(), p => p.name),
+    );
+
+    this.originalParamValuesSnapshot = getParamValuesSnapshot(
+      parameterMappings,
+      this.props.dashboard.getParametersDefs(),
+    );
+
+    this.state = {
+      saveInProgress: false,
+      parameterMappings,
+    };
+  }
+
+  saveWidget() {
+    const toastr = this.props.toastr; // eslint-disable-line react/prop-types
+    const widget = this.props.widget;
+
+    this.setState({ saveInProgress: true });
+
+    const newMappings = editableMappingsToParameterMappings(this.state.parameterMappings);
+    widget.options.parameterMappings = newMappings;
+
+    const valuesChanged = !isMatch(
+      this.originalParamValuesSnapshot,
+      getParamValuesSnapshot(this.state.parameterMappings, this.props.dashboard.getParametersDefs()),
+    );
+
+    const widgetsToSave = [
+      widget,
+      ...synchronizeWidgetTitles(widget.options.parameterMappings, this.props.dashboard.widgets),
+    ];
+
+    Promise.all(map(widgetsToSave, w => w.save()))
+      .then(() => {
+        this.props.dialog.close(valuesChanged);
+      })
+      .catch(() => {
+        toastr.error('Widget cannot be updated');
+      })
+      .finally(() => {
+        this.setState({ saveInProgress: false });
+      });
+  }
+
+  updateParamMappings(parameterMappings) {
+    this.setState({ parameterMappings });
+  }
+
+  render() {
+    const { dialog } = this.props;
+    return (
+      <Modal
+        {...dialog.props}
+        title="Parameters"
+        onOk={() => this.saveWidget()}
+        okButtonProps={{ loading: this.state.saveInProgress }}
+        width={700}
+      >
+        {(this.state.parameterMappings.length > 0) && (
+          <ParameterMappingListInput
+            mappings={this.state.parameterMappings}
+            existingParams={this.props.dashboard.getParametersDefs()}
+            onChange={mappings => this.updateParamMappings(mappings)}
+          />
+        )}
+      </Modal>
+    );
+  }
+}
+
+export default wrapDialog(EditParameterMappingsDialog);

client/app/components/dashboards/add-widget-dialog.html

@@ -1,70 +0,0 @@
-<div class="modal-header">
-  <button type="button" class="close" ng-disabled="$ctrl.saveInProgress" aria-hidden="true" ng-click="$ctrl.dismiss()">&times;</button>
-  <h4 class="modal-title">Add Widget</h4>
-</div>
-<div class="modal-body">
-  <p class="btn-group">
-    <button type="button" class="btn btn-default" ng-class="{active: $ctrl.isVisualization}" ng-click="$ctrl.setType('visualization')">Visualization</button>
-    <button type="button" class="btn btn-default" ng-class="{active: $ctrl.isTextBox}" ng-click="$ctrl.setType('textbox')">Text Box</button>
-  </p>
-
-  <div ng-show="$ctrl.isTextBox">
-    <div class="form-group m-b-0">
-      <textarea class="form-control resize-vertical" style="min-height: 100px"
-        ng-model="$ctrl.text" ng-model-options="{ debounce: 200 }" rows="5" autofocus></textarea>
-    </div>
-    <div ng-show="$ctrl.text" class="m-t-15">
-      <strong>Preview:</strong>
-      <p ng-bind-html="$ctrl.text | markdown" class="word-wrap-break"></p>
-    </div>
-  </div>
-
-  <div ng-show="$ctrl.isVisualization">
-    <div class="form-group">
-      <input type="text" placeholder="Search a query by name" class="form-control" autofocus
-        ng-if="!$ctrl.selectedQuery" ng-model="$ctrl.searchTerm" ng-change="$ctrl.searchQueries($ctrl.searchTerm)">
-      <div ng-if="$ctrl.selectedQuery" class="p-relative">
-        <input type="text" class="form-control bg-white"
-          ng-value="$ctrl.selectedQuery.name" readonly="readonly">
-        <a href="javascript:void(0)" ng-click="$ctrl.selectQuery(null)"
-          class="d-flex align-items-center justify-content-center"
-          style="position: absolute; right: 1px; top: 1px; bottom: 1px; width: 30px; background: #fff; border-radius: 3px;"
-        ><i class="text-muted fa fa-times"></i></a>
-      </div>
-    </div>
-
-    <div ng-if="!$ctrl.selectedQuery" class="scrollbox" style="max-height: 50vh">
-      <div ng-if="$ctrl.searchTerm == ''">
-        <div class="list-group" ng-if="$ctrl.recentQueries.length > 0">
-          <a class="list-group-item" ng-repeat="query in $ctrl.recentQueries"
-            ng-click="$ctrl.selectQuery(query.id)">{{query.name}}</a>
-        </div>
-      </div>
-
-      <div ng-if="$ctrl.searchTerm != ''">
-        <div ng-if="$ctrl.searchedQueries.length == 0" class="text-muted">
-          No results matching search term.
-        </div>
-        <div class="list-group" ng-if="$ctrl.searchedQueries.length > 0">
-          <a class="list-group-item"
-            ng-repeat="query in $ctrl.searchedQueries" ng-click="$ctrl.selectQuery(query.id)"
-            ng-bind-html="$ctrl.trustAsHtml(query.name | highlight: $ctrl.searchTerm)"
-          ></a>
-        </div>
-      </div>
-    </div>
-
-    <div ng-show="$ctrl.selectedQuery">
-      <div class="form-group">
-        <label>Choose Visualization</label>
-        <select ng-model="$ctrl.selectedVis" class="form-control"
-          ng-options="vis as vis.name group by vis.type for vis in $ctrl.selectedQuery.visualizations"></select>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="modal-footer">
-  <button type="button" class="btn btn-default" ng-disabled="$ctrl.saveInProgress" ng-click="$ctrl.dismiss()">Close</button>
-  <button type="button" class="btn btn-primary" ng-disabled="$ctrl.saveInProgress || !($ctrl.selectedVis || $ctrl.isTextBox)" ng-click="$ctrl.saveWidget()">Add to Dashboard</button>
-</div>

client/app/components/dashboards/add-widget-dialog.js

@@ -1,118 +0,0 @@
-import { debounce } from 'lodash';
-import template from './add-widget-dialog.html';
-import './add-widget-dialog.less';
-
-const AddWidgetDialog = {
-  template,
-  bindings: {
-    resolve: '<',
-    close: '&',
-    dismiss: '&',
-  },
-  controller($sce, toastr, Query, Widget) {
-    'ngInject';
-
-    this.dashboard = this.resolve.dashboard;
-    this.saveInProgress = false;
-
-    // Textbox
-    this.text = '';
-
-    // Visualization
-    this.selectedQuery = null;
-    this.searchTerm = '';
-    this.recentQueries = [];
-
-    // Don't show draft (unpublished) queries
-    Query.recent().$promise.then((items) => {
-      this.recentQueries = items.filter(item => !item.is_draft);
-    });
-
-    this.searchedQueries = [];
-    this.selectedVis = null;
-
-    this.trustAsHtml = html => $sce.trustAsHtml(html);
-
-    this.setType = (type) => {
-      this.type = type;
-      this.isVisualization = this.type === 'visualization';
-      this.isTextBox = this.type === 'textbox';
-    };
-    this.setType('visualization');
-
-    this.selectQuery = (queryId) => {
-      // Clear previously selected query (if any)
-      this.selectedQuery = null;
-      this.selectedVis = null;
-
-      if (queryId) {
-        Query.get({ id: queryId }, (query) => {
-          if (query) {
-            this.selectedQuery = query;
-            if (query.visualizations.length) {
-              this.selectedVis = query.visualizations[0];
-            }
-          }
-        });
-      }
-    };
-
-    // `ng-model-options` does not work with `ng-change`, so do debounce here
-    this.searchQueries = debounce((term) => {
-      if (!term || term.length === 0) {
-        this.searchedQueries = [];
-        return;
-      }
-
-      Query.query({ q: term }, (results) => {
-        // If user will type too quick - it's possible that there will be
-        // several requests running simultaneously. So we need to check
-        // which results are matching current search term and ignore
-        // outdated results.
-        if (this.searchTerm === term) {
-          this.searchedQueries = results.results;
-        }
-      });
-    }, 200);
-
-    this.saveWidget = () => {
-      this.saveInProgress = true;
-
-      const selectedVis = this.isVisualization ? this.selectedVis : null;
-
-      const widget = new Widget({
-        visualization_id: selectedVis && selectedVis.id,
-        dashboard_id: this.dashboard.id,
-        options: {
-          isHidden: false,
-          position: {},
-        },
-        visualization: selectedVis,
-        text: this.isTextBox ? this.text : '',
-      });
-
-      const position = this.dashboard.calculateNewWidgetPosition(widget);
-      widget.options.position.col = position.col;
-      widget.options.position.row = position.row;
-
-      widget
-        .save()
-        .then(() => {
-          this.dashboard.widgets.push(widget);
-          this.close();
-        })
-        .catch(() => {
-          toastr.error('Widget can not be added');
-        })
-        .finally(() => {
-          this.saveInProgress = false;
-        });
-    };
-  },
-};
-
-export default function init(ngModule) {
-  ngModule.component('addWidgetDialog', AddWidgetDialog);
-}
-
-init.init = true;

client/app/components/dashboards/add-widget-dialog.less

@@ -1,3 +0,0 @@
-.word-wrap-break {
-	word-wrap: break-word;
-}

client/app/components/dashboards/edit-dashboard-dialog.html

@@ -1,17 +1,19 @@
-<div class="modal-header">
-  <button type="button" class="close" ng-click="$ctrl.dismiss()" ng-disabled="$ctrl.saveInProgress" aria-hidden="true">&times;</button>
-  <h4 class="modal-title">New Dashboard</h4>
-</div>
-<div class="modal-body" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
-  <p>
-    <input type="text" class="form-control" placeholder="Dashboard Name" ng-model="$ctrl.dashboard.name" autofocus ng-keyup="$event.keyCode === 13 && $ctrl.saveDashboard()">
-  </p>
-</div>
-<div class="modal-footer" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
-  <button type="button" class="btn btn-default" ng-disabled="$ctrl.saveInProgress" ng-click="$ctrl.dismiss()">Close</button>
-  <button type="button" class="btn btn-primary" ng-disabled="$ctrl.saveInProgress || !$ctrl.isFormValid()" ng-click="$ctrl.saveDashboard()">Save</button>
-</div>
+<div data-test="EditDashboardDialog">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$ctrl.dismiss()" ng-disabled="$ctrl.saveInProgress" aria-hidden="true">&times;</button>
+    <h4 class="modal-title">New Dashboard</h4>
+  </div>
+  <div class="modal-body" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
+    <p>
+      <input type="text" class="form-control" placeholder="Dashboard Name" ng-model="$ctrl.dashboard.name" autofocus ng-keyup="$event.keyCode === 13 && $ctrl.saveDashboard()">
+    </p>
+  </div>
+  <div class="modal-footer" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
+    <button type="button" class="btn btn-default" ng-disabled="$ctrl.saveInProgress" ng-click="$ctrl.dismiss()">Close</button>
+    <button type="button" class="btn btn-primary" ng-disabled="$ctrl.saveInProgress || !$ctrl.isFormValid()" ng-click="$ctrl.saveDashboard()" data-test="DashboardSaveButton">Save</button>
+  </div>
 
-<div class="modal-body" ng-if="!$ctrl.policy.isCreateDashboardEnabled()">
-  <edit-dashboard-dialog-disabled></edit-dashboard-dialog-disabled>
+  <div class="modal-body" ng-if="!$ctrl.policy.isCreateDashboardEnabled()">
+    <edit-dashboard-dialog-disabled></edit-dashboard-dialog-disabled>
+  </div>
 </div>

client/app/components/dashboards/edit-dashboard-dialog.js

@@ -1,4 +1,5 @@
 import { isEmpty } from 'lodash';
+import { policy } from '@/services/policy';
 import template from './edit-dashboard-dialog.html';
 
 const EditDashboardDialog = {
@@ -8,11 +9,11 @@ const EditDashboardDialog = {
     dismiss: '&',
   },
   template,
-  controller($location, $http, Policy, Events) {
+  controller($location, $http, Events) {
     'ngInject';
 
     this.dashboard = this.resolve.dashboard;
-    this.policy = Policy;
+    this.policy = policy;
 
     this.isFormValid = () => !isEmpty(this.dashboard.name);
 

client/app/components/dashboards/widget.html

@@ -8,16 +8,25 @@
             <a ng-click="$ctrl.deleteWidget()" title="Remove From Dashboard"><i class="zmdi zmdi-close"></i></a>
           </div>
         </div>
-        <div class="dropdown pull-right widget-menu-regular" ng-if="!$ctrl.public" uib-dropdown>
+        <div class="dropdown pull-right widget-menu-regular" ng-if="!$ctrl.public"
+          uib-dropdown dropdown-append-to-body="true"
+        >
           <div class="actions">
             <a data-toggle="dropdown" uib-dropdown-toggle><i class="zmdi zmdi-more-vert"></i></a>
           </div>
 
-          <ul class="dropdown-menu pull-right" uib-dropdown-menu style="z-index:1000000">
+          <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
             <li ng-class="{'disabled': $ctrl.widget.getQueryResult().isEmpty()}"><a ng-href="{{$ctrl.widget.getQueryResult().getLink($ctrl.widget.getQuery().id, 'csv')}}" download="{{$ctrl.widget.getQueryResult().getName($ctrl.widget.getQuery().name, 'csv')}}" target="_self">Download as CSV File</a></li>
             <li ng-class="{'disabled': $ctrl.widget.getQueryResult().isEmpty()}"><a ng-href="{{$ctrl.widget.getQueryResult().getLink($ctrl.widget.getQuery().id, 'xlsx')}}" download="{{$ctrl.widget.getQueryResult().getName($ctrl.widget.getQuery().name, 'xlsx')}}" target="_self">Download as Excel File</a></li>
-            <li><a ng-href="{{$ctrl.widget.getQuery().getUrl(true, $ctrl.widget.visualization.id)}}" ng-show="$ctrl.canViewQuery">View Query</a></li>
-            <li><a ng-show="$ctrl.dashboard.canEdit()" ng-click="$ctrl.deleteWidget()">Remove From Dashboard</a></li>
+
+            <li ng-if="$ctrl.canViewQuery || ($ctrl.dashboard.canEdit() && $ctrl.hasParameters())" class="divider"></li>
+            <li ng-if="$ctrl.canViewQuery"><a ng-href="{{$ctrl.widget.getQuery().getUrl(true, $ctrl.widget.visualization.id)}}">View Query</a></li>
+            <li ng-if="$ctrl.dashboard.canEdit() && $ctrl.hasParameters()">
+              <li ng-if="$ctrl.dashboard.canEdit() && $ctrl.hasParameters()"><a ng-click="$ctrl.editParameterMappings()">Edit Parameters</a></li>
+            </li>
+
+            <li ng-if="$ctrl.dashboard.canEdit()" class="divider"></li>
+            <li ng-if="$ctrl.dashboard.canEdit()"><a ng-click="$ctrl.deleteWidget()">Remove from Dashboard</a></li>
           </ul>
         </div>
         <div class="th-title">

client/app/components/dashboards/widget.js

@@ -1,9 +1,10 @@
+import { filter } from 'lodash';
 import template from './widget.html';
 import editTextBoxTemplate from './edit-text-box.html';
 import widgetDialogTemplate from './widget-dialog.html';
+import EditParameterMappingsDialog from '@/components/dashboards/EditParameterMappingsDialog';
 import './widget.less';
 import './widget-dialog.less';
-import './add-widget-dialog.less';
 
 const WidgetDialog = {
   template: widgetDialogTemplate,
@@ -51,7 +52,7 @@ const EditTextBoxComponent = {
   },
 };
 
-function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser) {
+function DashboardWidgetCtrl($scope, $location, $uibModal, $window, $rootScope, $timeout, Events, currentUser) {
   this.canViewQuery = currentUser.hasPermission('view_query');
 
   this.editTextBox = () => {
@@ -75,12 +76,30 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser)
     });
   };
 
+  this.hasParameters = () => this.widget.query.getParametersDefs().length > 0;
+
+  this.editParameterMappings = () => {
+    EditParameterMappingsDialog.showModal({
+      dashboard: this.dashboard,
+      widget: this.widget,
+    }).result.then((valuesChanged) => {
+      this.localParameters = null;
+
+      // refresh widget if any parameter value has been updated
+      if (valuesChanged) {
+        $timeout(() => this.refresh());
+      }
+      $scope.$applyAsync();
+      $rootScope.$broadcast('dashboard.update-parameters');
+    });
+  };
+
   this.localParametersDefs = () => {
     if (!this.localParameters) {
-      this.localParameters = this.widget
-        .getQuery()
-        .getParametersDefs()
-        .filter(p => !p.global);
+      this.localParameters = filter(
+        this.widget.getParametersDefs(),
+        param => !this.widget.isStaticParam(param),
+      );
     }
     return this.localParameters;
   };
@@ -137,4 +156,3 @@ export default function init(ngModule) {
 }
 
 init.init = true;
-

client/app/components/dynamic-form.html

@@ -1,40 +0,0 @@
-<form name="dynamicForm">
-    <div class="form-group required" ng-class='{"has-error": (dynamicForm.targetName | showError)}'>
-        <label class="control-label" for="dataSourceName">Name</label>
-        <input type="string" class="form-control" name="targetName" ng-model="target.name" autofocus required>
-        <error-messages input="dynamicForm.targetName" form="dynamicForm"></error-messages>
-    </div>
-    <hr>
-    <div class="form-group" ng-class='{"has-error": (inner.input | showError), "required": field.property.required}' ng-form="inner" ng-repeat="field in fields">
-        <label ng-if="field.property.type !== 'checkbox'" class="control-label">{{field.property.title || field.name | toHuman}}</label>
-        <input name="input" type="{{field.property.type}}" class="form-control" ng-model="target.options[field.name]" ng-required="field.property.required"
-               ng-if="field.property.type !== 'file' && field.property.type !== 'checkbox'" accesskey="tab" placeholder="{{field.property.default}}"
-               data-cy="{{field.property.title || field.name | toHuman}}">
-
-        <label ng-if="field.property.type=='checkbox'">
-            <input name="input" type="{{field.property.type}}" ng-model="target.options[field.name]" ng-required="field.property.required"
-                   ng-if="field.property.type !== 'file'" accesskey="tab" placeholder="{{field.property.default}}"
-                   data-cy="{{field.property.title || field.name | toHuman}}">
-            {{field.property.title || field.name | toHuman}}
-        </label>
-
-        <input name="input" type="file" class="form-control" ng-model="files[field.name]" ng-required="field.property.required && !target.options[field.name]"
-               base-sixty-four-input
-               ng-if="field.property.type === 'file'">
-
-        <error-messages input="inner.input" form="inner"></error-messages>
-    </div>
-
-    <button class="btn btn-block btn-primary m-b-10" ng-disabled="!dynamicForm.$valid" ng-click="saveChanges()">Save</button>
-    <span ng-repeat="action in actions">
-        <button class="btn"
-                ng-class="action.class"
-                ng-if="target.id"
-                ng-disabled="(action.disableWhenDirty && dynamicForm.$dirty) || inProgressActions[action.name]"
-                ng-click="action.callback()" ng-bind-html="action.name"></button>
-    </span>
-
-    <span ng-transclude>
-
-    </span>
-</form>

client/app/components/dynamic-form.js

@@ -1,124 +0,0 @@
-import { isUndefined, each, includes } from 'lodash';
-import template from './dynamic-form.html';
-
-function orderedInputs(properties, order) {
-  const inputs = new Array(order.length);
-  Object.keys(properties).forEach((key) => {
-    const position = order.indexOf(key);
-    const input = { name: key, property: properties[key] };
-    if (position > -1) {
-      inputs[position] = input;
-    } else {
-      inputs.push(input);
-    }
-  });
-  return inputs;
-}
-
-function normalizeSchema(configurationSchema) {
-  each(configurationSchema.properties, (prop, name) => {
-    if (name === 'password' || name === 'passwd') {
-      prop.type = 'password';
-    }
-
-    if (name.endsWith('File')) {
-      prop.type = 'file';
-    }
-
-    if (prop.type === 'boolean') {
-      prop.type = 'checkbox';
-    }
-
-    prop.required = includes(configurationSchema.required, name);
-  });
-
-  configurationSchema.order = configurationSchema.order || [];
-}
-
-function setDefaults(configurationSchema, options) {
-  if (Object.keys(options).length === 0) {
-    const properties = configurationSchema.properties;
-    Object.keys(properties).forEach((property) => {
-      if (!isUndefined(properties[property].default)) {
-        options[property] = properties[property].default;
-      }
-    });
-  }
-}
-
-function DynamicForm($http, toastr) {
-  return {
-    restrict: 'E',
-    replace: 'true',
-    transclude: true,
-    template,
-    scope: {
-      target: '=',
-      type: '=',
-      actions: '=',
-    },
-    link($scope) {
-      const configurationSchema = $scope.type.configuration_schema;
-      normalizeSchema(configurationSchema);
-      $scope.fields = orderedInputs(configurationSchema.properties, configurationSchema.order);
-      setDefaults(configurationSchema, $scope.target.options);
-
-      $scope.inProgressActions = {};
-      if ($scope.actions) {
-        $scope.actions.forEach((action) => {
-          const originalCallback = action.callback;
-          const name = action.name;
-          action.callback = () => {
-            action.name = `<i class="zmdi zmdi-spinner zmdi-hc-spin"></i> ${name}`;
-
-            $scope.inProgressActions[action.name] = true;
-            function release() {
-              $scope.inProgressActions[action.name] = false;
-              action.name = name;
-            }
-
-            originalCallback(release);
-          };
-        });
-      }
-
-      $scope.files = {};
-
-      $scope.$watchCollection('files', () => {
-        each($scope.files, (v, k) => {
-          // THis is needed because angular-base64-upload sets the value to null at initialization,
-          // causing the field to be marked as dirty even if it wasn't changed.
-          if (!v && $scope.target.options[k]) {
-            $scope.dynamicForm.$setPristine();
-          }
-          if (v) {
-            $scope.target.options[k] = v.base64;
-          }
-        });
-      });
-
-      $scope.saveChanges = () => {
-        $scope.target.$save(
-          () => {
-            toastr.success('Saved.');
-            $scope.dynamicForm.$setPristine();
-          },
-          (error) => {
-            if (error.status === 400 && 'message' in error.data) {
-              toastr.error(error.data.message);
-            } else {
-              toastr.error('Failed saving.');
-            }
-          },
-        );
-      };
-    },
-  };
-}
-
-export default function init(ngModule) {
-  ngModule.directive('dynamicForm', DynamicForm);
-}
-
-init.init = true;
-

client/app/components/dynamic-form/DynamicForm.jsx

@@ -0,0 +1,256 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Form from 'antd/lib/form';
+import Input from 'antd/lib/input';
+import InputNumber from 'antd/lib/input-number';
+import Checkbox from 'antd/lib/checkbox';
+import Button from 'antd/lib/button';
+import Upload from 'antd/lib/upload';
+import Icon from 'antd/lib/icon';
+import { includes } from 'lodash';
+import { react2angular } from 'react2angular';
+import { toastr } from '@/services/ng';
+import { Field, Action, AntdForm } from '../proptypes';
+import helper from './dynamicFormHelper';
+
+const fieldRules = ({ type, required, minLength }) => {
+  const requiredRule = required;
+  const minLengthRule = minLength && includes(['text', 'email', 'password'], type);
+  const emailTypeRule = type === 'email';
+
+  return [
+    requiredRule && { required, message: 'This field is required.' },
+    minLengthRule && { min: minLength, message: 'This field is too short.' },
+    emailTypeRule && { type: 'email', message: 'This field must be a valid email.' },
+  ].filter(rule => rule);
+};
+
+export const DynamicForm = Form.create()(class DynamicForm extends React.Component {
+  static propTypes = {
+    fields: PropTypes.arrayOf(Field),
+    actions: PropTypes.arrayOf(Action),
+    feedbackIcons: PropTypes.bool,
+    hideSubmitButton: PropTypes.bool,
+    saveText: PropTypes.string,
+    onSubmit: PropTypes.func,
+    form: AntdForm.isRequired,
+  };
+
+  static defaultProps = {
+    fields: [],
+    actions: [],
+    feedbackIcons: false,
+    hideSubmitButton: false,
+    saveText: 'Save',
+    onSubmit: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isSubmitting: false,
+      inProgressActions: [],
+    };
+
+    this.actionCallbacks = this.props.actions.reduce((acc, cur) => ({
+      ...acc,
+      [cur.name]: cur.callback,
+    }), null);
+
+    props.actions.forEach((action) => {
+      this.state.inProgressActions[action.name] = false;
+    });
+  }
+
+  setActionInProgress = (actionName, inProgress) => {
+    this.setState(prevState => ({
+      inProgressActions: {
+        ...prevState.inProgressActions,
+        [actionName]: inProgress,
+      },
+    }));
+  };
+
+  handleSubmit = (e) => {
+    this.setState({ isSubmitting: true });
+    e.preventDefault();
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        this.props.onSubmit(
+          values,
+          (msg) => {
+            const { setFieldsValue, getFieldsValue } = this.props.form;
+            this.setState({ isSubmitting: false });
+            setFieldsValue(getFieldsValue()); // reset form touched state
+            toastr.success(msg);
+          },
+          (msg) => {
+            this.setState({ isSubmitting: false });
+            toastr.error(msg);
+          },
+        );
+      } else this.setState({ isSubmitting: false });
+    });
+  }
+
+  handleAction = (e) => {
+    const actionName = e.target.dataset.action;
+
+    this.setActionInProgress(actionName, true);
+    this.actionCallbacks[actionName](() => {
+      this.setActionInProgress(actionName, false);
+    });
+  }
+
+  base64File = (fieldName, e) => {
+    if (e && e.fileList[0]) {
+      helper.getBase64(e.file).then((value) => {
+        this.props.form.setFieldsValue({ [fieldName]: value });
+      });
+    }
+  }
+
+  renderUpload(field, props) {
+    const { getFieldDecorator, getFieldValue } = this.props.form;
+    const { name, initialValue } = field;
+
+    const fileOptions = {
+      rules: fieldRules(field),
+      initialValue,
+      getValueFromEvent: this.base64File.bind(this, name),
+    };
+
+    const disabled = getFieldValue(name) !== undefined && getFieldValue(name) !== initialValue;
+
+    const upload = (
+      <Upload {...props} beforeUpload={() => false}>
+        <Button disabled={disabled}><Icon type="upload" /> Click to upload</Button>
+      </Upload>
+    );
+
+    return getFieldDecorator(name, fileOptions)(upload);
+  }
+
+  renderField(field, props) {
+    const { getFieldDecorator } = this.props.form;
+    const { name, type, initialValue } = field;
+    const fieldLabel = field.title || helper.toHuman(name);
+
+    const options = {
+      rules: fieldRules(field),
+      valuePropName: type === 'checkbox' ? 'checked' : 'value',
+      initialValue,
+    };
+
+    if (type === 'checkbox') {
+      return getFieldDecorator(name, options)(<Checkbox {...props}>{fieldLabel}</Checkbox>);
+    } else if (type === 'file') {
+      return this.renderUpload(field, props);
+    } else if (type === 'number') {
+      return getFieldDecorator(name, options)(<InputNumber {...props} />);
+    }
+    return getFieldDecorator(name, options)(<Input {...props} />);
+  }
+
+  renderFields() {
+    return this.props.fields.map((field) => {
+      const [firstField] = this.props.fields;
+      const FormItem = Form.Item;
+      const { name, title, type, readOnly } = field;
+      const fieldLabel = title || helper.toHuman(name);
+      const { feedbackIcons } = this.props;
+
+      const formItemProps = {
+        key: name,
+        className: 'm-b-10',
+        hasFeedback: type !== 'checkbox' && type !== 'file' && feedbackIcons,
+        label: type === 'checkbox' ? '' : fieldLabel,
+      };
+
+      const fieldProps = {
+        ...field.props,
+        autoFocus: (firstField === field),
+        className: 'w-100',
+        name,
+        type,
+        readOnly,
+        placeholder: field.placeholder,
+        'data-test': fieldLabel,
+      };
+
+      return (<FormItem {...formItemProps}>{this.renderField(field, fieldProps)}</FormItem>);
+    });
+  }
+
+  renderActions() {
+    return this.props.actions.map((action) => {
+      const inProgress = this.state.inProgressActions[action.name];
+      const { isFieldsTouched } = this.props.form;
+
+      const actionProps = {
+        key: action.name,
+        htmlType: 'button',
+        className: action.pullRight ? 'pull-right m-t-10' : 'm-t-10',
+        type: action.type,
+        disabled: (isFieldsTouched() && action.disableWhenDirty),
+        loading: inProgress,
+        onClick: this.handleAction,
+      };
+
+      return (<Button {...actionProps} data-action={action.name}>{action.name}</Button>);
+    });
+  }
+
+  render() {
+    const submitProps = {
+      type: 'primary',
+      htmlType: 'submit',
+      className: 'w-100',
+      disabled: this.state.isSubmitting,
+      loading: this.state.isSubmitting,
+    };
+    const { hideSubmitButton, saveText } = this.props;
+    const saveButton = !hideSubmitButton;
+
+    return (
+      <Form layout="vertical" onSubmit={this.handleSubmit}>
+        {this.renderFields()}
+        {saveButton && <Button {...submitProps}>{saveText}</Button>}
+        {this.renderActions()}
+      </Form>
+    );
+  }
+});
+
+export default function init(ngModule) {
+  ngModule.component('dynamicForm', react2angular((props) => {
+    const fields = helper.getFields(props.type.configuration_schema, props.target);
+
+    const onSubmit = (values, onSuccess, onError) => {
+      helper.updateTargetWithValues(props.target, values);
+      props.target.$save(
+        () => {
+          onSuccess('Saved.');
+        },
+        (error) => {
+          if (error.status === 400 && 'message' in error.data) {
+            onError(error.data.message);
+          } else {
+            onError('Failed saving.');
+          }
+        },
+      );
+    };
+
+    const updatedProps = {
+      fields,
+      actions: props.target.id ? props.actions : [],
+      feedbackIcons: true,
+      onSubmit,
+    };
+    return (<DynamicForm {...updatedProps} />);
+  }, ['target', 'type', 'actions']));
+}
+
+init.init = true;

client/app/components/dynamic-form/dynamicFormHelper.js

@@ -0,0 +1,105 @@
+import { each, includes, isUndefined } from 'lodash';
+
+function orderedInputs(properties, order, targetOptions) {
+  const inputs = new Array(order.length);
+  Object.keys(properties).forEach((key) => {
+    const position = order.indexOf(key);
+    const input = {
+      name: key,
+      title: properties[key].title,
+      type: properties[key].type,
+      placeholder: properties[key].default && properties[key].default.toString(),
+      required: properties[key].required,
+      initialValue: targetOptions[key],
+    };
+
+    if (position > -1) {
+      inputs[position] = input;
+    } else {
+      inputs.push(input);
+    }
+  });
+  return inputs;
+}
+
+function normalizeSchema(configurationSchema) {
+  each(configurationSchema.properties, (prop, name) => {
+    if (name === 'password' || name === 'passwd') {
+      prop.type = 'password';
+    }
+
+    if (name.endsWith('File')) {
+      prop.type = 'file';
+    }
+
+    if (prop.type === 'boolean') {
+      prop.type = 'checkbox';
+    }
+
+    if (prop.type === 'string') {
+      prop.type = 'text';
+    }
+
+    prop.required = includes(configurationSchema.required, name);
+  });
+
+  configurationSchema.order = configurationSchema.order || [];
+}
+
+function setDefaultValueForCheckboxes(configurationSchema, options = {}) {
+  if (Object.keys(options).length === 0) {
+    const properties = configurationSchema.properties;
+    Object.keys(properties).forEach((property) => {
+      if (!isUndefined(properties[property].default) && properties[property].type === 'checkbox') {
+        options[property] = properties[property].default;
+      }
+    });
+  }
+}
+
+function getFields(configurationSchema, target = {}) {
+  normalizeSchema(configurationSchema);
+  setDefaultValueForCheckboxes(configurationSchema, target.options);
+
+  const inputs = [
+    {
+      name: 'name',
+      title: 'Name',
+      type: 'text',
+      required: true,
+      initialValue: target.name,
+    },
+    ...orderedInputs(configurationSchema.properties, configurationSchema.order, target.options),
+  ];
+
+  return inputs;
+}
+
+function updateTargetWithValues(target, values) {
+  target.name = values.name;
+  Object.keys(values).forEach((key) => {
+    if (key !== 'name') {
+      target.options[key] = values[key];
+    }
+  });
+}
+
+function toHuman(text) {
+  return text.replace(/_/g, ' ').replace(/(?:^|\s)\S/g, a => a.toUpperCase());
+}
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result.substr(reader.result.indexOf(',') + 1));
+    reader.onerror = error => reject(error);
+  });
+}
+
+export default {
+  getFields,
+  updateTargetWithValues,
+  toHuman,
+  getBase64,
+};

client/app/components/dynamic-table/default-cell/index.js

@@ -45,4 +45,3 @@ export default function init(ngModule) {
 }
 
 init.init = true;
-

client/app/components/dynamic-table/dynamic-table.html

@@ -1,5 +1,5 @@
 <div class="dynamic-table-container">
-  <table class="table table-condensed table-hover">
+  <table class="table table-condensed table-hover" data-test="DynamicTable">
     <thead>
       <tr>
         <th ng-repeat="column in $ctrl.columns" ng-click="$ctrl.onColumnHeaderClick($event, column)"
@@ -32,15 +32,4 @@
     </tbody>
   </table>
 </div>
-<div class="paginator-container" ng-if="$ctrl.preparedRows.length > $ctrl.itemsPerPage">
-  <ul uib-pagination total-items="$ctrl.preparedRows.length"
-      items-per-page="$ctrl.itemsPerPage"
-      ng-model="$ctrl.currentPage"
-      max-size="6"
-      class="pagination"
-      boundary-link-numbers="true"
-      rotate="false"
-      next-text='&#8594;'
-      previous-text='&#8592;'
-      ng-change="$ctrl.onPageChanged()"></ul>
-</div>
+<paginator paginator="$ctrl.paginatorAdapter"></paginator>

client/app/components/dynamic-table/index.js

@@ -82,9 +82,33 @@ function createRowRenderTemplate(columns, $compile) {
   return $compile(rowTemplate);
 }
 
-function DynamicTable($compile) {
+class DynamicTablePaginatorAdapter {
+  constructor($ctrl) {
+    this.$ctrl = $ctrl;
+  }
+
+  get page() {
+    return this.$ctrl.currentPage;
+  }
+
+  get itemsPerPage() {
+    return this.$ctrl.itemsPerPage;
+  }
+
+  get totalCount() {
+    return this.$ctrl.preparedRows.length;
+  }
+
+  setPage(page) {
+    this.$ctrl.onPageChanged(page);
+  }
+}
+
+function DynamicTable($scope, $compile) {
   'ngInject';
 
+  this.paginatorAdapter = new DynamicTablePaginatorAdapter(this);
+
   this.itemsPerPage = validateItemsPerPage(this.itemsPerPage);
   this.currentPage = 1;
   this.searchTerm = '';
@@ -180,8 +204,10 @@ function DynamicTable($compile) {
     }
   };
 
-  this.onPageChanged = () => {
+  this.onPageChanged = (page) => {
+    this.currentPage = page;
     updateRowsToDisplay(false);
+    $scope.$applyAsync();
   };
 
   this.onSearchTermChanged = () => {

client/app/components/dynamic-table/json-cell/index.js

@@ -2,10 +2,8 @@ import { isUndefined, isString } from 'lodash';
 import renderJsonView from './json-view-interactive';
 import template from './template.html';
 
-const MAX_JSON_SIZE = 50000;
-
-function parseValue(value) {
-  if (isString(value) && value.length <= MAX_JSON_SIZE) {
+function parseValue(value, clientConfig) {
+  if (isString(value) && value.length <= clientConfig.tableCellMaxJSONSize) {
     try {
       return JSON.parse(value);
     } catch (e) {
@@ -14,8 +12,8 @@ function parseValue(value) {
   }
 }
 
-export default function init(ngModule) {
-  ngModule.directive('dynamicTableJsonCell', () => ({
+function DynamicTableJsonCell(clientConfig) {
+  return {
     template,
     restrict: 'E',
     replace: true,
@@ -30,13 +28,17 @@ export default function init(ngModule) {
       $scope.parsedValue = null;
 
       $scope.$watch('value', () => {
-        $scope.parsedValue = parseValue($scope.value);
+        $scope.parsedValue = parseValue($scope.value, clientConfig);
         $scope.isValid = !isUndefined($scope.parsedValue);
         container.empty();
         renderJsonView(container, $scope.parsedValue);
       });
     },
-  }));
+  };
+}
+
+export default function init(ngModule) {
+  ngModule.directive('dynamicTableJsonCell', DynamicTableJsonCell);
 }
 
 init.init = true;