Automatically tag release candidates (#6416)

Format similar to Ubuntu: YY.MM.N

Discussion:

  https://github.com/getredash/redash/discussions/6411

1. Updates version in:

  package.json
  redash/__init__.py

2. Sets version tag

.ci/Dockerfile.cypress

@@ -0,0 +1,12 @@
+FROM cypress/browsers:node16.18.0-chrome90-ff88
+
+ENV APP /usr/src/app
+WORKDIR $APP
+
+COPY package.json yarn.lock .yarnrc $APP/
+COPY viz-lib $APP/viz-lib
+RUN npm install yarn@1.22.19 -g && yarn --frozen-lockfile --network-concurrency 1 > /dev/null
+
+COPY . $APP
+
+RUN ./node_modules/.bin/cypress verify

.ci/docker-compose.ci.yml

@@ -12,11 +12,15 @@ services:
       PYTHONUNBUFFERED: 0
       REDASH_LOG_LEVEL: "INFO"
       REDASH_REDIS_URL: "redis://redis:6379/0"
-      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
+      POSTGRES_PASSWORD: "FmTKs5vX52ufKR1rd8tn4MoSP7zvCJwb"
+      REDASH_DATABASE_URL: "postgresql://postgres:FmTKs5vX52ufKR1rd8tn4MoSP7zvCJwb@postgres/postgres"
+      REDASH_COOKIE_SECRET: "2H9gNG9obnAQ9qnR9BDTQUph6CbXKCzF"
   redis:
-    image: redis:3.0-alpine
+    image: redis:7-alpine
     restart: unless-stopped
   postgres:
-    image: postgres:9.5.6-alpine
+    image: pgautoupgrade/pgautoupgrade:15-alpine3.8
     command: "postgres -c fsync=off -c full_page_writes=off -c synchronous_commit=OFF"
     restart: unless-stopped
+    environment:
+      POSTGRES_HOST_AUTH_METHOD: "trust"

.ci/docker-compose.cypress.yml

@@ -9,9 +9,11 @@ x-redash-service: &redash-service
 x-redash-environment: &redash-environment
   REDASH_LOG_LEVEL: "INFO"
   REDASH_REDIS_URL: "redis://redis:6379/0"
-  REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
+  POSTGRES_PASSWORD: "FmTKs5vX52ufKR1rd8tn4MoSP7zvCJwb"
+  REDASH_DATABASE_URL: "postgresql://postgres:FmTKs5vX52ufKR1rd8tn4MoSP7zvCJwb@postgres/postgres"
   REDASH_RATELIMIT_ENABLED: "false"
   REDASH_ENFORCE_CSRF: "true"
+  REDASH_COOKIE_SECRET: "2H9gNG9obnAQ9qnR9BDTQUph6CbXKCzF"
 services:
   server:
     <<: *redash-service
@@ -43,7 +45,7 @@ services:
     ipc: host
     build:
       context: ../
-      dockerfile: .circleci/Dockerfile.cypress
+      dockerfile: .ci/Dockerfile.cypress
     depends_on:
       - server
       - worker
@@ -63,9 +65,11 @@ services:
       CYPRESS_PROJECT_ID: ${CYPRESS_PROJECT_ID}
       CYPRESS_RECORD_KEY: ${CYPRESS_RECORD_KEY}
   redis:
-    image: redis:3.0-alpine
+    image: redis:7-alpine
     restart: unless-stopped
   postgres:
-    image: postgres:9.5.6-alpine
+    image: pgautoupgrade/pgautoupgrade:15-alpine3.8
     command: "postgres -c fsync=off -c full_page_writes=off -c synchronous_commit=OFF"
     restart: unless-stopped
+    environment:
+      POSTGRES_HOST_AUTH_METHOD: "trust"

.ci/docker_build

@@ -1,7 +1,11 @@
 #!/bin/bash
+set -e
 VERSION=$(jq -r .version package.json)
 VERSION_TAG=$VERSION.b$CIRCLE_BUILD_NUM
 
+export DOCKER_BUILDKIT=1
+export COMPOSE_DOCKER_CLI_BUILD=1
+
 docker login -u $DOCKER_USER -p $DOCKER_PASS
 
 if [ $CIRCLE_BRANCH = master ] || [ $CIRCLE_BRANCH = preview-image ]
@@ -14,4 +18,4 @@ else
     docker push redash/redash:$VERSION_TAG
 fi
 
-echo "Built: $VERSION_TAG"
+echo "Built: $VERSION_TAG"

.circleci/Dockerfile.cypress

@@ -1,12 +0,0 @@
-FROM cypress/browsers:node14.0.0-chrome84
-
-ENV APP /usr/src/app
-WORKDIR $APP
-
-COPY package.json package-lock.json $APP/
-COPY viz-lib $APP/viz-lib
-RUN npm ci > /dev/null
-
-COPY . $APP
-
-RUN ./node_modules/.bin/cypress verify

.circleci/config.yml

@@ -1,177 +0,0 @@
-version: 2.0
-
-build-docker-image-job: &build-docker-image-job
-  docker:
-    - 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
-    - run: npm run bundle
-    - run: .circleci/docker_build
-jobs:
-  backend-lint:
-    docker:
-      - image: circleci/python:3.7.0
-    steps:
-      - checkout
-      - run: sudo pip install flake8
-      - run: ./bin/flake8_tests.sh
-  backend-unit-tests:
-    environment:
-      COMPOSE_FILE: .circleci/docker-compose.circle.yml
-      COMPOSE_PROJECT_NAME: redash
-    docker:
-      - image: circleci/buildpack-deps:xenial
-    steps:
-      - setup_remote_docker
-      - checkout
-      - run:
-          name: Build Docker Images
-          command: |
-            set -x
-            docker-compose build --build-arg skip_ds_deps=true --build-arg skip_frontend_build=true
-            docker-compose up -d
-            sleep 10
-      - run:
-          name: Create Test Database
-          command: docker-compose run --rm postgres psql -h postgres -U postgres -c "create database tests;"
-      - run:
-          name: List Enabled Query Runners
-          command: docker-compose run --rm redash manage ds list_types
-      - run:
-          name: Run Tests
-          command: docker-compose run --name tests redash tests --junitxml=junit.xml --cov-report xml --cov=redash --cov-config .coveragerc tests/
-      - run:
-          name: Copy Test Results
-          command: |
-            mkdir -p /tmp/test-results/unit-tests
-            docker cp tests:/app/coverage.xml ./coverage.xml
-            docker cp tests:/app/junit.xml /tmp/test-results/unit-tests/results.xml
-          when: always
-      - store_test_results:
-          path: /tmp/test-results
-      - store_artifacts:
-          path: coverage.xml
-  frontend-lint:
-    environment:
-      CYPRESS_INSTALL_BINARY: 0
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
-    docker:
-      - image: circleci/node:12
-    steps:
-      - checkout
-      - run: mkdir -p /tmp/test-results/eslint
-      - run: npm ci
-      - run: npm run lint:ci
-      - store_test_results:
-          path: /tmp/test-results
-  frontend-unit-tests:
-    environment:
-      CYPRESS_INSTALL_BINARY: 0
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
-    docker:
-      - 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 ci
-      - run: npm run bundle
-      - 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:
-      COMPOSE_FILE: .circleci/docker-compose.cypress.yml
-      COMPOSE_PROJECT_NAME: cypress
-      PERCY_TOKEN_ENCODED: ZGRiY2ZmZDQ0OTdjMzM5ZWE0ZGQzNTZiOWNkMDRjOTk4Zjg0ZjMxMWRmMDZiM2RjOTYxNDZhOGExMjI4ZDE3MA==
-      CYPRESS_PROJECT_ID_ENCODED: OTI0Y2th
-      CYPRESS_RECORD_KEY_ENCODED: YzA1OTIxMTUtYTA1Yy00NzQ2LWEyMDMtZmZjMDgwZGI2ODgx
-      CYPRESS_INSTALL_BINARY: 0
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
-    docker:
-      - image: circleci/node:12
-    steps:
-      - setup_remote_docker
-      - checkout
-      - run:
-          name: Enable Code Coverage report for master branch
-          command: |
-            if [ "$CIRCLE_BRANCH" = "master" ]; then
-              echo 'export CODE_COVERAGE=true' >> $BASH_ENV
-              source $BASH_ENV
-            fi
-      - run:
-          name: Install npm dependencies
-          command: |
-            npm ci
-      - run:
-          name: Setup Redash server
-          command: |
-            npm run cypress build
-            npm run cypress start -- --skip-db-seed
-            docker-compose run cypress npm run cypress db-seed
-      - run:
-          name: Execute Cypress tests
-          command: npm run cypress run-ci
-      - run:
-          name: "Failure: output container logs to console"
-          command: |
-            docker-compose logs
-          when: on_fail
-      - run:
-          name: Copy Code Coverage results
-          command: |
-            docker cp cypress:/usr/src/app/coverage ./coverage || true
-          when: always
-      - store_artifacts:
-          path: coverage
-  build-docker-image: *build-docker-image-job
-  build-preview-docker-image: *build-docker-image-job
-workflows:
-  version: 2
-  build:
-    jobs:
-      - backend-lint
-      - backend-unit-tests:
-          requires:
-            - backend-lint
-      - frontend-lint
-      - frontend-unit-tests:
-          requires:
-            - backend-lint
-            - frontend-lint
-      - frontend-e2e-tests:
-          requires:
-            - frontend-lint
-      - build-preview-docker-image:
-          requires:
-            - backend-unit-tests
-            - frontend-unit-tests
-            - frontend-e2e-tests
-          filters:
-            branches:
-              only:
-                - master
-      - hold:
-          type: approval
-          requires:
-            - backend-unit-tests
-            - frontend-unit-tests
-            - frontend-e2e-tests
-          filters:
-            branches:
-              only:
-                - /release\/.*/
-      - build-docker-image:
-          requires:
-            - hold

.github/ISSUE_TEMPLATE/---bug_report.md

@@ -7,10 +7,10 @@ about: Report reproducible software issues so we can improve
 
 We use GitHub only for bug reports 🐛
 
-Anything else should be posted to https://discuss.redash.io 👫
+Anything else should be a discussion: https://github.com/getredash/redash/discussions/ 👫
 
-🚨For support, help & questions use https://discuss.redash.io/c/support
-💡For feature requests & ideas use https://discuss.redash.io/c/feature-requests
+🚨For support, help & questions use https://github.com/getredash/redash/discussions/categories/q-a
+💡For feature requests & ideas use https://github.com/getredash/redash/discussions/categories/ideas
 
 **Found a security vulnerability?** Please email security@redash.io to report any security vulnerabilities. We will acknowledge receipt of your vulnerability and strive to send you regular updates about our progress. If you're curious about the status of your disclosure please feel free to email us again. If you want to encrypt your disclosure email, you can use this PGP key.
 

.github/ISSUE_TEMPLATE/--anything_else.md

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,15 +1,26 @@
-## What type of PR is this? (check all applicable)
-<!-- Please leave only what's applicable -->
+## What type of PR is this? 
+<!-- Check all that apply, delete what doesn't apply. -->
 
 - [ ] Refactor
 - [ ] Feature
 - [ ] Bug Fix
-- [ ] New Query Runner (Data Source)
+- [ ] New Query Runner (Data Source) 
 - [ ] New Alert Destination
 - [ ] Other
 
 ## Description
+<!-- In case of adding / modifying a query runner, please specify which version(s) you expect are compatible. -->
+
+## How is this tested?
+
+- [ ] Unit tests (pytest, jest)
+- [ ] E2E Tests (Cypress)
+- [ ] Manually
+- [ ] N/A
+
+<!-- If Manually, please describe. -->
 
 ## Related Tickets & Documents
+<!-- If applicable, please include a link to your documentation PR against getredash/website -->
 
 ## Mobile & Desktop Screenshots/Recordings (if there are UI changes)

.github/support.yml

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

.github/workflows/ci.yml

@@ -0,0 +1,153 @@
+name: Tests
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+env:
+  NODE_VERSION: 16.20.1
+jobs:
+  backend-lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.8'
+      - run: sudo pip install flake8==6.1.0 black==23.1.0 isort==5.12.0
+      - run: flake8 .
+      - run: black --check .
+      - run: isort --check-only --diff .
+
+  backend-unit-tests:
+    runs-on: ubuntu-22.04
+    needs: backend-lint
+    env:
+      COMPOSE_FILE: .ci/docker-compose.ci.yml
+      COMPOSE_PROJECT_NAME: redash
+      COMPOSE_DOCKER_CLI_BUILD: 1
+      DOCKER_BUILDKIT: 1
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - name: Build Docker Images
+        run: |
+          set -x
+          docker-compose build --build-arg test_all_deps=true --build-arg skip_frontend_build=true
+          docker-compose up -d
+          sleep 10
+      - name: Create Test Database
+        run: docker-compose -p redash run --rm postgres psql -h postgres -U postgres -c "create database tests;"
+      - name: List Enabled Query Runners
+        run: docker-compose -p redash run --rm redash manage ds list_types
+      - name: Run Tests
+        run: docker-compose -p redash run --name tests redash tests --junitxml=junit.xml --cov-report=xml --cov=redash --cov-config=.coveragerc tests/
+      - name: Copy Test Results
+        run: |
+          mkdir -p /tmp/test-results/unit-tests
+          docker cp tests:/app/coverage.xml ./coverage.xml
+          docker cp tests:/app/junit.xml /tmp/test-results/unit-tests/results.xml
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+      - name: Store Test Results
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-results
+          path: /tmp/test-results
+      - name: Store Coverage Results
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage
+          path: coverage.xml
+
+  frontend-lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: |
+          npm install --global --force yarn@1.22.19
+          yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
+      - name: Run Lint
+        run: yarn lint:ci
+      - name: Store Test Results
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-results
+          path: /tmp/test-results
+
+  frontend-unit-tests:
+    runs-on: ubuntu-22.04
+    needs: frontend-lint
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: |
+          npm install --global --force yarn@1.22.19
+          yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
+      - name: Run App Tests
+        run: yarn test
+      - name: Run Visualizations Tests
+        run: cd viz-lib && yarn test
+      - run: yarn lint
+
+  frontend-e2e-tests:
+    runs-on: ubuntu-22.04
+    needs: frontend-lint
+    env:
+      COMPOSE_FILE: .ci/docker-compose.cypress.yml
+      COMPOSE_PROJECT_NAME: cypress
+      PERCY_TOKEN_ENCODED: ZGRiY2ZmZDQ0OTdjMzM5ZWE0ZGQzNTZiOWNkMDRjOTk4Zjg0ZjMxMWRmMDZiM2RjOTYxNDZhOGExMjI4ZDE3MA==
+      CYPRESS_PROJECT_ID_ENCODED: OTI0Y2th
+      CYPRESS_RECORD_KEY_ENCODED: YzA1OTIxMTUtYTA1Yy00NzQ2LWEyMDMtZmZjMDgwZGI2ODgx
+      CYPRESS_INSTALL_BINARY: 0
+      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+      - name: Enable Code Coverage Report For Master Branch
+        if: endsWith(github.ref, '/master')
+        run: |
+          echo "CODE_COVERAGE=true" >> $GITHUB_ENV
+      - name: Install Dependencies
+        run: |
+          npm install --global --force yarn@1.22.19
+          yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
+      - name: Setup Redash Server
+        run: |
+          set -x
+          yarn cypress build
+          yarn cypress start -- --skip-db-seed
+          docker-compose run cypress yarn cypress db-seed
+      - name: Execute Cypress Tests
+        run: yarn cypress run-ci
+      - name: "Failure: output container logs to console"
+        if: failure()
+        run: docker-compose logs
+      - name: Copy Code Coverage Results
+        run: docker cp cypress:/usr/src/app/coverage ./coverage || true
+      - name: Store Coverage Results
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage
+          path: coverage

.github/workflows/periodic-snapshot.yml

@@ -0,0 +1,26 @@
+name: Periodic Snapshot
+
+# 10 minutes after midnight on the first of every month
+on:
+  schedule:
+  - cron: "10 0 1 * *"
+
+permissions:
+  contents: write
+
+jobs:
+  bump-version-and-tag:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: |
+          date="$(date +%y.%m).0-dev"
+          gawk -i inplace -F: -v q=\" -v tag=$date '/^  "version": / { print $1 FS, q tag q ","; next} { print }' package.json
+          gawk -i inplace -F= -v q=\" -v tag=$date '/^__version__ =/ { print $1 FS, q tag q; next} { print }' redash/__init__.py
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git add package.json redash/__init__.py
+          git commit -m "Shapshot: ${date}"
+          git push origin
+          git tag $date
+          git push origin $date

.nvmrc

@@ -0,0 +1 @@
+v16.20.1

.pre-commit-config.yaml

@@ -0,0 +1,19 @@
+repos:
+  - repo: https://github.com/PyCQA/isort
+    rev: 5.12.0
+    hooks:
+      - id: isort
+  - repo: https://github.com/psf/black
+    rev: 23.1.0
+    hooks:
+      - id: black
+        language_version: python3
+  - repo: https://github.com/pycqa/flake8
+    rev: 6.1.0
+    hooks:
+      - id: flake8
+        exclude: "migration/.*|.git|viz-lib|node_modules|migrations|bin/upgrade"
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+      - id: requirements-txt-fixer

.restyled.yaml

@@ -57,6 +57,9 @@ restylers:
       - migrations/versions
   - name: prettier
     image: restyled/restyler-prettier:v1.19.1-2
+    command:
+      - prettier
+      - --write
     include:
       - client/app/**/*.js
       - client/app/**/*.jsx

.yarn/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

CHANGELOG.md

@@ -1,5 +1,152 @@
 # Change Log
 
+## V10.1.0 - 2021-11-23
+
+This release includes patches for three security vulnerabilities:
+
+- Insecure default configuration affects installations where REDASH_COOKIE_SECRET is not set explicitly (CVE-2021-41192)
+- SSRF vulnerability affects installations that enabled URL-loading data sources (CVE-2021-43780)
+- Incorrect usage of state parameter in OAuth client code affects installations where Google Login is enabled (CVE-2021-43777)
+
+And a couple features that didn't merge in time for 10.0.0
+
+- Big Query: Speed up schema loading (#5632)
+- Add support for Firebolt data source (#5606)
+- Fix: Loading schema for Sqlite DB with "Order" column name fails (#5623)
+
+## v10.0.0 - 2021-10-01
+
+A few changes were merged during the V10 beta period.
+
+- New Data Source: CSV/Excel Files
+- Fix: Edit Source button disappeared for users without CanEdit permissions
+- We pinned our docker base image to Python3.7-slim-buster to avoid build issues
+- Fix: dashboard list pagination didn't work
+
+## v10.0.0-beta - 2021-06-16
+
+Just over a year since our last release, the V10 beta is ready. Since we never made a non-beta release of V9, we expect many users will upgrade directly from V8 -> V10. This will bring a lot of exciting features. Please check out the V9 beta release notes below to learn more.
+
+This V10 beta incorporates fixes for the feedback we received on the V9 beta along with a few long-requested features (horizontal bar charts!) and other changes to improve UX and reliability.
+
+This release was made possible by contributions from 35+ people (the Github API didn't let us pull handles this time around): Alex Kovar, Alexander Rusanov, Arik Fraimovich, Ben Amor, Christopher Grant, Đặng Minh Dũng, Daniel Lang, deecay, Elad Ossadon, Gabriel Dutra, iwakiriK, Jannis Leidel, Jerry, Jesse Whitehouse, Jiajie Zhong, Jim Sparkman, Jonathan Hult, Josh Bohde, Justin Talbot, koooge, Lei Ni, Levko Kravets, Lingkai Kong, max-voronov, Mike Nason, Nolan Nichols, Omer Lachish, Patrick Yang, peterlee, Rafael Wendel, Sebastian Tramp, simonschneider-db, Tim Gates, Tobias Macey, Vipul Mathur, and Vladislav Denisov
+
+Our special thanks to [Sohail Ahmed](https://pk.linkedin.com/in/sohail-ahmed-755776184) for reporting a vulnerability in our "forgot password" page (#5425)
+
+### Upgrading
+
+(This section is duplicated from the previous release - since many users will upgrade directly from V8 -> V10)
+
+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
+- Redash now uses a vertical navbar
+- Dashboard list now includes “My Dashboards” filter
+- Dashboard parameters can now be re-ordered
+- Queries can now be executed with Shift + Enter on all platforms.
+- Added New Dashboard/Query/Alert buttons to corresponding list pages
+- Dashboard text widgets now prompt to confirm before closing the text editor
+- A plus sign is now shown between tags used for search
+- On the queries list view “My Queries” has moved above “Archived”
+- Improved behavior for filtering by tags in list views
+- When a user’s session expires for inactivity, they are prompted to log-in with a pop-up so they don’t lose their place in the app
+- Numerous accessibility changes towards the a11y standard
+- Hide the “Create” menu button if current user doesn’t have permission to any data sources
+
+### Visualizations
+- Feature: Added support for horizontal box plots
+- Feature: Added support for horizontal bar charts
+- Feature: Added “Reverse” option for Chart visualization legend
+- Feature: Added option to align Chart Y-axes at zero
+- Feature: The table visualization header is now fixed when scrolling
+- Feature: Added USA map to choropleth visualization
+- Fix: Selected filters were reset when switching visualizations
+- Fix: Stacked bar chart showed the wrong Y-axis range in some cases
+- Fix: Bar chart with second y axis overlapped data series
+- Fix: Y-axis autoscale failed when min or max was set
+- Fix: Custom JS visualization was broken because of a typo
+- Fix: Too large visualization caused filters block to collapse
+- Fix: Sankey visualization looked inconsistent if the data source returned VARCHAR instead of numeric types
+
+### Structural Updates
+- Redash now prevents CSRF attacks
+- Migration to TypeScript
+- Upgrade to Antd version 4
+### Data Sources
+- New Data Sources: SPARQL Endpoint, Eccenca Corporate Memory, TrinoDB
+- Databricks
+  - Custom Schema Browser that allows switching between databases
+  - Option added to truncate large results
+  - Support for multiple-statement queries
+  - Schema browser can now use eventlet instead of RQ
+- MongoDB:
+  - Moved Username and Password out of the connection string so that password can be stored secretly
+- Oracle:
+  - Fix: Annotated queries always failed. Annotation is now disabled
+- Postgres/CockroachDB:
+  - SSL certfile/keyfile fields are now handled as secret
+- Python:
+  - Feature: Custom built-ins are now supported
+  - Fix: Query runner was not compatible with Python 3
+- Snowflake:
+  - Data source now accepts a custom host address (for use with proxies)
+- TreasureData:
+  - API key field is now handled as secret
+- Yandex:
+  - OAuth token field is now handled as secret
+
+### Alerts
+- Feature: Added ability to mute alerts without deleting them
+- Change: Non-email alert destination details are now obfuscated to avoid leaking sensitive information (webhook URLs, tokens etc.)
+- Fix: numerical comparisons failed if value from query was a string
+
+### Parameters
+- Added “Last 12 months” option for dynamic date ranges
+
+### Bug Fixes
+- Fix: Private addresses were not allowed even when enforcing was disabled 
+- Fix: Python query runner wasn’t updated for Python 3
+- Fix: Sorting queries by schedule returned the wrong order
+- Fix: Counter visualization was enormous in some cases
+- Fix: Dashboard URL will now change when the dashboard title changes
+- Fix: URL parameters were removed when forking a query
+- Fix: Create link on data sources page was broken
+- Fix: Queries could be reassigned to read-only data sources
+- Fix: Multi-select dropdown was very slow if there were 1k+ options
+- Fix: Search Input couldn’t be focused or updated while editing a dashboard
+- Fix: The CLI command for “status” did not work
+- Fix: The dashboard list screen displayed too few items under certain pagination configurations
+
+### Other
+- Added an environment variable to disable public sharing links for queries and dashboards
+- Alert destinations are now encrypted at the database
+- The base query runner now has stubs to implement result truncating for other data sources
+- Static SAML configuration and assertion encryption are now supported
+- Adds new component for adding extra actions to the query and dashboard pages
+- Non-admins with at least view_only permission on a dashboard can now make GET requests to the data source resource
+- Added a BLOCKED_DOMAINS setting to prevent sign-ups from emails at specific domains
+- Added a rate limit to the “forgot password” page
+- RQ workers will now shutdown gracefully for known error codes
+- Scheduled execution failure counter now resets following a successful ad hoc execution
+- Redash now deletes locks for cancelled queries
+- Upgraded Ace Editor from v6 to v9
+- Added a periodic job to remove ghost locks
+- Removed content width limit on all pages
+- Introduce a <Link> React component
+
 ## v9.0.0-beta - 2020-06-11
 
 This release was long time in the making and has several major changes:

CONTRIBUTING.md

@@ -4,19 +4,7 @@ Thank you for taking the time to contribute! :tada::+1:
 
 The following is a set of guidelines for contributing to Redash. These are guidelines, not rules, please use your best judgement and feel free to propose changes to this document in a pull request.
 
-## Quick Links:
-
-- [Feature Requests](https://discuss.redash.io/c/feature-requests)
-- [Documentation](https://redash.io/help/)
-- [Blog](https://blog.redash.io/)
-- [Twitter](https://twitter.com/getredash)
-
----
-:star: If you already here and love the project, please make sure to press the Star button. :star:
-
----
-
-
+:star: If you're already here and love the project, please make sure to press the Star button. :star:
 ## Table of Contents
 
 [How can I contribute?](#how-can-i-contribute)
@@ -32,6 +20,13 @@ The following is a set of guidelines for contributing to Redash. These are guide
 - [Release Method](#release-method)
 - [Code of Conduct](#code-of-conduct)
 
+## Quick Links:
+
+- [User Forum](https://github.com/getredash/redash/discussions)
+- [Documentation](https://redash.io/help/)
+
+
+---
 ## How can I contribute?
 
 ### Reporting Bugs
@@ -39,25 +34,54 @@ The following is a set of guidelines for contributing to Redash. These are guide
 When creating a new bug report, please make sure to:
 
 - Search for existing issues first. If you find a previous report of your issue, please update the existing issue with additional information instead of creating a new one.
-- If you are not sure if your issue is really a bug or just some configuration/setup problem, please start a discussion in [the support forum](https://discuss.redash.io/c/support) first. Unless you can provide clear steps to reproduce, it's probably better to start with a thread in the forum and later to open an issue.
+- If you are not sure if your issue is really a bug or just some configuration/setup problem, please start a [Q&A discussion](https://github.com/getredash/redash/discussions/new?category=q-a) first. Unless you can provide clear steps to reproduce, it's probably better to start with a discussion and later to open an issue.
 - If you still decide to open an issue, please review the template and guidelines and include as much details as possible.
 
 ### Suggesting Enhancements / Feature Requests
 
 If you would like to suggest an enhancement or ask for a new feature:
 
-- 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.
+- Please check [the Ideas discussions](https://github.com/getredash/redash/discussions/categories/ideas) 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
 
-- **Code contributions are welcomed**. For big changes or significant features, it's usually better to reach out first and discuss what you want to implement and how (we recommend reading: [Pull Request First](https://medium.com/practical-blend/pull-request-first-f6bb667a9b6#.ozlqxvj36)). This to make sure that what you want to implement is aligned with our goals for the project and that no one else is already working on it.
-- Include screenshots and animated GIFs in your pull request whenever possible.
+**Code contributions are welcomed**. For big changes or significant features, it's usually better to reach out first and discuss what you want to implement and how (we recommend reading: [Pull Request First](https://medium.com/practical-blend/pull-request-first-f6bb667a9b6#.ozlqxvj36)). This is to make sure that what you want to implement is aligned with our goals for the project and that no one else is already working on it.
+
+#### Criteria for Review / Merging
+
+When you open your pull request, please follow this repository’s PR template carefully:
+
+- Indicate the type of change
+  - If you implement multiple unrelated features, bug fixes, or refactors please split them into individual pull requests.
+- Describe the change 
+- If fixing a bug, please describe the bug or link to an existing github issue / forum discussion
+- Include UI screenshots / GIFs 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 [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.
-  
+
+#### Initial Review (1 week)
+
+During this phase, a team member will apply the “Team Review” label if a pull request meets our criteria or a “Needs More Information” label if not. If more information is required, the team member will comment which criteria have not been met.
+
+If your pull request receives the “Needs More Information” label, please make the requested changes and then remove the label. This resets the 1 week timer for an initial review.
+
+Stale pull requests that remain untouched in “Needs More Information” for more than 4 weeks will be closed.
+
+If a team member closes your pull request, you may reopen it after you have made the changes requested during initial review. After you make these changes, remove the “Needs More Information” label. This again resets the timer for another initial review.
+
+#### Full Review (2 weeks)
+
+After the “Team Review” label is applied, a member of the core team will review the PR within 2 weeks. 
+
+Reviews will approve, request changes, or ask questions to discuss areas of uncertainty. After you’ve responded, a member of the team will re-review within one week.
+
+#### Merging (1 week)
+
+After your pull request has been approved, a member of the core team will merge the pull request within a week.
+
 ### 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.

Dockerfile

@@ -1,4 +1,6 @@
-FROM node:12 as frontend-builder
+FROM node:16.20.1 as frontend-builder
+
+RUN npm install --global --force yarn@1.22.19
 
 # Controls whether to build the frontend assets
 ARG skip_frontend_build
@@ -10,19 +12,20 @@ RUN useradd -m -d /frontend redash
 USER redash
 
 WORKDIR /frontend
-COPY --chown=redash package.json package-lock.json /frontend/
+COPY --chown=redash package.json yarn.lock .yarnrc /frontend/
 COPY --chown=redash viz-lib /frontend/viz-lib
 
 # Controls whether to instrument code for coverage information
 ARG code_coverage
 ENV BABEL_ENV=${code_coverage:+test}
 
-RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
+RUN if [ "x$skip_frontend_build" = "x" ] ; then yarn --frozen-lockfile --network-concurrency 1; fi
 
 COPY --chown=redash client /frontend/client
 COPY --chown=redash webpack.config.js /frontend/
-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
+RUN if [ "x$skip_frontend_build" = "x" ] ; then yarn build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
+
+FROM python:3.8-slim-buster
 
 EXPOSE 5000
 
@@ -30,64 +33,79 @@ EXPOSE 5000
 ARG skip_ds_deps
 # Controls whether to install dev dependencies.
 ARG skip_dev_deps
+# Controls whether to install all dependencies for testing.
+ARG test_all_deps
 
 RUN useradd --create-home redash
 
 # Ubuntu packages
 RUN apt-get update && \
-  apt-get install -y \
-    curl \
-    gnupg \
-    build-essential \
-    pwgen \
-    libffi-dev \
-    sudo \
-    git-core \
-    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 \
-    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 install -y --no-install-recommends \
+  curl \
+  gnupg \
+  build-essential \
+  pwgen \
+  libffi-dev \
+  sudo \
+  git-core \
+  # 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 \
+  unzip \
+  libsasl2-modules-gssapi-mit && \
   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 \
+
+ARG TARGETPLATFORM
+ARG databricks_odbc_driver_url=https://databricks-bi-artifacts.s3.us-east-2.amazonaws.com/simbaspark-drivers/odbc/2.6.26/SimbaSparkODBC-2.6.26.1045-Debian-64bit.zip
+RUN if [ "$TARGETPLATFORM" = "linux/amd64" ]; then \
+  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 --no-install-recommends msodbcsql17 \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/* \
+  && curl "$databricks_odbc_driver_url" --location --output /tmp/simba_odbc.zip \
+  && chmod 600 /tmp/simba_odbc.zip \
+  && unzip /tmp/simba_odbc.zip -d /tmp/simba \
+  && dpkg -i /tmp/simba/*.deb \
+  && printf "[Simba]\nDriver = /opt/simba/spark/lib/64/libsparkodbc_sb64.so" >> /etc/odbcinst.ini \
   && rm /tmp/simba_odbc.zip \
-  && rm -rf /tmp/SimbaSparkODBC*
+  && rm -rf /tmp/simba; fi
 
 WORKDIR /app
 
-# Disalbe PIP Cache and Version Check
+# Disable 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 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
+RUN pip install pip==23.1.2;
 
-COPY . /app
-COPY --from=frontend-builder /frontend/client/dist /app/client/dist
-RUN chown -R redash /app
+# We first copy only the requirements file, to avoid rebuilding on every file change.
+COPY requirements_all_ds.txt ./
+RUN if [ "x$skip_ds_deps" = "x" ] ; then cat requirements_all_ds.txt | sed -e '/^\s*#.*$/d' -e '/^\s*$/d' | xargs -n 1 pip install || true ; else echo "Skipping pip install -r requirements_all_ds.txt" ; fi
+
+
+COPY requirements_dev.txt ./
+RUN if [ "x$skip_dev_deps" = "x" ] ; then pip install -r requirements_dev.txt ; fi
+
+COPY requirements.txt ./
+RUN pip install -r requirements.txt
+
+RUN if [ "x$test_all_deps" != "x" ] ; then pip3 install -r requirements.txt -r requirements_dev.txt -r requirements_all_ds.txt ; fi
+
+COPY --chown=redash . /app
+COPY --from=frontend-builder --chown=redash /frontend/client/dist /app/client/dist
+RUN chown redash /app
 USER redash
 
 ENTRYPOINT ["/app/bin/docker-entrypoint"]

LICENSE.borders

@@ -0,0 +1,3 @@
+The Bahrain map data used in Redash was downloaded from
+https://cartographyvectors.com/map/857-bahrain-detailed-boundary in PR #6192.
+* Free for personal and commercial purpose with attribution.

Makefile

@@ -1,10 +1,10 @@
-.PHONY: compose_build up test_db create_database clean down bundle tests lint backend-unit-tests frontend-unit-tests test build watch start redis-cli bash
+.PHONY: compose_build up test_db create_database clean down tests lint backend-unit-tests frontend-unit-tests test build watch start redis-cli bash
 
-compose_build:
-	docker-compose build
+compose_build: .env
+	COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose build
 
 up:
-	docker-compose up -d --build
+	COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose up -d --build
 
 test_db:
 	@for i in `seq 1 5`; do \
@@ -13,7 +13,7 @@ test_db:
 	done
 	docker-compose exec postgres sh -c 'psql -U postgres -c "drop database if exists tests;" && psql -U postgres -c "create database tests;"'
 
-create_database:
+create_database: .env
 	docker-compose run server create_db
 
 clean:
@@ -22,8 +22,13 @@ clean:
 down:
 	docker-compose down
 
-bundle:
-	docker-compose run server bin/bundle-extensions
+.env:
+	printf "REDASH_COOKIE_SECRET=`pwgen -1s 32`\nREDASH_SECRET_KEY=`pwgen -1s 32`\n" >> .env
+
+env: .env
+
+format:
+	pre-commit run --all-files
 
 tests:
 	docker-compose run server tests
@@ -34,21 +39,20 @@ lint:
 backend-unit-tests: up test_db
 	docker-compose run --rm --name tests server tests
 
-frontend-unit-tests: bundle
-	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm ci
-	npm run bundle
-	npm test
+frontend-unit-tests:
+	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 yarn --frozen-lockfile
+	yarn test
 
 test: lint backend-unit-tests frontend-unit-tests
 
-build: bundle
-	npm run build
+build: 
+	yarn build
 
-watch: bundle
-	npm run watch
+watch: 
+	yarn watch
 
-start: bundle
-	npm run start
+start: 
+	yarn start
 
 redis-cli:
 	docker-compose run --rm redis redis-cli -h redis

README.md

@@ -4,7 +4,7 @@
 
 [![Documentation](https://img.shields.io/badge/docs-redash.io/help-brightgreen.svg)](https://redash.io/help/)
 [![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)
+[![GitHub Build](https://github.com/getredash/redash/actions/workflows/ci.yml/badge.svg)](https://github.com/getredash/redash/actions)
 
 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.
 
@@ -32,36 +32,51 @@ Redash features:
 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 CloudWatch / Insights
 - Amazon DynamoDB
 - Amazon Redshift
+- ArangoDB
 - Axibase Time Series Database
-- Cassandra
+- Apache Cassandra
 - ClickHouse
 - CockroachDB
+- Couchbase
 - CSV
-- Databricks (Apache Spark)
+- Databricks
 - DB2 by IBM
-- Druid
+- Dgraph
+- Apache Drill
+- Apache Druid
+- Eccenca Corporate Memory
 - Elasticsearch
+- Exasol
+- Microsoft Excel
+- Firebolt
+- Databend
 - Google Analytics
 - Google BigQuery
 - Google Spreadsheets
 - Graphite
 - Greenplum
-- Hive
-- Impala
+- Apache Hive
+- Apache Impala
 - InfluxDB
-- JIRA
+- IBM Netezza Performance Server
+- JIRA (JQL)
 - JSON
 - Apache Kylin
 - OmniSciDB (Formerly MapD)
+- MariaDB
 - MemSQL
 - Microsoft Azure Data Warehouse / Synapse
 - Microsoft Azure SQL Database
+- Microsoft Azure Data Explorer / Kusto
 - Microsoft SQL Server
 - MongoDB
 - MySQL
 - Oracle
+- Apache Phoenix
+- Apache Pinot
 - PostgreSQL
 - Presto
 - Prometheus
@@ -72,8 +87,12 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - ScyllaDB
 - Shell Scripts
 - Snowflake
+- SPARQL
 - SQLite
+- TiDB
 - TreasureData
+- Trino
+- Uptycs
 - Vertica
 - Yandex AppMetrrica
 - Yandex Metrica
@@ -81,12 +100,13 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 ## Getting Help
 
 * Issues: https://github.com/getredash/redash/issues
-* Discussion Forum: https://discuss.redash.io/
+* Discussion Forum: https://github.com/getredash/redash/discussions/
+* Development Discussion: https://discord.gg/tN5MdmfGBp
 
 ## 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://github.com/getredash/redash/wiki/Local-development-setup) and make a pull request. We need all the help we can get!
 
 ## Security
 

bin/bundle-extensions

@@ -1,115 +0,0 @@
-#!/usr/bin/env python3
-"""Copy bundle extension files to the client/app/extension directory"""
-import logging
-import os
-from pathlib import Path
-from shutil import copy
-from collections import OrderedDict as odict
-
-import importlib_metadata
-import importlib_resources
-
-# Name of the subdirectory
-BUNDLE_DIRECTORY = "bundle"
-
-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_directory = Path(__file__).parent.parent / extensions_relative_path
-
-if not extensions_directory.exists():
-    extensions_directory.mkdir()
-os.environ["EXTENSIONS_DIRECTORY"] = str(extensions_relative_path)
-
-
-def entry_point_module(entry_point):
-    """Returns the dotted module path for the given entry point"""
-    return entry_point.pattern.match(entry_point.value).group("module")
-
-
-def load_bundles():
-    """"Load bundles as defined in Redash extensions.
-
-    The bundle entry point can be defined as a dotted path to a module
-    or a callable, but it won't be called but just used as a means
-    to find the files under its file system path.
-
-    The name of the directory it looks for files in is "bundle".
-
-    So a Python package with an extension bundle could look like this::
-
-        my_extensions/
-        ├── __init__.py
-        └── wide_footer
-            ├── __init__.py
-            └── bundle
-                ├── extension.js
-                └── styles.css
-
-    and would then need to register the bundle with an entry point
-    under the "redash.bundles" group, e.g. in your setup.py::
-
-        setup(
-            # ...
-            entry_points={
-                "redash.bundles": [
-                    "wide_footer = my_extensions.wide_footer",
-                ]
-                # ...
-            },
-            # ...
-        )
-
-    """
-    bundles = odict()
-    for entry_point in importlib_metadata.entry_points().get("redash.bundles", []):
-        logger.info('Loading Redash bundle "%s".', entry_point.name)
-        module = entry_point_module(entry_point)
-        # Try to get a list of bundle files
-        try:
-            bundle_dir = importlib_resources.files(module).joinpath(BUNDLE_DIRECTORY)
-        except (ImportError, TypeError):
-            # Module isn't a package, so can't have a subdirectory/-package
-            logger.error(
-                'Redash bundle module "%s" could not be imported: "%s"',
-                entry_point.name,
-                module,
-            )
-            continue
-        if not bundle_dir.is_dir():
-            logger.error(
-                'Redash bundle directory "%s" could not be found or is not a directory: "%s"',
-                entry_point.name,
-                bundle_dir,
-            )
-            continue
-        bundles[entry_point.name] = list(bundle_dir.rglob("*"))
-    return bundles
-
-
-bundles = load_bundles().items()
-if bundles:
-    print("Number of extension bundles found: {}".format(len(bundles)))
-else:
-    print("No extension bundles found.")
-
-for bundle_name, paths in bundles:
-    # Shortcut in case not paths were found for the bundle
-    if not paths:
-        print('No paths found for bundle "{}".'.format(bundle_name))
-        continue
-
-    # The destination for the bundle files with the entry point name as the subdirectory
-    destination = Path(extensions_directory, bundle_name)
-    if not destination.exists():
-        destination.mkdir()
-
-    # Copy the bundle directory from the module to its destination.
-    print('Copying "{}" bundle to {}:'.format(bundle_name, destination.resolve()))
-    for src_path in paths:
-        dest_path = destination / src_path.name
-        print(" - {} -> {}".format(src_path, dest_path))
-        copy(str(src_path), str(dest_path))

bin/docker-entrypoint

@@ -22,6 +22,19 @@ worker() {
   exec supervisord -c worker.conf
 }
 
+workers_healthcheck() {
+  WORKERS_COUNT=${WORKERS_COUNT}
+  echo "Checking active workers count against $WORKERS_COUNT..."
+  ACTIVE_WORKERS_COUNT=`echo $(rq info --url $REDASH_REDIS_URL -R | grep workers | grep -oP ^[0-9]+)`
+  if [ "$ACTIVE_WORKERS_COUNT" -lt "$WORKERS_COUNT"  ]; then
+    echo "$ACTIVE_WORKERS_COUNT workers are active, Exiting"
+    exit 1
+  else
+    echo "$ACTIVE_WORKERS_COUNT workers are active"
+    exit 0
+  fi
+}
+
 dev_worker() {
   echo "Starting dev RQ worker..."
 
@@ -32,7 +45,8 @@ 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}
   MAX_REQUESTS_JITTER=${MAX_REQUESTS_JITTER:-100}
-  exec /usr/local/bin/gunicorn -b 0.0.0.0:5000 --name redash -w${REDASH_WEB_WORKERS:-4} redash.wsgi:app --max-requests $MAX_REQUESTS --max-requests-jitter $MAX_REQUESTS_JITTER
+  TIMEOUT=${REDASH_GUNICORN_TIMEOUT:-60}
+  exec /usr/local/bin/gunicorn -b 0.0.0.0:5000 --name redash -w${REDASH_WEB_WORKERS:-4} redash.wsgi:app --max-requests $MAX_REQUESTS --max-requests-jitter $MAX_REQUESTS_JITTER --timeout $TIMEOUT
 }
 
 create_db() {
@@ -75,6 +89,10 @@ case "$1" in
     shift
     worker
     ;;
+  workers_healthcheck)
+    shift
+    workers_healthcheck
+    ;;
   server)
     shift
     server

bin/flake8_tests.sh

@@ -5,5 +5,5 @@ set -o errexit  # fail the build if any task fails
 flake8 --version ; pip --version
 # stop the build if there are Python syntax errors or undefined names
 flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
-# exit-zero treats all errors as warnings.  The GitHub editor is 127 chars wide      
+# exit-zero treats all errors as warnings.  The GitHub editor is 127 chars wide
 flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics

bin/get_changes.py

@@ -1,35 +1,44 @@
 #!/bin/env python3
 
-import sys
 import re
 import subprocess
+import sys
 
 
 def get_change_log(previous_sha):
-    args = ['git', '--no-pager', 'log', '--merges', '--grep', 'Merge pull request', '--pretty=format:"%h|%s|%b|%p"', 'master...{}'.format(previous_sha)]
+    args = [
+        "git",
+        "--no-pager",
+        "log",
+        "--merges",
+        "--grep",
+        "Merge pull request",
+        '--pretty=format:"%h|%s|%b|%p"',
+        "master...{}".format(previous_sha),
+    ]
     log = subprocess.check_output(args)
     changes = []
 
-    for line in log.split('\n'):
+    for line in log.split("\n"):
         try:
-            sha, subject, body, parents = line[1:-1].split('|')
+            sha, subject, body, parents = line[1:-1].split("|")
         except ValueError:
             continue
 
         try:
-            pull_request = re.match("Merge pull request #(\d+)", subject).groups()[0]
+            pull_request = re.match(r"Merge pull request #(\d+)", subject).groups()[0]
             pull_request = " #{}".format(pull_request)
-        except Exception as ex:
+        except Exception:
             pull_request = ""
 
-        author = subprocess.check_output(['git', 'log', '-1', '--pretty=format:"%an"', parents.split(' ')[-1]])[1:-1]
+        author = subprocess.check_output(["git", "log", "-1", '--pretty=format:"%an"', parents.split(" ")[-1]])[1:-1]
 
         changes.append("{}{}: {} ({})".format(sha, pull_request, body.strip(), author))
 
     return changes
 
 
-if __name__ == '__main__':
+if __name__ == "__main__":
     previous_sha = sys.argv[1]
     changes = get_change_log(previous_sha)
 

bin/release_manager.py

@@ -1,17 +1,20 @@
 #!/usr/bin/env python3
 import os
-import sys
 import re
 import subprocess
+import sys
+from urllib.parse import urlparse
+
 import requests
 import simplejson
 
-github_token = os.environ['GITHUB_TOKEN']
-auth = (github_token, 'x-oauth-basic')
-repo = 'getredash/redash'
+github_token = os.environ["GITHUB_TOKEN"]
+auth = (github_token, "x-oauth-basic")
+repo = "getredash/redash"
+
 
 def _github_request(method, path, params=None, headers={}):
-    if not path.startswith('https://api.github.com'):
+    if urlparse(path).hostname != "api.github.com":
         url = "https://api.github.com/{}".format(path)
     else:
         url = path
@@ -22,15 +25,18 @@ def _github_request(method, path, params=None, headers={}):
     response = requests.request(method, url, data=params, auth=auth)
     return response
 
+
 def exception_from_error(message, response):
-    return Exception("({}) {}: {}".format(response.status_code, message, response.json().get('message', '?')))
+    return Exception("({}) {}: {}".format(response.status_code, message, response.json().get("message", "?")))
+
 
 def rc_tag_name(version):
     return "v{}-rc".format(version)
 
+
 def get_rc_release(version):
     tag = rc_tag_name(version)
-    response = _github_request('get', 'repos/{}/releases/tags/{}'.format(repo, tag))
+    response = _github_request("get", "repos/{}/releases/tags/{}".format(repo, tag))
 
     if response.status_code == 404:
         return None
@@ -39,84 +45,101 @@ def get_rc_release(version):
 
     raise exception_from_error("Unknown error while looking RC release: ", response)
 
+
 def create_release(version, commit_sha):
     tag = rc_tag_name(version)
 
     params = {
-        'tag_name': tag,
-        'name': "{} - RC".format(version),
-        'target_commitish': commit_sha,
-        'prerelease': True
+        "tag_name": tag,
+        "name": "{} - RC".format(version),
+        "target_commitish": commit_sha,
+        "prerelease": True,
     }
 
-    response = _github_request('post', 'repos/{}/releases'.format(repo), params)
+    response = _github_request("post", "repos/{}/releases".format(repo), params)
 
     if response.status_code != 201:
         raise exception_from_error("Failed creating new release", response)
 
     return response.json()
 
+
 def upload_asset(release, filepath):
-    upload_url = release['upload_url'].replace('{?name,label}', '')
-    filename = filepath.split('/')[-1]
+    upload_url = release["upload_url"].replace("{?name,label}", "")
+    filename = filepath.split("/")[-1]
 
     with open(filepath) as file_content:
-        headers = {'Content-Type': 'application/gzip'}
-        response = requests.post(upload_url, file_content, params={'name': filename}, headers=headers, auth=auth, verify=False)
+        headers = {"Content-Type": "application/gzip"}
+        response = requests.post(
+            upload_url, file_content, params={"name": filename}, headers=headers, auth=auth, verify=False
+        )
 
     if response.status_code != 201:  # not 200/201/...
-        raise exception_from_error('Failed uploading asset', response)
+        raise exception_from_error("Failed uploading asset", response)
 
     return response
 
+
 def remove_previous_builds(release):
-    for asset in release['assets']:
-        response = _github_request('delete', asset['url'])
+    for asset in release["assets"]:
+        response = _github_request("delete", asset["url"])
         if response.status_code != 204:
             raise exception_from_error("Failed deleting asset", response)
 
+
 def get_changelog(commit_sha):
-    latest_release = _github_request('get', 'repos/{}/releases/latest'.format(repo))
+    latest_release = _github_request("get", "repos/{}/releases/latest".format(repo))
     if latest_release.status_code != 200:
-        raise exception_from_error('Failed getting latest release', latest_release)
+        raise exception_from_error("Failed getting latest release", latest_release)
 
     latest_release = latest_release.json()
-    previous_sha = latest_release['target_commitish']
+    previous_sha = latest_release["target_commitish"]
 
-    args = ['git', '--no-pager', 'log', '--merges', '--grep', 'Merge pull request', '--pretty=format:"%h|%s|%b|%p"', '{}...{}'.format(previous_sha, commit_sha)]
+    args = [
+        "git",
+        "--no-pager",
+        "log",
+        "--merges",
+        "--grep",
+        "Merge pull request",
+        '--pretty=format:"%h|%s|%b|%p"',
+        "{}...{}".format(previous_sha, commit_sha),
+    ]
     log = subprocess.check_output(args)
-    changes = ["Changes since {}:".format(latest_release['name'])]
+    changes = ["Changes since {}:".format(latest_release["name"])]
 
-    for line in log.split('\n'):
+    for line in log.split("\n"):
         try:
-            sha, subject, body, parents = line[1:-1].split('|')
+            sha, subject, body, parents = line[1:-1].split("|")
         except ValueError:
             continue
 
         try:
-            pull_request = re.match("Merge pull request #(\d+)", subject).groups()[0]
+            pull_request = re.match(r"Merge pull request #(\d+)", subject).groups()[0]
             pull_request = " #{}".format(pull_request)
-        except Exception as ex:
+        except Exception:
             pull_request = ""
 
-        author = subprocess.check_output(['git', 'log', '-1', '--pretty=format:"%an"', parents.split(' ')[-1]])[1:-1]
+        author = subprocess.check_output(["git", "log", "-1", '--pretty=format:"%an"', parents.split(" ")[-1]])[1:-1]
 
         changes.append("{}{}: {} ({})".format(sha, pull_request, body.strip(), author))
 
     return "\n".join(changes)
 
+
 def update_release_commit_sha(release, commit_sha):
     params = {
-        'target_commitish': commit_sha,
+        "target_commitish": commit_sha,
     }
 
-    response = _github_request('patch', 'repos/{}/releases/{}'.format(repo, release['id']), params)
+    response = _github_request("patch", "repos/{}/releases/{}".format(repo, release["id"]), params)
 
     if response.status_code != 200:
         raise exception_from_error("Failed updating commit sha for existing release", response)
 
     return response.json()
 
+
 def update_release(version, build_filepath, commit_sha):
     try:
         release = get_rc_release(version)
@@ -125,21 +148,22 @@ def update_release(version, build_filepath, commit_sha):
         else:
             release = create_release(version, commit_sha)
 
-        print("Using release id: {}".format(release['id']))
+        print("Using release id: {}".format(release["id"]))
 
         remove_previous_builds(release)
         response = upload_asset(release, build_filepath)
 
         changelog = get_changelog(commit_sha)
 
-        response = _github_request('patch', release['url'], {'body': changelog})
+        response = _github_request("patch", release["url"], {"body": changelog})
         if response.status_code != 200:
             raise exception_from_error("Failed updating release description", response)
 
     except Exception as ex:
         print(ex)
 
-if __name__ == '__main__':
+
+if __name__ == "__main__":
     commit_sha = sys.argv[1]
     version = sys.argv[2]
     filepath = sys.argv[3]

bin/upgrade

@@ -1,9 +1,9 @@
 #!/usr/bin/env python3
-import urllib
 import argparse
 import os
 import subprocess
 import sys
+import urllib
 from collections import namedtuple
 from fnmatch import fnmatch
 
@@ -15,8 +15,8 @@ except ImportError:
     print("Missing required library: semver.")
     exit(1)
 
-REDASH_HOME = os.environ.get('REDASH_HOME', '/opt/redash')
-CURRENT_VERSION_PATH = '{}/current'.format(REDASH_HOME)
+REDASH_HOME = os.environ.get("REDASH_HOME", "/opt/redash")
+CURRENT_VERSION_PATH = "{}/current".format(REDASH_HOME)
 
 
 def run(cmd, cwd=None):
@@ -27,11 +27,11 @@ def run(cmd, cwd=None):
 
 
 def confirm(question):
-    reply = str(input(question + ' (y/n): ')).lower().strip()
+    reply = str(input(question + " (y/n): ")).lower().strip()
 
-    if reply[0] == 'y':
+    if reply[0] == "y":
         return True
-    if reply[0] == 'n':
+    if reply[0] == "n":
         return False
     else:
         return confirm("Please use 'y' or 'n'")
@@ -40,7 +40,8 @@ def confirm(question):
 def version_path(version_name):
     return "{}/{}".format(REDASH_HOME, version_name)
 
-END_CODE = '\033[0m'
+
+END_CODE = "\033[0m"
 
 
 def colored_string(text, color):
@@ -51,60 +52,62 @@ def colored_string(text, color):
 
 
 def h1(text):
-    print(colored_string(text, '\033[4m\033[1m'))
+    print(colored_string(text, "\033[4m\033[1m"))
 
 
 def green(text):
-    print(colored_string(text, '\033[92m'))
+    print(colored_string(text, "\033[92m"))
 
 
 def red(text):
-    print(colored_string(text, '\033[91m'))
+    print(colored_string(text, "\033[91m"))
 
 
-class Release(namedtuple('Release', ('version', 'download_url', 'filename', 'description'))):
+class Release(namedtuple("Release", ("version", "download_url", "filename", "description"))):
     def v1_or_newer(self):
-        return semver.compare(self.version, '1.0.0-alpha') >= 0
+        return semver.compare(self.version, "1.0.0-alpha") >= 0
 
     def is_newer(self, version):
         return semver.compare(self.version, version) > 0
 
     @property
     def version_name(self):
-        return self.filename.replace('.tar.gz', '')
+        return self.filename.replace(".tar.gz", "")
 
 
 def get_latest_release_from_ci():
-    response = requests.get('https://circleci.com/api/v1.1/project/github/getredash/redash/latest/artifacts?branch=master')
+    response = requests.get(
+        "https://circleci.com/api/v1.1/project/github/getredash/redash/latest/artifacts?branch=master"
+    )
 
     if response.status_code != 200:
         exit("Failed getting releases (status code: %s)." % response.status_code)
 
-    tarball_asset = filter(lambda asset: asset['url'].endswith('.tar.gz'), response.json())[0]
-    filename = urllib.unquote(tarball_asset['pretty_path'].split('/')[-1])
-    version = filename.replace('redash.', '').replace('.tar.gz', '')
+    tarball_asset = filter(lambda asset: asset["url"].endswith(".tar.gz"), response.json())[0]
+    filename = urllib.unquote(tarball_asset["pretty_path"].split("/")[-1])
+    version = filename.replace("redash.", "").replace(".tar.gz", "")
 
-    release = Release(version, tarball_asset['url'], filename, '')
+    release = Release(version, tarball_asset["url"], filename, "")
 
     return release
 
 
 def get_release(channel):
-    if channel == 'ci':
+    if channel == "ci":
         return get_latest_release_from_ci()
 
-    response = requests.get('https://version.redash.io/api/releases?channel={}'.format(channel))
+    response = requests.get("https://version.redash.io/api/releases?channel={}".format(channel))
     release = response.json()[0]
 
-    filename = release['download_url'].split('/')[-1]
-    release = Release(release['version'], release['download_url'], filename, release['description'])
+    filename = release["download_url"].split("/")[-1]
+    release = Release(release["version"], release["download_url"], filename, release["description"])
 
     return release
 
 
 def link_to_current(version_name):
     green("Linking to current version...")
-    run('ln -nfs {} {}'.format(version_path(version_name), CURRENT_VERSION_PATH))
+    run("ln -nfs {} {}".format(version_path(version_name), CURRENT_VERSION_PATH))
 
 
 def restart_services():
@@ -113,25 +116,25 @@ def restart_services():
     # directory.
     green("Restarting...")
     try:
-        run('sudo /etc/init.d/redash_supervisord restart')
+        run("sudo /etc/init.d/redash_supervisord restart")
     except subprocess.CalledProcessError as e:
-        run('sudo service supervisor restart')
+        run("sudo service supervisor restart")
 
 
 def update_requirements(version_name):
     green("Installing new Python packages (if needed)...")
-    new_requirements_file = '{}/requirements.txt'.format(version_path(version_name))
+    new_requirements_file = "{}/requirements.txt".format(version_path(version_name))
 
     install_requirements = False
 
     try:
-        run('diff {}/requirements.txt {}'.format(CURRENT_VERSION_PATH, new_requirements_file)) != 0
+        run("diff {}/requirements.txt {}".format(CURRENT_VERSION_PATH, new_requirements_file)) != 0
     except subprocess.CalledProcessError as e:
         if e.returncode != 0:
             install_requirements = True
 
     if install_requirements:
-        run('sudo pip install -r {}'.format(new_requirements_file))
+        run("sudo pip install -r {}".format(new_requirements_file))
 
 
 def apply_migrations(release):
@@ -143,8 +146,12 @@ def apply_migrations(release):
 
 
 def find_migrations(version_name):
-    current_migrations = set([f for f in os.listdir("{}/migrations".format(CURRENT_VERSION_PATH)) if fnmatch(f, '*_*.py')])
-    new_migrations = sorted([f for f in os.listdir("{}/migrations".format(version_path(version_name))) if fnmatch(f, '*_*.py')])
+    current_migrations = set(
+        [f for f in os.listdir("{}/migrations".format(CURRENT_VERSION_PATH)) if fnmatch(f, "*_*.py")]
+    )
+    new_migrations = sorted(
+        [f for f in os.listdir("{}/migrations".format(version_path(version_name))) if fnmatch(f, "*_*.py")]
+    )
 
     return [m for m in new_migrations if m not in current_migrations]
 
@@ -154,40 +161,45 @@ def apply_migrations_pre_v1(version_name):
 
     if new_migrations:
         green("New migrations to run: ")
-        print(', '.join(new_migrations))
+        print(", ".join(new_migrations))
     else:
         print("No new migrations in this version.")
 
     if new_migrations and confirm("Apply new migrations? (make sure you have backup)"):
         for migration in new_migrations:
             print("Applying {}...".format(migration))
-            run("sudo sudo -u redash PYTHONPATH=. bin/run python migrations/{}".format(migration), cwd=version_path(version_name))
+            run(
+                "sudo sudo -u redash PYTHONPATH=. bin/run python migrations/{}".format(migration),
+                cwd=version_path(version_name),
+            )
 
 
 def download_and_unpack(release):
     directory_name = release.version_name
 
     green("Downloading release tarball...")
-    run('sudo wget --header="Accept: application/octet-stream" -O {} {}'.format(release.filename, release.download_url))
+    run(
+        'sudo wget --header="Accept: application/octet-stream" -O {} {}'.format(release.filename, release.download_url)
+    )
     green("Unpacking to: {}...".format(directory_name))
-    run('sudo mkdir -p {}'.format(directory_name))
-    run('sudo tar -C {} -xvf {}'.format(directory_name, release.filename))
+    run("sudo mkdir -p {}".format(directory_name))
+    run("sudo tar -C {} -xvf {}".format(directory_name, release.filename))
 
     green("Changing ownership to redash...")
-    run('sudo chown redash {}'.format(directory_name))
+    run("sudo chown redash {}".format(directory_name))
 
     green("Linking .env file...")
-    run('sudo ln -nfs {}/.env {}/.env'.format(REDASH_HOME, version_path(directory_name)))
+    run("sudo ln -nfs {}/.env {}/.env".format(REDASH_HOME, version_path(directory_name)))
 
 
 def current_version():
-    real_current_path = os.path.realpath(CURRENT_VERSION_PATH).replace('.b', '+b')
-    return real_current_path.replace(REDASH_HOME + '/', '').replace('redash.', '')
+    real_current_path = os.path.realpath(CURRENT_VERSION_PATH).replace(".b", "+b")
+    return real_current_path.replace(REDASH_HOME + "/", "").replace("redash.", "")
 
 
 def verify_minimum_version():
     green("Current version: " + current_version())
-    if semver.compare(current_version(), '0.12.0') < 0:
+    if semver.compare(current_version(), "0.12.0") < 0:
         red("You need to have Redash v0.12.0 or newer to upgrade to post v1.0.0 releases.")
         green("To upgrade to v0.12.0, run the upgrade script set to the legacy channel (--channel legacy).")
         exit(1)
@@ -234,9 +246,9 @@ def deploy_release(channel):
         red("Exit status: {}\nOutput:\n{}".format(e.returncode, e.output))
 
 
-if __name__ == '__main__':
+if __name__ == "__main__":
     parser = argparse.ArgumentParser()
-    parser.add_argument("--channel", help="The channel to get release from (default: stable).", default='stable')
+    parser.add_argument("--channel", help="The channel to get release from (default: stable).", default="stable")
     args = parser.parse_args()
 
     deploy_release(args.channel)

client/.eslintrc.js

@@ -5,10 +5,11 @@ module.exports = {
     "react-app",
     "plugin:compat/recommended",
     "prettier",
+    "plugin:jsx-a11y/recommended",
     // Remove any typescript-eslint rules that would conflict with prettier
     "prettier/@typescript-eslint",
   ],
-  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint"],
+  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint", "jsx-a11y"],
   settings: {
     "import/resolver": "webpack",
   },
@@ -19,7 +20,19 @@ module.exports = {
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
-    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/anchor-is-valid": [
+      // TMP
+      "off",
+      {
+        components: ["Link"],
+        aspects: ["noHref", "invalidHref", "preferButton"],
+      },
+    ],
+    "jsx-a11y/no-redundant-roles": "error",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/click-events-have-key-events": "off", // TMP
+    "jsx-a11y/no-static-element-interactions": "off", // TMP
+    "jsx-a11y/no-noninteractive-element-interactions": "off", // TMP
     "no-console": ["warn", { allow: ["warn", "error"] }],
     "no-restricted-imports": [
       "error",
@@ -51,7 +64,7 @@ module.exports = {
         "no-useless-constructor": "off",
         "@typescript-eslint/no-useless-constructor": "error",
         // Many API fields and generated types use camelcase
-        "@typescript-eslint/camelcase": "off","@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/camelcase": "off",
       },
     },
   ],

client/app/assets/less/ant.less

@@ -225,6 +225,16 @@
     }
   }
 
+  &-tbody > tr&-row {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      & > td {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+
   // Custom styles
 
   &-headerless &-tbody > tr:first-child > td {
@@ -391,6 +401,18 @@
         left: 0;
       }
     }
+
+    &:focus,
+    &:focus-within {
+      color: @menu-highlight-color;
+    }
+  }
+}
+
+.@{dropdown-prefix-cls}-menu-item {
+  &:focus,
+  &:focus-within {
+    background-color: @item-hover-bg;
   }
 }
 

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

@@ -98,6 +98,10 @@ strong {
 
 .clickable {
   cursor: pointer;
+
+  button&:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .resize-vertical {

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

@@ -1,26 +1,23 @@
-.edit-in-place span {
+.edit-in-place {
   white-space: pre-line;
+  display: inline-block;
 
   p {
     margin-bottom: 0;
   }
-}
 
-.edit-in-place span.editable {
-  display: inline-block;
-  cursor: pointer;
-}
+  .editable {
+    display: inline-block;
+    cursor: pointer;
 
-.edit-in-place span.editable:hover {
-  background: @redash-yellow;
-  border-radius: @redash-radius;
-}
+    &:hover {
+      background: @redash-yellow;
+      border-radius: @redash-radius;
+    }
+  }
 
-.edit-in-place.active input,
-.edit-in-place.active textarea {
-  display: inline-block;
-}
-
-.edit-in-place {
-  display: inline-block;
+  &.active input,
+  &.active textarea {
+    display: inline-block;
+  }
 }

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

@@ -2,163 +2,218 @@
     Generate Margin Classes (0px - 25px)
     margin, margin-top, margin-bottom, margin-left, margin-right
 -----------------------------------------------------------*/
-.margin (@label, @size: 1, @key:1) when (@size =< 30){
-    .m-@{key} {
-        margin: @size !important;
-    }
-    
-    .m-t-@{key} {
-        margin-top: @size !important;
-    }
-    
-    .m-b-@{key} {
-        margin-bottom: @size !important;
-    }
-    
-    .m-l-@{key} {
-        margin-left: @size !important;
-    }
-    
-    .m-r-@{key} {
-        margin-right: @size !important;
-    }
-    
-    .margin(@label - 5; @size + 5; @key + 5);
+.margin (@label, @size: 1, @key:1) when (@size =< 30) {
+  .m-@{key} {
+    margin: @size !important;
+  }
+
+  .m-t-@{key} {
+    margin-top: @size !important;
+  }
+
+  .m-b-@{key} {
+    margin-bottom: @size !important;
+  }
+
+  .m-l-@{key} {
+    margin-left: @size !important;
+  }
+
+  .m-r-@{key} {
+    margin-right: @size !important;
+  }
+
+  .margin(@label - 5; @size + 5; @key + 5);
 }
 
 .margin(25, 0px, 0);
 
-.m-2{
-  margin:2px;
+.m-2 {
+  margin: 2px;
 }
 
 /* --------------------------------------------------------
     Generate Padding Classes (0px - 25px)
     padding, padding-top, padding-bottom, padding-left, padding-right
 -----------------------------------------------------------*/
-.padding (@label, @size: 1, @key:1) when (@size =< 30){
-    .p-@{key} {
-        padding: @size !important;
-    }
-    
-    .p-t-@{key} {
-        padding-top: @size !important;
-    }
-    
-    .p-b-@{key} {
-        padding-bottom: @size !important;
-    }
-    
-    .p-l-@{key} {
-        padding-left: @size !important;
-    }
-    
-    .p-r-@{key} {
-        padding-right: @size !important; 
-    }
-    
-    .padding(@label - 5; @size + 5; @key + 5);
-} 
+.padding (@label, @size: 1, @key:1) when (@size =< 30) {
+  .p-@{key} {
+    padding: @size !important;
+  }
+
+  .p-t-@{key} {
+    padding-top: @size !important;
+  }
+
+  .p-b-@{key} {
+    padding-bottom: @size !important;
+  }
+
+  .p-l-@{key} {
+    padding-left: @size !important;
+  }
+
+  .p-r-@{key} {
+    padding-right: @size !important;
+  }
+
+  .padding(@label - 5; @size + 5; @key + 5);
+}
 
 .padding(25, 0px, 0);
 
-
 /* --------------------------------------------------------
     Generate Font-Size Classes (8px - 20px)
 -----------------------------------------------------------*/
-.font-size (@label, @size: 8, @key:10) when (@size =< 20){
-    .f-@{key} {
-        font-size: @size !important;
-    }
-    
-    .font-size(@label - 1; @size + 1; @key + 1);
-} 
+.font-size (@label, @size: 8, @key:10) when (@size =< 20) {
+  .f-@{key} {
+    font-size: @size !important;
+  }
+
+  .font-size(@label - 1; @size + 1; @key + 1);
+}
 
 .font-size(20, 8px, 8);
 
-.f-inherit { font-size: inherit !important; }
-
+.f-inherit {
+  font-size: inherit !important;
+}
 
 /* --------------------------------------------------------
     Font Weight
 -----------------------------------------------------------*/
-.f-300 { font-weight: 300 !important; }
-.f-400 { font-weight: 400 !important; }
-.f-500 { font-weight: 500 !important; }
-.f-700 { font-weight: 700 !important; }
-
+.f-300 {
+  font-weight: 300 !important;
+}
+.f-400 {
+  font-weight: 400 !important;
+}
+.f-500 {
+  font-weight: 500 !important;
+}
+.f-700 {
+  font-weight: 700 !important;
+}
 
 /* --------------------------------------------------------
     Position
 -----------------------------------------------------------*/
-.p-relative { position: relative !important; }
-.p-absolute { position: absolute !important; }
-.p-fixed { position: fixed !important; }
-.p-static { position: static !important; }
-
+.p-relative {
+  position: relative !important;
+}
+.p-absolute {
+  position: absolute !important;
+}
+.p-fixed {
+  position: fixed !important;
+}
+.p-static {
+  position: static !important;
+}
 
 /* --------------------------------------------------------
     Overflow
 -----------------------------------------------------------*/
-.o-hidden { overflow: hidden !important; }
-.o-visible { overflow: visible !important; }
-.o-auto { overflow: auto !important; }
-
+.o-hidden {
+  overflow: hidden !important;
+}
+.o-visible {
+  overflow: visible !important;
+}
+.o-auto {
+  overflow: auto !important;
+}
 
 /* --------------------------------------------------------
     Display
 -----------------------------------------------------------*/
-.di-block { display: inline-block !important; } 
-.d-block { display: block; }
+.di-block {
+  display: inline-block !important;
+}
+.d-block {
+  display: block;
+}
 
 /* --------------------------------------------------------
     Background Colors and Colors
 -----------------------------------------------------------*/
-@array: c-white bg-white @white, c-ace bg-ace @ace, c-black bg-black @black, c-brown bg-brown @brown, c-pink bg-pink @pink, c-red bg-red @red, c-blue bg-blue @blue, c-purple bg-purple @purple, c-deeppurple bg-deeppurple @deeppurple, c-lightblue bg-lightblue @lightblue, c-cyan bg-cyan @cyan, c-teal bg-teal @teal, c-green bg-green @green, c-lightgreen bg-lightgreen @lightgreen, c-lime bg-lime @lime, c-yellow bg-yellow @yellow, c-amber bg-amber @amber, c-orange bg-orange @orange, c-deeporange bg-deeporange @deeporange, c-gray bg-gray @gray, c-bluegray bg-bluegray @bluegray, c-indigo bg-indigo @indigo;
+@array: c-white bg-white @white, c-ace bg-ace @ace, c-black bg-black @black, c-brown bg-brown @brown,
+  c-pink bg-pink @pink, c-red bg-red @red, c-blue bg-blue @blue, c-purple bg-purple @purple,
+  c-deeppurple bg-deeppurple @deeppurple, c-lightblue bg-lightblue @lightblue, c-cyan bg-cyan @cyan,
+  c-teal bg-teal @teal, c-green bg-green @green, c-lightgreen bg-lightgreen @lightgreen, c-lime bg-lime @lime,
+  c-yellow bg-yellow @yellow, c-amber bg-amber @amber, c-orange bg-orange @orange,
+  c-deeporange bg-deeporange @deeporange, c-gray bg-gray @gray, c-bluegray bg-bluegray @bluegray,
+  c-indigo bg-indigo @indigo;
 
-.for(@array); .-each(@value) {
-    @name:  extract(@value, 1);
-    @name2:  extract(@value, 2);
-    @color: extract(@value, 3); 
-    &.@{name2} {
-        background-color: @color !important;
-    }
-    
-    &.@{name} {
-        color: @color !important;
-    }
+.for(@array);
+.-each(@value) {
+  @name: extract(@value, 1);
+  @name2: extract(@value, 2);
+  @color: extract(@value, 3);
+  &.@{name2} {
+    background-color: @color !important;
+  }
+
+  &.@{name} {
+    color: @color !important;
+  }
 }
 
-
 /* --------------------------------------------------------
     Background Colors
 -----------------------------------------------------------*/
-.bg-brand { background-color: @brand-bg; }
-.bg-black-trp { background-color: rgba(0,0,0,0.12) !important; }
-
-
+.bg-brand {
+  background-color: @brand-bg;
+}
+.bg-black-trp {
+  background-color: rgba(0, 0, 0, 0.12) !important;
+}
 
 /* --------------------------------------------------------
     Borders
 -----------------------------------------------------------*/
-.b-0 { border: 0 !important; }
-
+.b-0 {
+  border: 0 !important;
+}
 
 /* --------------------------------------------------------
     Width
 -----------------------------------------------------------*/
-.w-100 { width: 100% !important; }
-.w-50 { width: 50% !important; }
-.w-25 { width: 25% !important; }
-
+.w-100 {
+  width: 100% !important;
+}
+.w-50 {
+  width: 50% !important;
+}
+.w-25 {
+  width: 25% !important;
+}
 
 /* --------------------------------------------------------
     Border Radius
 -----------------------------------------------------------*/
-.brd-2 { border-radius: 2px; }
-
+.brd-2 {
+  border-radius: 2px;
+}
 
 /* --------------------------------------------------------
     Alignment
 -----------------------------------------------------------*/
-.va-top { vertical-align: top; }
+.va-top {
+  vertical-align: top;
+}
+
+/* --------------------------------------------------------
+    Screen readers
+-----------------------------------------------------------*/
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

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

@@ -1,102 +1,107 @@
-div.table-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  padding: 2px 22px 2px 10px;
-  border-radius: @redash-radius;
-  position: relative;
-  height: 22px;
-
-  .copy-to-editor {
-    display: none;
-  }
-
-  &:hover {
-    background: fade(@redash-gray, 10%);
-
-    .copy-to-editor {
-      display: flex;
-    }
-  }
-}
-
 .schema-container {
   height: 100%;
   z-index: 10;
   background-color: white;
-}
 
-.schema-browser {
-  overflow: hidden;
-  border: none;
-  padding-top: 10px;
-  position: relative;
-  height: 100%;
-
-  .schema-loading-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-
-  .collapse.in {
-    background: transparent;
-  }
-
-  .copy-to-editor {
-    color: fade(@redash-gray, 90%);
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .table-open {
-    padding: 0 22px 0 26px;
+  .schema-browser {
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    border: none;
+    padding-top: 10px;
     position: relative;
-    height: 18px;
+    height: 100%;
 
-    .column-type {
-      color: fade(@text-color, 80%);
-      font-size: 10px;
-      margin-left: 2px;
-      text-transform: uppercase;
+    .schema-loading-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    .collapse.in {
+      background: transparent;
     }
 
     .copy-to-editor {
-      display: none;
+      visibility: hidden;
+      color: fade(@redash-gray, 90%);
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: none;
     }
 
-    &:hover {
-      background: fade(@redash-gray, 10%);
+    .schema-list-item {
+      display: flex;
+      border-radius: @redash-radius;
+      height: 22px;
 
-      .copy-to-editor {
+      .table-name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+        padding: 2px 22px 2px 10px;
+      }
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background: fade(@redash-gray, 10%);
+
+        .copy-to-editor {
+          visibility: visible;
+        }
+      }
+    }
+
+    .table-open {
+      .table-open-item {
         display: flex;
+        height: 18px;
+        width: calc(100% - 22px);
+        padding-left: 22px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        transition: none;
+
+        div:first-child {
+          flex: 1;
+        }
+
+        .column-type {
+          color: fade(@text-color, 80%);
+          font-size: 10px;
+          margin-left: 2px;
+          text-transform: uppercase;
+        }
+
+        &:hover,
+        &:focus,
+        &:focus-within {
+          background: fade(@redash-gray, 10%);
+
+          .copy-to-editor {
+            visibility: visible;
+          }
+        }
       }
     }
   }
-}
 
-.schema-control {
-  display: flex;
-  flex-wrap: nowrap;
-  padding: 0;
+  .schema-control {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 0;
 
-  .ant-btn {
-    height: auto;
+    .ant-btn {
+      height: auto;
+    }
+  }
+
+  .parameter-label {
+    display: block;
   }
 }
-
-.parameter-label {
-  display: block;
-}

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

@@ -103,7 +103,7 @@
     padding-top: 5px !important;
   }
 
-  .btn-favourite,
+  .btn-favorite,
   .btn-archive {
     font-size: 15px;
   }
@@ -114,18 +114,23 @@
   line-height: 1.7 !important;
 }
 
-.btn-favourite {
+.btn-favorite {
   color: #d4d4d4;
   transition: all 0.25s ease-in-out;
 
+  .fa-star {
+    color: @yellow-darker;
+  }
+
   &:hover,
   &:focus {
     color: @yellow-darker;
     cursor: pointer;
-  }
 
-  .fa-star {
-    color: @yellow-darker;
+    .fa-star {
+      filter: saturate(75%);
+      opacity: 0.75;
+    }
   }
 }
 

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

@@ -90,6 +90,23 @@ body.fixed-layout {
 .embed__vis {
   display: flex;
   flex-flow: column;
+  height: calc(~'100vh - 25px');
+
+  > .embed-heading {
+    flex: 0 0 auto;
+  }
+
+  > .query__vis {
+    flex: 1 1 auto;
+
+    .chart-visualization-container, .visualization-renderer-wrapper, .visualization-renderer {
+      height: 100%
+    }
+  }
+
+  > .tile__bottom-control {
+    flex: 0 0 auto;
+  }
   width: 100%;
 }
 
@@ -127,11 +144,13 @@ body.fixed-layout {
   }
 }
 
-a.label-tag {
+.label-tag {
   background: fade(@redash-gray, 15%);
   color: darken(@redash-gray, 15%);
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
     color: darken(@redash-gray, 15%);
     background: fade(@redash-gray, 25%);
   }

client/app/components/AceEditorInput.jsx

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

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

@@ -0,0 +1,198 @@
+import React, { useMemo } from "react";
+import { first, includes } from "lodash";
+import Menu from "antd/lib/menu";
+import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
+import HelpTrigger from "@/components/HelpTrigger";
+import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
+import { useCurrentRoute } from "@/components/ApplicationArea/Router";
+import { Auth, currentUser } from "@/services/auth";
+import settingsMenu from "@/services/settingsMenu";
+import logoUrl from "@/assets/images/redash_icon_small.png";
+
+import DesktopOutlinedIcon from "@ant-design/icons/DesktopOutlined";
+import CodeOutlinedIcon from "@ant-design/icons/CodeOutlined";
+import AlertOutlinedIcon from "@ant-design/icons/AlertOutlined";
+import PlusOutlinedIcon from "@ant-design/icons/PlusOutlined";
+import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
+import SettingOutlinedIcon from "@ant-design/icons/SettingOutlined";
+import VersionInfo from "./VersionInfo";
+
+import "./DesktopNavbar.less";
+
+function NavbarSection({ children, ...props }) {
+  return (
+    <Menu selectable={false} mode="vertical" theme="dark" {...props}>
+      {children}
+    </Menu>
+  );
+}
+
+function useNavbarActiveState() {
+  const currentRoute = useCurrentRoute();
+
+  return useMemo(
+    () => ({
+      dashboards: includes(
+        [
+          "Dashboards.List",
+          "Dashboards.Favorites",
+          "Dashboards.My",
+          "Dashboards.ViewOrEdit",
+          "Dashboards.LegacyViewOrEdit",
+        ],
+        currentRoute.id
+      ),
+      queries: includes(
+        [
+          "Queries.List",
+          "Queries.Favorites",
+          "Queries.Archived",
+          "Queries.My",
+          "Queries.View",
+          "Queries.New",
+          "Queries.Edit",
+        ],
+        currentRoute.id
+      ),
+      dataSources: includes(["DataSources.List"], currentRoute.id),
+      alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View", "Alerts.Edit"], currentRoute.id),
+    }),
+    [currentRoute.id]
+  );
+}
+
+export default function DesktopNavbar() {
+  const firstSettingsTab = first(settingsMenu.getAvailableItems());
+
+  const activeState = useNavbarActiveState();
+
+  const canCreateQuery = currentUser.hasPermission("create_query");
+  const canCreateDashboard = currentUser.hasPermission("create_dashboard");
+  const canCreateAlert = currentUser.hasPermission("list_alerts");
+
+  return (
+    <nav className="desktop-navbar">
+      <NavbarSection className="desktop-navbar-logo">
+        <div role="menuitem">
+          <Link href="./">
+            <img src={logoUrl} alt="Redash" />
+          </Link>
+        </div>
+      </NavbarSection>
+
+      <NavbarSection>
+        {currentUser.hasPermission("list_dashboards") && (
+          <Menu.Item key="dashboards" className={activeState.dashboards ? "navbar-active-item" : null}>
+            <Link href="dashboards">
+              <DesktopOutlinedIcon aria-label="Dashboard navigation button" />
+              <span className="desktop-navbar-label">Dashboards</span>
+            </Link>
+          </Menu.Item>
+        )}
+        {currentUser.hasPermission("view_query") && (
+          <Menu.Item key="queries" className={activeState.queries ? "navbar-active-item" : null}>
+            <Link href="queries">
+              <CodeOutlinedIcon aria-label="Queries navigation button" />
+              <span className="desktop-navbar-label">Queries</span>
+            </Link>
+          </Menu.Item>
+        )}
+        {currentUser.hasPermission("list_alerts") && (
+          <Menu.Item key="alerts" className={activeState.alerts ? "navbar-active-item" : null}>
+            <Link href="alerts">
+              <AlertOutlinedIcon aria-label="Alerts navigation button" />
+              <span className="desktop-navbar-label">Alerts</span>
+            </Link>
+          </Menu.Item>
+        )}
+      </NavbarSection>
+
+      <NavbarSection className="desktop-navbar-spacer">
+        {(canCreateQuery || canCreateDashboard || canCreateAlert) && (
+          <Menu.SubMenu
+            key="create"
+            popupClassName="desktop-navbar-submenu"
+            data-test="CreateButton"
+            tabIndex={0}
+            title={
+              <React.Fragment>
+                <PlusOutlinedIcon />
+                <span className="desktop-navbar-label">Create</span>
+              </React.Fragment>
+            }>
+            {canCreateQuery && (
+              <Menu.Item key="new-query">
+                <Link href="queries/new" data-test="CreateQueryMenuItem">
+                  New Query
+                </Link>
+              </Menu.Item>
+            )}
+            {canCreateDashboard && (
+              <Menu.Item key="new-dashboard">
+                <PlainButton data-test="CreateDashboardMenuItem" onClick={() => CreateDashboardDialog.showModal()}>
+                  New Dashboard
+                </PlainButton>
+              </Menu.Item>
+            )}
+            {canCreateAlert && (
+              <Menu.Item key="new-alert">
+                <Link data-test="CreateAlertMenuItem" href="alerts/new">
+                  New Alert
+                </Link>
+              </Menu.Item>
+            )}
+          </Menu.SubMenu>
+        )}
+      </NavbarSection>
+
+      <NavbarSection>
+        <Menu.Item key="help">
+          <HelpTrigger showTooltip={false} type="HOME" tabIndex={0}>
+            <QuestionCircleOutlinedIcon />
+            <span className="desktop-navbar-label">Help</span>
+          </HelpTrigger>
+        </Menu.Item>
+        {firstSettingsTab && (
+          <Menu.Item key="settings" className={activeState.dataSources ? "navbar-active-item" : null}>
+            <Link href={firstSettingsTab.path} data-test="SettingsLink">
+              <SettingOutlinedIcon />
+              <span className="desktop-navbar-label">Settings</span>
+            </Link>
+          </Menu.Item>
+        )}
+      </NavbarSection>
+
+      <NavbarSection className="desktop-navbar-profile-menu">
+        <Menu.SubMenu
+          key="profile"
+          popupClassName="desktop-navbar-submenu"
+          tabIndex={0}
+          title={
+            <span data-test="ProfileDropdown" className="desktop-navbar-profile-menu-title">
+              <img className="profile__image_thumb" src={currentUser.profile_image_url} alt={currentUser.name} />
+            </span>
+          }>
+          <Menu.Item key="profile">
+            <Link href="users/me">Profile</Link>
+          </Menu.Item>
+          {currentUser.hasPermission("super_admin") && (
+            <Menu.Item key="status">
+              <Link href="admin/status">System Status</Link>
+            </Menu.Item>
+          )}
+          <Menu.Divider />
+          <Menu.Item key="logout">
+            <PlainButton data-test="LogOutButton" onClick={() => Auth.logout()}>
+              Log out
+            </PlainButton>
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item key="version" role="presentation" disabled className="version-info">
+            <VersionInfo />
+          </Menu.Item>
+        </Menu.SubMenu>
+      </NavbarSection>
+    </nav>
+  );
+}

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

@@ -49,7 +49,9 @@
       &.ant-menu-submenu-open,
       &.ant-menu-submenu-active,
       &:hover,
-      &:active {
+      &:active,
+      &:focus,
+      &:focus-within {
         color: #fff;
       }
 
@@ -131,7 +133,9 @@
       color: @textColor;
 
       &:hover,
-      &:active {
+      &:active,
+      &:focus,
+      &:focus-within {
         color: #fff;
       }
 
@@ -156,7 +160,9 @@
           color: rgba(255, 255, 255, 0.8);
 
           &:hover,
-          &:active {
+          &:active,
+          &:focus,
+          &:focus-within {
             color: rgba(255, 255, 255, 1);
           }
         }

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

@@ -1,150 +0,0 @@
-import React, { useMemo } from "react";
-import { first, includes } from "lodash";
-import Menu from "antd/lib/menu";
-import Link from "@/components/Link";
-import HelpTrigger from "@/components/HelpTrigger";
-import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
-import { useCurrentRoute } from "@/components/ApplicationArea/Router";
-import { Auth, currentUser } from "@/services/auth";
-import settingsMenu from "@/services/settingsMenu";
-// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '@/assets/images/redash_icon_sm... Remove this comment to see the full error message
-import logoUrl from "@/assets/images/redash_icon_small.png";
-import DesktopOutlinedIcon from "@ant-design/icons/DesktopOutlined";
-import CodeOutlinedIcon from "@ant-design/icons/CodeOutlined";
-import AlertOutlinedIcon from "@ant-design/icons/AlertOutlined";
-import PlusOutlinedIcon from "@ant-design/icons/PlusOutlined";
-import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
-import SettingOutlinedIcon from "@ant-design/icons/SettingOutlined";
-import VersionInfo from "./VersionInfo";
-import "./DesktopNavbar.less";
-function NavbarSection({ children, ...props }: any) {
-    return (<Menu selectable={false} mode="vertical" theme="dark" {...props}>
-      {children}
-    </Menu>);
-}
-function useNavbarActiveState() {
-    const currentRoute = useCurrentRoute();
-    return useMemo(() => ({
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        dashboards: includes(["Dashboards.List", "Dashboards.Favorites", "Dashboards.ViewOrEdit", "Dashboards.LegacyViewOrEdit"], currentRoute.id),
-        queries: includes([
-            "Queries.List",
-            "Queries.Favorites",
-            "Queries.Archived",
-            "Queries.My",
-            "Queries.View",
-            "Queries.New",
-            "Queries.Edit",
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        ], currentRoute.id),
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        dataSources: includes(["DataSources.List"], currentRoute.id),
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View", "Alerts.Edit"], currentRoute.id),
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    }), [currentRoute.id]);
-}
-export default function DesktopNavbar() {
-    const firstSettingsTab = first(settingsMenu.getAvailableItems());
-    const activeState = useNavbarActiveState();
-    const canCreateQuery = currentUser.hasPermission("create_query");
-    const canCreateDashboard = currentUser.hasPermission("create_dashboard");
-    const canCreateAlert = currentUser.hasPermission("list_alerts");
-    return (<div className="desktop-navbar">
-      <NavbarSection className="desktop-navbar-logo">
-        <div>
-          <Link href="./">
-            <img src={logoUrl} alt="Redash"/>
-          </Link>
-        </div>
-      </NavbarSection>
-
-      <NavbarSection>
-        {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
-        {currentUser.hasPermission("list_dashboards") && (<Menu.Item key="dashboards" className={activeState.dashboards ? "navbar-active-item" : null}>
-            <Link href="dashboards">
-              <DesktopOutlinedIcon />
-              <span className="desktop-navbar-label">Dashboards</span>
-            </Link>
-          </Menu.Item>)}
-        {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
-        {currentUser.hasPermission("view_query") && (<Menu.Item key="queries" className={activeState.queries ? "navbar-active-item" : null}>
-            <Link href="queries">
-              <CodeOutlinedIcon />
-              <span className="desktop-navbar-label">Queries</span>
-            </Link>
-          </Menu.Item>)}
-        {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
-        {currentUser.hasPermission("list_alerts") && (<Menu.Item key="alerts" className={activeState.alerts ? "navbar-active-item" : null}>
-            <Link href="alerts">
-              <AlertOutlinedIcon />
-              <span className="desktop-navbar-label">Alerts</span>
-            </Link>
-          </Menu.Item>)}
-      </NavbarSection>
-
-      <NavbarSection className="desktop-navbar-spacer">
-        {(canCreateQuery || canCreateDashboard || canCreateAlert) && (<Menu.SubMenu key="create" popupClassName="desktop-navbar-submenu" data-test="CreateButton" title={<React.Fragment>
-                <PlusOutlinedIcon />
-                <span className="desktop-navbar-label">Create</span>
-              </React.Fragment>}>
-            {canCreateQuery && (<Menu.Item key="new-query">
-                <Link href="queries/new" data-test="CreateQueryMenuItem">
-                  New Query
-                </Link>
-              </Menu.Item>)}
-            {canCreateDashboard && (<Menu.Item key="new-dashboard">
-                {/* @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0. */}
-                <a data-test="CreateDashboardMenuItem" onMouseUp={() => CreateDashboardDialog.showModal()}>
-                  New Dashboard
-                </a>
-              </Menu.Item>)}
-            {canCreateAlert && (<Menu.Item key="new-alert">
-                <Link data-test="CreateAlertMenuItem" href="alerts/new">
-                  New Alert
-                </Link>
-              </Menu.Item>)}
-          </Menu.SubMenu>)}
-      </NavbarSection>
-
-      <NavbarSection>
-        <Menu.Item key="help">
-          {/* @ts-expect-error ts-migrate(2746) FIXME: This JSX tag's 'children' prop expects a single ch... Remove this comment to see the full error message */}
-          <HelpTrigger showTooltip={false} type="HOME">
-            <QuestionCircleOutlinedIcon />
-            <span className="desktop-navbar-label">Help</span>
-          </HelpTrigger>
-        </Menu.Item>
-        {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
-        {firstSettingsTab && (<Menu.Item key="settings" className={activeState.dataSources ? "navbar-active-item" : null}>
-            <Link href={(firstSettingsTab as any).path} data-test="SettingsLink">
-              <SettingOutlinedIcon />
-              <span className="desktop-navbar-label">Settings</span>
-            </Link>
-          </Menu.Item>)}
-      </NavbarSection>
-
-      <NavbarSection className="desktop-navbar-profile-menu">
-        <Menu.SubMenu key="profile" popupClassName="desktop-navbar-submenu" title={<span data-test="ProfileDropdown" className="desktop-navbar-profile-menu-title">
-              <img className="profile__image_thumb" src={(currentUser as any).profile_image_url} alt={(currentUser as any).name}/>
-            </span>}>
-          <Menu.Item key="profile">
-            <Link href="users/me">Profile</Link>
-          </Menu.Item>
-          {currentUser.hasPermission("super_admin") && (<Menu.Item key="status">
-              <Link href="admin/status">System Status</Link>
-            </Menu.Item>)}
-          <Menu.Divider />
-          <Menu.Item key="logout">
-            <a data-test="LogOutButton" onClick={() => Auth.logout()}>
-              Log out
-            </a>
-          </Menu.Item>
-          <Menu.Divider />
-          <Menu.Item key="version" disabled className="version-info">
-            <VersionInfo />
-          </Menu.Item>
-        </Menu.SubMenu>
-      </NavbarSection>
-    </div>);
-}

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

@@ -1,5 +1,6 @@
 import { first } from "lodash";
 import React from "react";
+import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import MenuOutlinedIcon from "@ant-design/icons/MenuOutlined";
 import Dropdown from "antd/lib/dropdown";
@@ -7,46 +8,59 @@ import Menu from "antd/lib/menu";
 import Link from "@/components/Link";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
-// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '@/assets/images/redash_icon_sm... Remove this comment to see the full error message
 import logoUrl from "@/assets/images/redash_icon_small.png";
+
 import "./MobileNavbar.less";
-type OwnProps = {
-    getPopupContainer?: (...args: any[]) => any;
-};
-type Props = OwnProps & typeof MobileNavbar.defaultProps;
-export default function MobileNavbar({ getPopupContainer }: Props) {
-    const firstSettingsTab = first(settingsMenu.getAvailableItems());
-    return (<div className="mobile-navbar">
+
+export default function MobileNavbar({ getPopupContainer }) {
+  const firstSettingsTab = first(settingsMenu.getAvailableItems());
+
+  return (
+    <div className="mobile-navbar">
       <div className="mobile-navbar-logo">
         <Link href="./">
-          <img src={logoUrl} alt="Redash"/>
+          <img src={logoUrl} alt="Redash" />
         </Link>
       </div>
       <div>
-        <Dropdown overlayStyle={{ minWidth: 200 }} trigger={["click"]} getPopupContainer={getPopupContainer} // so the overlay menu stays with the fixed header when page scrolls
-     overlay={<Menu mode="vertical" theme="dark" selectable={false} className="mobile-navbar-menu">
-              {currentUser.hasPermission("list_dashboards") && (<Menu.Item key="dashboards">
+        <Dropdown
+          overlayStyle={{ minWidth: 200 }}
+          trigger={["click"]}
+          getPopupContainer={getPopupContainer} // so the overlay menu stays with the fixed header when page scrolls
+          overlay={
+            <Menu mode="vertical" theme="dark" selectable={false} className="mobile-navbar-menu">
+              {currentUser.hasPermission("list_dashboards") && (
+                <Menu.Item key="dashboards">
                   <Link href="dashboards">Dashboards</Link>
-                </Menu.Item>)}
-              {currentUser.hasPermission("view_query") && (<Menu.Item key="queries">
+                </Menu.Item>
+              )}
+              {currentUser.hasPermission("view_query") && (
+                <Menu.Item key="queries">
                   <Link href="queries">Queries</Link>
-                </Menu.Item>)}
-              {currentUser.hasPermission("list_alerts") && (<Menu.Item key="alerts">
+                </Menu.Item>
+              )}
+              {currentUser.hasPermission("list_alerts") && (
+                <Menu.Item key="alerts">
                   <Link href="alerts">Alerts</Link>
-                </Menu.Item>)}
+                </Menu.Item>
+              )}
               <Menu.Item key="profile">
                 <Link href="users/me">Edit Profile</Link>
               </Menu.Item>
               <Menu.Divider />
-              {firstSettingsTab && (<Menu.Item key="settings">
-                  <Link href={(firstSettingsTab as any).path}>Settings</Link>
-                </Menu.Item>)}
-              {currentUser.hasPermission("super_admin") && (<Menu.Item key="status">
+              {firstSettingsTab && (
+                <Menu.Item key="settings">
+                  <Link href={firstSettingsTab.path}>Settings</Link>
+                </Menu.Item>
+              )}
+              {currentUser.hasPermission("super_admin") && (
+                <Menu.Item key="status">
                   <Link href="admin/status">System Status</Link>
-                </Menu.Item>)}
+                </Menu.Item>
+              )}
               {currentUser.hasPermission("super_admin") && <Menu.Divider />}
               <Menu.Item key="help">
-                
+                {/* eslint-disable-next-line react/jsx-no-target-blank */}
                 <Link href="https://redash.io/help" target="_blank" rel="noopener">
                   Help
                 </Link>
@@ -54,14 +68,21 @@ export default function MobileNavbar({ getPopupContainer }: Props) {
               <Menu.Item key="logout" onClick={() => Auth.logout()}>
                 Log out
               </Menu.Item>
-            </Menu>}>
+            </Menu>
+          }>
           <Button className="mobile-navbar-toggle-button" ghost>
             <MenuOutlinedIcon />
           </Button>
         </Dropdown>
       </div>
-    </div>);
+    </div>
+  );
 }
-MobileNavbar.defaultProps = {
-    getPopupContainer: null,
+
+MobileNavbar.propTypes = {
+  getPopupContainer: PropTypes.func,
+};
+
+MobileNavbar.defaultProps = {
+  getPopupContainer: null,
 };

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

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

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

@@ -1,20 +0,0 @@
-import React from "react";
-import Link from "@/components/Link";
-import { clientConfig, currentUser } from "@/services/auth";
-// @ts-expect-error ts-migrate(7042) FIXME: Module '@/version.json' was resolved to '/Users/el... Remove this comment to see the full error message
-import frontendVersion from "@/version.json";
-export default function VersionInfo() {
-    return (<React.Fragment>
-      <div>
-        Version: {(clientConfig as any).version}
-        {frontendVersion !== (clientConfig as any).version && ` (${frontendVersion.substring(0, 8)})`}
-      </div>
-      {(clientConfig as any).newVersionAvailable && currentUser.hasPermission("super_admin") && (<div className="m-t-10">
-          
-          <Link href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
-            Update Available
-            <i className="fa fa-external-link m-l-5"/>
-          </Link>
-        </div>)}
-    </React.Fragment>);
-}

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

@@ -1,36 +1,27 @@
 import React, { useRef, useCallback } from "react";
+import PropTypes from "prop-types";
 import DynamicComponent from "@/components/DynamicComponent";
 import DesktopNavbar from "./DesktopNavbar";
 import MobileNavbar from "./MobileNavbar";
 
 import "./index.less";
 
-type OwnProps = {
-    children?: React.ReactNode;
-};
-
-type Props = OwnProps & typeof ApplicationLayout.defaultProps;
-
-export default function ApplicationLayout({ children }: Props) {
+export default function ApplicationLayout({ children }) {
   const mobileNavbarContainerRef = useRef();
 
   const getMobileNavbarPopupContainer = useCallback(() => mobileNavbarContainerRef.current, []);
 
   return (
     <React.Fragment>
-      {/* @ts-expect-error ts-migrate(2746) FIXME: This JSX tag's 'children' prop expects a single ch... Remove this comment to see the full error message */}
       <DynamicComponent name="ApplicationWrapper">
         <div className="application-layout-side-menu">
           <DynamicComponent name="ApplicationDesktopNavbar">
-            {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
             <DesktopNavbar />
           </DynamicComponent>
         </div>
         <div className="application-layout-content">
-          {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'MutableRefObject<undefined>' is not assignab... Remove this comment to see the full error message */}
           <nav className="application-layout-top-menu" ref={mobileNavbarContainerRef}>
             <DynamicComponent name="ApplicationMobileNavbar" getPopupContainer={getMobileNavbarPopupContainer}>
-              {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
               <MobileNavbar getPopupContainer={getMobileNavbarPopupContainer} />
             </DynamicComponent>
           </nav>
@@ -41,6 +32,10 @@ export default function ApplicationLayout({ children }: Props) {
   );
 }
 
+ApplicationLayout.propTypes = {
+  children: PropTypes.node,
+};
+
 ApplicationLayout.defaultProps = {
   children: null,
 };

client/app/components/ApplicationArea/ErrorMessage.jsx

@@ -0,0 +1,69 @@
+import { get, isObject } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+
+import "./ErrorMessage.less";
+import DynamicComponent from "@/components/DynamicComponent";
+import { ErrorMessageDetails } from "@/components/ApplicationArea/ErrorMessageDetails";
+
+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, message }) {
+  if (!error) {
+    return null;
+  }
+
+  console.error(error);
+
+  const errorDetailsProps = {
+    error,
+    message: message || getErrorMessage(error),
+  };
+
+  return (
+    <div className="error-message-container" data-test="ErrorMessage" role="alert">
+      <div className="error-state bg-white tiled">
+        <div className="error-state__icon">
+          <i className="zmdi zmdi-alert-circle-o" aria-hidden="true" />
+        </div>
+        <div className="error-state__details">
+          <DynamicComponent
+            name="ErrorMessageDetails"
+            fallback={<ErrorMessageDetails {...errorDetailsProps} />}
+            {...errorDetailsProps}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ErrorMessage.propTypes = {
+  error: PropTypes.object.isRequired,
+  message: PropTypes.string,
+};

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/ErrorMessage.test.tsx

@@ -1,40 +0,0 @@
-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 as any).isAxiosError = true;
-    (error as any).response = { status, ...response };
-    return error;
-}
-describe("Error Message", () => {
-    const spyError = jest.spyOn(console, "error");
-    beforeEach(() => {
-        spyError.mockReset();
-    });
-    function expectErrorMessageToBe(error: any, errorMessage: any) {
-        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/ErrorMessage.tsx

@@ -1,54 +0,0 @@
-import { get, isObject } from "lodash";
-import React from "react";
-import "./ErrorMessage.less";
-import DynamicComponent from "@/components/DynamicComponent";
-import { ErrorMessageDetails } from "@/components/ApplicationArea/ErrorMessageDetails";
-function getErrorMessageByStatus(status: any, defaultMessage: any) {
-    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: any) {
-    const message = "It seems like we encountered an error. Try refreshing this page or contact your administrator.";
-    if (isObject(error)) {
-        // HTTP errors
-        if ((error as any).isAxiosError && isObject((error as any).response)) {
-            return getErrorMessageByStatus((error as any).response.status, get(error, "response.data.message", message));
-        }
-        // Router errors
-        if ((error as any).status) {
-            return getErrorMessageByStatus((error as any).status, message);
-        }
-    }
-    return message;
-}
-type Props = {
-    error: any;
-    message?: string;
-};
-export default function ErrorMessage({ error, message }: Props) {
-    if (!error) {
-        return null;
-    }
-    console.error(error);
-    const errorDetailsProps = {
-        error,
-        message: message || getErrorMessage(error),
-    };
-    return (<div className="error-message-container" data-test="ErrorMessage" role="alert">
-      <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">
-          <DynamicComponent name="ErrorMessageDetails" fallback={<ErrorMessageDetails {...errorDetailsProps}/>} {...errorDetailsProps}/>
-        </div>
-      </div>
-    </div>);
-}

client/app/components/ApplicationArea/ErrorMessageDetails.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export function ErrorMessageDetails(props) {
+  return <h4>{props.message}</h4>;
+}
+
+ErrorMessageDetails.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired,
+  message: PropTypes.string.isRequired,
+};

client/app/components/ApplicationArea/ErrorMessageDetails.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-
-type Props = {
-    error: any; // TODO: PropTypes.instanceOf(Error)
-    message: string;
-};
-
-export function ErrorMessageDetails(props: Props) {
-  return <h4>{props.message}</h4>;
-}

client/app/components/ApplicationArea/Router.jsx

@@ -0,0 +1,145 @@
+import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
+import React, { useState, useEffect, useRef, useContext } from "react";
+import PropTypes from "prop-types";
+import UniversalRouter from "universal-router";
+import ErrorBoundary from "@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 const CurrentRouteContext = React.createContext(null);
+
+export function useCurrentRoute() {
+  return useContext(CurrentRouteContext);
+}
+
+export function stripBase(href) {
+  // Resolve provided link and '' (root) relative to document's base.
+  // If provided href is not related to current document (does not
+  // 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;
+      currentPathRef.current = null;
+      unlisten();
+    };
+  }, [routes]);
+
+  useEffect(() => {
+    onRouteChange(currentRoute);
+  }, [currentRoute, onRouteChange]);
+
+  if (!currentRoute) {
+    return null;
+  }
+
+  return (
+    <CurrentRouteContext.Provider value={currentRoute}>
+      <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
+        {currentRoute.render(currentRoute)}
+      </ErrorBoundary>
+    </CurrentRouteContext.Provider>
+  );
+}
+
+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/Router.tsx

@@ -1,118 +0,0 @@
-import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
-import React, { useState, useEffect, useRef, useContext } from "react";
-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 const CurrentRouteContext = React.createContext(null);
-export function useCurrentRoute() {
-    return useContext(CurrentRouteContext);
-}
-export function stripBase(href: any) {
-    // 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;
-}
-type OwnProps = {
-    routes?: {
-        path: string;
-        render?: (...args: any[]) => any;
-        resolve?: {
-            [key: string]: any;
-        };
-    }[];
-    onRouteChange?: (...args: any[]) => any;
-};
-type Props = OwnProps & typeof Router.defaultProps;
-export default function Router({ routes, onRouteChange }: Props) {
-    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 as any).render)) {
-                    return { ...route, routeParams };
-                }
-            },
-        });
-        function resolve(action: any) {
-            if (!isAbandoned) {
-                if (errorHandlerRef.current) {
-                    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-                    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;
-                }
-                // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'null'.
-                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({
-                            // @ts-expect-error ts-migrate(2345) FIXME: Argument of type '{ render: (currentRoute: any) =>... Remove this comment to see the full error message
-                            render: (currentRoute: any) => <ErrorMessage {...currentRoute.routeParams}/>,
-                            routeParams: { error },
-                        });
-                    }
-                });
-            }
-        }
-        resolve("PUSH");
-        const unlisten = location.listen((unused: any, action: any) => resolve(action));
-        return () => {
-            isAbandoned = true;
-            currentPathRef.current = null;
-            unlisten();
-        };
-    }, [routes]);
-    useEffect(() => {
-        onRouteChange(currentRoute);
-    }, [currentRoute, onRouteChange]);
-    if (!currentRoute) {
-        return null;
-    }
-    return (<CurrentRouteContext.Provider value={currentRoute}>
-      {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
-      <ErrorBoundary ref={errorHandlerRef} renderError={(error: any) => <ErrorMessage error={error}/>}>
-        {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
-        {currentRoute.render(currentRoute)}
-      </ErrorBoundary>
-    </CurrentRouteContext.Provider>);
-}
-Router.defaultProps = {
-    routes: [],
-    onRouteChange: () => { },
-};

client/app/components/ApplicationArea/handleNavigationIntent.js

@@ -1,7 +1,7 @@
 import { isString } from "lodash";
 import navigateTo from "./navigateTo";
 
-export default function handleNavigationIntent(event: any) {
+export default function handleNavigationIntent(event) {
   let element = event.target;
   while (element) {
     if (element.tagName === "A") {

client/app/components/ApplicationArea/index.jsx

@@ -9,16 +9,21 @@ export default function ApplicationArea() {
   const [unhandledError, setUnhandledError] = useState(null);
 
   useEffect(() => {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     if (currentRoute && currentRoute.title) {
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       document.title = currentRoute.title;
     }
   }, [currentRoute]);
 
   useEffect(() => {
-    function globalErrorHandler(event: any) {
+    function globalErrorHandler(event) {
       event.preventDefault();
+      if (event.message === "Uncaught SyntaxError: Unexpected token '<'") {
+        // if we see a javascript error on unexpected token where the unexpected token is '<', this usually means that a fallback html file (like index.html)
+        // was served as content of script rather than the expected script, give a friendlier message in the console on what could be going on
+        console.error(
+          `[Uncaught SyntaxError: Unexpected token '<'] usually means that a fallback html file was returned from server rather than the expected script. Check that the server is properly serving the file ${event.filename}.`
+        );
+      }
       setUnhandledError(event.error);
     }
 
@@ -35,6 +40,5 @@ export default function ApplicationArea() {
     return <ErrorMessage error={unhandledError} />;
   }
 
-  // @ts-expect-error ts-migrate(2322) FIXME: Type 'RouteItem[]' is not assignable to type '{ pa... Remove this comment to see the full error message
   return <Router routes={routes.items} onRouteChange={setCurrentRoute} />;
 }

client/app/components/ApplicationArea/navigateTo.js

@@ -4,7 +4,7 @@ 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: any, replace = false) {
+export default function navigateTo(href, replace = false) {
   // Allow calling chain to roll up, and then navigate
   setTimeout(() => {
     const isExternal = stripBase(href) === false;

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, clientConfig } 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 || clientConfig.disablePublicUrls) {
+    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/routeWithApiKeySession.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useState, useContext } from "react";
-import { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
-import { Auth, clientConfig } from "@/services/auth";
-type OwnProps = {
-    apiKey: string;
-    renderChildren?: (...args: any[]) => any;
-};
-type Props = OwnProps & typeof ApiKeySessionWrapper.defaultProps;
-// 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
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'currentRoute' does not exist on type 'Pr... Remove this comment to see the full error message
-function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }: Props) {
-    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 || (clientConfig as any).disablePublicUrls) {
-        return null;
-    }
-    return (<React.Fragment key={currentRoute.key}>
-      {renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError, apiKey })}
-    </React.Fragment>);
-}
-ApiKeySessionWrapper.defaultProps = {
-    renderChildren: () => null,
-};
-export default function routeWithApiKeySession({ render, getApiKey, ...rest }: any) {
-    return {
-        ...rest,
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ apiKey: any; currentRoute: any; renderChil... Remove this comment to see the full error message
-        render: (currentRoute: any) => <ApiKeySessionWrapper apiKey={getApiKey(currentRoute)} currentRoute={currentRoute} renderChildren={render}/>,
-    };
-}

client/app/components/ApplicationArea/routeWithUserSession.tsx

@@ -60,14 +60,15 @@ export function UserSessionWrapper<P>({ bodyClass, currentRoute, render }: UserS
 
   return (
     <ApplicationLayout>
-      {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'null | u... Remove this comment to see the full error message */}
       <React.Fragment key={currentRoute.key}>
-        {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
+        {/* @ts-expect-error FIXME */}
         <ErrorBoundary renderError={(error: Error) => <ErrorMessage error={error} />}>
           <ErrorBoundaryContext.Consumer>
-            {({ handleError } /* : { handleError: UserSessionWrapperRenderChildrenProps<P>["onError"] } FIXME bring back type */) =>
-              render({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
-            }
+            {(
+              {
+                handleError,
+              } /* : { handleError: UserSessionWrapperRenderChildrenProps<P>["onError"] } FIXME bring back type */
+            ) => render({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })}
           </ErrorBoundaryContext.Consumer>
         </ErrorBoundary>
       </React.Fragment>

client/app/components/BeaconConsent.jsx

@@ -7,36 +7,47 @@ import Link from "@/components/Link";
 import HelpTrigger from "@/components/HelpTrigger";
 import DynamicComponent from "@/components/DynamicComponent";
 import OrgSettings from "@/services/organizationSettings";
+
 const Text = Typography.Text;
+
 function BeaconConsent() {
-    const [hide, setHide] = useState(false);
-    if (!(clientConfig as any).showBeaconConsentMessage || hide) {
-        return null;
+  const [hide, setHide] = useState(false);
+
+  if (!clientConfig.showBeaconConsentMessage || hide) {
+    return null;
+  }
+
+  const hideConsentCard = () => {
+    clientConfig.showBeaconConsentMessage = false;
+    setHide(true);
+  };
+
+  const confirmConsent = confirm => {
+    let message = "🙏 Thank you.";
+
+    if (!confirm) {
+      message = "Settings Saved.";
     }
-    const hideConsentCard = () => {
-        (clientConfig as any).showBeaconConsentMessage = false;
-        setHide(true);
-    };
-    const confirmConsent = (confirm: any) => {
-        let message = "🙏 Thank you.";
-        if (!confirm) {
-            message = "Settings Saved.";
-        }
-        OrgSettings.save({ beacon_consent: confirm }, message)
-            // .then(() => {
-            //   // const settings = get(response, 'settings');
-            //   // this.setState({ settings, formValues: { ...settings } });
-            // })
-            .finally(hideConsentCard);
-    };
-    return (<DynamicComponent name="BeaconConsent">
-      {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
+
+    OrgSettings.save({ beacon_consent: confirm }, message)
+      // .then(() => {
+      //   // const settings = get(response, 'settings');
+      //   // this.setState({ settings, formValues: { ...settings } });
+      // })
+      .finally(hideConsentCard);
+  };
+
+  return (
+    <DynamicComponent name="BeaconConsent">
       <div className="m-t-10 tiled">
-        <Card title={<>
+        <Card
+          title={
+            <>
               Would you be ok with sharing anonymous usage data with the Redash team?{" "}
-              {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'. */}
-              <HelpTrigger type="USAGE_DATA_SHARING"/>
-            </>} bordered={false}>
+              <HelpTrigger type="USAGE_DATA_SHARING" />
+            </>
+          }
+          bordered={false}>
           <Text>Help Redash improve by automatically sending anonymous usage data:</Text>
           <div className="m-t-5">
             <ul>
@@ -61,6 +72,8 @@ function BeaconConsent() {
           </div>
         </Card>
       </div>
-    </DynamicComponent>);
+    </DynamicComponent>
+  );
 }
+
 export default BeaconConsent;

client/app/components/BigMessage.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useUniqueId } from "@/lib/hooks/useUniqueId";
+import cx from "classnames";
+
+function BigMessage({ message, icon, children, className }) {
+  const messageId = useUniqueId("bm-message");
+  return (
+    <div
+      className={"big-message p-15 text-center " + className}
+      role="status"
+      aria-live="assertive"
+      aria-relevant="additions removals">
+      <h3 className="m-t-0 m-b-0" aria-labelledby={messageId}>
+        <i className={cx("fa", icon)} aria-hidden="true" />
+      </h3>
+      <br />
+      <span id={messageId}>{message}</span>
+      {children}
+    </div>
+  );
+}
+
+BigMessage.propTypes = {
+  message: PropTypes.string,
+  icon: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+BigMessage.defaultProps = {
+  message: "",
+  children: null,
+  className: "tiled bg-white",
+};
+
+export default BigMessage;

client/app/components/BigMessage.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-type OwnProps = {
-    message?: string;
-    icon: string;
-    children?: React.ReactNode;
-    className?: string;
-};
-
-type Props = OwnProps & typeof BigMessage.defaultProps;
-
-function BigMessage({ message, icon, children, className }: Props) {
-  return (
-    <div className={"p-15 text-center " + className}>
-      <h3 className="m-t-0 m-b-0">
-        <i className={"fa " + icon} />
-      </h3>
-      <br />
-      {message}
-      {children}
-    </div>
-  );
-}
-
-BigMessage.defaultProps = {
-  message: "",
-  children: null,
-  className: "tiled bg-white",
-};
-
-export default BigMessage;

client/app/components/CodeBlock.jsx

@@ -1,30 +1,24 @@
 import React from "react";
+import PropTypes from "prop-types";
 import Button from "antd/lib/button";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
 import "./CodeBlock.less";
 
-type OwnProps = {
-    copyable?: boolean;
-};
+export default class CodeBlock extends React.Component {
+  static propTypes = {
+    copyable: PropTypes.bool,
+    children: PropTypes.node,
+  };
 
-type State = any;
-
-type Props = OwnProps & typeof CodeBlock.defaultProps;
-
-export default class CodeBlock extends React.Component<Props, State> {
   static defaultProps = {
     copyable: false,
     children: null,
   };
 
-  copyFeatureEnabled: any;
-  ref: any;
-  resetCopyState: any;
-
   state = { copied: null };
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
     this.ref = React.createRef();
     this.copyFeatureEnabled = props.copyable && document.queryCommandSupported("copy");
@@ -39,7 +33,6 @@ export default class CodeBlock extends React.Component<Props, State> {
 
   copy = () => {
     // select text
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     window.getSelection().selectAllChildren(this.ref.current);
 
     // copy
@@ -56,7 +49,6 @@ export default class CodeBlock extends React.Component<Props, State> {
     }
 
     // reset selection
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     window.getSelection().removeAllRanges();
 
     // reset tooltip

client/app/components/CodeBlock.less

@@ -1,4 +1,4 @@
-@import '~antd/lib/button/style/index';
+@import (reference, less) "~@/assets/less/ant";
 
 .code-block {
   background: rgba(0, 0, 0, 0.06);

client/app/components/Collapse.jsx

@@ -1,20 +1,12 @@
 import React from "react";
+import PropTypes from "prop-types";
 import cx from "classnames";
 import AntCollapse from "antd/lib/collapse";
 
-type OwnProps = {
-    collapsed?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-};
-
-type Props = OwnProps & typeof Collapse.defaultProps;
-
-export default function Collapse({ collapsed, children, className, ...props }: Props) {
+export default function Collapse({ collapsed, children, className, ...props }) {
   return (
     <AntCollapse
       {...props}
-      // @ts-expect-error ts-migrate(2322) FIXME: Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
       activeKey={collapsed ? null : "content"}
       className={cx(className, "ant-collapse-headerless")}>
       <AntCollapse.Panel key="content" header="">
@@ -24,6 +16,12 @@ export default function Collapse({ collapsed, children, className, ...props }: P
   );
 }
 
+Collapse.propTypes = {
+  collapsed: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
 Collapse.defaultProps = {
   collapsed: true,
   children: null,

client/app/components/CreateSourceDialog.jsx

@@ -0,0 +1,202 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { isEmpty, toUpper, includes, get, uniqueId } 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 Link from "@/components/Link";
+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;
+
+const StepEnum = {
+  SELECT_TYPE: 0,
+  CONFIGURE_IT: 1,
+  DONE: 2,
+};
+
+class CreateSourceDialog extends React.Component {
+  static propTypes = {
+    dialog: DialogPropType.isRequired,
+    types: PropTypes.arrayOf(PropTypes.object),
+    sourceType: PropTypes.string.isRequired,
+    imageFolder: PropTypes.string.isRequired,
+    helpTriggerPrefix: PropTypes.string,
+    onCreate: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    types: [],
+    helpTriggerPrefix: null,
+  };
+
+  state = {
+    searchText: "",
+    selectedType: null,
+    savingSource: false,
+    currentStep: StepEnum.SELECT_TYPE,
+  };
+
+  formId = uniqueId("sourceForm");
+
+  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 });
+    }
+  };
+
+  createSource = (values, successCallback, errorCallback) => {
+    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(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())
+    );
+    return (
+      <div className="m-t-10">
+        <Search
+          placeholder="Search..."
+          aria-label="Search"
+          onChange={e => this.setState({ searchText: e.target.value })}
+          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>
+      </div>
+    );
+  }
+
+  renderForm() {
+    const { imageFolder, helpTriggerPrefix } = this.props;
+    const { selectedType } = this.state;
+    const fields = helper.getFields(selectedType);
+    const helpTriggerType = `${helpTriggerPrefix}${toUpper(selectedType.type)}`;
+    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" />
+          <h4 className="m-0">{selectedType.name}</h4>
+        </div>
+        <div className="text-right">
+          {HELP_TRIGGER_TYPES[helpTriggerType] && (
+            <HelpTrigger className="f-13" type={helpTriggerType}>
+              Setup Instructions <i className="fa fa-question-circle" aria-hidden="true" />
+              <span className="sr-only">(help)</span>
+            </HelpTrigger>
+          )}
+        </div>
+        <DynamicForm id={this.formId} fields={fields} onSubmit={this.createSource} feedbackIcons hideSubmitButton />
+        {selectedType.type === "databricks" && (
+          <small>
+            By using the Databricks Data Source you agree to the Databricks JDBC/ODBC{" "}
+            <Link href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
+              Driver Download Terms and Conditions
+            </Link>
+            .
+          </small>
+        )}
+      </div>
+    );
+  }
+
+  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}
+          data-test="PreviewItem"
+          data-test-type={item.type}>
+          <i className="fa fa-angle-double-right" aria-hidden="true" />
+        </PreviewCard>
+      </List.Item>
+    );
+  }
+
+  render() {
+    const { currentStep, savingSource } = this.state;
+    const { dialog, sourceType } = this.props;
+    return (
+      <Modal
+        {...dialog.props}
+        title={`Create a New ${sourceType}`}
+        footer={
+          currentStep === StepEnum.SELECT_TYPE
+            ? [
+                <Button key="cancel" onClick={() => dialog.dismiss()} data-test="CreateSourceCancelButton">
+                  Cancel
+                </Button>,
+                <Button key="submit" type="primary" disabled>
+                  Create
+                </Button>,
+              ]
+            : [
+                <Button key="previous" onClick={this.resetType}>
+                  Previous
+                </Button>,
+                <Button
+                  key="submit"
+                  htmlType="submit"
+                  form={this.formId}
+                  type="primary"
+                  loading={savingSource}
+                  data-test="CreateSourceSaveButton">
+                  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="Configuration" />
+            <Step title="Done" />
+          </Steps>
+          {currentStep === StepEnum.SELECT_TYPE && this.renderTypeSelector()}
+          {currentStep !== StepEnum.SELECT_TYPE && this.renderForm()}
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export default wrapDialog(CreateSourceDialog);

client/app/components/CreateSourceDialog.tsx

@@ -1,152 +0,0 @@
-import React from "react";
-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";
-// @ts-expect-error ts-migrate(6133) FIXME: 'DialogPropType' is declared but its value is neve... Remove this comment to see the full error message
-import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import Link from "@/components/Link";
-import { PreviewCard } from "@/components/PreviewCard";
-import EmptyState from "@/components/items-list/components/EmptyState";
-import DynamicForm from "@/components/dynamic-form/DynamicForm";
-import helper from "@/components/dynamic-form/dynamicFormHelper";
-import HelpTrigger, { TYPES as HELP_TRIGGER_TYPES } from "@/components/HelpTrigger";
-const { Step } = Steps;
-const { Search } = Input;
-const StepEnum = {
-    SELECT_TYPE: 0,
-    CONFIGURE_IT: 1,
-    DONE: 2,
-};
-type OwnProps = {
-    // @ts-expect-error ts-migrate(2749) FIXME: 'DialogPropType' refers to a value, but is being u... Remove this comment to see the full error message
-    dialog: DialogPropType;
-    types?: any[];
-    sourceType: string;
-    imageFolder: string;
-    helpTriggerPrefix?: string;
-    onCreate: (...args: any[]) => any;
-};
-type State = any;
-type Props = OwnProps & typeof CreateSourceDialog.defaultProps;
-class CreateSourceDialog extends React.Component<Props, State> {
-    static defaultProps = {
-        types: [],
-        helpTriggerPrefix: null,
-    };
-    state = {
-        searchText: "",
-        selectedType: null,
-        savingSource: false,
-        currentStep: StepEnum.SELECT_TYPE,
-    };
-    selectType = (selectedType: any) => {
-        this.setState({ selectedType, currentStep: StepEnum.CONFIGURE_IT });
-    };
-    resetType = () => {
-        if (this.state.currentStep === StepEnum.CONFIGURE_IT) {
-            this.setState({ searchText: "", selectedType: null, currentStep: StepEnum.SELECT_TYPE });
-        }
-    };
-    createSource = (values: any, successCallback: any, errorCallback: any) => {
-        const { selectedType, savingSource } = this.state;
-        if (!savingSource) {
-            this.setState({ savingSource: true, currentStep: StepEnum.DONE });
-            (this.props as any).onCreate(selectedType, values)
-                .then((data: any) => {
-                successCallback("Saved.");
-                (this.props as any).dialog.close({ success: true, data });
-            })
-                .catch((error: any) => {
-                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 as any).filter((type: any) => isEmpty(searchText) || includes(type.name.toLowerCase(), searchText.toLowerCase()));
-        return (<div className="m-t-10">
-        <Search placeholder="Search..." onChange={e => this.setState({ searchText: e.target.value })} 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>
-      </div>);
-    }
-    renderForm() {
-        const { imageFolder, helpTriggerPrefix } = this.props;
-        const { selectedType } = this.state;
-        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'null' is not assignable to param... Remove this comment to see the full error message
-        const fields = helper.getFields(selectedType);
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        const helpTriggerType = `${helpTriggerPrefix}${toUpper(selectedType.type)}`;
-        return (<div>
-        <div className="d-flex justify-content-center align-items-center">
-          {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
-          <img className="p-5" src={`${imageFolder}/${selectedType.type}.png`} alt={selectedType.name} width="48"/>
-          {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
-          <h4 className="m-0">{selectedType.name}</h4>
-        </div>
-        <div className="text-right">
-          {/* @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
-          {HELP_TRIGGER_TYPES[helpTriggerType] && (<HelpTrigger className="f-13" type={helpTriggerType}>
-              Setup Instructions <i className="fa fa-question-circle"/>
-            </HelpTrigger>)}
-        </div>
-        {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'. */}
-        <DynamicForm id="sourceForm" fields={fields} onSubmit={this.createSource} feedbackIcons hideSubmitButton/>
-        {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
-        {selectedType.type === "databricks" && (<small>
-            By using the Databricks Data Source you agree to the Databricks JDBC/ODBC{" "}
-            <Link href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
-              Driver Download Terms and Conditions
-            </Link>
-            .
-          </small>)}
-      </div>);
-    }
-    renderItem(item: any) {
-        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} data-test="PreviewItem" data-test-type={item.type}>
-          {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'null | u... Remove this comment to see the full error message */}
-          <i className="fa fa-angle-double-right"/>
-        </PreviewCard>
-      </List.Item>);
-    }
-    render() {
-        const { currentStep, savingSource } = this.state;
-        const { dialog, sourceType } = this.props;
-        return (<Modal {...(dialog as any).props} title={`Create a New ${sourceType}`} footer={currentStep === StepEnum.SELECT_TYPE
-            ? [
-                <Button key="cancel" onClick={() => (dialog as any).dismiss()} data-test="CreateSourceCancelButton">
-                  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="CreateSourceSaveButton">
-                  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="Configuration"/>
-            <Step title="Done"/>
-          </Steps>
-          {currentStep === StepEnum.SELECT_TYPE && this.renderTypeSelector()}
-          {currentStep !== StepEnum.SELECT_TYPE && this.renderForm()}
-        </div>
-      </Modal>);
-    }
-}
-export default wrapDialog(CreateSourceDialog);

client/app/components/DateInput.jsx

@@ -0,0 +1,43 @@
+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 additionalAttributes = {};
+  if (defaultValue && defaultValue.isValid()) {
+    additionalAttributes.defaultValue = defaultValue;
+  }
+  if (value === null || (value && value.isValid())) {
+    additionalAttributes.value = value;
+  }
+  return (
+    <DatePicker
+      ref={ref}
+      className={className}
+      {...additionalAttributes}
+      format={format}
+      placeholder="Select Date"
+      onChange={onSelect}
+      {...props}
+    />
+  );
+});
+
+DateInput.propTypes = {
+  defaultValue: Moment,
+  value: Moment,
+  onSelect: PropTypes.func,
+  className: PropTypes.string,
+};
+
+DateInput.defaultProps = {
+  defaultValue: null,
+  value: undefined,
+  onSelect: () => {},
+  className: "",
+};
+
+export default DateInput;

client/app/components/DateInput.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import DatePicker from "antd/lib/date-picker";
-import { clientConfig } from "@/services/auth";
-// @ts-expect-error ts-migrate(6133) FIXME: 'Moment' is declared but its value is never read.
-import { Moment } from "@/components/proptypes";
-type Props = {
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    defaultValue?: Moment;
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    value?: Moment;
-    onSelect?: (...args: any[]) => any;
-    className?: string;
-};
-const DateInput = React.forwardRef<any, Props>(({ defaultValue, value, onSelect, className, ...props }, ref) => {
-    const format = (clientConfig as any).dateFormat || "YYYY-MM-DD";
-    const additionalAttributes = {};
-    if (defaultValue && defaultValue.isValid()) {
-        (additionalAttributes as any).defaultValue = defaultValue;
-    }
-    if (value === null || (value && value.isValid())) {
-        (additionalAttributes as any).value = value;
-    }
-    return (<DatePicker ref={ref} className={className} {...additionalAttributes} format={format} placeholder="Select Date" onChange={onSelect} {...props}/>);
-});
-DateInput.defaultProps = {
-    defaultValue: null,
-    value: undefined,
-    onSelect: () => { },
-    className: "",
-};
-export default DateInput;

client/app/components/DateRangeInput.jsx

@@ -0,0 +1,45 @@
+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 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}
+      {...additionalAttributes}
+      format={format}
+      onChange={onSelect}
+      {...props}
+    />
+  );
+});
+
+DateRangeInput.propTypes = {
+  defaultValue: PropTypes.arrayOf(Moment),
+  value: PropTypes.arrayOf(Moment),
+  onSelect: PropTypes.func,
+  className: PropTypes.string,
+};
+
+DateRangeInput.defaultProps = {
+  defaultValue: null,
+  value: undefined,
+  onSelect: () => {},
+  className: "",
+};
+
+export default DateRangeInput;

client/app/components/DateRangeInput.tsx

@@ -1,34 +0,0 @@
-import { isArray } from "lodash";
-import React from "react";
-import DatePicker from "antd/lib/date-picker";
-import { clientConfig } from "@/services/auth";
-// @ts-expect-error ts-migrate(6133) FIXME: 'Moment' is declared but its value is never read.
-import { Moment } from "@/components/proptypes";
-const { RangePicker } = DatePicker;
-type Props = {
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    defaultValue?: Moment[];
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    value?: Moment[];
-    onSelect?: (...args: any[]) => any;
-    className?: string;
-};
-const DateRangeInput = React.forwardRef<any, Props>(({ defaultValue, value, onSelect, className, ...props }, ref) => {
-    const format = (clientConfig as any).dateFormat || "YYYY-MM-DD";
-    const additionalAttributes = {};
-    if (isArray(defaultValue) && defaultValue[0].isValid() && defaultValue[1].isValid()) {
-        (additionalAttributes as any).defaultValue = defaultValue;
-    }
-    if (value === null || (isArray(value) && value[0].isValid() && value[1].isValid())) {
-        (additionalAttributes as any).value = value;
-    }
-    return (<RangePicker ref={ref} className={className} {...additionalAttributes} format={format} onChange={onSelect} {...props}/>);
-});
-DateRangeInput.defaultProps = {
-    // @ts-expect-error ts-migrate(2322) FIXME: Type 'null' is not assignable to type 'any[] | und... Remove this comment to see the full error message
-    defaultValue: null,
-    value: undefined,
-    onSelect: () => { },
-    className: "",
-};
-export default DateRangeInput;

client/app/components/DateTimeInput.jsx

@@ -0,0 +1,46 @@
+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 additionalAttributes = {};
+  if (defaultValue && defaultValue.isValid()) {
+    additionalAttributes.defaultValue = defaultValue;
+  }
+  if (value === null || (value && value.isValid())) {
+    additionalAttributes.value = value;
+  }
+  return (
+    <DatePicker
+      ref={ref}
+      className={className}
+      showTime
+      {...additionalAttributes}
+      format={format}
+      placeholder="Select Date and Time"
+      onChange={onSelect}
+      {...props}
+    />
+  );
+});
+
+DateTimeInput.propTypes = {
+  defaultValue: Moment,
+  value: Moment,
+  withSeconds: PropTypes.bool,
+  onSelect: PropTypes.func,
+  className: PropTypes.string,
+};
+
+DateTimeInput.defaultProps = {
+  defaultValue: null,
+  value: undefined,
+  withSeconds: false,
+  onSelect: () => {},
+  className: "",
+};
+
+export default DateTimeInput;

client/app/components/DateTimeInput.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import DatePicker from "antd/lib/date-picker";
-import { clientConfig } from "@/services/auth";
-// @ts-expect-error ts-migrate(6133) FIXME: 'Moment' is declared but its value is never read.
-import { Moment } from "@/components/proptypes";
-type Props = {
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    defaultValue?: Moment;
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    value?: Moment;
-    withSeconds?: boolean;
-    onSelect?: (...args: any[]) => any;
-    className?: string;
-};
-const DateTimeInput = React.forwardRef<any, Props>(({ defaultValue, value, withSeconds, onSelect, className, ...props }, ref) => {
-    const format = ((clientConfig as any).dateFormat || "YYYY-MM-DD") + (withSeconds ? " HH:mm:ss" : " HH:mm");
-    const additionalAttributes = {};
-    if (defaultValue && defaultValue.isValid()) {
-        (additionalAttributes as any).defaultValue = defaultValue;
-    }
-    if (value === null || (value && value.isValid())) {
-        (additionalAttributes as any).value = value;
-    }
-    return (<DatePicker ref={ref} className={className} showTime {...additionalAttributes} format={format} placeholder="Select Date and Time" onChange={onSelect} {...props}/>);
-});
-DateTimeInput.defaultProps = {
-    defaultValue: null,
-    value: undefined,
-    withSeconds: false,
-    onSelect: () => { },
-    className: "",
-};
-export default DateTimeInput;

client/app/components/DateTimeRangeInput.jsx

@@ -0,0 +1,50 @@
+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;
+    }
+    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),
+  value: PropTypes.arrayOf(Moment),
+  withSeconds: PropTypes.bool,
+  onSelect: PropTypes.func,
+  className: PropTypes.string,
+};
+
+DateTimeRangeInput.defaultProps = {
+  defaultValue: null,
+  value: undefined,
+  withSeconds: false,
+  onSelect: () => {},
+  className: "",
+};
+
+export default DateTimeRangeInput;

client/app/components/DateTimeRangeInput.tsx

@@ -1,36 +0,0 @@
-import { isArray } from "lodash";
-import React from "react";
-import DatePicker from "antd/lib/date-picker";
-import { clientConfig } from "@/services/auth";
-// @ts-expect-error ts-migrate(6133) FIXME: 'Moment' is declared but its value is never read.
-import { Moment } from "@/components/proptypes";
-const { RangePicker } = DatePicker;
-type Props = {
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    defaultValue?: Moment[];
-    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
-    value?: Moment[];
-    withSeconds?: boolean;
-    onSelect?: (...args: any[]) => any;
-    className?: string;
-};
-const DateTimeRangeInput = React.forwardRef<any, Props>(({ defaultValue, value, withSeconds, onSelect, className, ...props }, ref) => {
-    const format = ((clientConfig as any).dateFormat || "YYYY-MM-DD") + (withSeconds ? " HH:mm:ss" : " HH:mm");
-    const additionalAttributes = {};
-    if (isArray(defaultValue) && defaultValue[0].isValid() && defaultValue[1].isValid()) {
-        (additionalAttributes as any).defaultValue = defaultValue;
-    }
-    if (value === null || (isArray(value) && value[0].isValid() && value[1].isValid())) {
-        (additionalAttributes as any).value = value;
-    }
-    return (<RangePicker ref={ref} className={className} showTime {...additionalAttributes} format={format} onChange={onSelect} {...props}/>);
-});
-DateTimeRangeInput.defaultProps = {
-    // @ts-expect-error ts-migrate(2322) FIXME: Type 'null' is not assignable to type 'any[] | und... Remove this comment to see the full error message
-    defaultValue: null,
-    value: undefined,
-    withSeconds: false,
-    onSelect: () => { },
-    className: "",
-};
-export default DateTimeRangeInput;

client/app/components/DialogWrapper.jsx

@@ -0,0 +1,227 @@
+import { isFunction } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import ReactDOM from "react-dom";
+
+/**
+  Wrapper for dialogs based on Ant's <Modal> component.
+
+
+  Using wrapped dialogs
+  =====================
+
+  Wrapped component is an object with two fields:
+
+    {
+      showModal: (dialogProps) => object({
+          close: (result) => void,
+          dismiss: (reason) => void,
+          onClose: (handler) => this,
+          onDismiss: (handler) => this,
+        }),
+      Component: React.Component, // wrapped dialog component
+    }
+
+  To open dialog, use `showModal` method; optionally you can pass additional properties that
+  will be expanded on wrapped component:
+
+    const dialog = SomeWrappedDialog.showModal()
+
+    const dialog = SomeWrappedDialog.showModal({ greeting: 'Hello' })
+
+  To get result of modal, use `onClose`/`onDismiss` setters:
+
+    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 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
+  ================
+
+  1. Add imports:
+
+    import { wrap as wrapDialog, DialogPropType } from 'path/to/DialogWrapper';
+
+  2. define a `dialog` property on your component:
+
+    propTypes = {
+      dialog: DialogPropType.isRequired,
+    };
+
+  `dialog` property is an object:
+
+    {
+      props: object, // properties for <Modal> component;
+      close: (result) => void, // method to confirm dialog; `result` will be returned to caller
+      dismiss: (reason) => void, // method to reject dialog; `reason` will be returned to caller
+    }
+
+  3. expand additional properties on <Modal> component:
+
+    render() {
+      const { dialog } = this.props;
+      return (
+        <Modal {...dialog.props}>
+      );
+    }
+
+  4. wrap your component and export it:
+
+    export default wrapDialog(YourComponent).
+
+  Your component is ready to use. Wrapper will manage <Modal>'s visibility and events.
+  If you want to override behavior of `onOk`/`onCancel` - don't forget to close dialog:
+
+    customOkHandler() {
+      this.saveData().then(() => {
+         this.props.dialog.close({ success: true }); // or dismiss();
+      });
+    }
+
+    render() {
+      const { dialog } = this.props;
+        return (
+          <Modal {...dialog.props} onOk={() => this.customOkHandler()}>
+        );
+    }
+*/
+
+export const DialogPropType = PropTypes.shape({
+  props: PropTypes.shape({
+    visible: PropTypes.bool,
+    onOk: PropTypes.func,
+    onCancel: PropTypes.func,
+    afterClose: PropTypes.func,
+  }).isRequired,
+  close: PropTypes.func.isRequired,
+  dismiss: PropTypes.func.isRequired,
+});
+
+function openDialog(DialogComponent, props) {
+  const dialog = {
+    props: {
+      visible: true,
+      okButtonProps: {},
+      cancelButtonProps: {},
+      onOk: () => {},
+      onCancel: () => {},
+      afterClose: () => {},
+    },
+    close: () => {},
+    dismiss: () => {},
+  };
+
+  let pendingCloseTask = null;
+
+  const handlers = {
+    onClose: () => {},
+    onDismiss: () => {},
+  };
+
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+
+  function render() {
+    ReactDOM.render(<DialogComponent {...props} dialog={dialog} />, container);
+  }
+
+  function destroyDialog() {
+    // Allow calling chain to roll up, and then destroy component
+    setTimeout(() => {
+      ReactDOM.unmountComponentAtNode(container);
+      document.body.removeChild(container);
+    }, 10);
+  }
+
+  function 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 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;
+  dialog.props.onCancel = dismissDialog;
+  dialog.props.afterClose = destroyDialog;
+  dialog.close = closeDialog;
+  dialog.dismiss = dismissDialog;
+
+  const result = {
+    close: closeDialog,
+    dismiss: dismissDialog,
+    update: newProps => {
+      props = { ...props, ...newProps };
+      render();
+    },
+    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
+
+  return result;
+}
+
+export function wrap(DialogComponent) {
+  return {
+    Component: DialogComponent,
+    showModal: props => openDialog(DialogComponent, props),
+  };
+}
+
+export default {
+  DialogPropType,
+  wrap,
+};