Don't reuse getErrorMessage (#4972)

* Sankey: Make sure last stage has "Exit"

* Sankey: Use 2 as min stage width size to render

* Use null instead of "Exit"

* Add comment about corresponding exit node

* Add multiple stages on Cypress test

.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,18 +91,19 @@ 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

.circleci/docker-compose.cypress.yml

@@ -2,7 +2,7 @@ version: '3'
 services:
   server:
     build: ../
-    command: dev_server
+    command: server
     depends_on:
       - postgres
       - redis
@@ -31,26 +31,12 @@ services:
       REDASH_LOG_LEVEL: "INFO"
       REDASH_REDIS_URL: "redis://redis:6379/0"
       REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-      QUEUES: "default periodic schemas"
-  celery_worker:
-    build: ../
-    command: celery_worker
-    depends_on:
-      - server
-    environment:
-      PYTHONUNBUFFERED: 0
-      REDASH_LOG_LEVEL: "INFO"
-      REDASH_REDIS_URL: "redis://redis:6379/0"
-      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-      QUEUES: "queries,scheduled_queries"
-      WORKERS_COUNT: 2
   cypress:
     build:
       context: ../
       dockerfile: .circleci/Dockerfile.cypress
     depends_on:
       - server
-      - celery_worker
       - worker
       - scheduler
     environment:
@@ -60,6 +46,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
 

.codeclimate.yml

@@ -1,32 +0,0 @@
-version: "2"
-checks:
-  complex-logic:
-    enabled: false
-  file-lines:
-    enabled: false
-  method-complexity:
-    enabled: false
-  method-count:
-    enabled: false
-  method-lines:
-    config:
-      threshold: 100
-  nested-control-flow:
-    enabled: false
-  identical-code:
-    enabled: false
-  similar-code:
-    enabled: false
-plugins:
-  pep8:
-    enabled: true
-  eslint:
-    enabled: false
-exclude_patterns:
-  - "tests/**/*.py"
-  - "migrations/**/*.py"
-  - "setup/**/*"
-  - "bin/**/*"
-  - "**/node_modules/"
-  - "client/dist/"
-  - "**/*.pyc"

.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

@@ -0,0 +1,63 @@
+enabled: true
+
+auto: false
+
+# Open Restyle PRs?
+pull_requests: true
+
+# Leave comments on the original PR linking to the Restyle PR?
+comments: true
+
+# Set commit statuses on the original PR?
+statuses:
+  # Red status in the case of differences found
+  differences: true
+  # Green status in the case of no differences found
+  no_differences: true
+  # Red status if we encounter errors restyling
+  error: true
+
+# Request review on the Restyle PR?
+#
+# Possible values:
+#
+#   author: From the author of the original PR
+#   owner: From the owner of the repository
+#   none: Don't
+#
+# One value will apply to both origin and forked PRs, but you can also specify
+# separate values.
+#
+#   request_review:
+#     origin: author
+#     forked: owner
+#
+request_review: author
+
+# Add labels to any created Restyle PRs
+#
+# These can be used to tell other automation to avoid our PRs.
+#
+labels: ["Skip CI"]
+
+# Labels to ignore
+#
+# PRs with any of these labels will be ignored by Restyled.
+#
+# ignore_labels:
+#   - restyled-ignore
+
+# 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
+      - client/cypress/**/*.js

CHANGELOG.md

@@ -1,27 +1,174 @@
 # 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.
+
 ## v8.0.0-beta.2 - 2019-09-16
 
 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.
