change item element

* Support multiple queries in a single query box

* Implement statement splitting function and add tests for it

* Add a test for databricks-specific syntax

* Split statements before running query

.circleci/config.yml

@@ -2,10 +2,11 @@ version: 2.0
 
 build-docker-image-job: &build-docker-image-job
   docker:
-    - image: circleci/node:8
+    - image: circleci/node:12
   steps:
     - setup_remote_docker
     - checkout
+    - run: sudo apt update
     - run: sudo apt install python3-pip
     - run: sudo pip3 install -r requirements_bundles.txt
     - run: .circleci/update_version
@@ -32,7 +33,7 @@ jobs:
           name: Build Docker Images
           command: |
             set -x
-            docker-compose build --build-arg skip_ds_deps=true
+            docker-compose build --build-arg skip_ds_deps=true --build-arg skip_frontend_build=true
             docker-compose up -d
             sleep 10
       - run:
@@ -57,24 +58,30 @@ jobs:
           path: coverage.xml
   frontend-lint:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - checkout
       - run: mkdir -p /tmp/test-results/eslint
-      - run: npm install
+      - run: npm ci
       - run: npm run lint:ci
       - store_test_results:
           path: /tmp/test-results
   frontend-unit-tests:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - checkout
+      - run: sudo apt update
       - run: sudo apt install python3-pip
       - run: sudo pip3 install -r requirements_bundles.txt
-      - run: npm install
+      - run: npm ci
       - run: npm run bundle
-      - run: npm test
+      - run:
+          name: Run App Tests
+          command: npm test
+      - run:
+          name: Run Visualizations Tests
+          command: (cd viz-lib && npm test)
       - run: npm run lint
   frontend-e2e-tests:
     environment:
@@ -84,22 +91,28 @@ jobs:
       CYPRESS_PROJECT_ID_ENCODED: OTI0Y2th
       CYPRESS_RECORD_KEY_ENCODED: YzA1OTIxMTUtYTA1Yy00NzQ2LWEyMDMtZmZjMDgwZGI2ODgx
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - setup_remote_docker
       - checkout
       - run:
           name: Install npm dependencies
           command: |
-            npm install
+            npm ci
       - run:
           name: Setup Redash server
           command: |
-            npm run cypress start
+            npm run cypress build
+            npm run cypress start -- --skip-db-seed
             docker-compose run cypress npm run cypress db-seed
       - run:
           name: Execute Cypress tests
           command: npm run cypress run-ci
+      - run:
+          name: "Failure: output container logs to console"
+          command: |
+            docker-compose logs
+          when: on_fail
   build-docker-image: *build-docker-image-job
   build-preview-docker-image: *build-docker-image-job
 workflows:

.circleci/docker-compose.circle.yml

@@ -1,4 +1,4 @@
-version: '3'
+version: '2.2'
 services:
   redash:
     build: ../

.circleci/docker-compose.cypress.yml

@@ -1,4 +1,4 @@
-version: '3'
+version: '2.2'
 services:
   server:
     build: ../
@@ -14,6 +14,7 @@ services:
       REDASH_REDIS_URL: "redis://redis:6379/0"
       REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
       REDASH_RATELIMIT_ENABLED: "false"
+      REDASH_ENFORCE_CSRF: "true"
   scheduler:
     build: ../
     command: scheduler
@@ -46,6 +47,7 @@ services:
       PERCY_COMMIT: ${CIRCLE_SHA1}
       PERCY_PULL_REQUEST: ${CIRCLE_PR_NUMBER}
       COMMIT_INFO_BRANCH: ${CIRCLE_BRANCH}
+      COMMIT_INFO_MESSAGE: ${COMMIT_INFO_MESSAGE}
       COMMIT_INFO_AUTHOR: ${CIRCLE_USERNAME}
       COMMIT_INFO_SHA: ${CIRCLE_SHA1}
       COMMIT_INFO_REMOTE: ${CIRCLE_REPOSITORY_URL}

.circleci/docker_build

@@ -6,11 +6,11 @@ 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 build --build-arg skip_dev_deps=true -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 build --build-arg skip_dev_deps=true -t redash/redash:$VERSION_TAG .
     docker push redash/redash:$VERSION_TAG
 fi
 

.dockerignore

@@ -1,6 +1,7 @@
 client/.tmp/
 client/dist/
 node_modules/
+viz-lib/node_modules/
 .tmp/
 .venv/
 venv/

.gitignore

@@ -9,7 +9,6 @@ venv/
 coverage.xml
 client/dist
 .DS_Store
-celerybeat-schedule*
 .#*
 \#*#
 *~

.restyled.yaml

@@ -50,11 +50,13 @@ labels: ["Skip CI"]
 # Restylers to run, and how
 restylers:
   - name: black
+    image: restyled/restyler-black:v19.10b0
     include:
       - redash
       - tests
       - migrations/versions
   - name: prettier
+    image: restyled/restyler-prettier:v1.19.1-2
     include:
       - client/app/**/*.js
       - client/app/**/*.jsx

CHANGELOG.md

@@ -1,5 +1,149 @@
 # Change Log
 
+## v9.0.0-beta - 2020-06-11
+
+This release was long time in the making and has several major changes:
+
+- Our backend code was updated to support Python 3 and we no longer support Python 2. If you're using our Docker images, this should be a transparent change for you.
+- We replaced Celery with RQ for background jobs processing. This will require some setup updates -- see instructions below.
+- The frontend code is now 100% React and we removed all the Angular dependencies.
+
+This release was made possible by contributions from over 50 people: @ari-e, @ariarijp, @arihantsurana, @arikfr, @atharvai, @cemremengu, @chulucninh09, @citrin, @daniellangnet, @DavidHernandez, @deecay, @dmudro, @erans, @erels, @ezkl, @gabrieldutra, @gstaykov, @ialeinikov, @ikenji, @Jakdaw, @jezdez, @juanvasquezreyes, @koooge, @kravets-levko, @kykrueger, @leibowitz, @leosunmo, @lihan, @loganprice, @mickeey2525, @mnoorenberghe, @monicagangwar, @NicolasLM, @p-yang, @Ralnoc, @ranbena, @randyzwitch, @rauchy, @rxin, @saravananselvamohan, @satyamkrishna, @shinsuke-nara, @stefan-mees, @stevebuckingham, @susodapop, @taminif, @thewarpaint, @tsuyoshizawa, @uncletimmy3, @wengkham.
+
+### Upgrading
+
+Typically, if you are running your own instance of Redash and wish to upgrade, you would simply modify the Docker tag in your `docker-compose.yml` file. Since RQ has replaced Celery in this version, there are a couple extra modifications that need to be done in your `docker-compose.yml`:
+
+1. Under `services/scheduler/environment`, omit `QUEUES` and `WORKERS_COUNT` (and omit `environment` altogether if it is empty).
+2. Under `services`, add a new service for general RQ jobs:
+
+```yaml
+worker:
+  <<: *redash-service
+  command: worker
+  environment:
+    QUEUES: "periodic emails default"
+    WORKERS_COUNT: 1
+```
+
+Following that, force a recreation of your containers with `docker-compose up --force-recreate --build` and you should be good to go.
+
+### UX
+
+- Redesigned Query Results page:
+  - Completely new layout is easier to read for non-technical Redash users.
+  - Empty query results are clearly displayed. User is now prompted to edit or execute the query.
+- Mobile Experience Improvements:
+  - UI element spacing has been redesigned for clarity
+  - Admin pages now honor max-width. Tables scroll independent of the top menu.
+  - Large legends no longer shrink the visualization on small screens.
+  - Fix: it was sometimes impossible to scroll pages with dashboards because the visualizations captured every touch event.
+  - Fix: Visualizations on small screens would not always show horizontal scroll bars.
+- Dashboards can now be un-archived using the API.
+- Dashboard UI performance was improved.
+- List pages were changed to show a user's name instead of avatar.
+- Search-enabled tables now show a prompt for which columns will be searched.
+- In the visualization editor, the settings pane now scrolls independent of the visualization preview.
+- Tokens in the schema viewer now sort alphabetically.
+- Links to settings panes that require Admin privileges are now hidden from non-Admins.
+- The Admin page now remembers which tab you were viewing after a page reload.
+
+### Visualizations
+
+- Feature: Allow bubble size control with either coefficient or sizemode.
+- Feature: Table visualization now treats Unix timestamps in query results as timestamps.
+- Feature: It's now possible to provide a description to each Table column, appearing in UI as a tooltip.
+- Feature: Added tooltip and popover templating to the map with markers visualization.
+- Feature: Added an organization setting to hide the Plotly mode bar on all visualizations.
+- Feature: Cohort visualization now has appearance settings.
+- Feature: Add option to explicitly set Chart legend position.
+- Change: Deprecated visualizations are now hidden.
+- Change: Table settings editor now extends vertically instead of horizontally.
+- Change: The maximum table pagination is now 500.
+- Change: Pie chart labels maintain contrast against lighter slices.
+- Fix: Chart series switched places when picking Y axis.
+- Fix: Third column was not selectable for Bubble and Heatmap charts.
+- Fix: On the counter visualizations, the “count rows” option showed an empty string instead of 0.
+- Fix: Table visualization with column named "children" rendered +/- buttons.
+- Fix: Sankey visualization now correctly occupies all available area even with fewer stages.
+- Fix: Pie chart ignores series labels.
+
+### Data Sources
+
+- New Data Sources: Amazon Cloudwatch, Amazon CloudWatch Logs Insights, Azure Kusto, Exasol.
+- Athena:
+  - Added the option to specify a base cost in settings, displaying a price for each query when executed.
+- BigQuery:
+  - Fix: large jobs continued running after the user clicked “Cancel” query execution.
+- Cassandra:
+  - Updated driver to 3.21.0 which dramatically reduces Docker build times.
+  - SSL options are now available.
+- Clickhouse:
+  - You can now choose whether to verify the SSL certificate.
+- Databricks:
+  - Databricks now use an ODBC-based connector.
+  - Fix: Date column was coerced to DateTime in the front-end.
+- Druid:
+  - Added username and password authentication option.
+- Microsoft SQL Server
+  - Added support for ODBC connections via pyodbc. There are now two MSSQL data source types. One using TDS. The other is using ODBC.
+- MongoDB:
+  - Added support for running queries on secondary in replicaset mode.
+  - Fix: Connection test always succeeded.
+- Oracle:
+  - Fix: Connection would fail if username or password contained special characters.
+  - Fix: Comparisons would fail if scale was None.
+- RDS:
+  - Updated rds-combined-ca-bundle.pem to the latest CA.
+- Redshift:
+  - Added the ability to use IAM Roles and Users.
+  - Fix: Redshift was unable to have its schema refreshed.
+- Rockset:
+  - Fix: Allow Redash to load collections in all workspaces.
+- Snowflake:
+  - You can now refresh the snowflake schema without waking the cluster.
+  - Added support for all of Snowflake’s datetime types. Otherwise certain timestamps would only appear as strings in the front-end.
+- TreasureData:
+  - Fix: API calls would fail when setting a non-default region.
+
+### Alerts
+
+- Feature: Added ability to mute alerts without deleting them.
+- Fix: numerical comparisons failed if value from query was a string.
+
+### Parameters
+
+- Added Last x Days options for date range parameters.
+- Fix: Parameters added in empty queries were always added as text parameters
+
+### Bug Fixes
+
+- Fix: Alembic migration schema was preventing v4 users from upgrading. In v5 we started encrypting data source credentials in the database.
+- Fix: System admin dashboard would not show correct database size if non-default name was used.
+- Fix: refresh_queries job would break if any query had a bad schedule object.
+- Fix: Orgs with LDAP enabled couldn’t disable password login.
+- Fix: SSL mode was sometimes sent as an empty string to the database instead of omitted entirely.
+- Fix: When creating new Map visualization with clustering disabled, map would crash on save.
+- Fix: It was possible on the New Query page to click “Save” multiple times, causing multiple new query records to be created.
+- Fix: Visualization render errors on a dashboard would crash the entire page.
+- Fix: A scheduled execution failure would modify the query’s “updated_at” timestamp.
+- Fix: Parameter UI would wrap awkwardly during some drag operations.
+- Fix: In dashboard edit mode, users couldn’t modify widgets.
+- Fix: Frontend error when parsing a NaN float.
+
+### Other
+
+- Added TSV as a download format (in addition to CSV and Excel).
+- Added maildev settings (helps with automated settings).
+- Refine permissions usage in Redash to allow for guest users
+- The query results API now explicitly handles 404 errors.
+- Forked queries now retain the tags of the original query.
+- We now allow setting custom Sentry environments.
+- Started using Black linter for our Python source code
+- Added CLI command to re-encrypt data source details with new secret key.
+- Favorites list is now loaded on menu click instead of on page load.
+- Administrators can now allow connections to private IP addresses.
+
 ## v8.0.0 - 2019-10-27
 
 There were no changes in this release since `v8.0.0-beta.2`. This is just to mark a stable release.
@@ -8,24 +152,23 @@ There were no changes in this release since `v8.0.0-beta.2`. This is just to mar
 
 This is an update to the previous beta release, which includes:
 