@@ -35,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
@@ -48,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.
-- MySQL: 
-    - Support for calling Stored Procedures and better handling of query cancellation.
-    - Switch to using `mysqlclient` (a maintained fork of `Python-MySQL`).
+  - 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`).
 - MongoDB: Support serializing Decimal128 values.
 - Presto: support for passwords in connection settings.
 - Amazon Athena: allow to specify custom work group.
@@ -71,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**

CONTRIBUTING.md

@@ -46,8 +46,8 @@ When creating a new bug report, please make sure to:
 
 If you would like to suggest an enhancement or ask for a new feature:
 
-- Please check [the roadmap](https://trello.com/b/b2LUHU7A/redash-roadmap) for existing Trello card for what you want to suggest/ask. If there is, feel free to upvote it to signal interest or add your comments.
-- If there is no existing card, open a thread in [the forum](https://discuss.redash.io/c/feature-requests) to start a discussion about what you want to suggest. Try to provide as much details and context as possible and include information about *the problem you want to solve* rather only *your proposed solution*.
+- Please check [the forum](https://discuss.redash.io/c/feature-requests/5) for existing threads about what you want to suggest/ask. If there is, feel free to upvote it to signal interest or add your comments.
+- If there is no open thread, you're welcome to start one to have a discussion about what you want to suggest. Try to provide as much details and context as possible and include information about *the problem you want to solve* rather only *your proposed solution*.
 
 ### Pull Requests
 
@@ -55,9 +55,9 @@ If you would like to suggest an enhancement or ask for a new feature:
 - Include screenshots and animated GIFs in your pull request whenever possible.
 - Please add [documentation](#documentation) for new features or changes in functionality along with the code.
 - Please follow existing code style:
-  - Python: we use PEP8 for Python.
-  - Javascript: we use Airbnb's style guides for [JavaScript](https://github.com/airbnb/javascript#naming-conventions) and [React](https://github.com/airbnb/javascript/blob/master/react) (currently we don't follow Airbnb's convention for naming files, but we're gradually fixing this). To make it automatic and easy, we recommend using [Prettier](https://github.com/prettier/prettier).
-
+  - Python: we use [Black](https://github.com/psf/black) to auto format the code.
+  - Javascript: we use [Prettier](https://github.com/prettier/prettier) to auto-format the code.
+  
 ### Documentation
 
 The project's documentation can be found at [https://redash.io/help/](https://redash.io/help/). The [documentation sources](https://github.com/getredash/website/tree/master/src/pages/kb) are hosted on GitHub. To contribute edits / new pages, you can use GitHub's interface. Click the "Edit on GitHub" link on the documentation page to quickly open the edit interface.
@@ -66,9 +66,9 @@ The project's documentation can be found at [https://redash.io/help/](https://re
 
 ### Release Method
 
-We publish a stable release every ~2 months, although the goal is to get to a stable release every month. You can see the change log on [GitHub releases page](https://github.com/getredash/redash/releases).
+We publish a stable release every ~3-4 months, although the goal is to get to a stable release every month. 
 
-Every build of the master branch updates the latest *RC release*. These releases are usually stable, but might contain regressions and therefore recommended for "advanced users" only.
+Every build of the master branch updates the *redash/redash:preview* Docker Image. These releases are usually stable, but might contain regressions and therefore recommended for "advanced users" only.
 
 When we release a new stable release, we also update the *latest* Docker image tag, the EC2 AMIs and GCE images.
 

Dockerfile

@@ -1,19 +1,24 @@
-FROM node:10 as frontend-builder
+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

LICENSE

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

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

@@ -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():
@@ -94,9 +94,9 @@ def load_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

@@ -1,15 +1,6 @@
 #!/bin/bash
 set -e
 
-celery_worker() {
-  WORKERS_COUNT=${WORKERS_COUNT:-2}
-  QUEUES=${QUEUES:-queries,scheduled_queries}
-  WORKER_EXTRA_OPTIONS=${WORKER_EXTRA_OPTIONS:-}
-
-  echo "Starting $WORKERS_COUNT workers for queues: $QUEUES..."
-  exec /usr/local/bin/celery worker --app=redash.worker -c$WORKERS_COUNT -Q$QUEUES -linfo --max-tasks-per-child=10 -Ofair $WORKER_EXTRA_OPTIONS
-}
-
 scheduler() {
   echo "Starting RQ scheduler..."
 
@@ -25,7 +16,10 @@ dev_scheduler() {
 worker() {
   echo "Starting RQ worker..."
 
-  exec /app/manage.py rq worker $QUEUES
+  export WORKERS_COUNT=${WORKERS_COUNT:-2}
+  export QUEUES=${QUEUES:-}
+  
+  supervisord -c worker.conf
 }
 
 dev_worker() {
@@ -34,15 +28,6 @@ dev_worker() {
   exec watchmedo auto-restart --directory=./redash/ --pattern=*.py --recursive -- ./manage.py rq worker $QUEUES
 }
 
-dev_celery_worker() {
-  WORKERS_COUNT=${WORKERS_COUNT:-2}
-  QUEUES=${QUEUES:-queries,scheduled_queries}
-
-  echo "Starting $WORKERS_COUNT workers for queues: $QUEUES..."
-
-  exec watchmedo auto-restart --directory=./redash/ --pattern=*.py --recursive -- /usr/local/bin/celery worker --app=redash.worker -c$WORKERS_COUNT -Q$QUEUES -linfo --max-tasks-per-child=10 -Ofair
-}
-
 server() {
   # Recycle gunicorn workers every n-th request. See http://docs.gunicorn.org/en/stable/settings.html#max-requests for more details.
   MAX_REQUESTS=${MAX_REQUESTS:-1000}
@@ -54,14 +39,6 @@ create_db() {
   exec /app/manage.py database create_tables
 }
 
-celery_healthcheck() {
-  exec /usr/local/bin/celery inspect ping --app=redash.worker -d celery@$HOSTNAME
-}
-
-rq_healthcheck() {
-  exec /app/manage.py rq healthcheck
-}
-
 help() {
   echo "Redash Docker."
   echo ""
@@ -69,14 +46,10 @@ help() {
   echo ""
 
   echo "server -- start Redash server (with gunicorn)"
-  echo "celery_worker -- start Celery worker"
-  echo "dev_celery_worker -- start Celery worker process which picks up code changes and reloads"
   echo "worker -- start a single RQ worker"
   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 "celery_healthcheck -- runs a Celery healthcheck. Useful for Docker's HEALTHCHECK mechanism."
-  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"
@@ -114,25 +87,13 @@ case "$1" in
     shift
     dev_scheduler
     ;;
-  celery_worker)
-    shift
-    celery_worker
-    ;;
-  dev_celery_worker)
-    shift
-    dev_celery_worker
-    ;;
   dev_worker)
     shift
     dev_worker
     ;;
-  rq_healthcheck)
-    shift
-    rq_healthcheck
-    ;;
   celery_healthcheck)
     shift
-    celery_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

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

@@ -10,7 +10,6 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "angularjs-annotate",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-object-assign",
     ["babel-plugin-transform-builtin-extend", {

client/.eslintignore

@@ -1,3 +1,4 @@
 build/*.js
+dist
 config/*.js
 client/dist

client/.eslintrc.js

@@ -1,11 +1,10 @@
 module.exports = {
   root: true,
-  extends: ["airbnb", "plugin:compat/recommended"],
+  extends: ["react-app", "plugin:compat/recommended", "prettier"],
   plugins: ["jest", "compat", "no-only-tests"],
   settings: {
     "import/resolver": "webpack"
   },
-  parser: "babel-eslint",
   env: {
     browser: true,
     node: true
@@ -13,54 +12,6 @@ module.exports = {
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
-    "no-param-reassign": 0,
-    "no-mixed-operators": 0,
-    "no-underscore-dangle": 0,
-    "no-use-before-define": ["error", "nofunc"],
-    "prefer-destructuring": "off",
-    "prefer-template": "off",
-    "no-restricted-properties": "off",
-    "no-restricted-globals": "off",
-    "no-multi-assign": "off",
-    "no-lonely-if": "off",
-    "consistent-return": "off",
-    "no-control-regex": "off",
-    "no-multiple-empty-lines": "warn",
-    "no-only-tests/no-only-tests": "error",
-    "operator-linebreak": "off",
-    "react/destructuring-assignment": "off",
-    "react/jsx-filename-extension": "off",
-    "react/jsx-one-expression-per-line": "off",
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error",
-    "react/jsx-wrap-multilines": "warn",
-    "react/no-access-state-in-setstate": "warn",
-    "react/prefer-stateless-function": "warn",
-    "react/forbid-prop-types": "warn",
-    "react/prop-types": "warn",
     "jsx-a11y/anchor-is-valid": "off",
-    "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/label-has-associated-control": [
-      "warn",
-      {
-        controlComponents: true
-      }
-    ],
-    "jsx-a11y/label-has-for": "off",
-    "jsx-a11y/no-static-element-interactions": "off",
-    "max-len": [
-      "error",
-      120,
-      2,
-      {
-        ignoreUrls: true,
-        ignoreComments: false,
-        ignoreRegExpLiterals: true,
-        ignoreStrings: true,
-        ignoreTemplateLiterals: true
-      }
-    ],
-    "no-else-return": ["error", { allowElseIf: true }],
-    "object-curly-newline": ["error", { consistent: true }]
   }
 };

client/app/.eslintrc.js

@@ -7,4 +7,4 @@ module.exports = {
   rules: {
     "jest/no-focused-tests": "off",
   },
-};
+};

client/app/__tests__/enzyme_setup.js

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

client/app/__tests__/mocks.js

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

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,33 +1,33 @@
-@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/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/badge/style/index";
 @import "~antd/lib/card/style/index";
 @import "~antd/lib/spin/style/index";
@@ -36,7 +36,8 @@
 @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;
@@ -86,6 +87,11 @@
 // Button overrides
 .@{btn-prefix-cls} {
   transition-duration: 150ms;
+
+  &.icon-button {
+    width: 32px;
+    padding: 0 10px;
+  }
 }
 
 // Fix ant input number showing duplicate arrows
@@ -232,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;
@@ -362,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%;
@@ -374,4 +380,24 @@
     line-height: 20px;
     margin-top: 9px;
   }
-}
+}
+
+.@{menu-prefix-cls} {
+  // invert stripe position with class .invert-stripe-position
+  &-inline.invert-stripe-position {
+    .@{menu-prefix-cls}-item {
+      &::after {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
+}
+
+// overrides for checkbox
+@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox";
+
+.@{checkbox-prefix-cls}-wrapper + span,
+.@{checkbox-prefix-cls} + span {
+  padding-right: 0;
+}

client/app/assets/less/inc/ace-editor.less

@@ -1,7 +1,25 @@
 .ace_editor {
-  border: 1px solid #eee;
+  border: 1px solid fade(@redash-gray, 15%);
   height: 100%;
   margin-bottom: 10px;
+
+  &.ace_autocomplete .ace_completion-highlight {
+    text-shadow: none !important;
+    background: #ffff005e;
+    font-weight: 600;
+  }
+
+  &.ace-tm {
+    .ace_gutter {
+      background: #fff !important;
+    }
+
+    .ace_gutter-active-line {
+      background-color: fade(@redash-gray, 20%) !important;
+    }
+
+    .ace_marker-layer .ace_active-line {
+      background: fade(@redash-gray, 9%) !important;
+    }
+  }
 }
-
-

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

@@ -1,53 +1,45 @@
 .alert-page h3 {
-    flex-grow: 1;
-    
-    input {
-        margin: -0.2em 0;
-        width: 100%;
-        min-width: 170px;
-    }
+  flex-grow: 1;
+
+  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;
-    }
+  .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;
-    }
+  &::after {
+    margin-right: 0 !important;
+  }
 }
-
-.alert-actions {
-    flex-grow: 1;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    margin-right: -15px;
-}

client/app/assets/less/inc/angular.less

@@ -1,8 +0,0 @@
-a[ng-click] {
-  cursor: pointer;
-}
-
-/* Immediately apply ng-cloak, instead of waiting for angular.js to load: */
-[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
-  display: none !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

@@ -1,283 +1,269 @@
-*, button, input, i, a {
-    -webkit-font-smoothing: antialiased;
+*,
+button,
+input,
+i,
+a {
+  -webkit-font-smoothing: antialiased;
 }
 
 *,
 *:active,
 *:hover {
-    outline: none !important;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+  outline: none !important;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 }
 
 html {
-    overflow-x: ~"hidden\0/";
-    -ms-overflow-style: auto;
+  overflow-x: ~"hidden\0/";
+  -ms-overflow-style: auto;
 }
 
-html, body {
-    min-height: 100vh;
+html,
+body {
+  min-height: 100vh;
 }
 
 body {
-    padding-top: 0;
-    background: #F6F8F9;
-    font-family: @redash-font;
-    position: relative;
+  padding-top: 0;
+  background: #f6f8f9;
+  font-family: @redash-font;
+  position: relative;
 
-    app-view {
-      padding-bottom: 15px;
+  #application-root {
+    padding-bottom: 15px;
+  }
+
+  &.headless {
+    #application-root {
+      padding-top: 10px;
+      padding-bottom: 0;
     }
 
-    &.headless {
-        app-view {
-          padding-top: 10px;
-          padding-bottom: 0;
-        }
-
-        .app-header-wrapper {
-            display: none;
-        }
+    .app-header-wrapper {
+      display: none;
     }
+  }
 }
 
-app-view {
-    min-height: 100vh;
+#application-root {
+  min-height: 100vh;
 }
 
-app-view, #app-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+#application-root,
+#app-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 strong {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 #content {
-    position: relative;
-    padding-top: 30px;
-    padding-bottom: 30px;
+  position: relative;
+  padding-top: 30px;
+  padding-bottom: 30px;
 
-    @media (min-width: (@screen-sm-min + 1)) {
-        padding-right: 15px;
-        padding-left: 15px;
-    }
+  @media (min-width: (@screen-sm-min + 1)) {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
 
-    @media (min-width: (@screen-lg-min + 80px)) {
-        margin-left: @sidebar-left-width;
-    }
+  @media (min-width: (@screen-lg-min + 80px)) {
+    margin-left: @sidebar-left-width;
+  }
 
-    @media (min-width: @screen-sm-min) and (max-width: (@screen-md-max + 80px)) {
-        margin-left: @sidebar-left-mid-width;
-    }
+  @media (min-width: @screen-sm-min) and (max-width: (@screen-md-max + 80px)) {
+    margin-left: @sidebar-left-mid-width;
+  }
 
-    @media (max-width: (@screen-sm-min)) {
-        margin-left: 0;
-    }
+  @media (max-width: (@screen-sm-min)) {
+    margin-left: 0;
+  }
 }
 
 .container {
-    &.c-boxed {
-        max-width: @boxed-width;
-    }
+  &.c-boxed {
+    max-width: @boxed-width;
+  }
 }
 
 // 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, queries-search-results-page, .fixed-container {
-        .container {
-            width: 750px;
-        }
+  .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, queries-search-results-page, .fixed-container {
-        .container {
-            width: 970px;
-        }
+  .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, queries-search-results-page, .fixed-container {
-        .container {
-            width: 1170px;
-        }
+  .settings-screen,
+  .home-page,
+  .page-dashboard-list,
+  .page-queries-list,
+  .page-alerts-list,
+  .alert-page,
+  .fixed-container {
+    .container {
+      width: 1170px;
     }
+  }
 }
 
 .scrollbox {
-    overflow: auto;
-    position: relative;
+  overflow: auto;
+  position: relative;
 }
 
 .clickable {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .resize-vertical {
-    resize: vertical !important;
-    transition: height 0s !important;
+  resize: vertical !important;
+  transition: height 0s !important;
 }
 .resize-horizontal {
-    resize: horizontal !important;
-    transition: width 0s !important;
+  resize: horizontal !important;
+  transition: width 0s !important;
 }
 .resize-both,
 .resize-vertical.resize-horizontal {
-    resize: both !important;
-    transition: height 0s, width 0s !important;
-}
-
-// Ace Editor
-.ace_editor {
-    border: 1px solid fade(@redash-gray, 15%) !important;
-}
-
-.ace-tm {
-    .ace_gutter {
-        background: #fff !important;
-    }
-
-    .ace_gutter-active-line {
-        background-color: fade(@redash-gray, 20%) !important;
-    }
-
-    .ace_marker-layer .ace_active-line {
-        background: fade(@redash-gray, 9%) !important;
-    }
+  resize: both !important;
+  transition: height 0s, width 0s !important;
 }
 
 .bg-ace {
-    background-color: fade(@redash-gray, 12%) !important;
+  background-color: fade(@redash-gray, 12%) !important;
 }
 
 // resizeable
-.rg-top span, .rg-bottom span {
-    height: 3px;
-    border-color: #b1c1ce; // TODO: variable
+.rg-top span,
+.rg-bottom span {
+  height: 3px;
+  border-color: #b1c1ce; // TODO: variable
 }
 
 .rg-bottom {
-    bottom: 15px;
+  bottom: 15px;
 
-    span {
-        margin: 1.5px 0 0 -10px;
-    }
+  span {
+    margin: 1.5px 0 0 -10px;
+  }
 }
 
 // Plotly
 text.slicetext {
-    text-shadow: 1px 1px 5px #333;
+  text-shadow: 1px 1px 5px #333;
 }
 
 // markdown
 .markdown strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .markdown img {
-    max-width: 100%;
+  max-width: 100%;
 }
 
-.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
-    background-color: fade(@redash-gray, 15%);
-    color: #111;
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: fade(@redash-gray, 15%);
+  color: #111;
 }
 
 .profile__image--sidebar {
-    border-radius: 100%;
-    margin-right: 3px;
-    margin-top: -2px;
+  border-radius: 100%;
+  margin-right: 3px;
+  margin-top: -2px;
 }
 
 .profile__image--settings {
-    border-radius: 100%;
+  border-radius: 100%;
 }
 
 .profile__image_thumb {
-    border-radius: 100%;
-    margin-right: 3px;
-    margin-top: -2px;
-    width: 20px;
-    height: 20px;
+  border-radius: 100%;
+  margin-right: 3px;
+  margin-top: -2px;
+  width: 20px;
+  height: 20px;
 }
 
-
 // Error state
 .error-state {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    text-align: center;
-    margin-top: 25vh;
-    padding: 35px;
-    font-size: 14px;
-    line-height: 21px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  text-align: center;
+  margin-top: 25vh;
+  padding: 35px;
+  font-size: 14px;
+  line-height: 21px;
 
-    .error-state__icon {
-        .zmdi {
-            font-size: 64px;
-            color: @redash-gray;
-        }
+  .error-state__icon {
+    .zmdi {
+      font-size: 64px;
+      color: @redash-gray;
     }
+  }
 
-    @media (max-width: 767px) {
-        margin-top: 10vh;
-    }
+  @media (max-width: 767px) {
+    margin-top: 10vh;
+  }
 }
 
 .warning-icon-danger {
-    color: @red !important;
+  color: @red !important;
 }
 
 // page
-.page-header--new .btn-favourite, .page-header--new .btn-archive {
+.page-title {
+  display: flex;
+  align-items: center;
+
+  .label {
+    margin-top: 3px;
+    display: inline-block;
+  }
+
+  .favorites-control {
     font-size: 19px;
+    margin-right: 10px;
   }
+}
 
-  .page-title {
-    display: flex;
-    align-items: center;
-
-    h3 {
-      margin-right: 5px !important;
-    }
-
-    .label {
-      margin-top: 3px;
-      display: inline-block;
-    }
-
-    favorites-control {
-      margin-right: 5px;
-    }
-
-    @media (max-width: 767px) {
-      display: block;
-
-      favorites-control {
-        float: left;
-      }
-
-      h3 {
-        width: 100%;
-        margin-bottom: 5px !important;
-        display: block !important;
-      }
-    }
+.page-header-wrapper,
+.page-header--new {
+  h3 {
+    margin: 0.2em 0;
+    line-height: 1.3;
+    font-weight: 500;
   }
+}
 
-  .page-header-wrapper, .page-header--new {
-    h3 {
-      margin: 0.2em 0;
-      line-height: 1.3;
-      font-weight: 500;
-    }
-  }
-
-  .select-option-divider {
-    margin: 10px 0 !important;
-  }
+.select-option-divider {
+  margin: 10px 0 !important;
+}

client/app/assets/less/inc/edit-in-place.less

@@ -7,6 +7,7 @@
 }
 
 .edit-in-place span.editable {
+  display: inline-block;
   cursor: pointer;
 }
 
@@ -23,32 +24,3 @@
 .edit-in-place {
   display: inline-block;
 }
-
-.edit-in-place {
-  .rd-form-control {
-    padding: 0px 6px;
-    width: 30vw;
-  }
-
-  &.active {
-    textarea.rd-form-control {
-      height: 29px;
-      width: 40vw;
-    }
-  }
-}
-
-
-@media (max-width: 880px) {
-  .edit-in-place {
-    .rd-form-control {
-      width: 50vw;
-    }
-
-    &.active {
-      textarea.rd-form-control {
-        width: 50vw;
-      }
-    }
-  }
-}

client/app/assets/less/inc/form.less

@@ -1,9 +1,9 @@
 label {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 textarea.v-resizable {
-    resize: vertical;
+  resize: vertical;
 }
 
 .form-group {
@@ -29,285 +29,266 @@ textarea.v-resizable {
   }
 }
 
-/* light version of bootstrap's form-control */
-.rd-form-control {
-  display: block;
-  padding: 6px 12px;
-  line-height: 1.428571429;
-  color: #555555;
-  vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  width: 90%;
-}
-
-
 /* --------------------------------------------------------
     Input Fields
 -----------------------------------------------------------*/
 .form-control {
-    .transition(all);
-    .transition-duration(300ms);
-    resize: none;
-    box-shadow: 0 0 0 40px rgba(0, 0, 0, 0) !important;
-    border-radius: @redash-input-radius;
+  .transition(all);
+  .transition-duration(300ms);
+  resize: none;
+  box-shadow: 0 0 0 40px rgba(0, 0, 0, 0) !important;
+  border-radius: @redash-input-radius;
 
-    &:focus {
-        box-shadow: none !important;
-        border-color: @blue;
-    }
-    &:hover {
-        border-color: @blue;
-    }
+  &:focus {
+    box-shadow: none !important;
+    border-color: @blue;
+  }
+  &:hover {
+    border-color: @blue;
+  }
 }
 
 /* --------------------------------------------------------
     Custom Checkbox + Radio
 -----------------------------------------------------------*/
 .cra-validatation(@color) {
-    input[type="checkbox"], input[type="radio"] {
-        & + .input-helper {
-            border-color: @color;
-        }
-
-        &:checked + .input-helper:before {
-            background: @color;
-        }
+  input[type="checkbox"],
+  input[type="radio"] {
+    & + .input-helper {
+      border-color: @color;
     }
+
+    &:checked + .input-helper:before {
+      background: @color;
+    }
+  }
 }
 
 .cr-alt {
+  position: relative;
+  padding-top: 0;
+  margin: 0;
+
+  label {
     position: relative;
-    padding-top: 0;
+    padding-left: 28px;
+  }
+
+  &.has-success {
+    .cra-validatation(@green);
+  }
+
+  &.has-warning {
+    .cra-validatation(@orange);
+  }
+
+  &.has-error {
+    .cra-validatation(@red);
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    .opacity(0);
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    z-index: 10;
     margin: 0;
+    top: 0;
+    left: 0;
+    cursor: pointer;
 
-    label {
-        position: relative;
-        padding-left: 28px;
+    & + .input-helper {
+      border: 1px solid @input-border;
+      width: 19px;
+      height: 19px;
+      background: #fff;
+      position: absolute;
+      left: 0;
+      top: -1px;
+      cursor: pointer;
     }
 
-    &.has-success {
-        .cra-validatation(@green);
+    &:checked + .input-helper:before {
+      content: "";
+      width: 9px;
+      height: 9px;
+      background: #31acff;
+      position: absolute;
+      left: 4px;
+      top: 4px;
+    }
+  }
+
+  input[type="radio"] {
+    & + i {
+      border-radius: 50%;
     }
 
-    &.has-warning {
-        .cra-validatation(@orange);
-
+    &:checked + i:before {
+      border-radius: 50%;
     }
+  }
 
-    &.has-error {
-        .cra-validatation(@red);
-
-    }
-
-    input[type="checkbox"], input[type="radio"] {
-        .opacity(0);
-        width: 20px;
-        height: 20px;
-        position: absolute;
-        z-index: 10;
-        margin: 0;
-        top: 0;
-        left: 0;
-        cursor: pointer;
-
-        & + .input-helper {
-            border: 1px solid @input-border;
-            width: 19px;
-            height: 19px;
-            background: #fff;
-            position: absolute;
-            left: 0;
-            top: -1px;
-            cursor: pointer;
-        }
-
-        &:checked + .input-helper:before {
-            content: "";
-            width: 9px;
-            height: 9px;
-            background: #31ACFF;
-            position: absolute;
-            left: 4px;
-            top: 4px;
-        }
-    }
-
-    input[type="radio"] {
-        & + i {
-            border-radius: 50%;
-        }
-
-        &:checked + i:before {
-            border-radius: 50%;
-        }
-    }
-
-    &.disabled {
-        .opacity(0.7);
-    }
+  &.disabled {
+    .opacity(0.7);
+  }
 }
 
 .checkbox-inline,
 .radio-inline {
-    padding-left: 27px;
+  padding-left: 27px;
 }
 
-
 /* --------------------------------------------------------
     Input Addon
 -----------------------------------------------------------*/
 .input-group {
+  .input-group-addon {
+    min-width: 40px;
+    color: #333;
+    padding: 0;
+  }
+
+  &:not([class*="input-group-"]) {
     .input-group-addon {
-        min-width: 40px;
-        color: #333;
-        padding: 0;
-    }
-
-    &:not([class*="input-group-"]) {
-        .input-group-addon {
-            font-size: 15px;
-        }
+      font-size: 15px;
     }
+  }
 }
 
-
 /* --------------------------------------------------------
     Toggle Switch
 -----------------------------------------------------------*/
-.ts-color(@color){
-    input {
-        &:not(:disabled) {
-            &:checked {
-                & + .ts-helper {
-                    background: fade(@color, 50%);
+.ts-color(@color) {
+  input {
+    &:not(:disabled) {
+      &:checked {
+        & + .ts-helper {
+          background: fade(@color, 50%);
 
-                    &:before {
-                        background: @color;
-                    }
+          &:before {
+            background: @color;
+          }
 
-                    &:active {
-                        &:before {
-                            box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px fade(@color, 20%);
-                        }
-                    }
-                }
+          &:active {
+            &:before {
+              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px fade(@color, 20%);
             }
+          }
         }
+      }
     }
+  }
 }
 
 .toggle-switch {
+  display: inline-block;
+  vertical-align: top;
+  .user-select(none);
+
+  .ts-label {
     display: inline-block;
+    margin: 0 20px 0 0;
     vertical-align: top;
-    .user-select(none);
+    -webkit-transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
+  }
 
-    .ts-label {
-        display: inline-block;
-        margin: 0 20px 0 0;
-        vertical-align: top;
-        -webkit-transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
-        transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
+  .ts-helper {
+    display: inline-block;
+    position: relative;
+    width: 40px;
+    height: 16px;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.26);
+    -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    vertical-align: middle;
+    cursor: pointer;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: -4px;
+      left: -4px;
+      width: 24px;
+      height: 24px;
+      background: #fafafa;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+      border-radius: 50%;
+      webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+      transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
+  }
 
+  &:not(.disabled) {
     .ts-helper {
-        display: inline-block;
-        position: relative;
-        width: 40px;
-        height: 16px;
-        border-radius: 8px;
-        background: rgba(0,0,0,0.26);
-        -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-        transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-        vertical-align: middle;
-        cursor: pointer;
-
+      &:active {
         &:before {
-            content: '';
-            position: absolute;
-            top: -4px;
-            left: -4px;
-            width: 24px;
-            height: 24px;
-            background: #fafafa;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.28);
-            border-radius: 50%;
-            webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-            transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(128, 128, 128, 0.1);
         }
+      }
     }
+  }
 
-    &:not(.disabled) {
-        .ts-helper {
-            &:active {
-                &:before {
-                    box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
-                }
-            }
+  input {
+    position: absolute;
+    z-index: 1;
+    width: 46px;
+    margin: 0 0 0 -4px;
+    height: 24px;
+    .opacity(0);
+    cursor: pointer;
+
+    &:checked {
+      & + .ts-helper {
+        &:before {
+          left: 20px;
         }
+      }
     }
+  }
 
-    input {
-        position: absolute;
-        z-index: 1;
-        width: 46px;
-        margin: 0 0 0 -4px;
-        height: 24px;
-        .opacity(0);
-        cursor: pointer;
+  &:not([data-ts-color]) {
+    .ts-color(@teal);
+  }
 
-        &:checked {
-            & + .ts-helper {
-                &:before {
-                    left: 20px;
-                }
-            }
-        }
-    }
+  &.disabled {
+    .opacity(0.6);
+  }
 
-    &:not([data-ts-color]){
-        .ts-color(@teal);
-    }
+  &[data-ts-color="red"] {
+    .ts-color(@red);
+  }
 
-    &.disabled {
-        .opacity(0.6);
-    }
+  &[data-ts-color="blue"] {
+    .ts-color(@blue);
+  }
 
-    &[data-ts-color="red"] {
-        .ts-color(@red);
-    }
+  &[data-ts-color="amber"] {
+    .ts-color(@amber);
+  }
 
-    &[data-ts-color="blue"] {
-        .ts-color(@blue);
-    }
+  &[data-ts-color="purple"] {
+    .ts-color(@purple);
+  }
 
-    &[data-ts-color="amber"] {
-        .ts-color(@amber);
-    }
+  &[data-ts-color="pink"] {
+    .ts-color(@pink);
+  }
 
-    &[data-ts-color="purple"] {
-        .ts-color(@purple);
-    }
+  &[data-ts-color="lime"] {
+    .ts-color(@lime);
+  }
 
-    &[data-ts-color="pink"] {
-        .ts-color(@pink);
-    }
-
-    &[data-ts-color="lime"] {
-        .ts-color(@lime);
-    }
-
-    &[data-ts-color="cyan"] {
-        .ts-color(@cyan);
-    }
-
-    &[data-ts-color="green"] {
-        .ts-color(@green);
-    }
+  &[data-ts-color="cyan"] {
+    .ts-color(@cyan);
+  }
 
+  &[data-ts-color="green"] {
+    .ts-color(@green);
+  }
 }

client/app/assets/less/inc/growl.less

@@ -1,28 +0,0 @@
-/* angular-growl */
-.growl {
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  float: right;
-  width: 250px;
-  z-index: 10000;
-}
-
-.growl-item.ng-enter,
-.growl-item.ng-leave {
-  -webkit-transition: 0.5s linear all;
-  -moz-transition: 0.5s linear all;
-  -o-transition: 0.5s linear all;
-  transition: 0.5s linear all;
-}
-
-.growl-item.ng-enter,
-.growl-item.ng-leave.ng-leave-active {
-  opacity: 0;
-}
-
-.growl-item.ng-leave,
-.growl-item.ng-enter.ng-enter-active {
-  opacity: 1;
-
-}

client/app/assets/less/inc/list-group.less

@@ -17,31 +17,6 @@
     }
 }
 
-tags-list {
-  a {
-    line-height: 1.1;
-  }
-}
-
-.tags-list__name {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 88%;
-  line-height: 1.3;
-}
-
-.tags-list {
-  .badge-light {
-    background: fade(@redash-gray, 10%);
-    color: fade(@redash-gray, 75%);
-  }
-  
-  a:hover {
-    cursor: pointer;
-  }
-}
-
 .max-character {
   .text-overflow();
 }

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

@@ -234,4 +234,9 @@
     .hide-in-percy, .pace {
         visibility: hidden;
     }
+
+    // hide tooltips in Percy
+    .ant-tooltip {
+        display: none !important;
+    }
 }

client/app/assets/less/inc/overlay.less

@@ -1,11 +0,0 @@
-.overlay {
-  background-color: #808080;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 0;
-  z-index: 1000;
-  opacity: 0.8;
-}

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

@@ -31,6 +31,8 @@ div.table-name {
   overflow-x: hidden;
   border: none;
   margin-top: 10px;
+  position: relative;
+  height: 100%;
 
   .collapse.in {
     background: transparent;
@@ -72,11 +74,12 @@ div.table-name {
 
 .schema-control {
   display: flex;
+  flex-wrap: nowrap;
   padding: 0;
 
- .form-control {
-   margin-right: 5px;
- }
+  .ant-btn {
+    height: auto;
+  }
 }
 
 .parameter-label {

client/app/assets/less/inc/tab.less

@@ -1,146 +0,0 @@
-.tab-nav {
-    list-style: none;
-    padding: 0;
-    white-space: nowrap;
-    margin: 0 0 10px 0;
-    overflow: auto;
-    box-shadow: inset 0 -2px 0 0 #eee;
-
-    & > li {
-        display: inline-block;
-        vertical-align: top;
-
-        & > a {
-            display: inline-block;
-            color: #7a7a7a;
-            text-transform: uppercase;
-            position: relative;
-            width: 100%;
-            font-weight: 500;
-
-            &:after {
-                content: "";
-                height: 2px;
-                position: absolute;
-                width: 100%;
-                left: 0;
-                bottom: 0;
-                display: none;
-            }
-
-            @media (min-width: @screen-sm-min) {
-                padding: 15px;
-            }
-
-            @media (max-width: @screen-sm-min) {
-                padding: 15px 8px;
-            }
-        }
-
-        &.active {
-            & > a {
-                color: #000;
-
-                &:after {
-                    display: block;
-                }
-            }
-        }
-    }
-
-    &.tab-nav-right {
-        text-align: right;
-    }
-
-    &.tn-justified {
-        & > li {
-            display: table-cell;
-            width: 1%;
-            text-align: center;
-        }
-    }
-
-    &.tn-icon {
-        & > li {
-            .zmdi {
-                font-size: 22px;
-                line-height: 100%;
-                min-height: 25px;
-            }
-        }
-    }
-
-    &:not([data-tab-color]) {
-        & > li > a:after {
-            background: @blue;
-        }
-    }
-
-    &[data-tab-color="green"] {
-        & > li > a:after {
-            background: @green;
-        }
-    }
-
-    &[data-tab-color="red"] {
-        & > li > a:after {
-            background: @red;
-        }
-    }
-
-    &[data-tab-color="teal"] {
-        & > li > a:after {
-            background: @teal;
-        }
-    }
-
-    &[data-tab-color="amber"] {
-        & > li > a:after {
-            background: @amber;
-        }
-    }
-
-    &[data-tab-color="black"] {
-        & > li > a:after {
-            background: @black;
-        }
-    }
-
-    &[data-tab-color="cyan"] {
-        & > li > a:after {
-            background: @cyan;
-        }
-    }
-}
-
-.tab-content {
-    padding: 20px 0;
-}
-
-.rd-tab {
-  .remove {
-    cursor: pointer;
-    color: #A09797;
-    padding: 0 3px 1px 4px;
-    font-size: 11px;
-    &:hover {
-      color: white;
-      background-color: #FF8080;
-      border-radius: 50%;
-    }
-  }
-}
-
-.tab-nav {
-  margin-bottom: 0px;
-
-  > li.rd-tab-btn {
-    float: right;
-    padding-right: 10px;
-    padding-top: 10px;
-  }
-  
-  > li > a {
-    text-transform: capitalize;
-  }
-}

client/app/assets/less/inc/toast.less

@@ -1,29 +0,0 @@
-#toast-container .toast {
-  margin: 0 6px 6px 0;
-  box-shadow: none;
-  color: #ffffff;
-  opacity: 0.75;
-  border-radius: 2px;
-  transition: opacity 0.35s ease-in-out;
-}
-#toast-container .toast:hover {
-  box-shadow: none;
-  opacity: 1;
-  cursor: pointer;
-}
-
-.toast {
-  background-color: #030303;
-}
-.toast-success {
-  background-color: #3BD973;
-}
-.toast-error {
-  background-color: #E92828;
-}
-.toast-info {
-  background-color: #356AFF;
-}
-.toast-warning {
-  background-color: #FB8D3D;
-}

client/app/assets/less/inc/vendor-overrides/bootgrid.less

@@ -1,125 +0,0 @@
-.bootgrid-table {
-    margin: 0;
-    box-shadow: none;
-}
-
-.bootgrid-footer .infoBar,
-.bootgrid-header .actionBar {
-    text-align: left;
-}
-
-.bootgrid-footer .search,
-.bootgrid-header .search {
-    vertical-align: top;
-}
-
-.bootgrid-header {
-    margin: 0;
-    padding: 25px;
-
-    .search {
-        border: 1px solid @input-border;
-
-        .form-control, .input-group-addon {
-            border: 0;
-        }
-
-        .input-group-addon {
-            font-size: 18px;
-            color: #333;
-            padding-right: 0 !important;
-            min-width: 26px;
-            text-align: right;
-        }
-
-        @media (min-width: @screen-xs-min) {
-            width: 300px;
-        }
-
-        @media (max-width: @screen-xs-min) {
-            width: 100%;
-            padding-right: 90px;
-        }
-
-
-    }
-
-    .actions {
-        box-shadow: none;
-
-        .btn-group {
-            .btn {
-                height: 37px;
-                background: #fff;
-                border-radius: 0;
-                border: 1px solid @input-border;
-            }
-
-            .dropdown-menu {
-                @media (min-width: @screen-sm-min) {
-                    left: 0;
-                    margin-top: 1px;
-                }
-
-                .dropdown-item {
-                    padding: 5px 10px;
-
-                    .input-helper {
-                        top: 5px;
-                    }
-                }
-            }
-
-            .caret {
-                display: none;
-            }
-
-            .zmdi {
-                line-height: 100%;
-                font-size: 18px;
-                vertical-align: top;
-            }
-
-        }
-
-        @media (max-width: @screen-xs-min) {
-            position: absolute;
-            top: 0;
-            right: 15px;
-        }
-    }
-}
-
-.bootgrid-footer {
-    border-top: 1px solid @table-border-color;
-    margin-top: 0;
-
-    .col-sm-6 {
-        padding: 25px;
-
-        @media (max-width: @screen-sm-min) {
-            text-align: center;
-        }
-    }
-
-    .infoBar {
-        @media (max-width: @screen-sm-min) {
-            display: none;
-        }
-
-            .infos {
-                border: 1px solid #EEE;
-                display: inline-block;
-                float: right;
-                padding: 7px 30px;
-                font-size: 12px;
-                margin-top: 3px;
-            }
-    }
-}
-
-.select-cell .checkbox {
-    margin: 0px 0 0 -19px;
-    top: 3px;
-}
-

client/app/assets/less/inc/vendor-overrides/bootstrap-datetimepicker.less

@@ -1,215 +0,0 @@
-.bootstrap-datetimepicker-widget {
-    padding: 0 !important;
-    margin: 0 !important;
-    width: auto !important;
-    
-    &:after, &:before { display: none !important; }
-    
-    table td {
-        text-shadow: none;
-        
-        span {
-            margin: 0;
-            
-            &:hover { background: transparent; }
-        }
-    }
-    
-    .glyphicon { font-family: @font-icon; font-size: 18px; }
-    .glyphicon-chevron-left:before { content: "\f2ff"; }
-    .glyphicon-chevron-right:before { content: "\f301"; }
-    .glyphicon-time:before { content: "\f337"; }
-    .glyphicon-calendar:before { content: "\f32e"; }
-    .glyphicon-chevron-up:before { content: "\f1e5"; }
-    .glyphicon-chevron-down:before { content: "\f1e4"; }
-    
-    [data-action="togglePicker"] span {
-        font-size: 25px;
-        color: #ccc;
-        
-        &:hover {
-            color: #333;
-        }
-    }
-    
-    a[data-action] {
-        color: @blue;
-    }
-}
-
-.timepicker-picker {
-    .btn { box-shadow: none !important; }
-    
-    table {
-        tbody tr + tr:not(:last-child) {
-            background: @blue;
-            color: #fff;
-            
-            td {
-                border-radius: 0;
-            }
-        }
-    }
-    
-    .btn {
-        background: #fff; 
-        color: #333; 
-    }
-}
-
-.datepicker {    
-    &.top {
-        .transform-origin(0 100%) !important;
-    }
-     
-    table {
-        thead {
-            tr {
-                th {
-                    border-radius: 0;
-                    color: #fff;
-                    
-                    .glyphicon {
-                        width: 30px;
-                        height: 30px;
-                        border-radius: 50%;
-                        line-height: 29px;
-                    }
-                    
-                    &:hover .glyphicon {
-                        background: rgba(0, 0, 0, 0.2);
-                    }
-                }
-                
-                &:first-child {
-                    th {
-                        background: @blue;
-                        padding: 20px 0;
-                        
-                        &:hover {
-                            background: @blue;
-                        }
-                        
-                        &.picker-switch { 
-                            font-size: 16px;
-                            font-weight: 400;
-                            text-transform: uppercase;
-                        }
-                    }
-                }
-                
-                &:last-child {
-                    th {
-                        &:first-child { padding-left: 20px; }
-                        &:last-child { padding-right: 20px; }
-                        
-                        text-transform: uppercase;
-                        font-weight: normal;
-                        font-size: 11px;
-                    }
-                    
-                    &:not(:only-child) {
-                        background: darken(@blue, 3%);  
-                    }
-                }
-            } 
-        }
-        
-        tbody {
-            tr {
-                &:last-child {
-                    td {
-                        padding-bottom: 25px;
-                    }
-                }
-                    
-                td {
-                    &:first-child {
-                        padding-left: 13px;
-                    }
-                    
-                    &:last-child {
-                        padding-right: 13px;
-                    } 
-                }
-            }
-        }
-        
-        td {
-    
-            &.day {
-                width: 35px;
-                height: 35px;
-                line-height: 20px;
-                color: #333;
-                position: relative;
-                padding: 0;
-                background: transparent;
-                
-                &:hover {
-                    background: none;
-                }
-                
-                &:before {
-                    content: "";
-                    width: 35px;
-                    height: 35px;
-                    border-radius: 50%;
-                    margin-bottom: -33px;
-                    display: inline-block;
-                    background: transparent;
-                    position: static;
-                    text-shadow: none;
-                }
-                
-                &.old, &.new {
-                    color: #CDCDCD;
-                }
-            }
-            
-            &:not(.today):not(.active) {
-                &:hover:before {
-                    background: #F0F0F0;
-                }
-            }
-            
-            &.today {
-                color: #333;
-                
-                &:before {
-                    background-color: #E2E2E2;
-                }
-            }
-            
-            &.active {
-                color: #fff;
-                
-                &:before {
-                    background-color: @blue;
-                }
-            }
-        }
-    }
-}
-
-.datepicker-months .month,
-.datepicker-years .year,
-.timepicker-minutes .minute,
-.timepicker-hours .hour {
-    border-radius: 50%;
-    
-    &:not(.active) {
-        &:hover {
-            background: #F0F0F0;
-        }
-    }
-    
-    &.active {
-        background: @blue;
-    }
-}
-
-.timepicker-minutes .minute,
-.timepicker-hours .hour {
-    padding: 0;
-}

client/app/assets/less/inc/vendor-overrides/bootstrap-select.less

@@ -1,72 +0,0 @@
-.bootstrap-select {    
-
-    .bs-searchbox {
-        padding: 0 18px;
-        margin: 5px 0 10px;
-        position: relative;
-        
-        &:before {
-            position: absolute;
-            left: 14px;
-            top: 2px;
-            width: 30px;
-            height: 100%;
-            content: "\f1c3";
-            font-family: @font-icon;
-            font-size: 25px;
-        }
-        
-        input {
-            padding-left: 25px;
-            border: 0;
-        }
-    }
-    
-    &.btn-group {
-        .dropdown-menu li a.opt {
-            padding-left: 17px;
-        }
-    }
-    
-    .check-mark {
-        margin-top: -5px !important;
-        font-size: 19px;
-        display: none;
-        position: absolute;
-        top: 11px;
-        right: 15px; 
-        
-        &:before {
-            content: "\f26b";
-            font-family: @font-icon;
-        }
-    }
-    
-    .selected {
-        .check-mark {
-            display: block !important;
-        }
-    }
-    
-    .notify {
-        bottom: 0 !important;
-        margin: 0 !important;
-        width: 100% !important;
-        border: 0 !important;
-        background: @red !important;
-        color: #fff !important;
-        text-align: center;
-    }
-    
-    &:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
-        width: 100%;
-    }
-    
-    .btn-default {
-        background-color: #fff;
-        border-radius: 0;
-        border: 1px solid @input-border;
-    }
-}
-
-

client/app/assets/less/inc/vendor-overrides/chosen.less

@@ -1,114 +0,0 @@
-.chosen-container {
-    .chosen-drop {
-        border-color: @input-border;
-        border-radius: 0;
-    }
-    
-    .chosen-results {
-        margin: 10px 0 0 0;
-        padding: 0;
-        
-        li {
-            padding: 10px 17px;
-            width: 100%;
-            
-            &.highlighted {
-                background: @dropdown-link-hover-bg;
-                color: @dropdown-link-hover-color;
-            }
-            
-            &.result-selected {
-                background: @lightblue;
-                color: @white;
-                position: relative;
-                
-                &:before {
-                    content: "\f26b";
-                    font-family: @font-icon;
-                    position: absolute;
-                    right: 15px;
-                    top: 10px;
-                    font-size: 19px;
-                }
-            }
-            
-            &.group-result {
-                &:not(:first-child) {
-                    border-top: 1px solid #eee;
-                }
-                
-                color: #B2B2B2;
-                font-weight: normal;
-                padding: 16px 15px 6px;
-                margin-top: 9px;
-            }
-        }
-    }
-}
-
-.chosen-container-single {
-    .chosen-single { 
-        border-radius: 0;
-        height: 35px;
-        padding: 7px 12px 6px;
-        line-height: 1.42857143;
-        border-color: @input-border;
-    }
-    
-    .chosen-search {
-        padding: 5px 12px;
-        
-        &:before {
-            content: "\f1c3";
-            font-family: @font-icon;
-            position: absolute;
-            left: 25px;
-            top: 9px;
-            font-size: 19px;
-        }
-        
-        input[type=text] {
-            border-color: @input-border;
-            padding: 8px 10px 8px 35px;
-        }
-    }
-}
-
-.chosen-container-multi {
-    .chosen-choices {
-        padding: 0 4px;
-        border-color: @input-border;
-        
-        li { 
-            &.search-choice {
-                border-radius: 0;
-                margin: 4px 4px 0 0;
-                background: @blue; 
-                border-color: @blue;
-                color: #fff;
-                padding: 5px 23px 5px 8px;
-
-                .search-choice-close {
-                    &:before {
-                        display: inline-block;
-                        font-family: @font-icon;
-                        content: "\f135";
-                        position: relative;
-                        top: 1px;
-                        color: #fff;
-                        z-index: 2;
-                        font-size: 12px;
-                    }
-                }
-            }
-            
-            &.search-field {
-                input[type=text] {
-                    padding: 0 8px;
-                    height: 31px;
-                }
-            }
-        }        
-    }
-}
-

client/app/assets/less/inc/vendor-overrides/farbtastic.less

@@ -1,25 +0,0 @@
-.cp-container {
-    position: relative;
-    
-    & > .input-group {
-        
-        input.cp-value {
-            color: #000 !important;
-            background: transparent !important;
-        }
-        
-        .dropdown-menu {
-            padding: 20px;
-            margin-top: 30px;
-        }
-    }
-    
-    i.cp-value {
-        width: 25px;
-        height: 25px;
-        border-radius: 50%;
-        position: absolute;
-        top: 5px;
-        right: 5px;
-    }
-} 

client/app/assets/less/inc/vendor-overrides/fileinput.less

@@ -1,51 +0,0 @@
-.fileinput {
-    position: relative;
-    padding-right: 35px;
-    
-    .close {
-          position: absolute;
-          top: 5px;
-          font-size: 12px;
-          float: none;
-          opacity: 1;
-          font-weight: 500;
-          border: 1px solid #ccc;
-          width: 19px;
-          text-align: center;
-          height: 19px;
-          line-height: 15px;
-          border-radius: 50%;
-          right: 0;
-        
-          &:hover {
-            background: #eee;
-          }
-    }
-     
-    .btn-file {
-        
-    }
-    
-    .input-group-addon {
-        padding: 0 10px;
-        vertical-align: middle; 
-    }
-    
-    .fileinput-preview {
-        width: 200px;
-        height: 150px;
-        position: relative;
-        
-        img {
-            display: inline-block;
-            vertical-align: middle;
-            margin-top: -13px;
-        }
-        
-        &:after {
-            content: "";
-            display: inline-block;
-            vertical-align: middle;
-        }
-    }
-} 

client/app/assets/less/inc/vendor-overrides/fullcalendar.less

@@ -1,207 +0,0 @@
-/** CALENDAR WIDGET **/
-#calendar-widget {
-    margin-bottom: 30px;
-    box-shadow: 0 1px 1px rgba(0,0,0,.15);
-}
-
-#fc-actions {
-	position: absolute;
-	bottom: 23px;
-	right: 22px;
-    
-    & > li > a {
-        font-size: 20px;
-        color: #fff;
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        line-height: 30px; 
-        
-        
-    }
-    
-    & > li.open > a,
-    & > li > a:hover {
-        background: darken(@teal, 7%);
-    }
-}
-
-.fc {
-	background-color: #fff;
-	margin-bottom: 20px;
-
-	td {
-		border-color: @table-border-color !important;
-	}
-    
-	th {
-	    background: darken(@teal, 7%);
-	    color: #fff;
-	    font-weight: 400;
-	    padding: 6px 0;
-	}
-
-	table tr {
-		& > td:first-child {
-			border-left-width: 0;
-		}
-	}
-
-	.ui-widget-header {
-		border-width: 0;
-	}
-    
-    .fc-day-number {
-        color: #CCC;
-    }
-    
-    .fc-event-container {
-        padding: 0 2px 2px;
-    }
-}
-
-.fc-toolbar {
-    background: @teal;
-    margin-bottom: 0;
-    padding: 25px 7px 25px;
-    position: relative;
-    .user-select(none);
-    
-    &:before {
-        content: "";
-        bottom: -30px;
-        height: 30px;
-        width: 100%;
-        background: darken(@teal, 7%);
-        position: absolute;
-        left: 0;
-        z-index: 0;
-    }
-    
-    h2 {
-		color: rgba(255, 255, 255, 0.9);
-		margin-top: 7px;
-		font-size: 19px;
-		font-weight: 400;
-    }
-    
-    .ui-button  {
-		border: 0;
-		background: 0 0;
-		padding: 0;
-		outline: none !important;
-		text-align: center;
-		
-		& > span {
-		    position: relative;
-		    font-family: @font-icon;
-		    font-size: 20px;
-		    color: #FFF;
-		    line-height: 100%;
-		    width: 31px;
-            height: 31px;
-            border-radius: 50%;
-		    padding-top: 6px;
-		    display: block;
-		    margin-top: 2px;
-		    
-		    &:before {
-				position: relative;
-				z-index: 1;
-		    }
-		    
-		    &.ui-icon-circle-triangle-w:before {
-				content: "\f2fa";
-		    }
-		    
-		    &.ui-icon-circle-triangle-e:before {
-				content: "\f2fb"; 
-		    }
-            
-            &:hover {
-                background: darken(@teal, 7%);
-                color: #fff;
-            }
-		}
-    }
-}
-.fc-event {
-	padding: 0;
-    font-size: 11px;
-    border-radius: 0;
-    border: 0;
-    
-    .fc-title {
-		padding: 3px 5px 2px;
-		display: block;
-    }
-    
-    .fc-time {
-		float: left;
-		background: rgba(0, 0, 0, 0.2);
-		padding: 2px 6px;
-		margin: 0 0 0 -1px;
-    }
-}
-
-.fc-view, .fc-view > table {
-    border: 0;
-    overflow: hidden;
-}
-
-.fc-content-skeleton {
-    table {
-        background: transparent;
-    }
-}
-
-#calendar {
-    .fc-day-number {
-        @media screen and (min-width: @screen-sm-max) {
-            font-size: 25px;
-            letter-spacing: -2px; 
-        }
-    
-        padding-left: 10px !important;
-        text-align: left !important;
-        
-    }
-}
-
-
-/* Even Tag Color */
-.event-tag {
-    margin-top: 5px;
-    
-    & > span {
-	border-radius: 50%;
-	width: 30px;
-	height: 30px;
-    margin-right: 3px;
-	position: relative;
-	display: inline-block; 
-	cursor: pointer;
-	
-	&:hover {
-	    .opacity(0.8);
-	}
-	
-	&.selected {
-	    &:before {
-            font-family: @font-icon;
-            content: "\f26b";
-            position: absolute;
-            text-align: center;
-            top: 3px;
-            width: 100%;
-            font-size: 17px;
-            color: #FFF;
-            }
-        }
-    }
-}
-
-/* Height Fix */
-.fc-day-grid-container {
-    height: auto !important;
-}

client/app/assets/less/inc/vendor-overrides/light-gallery.less

@@ -1,69 +0,0 @@
-.lg-outer .lg-item {
-    background-image: none;
-}
-
-.lg-slide {    
-    &:after {
-        content: "";
-        -webkit-animation-fill-mode: both;
-        animation-fill-mode: both;
-        height: 50px;
-        width: 50px;
-        border-radius: 100%;
-        border: 2px solid @white;
-        -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
-        animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
-        position: absolute;
-        left: 50%;
-        margin-left: -25px;
-        top: 50%;
-        margin-top: -25px;
-        z-index: -1;
-    }
-    
-    em {
-        font-style: normal;
-        display: block;
-        margin-bottom: 20px;
-        
-        h3 {
-            margin-bottom: 5px;
-            color: #D2D2D2;
-            font-weight: 100;
-        }
-        
-        p {
-            color: #6B6B6B;
-        }
-    }
-}
-@-webkit-keyframes ball-scale-ripple {
-  0% {
-    -webkit-transform: scale(0.1);
-            transform: scale(0.1);
-    opacity: 1; }
-
-  70% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-    opacity: 0.7; }
-
-  100% {
-    opacity: 0.0; } 
-}
-
-@keyframes ball-scale-ripple {
-  0% {
-    -webkit-transform: scale(0.1);
-            transform: scale(0.1);
-    opacity: 1; }
-
-  70% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-    opacity: 0.7; }
-
-  100% {
-    opacity: 0.0; } 
-}
-

client/app/assets/less/inc/vendor-overrides/malihu-custom-scrollbar.less

@@ -1,25 +0,0 @@
-.mCSB_container,
-.mCustomScrollBox {
-    overflow: visible;
-}
-
-.mCSB_scrollTools {
-    width: 12px;
-    
-    .mCSB_draggerRail,
-    .mCSB_dragger .mCSB_dragger_bar {
-        border-radius: 0;
-    }
-    
-    .mCSB_draggerRail {
-        background: transparent !important;
-    }
-}
-
-.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
-    background: rgba(0,0,0,0.4); 
-}
-
-.mCSB_inside > .mCSB_container {
-    margin-right: 0;
-}

client/app/assets/less/inc/vendor-overrides/noUiSlider.less

@@ -1,172 +0,0 @@
-.noUi-target {
-    border-radius: 0;
-    box-shadow: none;
-    border: 0;
-}
-
-.noUi-background {
-    background: #d4d4d4;
-    box-shadow: none;
-}
-
-.noUi-horizontal {
-    height: 3px;
-    
-    .noUi-handle {
-        top: -8px;
-    }
-}
-
-.noUi-vertical {
-    width: 3px;
-}
-
-.noUi-horizontal,
-.noUi-vertical {
-    .noUi-handle {
-        width: 19px;
-        height: 19px;
-        border: 0;
-        border-radius: 100%;
-        box-shadow: none;
-        .transition(box-shadow);
-        .transition-duration(200ms);
-        cursor: pointer;
-        position: relative;
-        
-        &:before,
-        &:after {
-            display: none;
-        }
-        
-        &:active {
-            background: #ccc !important;
-        }
-        
-        .is-tooltip {
-            position: absolute;
-            bottom: 32px;
-            height: 35px;
-            border-radius: 2px;
-            color: #fff;
-            text-align: center;
-            line-height: 33px;
-            width: 50px;
-            left: 50%;
-            margin-left: -25px;
-            padding: 0 10px;
-            .transition(all);
-            .transition-duration(200ms);
-            .backface-visibility(hidden);
-            .opacity(0);
-            .scale(0);
-            
-            &:after {
-                width: 0;
-                height: 0;
-                border-style: solid;
-                border-width: 15px 10px 0 10px;
-                position: absolute;
-                bottom: -8px;
-                left: 50%;
-                margin-left: -9px;
-                content: "";
-
-            }
-        }
-    }
-    
-    .noUi-active {
-        box-shadow: 0 0 0 13px rgba(0,0,0,0.1);
-        
-        .is-tooltip {
-            .scale(1);
-            bottom: 40px;
-            .opacity(1);
-        }
-    }
-}  
-
-.input-slider,
-.input-slider-range,
-.input-slider-values {
-    &:not([data-is-color]) {
-        .noUi-handle,
-        .noUi-connect, {
-            background: @teal !important;
-        }
-        
-        .is-tooltip {
-            background: @teal;
-            
-            &:after {
-                border-color: @teal transparent transparent transparent;
-            }
-        }
-    }
-    
-    &[data-is-color=red] {
-        .is-color-handle(@red);
-    }
-    
-    &[data-is-color=blue] {
-        .is-color-handle(@blue);
-    }
-    
-    &[data-is-color=cyan] {
-        .is-color-handle(@cyan);
-    }
-    
-    &[data-is-color=amber] {
-        .is-color-handle(@amber);
-    }
-    
-    &[data-is-color=green] {
-        .is-color-handle(@green);
-    }
-}
-
-.input-slider {
-    .noUi-origin {
-        background: #d4d4d4;
-    }
-    
-    &:not([data-is-color]) {
-        .noUi-base {
-            background: @teal !important;
-        }
-    }
-    
-    &[data-is-color=red] {
-        .is-color-base(@red);
-    }
-    
-    &[data-is-color=blue] {
-        .is-color-base(@blue);
-    }
-    
-    &[data-is-color=cyan] {
-        .is-color-base(@cyan);
-    }
-    
-    &[data-is-color=amber] {
-        .is-color-base(@amber);
-    }
-    
-    &[data-is-color=green] {
-        .is-color-base(@green);
-    }
-}
-
-.is-color-handle(@color) {
-    .noUi-handle,
-    .noUi-connect {
-        background: @color !important;
-    }
-}
-
-.is-color-base(@color) {
-    .noUi-base {
-        background: @color !important;
-    }
-}

client/app/assets/less/inc/vendor-overrides/summernote.less

@@ -1,194 +0,0 @@
-.note-editor,
-.note-popover {
-    .note-toolbar,
-    .popover-content {
-        background: #fff;
-        border-color: #e4e4e4;
-        margin: 0;
-        padding: 10px 0 15px;
-        text-align: center;
-        
-        & > .btn-group {
-            display: inline-block;
-            float: none;
-            box-shadow: none;
-            
-            .btn {
-                margin: 0 1px;
-                border: 0;
-            }
-            
-            & > .active {
-                background: @cyan;
-                color: #fff;
-            }
-        }
-        
-            
-        .btn {
-            height: 40px;
-            border-radius: 2px !important;
-            box-shadow: none !important;
-            background: #fff;
-            
-            &:active {
-                box-shadow: none;
-            }
-        }
-
-        .note-palette-title {
-            margin: 0 !important;
-            padding: 10px 0 !important;
-            font-size: 13px !important;
-            text-align: center !important;  
-            border: 0 !important;
-        }
-        
-        .note-color-reset {
-            padding: 0 0 10px !important;
-            margin: 0 !important;
-            background: none;
-            text-align: center;
-        }
-         
-        .note-color {
-            .dropdown-menu {
-                min-width: 335px;
-            }
-        }
-    }
-    
-    .note-statusbar {
-        .note-resizebar {
-            border-color: #E8E8E8;
-            
-            .note-icon-bar {
-                border-color: #BCBCBC;
-            }
-        }
-    }
-    
-    .fa {
-        font-style: normal;
-        font-size: 20px;
-        vertical-align: middle;
-        
-        &:before {
-            font-family: @font-icon;
-        }
-        
-        &.fa-magic:before {
-            content: "\f16a";
-        }
-        
-        &.fa-bold:before {
-            content: "\f23d";
-        }
-        
-        &.fa-italic:before {
-            content: "\f245";
-        }
-        
-        &.fa-underline:before {
-            content: "\f24f";
-        }
-        
-        &.fa-font:before {
-            content: "\f242";
-        }
-        
-        &.fa-list-ul:before {
-            content: "\f247";
-        }
-        
-        &.fa-list-ol:before {
-            content: "\f248";
-        }
-
-        &.fa-align-left:before {
-            content: "\f23b";
-        }
-        
-        &.fa-align-right:before {
-            content: "\f23c";
-        }
-
-        &.fa-align-center:before {
-            content: "\f239";
-        }
-
-        &.fa-align-justify:before {
-            content: "\f23a";
-        }
-        
-        &.fa-indent:before {
-            content: "\f244";
-        }
-        
-        &.fa-outdent:before {
-            content: "\f243";
-        }
-        
-        &.fa-text-height:before {
-            content: "\f246";
-        }
-        
-        &.fa-table:before {
-            content: "\f320";
-        }
-        
-        &.fa-link:before {
-            content: "\f18e";
-        }
-        
-        &.fa-picture-o:before {
-            content: "\f17f";
-        }
-        
-        &.fa-minus:before {
-            content: "\f22f";
-        }
-        
-        &.fa-arrows-alt:before {
-            content: "\f16d";
-        }
-        
-        &.fa-code:before {
-            content: "\f13a";
-        }
-        
-        &.fa-question:before {
-            content: "\f1f5";
-        }
-        
-        &.fa-eraser:before {
-            content: "\f23f";
-        }
-        
-        &.fa-square:before {
-            content: "\f279";
-        }
-        
-        &.fa-circle-o:before {
-            content: "\f26c";
-        }
-        
-        &.fa-times:before {
-            content: "\f136";
-        }
-    }
-    
-    .note-air-popover {
-        .arrow {
-            left: 20px;
-        }
-    }
-}
-
-.note-editor {
-    border: 1px solid #e4e4e4;
-
-    .note-editable {
-        padding: 20px 23px;
-    }
-}

client/app/assets/less/inc/vendor-overrides/sweetalert.less

@@ -1,21 +0,0 @@
-.sweet-alert {
-    border-radius: 2px;
-    padding: 10px 30px;
-    
-    h2 {
-        font-size: 16px;
-        font-weight: 400;
-        position: relative;
-        z-index: 1;
-    }
-    
-    .lead {
-        font-size: 13px;
-    }
-    
-    .btn {
-        padding: 6px 12px; 
-        font-size: 13px;
-        margin: 20px 2px 0;
-    }
-}

client/app/assets/less/inc/vendor-overrides/typeahead.less

@@ -1,24 +0,0 @@
-.twitter-typeahead {
-    width: 100%;
-    
-    .tt-menu {
-        min-width: 200px;
-        background: #fff;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-    }
-    
-    .tt-suggestion:hover,
-    .tt-cursor {
-        background-color: rgba(0,0,0,0.075);
-    }
-    
-    .tt-suggestion {
-        padding: 8px 17px;
-        color: #333;
-        cursor: pointer;
-    }
-    
-    .tt-hint {
-        color: #818181 !important;
-    }
-}

client/app/assets/less/inc/vendor-overrides/ui-select.less

@@ -1,35 +0,0 @@
-/* ui-select adjustments for SuperFlat */
-.clearable button {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-
-/* Same definition as .form-control */
-.ui-select-toggle.btn-default {
-  height: 35px;
-  padding: 6px 12px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  color: #9E9E9E;
-  background: #fff;
-  border: 1px solid #e8e8e8;
-  border-radius: 2px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-
-  &:hover, &:active, &.active, &:focus, &.focus {
-    background: #fff;
-  }
-}
-
-.btn-default-focus {
-  outline: none;
-  outline-offset: 0;
-  box-shadow: none;
-  background: none;
-}
-

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

@@ -1,28 +0,0 @@
-cohort-renderer {
-  display: block;
-}
-
-.cornelius-container {
-  padding: 0;
-  margin: 0;
-
-  .cornelius-table {
-    width: 100%;
-    margin: 0;
-    box-shadow: none;
-    border-radius: 0;
-    background: transparent;
-
-    tr, th, td {
-      border-color: @table-border-color;
-    }
-
-    td {
-      border-radius: 0 !important;
-    }
-
-    .cornelius-time, .cornelius-label, .cornelius-people {
-      background-color: fade(@redash-gray, 3%) !important;
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-.col-table .missing-value {
-  color: #b94a48;
-}
-
-.col-table .super-small-input {
-  padding-left: 3px;
-  height: 24px;
-}
-
-.col-table .ui-select-toggle, .col-table .ui-select-search {
-  padding: 2px;
-  padding-left: 5px;
-  height: 24px;
-}
-

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

@@ -6,32 +6,9 @@
     height: 100%;
     z-index: 0;
   }
-
-  .map-custom-control.leaflet-bar {
-    background: #fff;
-    padding: 10px;
-    margin: 10px;
-    position: absolute;
-    z-index: 1;
-
-    &.top-left {
-      left: 0;
-      top: 0;
-    }
-
-    &.top-right {
-      right: 0;
-      top: 0;
-    }
-
-    &.bottom-left {
-      left: 0;
-      bottom: 0;
-    }
-
-    &.bottom-right {
-      right: 0;
-      bottom: 0;
-    }
-  }
+}
+
+.leaflet-popup-content img {
+  max-width: 100%;
+  height: auto;
 }

client/app/assets/less/main.less

@@ -1,75 +1,57 @@
 /** LESS Plugins **/
-@import 'inc/less-plugins/for';
+@import "inc/less-plugins/for";
 
 /** Load Main Bootstrap LESS files **/
-@import '~bootstrap/less/bootstrap';
+@import "~bootstrap/less/bootstrap";
 
 /** Load Vendors Dependencies **/
-@import '~font-awesome/less/font-awesome';
-@import '~ui-select/dist/select.css';
-@import '~angular-resizable/src/angular-resizable.css';
-@import '~material-design-iconic-font/dist/css/material-design-iconic-font.css';
-@import '~pace-progress/themes/blue/pace-theme-minimal.css';
+@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/angular';
-@import 'inc/variables';
-@import 'inc/mixins';
-@import 'inc/font';
-@import 'inc/print';
+@import "inc/variables";
+@import "inc/mixins";
+@import "inc/font";
+@import "inc/print";
 
-@import 'inc/bootstrap-overrides';
-@import 'inc/base';
-@import 'inc/generics';
-@import 'inc/form';
-@import 'inc/button';
-@import 'inc/list';
-@import 'inc/header';
-@import 'inc/tile';
-@import 'inc/label';
-@import 'inc/dropdown';
-@import 'inc/list-group';
-@import 'inc/misc';
-@import 'inc/progress-bar';
-@import 'inc/widgets';
-@import 'inc/table';
-@import 'inc/alert';
-@import 'inc/media';
-@import 'inc/modal';
-@import 'inc/tab';
-@import 'inc/panel';
-@import 'inc/tooltips';
-@import 'inc/popover';
-@import 'inc/breadcrumb';
-@import 'inc/jumbotron';
-@import 'inc/profile';
-@import 'inc/404';
-@import 'inc/ie-warning';
-@import 'inc/edit-in-place';
-@import 'inc/growl';
-@import 'inc/flex';
-@import 'inc/ace-editor';
-@import 'inc/overlay';
-@import 'inc/schema-browser';
-@import 'inc/toast';
-@import 'inc/visualizations/box';
-@import 'inc/visualizations/pivot-table';
-@import 'inc/visualizations/map';
-@import 'inc/visualizations/cohort';
-@import 'inc/visualizations/misc';
-
-/** VENDOR OVERRIDES **/
-@import 'inc/vendor-overrides/bootstrap-select';
-@import 'inc/vendor-overrides/bootstrap-datetimepicker';
-@import 'inc/vendor-overrides/typeahead';
-@import 'inc/vendor-overrides/sweetalert';
-@import 'inc/vendor-overrides/ui-select';
+@import "inc/bootstrap-overrides";
+@import "inc/base";
+@import "inc/generics";
+@import "inc/form";
+@import "inc/button";
+@import "inc/list";
+@import "inc/header";
+@import "inc/tile";
+@import "inc/label";
+@import "inc/dropdown";
+@import "inc/list-group";
+@import "inc/misc";
+@import "inc/progress-bar";
+@import "inc/widgets";
+@import "inc/table";
+@import "inc/alert";
+@import "inc/media";
+@import "inc/modal";
+@import "inc/panel";
+@import "inc/tooltips";
+@import "inc/popover";
+@import "inc/breadcrumb";
+@import "inc/jumbotron";
+@import "inc/profile";
+@import "inc/404";
+@import "inc/ie-warning";
+@import "inc/edit-in-place";
+@import "inc/flex";
+@import "inc/ace-editor";
+@import "inc/schema-browser";
+@import "inc/visualizations/box";
+@import "inc/visualizations/pivot-table";
+@import "inc/visualizations/map";
+@import "inc/visualizations/misc";
 
 /** REDASH STYLING **/
-@import 'redash/redash-table';
-@import 'redash/query';
-@import 'redash/tags-control';
-@import 'redash/css-logo';
-@import 'redash/loading-indicator';
-
-
-
+@import "redash/redash-table";
+@import "redash/query";
+@import "redash/tags-control";
+@import "redash/css-logo";
+@import "redash/loading-indicator";

client/app/assets/less/redash/loading-indicator.less

@@ -39,8 +39,8 @@
   }
 }
 
-// hide indicator when app-view has content
-app-view:not(:empty) ~ .loading-indicator {
+// hide indicator when application has content
+#application-root:not(:empty) ~ .loading-indicator {
   opacity: 0;
   transform: scale(0.9);
   pointer-events: none;
@@ -48,4 +48,4 @@ app-view:not(:empty) ~ .loading-indicator {
   * {
     animation: none !important;
   }
-}
+}

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

@@ -2,7 +2,7 @@ body.fixed-layout {
   padding: 0;
   overflow: hidden;
 
-  app-view {
+  #application-root {
     display: flex;
     flex-direction: column;
     padding-bottom: 0;
@@ -17,45 +17,8 @@ body.fixed-layout {
   }
 }
 
-.tab-nav .tab-new-vis {
-  margin: 0 5px;
-
-  > a {
-    color: @headings-color;
-    margin-top: 8px;
-    padding: 7px;
-    font-weight: 400;
-  }
-}
-
-.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;
+  padding-bottom: 60px !important;
 }
 
 .bottom-controller-container {
@@ -65,91 +28,11 @@ body.fixed-layout {
   flex-shrink: 0;
 }
 
-.query-metadata__bottom {
-  margin: 0 10px;
-}
-
-.bottom-controller, .bottom-controller-container {
-  .query-metadata__property {
-    margin-right: 5px;
-  }
-}
-
 // Editor
-edit-in-place p, span.editable {
-  display: inline-block;
-}
-
-edit-in-place p.editable:hover {
-  display: inline-block;
-}
-
-.editor__control {
-  margin-top: 10px;
-
-  .dropdown-toggle {
-    margin-right: 0;
-  }
-}
-
 .filter-container {
   margin-bottom: 5px;
 }
 
-.ace_editor.ace_autocomplete .ace_completion-highlight {
-  text-shadow: none !important;
-  background: #ffff005e;
-  font-weight: 600;
-}
-
-.query-metadata {
-  background: #fff;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  table {
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    td {
-      padding: 3px 0;
-      vertical-align: top;
-    }
-
-    tr {
-      td:first-of-type {
-        padding-right: 5px;
-      }
-    }
-  }
-
-  p {
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .query-metadata__property {
-    width: 60px;
-    display: inline-block;
-  }
-
-  ._query-metadata__time {
-
-  }
-}
-
-.editor__control {
-  .form-control {
-    height: 30px;
-  }
-}
-
 .schema-container {
   background: transparent;
   flex-grow: 1;
@@ -159,7 +42,7 @@ edit-in-place p.editable:hover {
 
 .editor__left {
   height: 100% !important;
-  width: calc(~'25% - 10px');
+  width: calc(~"25% - 10px");
   margin-right: 10px;
 
   .form-control {
@@ -191,7 +74,6 @@ edit-in-place p.editable:hover {
 }
 
 .embed__vis {
-
 }
 
 .query__vis {
@@ -230,6 +112,14 @@ edit-in-place p.editable:hover {
   }
 }
 
+// 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 {
@@ -240,14 +130,6 @@ edit-in-place p.editable:hover {
   }
 }
 
-.page-header--query {
-  .page-title {
-    display: block;
-    margin-left: 15px;
-    margin-right: 15px;
-  }
-}
-
 a.label-tag {
   background: fade(@redash-gray, 15%);
   color: darken(@redash-gray, 15%);
@@ -276,7 +158,22 @@ a.label-tag {
   display: flex;
   width: 100vw;
 
-  .tile, .tiled {
+  .resizable-component.react-resizable {
+    .react-resizable-handle-horizontal {
+      border-right: 1px solid #efefef;
+    }
+
+    .react-resizable-handle-vertical {
+      border-bottom: 1px solid #efefef;
+    }
+  }
+
+  .query-metadata.query-metadata-horizontal {
+    border-bottom: 1px solid #efefef;
+  }
+
+  .tile,
+  .tiled {
     box-shadow: none;
     padding: 15px 0 !important;
   }
@@ -291,22 +188,26 @@ a.label-tag {
     min-width: 10px;
     overflow-x: hidden;
 
-    .schema-container {
-    }
-
     .editor__left__data-source,
     .schema-control,
-    .query-metadata--history,
     .editor {
       flex-shrink: 0;
     }
 
-    .query-metadata {
-      border-top: 1px solid #efefef;
+    .editor__left__schema,
+    .editor__left__data-source {
+      padding: 15px;
     }
 
-    .query-metadata, .editor__left__schema, .editor__left__data-source {
-      padding: 15px;
+    .editor__left__data-source {
+      .ant-select {
+        .ant-select-selection-selected-value {
+          img,
+          span {
+            vertical-align: middle;
+          }
+        }
+      }
     }
 
     .editor__left__schema {
@@ -317,7 +218,7 @@ a.label-tag {
       padding-top: 0 !important;
       position: relative;
 
-      schema-browser {
+      .schema-container {
         position: absolute;
         left: 15px;
         top: 0;
@@ -326,10 +227,6 @@ a.label-tag {
       }
     }
   }
-  main {
-    display: flex;
-    height: 100%;
-  }
   .content {
     background: #fff;
     flex-grow: 1;
@@ -339,23 +236,9 @@ a.label-tag {
     align-content: space-around;
     padding: 0;
     overflow-x: hidden;
-
-    .editor {
-      border-bottom: 1px solid #efefef;
-    }
-
-    .pivot-table-visualization-container > table,
-    .visualization-renderer > .visualization-renderer-wrapper {
-      overflow: visible;
-    }
-
-    .tab-nav {
-      flex-shrink: 0;
-    }
   }
   .row {
     background: #fff;
-    z-index: 9;
     min-height: 50px;
 
     &.resizable {
@@ -368,6 +251,10 @@ a.label-tag {
       justify-content: space-around;
       align-content: space-around;
       overflow: hidden;
+
+      min-height: 10px;
+      max-height: 70vh;
+      flex: 0 0 300px;
     }
 
     .row {
@@ -394,7 +281,10 @@ a.label-tag {
       transition: none !important;
     }
   }
-  .rg-right, .rg-left, .rg-top, .rg-bottom {
+  .rg-right,
+  .rg-left,
+  .rg-top,
+  .rg-bottom {
     display: block;
     width: 10px;
     height: 10px;
@@ -409,32 +299,34 @@ a.label-tag {
       border: 1px solid #ccc;
     }
   }
-  .rg-right, .rg-left {
+  .rg-right,
+  .rg-left {
     span {
       border-width: 0 1px;
       top: 50%;
-      margin: -10px 0 0 @spacing/4;
+      margin: -10px 0 0 @spacing / 4;
       height: 20px;
       width: 3px;
     }
   }
-  .rg-top, .rg-bottom {
+  .rg-top,
+  .rg-bottom {
     span {
       border-width: 1px 0;
       left: 50%;
-      margin: @spacing/4 0 0 -10px;
+      margin: @spacing / 4 0 0 -10px;
       width: 20px;
       height: 3px;
     }
   }
-  .rg-top     {
+  .rg-top {
     cursor: row-resize;
     width: 100%;
     top: 0;
     left: 0;
-    margin-top: -@spacing/2;
+    margin-top: -@spacing / 2;
   }
-  .rg-right   {
+  .rg-right {
     cursor: col-resize;
     border-right: 1px solid #efefef;
     height: 100%;
@@ -446,7 +338,7 @@ a.label-tag {
       background: fade(@redash-gray, 6%);
     }
   }
-  .rg-bottom  {
+  .rg-bottom {
     cursor: row-resize;
     background: #fff;
     width: 100%;
@@ -458,7 +350,7 @@ a.label-tag {
       background: fade(@redash-gray, 6%);
     }
   }
-  .rg-left    {
+  .rg-left {
     cursor: col-resize;
     height: 100%;
     left: 0;
@@ -471,11 +363,6 @@ a.label-tag {
   visibility: hidden;
 }
 
-.query-fullscreen .query-metadata__mobile {
-  display: none;
-}
-
-
 // Visualization editor
 .modal-xl .modal-content {
   border: none;
@@ -512,42 +399,13 @@ nav .rg-bottom {
   visibility: hidden;
 }
 
-.query-metadata--description {
-  max-height: 125px;
-  overflow-y: auto;
-
-  .edit-in-place.active {
-    width: 100% !important;
-  }
-
-  .edit-in-place .rd-form-control {
-    width: 100% !important;
-  }
-}
-
-.query-metadata--refresh {
-  height: 50px;
-  border: none !important;
-
-  .query-metadata__property {
-    width: auto;
-  }
-
-  p {
-    display: block;
-  }
-}
-
 .query-tags {
   display: inline-block;
   vertical-align: middle;
-  margin-top: -3px; // padding-top of tags
 }
 
 .query-tags__mobile {
   display: none;
-  margin: -5px 0 0 0;
-  padding: 0 0 0 23px;
 }
 
 .table--permission {
@@ -561,27 +419,20 @@ nav .rg-bottom {
 }
 
 .edit-visualization {
-    margin-right: 5px;
+  margin-right: 5px;
+}
+
+@media (min-width: 880px) {
+  .query-fullscreen {
+    .query-metadata.query-metadata-horizontal {
+      display: none;
+    }
+  }
 }
 
 // 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;
@@ -591,10 +442,6 @@ nav .rg-bottom {
     display: none;
   }
 
-  .tab-nav .tab-new-vis {
-    display: none;
-  }
-
   .query-fullscreen {
     flex-direction: column;
     overflow: hidden;
@@ -607,25 +454,6 @@ nav .rg-bottom {
       display: none;
     }
 
-    .query-metadata__mobile {
-      border-bottom: 1px solid #efefef;
-      min-height: 0 !important;
-      flex-shrink: 0;
-      padding: 10px 15px;
-      display: flex;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      align-items: center;
-
-      .profile__image_thumb {
-        margin: 0 5px 0 0;
-      }
-
-      .query-metadata__property {
-        white-space: nowrap;
-      }
-    }
-
     main {
       flex-direction: column-reverse;
 
@@ -671,7 +499,8 @@ nav .rg-bottom {
 }
 
 @media (max-width: 768px) {
-  .editor__left__schema, .editor__left__data-source {
+  .editor__left__schema,
+  .editor__left__data-source {
     display: none;
   }
 
@@ -679,16 +508,3 @@ nav .rg-bottom {
     padding-right: 0;
   }
 }
-
-// Responsive fixes
-@media (max-width: 767px) {
-  .query-page-wrapper {
-    h3 {
-      font-size: 18px;
-    }
-
-    favorites-control {
-      margin-top: -3px;
-    }
-  }
-}

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

@@ -14,9 +14,3 @@
     opacity: 0.4;
   }
 }
-
-// This is for using .inline-tags-control in Angular which renders
-// a little differently than React (e.g. in Alert.html)
-.inline-tags-control .tags-control {
-  display: inline-block;
-}

client/app/components/AceEditorInput.jsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
-import AceEditor from 'react-ace';
+import React, { forwardRef } from "react";
+import AceEditor from "react-ace";
 
-import './AceEditorInput.less';
+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,12 +1,12 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { isEmpty, template } from 'lodash';
+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 Dropdown from "antd/lib/dropdown";
+import Icon from "antd/lib/icon";
+import Menu from "antd/lib/menu";
 
-import HelpTrigger from '@/components/HelpTrigger';
+import HelpTrigger from "@/components/HelpTrigger";
 
 export default function FavoritesDropdown({ fetch, urlTemplate }) {
   const [items, setItems] = useState();
@@ -15,19 +15,24 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
   const noItems = isEmpty(items);
   const urlCompiled = useMemo(() => template(urlTemplate), [urlTemplate]);
 
-  const fetchItems = useCallback(() => {
-    setLoading(true);
-    fetch().$promise
-      .then(({ results }) => {
-        setItems(results);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, [fetch]);
+  const fetchItems = useCallback(
+    (showLoadingState = true) => {
+      setLoading(showLoadingState);
+      fetch()
+        .then(({ results }) => {
+          setItems(results);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [fetch]
+  );
 
   // fetch items on init
-  useEffect(fetchItems, []);
+  useEffect(() => {
+    fetchItems(false);
+  }, [fetchItems]);
 
   // fetch items on click
   const onVisibleChange = visible => visible && fetchItems();
@@ -57,7 +62,12 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
   );
 
   return (
-    <Dropdown disabled={loading} trigger={['click']} placement="bottomLeft" onVisibleChange={onVisibleChange} overlay={menu}>
+    <Dropdown
+      disabled={loading}
+      trigger={["click"]}
+      placement="bottomLeft"
+      onVisibleChange={onVisibleChange}
+      overlay={menu}>
       {loading ? <Icon type="loading" spin /> : <Icon type="down" />}
     </Dropdown>
   );

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

@@ -1,80 +1,85 @@
 /* eslint-disable no-template-curly-in-string */
 
-import React, { useRef } from 'react';
-import { react2angular } from 'react2angular';
+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 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 FavoritesDropdown from './components/FavoritesDropdown';
-import HelpTrigger from '@/components/HelpTrigger';
-import CreateDashboardDialog from '@/components/dashboards/CreateDashboardDialog';
+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 { $location, $route } from '@/services/ng';
-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 { 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 './AppHeader.less';
+import FavoritesDropdown from "./FavoritesDropdown";
+import "./index.less";
 
 function onSearch(q) {
-  $location.path('/queries').search({ q });
-  $route.reload();
+  navigateTo(`queries?q=${encodeURIComponent(q)}`);
 }
 
 function DesktopNavbar() {
+  const showCreateDashboardDialog = useCallback(() => {
+    CreateDashboardDialog.showModal();
+  }, []);
+
   return (
     <div className="app-header" data-platform="desktop">
       <div>
         <Menu mode="horizontal" selectable={false}>
-          {currentUser.hasPermission('list_dashboards') && (
+          {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') && (
+          {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') && (
+          {currentUser.hasPermission("list_alerts") && (
             <Menu.Item key="alerts">
               <Button href="alerts">Alerts</Button>
             </Menu.Item>
           )}
         </Menu>
-        <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={CreateDashboardDialog.showModal}>New Dashboard</a>
-                </Menu.Item>
-              )}
-              <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>
+        {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="./">
@@ -105,65 +110,68 @@ function DesktopNavbar() {
             <Dropdown
               overlayStyle={{ minWidth: 200 }}
               placement="bottomRight"
-              trigger={['click']}
-              overlay={(
+              trigger={["click"]}
+              overlay={
                 <Menu>
                   <Menu.Item key="profile">
                     <a href="users/me">Edit Profile</a>
                   </Menu.Item>
-                  {currentUser.hasPermission('super_admin') && (
-                    <Menu.Divider />
-                  )}
+                  {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') && (
+                  {currentUser.hasPermission("list_users") && (
                     <Menu.Item key="groups">
                       <a href="groups">Groups</a>
                     </Menu.Item>
                   )}
-                  {currentUser.hasPermission('list_users') && (
+                  {currentUser.hasPermission("list_users") && (
                     <Menu.Item key="users">
                       <a href="users">Users</a>
                     </Menu.Item>
                   )}
-                  <Menu.Item key="snippets">
-                    <a href="query_snippets">Query Snippets</a>
-                  </Menu.Item>
-                  {currentUser.hasPermission('list_users') && (
+                  {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') && (
+                  {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.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') && (
+                    {clientConfig.newVersionAvailable && currentUser.hasPermission("super_admin") && (
                       <Tooltip title="Update Available" placement="rightTop">
-                        {' '}
-                        {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                        <a href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
+                        {" "}
+                        {/* 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>
@@ -190,21 +198,21 @@ function MobileNavbar() {
       <div>
         <Dropdown
           overlayStyle={{ minWidth: 200 }}
-          trigger={['click']}
+          trigger={["click"]}
           getPopupContainer={() => ref.current} // so the overlay menu stays with the fixed header when page scrolls
-          overlay={(
+          overlay={
             <Menu mode="vertical" selectable={false}>
-              {currentUser.hasPermission('list_dashboards') && (
+              {currentUser.hasPermission("list_dashboards") && (
                 <Menu.Item key="dashboards">
                   <a href="dashboards">Dashboards</a>
                 </Menu.Item>
               )}
-              {currentUser.hasPermission('view_query') && (
+              {currentUser.hasPermission("view_query") && (
                 <Menu.Item key="queries">
                   <a href="queries">Queries</a>
                 </Menu.Item>
               )}
-              {currentUser.hasPermission('list_alerts') && (
+              {currentUser.hasPermission("list_alerts") && (
                 <Menu.Item key="alerts">
                   <a href="alerts">Alerts</a>
                 </Menu.Item>
@@ -218,30 +226,33 @@ function MobileNavbar() {
                   <a href="data_sources">Settings</a>
                 </Menu.Item>
               )}
-              {currentUser.hasPermission('super_admin') && (
+              {currentUser.hasPermission("super_admin") && (
                 <Menu.Item key="status">
                   <a href="admin/status">System Status</a>
                 </Menu.Item>
               )}
-              {currentUser.hasPermission('super_admin') && (
-                <Menu.Divider />
-              )}
+              {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>
+                <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.Item key="logout" onClick={() => Auth.logout()}>Log out</Menu.Item>
             </Menu>
-          )}
-        >
-          <Button><Icon type="menu" /></Button>
+          }>
+          <Button>
+            <Icon type="menu" />
+          </Button>
         </Dropdown>
       </div>
     </div>
   );
 }
 
-export function AppHeader() {
+export default function ApplicationHeader() {
   return (
     <nav className="app-header-wrapper">
       <DesktopNavbar />
@@ -249,9 +260,3 @@ export function AppHeader() {
     </nav>
   );
 }
-
-export default function init(ngModule) {
-  ngModule.component('appHeader', react2angular(AppHeader));
-}
-
-init.init = true;

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

@@ -8,13 +8,13 @@ nav .app-header {
   justify-content: space-between;
   margin-bottom: 10px;
   background: white;
-  box-shadow: 0 4px 9px -3px rgba(102, 136, 153, .15);
+  box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
 
   .darker {
     color: #333 !important;
 
     &:hover {
-      color: #2196F3 !important;
+      color: #2196f3 !important;
     }
   }
 
@@ -39,7 +39,7 @@ nav .app-header {
     height: 50px;
     border-bottom: 0;
   }
-  
+
   .ant-btn {
     font-weight: 500;
 
@@ -70,7 +70,7 @@ nav .app-header {
       top: 2px;
 
       svg {
-        transition: transform .2s cubic-bezier(.75,0,.25,1);
+        transition: transform 0.2s cubic-bezier(0.75, 0, 0.25, 1);
       }
     }
 
@@ -140,7 +140,7 @@ nav .app-header {
     .menu-item-button {
       padding: 0 10px;
     }
-  
+
     .ant-menu-root {
       margin: 0 5px;
     }
@@ -198,10 +198,10 @@ nav .app-header {
 
 .ant-dropdown-menu-item .help-trigger {
   display: inline;
-  color: #2196F3;
+  color: #2196f3;
   vertical-align: bottom;
 }
 
 .ant-dropdown-menu.favorites-dropdown {
   margin-left: -10px;
-}
+}

client/app/components/ApplicationArea/ErrorMessage.jsx

@@ -0,0 +1,59 @@
+import { isObject, get } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+
+function getErrorMessageByStatus(status, defaultMessage) {
+  switch (status) {
+    case 404:
+      return "It seems like the page you're looking for cannot be found.";
+    case 401:
+    case 403:
+      return "It seems like you don’t have permission to see this page.";
+    default:
+      return defaultMessage;
+  }
+}
+
+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
+    if (error.isAxiosError && isObject(error.response)) {
+      return getErrorMessageByStatus(error.response.status, get(error, "response.data.message", message));
+    }
+    // Router errors
+    if (error.status) {
+      return getErrorMessageByStatus(error.status, message);
+    }
+  }
+  return message;
+}
+
+export default function ErrorMessage({ error }) {
+  if (!error) {
+    return null;
+  }
+
+  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>
+      </div>
+    </div>
+  );
+}
+
+ErrorMessage.propTypes = {
+  error: PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,136 @@
+import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import UniversalRouter from "universal-router";
+import ErrorBoundary from "@redash/viz/lib/components/ErrorBoundary";
+import location from "@/services/location";
+import url from "@/services/url";
+
+import ErrorMessage from "./ErrorMessage";
+
+function generateRouteKey() {
+  return Math.random()
+    .toString(32)
+    .substr(2);
+}
+
+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
+  // start with resolved root) - return false. Otherwise
+  // strip root and return relative url.
+
+  const baseHref = trimEnd(url.normalize(""), "/") + "/";
+  href = url.normalize(href);
+
+  if (startsWith(href, baseHref)) {
+    return "/" + trimStart(href.substr(baseHref.length), "/");
+  }
+
+  return false;
+}
+
+export default function Router({ routes, onRouteChange }) {
+  const [currentRoute, setCurrentRoute] = useState(null);
+
+  const currentPathRef = useRef(null);
+  const errorHandlerRef = useRef();
+
+  useEffect(() => {
+    let isAbandoned = false;
+
+    const router = new UniversalRouter(routes, {
+      resolveRoute({ route }, routeParams) {
+        if (isFunction(route.render)) {
+          return { ...route, routeParams };
+        }
+      },
+    });
+
+    function resolve(action) {
+      if (!isAbandoned) {
+        if (errorHandlerRef.current) {
+          errorHandlerRef.current.reset();
+        }
+
+        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
+        // when user navigated to another path while current one was still resolving.
+        // Note: this lock uses only `path` fragment of URL to distinguish routes because currently
+        // all pages depend only on this fragment and handle search/hash on their own. If router
+        // should reload page on search/hash change - this fragment (and few checks below) should be updated
+        if (pathname === currentPathRef.current) {
+          return;
+        }
+        currentPathRef.current = pathname;
+
+        // Don't reload controller if URL was replaced
+        if (action === "REPLACE") {
+          return;
+        }
+
+        router
+          .resolve({ pathname })
+          .then(route => {
+            if (!isAbandoned && currentPathRef.current === pathname) {
+              setCurrentRoute({ ...route, key: generateRouteKey() });
+            }
+          })
+          .catch(error => {
+            if (!isAbandoned && currentPathRef.current === pathname) {
+              setCurrentRoute({
+                render: currentRoute => <ErrorMessage {...currentRoute.routeParams} />,
+                routeParams: { error },
+              });
+            }
+          });
+      }
+    }
+
+    resolve("PUSH");
+
+    const unlisten = location.listen((unused, action) => resolve(action));
+
+    return () => {
+      isAbandoned = true;
+      unlisten();
+    };
+  }, [routes]);
+
+  useEffect(() => {
+    onRouteChange(currentRoute);
+  }, [currentRoute, onRouteChange]);
+
+  if (!currentRoute) {
+    return null;
+  }
+
+  return (
+    <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
+      {currentRoute.render(currentRoute)}
+    </ErrorBoundary>
+  );
+}
+
+Router.propTypes = {
+  routes: PropTypes.arrayOf(
+    PropTypes.shape({
+      path: PropTypes.string.isRequired,
+      render: PropTypes.func, // (routeParams: PropTypes.object; currentRoute; location) => PropTypes.node
+      // Additional props to be injected into route component.
+      // Object keys are props names. Object values will become prop values:
+      // - if value is a function - it will be called without arguments, and result will be used; otherwise value will be used;
+      // - after previous step, if value is a promise - router will wait for it to resolve; resolved value then will be used;
+      //   otherwise value will be used directly.
+      resolve: PropTypes.objectOf(PropTypes.any),
+    })
+  ),
+  onRouteChange: PropTypes.func,
+};
+
+Router.defaultProps = {
+  routes: [],
+  onRouteChange: () => {},
+};

client/app/components/ApplicationArea/handleNavigationIntent.js

@@ -0,0 +1,29 @@
+import { isString } from "lodash";
+import navigateTo from "./navigateTo";
+
+export default function handleNavigationIntent(event) {
+  let element = event.target;
+  while (element) {
+    if (element.tagName === "A") {
+      break;
+    }
+    element = element.parentNode;
+  }
+  if (!element || !element.hasAttribute("href") || element.hasAttribute("download")) {
+    return;
+  }
+
+  // Keep some default behaviour
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+    return;
+  }
+
+  const target = element.getAttribute("target");
+  if (isString(target) && target.toLowerCase() === "_blank") {
+    return;
+  }
+
+  event.preventDefault();
+
+  navigateTo(element.href);
+}

client/app/components/ApplicationArea/index.jsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from "react";
+import routes from "@/pages";
+import Router from "./Router";
+import handleNavigationIntent from "./handleNavigationIntent";
+import ErrorMessage from "./ErrorMessage";
+
+export default function ApplicationArea() {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [unhandledError, setUnhandledError] = useState(null);
+
+  useEffect(() => {
+    if (currentRoute && currentRoute.title) {
+      document.title = currentRoute.title;
+    }
+  }, [currentRoute]);
+
+  useEffect(() => {
+    function globalErrorHandler(event) {
+      event.preventDefault();
+      setUnhandledError(event.error);
+    }
+
+    document.body.addEventListener("click", handleNavigationIntent, false);
+    window.addEventListener("error", globalErrorHandler, false);
+
+    return () => {
+      document.body.removeEventListener("click", handleNavigationIntent, false);
+      window.removeEventListener("error", globalErrorHandler, false);
+    };
+  }, []);
+
+  if (unhandledError) {
+    return <ErrorMessage error={unhandledError} />;
+  }
+
+  return <Router routes={routes} onRouteChange={setCurrentRoute} />;
+}

client/app/components/ApplicationArea/navigateTo.js

@@ -0,0 +1,25 @@
+import location from "@/services/location";
+import url from "@/services/url";
+import { stripBase } from "./Router";
+
+// When `replace` is set to `true` - it will just replace current URL
+// without reloading current page (router will skip this location change)
+export default function navigateTo(href, replace = false) {
+  // Allow calling chain to roll up, and then navigate
+  setTimeout(() => {
+    const isExternal = stripBase(href) === false;
+    if (isExternal) {
+      window.location = href;
+      return;
+    }
+    href = url.parse(href);
+    location.update(
+      {
+        path: href.pathname,
+        search: href.search,
+        hash: href.hash,
+      },
+      replace
+    );
+  }, 10);
+}

client/app/components/ApplicationArea/routeWithApiKeySession.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState, useContext } from "react";
+import PropTypes from "prop-types";
+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
+// that contains:
+// - `currentRoute.routeParams`
+// - `pageTitle` field which is equal to `currentRoute.title`
+// - `onError` field which is a `handleError` method of nearest error boundary
+// - `apiKey` field
+
+function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const { handleError } = useContext(ErrorBoundaryContext);
+
+  useEffect(() => {
+    let isCancelled = false;
+    Auth.setApiKey(apiKey);
+    Auth.loadConfig()
+      .then(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(true);
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(false);
+        }
+      });
+    return () => {
+      isCancelled = true;
+    };
+  }, [apiKey]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <React.Fragment key={currentRoute.key}>
+      {renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError, apiKey })}
+    </React.Fragment>
+  );
+}
+
+ApiKeySessionWrapper.propTypes = {
+  apiKey: PropTypes.string.isRequired,
+  renderChildren: PropTypes.func,
+};
+
+ApiKeySessionWrapper.defaultProps = {
+  renderChildren: () => null,
+};
+
+export default function routeWithApiKeySession({ render, getApiKey, ...rest }) {
+  return {
+    ...rest,
+    render: currentRoute => (
+      <ApiKeySessionWrapper apiKey={getApiKey(currentRoute)} currentRoute={currentRoute} renderChildren={render} />
+    ),
+  };
+}

client/app/components/ApplicationArea/routeWithUserSession.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import ErrorBoundary, { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
+import { Auth } from "@/services/auth";
+import organizationStatus from "@/services/organizationStatus";
+import ApplicationHeader from "./ApplicationHeader";
+import ErrorMessage from "./ErrorMessage";
+
+// This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
+// that contains:
+// - `currentRoute.routeParams`
+// - `pageTitle` field which is equal to `currentRoute.title`
+// - `onError` field which is a `handleError` method of nearest error boundary
+
+function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(!!Auth.isAuthenticated());
+
+  useEffect(() => {
+    let isCancelled = false;
+    Promise.all([Auth.requireSession(), organizationStatus.refresh()])
+      .then(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(!!Auth.isAuthenticated());
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(false);
+        }
+      });
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (bodyClass) {
+      document.body.classList.toggle(bodyClass, true);
+      return () => {
+        document.body.classList.toggle(bodyClass, false);
+      };
+    }
+  }, [bodyClass]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <ApplicationHeader />
+      <React.Fragment key={currentRoute.key}>
+        <ErrorBoundary renderError={error => <ErrorMessage error={error} />}>
+          <ErrorBoundaryContext.Consumer>
+            {({ handleError }) =>
+              renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
+            }
+          </ErrorBoundaryContext.Consumer>
+        </ErrorBoundary>
+      </React.Fragment>
+    </React.Fragment>
+  );
+}
+
+UserSessionWrapper.propTypes = {
+  bodyClass: PropTypes.string,
+  renderChildren: PropTypes.func,
+};
+
+UserSessionWrapper.defaultProps = {
+  bodyClass: null,
+  renderChildren: () => null,
+};
+
+export default function routeWithUserSession({ render, bodyClass, ...rest }) {
+  return {
+    ...rest,
+    render: currentRoute => (
+      <UserSessionWrapper bodyClass={bodyClass} currentRoute={currentRoute} renderChildren={render} />
+    ),
+  };
+}

client/app/components/AutocompleteToggle.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import Tooltip from 'antd/lib/tooltip';
-import PropTypes from 'prop-types';
-import '@/redash-font/style.less';
-import recordEvent from '@/services/recordEvent';
-
-export default function AutocompleteToggle({ state, disabled, onToggle }) {
-  let tooltipMessage = 'Live Autocomplete Enabled';
-  let icon = 'icon-flash';
-  if (!state) {
-    tooltipMessage = 'Live Autocomplete Disabled';
-    icon = 'icon-flash-off';
-  }
-
-  if (disabled) {
-    tooltipMessage = 'Live Autocomplete Not Available (Use Ctrl+Space to Trigger)';
-    icon = 'icon-flash-off';
-  }
-
-  const toggle = (newState) => {
-    recordEvent('toggle_autocomplete', 'screen', 'query_editor', { state: newState });
-    onToggle(newState);
-  };
-
-  return (
-    <Tooltip placement="top" title={tooltipMessage}>
-      <button
-        type="button"
-        className={'btn btn-default m-r-5' + (disabled ? ' disabled' : '')}
-        onClick={() => toggle(!state)}
-        disabled={disabled}
-      >
-        <i className={'icon ' + icon} />
-      </button>
-    </Tooltip>
-  );
-}
-
-AutocompleteToggle.propTypes = {
-  state: PropTypes.bool.isRequired,
-  disabled: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func.isRequired,
-};

client/app/components/BeaconConsent.jsx

@@ -1,16 +1,15 @@
-import React, { useState } from 'react';
-import { react2angular } from 'react2angular';
-import Card from 'antd/lib/card';
-import Button from 'antd/lib/button';
-import Typography from 'antd/lib/typography';
-import { clientConfig } from '@/services/auth';
-import HelpTrigger from '@/components/HelpTrigger';
-import DynamicComponent from '@/components/DynamicComponent';
-import OrgSettings from '@/services/organizationSettings';
+import React, { useState } from "react";
+import Card from "antd/lib/card";
+import Button from "antd/lib/button";
+import Typography from "antd/lib/typography";
+import { clientConfig } from "@/services/auth";
+import HelpTrigger from "@/components/HelpTrigger";
+import DynamicComponent from "@/components/DynamicComponent";
+import OrgSettings from "@/services/organizationSettings";
 
 const Text = Typography.Text;
 
-export function BeaconConsent() {
+function BeaconConsent() {
   const [hide, setHide] = useState(false);
 
   if (!clientConfig.showBeaconConsentMessage || hide) {
@@ -22,11 +21,11 @@ export function BeaconConsent() {
     setHide(true);
   };
 
-  const confirmConsent = (confirm) => {
-    let message = '🙏 Thank you.';
+  const confirmConsent = confirm => {
+    let message = "🙏 Thank you.";
 
     if (!confirm) {
-      message = 'Settings Saved.';
+      message = "Settings Saved.";
     }
 
     OrgSettings.save({ beacon_consent: confirm }, message)
@@ -41,14 +40,13 @@ export function BeaconConsent() {
     <DynamicComponent name="BeaconConsent">
       <div className="m-t-10 tiled">
         <Card
-          title={(
+          title={
             <>
-              Would you be ok with sharing anonymous usage data with the Redash team?{' '}
+              Would you be ok with sharing anonymous usage data with the Redash team?{" "}
               <HelpTrigger type="USAGE_DATA_SHARING" />
             </>
-          )}
-          bordered={false}
-        >
+          }
+          bordered={false}>
           <Text>Help Redash improve by automatically sending anonymous usage data:</Text>
           <div className="m-t-5">
             <ul>
@@ -67,7 +65,8 @@ export 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 <a href="settings/organization">Organization Settings</a>{" "}
+              page.
             </Text>
           </div>
         </Card>
@@ -76,8 +75,4 @@ export function BeaconConsent() {
   );
 }
 
-export default function init(ngModule) {
-  ngModule.component('beaconConsent', react2angular(BeaconConsent));
-}
-
-init.init = true;
+export default BeaconConsent;

client/app/components/BigMessage.jsx

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

client/app/components/CodeBlock.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from 'antd/lib/button';
-import Tooltip from 'antd/lib/tooltip';
-import './CodeBlock.less';
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "antd/lib/button";
+import Tooltip from "antd/lib/tooltip";
+import "./CodeBlock.less";
 
 export default class CodeBlock extends React.Component {
   static propTypes = {
@@ -20,7 +20,7 @@ export default class CodeBlock extends React.Component {
   constructor(props) {
     super(props);
     this.ref = React.createRef();
-    this.copyFeatureEnabled = props.copyable && document.queryCommandSupported('copy');
+    this.copyFeatureEnabled = props.copyable && document.queryCommandSupported("copy");
     this.resetCopyState = null;
   }
 
@@ -36,14 +36,14 @@ export default class CodeBlock extends React.Component {
 
     // copy
     try {
-      const success = document.execCommand('copy');
+      const success = document.execCommand("copy");
       if (!success) {
         throw new Error();
       }
-      this.setState({ copied: 'Copied!' });
+      this.setState({ copied: "Copied!" });
     } catch (err) {
       this.setState({
-        copied: 'Copy failed',
+        copied: "Copy failed",
       });
     }
 
@@ -58,13 +58,8 @@ export default class CodeBlock extends React.Component {
     const { copyable, children, ...props } = this.props;
 
     const copyButton = (
-      <Tooltip title={this.state.copied || 'Copy'}>
-        <Button
-          icon="copy"
-          type="dashed"
-          size="small"
-          onClick={this.copy}
-        />
+      <Tooltip title={this.state.copied || "Copy"}>
+        <Button icon="copy" type="dashed" size="small" onClick={this.copy} />
       </Tooltip>
     );
 

client/app/components/Collapse.jsx

@@ -1,12 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import AntCollapse from 'antd/lib/collapse';
+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import AntCollapse from "antd/lib/collapse";
 
 export default function Collapse({ collapsed, children, className, ...props }) {
   return (
-    <AntCollapse {...props} activeKey={collapsed ? null : 'content'} className={cx(className, 'ant-collapse-headerless')}>
-      <AntCollapse.Panel key="content" header="">{children}</AntCollapse.Panel>
+    <AntCollapse
+      {...props}
+      activeKey={collapsed ? null : "content"}
+      className={cx(className, "ant-collapse-headerless")}>
+      <AntCollapse.Panel key="content" header="">
+        {children}
+      </AntCollapse.Panel>
     </AntCollapse>
   );
 }
@@ -20,5 +25,5 @@ Collapse.propTypes = {
 Collapse.defaultProps = {
   collapsed: true,
   children: null,
-  className: '',
+  className: "",
 };

client/app/components/ColorBox.jsx

@@ -1,12 +0,0 @@
-// ANGULAR_REMOVE_ME
-import { react2angular } from 'react2angular';
-
-import ColorPicker from '@/components/ColorPicker';
-
-import './color-box.less';
-
-export default function init(ngModule) {
-  ngModule.component('colorBox', react2angular(ColorPicker.Swatch));
-}
-
-init.init = true;

client/app/components/ColorPicker/Swatch.jsx

@@ -1,37 +0,0 @@
-import { isString } from 'lodash';
-import React from 'react';
-import PropTypes from 'prop-types';
-import Tooltip from 'antd/lib/tooltip';
-
-import './swatch.less';
-
-export default function Swatch({ className, color, title, size, ...props }) {
-  const result = (
-    <span
-      className={`color-swatch ${className}`}
-      style={{ backgroundColor: color, width: size }}
-      {...props}
-    />
-  );
-
-  if (isString(title) && (title !== '')) {
-    return (
-      <Tooltip title={title} mouseEnterDelay={0} mouseLeaveDelay={0}>{result}</Tooltip>
-    );
-  }
-  return result;
-}
-
-Swatch.propTypes = {
-  className: PropTypes.string,
-  title: PropTypes.string,
-  color: PropTypes.string,
-  size: PropTypes.number,
-};
-
-Swatch.defaultProps = {
-  className: '',
-  title: null,
-  color: 'transparent',
-  size: 12,
-};

client/app/components/ColorPicker/index.jsx

@@ -1,128 +0,0 @@
-import { toString } from 'lodash';
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import tinycolor from 'tinycolor2';
-import Popover from 'antd/lib/popover';
-import Card from 'antd/lib/card';
-import Tooltip from 'antd/lib/tooltip';
-import Icon from 'antd/lib/icon';
-
-import ColorInput from './Input';
-import Swatch from './Swatch';
-
-import './index.less';
-
-function validateColor(value, fallback = null) {
-  value = tinycolor(value);
-  return value.isValid() ? '#' + value.toHex().toUpperCase() : fallback;
-}
-
-export default function ColorPicker({
-  color, placement, presetColors, presetColumns, triggerSize, interactive, children, onChange,
-}) {
-  const [visible, setVisible] = useState(false);
-  const [currentColor, setCurrentColor] = useState('');
-
-  function handleApply() {
-    setVisible(false);
-    if (!interactive) {
-      onChange(currentColor);
-    }
-  }
-
-  function handleCancel() {
-    setVisible(false);
-  }
-
-  const actions = [];
-  if (!interactive) {
-    actions.push((
-      <Tooltip key="cancel" title="Cancel">
-        <Icon type="close" onClick={handleCancel} />
-      </Tooltip>
-    ));
-    actions.push((
-      <Tooltip key="apply" title="Apply">
-        <Icon type="check" onClick={handleApply} />
-      </Tooltip>
-    ));
-  }
-
-  function handleInputChange(newColor) {
-    setCurrentColor(newColor);
-    if (interactive) {
-      onChange(newColor);
-    }
-  }
-
-  useEffect(() => {
-    if (visible) {
-      setCurrentColor(validateColor(color));
-    }
-  }, [color, visible]);
-
-  return (
-    <Popover
-      overlayClassName={`color-picker ${interactive ? 'color-picker-interactive' : 'color-picker-with-actions'}`}
-      overlayStyle={{ '--color-picker-selected-color': currentColor }}
-      content={(
-        <Card
-          className="color-picker-panel"
-          bordered={false}
-          title={toString(currentColor).toUpperCase()}
-          headStyle={{
-            backgroundColor: currentColor,
-            color: tinycolor(currentColor).isLight() ? '#000000' : '#ffffff',
-          }}
-          actions={actions}
-        >
-          <ColorInput
-            color={currentColor}
-            presetColors={presetColors}
-            presetColumns={presetColumns}
-            onChange={handleInputChange}
-            onPressEnter={handleApply}
-          />
-        </Card>
-      )}
-      trigger="click"
-      placement={placement}
-      visible={visible}
-      onVisibleChange={setVisible}
-    >
-      {children || (<Swatch className="color-picker-trigger" color={validateColor(color)} size={triggerSize} />)}
-    </Popover>
-  );
-}
-
-ColorPicker.propTypes = {
-  color: PropTypes.string,
-  placement: PropTypes.oneOf([
-    'top', 'left', 'right', 'bottom',
-    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
-    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
-  ]),
-  presetColors: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string), // array of colors (no tooltips)
-    PropTypes.objectOf(PropTypes.string), // color name => color value
-  ]),
-  presetColumns: PropTypes.number,
-  triggerSize: PropTypes.number,
-  interactive: PropTypes.bool,
-  children: PropTypes.node,
-  onChange: PropTypes.func,
-};
-
-ColorPicker.defaultProps = {
-  color: '#FFFFFF',
-  placement: 'top',
-  presetColors: null,
-  presetColumns: 8,
-  triggerSize: 30,
-  interactive: false,
-  children: null,
-  onChange: () => {},
-};
-
-ColorPicker.Input = ColorInput;
-ColorPicker.Swatch = Swatch;

client/app/components/CreateSourceDialog.jsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isEmpty, toUpper, includes } 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 { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
-import { PreviewCard } from '@/components/PreviewCard';
-import EmptyState from '@/components/items-list/components/EmptyState';
-import DynamicForm from '@/components/dynamic-form/DynamicForm';
-import helper from '@/components/dynamic-form/dynamicFormHelper';
-import HelpTrigger, { TYPES as HELP_TRIGGER_TYPES } from '@/components/HelpTrigger';
+import React from "react";
+import PropTypes from "prop-types";
+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 { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
+import { PreviewCard } from "@/components/PreviewCard";
+import EmptyState from "@/components/items-list/components/EmptyState";
+import DynamicForm from "@/components/dynamic-form/DynamicForm";
+import helper from "@/components/dynamic-form/dynamicFormHelper";
+import HelpTrigger, { TYPES as HELP_TRIGGER_TYPES } from "@/components/HelpTrigger";
 
 const { Step } = Steps;
 const { Search } = Input;
@@ -38,19 +38,19 @@ class CreateSourceDialog extends React.Component {
   };
 
   state = {
-    searchText: '',
+    searchText: "",
     selectedType: null,
     savingSource: false,
     currentStep: StepEnum.SELECT_TYPE,
   };
 
-  selectType = (selectedType) => {
+  selectType = selectedType => {
     this.setState({ selectedType, currentStep: StepEnum.CONFIGURE_IT });
   };
 
   resetType = () => {
     if (this.state.currentStep === StepEnum.CONFIGURE_IT) {
-      this.setState({ searchText: '', selectedType: null, currentStep: StepEnum.SELECT_TYPE });
+      this.setState({ searchText: "", selectedType: null, currentStep: StepEnum.SELECT_TYPE });
     }
   };
 
@@ -58,21 +58,25 @@ class CreateSourceDialog extends React.Component {
     const { selectedType, savingSource } = this.state;
     if (!savingSource) {
       this.setState({ savingSource: true, currentStep: StepEnum.DONE });
-      this.props.onCreate(selectedType, values).then((data) => {
-        successCallback('Saved.');
-        this.props.dialog.close({ success: true, data });
-      }).catch((error) => {
-        this.setState({ savingSource: false, currentStep: StepEnum.CONFIGURE_IT });
-        errorCallback(error.message);
-      });
+      this.props
+        .onCreate(selectedType, values)
+        .then(data => {
+          successCallback("Saved.");
+          this.props.dialog.close({ success: true, data });
+        })
+        .catch(error => {
+          this.setState({ savingSource: false, currentStep: StepEnum.CONFIGURE_IT });
+          errorCallback(get(error, "response.data.message", "Failed saving."));
+        });
     }
   };
 
   renderTypeSelector() {
     const { types } = this.props;
     const { searchText } = this.state;
-    const filteredTypes = types.filter(type => isEmpty(searchText) ||
-      includes(type.name.toLowerCase(), searchText.toLowerCase()));
+    const filteredTypes = types.filter(
+      type => isEmpty(searchText) || includes(type.name.toLowerCase(), searchText.toLowerCase())
+    );
     return (
       <div className="m-t-10">
         <Search
@@ -81,13 +85,11 @@ class CreateSourceDialog extends React.Component {
           autoFocus
           data-test="SearchSource"
         />
-        <div className="scrollbox p-5 m-t-10" style={{ minHeight: '30vh', maxHeight: '40vh' }}>
-          {isEmpty(filteredTypes) ? (<EmptyState className="" />) : (
-            <List
-              size="small"
-              dataSource={filteredTypes}
-              renderItem={item => this.renderItem(item)}
-            />
+        <div className="scrollbox p-5 m-t-10" style={{ minHeight: "30vh", maxHeight: "40vh" }}>
+          {isEmpty(filteredTypes) ? (
+            <EmptyState className="" />
+          ) : (
+            <List size="small" dataSource={filteredTypes} renderItem={item => this.renderItem(item)} />
           )}
         </div>
       </div>
@@ -102,12 +104,7 @@ class CreateSourceDialog extends React.Component {
     return (
       <div>
         <div className="d-flex justify-content-center align-items-center">
-          <img
-            className="p-5"
-            src={`${imageFolder}/${selectedType.type}.png`}
-            alt={selectedType.name}
-            width="48"
-          />
+          <img className="p-5" src={`${imageFolder}/${selectedType.type}.png`} alt={selectedType.name} width="48" />
           <h4 className="m-0">{selectedType.name}</h4>
         </div>
         <div className="text-right">
@@ -117,13 +114,16 @@ class CreateSourceDialog extends React.Component {
             </HelpTrigger>
           )}
         </div>
-        <DynamicForm
-          id="sourceForm"
-          fields={fields}
-          onSubmit={this.createSource}
-          feedbackIcons
-          hideSubmitButton
-        />
+        <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{" "}
+            <a href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
+              Driver Download Terms and Conditions
+            </a>
+            .
+          </small>
+        )}
       </div>
     );
   }
@@ -131,11 +131,13 @@ class CreateSourceDialog extends React.Component {
   renderItem(item) {
     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}>
+      <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}
+          data-test="PreviewItem"
+          data-test-type={item.type}>
           <i className="fa fa-angle-double-right" />
         </PreviewCard>
       </List.Item>
@@ -149,34 +151,38 @@ class CreateSourceDialog extends React.Component {
       <Modal
         {...dialog.props}
         title={`Create a New ${sourceType}`}
-        footer={(currentStep === StepEnum.SELECT_TYPE) ? [
-          (<Button key="cancel" onClick={() => dialog.dismiss()}>Cancel</Button>),
-          (<Button key="submit" type="primary" disabled>Create</Button>),
-        ] : [
-          (<Button key="previous" onClick={this.resetType}>Previous</Button>),
-          (
-            <Button
-              key="submit"
-              htmlType="submit"
-              form="sourceForm"
-              type="primary"
-              loading={savingSource}
-              data-test="CreateSourceButton"
-            >
-              Create
-            </Button>
-          ),
-        ]}
-      >
+        footer={
+          currentStep === StepEnum.SELECT_TYPE
+            ? [
+                <Button key="cancel" onClick={() => dialog.dismiss()}>
+                  Cancel
+                </Button>,
+                <Button key="submit" type="primary" disabled>
+                  Create
+                </Button>,
+              ]
+            : [
+                <Button key="previous" onClick={this.resetType}>
+                  Previous
+                </Button>,
+                <Button
+                  key="submit"
+                  htmlType="submit"
+                  form="sourceForm"
+                  type="primary"
+                  loading={savingSource}
+                  data-test="CreateSourceButton">
+                  Create
+                </Button>,
+              ]
+        }>
         <div data-test="CreateSourceDialog">
           <Steps className="hidden-xs m-b-10" size="small" current={currentStep} progressDot>
             {currentStep === StepEnum.CONFIGURE_IT ? (
-              <Step
-                title={<a>Type Selection</a>}
-                className="clickable"
-                onClick={this.resetType}
-              />
-            ) : (<Step title="Type Selection" />)}
+              <Step title={<a>Type Selection</a>} className="clickable" onClick={this.resetType} />
+            ) : (
+              <Step title="Type Selection" />
+            )}
             <Step title="Configuration" />
             <Step title="Done" />
           </Steps>

client/app/components/DateInput.jsx

@@ -1,17 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DatePicker from 'antd/lib/date-picker';
-import { clientConfig } from '@/services/auth';
-import { Moment } from '@/components/proptypes';
+import React from "react";
+import PropTypes from "prop-types";
+import DatePicker from "antd/lib/date-picker";
+import { clientConfig } from "@/services/auth";
+import { Moment } from "@/components/proptypes";
 
-const DateInput = React.forwardRef(({
-  defaultValue,
-  value,
-  onSelect,
-  className,
-  ...props
-}, ref) => {
-  const format = clientConfig.dateFormat || 'YYYY-MM-DD';
+const DateInput = React.forwardRef(({ defaultValue, value, onSelect, className, ...props }, ref) => {
+  const format = clientConfig.dateFormat || "YYYY-MM-DD";
   const additionalAttributes = {};
   if (defaultValue && defaultValue.isValid()) {
     additionalAttributes.defaultValue = defaultValue;
@@ -43,7 +37,7 @@ DateInput.defaultProps = {
   defaultValue: null,
   value: undefined,
   onSelect: () => {},
-  className: '',
+  className: "",
 };
 
 export default DateInput;

client/app/components/DateRangeInput.jsx

@@ -1,20 +1,14 @@
-import { isArray } from 'lodash';
-import React from 'react';
-import PropTypes from 'prop-types';
-import DatePicker from 'antd/lib/date-picker';
-import { clientConfig } from '@/services/auth';
-import { Moment } from '@/components/proptypes';
+import { isArray } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import DatePicker from "antd/lib/date-picker";
+import { clientConfig } from "@/services/auth";
+import { Moment } from "@/components/proptypes";
 
 const { RangePicker } = DatePicker;
 
-const DateRangeInput = React.forwardRef(({
-  defaultValue,
-  value,
-  onSelect,
-  className,
-  ...props
-}, ref) => {
-  const format = clientConfig.dateFormat || 'YYYY-MM-DD';
+const DateRangeInput = React.forwardRef(({ defaultValue, value, onSelect, className, ...props }, ref) => {
+  const format = clientConfig.dateFormat || "YYYY-MM-DD";
   const additionalAttributes = {};
   if (isArray(defaultValue) && defaultValue[0].isValid() && defaultValue[1].isValid()) {
     additionalAttributes.defaultValue = defaultValue;
@@ -45,7 +39,7 @@ DateRangeInput.defaultProps = {
   defaultValue: null,
   value: undefined,
   onSelect: () => {},
-  className: '',
+  className: "",
 };
 
 export default DateRangeInput;

client/app/components/DateTimeInput.jsx

@@ -1,19 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DatePicker from 'antd/lib/date-picker';
-import { clientConfig } from '@/services/auth';
-import { Moment } from '@/components/proptypes';
+import React from "react";
+import PropTypes from "prop-types";
+import DatePicker from "antd/lib/date-picker";
+import { clientConfig } from "@/services/auth";
+import { Moment } from "@/components/proptypes";
 
-const DateTimeInput = React.forwardRef(({
-  defaultValue,
-  value,
-  withSeconds,
-  onSelect,
-  className,
-  ...props
-}, ref) => {
-  const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
-    (withSeconds ? ' HH:mm:ss' : ' HH:mm');
+const DateTimeInput = React.forwardRef(({ defaultValue, value, withSeconds, onSelect, className, ...props }, ref) => {
+  const format = (clientConfig.dateFormat || "YYYY-MM-DD") + (withSeconds ? " HH:mm:ss" : " HH:mm");
   const additionalAttributes = {};
   if (defaultValue && defaultValue.isValid()) {
     additionalAttributes.defaultValue = defaultValue;
@@ -48,7 +40,7 @@ DateTimeInput.defaultProps = {
   value: undefined,
   withSeconds: false,
   onSelect: () => {},
-  className: '',
+  className: "",
 };
 
 export default DateTimeInput;

client/app/components/DateTimeRangeInput.jsx

@@ -1,41 +1,35 @@
-import { isArray } from 'lodash';
-import React from 'react';
-import PropTypes from 'prop-types';
-import DatePicker from 'antd/lib/date-picker';
-import { clientConfig } from '@/services/auth';
-import { Moment } from '@/components/proptypes';
+import { isArray } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import DatePicker from "antd/lib/date-picker";
+import { clientConfig } from "@/services/auth";
+import { Moment } from "@/components/proptypes";
 
 const { RangePicker } = DatePicker;
 
-const DateTimeRangeInput = React.forwardRef(({
-  defaultValue,
-  value,
-  withSeconds,
-  onSelect,
-  className,
-  ...props
-}, ref) => {
-  const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
-    (withSeconds ? ' HH:mm:ss' : ' HH:mm');
-  const additionalAttributes = {};
-  if (isArray(defaultValue) && defaultValue[0].isValid() && defaultValue[1].isValid()) {
-    additionalAttributes.defaultValue = defaultValue;
+const DateTimeRangeInput = React.forwardRef(
+  ({ defaultValue, value, withSeconds, onSelect, className, ...props }, ref) => {
+    const format = (clientConfig.dateFormat || "YYYY-MM-DD") + (withSeconds ? " HH:mm:ss" : " HH:mm");
+    const additionalAttributes = {};
+    if (isArray(defaultValue) && defaultValue[0].isValid() && defaultValue[1].isValid()) {
+      additionalAttributes.defaultValue = defaultValue;
+    }
+    if (value === null || (isArray(value) && value[0].isValid() && value[1].isValid())) {
+      additionalAttributes.value = value;
+    }
+    return (
+      <RangePicker
+        ref={ref}
+        className={className}
+        showTime
+        {...additionalAttributes}
+        format={format}
+        onChange={onSelect}
+        {...props}
+      />
+    );
   }
-  if (value === null || (isArray(value) && value[0].isValid() && value[1].isValid())) {
-    additionalAttributes.value = value;
-  }
-  return (
-    <RangePicker
-      ref={ref}
-      className={className}
-      showTime
-      {...additionalAttributes}
-      format={format}
-      onChange={onSelect}
-      {...props}
-    />
-  );
-});
+);
 
 DateTimeRangeInput.propTypes = {
   defaultValue: PropTypes.arrayOf(Moment),
@@ -50,7 +44,7 @@ DateTimeRangeInput.defaultProps = {
   value: undefined,
   withSeconds: false,
   onSelect: () => {},
-  className: '',
+  className: "",
 };
 
 export default DateTimeRangeInput;

client/app/components/DialogWrapper.jsx

@@ -1,7 +1,7 @@
-import { isFunction } from 'lodash';
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
+import { isFunction } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import ReactDOM from "react-dom";
 
 /**
   Wrapper for dialogs based on Ant's <Modal> component.
@@ -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,12 +121,14 @@ function openDialog(DialogComponent, props) {
     dismiss: () => {},
   };
 
-  const dialogResult = {
-    resolve: () => {},
-    reject: () => {},
+  let pendingCloseTask = null;
+
+  const handlers = {
+    onClose: () => {},
+    onDismiss: () => {},
   };
 
-  const container = document.createElement('div');
+  const container = document.createElement("div");
   document.body.appendChild(container);
 
   function render() {
@@ -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;
@@ -176,24 +191,26 @@ function openDialog(DialogComponent, props) {
   const result = {
     close: closeDialog,
     dismiss: dismissDialog,
-    update: (newProps) => {
+    update: newProps => {
       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/DynamicComponent.jsx

@@ -1,15 +1,15 @@
-import { isFunction, isString } from 'lodash';
-import React from 'react';
-import PropTypes from 'prop-types';
+import { isFunction, isString } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
 
 const componentsRegistry = new Map();
 const activeInstances = new Set();
 
 export function registerComponent(name, component) {
-  if (isString(name) && name !== '') {
+  if (isString(name) && name !== "") {
     componentsRegistry.set(name, isFunction(component) ? component : null);
     // Refresh active DynamicComponent instances which use this component
-    activeInstances.forEach((dynamicComponent) => {
+    activeInstances.forEach(dynamicComponent => {
       if (dynamicComponent.props.name === name) {
         dynamicComponent.forceUpdate();
       }

client/app/components/EditInPlace.jsx

@@ -1,93 +1,104 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
-import { trim } from 'lodash';
+import { trim } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import Input from "antd/lib/input";
 
-export class EditInPlace extends React.Component {
+export default class EditInPlace extends React.Component {
   static propTypes = {
     ignoreBlanks: PropTypes.bool,
     isEditable: PropTypes.bool,
-    editor: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.string,
     onDone: PropTypes.func.isRequired,
+    onStopEditing: PropTypes.func,
+    multiline: PropTypes.bool,
+    editorProps: PropTypes.object,
+    defaultEditing: PropTypes.bool,
   };
 
   static defaultProps = {
     ignoreBlanks: false,
     isEditable: true,
-    placeholder: '',
-    value: '',
+    placeholder: "",
+    value: "",
+    onStopEditing: () => {},
+    multiline: false,
+    editorProps: {},
+    defaultEditing: false,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      editing: false,
-    };
-    this.inputRef = React.createRef();
-    const self = this;
-    this.componentDidUpdate = (prevProps, prevState) => {
-      if (self.state.editing && !prevState.editing) {
-        self.inputRef.current.focus();
-      }
+      editing: props.defaultEditing,
     };
   }
 
+  componentDidUpdate(_, prevState) {
+    if (!this.state.editing && prevState.editing) {
+      this.props.onStopEditing();
+    }
+  }
+
   startEditing = () => {
     if (this.props.isEditable) {
       this.setState({ editing: true });
     }
   };
 
-  stopEditing = () => {
-    const newValue = trim(this.inputRef.current.value);
-    const ignorableBlank = this.props.ignoreBlanks && newValue === '';
+  stopEditing = currentValue => {
+    const newValue = trim(currentValue);
+    const ignorableBlank = this.props.ignoreBlanks && newValue === "";
     if (!ignorableBlank && newValue !== this.props.value) {
       this.props.onDone(newValue);
     }
     this.setState({ editing: false });
   };
 
-  keyDown = (event) => {
+  handleKeyDown = event => {
     if (event.keyCode === 13 && !event.shiftKey) {
       event.preventDefault();
-      this.stopEditing();
+      this.stopEditing(event.target.value);
     } else if (event.keyCode === 27) {
       this.setState({ editing: false });
     }
   };
 
-  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 = () => React.createElement(this.props.editor, {
-    ref: this.inputRef,
-    className: 'rd-form-control',
-    defaultValue: this.props.value,
-    onBlur: this.stopEditing,
-    onKeyDown: this.keyDown,
-  });
+  renderEdit = () => {
+    const { multiline, value, editorProps } = this.props;
+    const InputComponent = multiline ? Input.TextArea : Input;
+    return (
+      <InputComponent
+        defaultValue={value}
+        onBlur={e => this.stopEditing(e.target.value)}
+        onKeyDown={this.handleKeyDown}
+        autoFocus
+        {...editorProps}
+      />
+    );
+  };
 
   render() {
     return (
-      <span className={'edit-in-place' + (this.state.editing ? ' active' : '')}>
+      <span className={cx("edit-in-place", { active: this.state.editing }, this.props.className)}>
         {this.state.editing ? this.renderEdit() : this.renderNormal()}
       </span>
     );
   }
 }
-
-export default function init(ngModule) {
-  ngModule.component('editInPlace', react2angular(EditInPlace));
-}
-
-init.init = true;

client/app/components/EditParameterSettingsDialog.jsx

@@ -1,23 +1,22 @@
-
-import { includes, words, capitalize, clone, isNull } from 'lodash';
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import Checkbox from 'antd/lib/checkbox';
-import Modal from 'antd/lib/modal';
-import Form from 'antd/lib/form';
-import Button from 'antd/lib/button';
-import Select from 'antd/lib/select';
-import Input from 'antd/lib/input';
-import Divider from 'antd/lib/divider';
-import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
-import { QuerySelector } from '@/components/QuerySelector';
-import { Query } from '@/services/query';
+import { includes, words, capitalize, clone, isNull } from "lodash";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Checkbox from "antd/lib/checkbox";
+import Modal from "antd/lib/modal";
+import Form from "antd/lib/form";
+import Button from "antd/lib/button";
+import Select from "antd/lib/select";
+import Input from "antd/lib/input";
+import Divider from "antd/lib/divider";
+import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
+import QuerySelector from "@/components/QuerySelector";
+import { Query } from "@/services/query";
 
 const { Option } = Select;
 const formItemProps = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
 
 function getDefaultTitle(text) {
-  return capitalize(words(text).join(' ')); // humanize
+  return capitalize(words(text).join(" ")); // humanize
 }
 
 function isTypeDateRange(type) {
@@ -26,30 +25,26 @@ function isTypeDateRange(type) {
 
 function joinExampleList(multiValuesOptions) {
   const { prefix, suffix } = multiValuesOptions;
-  return ['value1', 'value2', 'value3']
-    .map(value => `${prefix}${value}${suffix}`)
-    .join(',');
+  return ["value1", "value2", "value3"].map(value => `${prefix}${value}${suffix}`).join(",");
 }
 
 function NameInput({ name, type, onChange, existingNames, setValidation }) {
-  let helpText = '';
-  let validateStatus = '';
+  let helpText = "";
+  let validateStatus = "";
 
   if (!name) {
-    helpText = 'Choose a keyword for this parameter';
+    helpText = "Choose a keyword for this parameter";
     setValidation(false);
   } else if (includes(existingNames, name)) {
-    helpText = 'Parameter with this name already exists';
+    helpText = "Parameter with this name already exists";
     setValidation(false);
-    validateStatus = 'error';
+    validateStatus = "error";
   } else {
     if (isTypeDateRange(type)) {
       helpText = (
         <React.Fragment>
-          Appears in query as {' '}
-          <code style={{ display: 'inline-block', color: 'inherit' }}>
-            {`{{${name}.start}} {{${name}.end}}`}
-          </code>
+          Appears in query as{" "}
+          <code style={{ display: "inline-block", color: "inherit" }}>{`{{${name}.start}} {{${name}.end}}`}</code>
         </React.Fragment>
       );
     }
@@ -57,13 +52,7 @@ function NameInput({ name, type, onChange, existingNames, setValidation }) {
   }
 
   return (
-    <Form.Item
-      required
-      label="Keyword"
-      help={helpText}
-      validateStatus={validateStatus}
-      {...formItemProps}
-    >
+    <Form.Item required label="Keyword" help={helpText} validateStatus={validateStatus} {...formItemProps}>
       <Input onChange={e => onChange(e.target.value)} autoFocus />
     </Form.Item>
   );
@@ -86,13 +75,11 @@ function EditParameterSettingsDialog(props) {
 
   // fetch query by id
   useEffect(() => {
-    const { queryId } = props.parameter;
+    const queryId = props.parameter.queryId;
     if (queryId) {
-      Query.get({ id: queryId }, (query) => {
-        setInitialQuery(query);
-      });
+      Query.get({ id: queryId }).then(setInitialQuery);
     }
-  }, []);
+  }, [props.parameter.queryId]);
 
   function isFulfilled() {
     // name
@@ -101,12 +88,12 @@ function EditParameterSettingsDialog(props) {
     }
 
     // title
-    if (param.title === '') {
+    if (param.title === "") {
       return false;
     }
 
     // query
-    if (param.type === 'query' && !param.queryId) {
+    if (param.type === "query" && !param.queryId) {
       return false;
     }
 
@@ -129,16 +116,22 @@ function EditParameterSettingsDialog(props) {
   return (
     <Modal
       {...props.dialog.props}
-      title={isNew ? 'Add Parameter' : param.name}
+      title={isNew ? "Add Parameter" : param.name}
       width={600}
-      footer={[(
-        <Button key="cancel" onClick={props.dialog.dismiss}>Cancel</Button>
-      ), (
-        <Button key="submit" htmlType="submit" disabled={!isFulfilled()} type="primary" form="paramForm" data-test="SaveParameterSettings">
-          {isNew ? 'Add Parameter' : 'OK'}
-        </Button>
-      )]}
-    >
+      footer={[
+        <Button key="cancel" onClick={props.dialog.dismiss}>
+          Cancel
+        </Button>,
+        <Button
+          key="submit"
+          htmlType="submit"
+          disabled={!isFulfilled()}
+          type="primary"
+          form="paramForm"
+          data-test="SaveParameterSettings">
+          {isNew ? "Add Parameter" : "OK"}
+        </Button>,
+      ]}>
       <Form layout="horizontal" onSubmit={onConfirm} id="paramForm">
         {isNew && (
           <NameInput
@@ -158,25 +151,35 @@ function EditParameterSettingsDialog(props) {
         </Form.Item>
         <Form.Item label="Type" {...formItemProps}>
           <Select value={param.type} onChange={type => setParam({ ...param, type })} data-test="ParameterTypeSelect">
-            <Option value="text" data-test="TextParameterTypeOption">Text</Option>
-            <Option value="number" data-test="NumberParameterTypeOption">Number</Option>
+            <Option value="text" data-test="TextParameterTypeOption">
+              Text
+            </Option>
+            <Option value="number" data-test="NumberParameterTypeOption">
+              Number
+            </Option>
             <Option value="enum">Dropdown List</Option>
             <Option value="query">Query Based Dropdown List</Option>
             <Option disabled key="dv1">
               <Divider className="select-option-divider" />
             </Option>
-            <Option value="date" data-test="DateParameterTypeOption">Date</Option>
-            <Option value="datetime-local" data-test="DateTimeParameterTypeOption">Date and Time</Option>
+            <Option value="date" data-test="DateParameterTypeOption">
+              Date
+            </Option>
+            <Option value="datetime-local" data-test="DateTimeParameterTypeOption">
+              Date and Time
+            </Option>
             <Option value="datetime-with-seconds">Date and Time (with seconds)</Option>
             <Option disabled key="dv2">
               <Divider className="select-option-divider" />
             </Option>
-            <Option value="date-range" data-test="DateRangeParameterTypeOption">Date Range</Option>
+            <Option value="date-range" data-test="DateRangeParameterTypeOption">
+              Date Range
+            </Option>
             <Option value="datetime-range">Date and Time Range</Option>
             <Option value="datetime-range-with-seconds">Date and Time Range (with seconds)</Option>
           </Select>
         </Form.Item>
-        {param.type === 'enum' && (
+        {param.type === "enum" && (
           <Form.Item label="Values" help="Dropdown list values (newline delimited)" {...formItemProps}>
             <Input.TextArea
               rows={3}
@@ -185,7 +188,7 @@ function EditParameterSettingsDialog(props) {
             />
           </Form.Item>
         )}
-        {param.type === 'query' && (
+        {param.type === "query" && (
           <Form.Item label="Query" help="Select query to load dropdown values from" {...formItemProps}>
             <QuerySelector
               selectedQuery={initialQuery}
@@ -194,45 +197,54 @@ function EditParameterSettingsDialog(props) {
             />
           </Form.Item>
         )}
-        {(param.type === 'enum' || param.type === 'query') && (
+        {(param.type === "enum" || param.type === "query") && (
           <Form.Item className="m-b-0" label=" " colon={false} {...formItemProps}>
             <Checkbox
               defaultChecked={!!param.multiValuesOptions}
-              onChange={e => setParam({ ...param,
-                multiValuesOptions: e.target.checked ? {
-                  prefix: '',
-                  suffix: '',
-                  separator: ',',
-                } : null })}
-              data-test="AllowMultipleValuesCheckbox"
-            >
-            Allow multiple values
+              onChange={e =>
+                setParam({
+                  ...param,
+                  multiValuesOptions: e.target.checked
+                    ? {
+                        prefix: "",
+                        suffix: "",
+                        separator: ",",
+                      }
+                    : null,
+                })
+              }
+              data-test="AllowMultipleValuesCheckbox">
+              Allow multiple values
             </Checkbox>
           </Form.Item>
         )}
-        {(param.type === 'enum' || param.type === 'query') && param.multiValuesOptions && (
+        {(param.type === "enum" || param.type === "query") && param.multiValuesOptions && (
           <Form.Item
             label="Quotation"
-            help={(
+            help={
               <React.Fragment>
                 Placed in query as: <code>{joinExampleList(param.multiValuesOptions)}</code>
               </React.Fragment>
-            )}
-            {...formItemProps}
-          >
+            }
+            {...formItemProps}>
             <Select
               value={param.multiValuesOptions.prefix}
-              onChange={quoteOption => setParam({ ...param,
-                multiValuesOptions: {
-                  ...param.multiValuesOptions,
-                  prefix: quoteOption,
-                  suffix: quoteOption,
-                } })}
-              data-test="QuotationSelect"
-            >
+              onChange={quoteOption =>
+                setParam({
+                  ...param,
+                  multiValuesOptions: {
+                    ...param.multiValuesOptions,
+                    prefix: quoteOption,
+                    suffix: quoteOption,
+                  },
+                })
+              }
+              data-test="QuotationSelect">
               <Option value="">None (default)</Option>
               <Option value="'">Single Quotation Mark</Option>
-              <Option value={'"'} data-test="DoubleQuotationMarkOption">Double Quotation Mark</Option>
+              <Option value={'"'} data-test="DoubleQuotationMarkOption">
+                Double Quotation Mark
+              </Option>
             </Select>
           </Form.Item>
         )}

client/app/components/EditVisualizationButton/QueryControlDropdown.jsx

@@ -1,15 +1,13 @@
-import React from 'react';
-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 { react2angular } from 'react2angular';
+import React from "react";
+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 QueryResultsLink from './QueryResultsLink';
+import QueryResultsLink from "./QueryResultsLink";
 
-
-export function QueryControlDropdown(props) {
+export default function QueryControlDropdown(props) {
   const menu = (
     <Menu>
       {!props.query.isNew() && (!props.query.is_draft || !props.query.is_archived) && (
@@ -28,15 +26,26 @@ export function QueryControlDropdown(props) {
       )}
       <Menu.Item>
         <QueryResultsLink
+          fileType="csv"
           disabled={props.queryExecuting || !props.queryResult.getData || !props.queryResult.getData()}
           query={props.query}
           queryResult={props.queryResult}
           embed={props.embed}
-          apiKey={props.apiKey}
-        >
+          apiKey={props.apiKey}>
           <Icon type="file" /> Download as CSV File
         </QueryResultsLink>
       </Menu.Item>
+      <Menu.Item>
+        <QueryResultsLink
+          fileType="tsv"
+          disabled={props.queryExecuting || !props.queryResult.getData || !props.queryResult.getData()}
+          query={props.query}
+          queryResult={props.queryResult}
+          embed={props.embed}
+          apiKey={props.apiKey}>
+          <Icon type="file" /> Download as TSV File
+        </QueryResultsLink>
+      </Menu.Item>
       <Menu.Item>
         <QueryResultsLink
           fileType="xlsx"
@@ -44,8 +53,7 @@ export function QueryControlDropdown(props) {
           query={props.query}
           queryResult={props.queryResult}
           embed={props.embed}
-          apiKey={props.apiKey}
-        >
+          apiKey={props.apiKey}>
           <Icon type="file-excel" /> Download as Excel File
         </QueryResultsLink>
       </Menu.Item>
@@ -53,11 +61,7 @@ export function QueryControlDropdown(props) {
   );
 
   return (
-    <Dropdown
-      trigger={['click']}
-      overlay={menu}
-      overlayClassName="query-control-dropdown-overlay"
-    >
+    <Dropdown trigger={["click"]} overlay={menu} overlayClassName="query-control-dropdown-overlay">
       <Button data-test="QueryControlDropdownButton">
         <Icon type="ellipsis" rotate={90} />
       </Button>
@@ -72,22 +76,13 @@ QueryControlDropdown.propTypes = {
   showEmbedDialog: PropTypes.func.isRequired,
   embed: PropTypes.bool,
   apiKey: PropTypes.string,
-  selectedTab: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  selectedTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   openAddToDashboardForm: PropTypes.func.isRequired,
 };
 
 QueryControlDropdown.defaultProps = {
   queryResult: {},
   embed: false,
-  apiKey: '',
-  selectedTab: '',
+  apiKey: "",
+  selectedTab: "",
 };
-
-export default function init(ngModule) {
-  ngModule.component('queryControlDropdown', react2angular(QueryControlDropdown));
-}
-
-init.init = true;

client/app/components/EditVisualizationButton/QueryResultsLink.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
+import React from "react";
+import PropTypes from "prop-types";
 
 export default function QueryResultsLink(props) {
-  let href = '';
+  let href = "";
 
   const { query, queryResult, fileType } = props;
   const resultId = queryResult.getId && queryResult.getId();
@@ -11,9 +10,7 @@ export default function QueryResultsLink(props) {
 
   if (resultId && resultData && query.name) {
     if (query.id) {
-      href = `api/queries/${query.id}/results/${resultId}.${fileType}${
-        props.embed ? `?api_key=${props.apiKey}` : ''
-      }`;
+      href = `api/queries/${query.id}/results/${resultId}.${fileType}${props.embed ? `?api_key=${props.apiKey}` : ""}`;
     } else {
       href = `api/query_results/${resultId}.${fileType}`;
     }
@@ -33,15 +30,12 @@ QueryResultsLink.propTypes = {
   disabled: PropTypes.bool.isRequired,
   embed: PropTypes.bool,
   apiKey: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
 QueryResultsLink.defaultProps = {
   queryResult: {},
-  fileType: 'csv',
+  fileType: "csv",
   embed: false,
-  apiKey: '',
+  apiKey: "",
 };

client/app/components/EditVisualizationButton/index.jsx

@@ -1,39 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from 'antd/lib/button';
-import Icon from 'antd/lib/icon';
-import { react2angular } from 'react2angular';
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "antd/lib/button";
+import Icon from "antd/lib/icon";
 
-
-export function EditVisualizationButton(props) {
+export default function EditVisualizationButton(props) {
   return (
     <Button
       data-test="EditVisualization"
       className="edit-visualization"
-      onClick={() => props.openVisualizationEditor(props.selectedTab)}
-    >
+      onClick={() => props.openVisualizationEditor(props.selectedTab)}>
       <Icon type="form" />
-      <span className="hidden-xs hidden-s hidden-m">
-        Edit Visualization
-      </span>
+      <span className="hidden-xs hidden-s hidden-m">Edit Visualization</span>
     </Button>
   );
 }
 
 EditVisualizationButton.propTypes = {
   openVisualizationEditor: PropTypes.func.isRequired,
-  selectedTab: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  selectedTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 EditVisualizationButton.defaultProps = {
-  selectedTab: '',
+  selectedTab: "",
 };
-
-export default function init(ngModule) {
-  ngModule.component('editVisualizationButton', react2angular(EditVisualizationButton));
-}
-
-init.init = true;

client/app/components/EmailSettingsWarning.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { clientConfig, currentUser } from '@/services/auth';
-import Tooltip from 'antd/lib/tooltip';
-import Alert from 'antd/lib/alert';
-import HelpTrigger from '@/components/HelpTrigger';
+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import { clientConfig, currentUser } from "@/services/auth";
+import Tooltip from "antd/lib/tooltip";
+import Alert from "antd/lib/alert";
+import HelpTrigger from "@/components/HelpTrigger";
 
 export default function EmailSettingsWarning({ featureName, className, mode, adminOnly }) {
   if (!clientConfig.mailSettingsMissing) {
@@ -17,33 +17,31 @@ export default function EmailSettingsWarning({ featureName, className, mode, adm
 
   const message = (
     <span>
-      Your mail server isn&apos;t configured correctly, and is needed for {featureName} to work.{' '}
+      Your mail server isn&apos;t configured correctly, and is needed for {featureName} to work.{" "}
       <HelpTrigger type="MAIL_CONFIG" className="f-inherit" />
     </span>
   );
 
-  if (mode === 'icon') {
+  if (mode === "icon") {
     return (
       <Tooltip title={message}>
-        <i className={cx('fa fa-exclamation-triangle', className)} />
+        <i className={cx("fa fa-exclamation-triangle", className)} />
       </Tooltip>
     );
   }
 
-  return (
-    <Alert message={message} type="error" className={className} />
-  );
+  return <Alert message={message} type="error" className={className} />;
 }
 
 EmailSettingsWarning.propTypes = {
   featureName: PropTypes.string.isRequired,
   className: PropTypes.string,
-  mode: PropTypes.oneOf(['alert', 'icon']),
+  mode: PropTypes.oneOf(["alert", "icon"]),
   adminOnly: PropTypes.bool,
 };
 
 EmailSettingsWarning.defaultProps = {
   className: null,
-  mode: 'alert',
+  mode: "alert",
   adminOnly: false,
 };

client/app/components/FavoritesControl.jsx

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