-* Add options for users to share anonymous usage information with us (see [docs](https://redash.io/help/open-source/admin-guide/usage-data) for details).
-* Visualizations:
-    - Allow the user to decide how to handle null values in charts.
-* Upgrade Sentry-SDK to latest version.
-* Make horizontal table scroll visible in dashboard widgets without scrolling.
-* Data Sources:
-    * Add support for Azure Data Explorer (Kusto).
-    * MySQL: fix connections without SSL configuration failing.
-    * Amazon Redshift: option to set query group for adhoc/scheduled queries.
-    * Hive: make error message more friendly.
-    * Qubole: add support to run Quantum queries.
-* Display data source icon in query editor.
-* Fix: allow users with view only acces to use the queries in Query Results
-* Dashboard: when updating parameters refersh only widgets that use those parameters.
+- Add options for users to share anonymous usage information with us (see [docs](https://redash.io/help/open-source/admin-guide/usage-data) for details).
+- Visualizations:
+  - Allow the user to decide how to handle null values in charts.
+- Upgrade Sentry-SDK to latest version.
+- Make horizontal table scroll visible in dashboard widgets without scrolling.
+- Data Sources:
+  - Add support for Azure Data Explorer (Kusto).
+  - MySQL: fix connections without SSL configuration failing.
+  - Amazon Redshift: option to set query group for adhoc/scheduled queries.
+  - Hive: make error message more friendly.
+  - Qubole: add support to run Quantum queries.
+- Display data source icon in query editor.
+- Fix: allow users with view only acces to use the queries in Query Results
+- Dashboard: when updating parameters refersh only widgets that use those parameters.
 
 This release had contributions from 12 people: @arikfr, @cclauss, @gabrieldutra, @justinclift, @kravets-levko, @ranbena, @rauchy, @sandeepV2, @shinsuke-nara, @spacentropy, @sphenlee, @swfz.
 
-
 ## v8.0.0-beta - 2019-08-18
 
 After months of being heads down with hard work, it's finally time to wrap up the V8 release 🤩 This release includes many long awaited improvements to parameters, UX improvements, further React migration and other changes, fixes and improvements.
@@ -39,10 +182,10 @@ This release was made possible by contributions from over 40 people: @aidarbek,
 ### Parameters
 
 - Parameter UI improvements:
-    - Support for multi-select in dropdown (and query dropdown) parameters.
-    - Support for dynamic values in date and date-range parameters.
-    - Search dropdown parameter values.
-    - New UX for applying parameter changes in queries and dashboards.
+  - Support for multi-select in dropdown (and query dropdown) parameters.
+  - Support for dynamic values in date and date-range parameters.
+  - Search dropdown parameter values.
+  - New UX for applying parameter changes in queries and dashboards.
 - Allow using Safe Parameters in visualization embeds and public dashboards. Safe Parameters are any parameter type except for the a text parameter (dropdowns are safe).
 
 ### Data Sources
@@ -52,19 +195,19 @@ This release was made possible by contributions from over 40 people: @aidarbek,
 - Snowflake: update connector to latest version.
 - PostgreSQL: show only accessible tables in schema.
 - BigQuery:
-    - Correctly handle NaN values.
-    - Treat repeated fields as rrays.
-    - [BigQuery] Fix: in some queries there is no mode field
+  - Correctly handle NaN values.
+  - Treat repeated fields as rrays.
+  - [BigQuery] Fix: in some queries there is no mode field
 - DynamoDB:
-    - Support for Unicode in queries.
-    - Safe loading of schema.
+  - Support for Unicode in queries.
+  - Safe loading of schema.
 - Rockset: better handling of query errors.
 - Google Sheets:
-    - Support for Team Drive.
-    - Friendlier error message in case of an API error and more reliable test connection.
+  - Support for Team Drive.
+  - Friendlier error message in case of an API error and more reliable test connection.
 - MySQL:
-    - Support for calling Stored Procedures and better handling of query cancellation.
-    - Switch to using `mysqlclient` (a maintained fork of `Python-MySQL`).
+  - Support for calling Stored Procedures and better handling of query cancellation.
+  - Switch to using `mysqlclient` (a maintained fork of `Python-MySQL`).
 - MongoDB: Support serializing Decimal128 values.
 - Presto: support for passwords in connection settings.
 - Amazon Athena: allow to specify custom work group.
@@ -75,15 +218,15 @@ This release was made possible by contributions from over 40 people: @aidarbek,
 ### Visualizations
 
 - Charts:
-    - Fix: legend overlapping chart on small screens.
-    - Fix: Pie chart not rendering when series doesn't exist in options.
-    - Pie Chart: add option to set direction of slices.
+  - Fix: legend overlapping chart on small screens.
+  - Fix: Pie chart not rendering when series doesn't exist in options.
+  - Pie Chart: add option to set direction of slices.
 - WordCloud: rewritten to support new options (provide frequency in query, limits), scale when resizing, handle long words and more.
 - Pivot Table: support hiding totals.
 - Counters: apply formatting to target value.
 - Maps:
-    - Ability to customize marker icon and color.
-    - Customization options for Choropleth maps.
+  - Ability to customize marker icon and color.
+  - Customization options for Choropleth maps.
 - New Visualization: Details View.
 
 ### **UX**

Dockerfile

@@ -1,19 +1,24 @@
 FROM node:12 as frontend-builder
 
+# Controls whether to build the frontend assets
+ARG skip_frontend_build
+
 WORKDIR /frontend
 COPY package.json package-lock.json /frontend/
-RUN npm install
+COPY viz-lib /frontend/viz-lib
+RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
 
 COPY client /frontend/client
 COPY webpack.config.js /frontend/
-RUN npm run build
-
+RUN if [ "x$skip_frontend_build" = "x" ] ; then npm run build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
 FROM python:3.7-slim
 
 EXPOSE 5000
 
 # Controls whether to install extra dependencies needed for all data sources.
 ARG skip_ds_deps
+# Controls whether to install dev dependencies.
+ARG skip_dev_deps
 
 RUN useradd --create-home redash
 
@@ -30,22 +35,43 @@ RUN apt-get update && \
     wget \
     # Postgres client
     libpq-dev \
+    # ODBC support:
+    g++ unixodbc-dev \
     # for SAML
     xmlsec1 \
     # Additional packages required for data sources:
     libssl-dev \
     default-libmysqlclient-dev \
     freetds-dev \
-    libsasl2-dev && \
+    libsasl2-dev \
+    unzip \
+    libsasl2-modules-gssapi-mit && \
+  # MSSQL ODBC Driver:  
+  curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add - && \
+  curl https://packages.microsoft.com/config/debian/10/prod.list > /etc/apt/sources.list.d/mssql-release.list && \
+  apt-get update && \
+  ACCEPT_EULA=Y apt-get install -y msodbcsql17 && \
   apt-get clean && \
   rm -rf /var/lib/apt/lists/*
 
+ARG databricks_odbc_driver_url=https://databricks.com/wp-content/uploads/2.6.10.1010-2/SimbaSparkODBC-2.6.10.1010-2-Debian-64bit.zip
+ADD $databricks_odbc_driver_url /tmp/simba_odbc.zip
+RUN unzip /tmp/simba_odbc.zip -d /tmp/ \
+  && dpkg -i /tmp/SimbaSparkODBC-*/*.deb \
+  && echo "[Simba]\nDriver = /opt/simba/spark/lib/64/libsparkodbc_sb64.so" >> /etc/odbcinst.ini \
+  && rm /tmp/simba_odbc.zip \
+  && rm -rf /tmp/SimbaSparkODBC*
+
 WORKDIR /app
 
+# Disalbe PIP Cache and Version Check
+ENV PIP_DISABLE_PIP_VERSION_CHECK=1
+ENV PIP_NO_CACHE_DIR=1
+
 # We first copy only the requirements file, to avoid rebuilding on every file
 # change.
 COPY requirements.txt requirements_bundles.txt requirements_dev.txt requirements_all_ds.txt ./
-RUN pip install -r requirements.txt -r requirements_dev.txt
+RUN if [ "x$skip_dev_deps" = "x" ] ; then pip install -r requirements.txt -r requirements_dev.txt; else pip install -r requirements.txt; fi
 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 . /app

Makefile

@@ -35,7 +35,7 @@ backend-unit-tests: up test_db
 	docker-compose run --rm --name tests server tests
 
 frontend-unit-tests: bundle
-	npm install
+	npm ci
 	npm run bundle
 	npm test
 

README.md

@@ -6,28 +6,77 @@
 [![Datree](https://s3.amazonaws.com/catalog.static.datree.io/datree-badge-20px.svg)](https://datree.io/?src=badge)
 [![Build Status](https://circleci.com/gh/getredash/redash.png?style=shield&circle-token=8a695aa5ec2cbfa89b48c275aea298318016f040)](https://circleci.com/gh/getredash/redash/tree/master)
 
-**_Redash_** is our take on freeing the data within our company in a way that will better fit our culture and usage patterns.
+Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users leverage Redash to explore, query, visualize, and share data from any data sources. Their work in turn enables anybody in their organization to use the data. Every day, millions of users at thousands of organizations around the world use Redash to develop insights and make data-driven decisions.
 
-Prior to **_Redash_**, we tried to use traditional BI suites and discovered a set of bloated, technically challenged and slow tools/flows. What we were looking for was a more hacker'ish way to look at data, so we built one.
+Redash features:
 
-**_Redash_** was built to allow fast and easy access to billions of records, that we process and collect using Amazon Redshift ("petabyte scale data warehouse" that "speaks" PostgreSQL).
-Today **_Redash_** has support for querying multiple databases, including: Redshift, Google BigQuery, PostgreSQL, MySQL, Graphite, Presto, Google Spreadsheets, Cloudera Impala, Hive and custom scripts.
-
-**_Redash_** consists of two parts:
-
-1. **Query Editor**: think of [JS Fiddle](https://jsfiddle.net) for SQL queries. It's your way to share data in the organization in an open way, by sharing both the dataset and the query that generated it. This way everyone can peer review not only the resulting dataset but also the process that generated it. Also it's possible to fork it and generate new datasets and reach new insights.
-2. **Visualizations and Dashboards**: once you have a dataset, you can create different visualizations out of it, and then combine several visualizations into a single dashboard. Currently Redash supports charts, pivot table, cohorts and [more](https://redash.io/help/user-guide/visualizations/visualization-types).
+1. **Browser-based**: Everything in your browser, with a shareable URL.
+2. **Ease-of-use**: Become immediately productive with data without the need to master complex software.
+3. **Query editor**: Quickly compose SQL and NoSQL queries with a schema browser and auto-complete.
+4. **Visualization and dashboards**: Create [beautiful visualizations](https://redash.io/help/user-guide/visualizations/visualization-types) with drag and drop, and combine them into a single dashboard.
+5. **Sharing**: Collaborate easily by sharing visualizations and their associated queries, enabling peer review of reports and queries.
+6. **Schedule refreshes**: Automatically update your charts and dashboards at regular intervals you define.
+7. **Alerts**: Define conditions and be alerted instantly when your data changes.
+8. **REST API**: Everything that can be done in the UI is also available through REST API.
+9. **Broad support for data sources**: Extensible data source API with native support for a long list of common databases and platforms.
 
 <img src="https://raw.githubusercontent.com/getredash/website/8e820cd02c73a8ddf4f946a9d293c54fd3fb08b9/website/_assets/images/redash-anim.gif" width="80%"/>
 
 ## Getting Started
 
-* [Setting up Redash instance](https://redash.io/help/open-source/setup) (includes links to ready made AWS/GCE images).
+* [Setting up Redash instance](https://redash.io/help/open-source/setup) (includes links to ready-made AWS/GCE images).
 * [Documentation](https://redash.io/help/).
 
 ## Supported Data Sources
 
-Redash supports more than 35 [data sources](https://redash.io/help/data-sources/supported-data-sources). 
+Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help/data-sources/supported-data-sources). It can also be extended to support more. Below is a list of built-in sources:
+
+- Amazon Athena
+- Amazon DynamoDB
+- Amazon Redshift
+- Axibase Time Series Database
+- Cassandra
+- ClickHouse
+- CockroachDB
+- CSV
+- Databricks (Apache Spark)
+- DB2 by IBM
+- Druid
+- Elasticsearch
+- Google Analytics
+- Google BigQuery
+- Google Spreadsheets
+- Graphite
+- Greenplum
+- Hive
+- Impala
+- InfluxDB
+- JIRA
+- JSON
+- Apache Kylin
+- OmniSciDB (Formerly MapD)
+- MemSQL
+- Microsoft Azure Data Warehouse / Synapse
+- Microsoft Azure SQL Database
+- Microsoft SQL Server
+- MongoDB
+- MySQL
+- Oracle
+- PostgreSQL
+- Presto
+- Prometheus
+- Python
+- Qubole
+- Rockset
+- Salesforce
+- ScyllaDB
+- Shell Scripts
+- Snowflake
+- SQLite
+- TreasureData
+- Vertica
+- Yandex AppMetrrica
+- Yandex Metrica
 
 ## Getting Help
 
@@ -37,7 +86,7 @@ Redash supports more than 35 [data sources](https://redash.io/help/data-sources/
 ## Reporting Bugs and Contributing Code
 
 * Want to report a bug or request a feature? Please open [an issue](https://github.com/getredash/redash/issues/new).
-* Want to help us build **_Redash_**? Fork the project, edit in a [dev environment](https://redash.io/help-onpremise/dev/guide.html), and make a pull request. We need all the help we can get!
+* Want to help us build **_Redash_**? Fork the project, edit in a [dev environment](https://redash.io/help-onpremise/dev/guide.html) and make a pull request. We need all the help we can get!
 
 ## Security
 

bin/bundle-extensions

@@ -6,8 +6,8 @@ from pathlib import Path
 from shutil import copy
 from collections import OrderedDict as odict
 
-from importlib_metadata import entry_points
-from importlib_resources import contents, is_resource, path
+import importlib_metadata
+import importlib_resources
 
 # Name of the subdirectory
 BUNDLE_DIRECTORY = "bundle"
@@ -17,7 +17,7 @@ logger = logging.getLogger(__name__)
 
 # Make a directory for extensions and set it as an environment variable
 # to be picked up by webpack.
-extensions_relative_path = Path('client', 'app', 'extensions')
+extensions_relative_path = Path("client", "app", "extensions")
 extensions_directory = Path(__file__).parent.parent / extensions_relative_path
 
 if not extensions_directory.exists():
@@ -25,18 +25,6 @@ if not extensions_directory.exists():
 os.environ["EXTENSIONS_DIRECTORY"] = str(extensions_relative_path)
 
 
-def resource_isdir(module, resource):
-    """Whether a given resource is a directory in the given module
-
-    https://importlib-resources.readthedocs.io/en/latest/migration.html#pkg-resources-resource-isdir
-    """
-    try:
-        return resource in contents(module) and not is_resource(module, resource)
-    except (ImportError, TypeError):
-        # module isn't a package, so can't have a subdirectory/-package
-        return False
-
-
 def entry_point_module(entry_point):
     """Returns the dotted module path for the given entry point"""
     return entry_point.pattern.match(entry_point.value).group("module")
@@ -77,26 +65,36 @@ def load_bundles():
 
     """
     bundles = odict()
-    for entry_point in entry_points().get("redash.bundles", []):
+    for entry_point in importlib_metadata.entry_points().get("redash.bundles", []):
         logger.info('Loading Redash bundle "%s".', entry_point.name)
         module = entry_point_module(entry_point)
         # Try to get a list of bundle files
-        if not resource_isdir(module, BUNDLE_DIRECTORY):
+        try:
+            bundle_dir = importlib_resources.files(module).joinpath(BUNDLE_DIRECTORY)
+        except (ImportError, TypeError):
+            # Module isn't a package, so can't have a subdirectory/-package
             logger.error(
-                'Redash bundle directory "%s" could not be found.', entry_point.name
+                'Redash bundle module "%s" could not be imported: "%s"',
+                entry_point.name,
+                module,
             )
             continue
-        with path(module, BUNDLE_DIRECTORY) as bundle_dir:
-            bundles[entry_point.name] = list(bundle_dir.rglob("*"))
-
+        if not bundle_dir.is_dir():
+            logger.error(
+                'Redash bundle directory "%s" could not be found or is not a directory: "%s"',
+                entry_point.name,
+                bundle_dir,
+            )
+            continue
+        bundles[entry_point.name] = list(bundle_dir.rglob("*"))
     return bundles
 
 
 bundles = load_bundles().items()
 if bundles:
-    print('Number of extension bundles found: {}'.format(len(bundles)))
+    print("Number of extension bundles found: {}".format(len(bundles)))
 else:
-    print('No extension bundles found.')
+    print("No extension bundles found.")
 
 for bundle_name, paths in bundles:
     # Shortcut in case not paths were found for the bundle

bin/docker-entrypoint

@@ -39,10 +39,6 @@ create_db() {
   exec /app/manage.py database create_tables
 }
 
-rq_healthcheck() {
-  exec /app/manage.py rq healthcheck
-}
-
 help() {
   echo "Redash Docker."
   echo ""
@@ -54,7 +50,6 @@ help() {
   echo "dev_worker -- start a single RQ worker with code reloading"
   echo "scheduler -- start an rq-scheduler instance"
   echo "dev_scheduler -- start an rq-scheduler instance with code reloading"
-  echo "rq_healthcheck -- runs a RQ healthcheck that verifies that all local workers are active. Useful for Docker's HEALTHCHECK mechanism."
   echo ""
   echo "shell -- open shell"
   echo "dev_server -- start Flask development server with debugger and auto reload"
@@ -96,9 +91,9 @@ case "$1" in
     shift
     dev_worker
     ;;
-  rq_healthcheck)
+  celery_healthcheck)
     shift
-    rq_healthcheck
+    echo "DEPRECATED: Celery has been replaced with RQ and now performs healthchecks autonomously as part of the 'worker' entrypoint."
     ;;
   dev_server)
     export FLASK_DEBUG=1
@@ -131,4 +126,3 @@ case "$1" in
     exec "$@"
     ;;
 esac
-

bin/pre_compile

@@ -1,18 +0,0 @@
-#!/usr/bin/env bash
-# Heroku pre_compile script
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-pushd $DIR/..
-
-# heroku requires cffi to be in requirements.txt in order for libffi to be installed.
-# https://github.com/heroku/heroku-buildpack-python/blob/master/bin/steps/cryptography
-# to avoid making it a requirement for other build systems, we'll inject it now
-# into the requirements.txt file
-
-# Remove Heroku unsupported Python packages:
-grep -v -E "^(pymssql|thrift|sasl|pyhive)" requirements_all_ds.txt >> requirements.txt
-
-# make the heroku Procfile the active one
-cp Procfile.heroku Procfile
-
-popd

client/.babelrc

@@ -1,19 +1,24 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "exclude": [
-        "@babel/plugin-transform-async-to-generator",
-        "@babel/plugin-transform-arrow-functions"
-      ],
-      "useBuiltIns": "usage"
-    }],
-    "@babel/preset-react"
+    [
+      "@babel/preset-env",
+      {
+        "exclude": ["@babel/plugin-transform-async-to-generator", "@babel/plugin-transform-arrow-functions"],
+        "corejs": "2",
+        "useBuiltIns": "usage"
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-object-assign",
-    ["babel-plugin-transform-builtin-extend", {
-      "globals": ["Error"]
-    }]
+    [
+      "babel-plugin-transform-builtin-extend",
+      {
+        "globals": ["Error"]
+      }
+    ]
   ]
 }

client/.eslintrc.js

@@ -1,17 +1,40 @@
 module.exports = {
   root: true,
-  extends: ["react-app", "plugin:compat/recommended", "prettier"],
-  plugins: ["jest", "compat", "no-only-tests"],
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "react-app",
+    "plugin:compat/recommended",
+    "prettier",
+    // Remove any typescript-eslint rules that would conflict with prettier
+    "prettier/@typescript-eslint",
+  ],
+  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint"],
   settings: {
-    "import/resolver": "webpack"
+    "import/resolver": "webpack",
   },
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
     "jsx-a11y/anchor-is-valid": "off",
-  }
+  },
+  overrides: [
+    {
+      // Only run typescript-eslint on TS files
+      files: ["*.ts", "*.tsx", ".*.ts", ".*.tsx"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+      rules: {
+        // Do not require functions (especially react components) to have explicit returns
+        "@typescript-eslint/explicit-function-return-type": "off",
+        // Do not require to type every import from a JS file to speed up development
+        "@typescript-eslint/no-explicit-any": "off",
+        // Do not complain about useless contructors in declaration files
+        "no-useless-constructor": "off",
+        "@typescript-eslint/no-useless-constructor": "error",
+      },
+    },
+  ],
 };

client/app/assets/images/illustrations/no-query-results.svg

@@ -0,0 +1,13 @@
+<svg width="274" height="199" viewBox="0 0 274 199" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M57.9111 49.2668L202.769 30" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
+<path opacity="0.5" d="M39.2842 92.7371L244.24 64.886" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
+<path opacity="0.5" d="M30 136.299L232.813 107.734" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
+<path opacity="0.5" d="M86.4541 169.149L234.166 150.596" stroke="#F2F2F2" stroke-width="59" stroke-linecap="round"/>
+<path d="M167.829 69.1349H96.458L117.605 51.9531H183.028L167.829 69.1349Z" fill="#C0D5FF"/>
+<path d="M171.133 70.4566H92.4933V85.6559V143.149H171.133V70.4566Z" fill="#E8F4FF"/>
+<path d="M190.298 48.6489L171.133 70.4566L186.993 94.9076L192.28 89.9514L206.818 73.7608L190.298 48.6489Z" fill="#E8F4FF"/>
+<path d="M171.133 70.4566V143.149L192.28 118.037V89.9514L186.993 94.9076L171.133 70.4566Z" fill="#E8F4FF"/>
+<path d="M92.4933 70.4566L81.9199 89.9514L92.4933 85.6559V70.4566Z" fill="#E8F4FF"/>
+<path d="M92.4933 70.4566H171.133M92.4933 70.4566L118.927 48.6489H190.298M92.4933 70.4566L81.9199 89.9514L92.4933 85.6559M92.4933 70.4566V85.6559M171.133 70.4566V143.149M171.133 70.4566L190.298 48.6489M171.133 70.4566L186.993 94.9076L192.28 89.9514M171.133 143.149H92.4933V85.6559M171.133 143.149L192.28 118.037V89.9514M190.298 48.6489L206.818 73.7608L192.28 89.9514" stroke="black" stroke-width="3" stroke-linejoin="round"/>
+<path d="M117.605 89.6208H147.343" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

client/app/assets/less/ant.less

@@ -1,42 +1,43 @@
-@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/empty/style/index';
-@import '~antd/lib/drawer/style/index';
-@import '~antd/lib/card/style/index';
-@import '~antd/lib/steps/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/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/tag/style/index";
+@import "~antd/lib/grid/style/index";
+@import "~antd/lib/switch/style/index";
+@import "~antd/lib/empty/style/index";
+@import "~antd/lib/drawer/style/index";
+@import "~antd/lib/card/style/index";
+@import "~antd/lib/steps/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/skeleton/style/index";
 @import "~antd/lib/tabs/style/index";
 @import "~antd/lib/notification/style/index";
 @import "~antd/lib/collapse/style/index";
 @import "~antd/lib/progress/style/index";
 @import "~antd/lib/typography/style/index";
-@import 'inc/ant-variables';
+@import "~antd/lib/descriptions/style/index";
+@import "inc/ant-variables";
 
 // Increase z-indexes to avoid conflicts with some other libraries (e.g. Plotly)
 @zindex-modal: 2000;
@@ -237,11 +238,11 @@
   &-item {
     // custom rule
     &.selected {
-      background-color: #F6F8F9;
+      background-color: #f6f8f9;
     }
 
     &.disabled {
-      background-color: fade(#F6F8F9, 40%);
+      background-color: fade(#f6f8f9, 40%);
 
       & > * {
         opacity: 0.4;
@@ -367,7 +368,7 @@
     top: auto !important;
     bottom: 8px;
 
-     // makes the icon white instead of see-through
+    // makes the icon white instead of see-through
     & svg {
       background: white;
       border-radius: 50%;
@@ -394,9 +395,20 @@
 }
 
 // overrides for checkbox
-@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox';
+@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox";
 
 .@{checkbox-prefix-cls}-wrapper + span,
 .@{checkbox-prefix-cls} + span {
   padding-right: 0;
 }
+
+// make sure Multiple select has room for icons
+.@{select-prefix-cls}-multiple {
+  &.@{select-prefix-cls}-show-arrow,
+  &.@{select-prefix-cls}-show-search,
+  &.@{select-prefix-cls}-loading {
+    .@{select-prefix-cls}-selector {
+      padding-right: 30px;
+    }
+  }
+}

client/app/assets/less/inc/alert.less

@@ -1,53 +1,49 @@
 .alert-page h3 {
-    flex-grow: 1;
+  flex-grow: 1;
 
-    input {
-        margin: -0.2em 0;
-        width: 100%;
-        min-width: 170px;
-    }
+  input {
+    margin: -0.2em 0;
+    width: 100%;
+    min-width: 170px;
+  }
 }
 
 .btn-create-alert[disabled] {
-    display: block;
-    margin-top: -20px;
+  display: block;
+  margin-top: -20px;
 }
 
 .alert-state {
-    border-bottom: 1px solid @input-border;
-    padding-bottom: 30px;
+  border-bottom: 1px solid @input-border;
+  padding-bottom: 30px;
 
-    .alert-state-indicator {
-        text-transform: uppercase;
-        font-size: 14px;
-        padding: 5px 8px;
-    }
+  .alert-state-indicator {
+    text-transform: uppercase;
+    font-size: 14px;
+    padding: 5px 8px;
+  }
 
-    .alert-last-triggered {
-        color: @headings-color;
-    }
+  .ant-form-item-explain {
+    margin-top: 10px;
+  }
+
+  .alert-last-triggered {
+    color: @headings-color;
+  }
 }
 
 .alert-query-selector {
-    min-width: 250px;
-    width: auto !important;
+  min-width: 250px;
+  width: auto !important;
 }
 
 // allow form item labels to gracefully break line
 .alert-form-item label {
-    white-space: initial;
-    padding-right: 8px;
-    line-height: 21px;
+  white-space: initial;
+  padding-right: 8px;
+  line-height: 21px;
 
-    &::after {
-        margin-right: 0 !important;
-    }
-}
-
-.alert-actions {
-    flex-grow: 1;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    margin-right: -15px;
+  &::after {
+    margin-right: 0 !important;
+  }
 }

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

@@ -1,8 +1,8 @@
 /* --------------------------------------------------------
     Colors
 -----------------------------------------------------------*/
-@lightblue:                             #03A9F4;
-@primary-color:                        #2196F3;
+@lightblue: #03a9f4;
+@primary-color: #2196f3;
 
 @redash-gray: rgba(102, 136, 153, 1);
 @redash-orange: rgba(255, 120, 100, 1);
@@ -12,41 +12,31 @@
 /* --------------------------------------------------------
     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;
-
+@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;
 
 /* --------------------------------------------------------
     Borders
 -----------------------------------------------------------*/
-@border-color-split:                   #f0f0f0;
-
+@border-color-split: #f0f0f0;
 
 /* --------------------------------------------------------
     Typograpgy
 -----------------------------------------------------------*/
-@text-color:                           #595959;
-
+@text-color: #595959;
 
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
-@input-height-base:                    35px;
-@input-color:                          #595959;
-@input-color-placeholder:               #b4b4b4;
+@input-height-base: 35px;
+@input-color: #595959;
+@input-color-placeholder: #b4b4b4;
 @border-radius-base: 2px;
-@border-color-base:                    #E8E8E8;
-
-
-/* --------------------------------------------------------
-    Button
------------------------------------------------------------*/
-@btn-danger-bg: fade(@redash-gray, 10%);
-@btn-danger-border: fade(@redash-gray, 15%);
-
+@border-color-base: #e8e8e8;
 
 /* --------------------------------------------------------
     Pagination
@@ -55,14 +45,13 @@
 @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%);
-
+@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

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

@@ -32,17 +32,6 @@ body {
   #application-root {
     padding-bottom: 15px;
   }
-
-  &.headless {
-    #application-root {
-      padding-top: 10px;
-      padding-bottom: 0;
-    }
-
-    .app-header-wrapper {
-      display: none;
-    }
-  }
 }
 
 #application-root {
@@ -89,46 +78,16 @@ strong {
   }
 }
 
-// Fixed width layout for specific pages
-@media (min-width: 768px) {
-  .settings-screen,
-  .home-page,
-  .page-dashboard-list,
-  .page-queries-list,
-  .page-alerts-list,
-  .alert-page,
-  .fixed-container {
-    .container {
-      width: 750px;
-    }
-  }
-}
-
-@media (min-width: 992px) {
-  .settings-screen,
-  .home-page,
-  .page-dashboard-list,
-  .page-queries-list,
-  .page-alerts-list,
-  .alert-page,
-  .fixed-container {
-    .container {
-      width: 970px;
-    }
-  }
-}
-
-@media (min-width: 1200px) {
-  .settings-screen,
-  .home-page,
-  .page-dashboard-list,
-  .page-queries-list,
-  .page-alerts-list,
-  .alert-page,
-  .fixed-container {
-    .container {
-      width: 1170px;
-    }
+.settings-screen,
+.home-page,
+.page-dashboard-list,
+.page-queries-list,
+.page-alerts-list,
+.alert-page,
+.admin-page-layout {
+  .container {
+    width: 100%;
+    max-width: none;
   }
 }
 
@@ -244,10 +203,6 @@ text.slicetext {
   display: flex;
   align-items: center;
 
-  h3 {
-    margin-right: 5px !important;
-  }
-
   .label {
     margin-top: 3px;
     display: inline-block;
@@ -255,11 +210,10 @@ text.slicetext {
 
   .favorites-control {
     font-size: 19px;
-    margin-right: 5px;
+    margin-right: 10px;
   }
 }
 
-.page-header-wrapper,
 .page-header--new {
   h3 {
     margin: 0.2em 0;

client/app/assets/less/inc/schema-browser.less

@@ -6,6 +6,7 @@ div.table-name {
   padding: 2px 22px 2px 10px;
   border-radius: @redash-radius;
   position: relative;
+  height: 22px;
 
   .copy-to-editor {
     display: none;
@@ -27,13 +28,19 @@ div.table-name {
 }
 
 .schema-browser {
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   border: none;
-  margin-top: 10px;
+  padding-top: 10px;
   position: relative;
   height: 100%;
 
+  .schema-loading-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
   .collapse.in {
     background: transparent;
   }
@@ -57,6 +64,14 @@ div.table-name {
     text-overflow: ellipsis;
     white-space: nowrap;
     position: relative;
+    height: 18px;
+
+    .column-type {
+      color: fade(@text-color, 80%);
+      font-size: 10px;
+      margin-left: 2px;
+      text-transform: uppercase;
+    }
 
     .copy-to-editor {
       display: none;

client/app/assets/less/inc/table.less

@@ -1,149 +1,153 @@
 .table {
-    margin-bottom: 0;
+  margin-bottom: 0;
 
-    th.sortable-column {
-        cursor: pointer;
+  th.sortable-column {
+    cursor: pointer;
+  }
+
+  &:not(.table-striped) > thead > tr > th {
+    background-color: #fafafa;
+  }
+
+  [class*="bg-"] {
+    & > tr > th {
+      color: #fff;
+      border-bottom: 0;
+      background: transparent !important;
     }
 
-    &:not(.table-striped) > thead > tr > th {
-        background-color: #FAFAFA;
+    & + tbody > tr:first-child > td {
+      border-top: 0;
     }
+  }
 
-    [class*="bg-"] {
-        & > tr > th {
-            color: #fff;
-            border-bottom: 0;
-            background: transparent !important;
-        }
+  & > thead > tr > th {
+    vertical-align: middle;
+    font-weight: 500;
+    color: #333;
+    border-width: 1px;
+    text-transform: uppercase;
+    padding: 15px 10px;
+  }
 
-        & + tbody > tr:first-child > td {
-            border-top: 0;
-        }
+  & > thead > tr,
+  & > tbody > tr,
+  & > tfoot > tr {
+    & > th,
+    & > td {
+      &:first-child {
+        padding-left: 30px;
+      }
+
+      &:last-child {
+        padding-right: 30px;
+      }
     }
+  }
 
-    & > thead > tr > th {
-        vertical-align: middle;
-        font-weight: 500;
-        color: #333;
-        border-width: 1px;
-        text-transform: uppercase;
-        padding: 15px 10px;
-    }
-    
-    & > thead > tr,
-    & > tbody > tr,
-    & > tfoot > tr {
-        
-        & > th, & > td {
-            
-            &:first-child {
-                padding-left: 30px;
-            }
-            
-            &:last-child {
-                padding-right: 30px;
-            }
-            
-        }
-    }
-    
-    tbody > tr:last-child > td {
-        padding-bottom: 20px;
-    }
+  tbody > tr:last-child > td {
+    padding-bottom: 20px;
+  }
 }
 
 .table-bordered {
-    border: 0;
+  border: 0;
 
-    & > tbody > tr {
-        & > td, & > th {
-            border-bottom: 0;
-            border-left: 0;
+  & > tbody > tr {
+    & > td,
+    & > th {
+      border-bottom: 0;
+      border-left: 0;
 
-            &:last-child {
-                border-right: 0;
-            }
-        }
+      &:last-child {
+        border-right: 0;
+      }
     }
+  }
 
-    & > thead > tr > th {
-        border-left: 0;
+  & > thead > tr > th {
+    border-left: 0;
 
-        &:last-child {
-            border-right: 0;
-        }
+    &:last-child {
+      border-right: 0;
     }
+  }
 }
 
 .table-vmiddle {
-    td {
-        vertical-align: middle !important;
-    }
+  td {
+    vertical-align: middle !important;
+  }
 }
 
 .table-responsive {
-    border: 0;
+  border: 0;
 }
 
-.tile .table  {
-    
-    & > thead:not([class*="bg-"]) > tr > th {
-        border-top: 1px solid @table-border-color;
-        
-    }
+.tile .table {
+  & > thead:not([class*="bg-"]) > tr > th {
+    border-top: 1px solid @table-border-color;
+  }
 }
 
 .table-hover > tbody > tr:hover {
-    background-color: #f4f4f4;
+  background-color: #f4f4f4;
 }
 
 .table-data {
-    tbody > tr > td {
-        padding-top: 5px !important;
-    }
+  thead > tr > th {
+    white-space: nowrap;
+  }
 
-    .btn-favourite, .btn-archive {
-        font-size: 15px;
-    }
+  tbody > tr > td {
+    padding-top: 5px !important;
+  }
+
+  .btn-favourite,
+  .btn-archive {
+    font-size: 15px;
+  }
 }
 
 .table-main-title {
-    font-weight: 500;
-    line-height: 1.7 !important;
+  font-weight: 500;
+  line-height: 1.7 !important;
 }
 
 .btn-favourite {
-    color: #d4d4d4;
-    transition: all .25s ease-in-out;
+  color: #d4d4d4;
+  transition: all 0.25s ease-in-out;
 
-    &:hover, &:focus {
-        color: @yellow-darker;
-        cursor: pointer;
-    }
+  &:hover,
+  &:focus {
+    color: @yellow-darker;
+    cursor: pointer;
+  }
 
-    .fa-star {
-        color: @yellow-darker;
-    }
+  .fa-star {
+    color: @yellow-darker;
+  }
 }
 
 .btn-archive {
-    color: #d4d4d4;
-    transition: all .25s ease-in-out;
+  color: #d4d4d4;
+  transition: all 0.25s ease-in-out;
 
-    &:hover, &:focus {
-        color: @gray-light;
-    }
+  &:hover,
+  &:focus {
+    color: @gray-light;
+  }
 
-    .fa-archive {
-        color: @gray-light;
-    }
+  .fa-archive {
+    color: @gray-light;
+  }
 }
 
 .table > thead > tr > th {
-    text-transform: none;
+  text-transform: none;
 }
 
 .table-data .label-tag {
-    display: inline-block;
-    max-width: 135px;
-  }
+  display: inline-block;
+  max-width: 135px;
+}

client/app/assets/less/main.less

@@ -7,7 +7,6 @@
 /** Load Vendors Dependencies **/
 @import "~font-awesome/less/font-awesome";
 @import "~material-design-iconic-font/dist/css/material-design-iconic-font.css";
-@import "~pace-progress/themes/blue/pace-theme-minimal.css";
 
 @import "inc/variables";
 @import "inc/mixins";

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

@@ -4,47 +4,18 @@ body.fixed-layout {
 
   #application-root {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     padding-bottom: 0;
 
     width: 100vw;
     height: 100vh;
 
-    > div {
-      flex-grow: 1;
+    .application-layout-content > div {
       display: flex;
     }
   }
 }
 
-.bottom-controller {
-  padding: 10px 15px;
-  background: #fff;
-  display: flex;
-  align-items: center;
-
-  button,
-  div,
-  span {
-    position: relative;
-  }
-
-  div:last-child {
-    flex-grow: 1;
-    text-align: right;
-  }
-
-  &:before {
-    content: "";
-    height: 50px;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    pointer-events: none;
-    left: 0;
-  }
-}
-
 .p-b-60 {
   padding-bottom: 60px !important;
 }
@@ -101,9 +72,6 @@ body.fixed-layout {
   }
 }
 
-.embed__vis {
-}
-
 .query__vis {
   table {
     border: 1px solid #f0f0f0;
@@ -122,6 +90,7 @@ body.fixed-layout {
 .embed__vis {
   display: flex;
   flex-flow: column;
+  width: 100%;
 }
 
 .embed-heading {
@@ -140,6 +109,14 @@ body.fixed-layout {
   }
 }
 
+// Don't let filters take all visualization space on query fixed layout
+.query-fixed-layout {
+  .filters-wrapper {
+    max-height: 40%;
+    overflow: auto;
+  }
+}
+
 .page-header--new {
   .query-tags,
   .query-tags__mobile {
@@ -150,25 +127,6 @@ body.fixed-layout {
   }
 }
 
-.page-header--query {
-  .page-title {
-    display: block;
-    margin-left: 15px;
-    margin-right: 15px;
-  }
-
-  .tags-control a {
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  &:hover {
-    .tags-control a {
-      opacity: 1;
-    }
-  }
-}
-
 a.label-tag {
   background: fade(@redash-gray, 15%);
   color: darken(@redash-gray, 15%);
@@ -179,10 +137,6 @@ a.label-tag {
   }
 }
 
-.schema-browser {
-  overflow-y: auto;
-}
-
 .query-page-wrapper {
   display: flex;
   flex-direction: column;
@@ -195,7 +149,6 @@ a.label-tag {
   box-shadow: rgba(102, 136, 153, 0.15) 0 4px 9px -3px;
   flex-grow: 1;
   display: flex;
-  width: 100vw;
 
   .resizable-component.react-resizable {
     .react-resizable-handle-horizontal {
@@ -275,11 +228,6 @@ a.label-tag {
     align-content: space-around;
     padding: 0;
     overflow-x: hidden;
-
-    .pivot-table-visualization-container > table,
-    .visualization-renderer > .visualization-renderer-wrapper {
-      overflow: visible;
-    }
   }
   .row {
     background: #fff;
@@ -446,12 +394,10 @@ nav .rg-bottom {
 .query-tags {
   display: inline-block;
   vertical-align: middle;
-  margin-top: -3px; // padding-top of tags
 }
 
 .query-tags__mobile {
   display: none;
-  padding: 0 0 0 23px;
 }
 
 .table--permission {
@@ -479,21 +425,6 @@ nav .rg-bottom {
 // Smaller screens
 
 @media (max-width: 880px) {
-  .page-header--query {
-    .page-title {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  .query-tags:not(.query-tags__empty) {
-    display: none;
-  }
-
-  .query-tags__mobile:not(.query-tags__empty) {
-    display: block;
-  }
-
   .btn--showhide,
   .query-actions-menu .dropdown-toggle {
     margin-bottom: 5px;
@@ -547,13 +478,6 @@ nav .rg-bottom {
     }
   }
 
-  .query-page-wrapper {
-    .container {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
   .datasource-small {
     visibility: visible;
   }
@@ -569,12 +493,3 @@ nav .rg-bottom {
     padding-right: 0;
   }
 }
-
-// Responsive fixes
-@media (max-width: 767px) {
-  .query-page-wrapper {
-    h3 {
-      font-size: 18px;
-    }
-  }
-}

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

@@ -10,6 +10,10 @@
     display: inline-block;
   }
 
+  .tag-separator {
+    margin: 4px 3px 0 0;
+  }
+
   &.disabled {
     opacity: 0.4;
   }

client/app/components/AceEditorInput.jsx

@@ -5,7 +5,7 @@ import "./AceEditorInput.less";
 
 function AceEditorInput(props, ref) {
   return (
-    <div className="ace-editor-input">
+    <div className="ace-editor-input" data-test={props["data-test"]}>
       <AceEditor
         ref={ref}
         mode="sql"

client/app/components/ApplicationArea/ApplicationHeader/FavoritesDropdown.jsx

@@ -1,79 +0,0 @@
-import React, { useState, useMemo, useCallback, useEffect } from "react";
-import PropTypes from "prop-types";
-import { isEmpty, template } from "lodash";
-
-import Dropdown from "antd/lib/dropdown";
-import Icon from "antd/lib/icon";
-import Menu from "antd/lib/menu";
-
-import HelpTrigger from "@/components/HelpTrigger";
-
-export default function FavoritesDropdown({ fetch, urlTemplate }) {
-  const [items, setItems] = useState();
-  const [loading, setLoading] = useState(false);
-
-  const noItems = isEmpty(items);
-  const urlCompiled = useMemo(() => template(urlTemplate), [urlTemplate]);
-
-  const fetchItems = useCallback(
-    (showLoadingState = true) => {
-      setLoading(showLoadingState);
-      fetch()
-        .then(({ results }) => {
-          setItems(results);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    },
-    [fetch]
-  );
-
-  // fetch items on init
-  useEffect(() => {
-    fetchItems(false);
-  }, [fetchItems]);
-
-  // fetch items on click
-  const onVisibleChange = visible => visible && fetchItems();
-
-  const menu = (
-    <Menu className="favorites-dropdown">
-      {noItems ? (
-        <Menu.Item>
-          <span className="btn-favourite m-r-5">
-            <i className="fa fa-star" />
-          </span>
-          No favorites selected yet <HelpTrigger type="FAVORITES" />
-        </Menu.Item>
-      ) : (
-        items.map(item => (
-          <Menu.Item key={item.id}>
-            <a href={urlCompiled(item)}>
-              <span className="btn-favourite m-r-5">
-                <i className="fa fa-star" />
-              </span>
-              {item.name}
-            </a>
-          </Menu.Item>
-        ))
-      )}
-    </Menu>
-  );
-
-  return (
-    <Dropdown
-      disabled={loading}
-      trigger={["click"]}
-      placement="bottomLeft"
-      onVisibleChange={onVisibleChange}
-      overlay={menu}>
-      {loading ? <Icon type="loading" spin /> : <Icon type="down" />}
-    </Dropdown>
-  );
-}
-
-FavoritesDropdown.propTypes = {
-  fetch: PropTypes.func.isRequired,
-  urlTemplate: PropTypes.string.isRequired,
-};

client/app/components/ApplicationArea/ApplicationHeader/index.jsx

@@ -1,262 +0,0 @@
-/* eslint-disable no-template-curly-in-string */
-
-import React, { useCallback, useRef } from "react";
-
-import Dropdown from "antd/lib/dropdown";
-import Button from "antd/lib/button";
-import Icon from "antd/lib/icon";
-import Menu from "antd/lib/menu";
-import Input from "antd/lib/input";
-import Tooltip from "antd/lib/tooltip";
-
-import HelpTrigger from "@/components/HelpTrigger";
-import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
-import navigateTo from "@/components/ApplicationArea/navigateTo";
-
-import { currentUser, Auth, clientConfig } from "@/services/auth";
-import { Dashboard } from "@/services/dashboard";
-import { Query } from "@/services/query";
-import frontendVersion from "@/version.json";
-import logoUrl from "@/assets/images/redash_icon_small.png";
-
-import FavoritesDropdown from "./FavoritesDropdown";
-import "./index.less";
-
-function onSearch(q) {
-  navigateTo(`queries?q=${encodeURIComponent(q)}`);
-}
-
-function DesktopNavbar() {
-  const showCreateDashboardDialog = useCallback(() => {
-    CreateDashboardDialog.showModal().result.catch(() => {}); // ignore dismiss
-  }, []);
-
-  return (
-    <div className="app-header" data-platform="desktop">
-      <div>
-        <Menu mode="horizontal" selectable={false}>
-          {currentUser.hasPermission("list_dashboards") && (
-            <Menu.Item key="dashboards" className="dropdown-menu-item">
-              <Button href="dashboards">Dashboards</Button>
-              <FavoritesDropdown fetch={Dashboard.favorites} urlTemplate="dashboard/${slug}" />
-            </Menu.Item>
-          )}
-          {currentUser.hasPermission("view_query") && (
-            <Menu.Item key="queries" className="dropdown-menu-item">
-              <Button href="queries">Queries</Button>
-              <FavoritesDropdown fetch={Query.favorites} urlTemplate="queries/${id}" />
-            </Menu.Item>
-          )}
-          {currentUser.hasPermission("list_alerts") && (
-            <Menu.Item key="alerts">
-              <Button href="alerts">Alerts</Button>
-            </Menu.Item>
-          )}
-        </Menu>
-        {currentUser.canCreate() && (
-          <Dropdown
-            trigger={["click"]}
-            overlay={
-              <Menu>
-                {currentUser.hasPermission("create_query") && (
-                  <Menu.Item key="new-query">
-                    <a href="queries/new">New Query</a>
-                  </Menu.Item>
-                )}
-                {currentUser.hasPermission("create_dashboard") && (
-                  <Menu.Item key="new-dashboard">
-                    <a onMouseUp={showCreateDashboardDialog}>New Dashboard</a>
-                  </Menu.Item>
-                )}
-                {currentUser.hasPermission("list_alerts") && (
-                  <Menu.Item key="new-alert">
-                    <a href="alerts/new">New Alert</a>
-                  </Menu.Item>
-                )}
-              </Menu>
-            }>
-            <Button type="primary" data-test="CreateButton">
-              Create <Icon type="down" />
-            </Button>
-          </Dropdown>
-        )}
-      </div>
-      <div className="header-logo">
-        <a href="./">
-          <img src={logoUrl} alt="Redash" />
-        </a>
-      </div>
-      <div>
-        <Input.Search
-          className="searchbar"
-          placeholder="Search queries..."
-          data-test="AppHeaderSearch"
-          onSearch={onSearch}
-        />
-        <Menu mode="horizontal" selectable={false}>
-          <Menu.Item key="help">
-            <HelpTrigger type="HOME" className="menu-item-button" />
-          </Menu.Item>
-          {currentUser.isAdmin && (
-            <Menu.Item key="settings">
-              <Tooltip title="Settings">
-                <Button href="data_sources" className="menu-item-button">
-                  <i className="fa fa-sliders" />
-                </Button>
-              </Tooltip>
-            </Menu.Item>
-          )}
-          <Menu.Item key="profile">
-            <Dropdown
-              overlayStyle={{ minWidth: 200 }}
-              placement="bottomRight"
-              trigger={["click"]}
-              overlay={
-                <Menu>
-                  <Menu.Item key="profile">
-                    <a href="users/me">Edit Profile</a>
-                  </Menu.Item>
-                  {currentUser.hasPermission("super_admin") && <Menu.Divider />}
-                  {currentUser.isAdmin && (
-                    <Menu.Item key="datasources">
-                      <a href="data_sources">Data Sources</a>
-                    </Menu.Item>
-                  )}
-                  {currentUser.hasPermission("list_users") && (
-                    <Menu.Item key="groups">
-                      <a href="groups">Groups</a>
-                    </Menu.Item>
-                  )}
-                  {currentUser.hasPermission("list_users") && (
-                    <Menu.Item key="users">
-                      <a href="users">Users</a>
-                    </Menu.Item>
-                  )}
-                  {currentUser.hasPermission("create_query") && (
-                    <Menu.Item key="snippets">
-                      <a href="query_snippets">Query Snippets</a>
-                    </Menu.Item>
-                  )}
-                  {currentUser.isAdmin && (
-                    <Menu.Item key="destinations">
-                      <a href="destinations">Alert Destinations</a>
-                    </Menu.Item>
-                  )}
-                  {currentUser.hasPermission("super_admin") && <Menu.Divider />}
-                  {currentUser.hasPermission("super_admin") && (
-                    <Menu.Item key="status">
-                      <a href="admin/status">System Status</a>
-                    </Menu.Item>
-                  )}
-                  <Menu.Divider />
-                  <Menu.Item key="logout" onClick={() => Auth.logout()}>
-                    Log out
-                  </Menu.Item>
-                  <Menu.Divider />
-                  <Menu.Item key="version" disabled>
-                    Version: {clientConfig.version}
-                    {frontendVersion !== clientConfig.version && ` (${frontendVersion.substring(0, 8)})`}
-                    {clientConfig.newVersionAvailable && currentUser.hasPermission("super_admin") && (
-                      <Tooltip title="Update Available" placement="rightTop">
-                        {" "}
-                        {/* eslint-disable react/jsx-no-target-blank */}
-                        <a
-                          href="https://version.redash.io/"
-                          className="update-available"
-                          target="_blank"
-                          rel="noopener">
-                          <i className="fa fa-arrow-circle-down" />
-                        </a>
-                      </Tooltip>
-                    )}
-                  </Menu.Item>
-                </Menu>
-              }>
-              <Button data-test="ProfileDropdown" className="profile-dropdown">
-                <img src={currentUser.profile_image_url} alt={currentUser.name} />
-                <span>{currentUser.name}</span>
-                <Icon type="down" />
-              </Button>
-            </Dropdown>
-          </Menu.Item>
-        </Menu>
-      </div>
-    </div>
-  );
-}
-
-function MobileNavbar() {
-  const ref = useRef();
-
-  return (
-    <div className="app-header" data-platform="mobile" ref={ref}>
-      <div className="header-logo">
-        <a href="./">
-          <img src={logoUrl} alt="Redash" />
-        </a>
-      </div>
-      <div>
-        <Dropdown
-          overlayStyle={{ minWidth: 200 }}
-          trigger={["click"]}
-          getPopupContainer={() => ref.current} // so the overlay menu stays with the fixed header when page scrolls
-          overlay={
-            <Menu mode="vertical" selectable={false}>
-              {currentUser.hasPermission("list_dashboards") && (
-                <Menu.Item key="dashboards">
-                  <a href="dashboards">Dashboards</a>
-                </Menu.Item>
-              )}
-              {currentUser.hasPermission("view_query") && (
-                <Menu.Item key="queries">
-                  <a href="queries">Queries</a>
-                </Menu.Item>
-              )}
-              {currentUser.hasPermission("list_alerts") && (
-                <Menu.Item key="alerts">
-                  <a href="alerts">Alerts</a>
-                </Menu.Item>
-              )}
-              <Menu.Item key="profile">
-                <a href="users/me">Edit Profile</a>
-              </Menu.Item>
-              <Menu.Divider />
-              {currentUser.isAdmin && (
-                <Menu.Item key="settings">
-                  <a href="data_sources">Settings</a>
-                </Menu.Item>
-              )}
-              {currentUser.hasPermission("super_admin") && (
-                <Menu.Item key="status">
-                  <a href="admin/status">System Status</a>
-                </Menu.Item>
-              )}
-              {currentUser.hasPermission("super_admin") && <Menu.Divider />}
-              <Menu.Item key="help">
-                {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <a href="https://redash.io/help" target="_blank" rel="noopener">
-                  Help
-                </a>
-              </Menu.Item>
-              <Menu.Item key="logout" onClick={() => Auth.logout()}>
-                Log out
-              </Menu.Item>
-            </Menu>
-          }>
-          <Button>
-            <Icon type="menu" />
-          </Button>
-        </Dropdown>
-      </div>
-    </div>
-  );
-}
-
-export default function ApplicationHeader() {
-  return (
-    <nav className="app-header-wrapper">
-      <DesktopNavbar />
-      <MobileNavbar />
-    </nav>
-  );
-}

client/app/components/ApplicationArea/ApplicationHeader/index.less

@@ -1,207 +0,0 @@
-@mobileBreakpoint: ~"(max-width: 767px)";
-
-nav .app-header {
-  height: 49px;
-  padding-bottom: 1px;
-  box-sizing: content-box;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  background: white;
-  box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
-
-  .darker {
-    color: #333 !important;
-
-    &:hover {
-      color: #2196f3 !important;
-    }
-  }
-
-  & > * {
-    display: flex;
-    align-items: center;
-  }
-
-  &[data-platform="mobile"] {
-    display: none;
-  }
-
-  .menu-item-button {
-    padding: 0 15px;
-    font-size: 18px;
-    .darker();
-  }
-
-  .ant-menu-root {
-    margin: 0 10px;
-    line-height: 50px;
-    height: 50px;
-    border-bottom: 0;
-  }
-
-  .ant-btn {
-    font-weight: 500;
-
-    .anticon {
-      margin-right: 0;
-    }
-  }
-
-  &[data-platform="desktop"] .ant-btn:not(.ant-btn-primary) {
-    border: 0;
-    box-shadow: none;
-    height: 40px;
-    line-height: 40px;
-    background-color: transparent; //so it doesn't interfere with click animation of adjacent buttons
-    .darker();
-  }
-
-  .ant-menu-item {
-    padding: 0;
-    height: 52px;
-    display: inline-flex;
-    align-items: center;
-
-    .anticon-down {
-      font-size: 13px !important;
-      transform: none;
-      position: relative;
-      top: 2px;
-
-      svg {
-        transition: transform 0.2s cubic-bezier(0.75, 0, 0.25, 1);
-      }
-    }
-
-    .ant-dropdown-open .anticon-down svg,
-    .anticon-down.ant-dropdown-open svg {
-      transform: rotate(180deg);
-    }
-  }
-
-  .dropdown-menu-item {
-    .ant-btn {
-      padding-right: 5px;
-      padding-left: 5px;
-      margin-right: 30px;
-      margin-left: 10px;
-      position: relative;
-      z-index: 1;
-    }
-
-    // this is a trick to get the dropdown menu to be placed at the bottom left
-    // of the menu item and not the dropdown trigger
-    .ant-dropdown-trigger {
-      position: absolute;
-      top: 5px;
-      right: 0;
-      left: 10px;
-      bottom: 5px;
-      text-align: right;
-      padding-top: 14px;
-      padding-right: 10px;
-      margin-right: 0;
-      user-select: none; // or else double clicking it causes the header logo to get selected
-      .darker();
-    }
-  }
-
-  .header-logo img {
-    height: 40px;
-    width: 40px;
-  }
-
-  .searchbar {
-    width: 185px;
-  }
-
-  .profile-dropdown {
-    display: flex;
-    align-items: center;
-
-    span {
-      max-width: 130px; // arbitrary, prevents layout mess up if username long
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    img {
-      height: 20px;
-      width: 20px;
-      border-radius: 50%;
-      margin-right: 5px;
-    }
-  }
-
-  @media (max-width: 960px) {
-    .ant-btn,
-    .menu-item-button {
-      padding: 0 10px;
-    }
-
-    .ant-menu-root {
-      margin: 0 5px;
-    }
-
-    .profile-dropdown {
-      span {
-        display: none;
-      }
-
-      img {
-        margin-right: 0;
-      }
-    }
-  }
-
-  @media (max-width: 800px) {
-    .searchbar {
-      width: 140px;
-    }
-  }
-
-  @media @mobileBreakpoint {
-    &[data-platform="desktop"] {
-      display: none;
-    }
-
-    &[data-platform="mobile"] {
-      display: flex;
-      padding: 0 15px;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      box-sizing: border-box;
-      z-index: 1000;
-    }
-  }
-}
-
-@media @mobileBreakpoint {
-  .app-header-wrapper {
-    margin-top: 59px !important; // compensate for app header fixed position
-  }
-}
-
-.update-available {
-  display: inline !important;
-
-  .fa {
-    color: #52c41a;
-    vertical-align: text-bottom;
-    font-size: 16px;
-  }
-}
-
-.ant-dropdown-menu-item .help-trigger {
-  display: inline;
-  color: #2196f3;
-  vertical-align: bottom;
-}
-
-.ant-dropdown-menu.favorites-dropdown {
-  margin-left: -10px;
-}

client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx

@@ -0,0 +1,176 @@
+import { first } from "lodash";
+import React, { useState } from "react";
+import Button from "antd/lib/button";
+import Menu from "antd/lib/menu";
+import Link from "@/components/Link";
+import HelpTrigger from "@/components/HelpTrigger";
+import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
+import { Auth, currentUser } from "@/services/auth";
+import settingsMenu from "@/services/settingsMenu";
+import logoUrl from "@/assets/images/redash_icon_small.png";
+
+import DesktopOutlinedIcon from "@ant-design/icons/DesktopOutlined";
+import CodeOutlinedIcon from "@ant-design/icons/CodeOutlined";
+import AlertOutlinedIcon from "@ant-design/icons/AlertOutlined";
+import PlusOutlinedIcon from "@ant-design/icons/PlusOutlined";
+import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
+import SettingOutlinedIcon from "@ant-design/icons/SettingOutlined";
+import MenuUnfoldOutlinedIcon from "@ant-design/icons/MenuUnfoldOutlined";
+import MenuFoldOutlinedIcon from "@ant-design/icons/MenuFoldOutlined";
+
+import VersionInfo from "./VersionInfo";
+import "./DesktopNavbar.less";
+
+function NavbarSection({ inlineCollapsed, children, ...props }) {
+  return (
+    <Menu
+      selectable={false}
+      mode={inlineCollapsed ? "inline" : "vertical"}
+      inlineCollapsed={inlineCollapsed}
+      theme="dark"
+      {...props}>
+      {children}
+    </Menu>
+  );
+}
+
+export default function DesktopNavbar() {
+  const [collapsed, setCollapsed] = useState(true);
+
+  const firstSettingsTab = first(settingsMenu.getAvailableItems());
+
+  const canCreateQuery = currentUser.hasPermission("create_query");
+  const canCreateDashboard = currentUser.hasPermission("create_dashboard");
+  const canCreateAlert = currentUser.hasPermission("list_alerts");
+
+  return (
+    <div className="desktop-navbar">
+      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-logo">
+        <div>
+          <Link href="./">
+            <img src={logoUrl} alt="Redash" />
+          </Link>
+        </div>
+      </NavbarSection>
+
+      <NavbarSection inlineCollapsed={collapsed}>
+        {currentUser.hasPermission("list_dashboards") && (
+          <Menu.Item key="dashboards">
+            <Link href="dashboards">
+              <DesktopOutlinedIcon />
+              <span>Dashboards</span>
+            </Link>
+          </Menu.Item>
+        )}
+        {currentUser.hasPermission("view_query") && (
+          <Menu.Item key="queries">
+            <Link href="queries">
+              <CodeOutlinedIcon />
+              <span>Queries</span>
+            </Link>
+          </Menu.Item>
+        )}
+        {currentUser.hasPermission("list_alerts") && (
+          <Menu.Item key="alerts">
+            <Link href="alerts">
+              <AlertOutlinedIcon />
+              <span>Alerts</span>
+            </Link>
+          </Menu.Item>
+        )}
+      </NavbarSection>
+
+      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-spacer">
+        {(canCreateQuery || canCreateDashboard || canCreateAlert) && <Menu.Divider />}
+        {(canCreateQuery || canCreateDashboard || canCreateAlert) && (
+          <Menu.SubMenu
+            key="create"
+            popupClassName="desktop-navbar-submenu"
+            title={
+              <React.Fragment>
+                <span data-test="CreateButton">
+                  <PlusOutlinedIcon />
+                  <span>Create</span>
+                </span>
+              </React.Fragment>
+            }>
+            {canCreateQuery && (
+              <Menu.Item key="new-query">
+                <Link href="queries/new" data-test="CreateQueryMenuItem">
+                  New Query
+                </Link>
+              </Menu.Item>
+            )}
+            {canCreateDashboard && (
+              <Menu.Item key="new-dashboard">
+                <a data-test="CreateDashboardMenuItem" onMouseUp={() => CreateDashboardDialog.showModal()}>
+                  New Dashboard
+                </a>
+              </Menu.Item>
+            )}
+            {canCreateAlert && (
+              <Menu.Item key="new-alert">
+                <Link data-test="CreateAlertMenuItem" href="alerts/new">
+                  New Alert
+                </Link>
+              </Menu.Item>
+            )}
+          </Menu.SubMenu>
+        )}
+      </NavbarSection>
+
+      <NavbarSection inlineCollapsed={collapsed}>
+        <Menu.Item key="help">
+          <HelpTrigger showTooltip={false} type="HOME">
+            <QuestionCircleOutlinedIcon />
+            <span>Help</span>
+          </HelpTrigger>
+        </Menu.Item>
+        {firstSettingsTab && (
+          <Menu.Item key="settings">
+            <Link href={firstSettingsTab.path} data-test="SettingsLink">
+              <SettingOutlinedIcon />
+              <span>Settings</span>
+            </Link>
+          </Menu.Item>
+        )}
+        <Menu.Divider />
+      </NavbarSection>
+
+      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-profile-menu">
+        <Menu.SubMenu
+          key="profile"
+          popupClassName="desktop-navbar-submenu"
+          title={
+            <span data-test="ProfileDropdown" className="desktop-navbar-profile-menu-title">
+              <img className="profile__image_thumb" src={currentUser.profile_image_url} alt={currentUser.name} />
+              <span>{currentUser.name}</span>
+            </span>
+          }>
+          <Menu.Item key="profile">
+            <Link href="users/me">Profile</Link>
+          </Menu.Item>
+          {currentUser.hasPermission("super_admin") && (
+            <Menu.Item key="status">
+              <Link href="admin/status">System Status</Link>
+            </Menu.Item>
+          )}
+          <Menu.Divider />
+          <Menu.Item key="logout">
+            <a data-test="LogOutButton" onClick={() => Auth.logout()}>
+              Log out
+            </a>
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item key="version" disabled className="version-info">
+            <VersionInfo />
+          </Menu.Item>
+        </Menu.SubMenu>
+      </NavbarSection>
+
+      <Button onClick={() => setCollapsed(!collapsed)} className="desktop-navbar-collapse-button">
+        {collapsed ? <MenuUnfoldOutlinedIcon /> : <MenuFoldOutlinedIcon />}
+      </Button>
+    </div>
+  );
+}

client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.less

@@ -0,0 +1,181 @@
+@backgroundColor: #001529;
+@dividerColor: rgba(255, 255, 255, 0.5);
+@textColor: rgba(255, 255, 255, 0.75);
+
+.desktop-navbar {
+  background: @backgroundColor;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &-spacer {
+    flex: 1 1 auto;
+  }
+
+  &-logo.ant-menu {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    text-align: center;
+
+    img {
+      height: 40px;
+      transition: all 270ms;
+    }
+
+    &.ant-menu-inline-collapsed {
+      img {
+        height: 20px;
+      }
+    }
+  }
+
+  .help-trigger {
+    font: inherit;
+  }
+
+  .ant-menu {
+    &:not(.ant-menu-inline-collapsed) {
+      width: 170px;
+    }
+
+    &.ant-menu-inline-collapsed > .ant-menu-submenu-title span img + span,
+    &.ant-menu-inline-collapsed > .ant-menu-item i + span {
+      display: inline-block;
+      max-width: 0;
+      opacity: 0;
+    }
+
+    .ant-menu-item-divider {
+      background: @dividerColor;
+    }
+
+    .ant-menu-item,
+    .ant-menu-submenu {
+      font-weight: 500;
+      color: @textColor;
+
+      &.ant-menu-submenu-open,
+      &.ant-menu-submenu-active,
+      &:hover,
+      &:active {
+        color: #fff;
+      }
+
+      a,
+      span,
+      .anticon {
+        color: inherit;
+      }
+    }
+
+    .ant-menu-submenu-arrow {
+      display: none;
+    }
+  }
+
+  .ant-btn.desktop-navbar-collapse-button {
+    background-color: @backgroundColor;
+    border: 0;
+    border-radius: 0;
+    color: @textColor;
+
+    &:hover,
+    &:active {
+      color: #fff;
+    }
+
+    &:after {
+      animation: 0s !important;
+    }
+  }
+
+  .desktop-navbar-profile-menu {
+    .desktop-navbar-profile-menu-title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+
+      .profile__image_thumb {
+        margin: 0;
+        vertical-align: middle;
+      }
+
+      .profile__image_thumb + span {
+        flex: 1 1 auto;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        margin-left: 10px;
+        vertical-align: middle;
+        display: inline-block;
+
+        // styles from Antd
+        opacity: 1;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+          margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+
+    &.ant-menu-inline-collapsed {
+      .ant-menu-submenu-title {
+        padding-left: 16px !important;
+        padding-right: 16px !important;
+      }
+
+      .desktop-navbar-profile-menu-title {
+        .profile__image_thumb + span {
+          opacity: 0;
+          max-width: 0;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+.desktop-navbar-submenu {
+  .ant-menu {
+    .ant-menu-item-divider {
+      background: @dividerColor;
+    }
+
+    .ant-menu-item {
+      font-weight: 500;
+      color: @textColor;
+
+      &:hover,
+      &:active {
+        color: #fff;
+      }
+
+      a,
+      span,
+      .anticon {
+        color: inherit;
+      }
+
+      .zmdi,
+      .fa {
+        margin-right: 5px;
+      }
+
+      &.version-info {
+        height: auto;
+        line-height: normal;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        a {
+          color: rgba(255, 255, 255, 0.8);
+
+          &:hover,
+          &:active {
+            color: rgba(255, 255, 255, 1);
+          }
+        }
+      }
+    }
+  }
+}

client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.jsx

@@ -0,0 +1,88 @@
+import { first } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "antd/lib/button";
+import MenuOutlinedIcon from "@ant-design/icons/MenuOutlined";
+import Dropdown from "antd/lib/dropdown";
+import Menu from "antd/lib/menu";
+import Link from "@/components/Link";
+import { Auth, currentUser } from "@/services/auth";
+import settingsMenu from "@/services/settingsMenu";
+import logoUrl from "@/assets/images/redash_icon_small.png";
+
+import "./MobileNavbar.less";
+
+export default function MobileNavbar({ getPopupContainer }) {
+  const firstSettingsTab = first(settingsMenu.getAvailableItems());
+
+  return (
+    <div className="mobile-navbar">
+      <div className="mobile-navbar-logo">
+        <Link href="./">
+          <img src={logoUrl} alt="Redash" />
+        </Link>
+      </div>
+      <div>
+        <Dropdown
+          overlayStyle={{ minWidth: 200 }}
+          trigger={["click"]}
+          getPopupContainer={getPopupContainer} // so the overlay menu stays with the fixed header when page scrolls
+          overlay={
+            <Menu mode="vertical" theme="dark" selectable={false} className="mobile-navbar-menu">
+              {currentUser.hasPermission("list_dashboards") && (
+                <Menu.Item key="dashboards">
+                  <Link href="dashboards">Dashboards</Link>
+                </Menu.Item>
+              )}
+              {currentUser.hasPermission("view_query") && (
+                <Menu.Item key="queries">
+                  <Link href="queries">Queries</Link>
+                </Menu.Item>
+              )}
+              {currentUser.hasPermission("list_alerts") && (
+                <Menu.Item key="alerts">
+                  <Link href="alerts">Alerts</Link>
+                </Menu.Item>
+              )}
+              <Menu.Item key="profile">
+                <Link href="users/me">Edit Profile</Link>
+              </Menu.Item>
+              <Menu.Divider />
+              {firstSettingsTab && (
+                <Menu.Item key="settings">
+                  <Link href={firstSettingsTab.path}>Settings</Link>
+                </Menu.Item>
+              )}
+              {currentUser.hasPermission("super_admin") && (
+                <Menu.Item key="status">
+                  <Link href="admin/status">System Status</Link>
+                </Menu.Item>
+              )}
+              {currentUser.hasPermission("super_admin") && <Menu.Divider />}
+              <Menu.Item key="help">
+                {/* eslint-disable-next-line react/jsx-no-target-blank */}
+                <Link href="https://redash.io/help" target="_blank" rel="noopener">
+                  Help
+                </Link>
+              </Menu.Item>
+              <Menu.Item key="logout" onClick={() => Auth.logout()}>
+                Log out
+              </Menu.Item>
+            </Menu>
+          }>
+          <Button className="mobile-navbar-toggle-button" ghost>
+            <MenuOutlinedIcon />
+          </Button>
+        </Dropdown>
+      </div>
+    </div>
+  );
+}
+
+MobileNavbar.propTypes = {
+  getPopupContainer: PropTypes.func,
+};
+
+MobileNavbar.defaultProps = {
+  getPopupContainer: null,
+};

client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.less

@@ -0,0 +1,35 @@
+@backgroundColor: #001529;
+@dividerColor: rgba(255, 255, 255, 0.5);
+@textColor: rgba(255, 255, 255, 0.75);
+
+.mobile-navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: @backgroundColor;
+  box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
+  padding: 0 15px;
+  height: 100%;
+
+  &-logo {
+    img {
+      height: 40px;
+      width: 40px;
+    }
+  }
+
+  .ant-btn.mobile-navbar-toggle-button {
+    padding: 0 10px;
+  }
+}
+
+.mobile-navbar-menu {
+  .ant-dropdown-menu-item {
+    font-weight: 500;
+    color: @textColor;
+  }
+
+  .ant-dropdown-menu-item-divider {
+    background: @dividerColor;
+  }
+}

client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Link from "@/components/Link";
+import { clientConfig, currentUser } from "@/services/auth";
+import frontendVersion from "@/version.json";
+
+export default function VersionInfo() {
+  return (
+    <React.Fragment>
+      <div>
+        Version: {clientConfig.version}
+        {frontendVersion !== clientConfig.version && ` (${frontendVersion.substring(0, 8)})`}
+      </div>
+      {clientConfig.newVersionAvailable && currentUser.hasPermission("super_admin") && (
+        <div className="m-t-10">
+          {/* eslint-disable react/jsx-no-target-blank */}
+          <Link href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
+            Update Available
+            <i className="fa fa-external-link m-l-5" />
+          </Link>
+        </div>
+      )}
+    </React.Fragment>
+  );
+}

client/app/components/ApplicationArea/ApplicationLayout/index.jsx

@@ -0,0 +1,39 @@
+import React, { useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import DynamicComponent from "@/components/DynamicComponent";
+import DesktopNavbar from "./DesktopNavbar";
+import MobileNavbar from "./MobileNavbar";
+
+import "./index.less";
+
+export default function ApplicationLayout({ children }) {
+  const mobileNavbarContainerRef = useRef();
+
+  const getMobileNavbarPopupContainer = useCallback(() => mobileNavbarContainerRef.current, []);
+
+  return (
+    <React.Fragment>
+      <div className="application-layout-side-menu">
+        <DynamicComponent name="ApplicationDesktopNavbar">
+          <DesktopNavbar />
+        </DynamicComponent>
+      </div>
+      <div className="application-layout-content">
+        <nav className="application-layout-top-menu" ref={mobileNavbarContainerRef}>
+          <DynamicComponent name="ApplicationMobileNavbar" getPopupContainer={getMobileNavbarPopupContainer}>
+            <MobileNavbar getPopupContainer={getMobileNavbarPopupContainer} />
+          </DynamicComponent>
+        </nav>
+        {children}
+      </div>
+    </React.Fragment>
+  );
+}
+
+ApplicationLayout.propTypes = {
+  children: PropTypes.node,
+};
+
+ApplicationLayout.defaultProps = {
+  children: null,
+};

client/app/components/ApplicationArea/ApplicationLayout/index.less

@@ -0,0 +1,81 @@
+@mobileBreakpoint: ~"(max-width: 767px)";
+
+body #application-root {
+  @topMenuHeight: 49px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  padding-bottom: 0 !important;
+  height: 100vh;
+
+  .application-layout-side-menu {
+    height: 100vh;
+    position: relative;
+
+    @media @mobileBreakpoint {
+      display: none;
+    }
+  }
+
+  .application-layout-top-menu {
+    height: @topMenuHeight;
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 1000;
+
+    @media @mobileBreakpoint {
+      display: block;
+    }
+  }
+
+  .application-layout-content {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    flex: 1 1 auto;
+    padding-bottom: 15px;
+
+    @media @mobileBreakpoint {
+      margin-top: @topMenuHeight; // compensate for app header fixed position
+    }
+  }
+}
+
+body.fixed-layout #application-root {
+  .application-layout-content {
+    padding-bottom: 0;
+  }
+}
+
+body.headless #application-root {
+  .application-layout-side-menu,
+  .application-layout-top-menu {
+    display: none !important;
+  }
+
+  .application-layout-content {
+    margin-top: 0;
+  }
+}
+
+// Fixes for proper snapshots in Percy (move vertical scroll to body level
+// to capture entire page, otherwise it wll be cut by viewport)
+@media only percy {
+  body #application-root {
+    height: auto;
+
+    .application-layout-side-menu {
+      height: auto;
+    }
+
+    .application-layout-content {
+      overflow: visible;
+    }
+  }
+}

client/app/components/ApplicationArea/ErrorMessage.jsx

@@ -2,6 +2,8 @@ import { isObject, get } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 
+import "./ErrorMessage.less";
+
 function getErrorMessageByStatus(status, defaultMessage) {
   switch (status) {
     case 404:
@@ -14,7 +16,7 @@ function getErrorMessageByStatus(status, defaultMessage) {
   }
 }
 
-export function getErrorMessage(error) {
+function getErrorMessage(error) {
   const message = "It seems like we encountered an error. Try refreshing this page or contact your administrator.";
   if (isObject(error)) {
     // HTTP errors
@@ -37,17 +39,13 @@ export default function ErrorMessage({ error }) {
   console.error(error);
 
   return (
-    <div className="fixed-container" data-test="ErrorMessage">
-      <div className="container">
-        <div className="col-md-8 col-md-push-2">
-          <div className="error-state bg-white tiled">
-            <div className="error-state__icon">
-              <i className="zmdi zmdi-alert-circle-o" />
-            </div>
-            <div className="error-state__details">
-              <h4>{getErrorMessage(error)}</h4>
-            </div>
-          </div>
+    <div className="error-message-container" data-test="ErrorMessage">
+      <div className="error-state bg-white tiled">
+        <div className="error-state__icon">
+          <i className="zmdi zmdi-alert-circle-o" />
+        </div>
+        <div className="error-state__details">
+          <h4>{getErrorMessage(error)}</h4>
         </div>
       </div>
     </div>

client/app/components/ApplicationArea/ErrorMessage.less

@@ -0,0 +1,17 @@
+.error-message-container {
+  width: 100%;
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  .error-state {
+    max-width: 1200px;
+    width: 100%;
+
+    @media (min-width: 768px) {
+      width: 65%;
+    }
+  }
+}

client/app/components/ApplicationArea/ErrorMessage.test.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { mount } from "enzyme";
+import ErrorMessage from "./ErrorMessage";
+
+const ErrorMessages = {
+  UNAUTHORIZED: "It seems like you don’t have permission to see this page.",
+  NOT_FOUND: "It seems like the page you're looking for cannot be found.",
+  GENERIC: "It seems like we encountered an error. Try refreshing this page or contact your administrator.",
+};
+
+function mockAxiosError(status = 500, response = {}) {
+  const error = new Error(`Failed with code ${status}.`);
+  error.isAxiosError = true;
+  error.response = { status, ...response };
+  return error;
+}
+
+describe("Error Message", () => {
+  const spyError = jest.spyOn(console, "error");
+
+  beforeEach(() => {
+    spyError.mockReset();
+  });
+
+  function expectErrorMessageToBe(error, errorMessage) {
+    const component = mount(<ErrorMessage error={error} />);
+
+    expect(component.find(".error-state__details h4").text()).toBe(errorMessage);
+    expect(spyError).toHaveBeenCalledWith(error);
+  }
+
+  test("displays a generic message on adhoc errors", () => {
+    expectErrorMessageToBe(new Error("technical information"), ErrorMessages.GENERIC);
+  });
+
+  test("displays a not found message on axios errors with 404 code", () => {
+    expectErrorMessageToBe(mockAxiosError(404), ErrorMessages.NOT_FOUND);
+  });
+
+  test("displays a unauthorized message on axios errors with 401 code", () => {
+    expectErrorMessageToBe(mockAxiosError(401), ErrorMessages.UNAUTHORIZED);
+  });
+
+  test("displays a unauthorized message on axios errors with 403 code", () => {
+    expectErrorMessageToBe(mockAxiosError(403), ErrorMessages.UNAUTHORIZED);
+  });
+
+  test("displays a generic message on axios errors with 500 code", () => {
+    expectErrorMessageToBe(mockAxiosError(500), ErrorMessages.GENERIC);
+  });
+});

client/app/components/ApplicationArea/Router.jsx

@@ -1,8 +1,8 @@
-import { isFunction, map, fromPairs, extend, startsWith, trimStart, trimEnd } from "lodash";
-import React, { useState, useEffect, useRef } from "react";
+import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
+import React, { useState, useEffect, useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import UniversalRouter from "universal-router";
-import ErrorBoundary from "@/components/ErrorBoundary";
+import ErrorBoundary from "@redash/viz/lib/components/ErrorBoundary";
 import location from "@/services/location";
 import url from "@/services/url";
 
@@ -14,6 +14,12 @@ function generateRouteKey() {
     .substr(2);
 }
 
+export const CurrentRouteContext = React.createContext(null);
+
+export function useCurrentRoute() {
+  return useContext(CurrentRouteContext);
+}
+
 export function stripBase(href) {
   // Resolve provided link and '' (root) relative to document's base.
   // If provided href is not related to current document (does not
@@ -30,18 +36,6 @@ export function stripBase(href) {
   return false;
 }
 
-function resolveRouteDependencies(route) {
-  return Promise.all(
-    map(route.resolve, (value, key) => {
-      value = isFunction(value) ? value(route.routeParams, route, location) : value;
-      return Promise.resolve(value).then(result => [key, result]);
-    })
-  ).then(results => {
-    route.routeParams = extend(route.routeParams, fromPairs(results));
-    return route;
-  });
-}
-
 export default function Router({ routes, onRouteChange }) {
   const [currentRoute, setCurrentRoute] = useState(null);
 
@@ -65,7 +59,7 @@ export default function Router({ routes, onRouteChange }) {
           errorHandlerRef.current.reset();
         }
 
-        const pathname = stripBase(location.path);
+        const pathname = stripBase(location.path) || "/";
 
         // This is a optimization for route resolver: if current route was already resolved
         // from this path - do nothing. It also prevents router from using outdated route in a case
@@ -86,10 +80,7 @@ export default function Router({ routes, onRouteChange }) {
         router
           .resolve({ pathname })
           .then(route => {
-            return isAbandoned || currentPathRef.current !== pathname ? null : resolveRouteDependencies(route);
-          })
-          .then(route => {
-            if (route) {
+            if (!isAbandoned && currentPathRef.current === pathname) {
               setCurrentRoute({ ...route, key: generateRouteKey() });
             }
           })
@@ -110,6 +101,7 @@ export default function Router({ routes, onRouteChange }) {
 
     return () => {
       isAbandoned = true;
+      currentPathRef.current = null;
       unlisten();
     };
   }, [routes]);
@@ -123,9 +115,11 @@ export default function Router({ routes, onRouteChange }) {
   }
 
   return (
-    <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
-      {currentRoute.render(currentRoute)}
-    </ErrorBoundary>
+    <CurrentRouteContext.Provider value={currentRoute}>
+      <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
+        {currentRoute.render(currentRoute)}
+      </ErrorBoundary>
+    </CurrentRouteContext.Provider>
   );
 }
 

client/app/components/ApplicationArea/handleNavigationIntent.js

@@ -9,7 +9,7 @@ export default function handleNavigationIntent(event) {
     }
     element = element.parentNode;
   }
-  if (!element || !element.hasAttribute("href")) {
+  if (!element || !element.hasAttribute("href") || element.hasAttribute("download")) {
     return;
   }
 

client/app/components/ApplicationArea/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import routes from "@/pages";
+import routes from "@/services/routes";
 import Router from "./Router";
 import handleNavigationIntent from "./handleNavigationIntent";
 import ErrorMessage from "./ErrorMessage";
@@ -33,5 +33,5 @@ export default function ApplicationArea() {
     return <ErrorMessage error={unhandledError} />;
   }
 
-  return <Router routes={routes} onRouteChange={setCurrentRoute} />;
+  return <Router routes={routes.items} onRouteChange={setCurrentRoute} />;
 }

client/app/components/ApplicationArea/routeWithApiKeySession.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext } from "react";
 import PropTypes from "prop-types";
-import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
+import { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
 import { Auth } from "@/services/auth";
 
 // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object

client/app/components/ApplicationArea/routeWithUserSession.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import ErrorBoundary, { ErrorBoundaryContext } from "@/components/ErrorBoundary";
+import ErrorBoundary, { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
 import { Auth } from "@/services/auth";
+import { policy } from "@/services/policy";
 import organizationStatus from "@/services/organizationStatus";
-import ApplicationHeader from "./ApplicationHeader";
+import ApplicationLayout from "./ApplicationLayout";
 import ErrorMessage from "./ErrorMessage";
 
 // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
@@ -17,7 +18,7 @@ function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
 
   useEffect(() => {
     let isCancelled = false;
-    Promise.all([Auth.requireSession(), organizationStatus.refresh()])
+    Promise.all([Auth.requireSession(), organizationStatus.refresh(), policy.refresh()])
       .then(() => {
         if (!isCancelled) {
           setIsAuthenticated(!!Auth.isAuthenticated());
@@ -47,8 +48,7 @@ function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
   }
 
   return (
-    <React.Fragment>
-      <ApplicationHeader />
+    <ApplicationLayout>
       <React.Fragment key={currentRoute.key}>
         <ErrorBoundary renderError={error => <ErrorMessage error={error} />}>
           <ErrorBoundaryContext.Consumer>
@@ -58,7 +58,7 @@ function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
           </ErrorBoundaryContext.Consumer>
         </ErrorBoundary>
       </React.Fragment>
-    </React.Fragment>
+    </ApplicationLayout>
   );
 }
 

client/app/components/BeaconConsent.jsx

@@ -3,6 +3,7 @@ import Card from "antd/lib/card";
 import Button from "antd/lib/button";
 import Typography from "antd/lib/typography";
 import { clientConfig } from "@/services/auth";
+import Link from "@/components/Link";
 import HelpTrigger from "@/components/HelpTrigger";
 import DynamicComponent from "@/components/DynamicComponent";
 import OrgSettings from "@/services/organizationSettings";
@@ -65,8 +66,8 @@ function BeaconConsent() {
           </div>
           <div className="m-t-15">
             <Text type="secondary">
-              You can change this setting anytime from the <a href="settings/organization">Organization Settings</a>{" "}
-              page.
+              You can change this setting anytime from the{" "}
+              <Link href="settings/organization">Organization Settings</Link> page.
             </Text>
           </div>
         </Card>

client/app/components/CodeBlock.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Tooltip from "antd/lib/tooltip";
+import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
 import "./CodeBlock.less";
 
 export default class CodeBlock extends React.Component {
@@ -59,7 +60,7 @@ export default class CodeBlock extends React.Component {
 
     const copyButton = (
       <Tooltip title={this.state.copied || "Copy"}>
-        <Button icon="copy" type="dashed" size="small" onClick={this.copy} />
+        <Button icon={<CopyOutlinedIcon />} type="dashed" size="small" onClick={this.copy} />
       </Tooltip>
     );
 

client/app/components/CreateSourceDialog.jsx

@@ -1,13 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { isEmpty, toUpper, includes } from "lodash";
+import { isEmpty, toUpper, includes, get } from "lodash";
 import Button from "antd/lib/button";
 import List from "antd/lib/list";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Steps from "antd/lib/steps";
-import { getErrorMessage } from "@/components/ApplicationArea/ErrorMessage";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
+import Link from "@/components/Link";
 import { PreviewCard } from "@/components/PreviewCard";
 import EmptyState from "@/components/items-list/components/EmptyState";
 import DynamicForm from "@/components/dynamic-form/DynamicForm";
@@ -67,7 +67,7 @@ class CreateSourceDialog extends React.Component {
         })
         .catch(error => {
           this.setState({ savingSource: false, currentStep: StepEnum.CONFIGURE_IT });
-          errorCallback(getErrorMessage(error.message));
+          errorCallback(get(error, "response.data.message", "Failed saving."));
         });
     }
   };
@@ -116,6 +116,15 @@ class CreateSourceDialog extends React.Component {
           )}
         </div>
         <DynamicForm id="sourceForm" fields={fields} onSubmit={this.createSource} feedbackIcons hideSubmitButton />
+        {selectedType.type === "databricks" && (
+          <small>
+            By using the Databricks Data Source you agree to the Databricks JDBC/ODBC{" "}
+            <Link href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
+              Driver Download Terms and Conditions
+            </Link>
+            .
+          </small>
+        )}
       </div>
     );
   }
@@ -124,7 +133,12 @@ class CreateSourceDialog extends React.Component {
     const { imageFolder } = this.props;
     return (
       <List.Item className="p-l-10 p-r-10 clickable" onClick={() => this.selectType(item)}>
-        <PreviewCard title={item.name} imageUrl={`${imageFolder}/${item.type}.png`} roundedImage={false}>
+        <PreviewCard
+          title={item.name}
+          imageUrl={`${imageFolder}/${item.type}.png`}
+          roundedImage={false}
+          data-test="PreviewItem"
+          data-test-type={item.type}>
           <i className="fa fa-angle-double-right" />
         </PreviewCard>
       </List.Item>
@@ -141,7 +155,7 @@ class CreateSourceDialog extends React.Component {
         footer={
           currentStep === StepEnum.SELECT_TYPE
             ? [
-                <Button key="cancel" onClick={() => dialog.dismiss()}>
+                <Button key="cancel" onClick={() => dialog.dismiss()} data-test="CreateSourceCancelButton">
                   Cancel
                 </Button>,
                 <Button key="submit" type="primary" disabled>
@@ -158,7 +172,7 @@ class CreateSourceDialog extends React.Component {
                   form="sourceForm"
                   type="primary"
                   loading={savingSource}
-                  data-test="CreateSourceButton">
+                  data-test="CreateSourceSaveButton">
                   Create
                 </Button>,
               ]

client/app/components/DialogWrapper.d.ts

@@ -0,0 +1,30 @@
+import { ModalProps } from "antd/lib/modal/Modal";
+
+export interface DialogProps<ROk, RCancel> {
+  props: ModalProps;
+  close: (result: ROk) => void;
+  dismiss: (result: RCancel) => void;
+}
+
+export type DialogWrapperChildProps<ROk, RCancel> = {
+  dialog: DialogProps<ROk, RCancel>;
+};
+
+export type DialogComponentType<ROk = void, P = {}, RCancel = void> = React.ComponentType<
+  DialogWrapperChildProps<ROk, RCancel> & P
+>;
+
+export function wrap<ROk = void, P = {}, RCancel = void>(
+  DialogComponent: DialogComponentType<ROk, P, RCancel>
+): {
+  Component: DialogComponentType<ROk, P, RCancel>;
+  showModal: (
+    props?: P
+  ) => {
+    update: (props: P) => void;
+    onClose: (handler: (result: ROk) => Promise<void>) => void;
+    onDismiss: (handler: (result: RCancel) => Promise<void>) => void;
+    close: (result: ROk) => void;
+    dismiss: (result: RCancel) => void;
+  };
+};

client/app/components/DialogWrapper.jsx

@@ -14,9 +14,10 @@ import ReactDOM from "react-dom";
 
     {
       showModal: (dialogProps) => object({
-          result: Promise,
           close: (result) => void,
           dismiss: (reason) => void,
+          onClose: (handler) => this,
+          onDismiss: (handler) => this,
         }),
       Component: React.Component, // wrapped dialog component
     }
@@ -28,15 +29,20 @@ import ReactDOM from "react-dom";
 
     const dialog = SomeWrappedDialog.showModal({ greeting: 'Hello' })
 
-  To get result of modal, use `result` property:
+  To get result of modal, use `onClose`/`onDismiss` setters:
 
-    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.
+    dialog
+      .onClose(result => { ... }) // pressed OK button or used `close` method
+      .onDismiss(result => { ... }) // pressed Cancel button or used `dismiss` method
+
+  If `onClose`/`onDismiss` returns a promise - dialog wrapper will stop handling further close/dismiss
+  requests and will show loader on a corresponding button until that promise is fulfilled (either resolved or
+  rejected). If that promise will be rejected - dialog close/dismiss will be abandoned. Use promise returned
+  from `close`/`dismiss` methods to handle errors (if needed).
 
   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.
+  will be passed to a corresponding handler. Both methods will return the promise returned from `onClose` and
+ `onDismiss` callbacks. `update` method allows to pass new properties to dialog.
 
 
   Creating a dialog
@@ -88,21 +94,6 @@ import ReactDOM from "react-dom";
           <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({
@@ -116,17 +107,12 @@ export const DialogPropType = PropTypes.shape({
   dismiss: PropTypes.func.isRequired,
 });
 
-// default export of module
-const DialogWrapper = {
-  Promise,
-  DialogPropType,
-  wrap() {},
-};
-
 function openDialog(DialogComponent, props) {
   const dialog = {
     props: {
       visible: true,
+      okButtonProps: {},
+      cancelButtonProps: {},
       onOk: () => {},
       onCancel: () => {},
       afterClose: () => {},
@@ -135,9 +121,11 @@ function openDialog(DialogComponent, props) {
     dismiss: () => {},
   };
 
-  const dialogResult = {
-    resolve: () => {},
-    reject: () => {},
+  let pendingCloseTask = null;
+
+  const handlers = {
+    onClose: () => {},
+    onDismiss: () => {},
   };
 
   const container = document.createElement("div");
@@ -155,16 +143,43 @@ function openDialog(DialogComponent, props) {
     }, 10);
   }
 
-  function closeDialog(result) {
-    dialogResult.resolve(result);
-    dialog.props.visible = false;
+  function processDialogClose(result, setAdditionalDialogProps) {
+    dialog.props.okButtonProps = { disabled: true };
+    dialog.props.cancelButtonProps = { disabled: true };
+    setAdditionalDialogProps();
     render();
+
+    return Promise.resolve(result)
+      .then(() => {
+        dialog.props.visible = false;
+      })
+      .finally(() => {
+        dialog.props.okButtonProps = {};
+        dialog.props.cancelButtonProps = {};
+        render();
+      });
   }
 
-  function dismissDialog(reason) {
-    dialogResult.reject(reason);
-    dialog.props.visible = false;
-    render();
+  function closeDialog(result) {
+    if (!pendingCloseTask) {
+      pendingCloseTask = processDialogClose(handlers.onClose(result), () => {
+        dialog.props.okButtonProps.loading = true;
+      }).finally(() => {
+        pendingCloseTask = null;
+      });
+    }
+    return pendingCloseTask;
+  }
+
+  function dismissDialog(result) {
+    if (!pendingCloseTask) {
+      pendingCloseTask = processDialogClose(handlers.onDismiss(result), () => {
+        dialog.props.cancelButtonProps.loading = true;
+      }).finally(() => {
+        pendingCloseTask = null;
+      });
+    }
+    return pendingCloseTask;
   }
 
   dialog.props.onOk = closeDialog;
@@ -180,20 +195,22 @@ function openDialog(DialogComponent, props) {
       props = { ...props, ...newProps };
       render();
     },
-    result: new DialogWrapper.Promise((resolve, reject) => {
-      dialogResult.resolve = resolve;
-      dialogResult.reject = reject;
-    }),
+    onClose: handler => {
+      if (isFunction(handler)) {
+        handlers.onClose = handler;
+      }
+      return result;
+    },
+    onDismiss: handler => {
+      if (isFunction(handler)) {
+        handlers.onDismiss = handler;
+      }
+      return result;
+    },
   };
 
   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;
 }
 
@@ -204,6 +221,7 @@ export function wrap(DialogComponent) {
   };
 }
 
-DialogWrapper.wrap = wrap;
-
-export default DialogWrapper;
+export default {
+  DialogPropType,
+  wrap,
+};

client/app/components/EditInPlace.jsx

@@ -11,8 +11,10 @@ export default class EditInPlace extends React.Component {
     placeholder: PropTypes.string,
     value: PropTypes.string,
     onDone: PropTypes.func.isRequired,
+    onStopEditing: PropTypes.func,
     multiline: PropTypes.bool,
     editorProps: PropTypes.object,
+    defaultEditing: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -20,21 +22,22 @@ export default class EditInPlace extends React.Component {
     isEditable: true,
     placeholder: "",
     value: "",
+    onStopEditing: () => {},
     multiline: false,
     editorProps: {},
+    defaultEditing: false,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      editing: false,
+      editing: props.defaultEditing,
     };
-    this.inputRef = React.createRef();
   }
 
   componentDidUpdate(_, prevState) {
-    if (this.state.editing && !prevState.editing) {
-      this.inputRef.current.focus();
+    if (!this.state.editing && prevState.editing) {
+      this.props.onStopEditing();
     }
   }
 
@@ -62,25 +65,30 @@ export default class EditInPlace extends React.Component {
     }
   };
 
-  renderNormal = () => (
-    <span
-      role="presentation"
-      onFocus={this.startEditing}
-      onClick={this.startEditing}
-      className={this.props.isEditable ? "editable" : ""}>
-      {this.props.value || this.props.placeholder}
-    </span>
-  );
+  renderNormal = () =>
+    this.props.value ? (
+      <span
+        role="presentation"
+        onFocus={this.startEditing}
+        onClick={this.startEditing}
+        className={this.props.isEditable ? "editable" : ""}>
+        {this.props.value}
+      </span>
+    ) : (
+      <a className="clickable" onClick={this.startEditing}>
+        {this.props.placeholder}
+      </a>
+    );
 
   renderEdit = () => {
     const { multiline, value, editorProps } = this.props;
     const InputComponent = multiline ? Input.TextArea : Input;
     return (
       <InputComponent
-        ref={this.inputRef}
         defaultValue={value}
         onBlur={e => this.stopEditing(e.target.value)}
         onKeyDown={this.handleKeyDown}
+        autoFocus
         {...editorProps}
       />
     );

client/app/components/EditParameterSettingsDialog.jsx

@@ -100,7 +100,7 @@ function EditParameterSettingsDialog(props) {
     return true;
   }
 
-  function onConfirm(e) {
+  function onConfirm() {
     // update title to default
     if (!param.title) {
       // forced to do this cause param won't update in time for save
@@ -109,8 +109,6 @@ function EditParameterSettingsDialog(props) {
     }
 
     props.dialog.close(param);
-
-    e.preventDefault(); // stops form redirect
   }
 
   return (
@@ -132,7 +130,7 @@ function EditParameterSettingsDialog(props) {
           {isNew ? "Add Parameter" : "OK"}
         </Button>,
       ]}>
-      <Form layout="horizontal" onSubmit={onConfirm} id="paramForm">
+      <Form layout="horizontal" onFinish={onConfirm} id="paramForm">
         {isNew && (
           <NameInput
             name={param.name}

client/app/components/EditVisualizationButton/QueryControlDropdown.jsx

@@ -3,7 +3,12 @@ import PropTypes from "prop-types";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Button from "antd/lib/button";
-import Icon from "antd/lib/icon";
+
+import PlusCircleFilledIcon from "@ant-design/icons/PlusCircleFilled";
+import ShareAltOutlinedIcon from "@ant-design/icons/ShareAltOutlined";
+import FileOutlinedIcon from "@ant-design/icons/FileOutlined";
+import FileExcelOutlinedIcon from "@ant-design/icons/FileExcelOutlined";
+import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
 
 import QueryResultsLink from "./QueryResultsLink";
 
@@ -13,14 +18,14 @@ export default function QueryControlDropdown(props) {
       {!props.query.isNew() && (!props.query.is_draft || !props.query.is_archived) && (
         <Menu.Item>
           <a target="_self" onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
-            <Icon type="plus-circle" theme="filled" /> Add to Dashboard
+            <PlusCircleFilledIcon /> Add to Dashboard
           </a>
         </Menu.Item>
       )}
       {!props.query.isNew() && (
         <Menu.Item>
           <a onClick={() => props.showEmbedDialog(props.query, props.selectedTab)} data-test="ShowEmbedDialogButton">
-            <Icon type="share-alt" /> Embed Elsewhere
+            <ShareAltOutlinedIcon /> Embed Elsewhere
           </a>
         </Menu.Item>
       )}
@@ -32,7 +37,7 @@ export default function QueryControlDropdown(props) {
           queryResult={props.queryResult}
           embed={props.embed}
           apiKey={props.apiKey}>
-          <Icon type="file" /> Download as CSV File
+          <FileOutlinedIcon /> Download as CSV File
         </QueryResultsLink>
       </Menu.Item>
       <Menu.Item>
@@ -43,7 +48,7 @@ export default function QueryControlDropdown(props) {
           queryResult={props.queryResult}
           embed={props.embed}
           apiKey={props.apiKey}>
-          <Icon type="file" /> Download as TSV File
+          <FileOutlinedIcon /> Download as TSV File
         </QueryResultsLink>
       </Menu.Item>
       <Menu.Item>
@@ -54,7 +59,7 @@ export default function QueryControlDropdown(props) {
           queryResult={props.queryResult}
           embed={props.embed}
           apiKey={props.apiKey}>
-          <Icon type="file-excel" /> Download as Excel File
+          <FileExcelOutlinedIcon /> Download as Excel File
         </QueryResultsLink>
       </Menu.Item>
     </Menu>
@@ -63,7 +68,7 @@ export default function QueryControlDropdown(props) {
   return (
     <Dropdown trigger={["click"]} overlay={menu} overlayClassName="query-control-dropdown-overlay">
       <Button data-test="QueryControlDropdownButton">
-        <Icon type="ellipsis" rotate={90} />
+        <EllipsisOutlinedIcon rotate={90} />
       </Button>
     </Dropdown>
   );

client/app/components/EditVisualizationButton/QueryResultsLink.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import Link from "@/components/Link";
 
 export default function QueryResultsLink(props) {
   let href = "";
@@ -17,9 +18,9 @@ export default function QueryResultsLink(props) {
   }
 
   return (
-    <a target="_blank" rel="noopener noreferrer" disabled={props.disabled} href={href} download>
+    <Link target="_blank" rel="noopener noreferrer" disabled={props.disabled} href={href} download>
       {props.children}
-    </a>
+    </Link>
   );
 }
 

client/app/components/EditVisualizationButton/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
-import Icon from "antd/lib/icon";
+import FormOutlinedIcon from "@ant-design/icons/FormOutlined";
 
 export default function EditVisualizationButton(props) {
   return (
@@ -9,7 +9,7 @@ export default function EditVisualizationButton(props) {
       data-test="EditVisualization"
       className="edit-visualization"
       onClick={() => props.openVisualizationEditor(props.selectedTab)}>
-      <Icon type="form" />
+      <FormOutlinedIcon />
       <span className="hidden-xs hidden-s hidden-m">Edit Visualization</span>
     </Button>
   );

client/app/components/Filters.jsx

@@ -74,7 +74,7 @@ function Filters({ filters, onChange }) {
   onChange = createFilterChangeHandler(filters, onChange);
 
   return (
-    <div className="filters-wrapper">
+    <div className="filters-wrapper" data-test="Filters">
       <div className="container bg-white">
         <div className="row">
           {map(filters, filter => {
@@ -83,7 +83,10 @@ function Filters({ filters, onChange }) {
             ));
 
             return (
-              <div key={filter.name} className="col-sm-6 p-l-0 filter-container">
+              <div
+                key={filter.name}
+                className="col-sm-6 p-l-0 filter-container"
+                data-test={`FilterName-${filter.name}`}>
                 <label>{filter.friendlyName}</label>
                 {options.length === 0 && <Select className="w-100" disabled value="No values" />}
                 {options.length > 0 && (
@@ -102,14 +105,17 @@ function Filters({ filters, onChange }) {
                     allowClear={filter.multiple}
                     optionFilterProp="children"
                     showSearch
+                    maxTagCount={3}
+                    maxTagTextLength={10}
+                    maxTagPlaceholder={num => `+${num.length} more`}
                     onChange={values => onChange(filter, values)}>
                     {!filter.multiple && options}
                     {filter.multiple && [
-                      <Select.Option key={NONE_VALUES}>
+                      <Select.Option key={NONE_VALUES} data-test="ClearOption">
                         <i className="fa fa-square-o m-r-5" />
                         Clear
                       </Select.Option>,
-                      <Select.Option key={ALL_VALUES}>
+                      <Select.Option key={ALL_VALUES} data-test="SelectAllOption">
                         <i className="fa fa-check-square-o m-r-5" />
                         Select All
                       </Select.Option>,

client/app/components/HelpTrigger.jsx

@@ -1,10 +1,11 @@
-import { startsWith } from "lodash";
+import { startsWith, get } from "lodash";
 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 Icon from "antd/lib/icon";
+import Link from "@/components/Link";
+import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import BigMessage from "@/components/BigMessage";
 import DynamicComponent from "@/components/DynamicComponent";
 
@@ -42,13 +43,18 @@ export const TYPES = {
 
 export default class HelpTrigger extends React.Component {
   static propTypes = {
-    type: PropTypes.oneOf(Object.keys(TYPES)).isRequired,
+    type: PropTypes.oneOf(Object.keys(TYPES)),
+    href: PropTypes.string,
+    title: PropTypes.node,
     className: PropTypes.string,
     showTooltip: PropTypes.bool,
     children: PropTypes.node,
   };
 
   static defaultProps = {
+    type: null,
+    href: null,
+    title: null,
     className: null,
     showTooltip: true,
     children: <i className="fa fa-question-circle" />,
@@ -102,13 +108,15 @@ export default class HelpTrigger extends React.Component {
     this.setState({ currentUrl });
   };
 
+  getUrl = () => {
+    const helpTriggerType = get(TYPES, this.props.type);
+    return helpTriggerType ? DOMAIN + HELP_PATH + helpTriggerType[0] : this.props.href;
+  };
+
   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);
+    setTimeout(() => this.loadIframe(this.getUrl()), 300);
   };
 
   closeDrawer = event => {
@@ -120,16 +128,32 @@ export default class HelpTrigger extends React.Component {
   };
 
   render() {
-    const [, tooltip] = TYPES[this.props.type];
+    const tooltip = get(TYPES, `${this.props.type}[1]`, this.props.title);
     const className = cx("help-trigger", this.props.className);
     const url = this.state.currentUrl;
 
+    const isAllowedDomain = startsWith(url || this.getUrl(), DOMAIN);
+
     return (
       <React.Fragment>
-        <Tooltip title={this.props.showTooltip ? tooltip : null}>
-          <a onClick={this.openDrawer} className={className}>
-            {this.props.children}
-          </a>
+        <Tooltip
+          title={
+            this.props.showTooltip ? (
+              <>
+                {tooltip}
+                {!isAllowedDomain && <i className="fa fa-external-link" style={{ marginLeft: 5 }} />}
+              </>
+            ) : null
+          }>
+          {isAllowedDomain ? (
+            <a onClick={this.openDrawer} className={className}>
+              {this.props.children}
+            </a>
+          ) : (
+            <Link href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
+              {this.props.children}
+            </Link>
+          )}
         </Tooltip>
         <Drawer
           placement="right"
@@ -144,14 +168,14 @@ export default class HelpTrigger extends React.Component {
               {url && (
                 <Tooltip title="Open page in a new window" placement="left">
                   {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                  <a href={url} target="_blank">
+                  <Link href={url} target="_blank">
                     <i className="fa fa-external-link" />
-                  </a>
+                  </Link>
                 </Tooltip>
               )}
               <Tooltip title="Close" placement="bottom">
-                <a href="#" onClick={this.closeDrawer}>
-                  <Icon type="close" />
+                <a onClick={this.closeDrawer}>
+                  <CloseOutlinedIcon />
                 </a>
               </Tooltip>
             </div>
@@ -178,9 +202,9 @@ export default class HelpTrigger extends React.Component {
                 Something went wrong.
                 <br />
                 {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <a href={this.state.error} target="_blank" rel="noopener">
+                <Link href={this.state.error} target="_blank" rel="noopener">
                   Click here
-                </a>{" "}
+                </Link>{" "}
                 to open the page in a new window.
               </BigMessage>
             )}

client/app/components/HelpTrigger.less

@@ -1,4 +1,4 @@
-@import '~antd/lib/drawer/style/drawer';
+@import "~antd/lib/drawer/style/drawer";
 
 @help-doc-bg: #f7f7f7; // according to https://github.com/getredash/website/blob/13daff2d8b570956565f482236f6245042e8477f/src/scss/_components/_variables.scss#L15
 
@@ -34,7 +34,7 @@
     top: 13px;
     right: 13px;
     border-radius: 3px;
-    background: rgba(@help-doc-bg, .75); // makes it dissolve over help doc bg
+    background: rgba(@help-doc-bg, 0.75); // makes it dissolve over help doc bg
     border: 2px solid @help-doc-bg;
     display: flex;
 
@@ -47,6 +47,7 @@
       color: @text-color-secondary;
       transition: color @animation-duration-slow;
       position: relative;
+      cursor: pointer;
 
       &:hover {
         color: @icon-color-hover;
@@ -65,13 +66,13 @@
 
       // divider
       &:not(:first-child):before {
-        content: '';
+        content: "";
         position: absolute;
         width: 1px;
         height: 9px;
         left: 0;
         top: 9px;
-        border-left: 1px dotted rgba(0,0,0,.12);
+        border-left: 1px dotted rgba(0, 0, 0, 0.12);
       }
     }
   }

client/app/components/InputWithCopy.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Input from "antd/lib/input";
-import Icon from "antd/lib/icon";
+import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
 import Tooltip from "antd/lib/tooltip";
 
 export default class InputWithCopy extends React.Component {
@@ -42,7 +42,7 @@ export default class InputWithCopy extends React.Component {
   render() {
     const copyButton = (
       <Tooltip title={this.state.copied || "Copy"}>
-        <Icon type="copy" style={{ cursor: "pointer" }} onClick={this.copy} />
+        <CopyOutlinedIcon style={{ cursor: "pointer" }} onClick={this.copy} />
       </Tooltip>
     );
 

client/app/components/Link.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Button from "antd/lib/button";
+
+function DefaultLinkComponent(props) {
+  return <a {...props} />; // eslint-disable-line jsx-a11y/anchor-has-content
+}
+
+function Link(props) {
+  return <Link.Component {...props} />;
+}
+
+Link.Component = DefaultLinkComponent;
+
+function DefaultButtonLinkComponent(props) {
+  return <Button {...props} />;
+}
+
+function ButtonLink(props) {
+  return <ButtonLink.Component {...props} />;
+}
+
+ButtonLink.Component = DefaultButtonLinkComponent;
+
+Link.Button = ButtonLink;
+
+export default Link;

client/app/components/NoTaggedObjectsFound.jsx

@@ -7,7 +7,7 @@ export default function NoTaggedObjectsFound({ objectType, tags }) {
   return (
     <BigMessage icon="fa-tags">
       No {objectType} found tagged with&nbsp;
-      <TagsControl className="inline-tags-control" tags={Array.from(tags)} />.
+      <TagsControl className="inline-tags-control" tags={Array.from(tags)} tagSeparator={"+"} />.
     </BigMessage>
   );
 }

client/app/components/PageHeader.jsx

@@ -1,16 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-export default 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,
-};

client/app/components/PageHeader/index.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import "./index.less";
+
+export default function PageHeader({ title, actions }) {
+  return (
+    <div className="page-header-wrapper">
+      <h3>{title}</h3>
+      {actions && <div className="page-header-actions">{actions}</div>}
+    </div>
+  );
+}
+
+PageHeader.propTypes = {
+  title: PropTypes.string,
+  actions: PropTypes.node,
+};
+
+PageHeader.defaultProps = {
+  title: "",
+  actions: null,
+};

client/app/components/PageHeader/index.less

@@ -0,0 +1,20 @@
+.page-header-wrapper {
+  margin: 15px 0 10px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: stretch;
+
+  h3 {
+    margin: 0;
+    line-height: 1.3;
+    font-weight: 500;
+    flex: 1 1 auto;
+  }
+
+  .page-header-actions {
+    flex: 0 0 auto;
+    padding: 0 0 0 15px;
+  }
+}

client/app/components/Paginator.jsx

@@ -2,24 +2,38 @@ import React from "react";
 import PropTypes from "prop-types";
 import Pagination from "antd/lib/pagination";
 
-export default function Paginator({ page, itemsPerPage, totalCount, onChange }) {
-  if (totalCount <= itemsPerPage) {
+const MIN_ITEMS_PER_PAGE = 5;
+
+export default function Paginator({ page, showPageSizeSelect, pageSize, onPageSizeChange, totalCount, onChange }) {
+  if (totalCount <= (showPageSizeSelect ? MIN_ITEMS_PER_PAGE : pageSize)) {
     return null;
   }
   return (
     <div className="paginator-container">
-      <Pagination defaultCurrent={page} defaultPageSize={itemsPerPage} total={totalCount} onChange={onChange} />
+      <Pagination
+        showSizeChanger={showPageSizeSelect}
+        pageSizeOptions={["5", "10", "20", "50", "100"]}
+        onShowSizeChange={(_, size) => onPageSizeChange(size)}
+        defaultCurrent={page}
+        pageSize={pageSize}
+        total={totalCount}
+        onChange={onChange}
+      />
     </div>
   );
 }
 
 Paginator.propTypes = {
   page: PropTypes.number.isRequired,
-  itemsPerPage: PropTypes.number.isRequired,
+  showPageSizeSelect: PropTypes.bool,
+  pageSize: PropTypes.number.isRequired,
   totalCount: PropTypes.number.isRequired,
+  onPageSizeChange: PropTypes.func,
   onChange: PropTypes.func,
 };
 
 Paginator.defaultProps = {
+  showPageSizeSelect: false,
   onChange: () => {},
+  onPageSizeChange: () => {},
 };

client/app/components/ParameterMappingInput.jsx

@@ -8,7 +8,6 @@ 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";
@@ -19,6 +18,11 @@ import { ParameterMappingType } from "@/services/widget";
 import { Parameter, cloneParameter } from "@/services/parameters";
 import HelpTrigger from "@/components/HelpTrigger";
 
+import QuestionCircleFilledIcon from "@ant-design/icons/QuestionCircleFilled";
+import EditOutlinedIcon from "@ant-design/icons/EditOutlined";
+import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
+import CheckOutlinedIcon from "@ant-design/icons/CheckOutlined";
+
 import "./ParameterMappingInput.less";
 
 const { Option } = Select;
@@ -181,7 +185,7 @@ export class ParameterMappingInput extends React.Component {
           Existing dashboard parameter{" "}
           {noExisting ? (
             <Tooltip title="There are no dashboard parameters corresponding to this data type">
-              <Icon type="question-circle" theme="filled" />
+              <QuestionCircleFilledIcon />
             </Tooltip>
           ) : null}
         </Radio>
@@ -355,7 +359,7 @@ class MappingEditor extends React.Component {
         visible={visible}
         onVisibleChange={this.onVisibleChange}>
         <Button size="small" type="dashed" data-test={`EditParamMappingButon-${mapping.param.name}`}>
-          <Icon type="edit" />
+          <EditOutlinedIcon />
         </Button>
       </Popover>
     );
@@ -434,10 +438,10 @@ class TitleEditor extends React.Component {
           autoFocus
         />
         <Button size="small" type="dashed" onClick={this.hide}>
-          <Icon type="close" />
+          <CloseOutlinedIcon />
         </Button>
         <Button size="small" type="dashed" onClick={this.save}>
-          <Icon type="check" />
+          <CheckOutlinedIcon />
         </Button>
       </div>
     );
@@ -460,7 +464,7 @@ class TitleEditor extends React.Component {
         visible={this.state.showPopup}
         onVisibleChange={this.onPopupVisibleChange}>
         <Button size="small" type="dashed">
-          <Icon type="edit" />
+          <EditOutlinedIcon />
         </Button>
       </Popover>
     );

client/app/components/ParameterValueInput.jsx

@@ -1,4 +1,4 @@
-import { isEqual } from "lodash";
+import { isEqual, isEmpty } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import Select from "antd/lib/select";
@@ -103,14 +103,13 @@ class ParameterValueInput extends React.Component {
         className={this.props.className}
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
         optionFilterProp="children"
-        disabled={enumOptionsArray.length === 0}
         value={normalize(value)}
         onChange={this.onSelect}
         dropdownMatchSelectWidth={false}
         showSearch
         showArrow
         style={{ minWidth: 60 }}
-        notFoundContent={null}
+        notFoundContent={isEmpty(enumOptionsArray) ? "No options available" : null}
         {...multipleValuesProps}>
         {enumOptionsArray.map(option => (
           <Option key={option} value={option}>

client/app/components/ParameterValueInput.less

@@ -1,4 +1,4 @@
-@import '~antd/lib/input-number/style/index'; // for ant @vars
+@import "~antd/lib/input-number/style/index"; // for ant @vars
 
 @input-dirty: #fffce1;
 
@@ -17,9 +17,10 @@
   }
 
   &[data-dirty] {
-    .@{ant-prefix}-input, // covers also ant date component
+    .@{ant-prefix}-input,
     .@{ant-prefix}-input-number,
-    .@{ant-prefix}-select-selection {
+    .@{ant-prefix}-select-selector,
+    .@{ant-prefix}-picker {
       background-color: @input-dirty;
     }
   }

client/app/components/Parameters.jsx

@@ -1,7 +1,7 @@
 import { size, filter, forEach, extend } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
-import { SortableContainer, SortableElement, DragHandle } from "@/components/sortable";
+import { SortableContainer, SortableElement, DragHandle } from "@redash/viz/lib/components/sortable";
 import location from "@/services/location";
 import { Parameter, createParameter } from "@/services/parameters";
 import ParameterApplyButton from "@/components/ParameterApplyButton";
@@ -106,16 +106,14 @@ export default class Parameters extends React.Component {
 
   showParameterSettings = (parameter, index) => {
     const { onParametersEdit } = this.props;
-    EditParameterSettingsDialog.showModal({ parameter })
-      .result.then(updated => {
-        this.setState(({ parameters }) => {
-          const updatedParameter = extend(parameter, updated);
-          parameters[index] = createParameter(updatedParameter, updatedParameter.parentQueryId);
-          onParametersEdit();
-          return { parameters };
-        });
-      })
-      .catch(() => {}); // ignore dismiss
+    EditParameterSettingsDialog.showModal({ parameter }).onClose(updated => {
+      this.setState(({ parameters }) => {
+        const updatedParameter = extend(parameter, updated);
+        parameters[index] = createParameter(updatedParameter, updatedParameter.parentQueryId);
+        onParametersEdit();
+        return { parameters };
+      });
+    });
   };
 
   renderParameter(param, index) {

client/app/components/Parameters.less

@@ -1,4 +1,4 @@
-@import '../assets/less/ant';
+@import "../assets/less/ant";
 
 .parameter-block {
   display: inline-block;
@@ -20,7 +20,8 @@
   }
 
   &.parameter-dragged {
-    box-shadow:  0 4px 9px -3px rgba(102, 136, 153, 0.15);
+    z-index: 2;
+    box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
   }
 }
 
@@ -60,7 +61,7 @@
       bottom: -36px;
       left: -15px;
       border-radius: 2px;
-      z-index: 1;
+      z-index: 2;
       transition: opacity 150ms ease-out;
       box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
       background-color: #ffffff;
@@ -88,7 +89,9 @@
         height: 27px;
       }
 
-      &:hover, &:focus, &:active {
+      &:hover,
+      &:focus,
+      &:active {
         background-color: #eef7fe;
       }
 

client/app/components/PreviewCard.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
+import Link from "@/components/Link";
 
 // PreviewCard
 
@@ -42,7 +43,7 @@ PreviewCard.defaultProps = {
 // UserPreviewCard
 
 export function UserPreviewCard({ user, withLink, children, ...props }) {
-  const title = withLink ? <a href={"users/" + user.id}>{user.name}</a> : user.name;
+  const title = withLink ? <Link href={"users/" + user.id}>{user.name}</Link> : user.name;
   return (
     <PreviewCard {...props} imageUrl={user.profile_image_url} title={title} body={user.email}>
       {children}
@@ -68,8 +69,8 @@ UserPreviewCard.defaultProps = {
 // 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;
+  const imageUrl = `static/images/db-logos/${dataSource.type}.png`;
+  const title = withLink ? <Link href={"data_sources/" + dataSource.id}>{dataSource.name}</Link> : dataSource.name;
   return (
     <PreviewCard {...props} imageUrl={imageUrl} title={title}>
       {children}

client/app/components/QueryBasedParameterInput.jsx

@@ -1,4 +1,4 @@
-import { find, isArray, map, intersection, isEqual } from "lodash";
+import { find, isArray, get, first, map, intersection, isEqual, isEmpty } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import Select from "antd/lib/select";
@@ -56,7 +56,7 @@ export default class QueryBasedParameterInput extends React.Component {
       return validValues;
     }
     const found = find(options, option => option.value === this.props.value) !== undefined;
-    value = found ? value : options[0].value;
+    value = found ? value : get(first(options), "value");
     this.setState({ value });
     return value;
   }
@@ -85,7 +85,7 @@ export default class QueryBasedParameterInput extends React.Component {
       <span>
         <Select
           className={className}
-          disabled={loading || options.length === 0}
+          disabled={loading}
           loading={loading}
           mode={mode}
           value={this.state.value}
@@ -94,7 +94,7 @@ export default class QueryBasedParameterInput extends React.Component {
           optionFilterProp="children"
           showSearch
           showArrow
-          notFoundContent={null}
+          notFoundContent={isEmpty(options) ? "No options available" : null}
           {...otherProps}>
           {options.map(option => (
             <Option value={option.value} key={option.value}>

client/app/components/QueryLink.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { VisualizationType } from "@/visualizations/prop-types";
-import VisualizationName from "@/visualizations/components/VisualizationName";
+import { VisualizationType } from "@redash/viz/lib";
+import Link from "@/components/Link";
+import VisualizationName from "@/components/visualizations/VisualizationName";
 
 import "./QueryLink.less";
 
@@ -21,9 +22,9 @@ function QueryLink({ query, visualization, readOnly }) {
   };
 
   return (
-    <a href={readOnly ? null : getUrl()} className="query-link">
+    <Link href={readOnly ? null : getUrl()} className="query-link">
       <VisualizationName visualization={visualization} /> <span>{query.name}</span>
-    </a>
+    </Link>
   );
 }
 

client/app/components/QuerySelector.jsx

@@ -11,6 +11,10 @@ import useSearchResults from "@/lib/hooks/useSearchResults";
 
 const { Option } = Select;
 function search(term) {
+  if (term === null) {
+    return Promise.resolve(null);
+  }
+
   // get recent
   if (!term) {
     return Query.recent().then(results => results.filter(item => !item.is_draft)); // filter out draft

client/app/components/SelectItemsDialog.jsx

@@ -1,5 +1,5 @@
-import { filter, debounce, find, isEmpty, size } from "lodash";
-import React from "react";
+import { filter, find, isEmpty, size } from "lodash";
+import React, { useState, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import Modal from "antd/lib/modal";
@@ -8,191 +8,185 @@ import List from "antd/lib/list";
 import Button from "antd/lib/button";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import BigMessage from "@/components/BigMessage";
-
 import LoadingState from "@/components/items-list/components/LoadingState";
 import notification from "@/services/notification";
+import useSearchResults from "@/lib/hooks/useSearchResults";
 
-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>
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    extraFooterContent: PropTypes.node,
-    showCount: PropTypes.bool,
-  };
+function ItemsList({ items, renderItem, onItemClick }) {
+  const renderListItem = useCallback(
+    item => {
+      const { content, className, isDisabled } = renderItem(item);
+      return (
+        <List.Item
+          className={classNames("p-l-10", "p-r-10", { clickable: !isDisabled, disabled: isDisabled }, className)}
+          onClick={isDisabled ? null : () => onItemClick(item)}>
+          {content}
+        </List.Item>
+      );
+    },
+    [renderItem, onItemClick]
+  );
 
-  static defaultProps = {
-    dialogTitle: "Add Items",
-    inputPlaceholder: "Search...",
-    selectedItemsTitle: "Selected items",
-    itemKey: item => item.id,
-    renderItem: () => "",
-    renderStagedItem: null, // hidden by default
-    save: items => items,
-    width: "80%",
-    extraFooterContent: null,
-    showCount: false,
-  };
-
-  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 });
-          notification.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;
-
-    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 } = this.props;
-    const { selectedItemsTitle, renderStagedItem, width, showCount } = this.props;
-    const { loading, saveInProgress, items, selected } = this.state;
-    const hasResults = items.length > 0;
-    return (
-      <Modal
-        {...dialog.props}
-        className="select-items-dialog"
-        width={width}
-        title={dialogTitle}
-        footer={
-          <div className="d-flex align-items-center">
-            <span className="flex-fill m-r-5" style={{ textAlign: "left", color: "rgba(0, 0, 0, 0.5)" }}>
-              {this.props.extraFooterContent}
-            </span>
-            <Button onClick={dialog.dismiss}>Cancel</Button>
-            <Button
-              onClick={() => this.save()}
-              loading={saveInProgress}
-              disabled={selected.length === 0}
-              type="primary">
-              Save
-              {showCount && !isEmpty(selected) ? ` (${size(selected)})` : null}
-            </Button>
-          </div>
-        }>
-        <div className="d-flex align-items-center m-b-10">
-          <div className="flex-fill">
-            <Input.Search
-              defaultValue={this.state.searchTerm}
-              onChange={event => this.search(event.target.value)}
-              placeholder={inputPlaceholder}
-              autoFocus
-            />
-          </div>
-          {renderStagedItem && (
-            <div className="w-50 m-l-20">
-              <h5 className="m-0">{selectedItemsTitle}</h5>
-            </div>
-          )}
-        </div>
-
-        <div className="d-flex align-items-stretch" style={{ minHeight: "30vh", maxHeight: "50vh" }}>
-          <div className="flex-fill 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>
-          {renderStagedItem && (
-            <div className="w-50 m-l-20 scrollbox">
-              {selected.length > 0 && (
-                <List size="small" dataSource={selected} renderItem={item => this.renderItem(item, true)} />
-              )}
-            </div>
-          )}
-        </div>
-      </Modal>
-    );
-  }
+  return <List size="small" dataSource={items} renderItem={renderListItem} />;
 }
 
+ItemsList.propTypes = {
+  items: PropTypes.array,
+  renderItem: PropTypes.func,
+  onItemClick: PropTypes.func,
+};
+
+ItemsList.defaultProps = {
+  items: [],
+  renderItem: () => {},
+  onItemClick: () => {},
+};
+
+function SelectItemsDialog({
+  dialog,
+  dialogTitle,
+  inputPlaceholder,
+  itemKey,
+  renderItem,
+  renderStagedItem,
+  searchItems,
+  selectedItemsTitle,
+  width,
+  showCount,
+  extraFooterContent,
+}) {
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [search, items, isLoading] = useSearchResults(searchItems, { initialResults: [] });
+  const hasResults = items.length > 0;
+
+  useEffect(() => {
+    search();
+  }, [search]);
+
+  const isItemSelected = useCallback(
+    item => {
+      const key = itemKey(item);
+      return !!find(selectedItems, i => itemKey(i) === key);
+    },
+    [selectedItems, itemKey]
+  );
+
+  const toggleItem = useCallback(
+    item => {
+      if (isItemSelected(item)) {
+        const key = itemKey(item);
+        setSelectedItems(filter(selectedItems, i => itemKey(i) !== key));
+      } else {
+        setSelectedItems([...selectedItems, item]);
+      }
+    },
+    [selectedItems, itemKey, isItemSelected]
+  );
+
+  const save = useCallback(() => {
+    dialog.close(selectedItems).catch(error => {
+      if (error) {
+        notification.error("Failed to save some of selected items.");
+      }
+    });
+  }, [dialog, selectedItems]);
+
+  return (
+    <Modal
+      {...dialog.props}
+      className="select-items-dialog"
+      width={width}
+      title={dialogTitle}
+      footer={
+        <div className="d-flex align-items-center">
+          <span className="flex-fill m-r-5" style={{ textAlign: "left", color: "rgba(0, 0, 0, 0.5)" }}>
+            {extraFooterContent}
+          </span>
+          <Button {...dialog.props.cancelButtonProps} onClick={dialog.dismiss}>
+            Cancel
+          </Button>
+          <Button
+            {...dialog.props.okButtonProps}
+            onClick={save}
+            disabled={selectedItems.length === 0 || dialog.props.okButtonProps.disabled}
+            type="primary">
+            Save
+            {showCount && !isEmpty(selectedItems) ? ` (${size(selectedItems)})` : null}
+          </Button>
+        </div>
+      }>
+      <div className="d-flex align-items-center m-b-10">
+        <div className="flex-fill">
+          <Input.Search onChange={event => search(event.target.value)} placeholder={inputPlaceholder} autoFocus />
+        </div>
+        {renderStagedItem && (
+          <div className="w-50 m-l-20">
+            <h5 className="m-0">{selectedItemsTitle}</h5>
+          </div>
+        )}
+      </div>
+
+      <div className="d-flex align-items-stretch" style={{ minHeight: "30vh", maxHeight: "50vh" }}>
+        <div className="flex-fill scrollbox">
+          {isLoading && <LoadingState className="" />}
+          {!isLoading && !hasResults && (
+            <BigMessage icon="fa-search" message="No items match your search." className="" />
+          )}
+          {!isLoading && hasResults && (
+            <ItemsList
+              items={items}
+              renderItem={item => renderItem(item, { isSelected: isItemSelected(item) })}
+              onItemClick={toggleItem}
+            />
+          )}
+        </div>
+        {renderStagedItem && (
+          <div className="w-50 m-l-20 scrollbox">
+            {selectedItems.length > 0 && (
+              <ItemsList
+                items={selectedItems}
+                renderItem={item => renderStagedItem(item, { isSelected: true })}
+                onItemClick={toggleItem}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+SelectItemsDialog.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,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  extraFooterContent: PropTypes.node,
+  showCount: PropTypes.bool,
+};
+
+SelectItemsDialog.defaultProps = {
+  dialogTitle: "Add Items",
+  inputPlaceholder: "Search...",
+  selectedItemsTitle: "Selected items",
+  itemKey: item => item.id,
+  renderItem: () => "",
+  renderStagedItem: null, // hidden by default
+  width: "80%",
+  extraFooterContent: null,
+  showCount: false,
+};
+
 export default wrapDialog(SelectItemsDialog);

client/app/components/SettingsWrapper.jsx

@@ -1,13 +1,12 @@
 import React from "react";
 import Menu from "antd/lib/menu";
 import PageHeader from "@/components/PageHeader";
+import Link from "@/components/Link";
 import location from "@/services/location";
 import settingsMenu from "@/services/settingsMenu";
 
-function wrapSettingsTab(options, WrappedComponent) {
-  if (options) {
-    settingsMenu.add(options);
-  }
+function wrapSettingsTab(id, options, WrappedComponent) {
+  settingsMenu.add(id, options);
 
   return function SettingsTab(props) {
     const activeItem = settingsMenu.getActiveItem(location.path);
@@ -17,15 +16,13 @@ function wrapSettingsTab(options, WrappedComponent) {
           <PageHeader title="Settings" />
           <div className="bg-white tiled">
             <Menu selectedKeys={[activeItem && activeItem.title]} selectable={false} mode="horizontal">
-              {settingsMenu.items
-                .filter(item => item.isAvailable())
-                .map(item => (
-                  <Menu.Item key={item.title}>
-                    <a href={item.path} data-test="SettingsScreenItem">
-                      {item.title}
-                    </a>
-                  </Menu.Item>
-                ))}
+              {settingsMenu.getAvailableItems().map(item => (
+                <Menu.Item key={item.title}>
+                  <Link href={item.path} data-test="SettingsScreenItem">
+                    {item.title}
+                  </Link>
+                </Menu.Item>
+              ))}
             </Menu>
             <div className="p-15">
               <div>

client/app/components/admin/Layout.jsx

@@ -1,27 +1,30 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Tabs from "antd/lib/tabs";
+import Menu from "antd/lib/menu";
 import PageHeader from "@/components/PageHeader";
+import Link from "@/components/Link";
 
 import "./layout.less";
 
 export default function Layout({ activeTab, children }) {
   return (
-    <div className="container admin-page-layout">
-      <PageHeader title="Admin" />
-
-      <div className="bg-white tiled">
-        <Tabs className="admin-page-layout-tabs" defaultActiveKey={activeTab} animated={false} tabBarGutter={0}>
-          <Tabs.TabPane key="system_status" tab={<a href="admin/status">System Status</a>}>
-            {activeTab === "system_status" ? children : null}
-          </Tabs.TabPane>
-          <Tabs.TabPane key="jobs" tab={<a href="admin/queries/jobs">RQ Status</a>}>
-            {activeTab === "jobs" ? children : null}
-          </Tabs.TabPane>
-          <Tabs.TabPane key="outdated_queries" tab={<a href="admin/queries/outdated">Outdated Queries</a>}>
-            {activeTab === "outdated_queries" ? children : null}
-          </Tabs.TabPane>
-        </Tabs>
+    <div className="admin-page-layout">
+      <div className="container">
+        <PageHeader title="Admin" />
+        <div className="bg-white tiled">
+          <Menu selectedKeys={[activeTab]} selectable={false} mode="horizontal">
+            <Menu.Item key="system_status">
+              <Link href="admin/status">System Status</Link>
+            </Menu.Item>
+            <Menu.Item key="jobs">
+              <Link href="admin/queries/jobs">RQ Status</Link>
+            </Menu.Item>
+            <Menu.Item key="outdated_queries">
+              <Link href="admin/queries/outdated">Outdated Queries</Link>
+            </Menu.Item>
+          </Menu>
+          {children}
+        </div>
       </div>
     </div>
   );

client/app/components/admin/RQStatus.jsx

@@ -35,11 +35,11 @@ CounterCard.defaultProps = {
 
 const queryJobsColumns = [
   { title: "Queue", dataIndex: "origin" },
-  { title: "Query ID", dataIndex: "meta.query_id" },
-  { title: "Org ID", dataIndex: "meta.org_id" },
-  { title: "Data Source ID", dataIndex: "meta.data_source_id" },
-  { title: "User ID", dataIndex: "meta.user_id" },
-  Columns.custom(scheduled => scheduled.toString(), { title: "Scheduled", dataIndex: "meta.scheduled" }),
+  { title: "Query ID", dataIndex: ["meta", "query_id"] },
+  { title: "Org ID", dataIndex: ["meta", "org_id"] },
+  { title: "Data Source ID", dataIndex: ["meta", "data_source_id"] },
+  { title: "User ID", dataIndex: ["meta", "user_id"] },
+  Columns.custom(scheduled => scheduled.toString(), { title: "Scheduled", dataIndex: ["meta", "scheduled"] }),
   Columns.timeAgo({ title: "Start Time", dataIndex: "started_at" }),
   Columns.timeAgo({ title: "Enqueue Time", dataIndex: "enqueued_at" }),
 ];

client/app/components/admin/layout.less

@@ -1,17 +1,5 @@
 .admin-page-layout {
-  &-tabs.ant-tabs {
-    > .ant-tabs-bar {
-      margin: 0;
-
-      .ant-tabs-tab {
-        padding: 0;
-
-        a {
-          display: inline-block;
-          padding: 12px 16px;
-          color: inherit;
-        }
-      }
-    }
+  .ant-table {
+    overflow-x: auto;
   }
 }

client/app/components/cards-list/CardsList.jsx

@@ -2,6 +2,7 @@ import Input from "antd/lib/input";
 import { includes, isEmpty } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";
+import Link from "@/components/Link";
 import EmptyState from "@/components/items-list/components/EmptyState";
 
 import "./CardsList.less";
@@ -44,10 +45,10 @@ export default class CardsList extends React.Component {
   // eslint-disable-next-line class-methods-use-this
   renderListItem(item) {
     return (
-      <a key={`card${item.id}`} className="visual-card" onClick={item.onClick} href={item.href}>
+      <Link key={`card${item.id}`} className="visual-card" onClick={item.onClick} href={item.href}>
         <img alt={item.title} src={item.imgSrc} />
         <h3>{item.title}</h3>
-      </a>
+      </Link>
     );
   }
 

client/app/components/dashboards/AddWidgetDialog.jsx

@@ -1,164 +1,156 @@
-import { each, values, map, includes, first } from "lodash";
-import React from "react";
+import { map, includes, groupBy, first, find } from "lodash";
+import React, { useState, useMemo, useCallback } 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 notification from "@/services/notification";
-
 import { Query } from "@/services/query";
 
-const { Option, OptGroup } = Select;
+function VisualizationSelect({ query, visualization, onChange }) {
+  const visualizationGroups = useMemo(() => {
+    return query ? groupBy(query.visualizations, "type") : {};
+  }, [query]);
 
-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,
-  };
+  const handleChange = useCallback(
+    visualizationId => {
+      const selectedVisualization = query ? find(query.visualizations, { id: visualizationId }) : null;
+      onChange(selectedVisualization || null);
+    },
+    [query, onChange]
+  );
 
-  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 }).then(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] });
-          }
-        }
-      });
-    }
+  if (!query) {
+    return null;
   }
 
-  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(() => {
-        notification.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)}>
-            {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>
+  return (
+    <div>
+      <div className="form-group">
+        <label htmlFor="choose-visualization">Choose Visualization</label>
+        <Select
+          id="choose-visualization"
+          className="w-100"
+          value={visualization ? visualization.id : undefined}
+          onChange={handleChange}>
+          {map(visualizationGroups, (visualizations, groupKey) => (
+            <Select.OptGroup key={groupKey} label={groupKey}>
+              {map(visualizations, visualization => (
+                <Select.Option key={`${visualization.id}`} value={visualization.id}>
+                  {visualization.name}
+                </Select.Option>
+              ))}
+            </Select.OptGroup>
+          ))}
+        </Select>
       </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}>
-        <div data-test="AddWidgetDialog">
-          <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)}
-            />,
-          ]}
-        </div>
-      </Modal>
-    );
-  }
+    </div>
+  );
 }
 
+VisualizationSelect.propTypes = {
+  query: PropTypes.object,
+  visualization: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+VisualizationSelect.defaultProps = {
+  query: null,
+  visualization: null,
+  onChange: () => {},
+};
+
+function AddWidgetDialog({ dialog, dashboard }) {
+  const [selectedQuery, setSelectedQuery] = useState(null);
+  const [selectedVisualization, setSelectedVisualization] = useState(null);
+  const [parameterMappings, setParameterMappings] = useState([]);
+
+  const selectQuery = useCallback(
+    queryId => {
+      // Clear previously selected query (if any)
+      setSelectedQuery(null);
+      setSelectedVisualization(null);
+      setParameterMappings([]);
+
+      if (queryId) {
+        Query.get({ id: queryId }).then(query => {
+          if (query) {
+            const existingParamNames = map(dashboard.getParametersDefs(), param => param.name);
+            setSelectedQuery(query);
+            setParameterMappings(
+              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 > 0) {
+              setSelectedVisualization(first(query.visualizations));
+            }
+          }
+        });
+      }
+    },
+    [dashboard]
+  );
+
+  const saveWidget = useCallback(() => {
+    dialog.close({ visualization: selectedVisualization, parameterMappings }).catch(() => {
+      notification.error("Widget could not be added");
+    });
+  }, [dialog, selectedVisualization, parameterMappings]);
+
+  const existingParams = dashboard.getParametersDefs();
+
+  return (
+    <Modal
+      {...dialog.props}
+      title="Add Widget"
+      onOk={saveWidget}
+      okButtonProps={{
+        ...dialog.props.okButtonProps,
+        disabled: !selectedQuery || dialog.props.okButtonProps.disabled,
+      }}
+      okText="Add to Dashboard"
+      width={700}>
+      <div data-test="AddWidgetDialog">
+        <QuerySelector onChange={query => selectQuery(query ? query.id : null)} />
+
+        {selectedQuery && (
+          <VisualizationSelect
+            query={selectedQuery}
+            visualization={selectedVisualization}
+            onChange={setSelectedVisualization}
+          />
+        )}
+
+        {parameterMappings.length > 0 && [
+          <label key="parameters-title" htmlFor="parameter-mappings">
+            Parameters
+          </label>,
+          <ParameterMappingListInput
+            key="parameters-list"
+            id="parameter-mappings"
+            mappings={parameterMappings}
+            existingParams={existingParams}
+            onChange={setParameterMappings}
+          />,
+        ]}
+      </div>
+    </Modal>
+  );
+}
+
+AddWidgetDialog.propTypes = {
+  dialog: DialogPropType.isRequired,
+  dashboard: PropTypes.object.isRequired,
+};
+
 export default wrapDialog(AddWidgetDialog);

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -1,6 +1,5 @@
 import { trim } from "lodash";
 import React, { useState } from "react";
-import { axios } from "@/services/axios";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import DynamicComponent from "@/components/DynamicComponent";
@@ -8,6 +7,7 @@ import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import navigateTo from "@/components/ApplicationArea/navigateTo";
 import recordEvent from "@/services/recordEvent";
 import { policy } from "@/services/policy";
+import { Dashboard } from "@/services/dashboard";
 
 function CreateDashboardDialog({ dialog }) {
   const [name, setName] = useState("");
@@ -25,9 +25,9 @@ function CreateDashboardDialog({ dialog }) {
     if (name !== "") {
       setSaveInProgress(true);
 
-      axios.post("api/dashboards", { name }).then(data => {
+      Dashboard.save({ name }).then(data => {
         dialog.close();
-        navigateTo(`dashboard/${data.slug}?edit`);
+        navigateTo(`${data.url}?edit`);
       });
       recordEvent("create", "dashboard");
     }

client/app/components/dashboards/DashboardGrid.jsx

@@ -33,6 +33,53 @@ const WidgetType = PropTypes.shape({
 const SINGLE = "single-column";
 const MULTI = "multi-column";
 
+const DashboardWidget = React.memo(
+  function DashboardWidget({
+    widget,
+    dashboard,
+    onLoadWidget,
+    onRefreshWidget,
+    onRemoveWidget,
+    onParameterMappingsChange,
+    canEdit,
+    isPublic,
+    isLoading,
+    filters,
+  }) {
+    const { type } = widget;
+    const onLoad = () => onLoadWidget(widget);
+    const onRefresh = () => onRefreshWidget(widget);
+    const onDelete = () => onRemoveWidget(widget.id);
+
+    if (type === WidgetTypeEnum.VISUALIZATION) {
+      return (
+        <VisualizationWidget
+          widget={widget}
+          dashboard={dashboard}
+          filters={filters}
+          canEdit={canEdit}
+          isPublic={isPublic}
+          isLoading={isLoading}
+          onLoad={onLoad}
+          onRefresh={onRefresh}
+          onDelete={onDelete}
+          onParameterMappingsChange={onParameterMappingsChange}
+        />
+      );
+    }
+    if (type === WidgetTypeEnum.TEXTBOX) {
+      return <TextboxWidget widget={widget} canEdit={canEdit} isPublic={isPublic} onDelete={onDelete} />;
+    }
+    return <RestrictedWidget widget={widget} />;
+  },
+  (prevProps, nextProps) =>
+    prevProps.widget === nextProps.widget &&
+    prevProps.canEdit === nextProps.canEdit &&
+    prevProps.isPublic === nextProps.isPublic &&
+    prevProps.isLoading === nextProps.isLoading &&
+    prevProps.filters === nextProps.filters
+);
+
 class DashboardGrid extends React.Component {
   static propTypes = {
     isEditing: PropTypes.bool.isRequired,
@@ -203,38 +250,29 @@ class DashboardGrid extends React.Component {
           onLayoutChange={this.onLayoutChange}
           onBreakpointChange={this.onBreakpointChange}
           breakpoints={{ [MULTI]: cfg.mobileBreakPoint, [SINGLE]: 0 }}>
-          {widgets.map(widget => {
-            const widgetProps = {
-              widget,
-              filters,
-              isPublic,
-              canEdit: dashboard.canEdit(),
-              onDelete: () => onRemoveWidget(widget.id),
-            };
-            const { type } = widget;
-            return (
-              <div
-                key={widget.id}
-                data-grid={DashboardGrid.normalizeFrom(widget)}
-                data-widgetid={widget.id}
-                data-test={`WidgetId${widget.id}`}
-                className={cx("dashboard-widget-wrapper", {
-                  "widget-auto-height-enabled": this.autoHeightCtrl.exists(widget.id),
-                })}>
-                {type === WidgetTypeEnum.VISUALIZATION && (
-                  <VisualizationWidget
-                    {...widgetProps}
-                    dashboard={dashboard}
-                    onLoad={() => onLoadWidget(widget)}
-                    onRefresh={() => onRefreshWidget(widget)}
-                    onParameterMappingsChange={onParameterMappingsChange}
-                  />
-                )}
-                {type === WidgetTypeEnum.TEXTBOX && <TextboxWidget {...widgetProps} />}
-                {type === WidgetTypeEnum.RESTRICTED && <RestrictedWidget widget={widget} />}
-              </div>
-            );
-          })}
+          {widgets.map(widget => (
+            <div
+              key={widget.id}
+              data-grid={DashboardGrid.normalizeFrom(widget)}
+              data-widgetid={widget.id}
+              data-test={`WidgetId${widget.id}`}
+              className={cx("dashboard-widget-wrapper", {
+                "widget-auto-height-enabled": this.autoHeightCtrl.exists(widget.id),
+              })}>
+              <DashboardWidget
+                dashboard={dashboard}
+                widget={widget}
+                filters={filters}
+                isPublic={isPublic}
+                isLoading={widget.loading}
+                canEdit={dashboard.canEdit()}
+                onLoadWidget={onLoadWidget}
+                onRefreshWidget={onRefreshWidget}
+                onRemoveWidget={onRemoveWidget}
+                onParameterMappingsChange={onParameterMappingsChange}
+              />
+            </div>
+          ))}
         </ResponsiveGridLayout>
       </div>
     );

client/app/components/dashboards/ExpandedWidgetDialog.jsx

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import VisualizationRenderer from "@/visualizations/components/VisualizationRenderer";
-import VisualizationName from "@/visualizations/components/VisualizationName";
+import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
+import VisualizationName from "@/components/visualizations/VisualizationName";
 
 function ExpandedWidgetDialog({ dialog, widget }) {
   return (

client/app/components/dashboards/TextboxDialog.jsx

@@ -1,109 +1,113 @@
+import { toString } from "lodash";
 import { markdown } from "markdown";
-import { debounce } from "lodash";
-import React from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
+import { useDebouncedCallback } from "use-debounce";
 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 HtmlContent from "@/components/HtmlContent";
+import Link from "@/components/Link";
+import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import notification from "@/services/notification";
 
 import "./TextboxDialog.less";
 
-class TextboxDialog extends React.Component {
-  static propTypes = {
-    dialog: DialogPropType.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    text: PropTypes.string,
-  };
+function TextboxDialog({ dialog, isNew, ...props }) {
+  const [text, setText] = useState(toString(props.text));
+  const [preview, setPreview] = useState(null);
 
-  static defaultProps = {
-    text: "",
-  };
+  useEffect(() => {
+    setText(props.text);
+    setPreview(markdown.toHTML(props.text));
+  }, [props.text]);
 
-  updatePreview = debounce(() => {
-    const text = this.state.text;
-    this.setState({
-      preview: markdown.toHTML(text),
+  const [updatePreview] = useDebouncedCallback(() => {
+    setPreview(markdown.toHTML(text));
+  }, 200);
+
+  const handleInputChange = useCallback(
+    event => {
+      setText(event.target.value);
+      updatePreview();
+    },
+    [updatePreview]
+  );
+
+  const saveWidget = useCallback(() => {
+    dialog.close(text).catch(() => {
+      notification.error(isNew ? "Widget could not be added" : "Widget could not be saved");
     });
-  }, 100);
+  }, [dialog, isNew, text]);
 
-  constructor(props) {
-    super(props);
-    const { text } = props;
-    this.state = {
-      saveInProgress: false,
-      text,
-      preview: markdown.toHTML(text),
-    };
-  }
-
-  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(() => {
-        notification.error("Widget could not be added");
-      })
-      .finally(() => {
-        this.setState({ saveInProgress: false });
+  const confirmDialogDismiss = useCallback(() => {
+    const originalText = props.text;
+    if (text !== originalText) {
+      Modal.confirm({
+        title: "Quit editing?",
+        content: "Changes you made so far will not be saved. Are you sure?",
+        okText: "Yes, quit",
+        okType: "danger",
+        onOk: () => dialog.dismiss(),
+        maskClosable: true,
+        autoFocusButton: null,
+        style: { top: 170 },
       });
-  }
+    } else {
+      dialog.dismiss();
+    }
+  }, [dialog, text, props.text]);
 
-  render() {
-    const { dialog } = this.props;
-    const isNew = !this.props.text;
-
-    return (
-      <Modal
-        {...dialog.props}
-        title={isNew ? "Add Textbox" : "Edit Textbox"}
-        onOk={() => this.saveWidget()}
-        okButtonProps={{
-          loading: this.state.saveInProgress,
-          disabled: !this.state.text,
-        }}
-        okText={isNew ? "Add to Dashboard" : "Save"}
-        width={500}
-        wrapProps={{ "data-test": "TextboxDialog" }}>
-        <div className="textbox-dialog">
-          <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>
-              <HtmlContent className="preview markdown">{this.state.preview}</HtmlContent>
-            </React.Fragment>
-          )}
-        </div>
-      </Modal>
-    );
-  }
+  return (
+    <Modal
+      {...dialog.props}
+      title={isNew ? "Add Textbox" : "Edit Textbox"}
+      onOk={saveWidget}
+      onCancel={confirmDialogDismiss}
+      okText={isNew ? "Add to Dashboard" : "Save"}
+      width={500}
+      wrapProps={{ "data-test": "TextboxDialog" }}>
+      <div className="textbox-dialog">
+        <Input.TextArea
+          className="resize-vertical"
+          rows="5"
+          value={text}
+          onChange={handleInputChange}
+          autoFocus
+          placeholder="This is where you write some text"
+        />
+        <small>
+          Supports basic{" "}
+          <Link
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://www.markdownguide.org/cheat-sheet/#basic-syntax">
+            <Tooltip title="Markdown guide opens in new window">Markdown</Tooltip>
+          </Link>
+          .
+        </small>
+        {text && (
+          <React.Fragment>
+            <Divider dashed />
+            <strong className="preview-title">Preview:</strong>
+            <HtmlContent className="preview markdown">{preview}</HtmlContent>
+          </React.Fragment>
+        )}
+      </div>
+    </Modal>
+  );
 }
 
+TextboxDialog.propTypes = {
+  dialog: DialogPropType.isRequired,
+  isNew: PropTypes.bool,
+  text: PropTypes.string,
+};
+
+TextboxDialog.defaultProps = {
+  isNew: false,
+  text: "",
+};
+
 export default wrapDialog(TextboxDialog);

client/app/components/dashboards/dashboard-grid.less

@@ -56,54 +56,6 @@
     }
   }
 
-  .dashboard-widget-wrapper:not(.widget-auto-height-enabled) {
-    .visualization-renderer {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-
-      > .visualization-renderer-wrapper {
-        flex-grow: 1;
-        position: relative;
-      }
-
-      > .filters-wrapper {
-        flex-grow: 0;
-      }
-    }
-
-    .sunburst-visualization-container,
-    .sankey-visualization-container,
-    .map-visualization-container,
-    .word-cloud-visualization-container,
-    .box-plot-deprecated-visualization-container,
-    .chart-visualization-container {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: auto;
-      height: auto;
-      overflow: hidden;
-    }
-
-    .counter-visualization-content {
-      position: absolute;
-      left: 10px;
-      top: 15px;
-      right: 10px;
-      bottom: 15px;
-      height: auto;
-      overflow: hidden;
-      padding: 0;
-    }
-  }
-
   .widget-auto-height-enabled {
     .spinner {
       position: static;
@@ -123,8 +75,85 @@
   }
 }
 
+.dashboard-wrapper .dashboard-widget-wrapper:not(.widget-auto-height-enabled),
+.query-fixed-layout {
+  .visualization-renderer {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    > .visualization-renderer-wrapper {
+      flex-grow: 1;
+      position: relative;
+    }
+
+    > .filters-wrapper {
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  .sunburst-visualization-container,
+  .sankey-visualization-container,
+  .map-visualization-container,
+  .word-cloud-visualization-container,
+  .box-plot-deprecated-visualization-container,
+  .chart-visualization-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: auto;
+    overflow: hidden;
+  }
+
+  .counter-visualization-container {
+    height: 100%;
+
+    .counter-visualization-content {
+      position: absolute;
+      left: 10px;
+      top: 15px;
+      right: 10px;
+      bottom: 15px;
+      height: auto;
+      overflow: hidden;
+      padding: 0;
+    }
+  }
+}
+
+.query-fixed-layout {
+  .visualization-renderer > .visualization-renderer-wrapper {
+    .counter-visualization-container {
+      // counter is too large on Query pages, so let's add some constraints
+      max-width: 600px;
+      max-height: 400px;
+      // center it
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+}
+
 // react-grid-layout overrides
 .react-grid-item {
+  touch-action: initial !important; // react-draggable disables touch by default
+
+  &.react-draggable {
+    touch-action: none !important;
+  }
+
   // placeholder color
   &.react-grid-placeholder {
     border-radius: 3px;

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { markdown } from "markdown";
 import Menu from "antd/lib/menu";
-import HtmlContent from "@/components/HtmlContent";
+import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import TextboxDialog from "@/components/dashboards/TextboxDialog";
 import Widget from "./Widget";
 
@@ -13,12 +13,11 @@ function TextboxWidget(props) {
   const editTextBox = () => {
     TextboxDialog.showModal({
       text: widget.text,
-      onConfirm: newText => {
-        widget.text = newText;
-        setText(newText);
-        return widget.save();
-      },
-    }).result.catch(() => {}); // ignore dismiss
+    }).onClose(newText => {
+      widget.text = newText;
+      setText(newText);
+      return widget.save();
+    });
   };
 
   const TextboxMenuOptions = [

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

@@ -4,10 +4,11 @@ import { compact, isEmpty, invoke } from "lodash";
 import { markdown } from "markdown";
 import cx from "classnames";
 import Menu from "antd/lib/menu";
+import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { currentUser } from "@/services/auth";
 import recordEvent from "@/services/recordEvent";
 import { formatDateTime } from "@/lib/utils";
-import HtmlContent from "@/components/HtmlContent";
+import Link from "@/components/Link";
 import Parameters from "@/components/Parameters";
 import TimeAgo from "@/components/TimeAgo";
 import Timer from "@/components/Timer";
@@ -16,7 +17,7 @@ import QueryLink from "@/components/QueryLink";
 import { FiltersType } from "@/components/Filters";
 import ExpandedWidgetDialog from "@/components/dashboards/ExpandedWidgetDialog";
 import EditParameterMappingsDialog from "@/components/dashboards/EditParameterMappingsDialog";
-import VisualizationRenderer from "@/visualizations/components/VisualizationRenderer";
+import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
 import Widget from "./Widget";
 
 function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParametersEdit }) {
@@ -30,27 +31,27 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
   return compact([
     <Menu.Item key="download_csv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <a href={downloadLink("csv")} download={downloadName("csv")} target="_self">
+        <Link href={downloadLink("csv")} download={downloadName("csv")} target="_self">
           Download as CSV File
-        </a>
+        </Link>
       ) : (
         "Download as CSV File"
       )}
     </Menu.Item>,
     <Menu.Item key="download_tsv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <a href={downloadLink("tsv")} download={downloadName("tsv")} target="_self">
+        <Link href={downloadLink("tsv")} download={downloadName("tsv")} target="_self">
           Download as TSV File
-        </a>
+        </Link>
       ) : (
         "Download as TSV File"
       )}
     </Menu.Item>,
     <Menu.Item key="download_excel" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <a href={downloadLink("xlsx")} download={downloadName("xlsx")} target="_self">
+        <Link href={downloadLink("xlsx")} download={downloadName("xlsx")} target="_self">
           Download as Excel File
-        </a>
+        </Link>
       ) : (
         "Download as Excel File"
       )}
@@ -58,7 +59,7 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
     (canViewQuery || canEditParameters) && <Menu.Divider key="divider" />,
     canViewQuery && (
       <Menu.Item key="view_query">
-        <a href={widget.getQuery().getUrl(true, widget.visualization.id)}>View Query</a>
+        <Link href={widget.getQuery().getUrl(true, widget.visualization.id)}>View Query</Link>
       </Menu.Item>
     ),
     canEditParameters && (
@@ -94,9 +95,11 @@ function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onPar
           <p>
             <QueryLink query={widget.getQuery()} visualization={widget.visualization} readOnly={!canViewQuery} />
           </p>
-          <HtmlContent className="text-muted markdown query--description">
-            {markdown.toHTML(widget.getQuery().description || "")}
-          </HtmlContent>
+          {!isEmpty(widget.getQuery().description) && (
+            <HtmlContent className="text-muted markdown query--description">
+              {markdown.toHTML(widget.getQuery().description || "")}
+            </HtmlContent>
+          )}
         </div>
       </div>
       {!isEmpty(parameters) && (
@@ -185,6 +188,7 @@ class VisualizationWidget extends React.Component {
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     filters: FiltersType,
     isPublic: PropTypes.bool,
+    isLoading: PropTypes.bool,
     canEdit: PropTypes.bool,
     onLoad: PropTypes.func,
     onRefresh: PropTypes.func,
@@ -195,6 +199,7 @@ class VisualizationWidget extends React.Component {
   static defaultProps = {
     filters: [],
     isPublic: false,
+    isLoading: false,
     canEdit: false,
     onLoad: () => {},
     onRefresh: () => {},
@@ -215,7 +220,7 @@ class VisualizationWidget extends React.Component {
   }
 
   expandWidget = () => {
-    ExpandedWidgetDialog.showModal({ widget: this.props.widget }).result.catch(() => {}); // ignore dismiss
+    ExpandedWidgetDialog.showModal({ widget: this.props.widget });
   };
 
   editParameterMappings = () => {
@@ -223,16 +228,14 @@ class VisualizationWidget extends React.Component {
     EditParameterMappingsDialog.showModal({
       dashboard,
       widget,
-    })
-      .result.then(valuesChanged => {
-        // refresh widget if any parameter value has been updated
-        if (valuesChanged) {
-          onRefresh();
-        }
-        onParameterMappingsChange();
-        this.setState({ localParameters: widget.getLocalParameters() });
-      })
-      .catch(() => {}); // ignore dismiss
+    }).onClose(valuesChanged => {
+      // refresh widget if any parameter value has been updated
+      if (valuesChanged) {
+        onRefresh();
+      }
+      onParameterMappingsChange();
+      this.setState({ localParameters: widget.getLocalParameters() });
+    });
   };
 
   renderVisualization() {
@@ -273,10 +276,10 @@ class VisualizationWidget extends React.Component {
   }
 
   render() {
-    const { widget, isPublic, canEdit, onRefresh } = this.props;
+    const { widget, isLoading, isPublic, canEdit, onRefresh } = this.props;
     const { localParameters } = this.state;
     const widgetQueryResult = widget.getQueryResult();
-    const isRefreshing = widget.loading && !!(widgetQueryResult && widgetQueryResult.getStatus());
+    const isRefreshing = isLoading && !!(widgetQueryResult && widgetQueryResult.getStatus());
 
     return (
       <Widget

client/app/components/dashboards/dashboard-widget/Widget.less

@@ -1,4 +1,4 @@
-@import '../../../assets/less/inc/variables';
+@import "../../../assets/less/inc/variables";
 
 .tile .t-header .th-title a.query-link {
   color: rgba(0, 0, 0, 0.5);
@@ -10,6 +10,7 @@
 
 .widget-wrapper {
   .widget-actions {
+    display: flex;
     position: absolute;
     top: 0;
     right: 0;
@@ -78,9 +79,6 @@
 }
 
 .editing-mode {
-  .widget-menu-regular {
-    display: none;
-  }
   .widget-menu-remove {
     display: block;
   }
@@ -151,7 +149,7 @@
     transition: all 100ms linear;
     transition-delay: 150ms;
     color: #bbbbbb;
-    background-color: rgba(255,255,255,.9);
+    background-color: rgba(255, 255, 255, 0.9);
     padding-left: 2px;
     padding-right: 1px;
     margin-right: -4px;
@@ -182,7 +180,8 @@
 }
 
 .tile {
-  .widget-menu-regular, .btn__refresh {
+  .widget-menu-regular,
+  .btn__refresh {
     opacity: 0 !important;
     transition: opacity 0.35s ease-in-out;
   }
@@ -214,7 +213,8 @@
   }
 
   &:hover {
-    .widget-menu-regular, .btn__refresh {
+    .widget-menu-regular,
+    .btn__refresh {
       opacity: 1 !important;
       transition: opacity 0.35s ease-in-out;
     }
@@ -240,8 +240,6 @@
       }
     }
 
-
-
     a {
       color: fade(@redash-black, 65%);
 

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

@@ -1,24 +1,29 @@
-import React from "react";
+import React, { useState, useReducer, useCallback } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 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, isFunction, filter, difference, isEmpty, some, isNumber, isBoolean } from "lodash";
-import Select from "antd/lib/select";
+import { includes, isFunction, filter, find, difference, isEmpty, mapValues } from "lodash";
 import notification from "@/services/notification";
 import Collapse from "@/components/Collapse";
-import AceEditorInput from "@/components/AceEditorInput";
-import { toHuman } from "@/lib/utils";
-import { Field, Action, AntdForm } from "../proptypes";
+import DynamicFormField, { FieldType } from "./DynamicFormField";
+import getFieldLabel from "./getFieldLabel";
 import helper from "./dynamicFormHelper";
 
 import "./DynamicForm.less";
 
+const ActionType = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  callback: PropTypes.func.isRequired,
+  type: PropTypes.string,
+  pullRight: PropTypes.bool,
+  disabledWhenDirty: PropTypes.bool,
+});
+
+const AntdFormType = PropTypes.shape({
+  validateFieldsAndScroll: PropTypes.func,
+});
+
 const fieldRules = ({ type, required, minLength }) => {
   const requiredRule = required;
   const minLengthRule = minLength && includes(["text", "email", "password"], type);
@@ -31,285 +36,206 @@ const fieldRules = ({ type, required, minLength }) => {
   ].filter(rule => rule);
 };
 
-class DynamicForm extends React.Component {
-  static propTypes = {
-    id: PropTypes.string,
-    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 = {
-    id: null,
-    fields: [],
-    actions: [],
-    feedbackIcons: false,
-    hideSubmitButton: false,
-    saveText: "Save",
-    onSubmit: () => {},
-  };
-
-  constructor(props) {
-    super(props);
-
-    const hasFilledExtraField = some(props.fields, field => {
-      const { extra, initialValue } = field;
-      return extra && (!isEmpty(initialValue) || isNumber(initialValue) || (isBoolean(initialValue) && initialValue));
-    });
-
-    const inProgressActions = {};
-    props.actions.forEach(action => (inProgressActions[action.name] = false));
-
-    this.state = {
-      isSubmitting: false,
-      showExtraFields: hasFilledExtraField,
-      inProgressActions,
-    };
-
-    this.actionCallbacks = this.props.actions.reduce(
-      (acc, cur) => ({
-        ...acc,
-        [cur.name]: cur.callback,
-      }),
-      null
-    );
-  }
-
-  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) => {
-      Object.entries(values).forEach(([key, value]) => {
-        const initialValue = this.props.fields.find(f => f.name === key).initialValue;
-        if ((initialValue === null || initialValue === undefined || initialValue === '') && value === '') {
-          values[key] = null;
-        }
-      });
-
-      if (!err) {
-        this.props.onSubmit(
-          values,
-          msg => {
-            const { setFieldsValue, getFieldsValue } = this.props.form;
-            this.setState({ isSubmitting: false });
-            setFieldsValue(getFieldsValue()); // reset form touched state
-            notification.success(msg);
-          },
-          msg => {
-            this.setState({ isSubmitting: false });
-            notification.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 });
-      });
+function normalizeEmptyValuesToNull(fields, values) {
+  return mapValues(values, (value, key) => {
+    const { initialValue } = find(fields, { name: key }) || {};
+    if ((initialValue === null || initialValue === undefined || initialValue === "") && value === "") {
+      return null;
     }
-  };
+    return value;
+  });
+}
 
-  renderUpload(field, props) {
-    const { getFieldDecorator, getFieldValue } = this.props.form;
-    const { name, initialValue } = field;
+function DynamicFormFields({ fields, feedbackIcons, form }) {
+  return fields.map(field => {
+    const { name, type, initialValue, contentAfter } = field;
+    const fieldLabel = getFieldLabel(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);
-  }
-
-  renderSelect(field, props) {
-    const { getFieldDecorator } = this.props.form;
-    const { name, options, mode, initialValue, readOnly, loading } = field;
-    const { Option } = Select;
-
-    const decoratorOptions = {
-      rules: fieldRules(field),
-      initialValue,
-    };
-
-    return getFieldDecorator(
+    const formItemProps = {
       name,
-      decoratorOptions
-    )(
-      <Select
-        {...props}
-        optionFilterProp="children"
-        loading={loading || false}
-        mode={mode}
-        getPopupContainer={trigger => trigger.parentNode}>
-        {options &&
-          options.map(option => (
-            <Option key={`${option.value}`} value={option.value} disabled={readOnly}>
-              {option.name || option.value}
-            </Option>
-          ))}
-      </Select>
-    );
-  }
-
-  renderField(field, props) {
-    const { getFieldDecorator } = this.props.form;
-    const { name, type, initialValue } = field;
-    const fieldLabel = field.title || toHuman(name);
-
-    const options = {
+      className: "m-b-10",
+      hasFeedback: type !== "checkbox" && type !== "file" && feedbackIcons,
+      label: type === "checkbox" ? "" : fieldLabel,
       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 === "select") {
-      return this.renderSelect(field, props);
-    } else if (type === "content") {
-      return field.content;
-    } else if (type === "number") {
-      return getFieldDecorator(name, options)(<InputNumber {...props} />);
-    } else if (type === "textarea") {
-      return getFieldDecorator(name, options)(<Input.TextArea {...props} />);
-    } else if (type === "ace") {
-      return getFieldDecorator(name, options)(<AceEditorInput {...props} />);
+    if (type === "file") {
+      formItemProps.valuePropName = "data-value";
+      formItemProps.getValueFromEvent = e => {
+        if (e && e.fileList[0]) {
+          helper.getBase64(e.file).then(value => {
+            form.setFieldsValue({ [name]: value });
+          });
+        }
+        return undefined;
+      };
     }
-    return getFieldDecorator(name, options)(<Input {...props} />);
-  }
-
-  renderFields(fields) {
-    return fields.map(field => {
-      const FormItem = Form.Item;
-      const { name, title, type, readOnly, autoFocus, contentAfter } = field;
-      const fieldLabel = title || toHuman(name);
-      const { feedbackIcons, form } = this.props;
-
-      const formItemProps = {
-        className: "m-b-10",
-        hasFeedback: type !== "checkbox" && type !== "file" && feedbackIcons,
-        label: type === "checkbox" ? "" : fieldLabel,
-      };
-
-      const fieldProps = {
-        ...field.props,
-        className: "w-100",
-        name,
-        type,
-        readOnly,
-        autoFocus,
-        placeholder: field.placeholder,
-        "data-test": fieldLabel,
-      };
-
-      return (
-        <React.Fragment key={name}>
-          <FormItem {...formItemProps}>{this.renderField(field, fieldProps)}</FormItem>
-          {isFunction(contentAfter) ? contentAfter(form.getFieldValue(name)) : contentAfter}
-        </React.Fragment>
-      );
-    });
-  }
-
-  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 m-t-20",
-      disabled: this.state.isSubmitting,
-      loading: this.state.isSubmitting,
-    };
-    const { id, hideSubmitButton, saveText, fields } = this.props;
-    const { showExtraFields } = this.state;
-    const saveButton = !hideSubmitButton;
-    const extraFields = filter(fields, { extra: true });
-    const regularFields = difference(fields, extraFields);
 
     return (
-      <Form id={id} className="dynamic-form" layout="vertical" onSubmit={this.handleSubmit}>
-        {this.renderFields(regularFields)}
-        {!isEmpty(extraFields) && (
-          <div className="extra-options">
-            <Button
-              type="dashed"
-              block
-              className="extra-options-button"
-              onClick={() => this.setState({ showExtraFields: !showExtraFields })}>
-              Additional Settings
-              <i className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })} />
-            </Button>
-            <Collapse collapsed={!showExtraFields} className="extra-options-content">
-              {this.renderFields(extraFields)}
-            </Collapse>
-          </div>
-        )}
-        {saveButton && <Button {...submitProps}>{saveText}</Button>}
-        {this.renderActions()}
-      </Form>
+      <React.Fragment key={name}>
+        <Form.Item {...formItemProps}>
+          <DynamicFormField field={field} form={form} />
+        </Form.Item>
+        {isFunction(contentAfter) ? contentAfter(form.getFieldValue(name)) : contentAfter}
+      </React.Fragment>
     );
-  }
+  });
 }
 
-export default Form.create()(DynamicForm);
+DynamicFormFields.propTypes = {
+  fields: PropTypes.arrayOf(FieldType),
+  feedbackIcons: PropTypes.bool,
+  form: AntdFormType.isRequired,
+};
+
+DynamicFormFields.defaultProps = {
+  fields: [],
+  feedbackIcons: false,
+};
+
+const reducerForActionSet = (state, action) => {
+  if (action.inProgress) {
+    state.add(action.actionName);
+  } else {
+    state.delete(action.actionName);
+  }
+  return new Set(state);
+};
+
+function DynamicFormActions({ actions, isFormDirty }) {
+  const [inProgressActions, setActionInProgress] = useReducer(reducerForActionSet, new Set());
+
+  const handleAction = useCallback(action => {
+    const actionName = action.name;
+    if (isFunction(action.callback)) {
+      setActionInProgress({ actionName, inProgress: true });
+      action.callback(() => {
+        setActionInProgress({ actionName, inProgress: false });
+      });
+    }
+  }, []);
+  return actions.map(action => (
+    <Button
+      key={action.name}
+      htmlType="button"
+      className={cx("m-t-10", { "pull-right": action.pullRight })}
+      type={action.type}
+      disabled={isFormDirty && action.disableWhenDirty}
+      loading={inProgressActions.has(action.name)}
+      onClick={() => handleAction(action)}>
+      {action.name}
+    </Button>
+  ));
+}
+
+DynamicFormActions.propTypes = {
+  actions: PropTypes.arrayOf(ActionType),
+  isFormDirty: PropTypes.bool,
+};
+
+DynamicFormActions.defaultProps = {
+  actions: [],
+  isFormDirty: false,
+};
+
+export default function DynamicForm({
+  id,
+  fields,
+  actions,
+  feedbackIcons,
+  hideSubmitButton,
+  defaultShowExtraFields,
+  saveText,
+  onSubmit,
+}) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showExtraFields, setShowExtraFields] = useState(defaultShowExtraFields);
+  const [form] = Form.useForm();
+  const extraFields = filter(fields, { extra: true });
+  const regularFields = difference(fields, extraFields);
+
+  const handleFinish = useCallback(
+    values => {
+      setIsSubmitting(true);
+      values = normalizeEmptyValuesToNull(fields, values);
+      onSubmit(
+        values,
+        msg => {
+          const { setFieldsValue, getFieldsValue } = form;
+          setIsSubmitting(false);
+          setFieldsValue(getFieldsValue()); // reset form touched state
+          notification.success(msg);
+        },
+        msg => {
+          setIsSubmitting(false);
+          notification.error(msg);
+        }
+      );
+    },
+    [form, fields, onSubmit]
+  );
+
+  const handleFinishFailed = useCallback(
+    ({ errorFields }) => {
+      form.scrollToField(errorFields[0].name);
+    },
+    [form]
+  );
+
+  return (
+    <Form
+      form={form}
+      id={id}
+      className="dynamic-form"
+      layout="vertical"
+      onFinish={handleFinish}
+      onFinishFailed={handleFinishFailed}>
+      <DynamicFormFields fields={regularFields} feedbackIcons={feedbackIcons} form={form} />
+      {!isEmpty(extraFields) && (
+        <div className="extra-options">
+          <Button
+            type="dashed"
+            block
+            className="extra-options-button"
+            onClick={() => setShowExtraFields(currentShowExtraFields => !currentShowExtraFields)}>
+            Additional Settings
+            <i className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })} />
+          </Button>
+          <Collapse collapsed={!showExtraFields} className="extra-options-content">
+            <DynamicFormFields fields={extraFields} feedbackIcons={feedbackIcons} form={form} />
+          </Collapse>
+        </div>
+      )}
+      {!hideSubmitButton && (
+        <Button className="w-100 m-t-20" type="primary" htmlType="submit" disabled={isSubmitting}>
+          {saveText}
+        </Button>
+      )}
+      <DynamicFormActions actions={actions} isFormDirty={form.isFieldsTouched()} />
+    </Form>
+  );
+}
+
+DynamicForm.propTypes = {
+  id: PropTypes.string,
+  fields: PropTypes.arrayOf(FieldType),
+  actions: PropTypes.arrayOf(ActionType),
+  feedbackIcons: PropTypes.bool,
+  hideSubmitButton: PropTypes.bool,
+  defaultShowExtraFields: PropTypes.bool,
+  saveText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+DynamicForm.defaultProps = {
+  id: null,
+  fields: [],
+  actions: [],
+  feedbackIcons: false,
+  hideSubmitButton: false,
+  defaultShowExtraFields: false,
+  saveText: "Save",
+  onSubmit: () => {},
+};

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

@@ -1,21 +1,27 @@
-@import '~@/assets/less/ant';
+@import "~@/assets/less/ant";
 
-.dynamic-form{
+@btn-extra-options-bg: fade(@redash-gray, 10%);
+@btn-extra-options-border: fade(@redash-gray, 15%);
+
+.dynamic-form {
   .extra-options {
     margin: 25px 0 10px;
   }
 
   .extra-options-button {
-    &, &:focus, &:hover {
+    &,
+    &:focus,
+    &:hover {
       height: 40px;
       font-weight: 500;
-      background-color: @btn-danger-bg;
-      border-color: @btn-danger-border;
+      background-color: @btn-extra-options-bg;
+      border-color: @btn-extra-options-border;
       color: @btn-default-color;
     }
 
-    &:focus, &:hover {
-      background-color: fade(@btn-danger-bg, 15%);
+    &:focus,
+    &:hover {
+      background-color: fade(@btn-extra-options-bg, 15%);
     }
   }
 

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

@@ -0,0 +1,82 @@
+import React from "react";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import getFieldLabel from "./getFieldLabel";
+
+import {
+  AceEditorField,
+  CheckboxField,
+  ContentField,
+  FileField,
+  InputField,
+  NumberField,
+  SelectField,
+  TextAreaField,
+} from "./fields";
+
+export const FieldType = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  type: PropTypes.oneOf([
+    "ace",
+    "text",
+    "textarea",
+    "email",
+    "password",
+    "number",
+    "checkbox",
+    "file",
+    "select",
+    "content",
+  ]).isRequired,
+  initialValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+  content: PropTypes.node,
+  mode: PropTypes.string,
+  required: PropTypes.bool,
+  extra: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  minLength: PropTypes.number,
+  placeholder: PropTypes.string,
+  contentAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  loading: PropTypes.bool,
+  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+});
+
+const FieldTypeComponent = {
+  checkbox: CheckboxField,
+  file: FileField,
+  select: SelectField,
+  number: NumberField,
+  textarea: TextAreaField,
+  ace: AceEditorField,
+  content: ContentField,
+};
+
+export default function DynamicFormField({ form, field, ...otherProps }) {
+  const { name, type, readOnly, autoFocus } = field;
+  const fieldLabel = getFieldLabel(field);
+
+  const fieldProps = {
+    ...field.props,
+    className: "w-100",
+    name,
+    type,
+    readOnly,
+    autoFocus,
+    placeholder: field.placeholder,
+    "data-test": fieldLabel,
+    ...otherProps,
+  };
+
+  const FieldComponent = get(FieldTypeComponent, type, InputField);
+  return <FieldComponent {...fieldProps} form={form} field={field} />;
+}
+
+DynamicFormField.propTypes = { field: FieldType.isRequired };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { each, includes, isUndefined, isEmpty, map } from "lodash";
+import { each, includes, isUndefined, isEmpty, isNil, map, get, some } from "lodash";
 
 function orderedInputs(properties, order, targetOptions) {
   const inputs = new Array(order.length);
@@ -9,7 +9,7 @@ function orderedInputs(properties, order, targetOptions) {
       name: key,
       title: properties[key].title,
       type: properties[key].type,
-      placeholder: properties[key].default && properties[key].default.toString(),
+      placeholder: isNil(properties[key].default) ? null : properties[key].default.toString(),
       required: properties[key].required,
       extra: properties[key].extra,
       initialValue: targetOptions[key],
@@ -124,8 +124,18 @@ function getBase64(file) {
   });
 }
 
+function hasFilledExtraField(type, target) {
+  const extraOptions = get(type, "configuration_schema.extra_options", []);
+  return some(extraOptions, optionName => {
+    const defaultOptionValue = get(type, ["configuration_schema", "properties", optionName, "default"]);
+    const targetOptionValue = get(target, ["options", optionName]);
+    return !isNil(targetOptionValue) && targetOptionValue !== defaultOptionValue;
+  });
+}
+
 export default {
   getFields,
   updateTargetWithValues,
   getBase64,
+  hasFilledExtraField,
 };

client/app/components/dynamic-form/fields/AceEditorField.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import AceEditorInput from "@/components/AceEditorInput";
+
+export default function AceEditorField({ form, field, ...otherProps }) {
+  return <AceEditorInput {...otherProps} />;
+}

client/app/components/dynamic-form/fields/CheckboxField.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import Checkbox from "antd/lib/checkbox";
+import getFieldLabel from "../getFieldLabel";
+
+export default function CheckboxField({ form, field, ...otherProps }) {
+  const fieldLabel = getFieldLabel(field);
+  return <Checkbox {...otherProps}>{fieldLabel}</Checkbox>;
+}

client/app/components/dynamic-form/fields/ContentField.jsx

@@ -0,0 +1,3 @@
+export default function ContentField({ field }) {
+  return field.content;
+}

client/app/components/dynamic-form/fields/FileField.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Button from "antd/lib/button";
+import Upload from "antd/lib/upload";
+import UploadOutlinedIcon from "@ant-design/icons/UploadOutlined";
+
+export default function FileField({ form, field, ...otherProps }) {
+  const { name, initialValue } = field;
+  const { getFieldValue } = form;
+  const disabled = getFieldValue(name) !== undefined && getFieldValue(name) !== initialValue;
+
+  return (
+    <Upload {...otherProps} beforeUpload={() => false}>
+      <Button disabled={disabled}>
+        <UploadOutlinedIcon /> Click to upload
+      </Button>
+    </Upload>
+  );
+}