Snapshot: 25.11.0-dev

* Advanced query search syntax for multi byte search

* Advanced search for my queries

* Add advanced query seearch tooltip

* Revert "Add advanced query seearch tooltip"

This reverts commit 43148ba6ac.

.ci/Dockerfile.cypress

@@ -0,0 +1,12 @@
+FROM cypress/browsers:node18.12.0-chrome106-ff106
+
+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.22 -g && yarn --frozen-lockfile --network-concurrency 1 > /dev/null
+
+COPY . $APP
+
+RUN ./node_modules/.bin/cypress verify

.ci/compose.ci.yaml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   redash:
     build: ../
@@ -12,11 +11,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: postgres:18-alpine
     command: "postgres -c fsync=off -c full_page_writes=off -c synchronous_commit=OFF"
     restart: unless-stopped
+    environment:
+      POSTGRES_HOST_AUTH_METHOD: "trust"

.ci/compose.cypress.yaml

@@ -1,7 +1,20 @@
-version: '3'
+x-redash-service: &redash-service
+  build:
+    context: ../
+    args:
+      install_groups: "main"
+      code_coverage: ${CODE_COVERAGE}
+x-redash-environment: &redash-environment
+  REDASH_LOG_LEVEL: "INFO"
+  REDASH_REDIS_URL: "redis://redis:6379/0"
+  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:
-    build: ../
+    <<: *redash-service
     command: server
     depends_on:
       - postgres
@@ -9,52 +22,52 @@ services:
     ports:
       - "5000:5000"
     environment:
+      <<: *redash-environment
       PYTHONUNBUFFERED: 0
-      REDASH_LOG_LEVEL: "INFO"
-      REDASH_REDIS_URL: "redis://redis:6379/0"
-      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-      REDASH_RATELIMIT_ENABLED: "false"
   scheduler:
-    build: ../
+    <<: *redash-service
     command: scheduler
     depends_on:
       - server
     environment:
-      REDASH_REDIS_URL: "redis://redis:6379/0"
+      <<: *redash-environment
   worker:
-    build: ../
+    <<: *redash-service
     command: worker
     depends_on:
       - server
     environment:
+      <<: *redash-environment
       PYTHONUNBUFFERED: 0
-      REDASH_LOG_LEVEL: "INFO"
-      REDASH_REDIS_URL: "redis://redis:6379/0"
-      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
   cypress:
+    ipc: host
     build:
       context: ../
-      dockerfile: .circleci/Dockerfile.cypress
+      dockerfile: .ci/Dockerfile.cypress
     depends_on:
       - server
       - worker
       - scheduler
     environment:
       CYPRESS_baseUrl: "http://server:5000"
+      CYPRESS_coverage: ${CODE_COVERAGE}
       PERCY_TOKEN: ${PERCY_TOKEN}
       PERCY_BRANCH: ${CIRCLE_BRANCH}
       PERCY_COMMIT: ${CIRCLE_SHA1}
       PERCY_PULL_REQUEST: ${CIRCLE_PR_NUMBER}
       COMMIT_INFO_BRANCH: ${CIRCLE_BRANCH}
+      COMMIT_INFO_MESSAGE: ${COMMIT_INFO_MESSAGE}
       COMMIT_INFO_AUTHOR: ${CIRCLE_USERNAME}
       COMMIT_INFO_SHA: ${CIRCLE_SHA1}
       COMMIT_INFO_REMOTE: ${CIRCLE_REPOSITORY_URL}
       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: postgres:18-alpine
     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

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# This script only needs to run on the main Redash repo
+
+if [ "${GITHUB_REPOSITORY}" != "getredash/redash" ]; then
+	echo "Skipping image build for Docker Hub, as this isn't the main Redash repository"
+	exit 0
+fi
+
+if [ "${GITHUB_REF_NAME}" != "master" ] && [ "${GITHUB_REF_NAME}" != "preview-image" ]; then
+	echo "Skipping image build for Docker Hub, as this isn't the 'master' nor 'preview-image' branch"
+	exit 0
+fi
+
+if [ "x${DOCKER_USER}" = "x" ] || [ "x${DOCKER_PASS}" = "x" ]; then
+	echo "Skipping image build for Docker Hub, as the login details aren't available"
+	exit 0
+fi
+
+set -e
+VERSION=$(jq -r .version package.json)
+VERSION_TAG="$VERSION.b${GITHUB_RUN_ID}.${GITHUB_RUN_NUMBER}"
+
+export DOCKER_BUILDKIT=1
+export COMPOSE_DOCKER_CLI_BUILD=1
+
+docker login -u "${DOCKER_USER}" -p "${DOCKER_PASS}"
+
+DOCKERHUB_REPO="redash/redash"
+DOCKER_TAGS="-t redash/redash:preview -t redash/preview:${VERSION_TAG}"
+
+# Build the docker container
+docker build --build-arg install_groups="main,all_ds,dev" ${DOCKER_TAGS} .
+
+# Push the container to the preview build locations
+docker push "${DOCKERHUB_REPO}:preview"
+docker push "redash/preview:${VERSION_TAG}"
+
+echo "Built: ${VERSION_TAG}"

.ci/update_version

@@ -0,0 +1,6 @@
+#!/bin/bash
+VERSION=$(jq -r .version package.json)
+FULL_VERSION=${VERSION}+b${GITHUB_RUN_ID}.${GITHUB_RUN_NUMBER}
+
+sed -ri "s/^__version__ = '([A-Za-z0-9.-]*)'/__version__ = '${FULL_VERSION}'/" redash/__init__.py
+sed -i "s/dev/${GITHUB_SHA}/" client/app/version.json

.circleci/Dockerfile.cypress

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

.circleci/config.yml

@@ -1,142 +0,0 @@
-version: 2.0
-
-build-docker-image-job: &build-docker-image-job
-  docker:
-    - image: circleci/node:8
-  steps:
-    - setup_remote_docker
-    - checkout
-    - 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
-            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:
-    docker:
-      - image: circleci/node:8
-    steps:
-      - checkout
-      - run: mkdir -p /tmp/test-results/eslint
-      - run: npm install
-      - run: npm run lint:ci
-      - store_test_results:
-          path: /tmp/test-results
-  frontend-unit-tests:
-    docker:
-      - image: circleci/node:8
-    steps:
-      - checkout
-      - run: sudo apt install python3-pip
-      - run: sudo pip3 install -r requirements_bundles.txt
-      - run: npm install
-      - run: npm run bundle
-      - run: 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
-    docker:
-      - image: circleci/node:8
-    steps:
-      - setup_remote_docker
-      - checkout
-      - run:
-          name: Install npm dependencies
-          command: |
-            npm install
-      - run:
-          name: Setup Redash server
-          command: |
-            npm run cypress start
-            docker-compose run cypress npm run cypress db-seed
-      - run:
-          name: Execute Cypress tests
-          command: npm run cypress run-ci
-  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

.circleci/docker_build

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

.circleci/update_version

@@ -1,6 +0,0 @@
-#!/bin/bash
-VERSION=$(jq -r .version package.json)
-FULL_VERSION=$VERSION+b$CIRCLE_BUILD_NUM
-
-sed -ri "s/^__version__ = '([A-Za-z0-9.-]*)'/__version__ = '$FULL_VERSION'/" redash/__init__.py
-sed -i "s/dev/$CIRCLE_SHA1/" client/app/version.json

.dockerignore

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

.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 support, help & questions use https://github.com/getredash/redash/discussions/categories/q-a
-💡For feature requests & ideas use https://discuss.redash.io/c/feature-requests
+💡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 support, help & questions use https://github.com/getredash/redash/discussions/categories/q-a
-💡For feature requests & ideas use https://discuss.redash.io/c/feature-requests
+💡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)
+## What type of PR is this? 
-<!-- Please leave only what's applicable -->
+<!-- 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,177 @@
+name: Tests
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+env:
+  NODE_VERSION: 18
+  YARN_VERSION: 1.22.22
+jobs:
+  backend-lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - if: github.event.pull_request.mergeable == 'false'
+        name: Exit if PR is not mergeable
+        run: exit 1
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.8'
+      - run: sudo pip install black==23.1.0 ruff==0.0.287
+      - run: ruff check .
+      - run: black --check .
+
+  backend-unit-tests:
+    runs-on: ubuntu-22.04
+    needs: backend-lint
+    env:
+      COMPOSE_FILE: .ci/compose.ci.yaml
+      COMPOSE_PROJECT_NAME: redash
+      COMPOSE_DOCKER_CLI_BUILD: 1
+      DOCKER_BUILDKIT: 1
+    steps:
+      - if: github.event.pull_request.mergeable == 'false'
+        name: Exit if PR is not mergeable
+        run: exit 1
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Build Docker Images
+        run: |
+          set -x
+          docker compose build --build-arg install_groups="main,all_ds,dev" --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
+      #   with:
+      #     token: ${{ secrets.CODECOV_TOKEN }}
+      - name: Store Test Results
+        uses: actions/upload-artifact@v4
+        with:
+          name: backend-test-results
+          path: /tmp/test-results
+      - name: Store Coverage Results
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: coverage.xml
+
+  frontend-lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - if: github.event.pull_request.mergeable == 'false'
+        name: Exit if PR is not mergeable
+        run: exit 1
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: |
+          npm install --global --force yarn@$YARN_VERSION
+          yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
+      - name: Run Lint
+        run: yarn lint:ci
+      - name: Store Test Results
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-test-results
+          path: /tmp/test-results
+
+  frontend-unit-tests:
+    runs-on: ubuntu-22.04
+    needs: frontend-lint
+    steps:
+      - if: github.event.pull_request.mergeable == 'false'
+        name: Exit if PR is not mergeable
+        run: exit 1
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: |
+          npm install --global --force yarn@$YARN_VERSION
+          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/compose.cypress.yaml
+      COMPOSE_PROJECT_NAME: cypress
+      CYPRESS_INSTALL_BINARY: 0
+      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+      # PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      # CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+      # CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+    steps:
+      - if: github.event.pull_request.mergeable == 'false'
+        name: Exit if PR is not mergeable
+        run: exit 1
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: actions/setup-node@v4
+        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@$YARN_VERSION
+          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@v4
+        with:
+          name: coverage
+          path: coverage

.github/workflows/periodic-snapshot.yml

@@ -0,0 +1,86 @@
+name: Periodic Snapshot
+
+on:
+  schedule:
+    - cron: '10 0 1 * *'  # 10 minutes after midnight on the first day of every month
+  workflow_dispatch:
+    inputs:
+      bump:
+        description: 'Bump the last digit of the version'
+        required: false
+        type: boolean
+      version:
+        description: 'Specific version to set'
+        required: false
+        default: ''
+
+env:
+  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+permissions:
+  actions: write
+  contents: write
+
+jobs:
+  bump-version-and-tag:
+    runs-on: ubuntu-latest
+    if: github.ref_name == github.event.repository.default_branch
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ssh-key: ${{ secrets.ACTION_PUSH_KEY }}
+
+      - run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email '41898282+github-actions[bot]@users.noreply.github.com'
+
+          # Function to bump the version
+          bump_version() {
+            local version="$1"
+            local IFS=.
+            read -r major minor patch <<< "$version"
+            patch=$((patch + 1))
+            echo "$major.$minor.$patch-dev"
+          }
+
+          # Determine the new version tag
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            BUMP_INPUT="${{ github.event.inputs.bump }}"
+            SPECIFIC_VERSION="${{ github.event.inputs.version }}"
+
+            # Check if both bump and specific version are provided
+            if [ "$BUMP_INPUT" = "true" ] && [ -n "$SPECIFIC_VERSION" ]; then
+              echo "::error::Error: Cannot specify both bump and specific version."
+              exit 1
+            fi
+
+            if [ -n "$SPECIFIC_VERSION" ]; then
+              TAG_NAME="$SPECIFIC_VERSION-dev"
+            elif [ "$BUMP_INPUT" = "true" ]; then
+              CURRENT_VERSION=$(grep '"version":' package.json | awk -F\" '{print $4}')
+              TAG_NAME=$(bump_version "$CURRENT_VERSION")
+            else
+              echo "No version bump or specific version provided for manual dispatch."
+              exit 1
+            fi
+          else
+            TAG_NAME="$(date +%y.%m).0-dev"
+          fi
+
+          echo "New version tag: $TAG_NAME"
+
+          # Update version in files
+          gawk -i inplace -F: -v q=\" -v tag=${TAG_NAME} '/^  "version": / { print $1 FS, q tag q ","; next} { print }' package.json
+          gawk -i inplace -F= -v q=\" -v tag=${TAG_NAME} '/^__version__ =/ { print $1 FS, q tag q; next} { print }' redash/__init__.py
+          gawk -i inplace -F= -v q=\" -v tag=${TAG_NAME} '/^version =/ { print $1 FS, q tag q; next} { print }' pyproject.toml
+
+          git add package.json redash/__init__.py pyproject.toml
+          git commit -m "Snapshot: ${TAG_NAME}"
+          git tag ${TAG_NAME}
+          git push --atomic origin master refs/tags/${TAG_NAME}
+
+          # Run the 'preview-image' workflow if run this workflow manually
+          # For more information, please see the: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
+          if [ "$BUMP_INPUT" = "true" ] || [ -n "$SPECIFIC_VERSION" ]; then
+            gh workflow run preview-image.yml --ref $TAG_NAME
+          fi

.github/workflows/preview-image.yml

@@ -0,0 +1,185 @@
+name: Preview Image
+on:
+  push:
+    tags:
+      - '*-dev'
+  workflow_dispatch:
+    inputs:
+      dockerRepository:
+        description: 'Docker repository'
+        required: true
+        default: 'preview'
+        type: choice
+        options:
+          - preview
+          - redash
+
+env:
+  NODE_VERSION: 18
+
+jobs:
+  build-skip-check:
+    runs-on: ubuntu-22.04
+    outputs:
+      skip: ${{ steps.skip-check.outputs.skip }}
+    steps:
+      - name: Skip?
+        id: skip-check
+        run: |
+          if [[ "${{ vars.DOCKER_USER }}" == '' ]]; then
+            echo 'Docker user is empty. Skipping build+push'
+            echo skip=true >> "$GITHUB_OUTPUT"
+          elif [[ "${{ secrets.DOCKER_PASS }}" == '' ]]; then
+            echo 'Docker password is empty. Skipping build+push'
+            echo skip=true >> "$GITHUB_OUTPUT"
+          elif [[ "${{ vars.DOCKER_REPOSITORY }}" == '' ]]; then
+            echo 'Docker repository is empty. Skipping build+push'
+            echo skip=true >> "$GITHUB_OUTPUT"
+          else
+            echo 'Docker user and password are set and branch is `master`.'
+            echo 'Building + pushing `preview` image.'
+            echo skip=false >> "$GITHUB_OUTPUT"
+          fi
+
+  build-docker-image:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        arch:
+          - amd64
+          - arm64
+        include:
+          - arch: amd64
+            os: ubuntu-22.04
+          - arch: arm64
+            os: ubuntu-22.04-arm
+    outputs:
+      VERSION_TAG: ${{ steps.version.outputs.VERSION_TAG }}
+    needs:
+      - build-skip-check
+    if: needs.build-skip-check.outputs.skip == 'false'
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          ref: ${{ github.event.push.after }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ vars.DOCKER_USER }}
+          password: ${{ secrets.DOCKER_PASS }}
+
+      - name: Install Dependencies
+        env:
+          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
+        run: |
+          npm install --global --force yarn@1.22.22
+          yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
+
+      - name: Set version
+        id: version
+        run: |
+          set -x
+          .ci/update_version
+          VERSION_TAG=$(jq -r .version package.json)
+          echo "VERSION_TAG=$VERSION_TAG" >> "$GITHUB_OUTPUT"
+
+      - name: Build and push preview image to Docker Hub
+        id: build-preview
+        uses: docker/build-push-action@v4
+        if: ${{ github.event.inputs.dockerRepository == 'preview' || !github.event.workflow_run }}
+        with:
+          tags: |
+            ${{ vars.DOCKER_REPOSITORY }}/redash
+            ${{ vars.DOCKER_REPOSITORY }}/preview
+          context: .
+          build-args: |
+            test_all_deps=true
+          outputs: type=image,push-by-digest=true,push=true
+          cache-from: type=gha,scope=${{ matrix.arch }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.arch }}
+        env:
+          DOCKER_CONTENT_TRUST: true
+
+      - name: Build and push release image to Docker Hub
+        id: build-release
+        uses: docker/build-push-action@v4
+        if: ${{ github.event.inputs.dockerRepository == 'redash' }}
+        with:
+          tags: |
+            ${{ vars.DOCKER_REPOSITORY }}/redash:${{ steps.version.outputs.VERSION_TAG }}
+          context: .
+          build-args: |
+            test_all_deps=true
+          outputs: type=image,push-by-digest=false,push=true
+          cache-from: type=gha,scope=${{ matrix.arch }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.arch }}
+        env:
+          DOCKER_CONTENT_TRUST: true
+
+      - name: "Failure: output container logs to console"
+        if: failure()
+        run: docker compose logs
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          if [[ "${{ github.event.inputs.dockerRepository }}" == 'preview' || !github.event.workflow_run ]]; then
+            digest="${{ steps.build-preview.outputs.digest}}"
+          else
+            digest="${{ steps.build-release.outputs.digest}}"
+          fi
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ matrix.arch }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+
+  merge-docker-image:
+    runs-on: ubuntu-22.04
+    needs: build-docker-image
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ vars.DOCKER_USER }}
+          password: ${{ secrets.DOCKER_PASS }}
+
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Create and push manifest for the preview image
+        if: ${{ github.event.inputs.dockerRepository == 'preview' || !github.event.workflow_run }}
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create -t ${{ vars.DOCKER_REPOSITORY }}/redash:preview \
+            $(printf '${{ vars.DOCKER_REPOSITORY }}/redash:preview@sha256:%s ' *)
+          docker buildx imagetools create -t ${{ vars.DOCKER_REPOSITORY }}/preview:${{ needs.build-docker-image.outputs.VERSION_TAG }} \
+            $(printf '${{ vars.DOCKER_REPOSITORY }}/preview:${{ needs.build-docker-image.outputs.VERSION_TAG }}@sha256:%s ' *)
+
+      - name: Create and push manifest for the release image
+        if: ${{ github.event.inputs.dockerRepository == 'redash' }}
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create -t ${{ vars.DOCKER_REPOSITORY }}/redash:${{ needs.build-docker-image.outputs.VERSION_TAG }} \
+            $(printf '${{ vars.DOCKER_REPOSITORY }}/redash:${{ needs.build-docker-image.outputs.VERSION_TAG }}@sha256:%s ' *)

.github/workflows/restyled.yml

@@ -0,0 +1,36 @@
+name: Restyled
+
+on:
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  restyled:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - uses: restyled-io/actions/setup@v4
+      - id: restyler
+        uses: restyled-io/actions/run@v4
+        with:
+          fail-on-differences: true
+
+      - if: |
+          !cancelled() &&
+          steps.restyler.outputs.success == 'true' &&
+          github.event.pull_request.head.repo.full_name == github.repository
+        uses: peter-evans/create-pull-request@v6
+        with:
+          base: ${{ steps.restyler.outputs.restyled-base }}
+          branch: ${{ steps.restyler.outputs.restyled-head }}
+          title: ${{ steps.restyler.outputs.restyled-title }}
+          body: ${{ steps.restyler.outputs.restyled-body }}
+          labels: "restyled"
+          reviewers: ${{ github.event.pull_request.user.login }}
+          delete-branch: true

.gitignore

@@ -5,17 +5,19 @@ venv/
 .coveralls.yml
 .idea
 *.pyc
+.nyc_output
+coverage
 .coverage
 coverage.xml
 client/dist
 .DS_Store
-celerybeat-schedule*
 .#*
 \#*#
 *~
 _build
 .vscode
 .env
+.tool-versions
 
 dump.rdb
 

.npmrc

@@ -0,0 +1 @@
+engine-strict = true

.nvmrc

@@ -0,0 +1 @@
+v18

.pre-commit-config.yaml

@@ -0,0 +1,10 @@
+repos:
+  - repo: https://github.com/psf/black
+    rev: 23.1.0
+    hooks:
+      - id: black
+        language_version: python3
+  - repo: https://github.com/charliermarsh/ruff-pre-commit
+    rev: "v0.0.287"
+    hooks:
+      - id: ruff

.restyled.yaml

@@ -38,7 +38,9 @@ request_review: author
 #
 # These can be used to tell other automation to avoid our PRs.
 #
-labels: ["Skip CI"]
+labels:
+  - restyled
+  - "Skip CI"
 
 # Labels to ignore
 #
@@ -50,12 +52,17 @@ labels: ["Skip CI"]
 # Restylers to run, and how
 restylers:
   - name: black
+    image: restyled/restyler-black:v24.4.2
     include:
       - redash
       - tests
       - migrations/versions
   - name: prettier
+    image: restyled/restyler-prettier:v3.3.2-2
+    command:
+      - prettier
+      - --write
     include:
       - client/app/**/*.js
       - client/app/**/*.jsx
-      - client/cypress/**/*.js
+      - client/cypress/**/*.js

.yarn/.gitignore

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

CHANGELOG.md

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

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:
+:star: If you're already here and love the project, please make sure to press the Star button. :star:
-
-- [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:
-
----
-
-
 ## 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.
+**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.
-- Include screenshots and animated GIFs in your pull request whenever possible.
+
+#### 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,56 +1,119 @@
-FROM node:12 as frontend-builder
+FROM node:18-bookworm AS frontend-builder
+
+RUN npm install --global --force yarn@1.22.22
+
+# Controls whether to build the frontend assets
+ARG skip_frontend_build
+
+ENV CYPRESS_INSTALL_BINARY=0
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
+
+RUN useradd -m -d /frontend redash
+USER redash
 
 WORKDIR /frontend
-COPY package.json package-lock.json /frontend/
+COPY --chown=redash package.json yarn.lock .yarnrc /frontend/
-RUN npm install
+COPY --chown=redash viz-lib /frontend/viz-lib
+COPY --chown=redash scripts /frontend/scripts
 
-COPY client /frontend/client
+# Controls whether to instrument code for coverage information
-COPY webpack.config.js /frontend/
+ARG code_coverage
-RUN npm run build
+ENV BABEL_ENV=${code_coverage:+test}
 
-FROM python:3.7-slim
+# Avoid issues caused by lags in disk and network I/O speeds when working on top of QEMU emulation for multi-platform image building.
+RUN yarn config set network-timeout 300000
+
+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 <<EOF
+  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
+EOF
+
+FROM python:3.10-slim-bookworm
 
 EXPOSE 5000
 
-# Controls whether to install extra dependencies needed for all data sources.
-ARG skip_ds_deps
-
 RUN useradd --create-home redash
 
 # Ubuntu packages
 RUN apt-get update && \
-  apt-get install -y \
+  apt-get install -y --no-install-recommends \
-    curl \
+  pkg-config \
-    gnupg \
+  curl \
-    build-essential \
+  gnupg \
-    pwgen \
+  build-essential \
-    libffi-dev \
+  pwgen \
-    sudo \
+  libffi-dev \
-    git-core \
+  sudo \
-    wget \
+  git-core \
-    # Postgres client
+  # Kerberos, needed for MS SQL Python driver to compile on arm64
-    libpq-dev \
+  libkrb5-dev \
-    # for SAML
+  # Postgres client
-    xmlsec1 \
+  libpq-dev \
-    # Additional packages required for data sources:
+  # ODBC support:
-    libssl-dev \
+  g++ unixodbc-dev \
-    default-libmysqlclient-dev \
+  # for SAML
-    freetds-dev \
+  xmlsec1 \
-    libsasl2-dev && \
+  # 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 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 <<EOF
+  if [ "$TARGETPLATFORM" = "linux/amd64" ]; then
+    curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor -o /usr/share/keyrings/microsoft-prod.gpg
+    curl https://packages.microsoft.com/config/debian/12/prod.list > /etc/apt/sources.list.d/mssql-release.list
+    apt-get update
+    ACCEPT_EULA=Y apt-get install  -y --no-install-recommends msodbcsql18
+    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/simba
+  fi
+EOF
+
 WORKDIR /app
 
-# We first copy only the requirements file, to avoid rebuilding on every file
+ENV POETRY_VERSION=2.1.4
-# change.
+ENV POETRY_HOME=/etc/poetry
-COPY requirements.txt requirements_bundles.txt requirements_dev.txt requirements_all_ds.txt ./
+ENV POETRY_VIRTUALENVS_CREATE=false
-RUN pip install -r requirements.txt -r requirements_dev.txt
+RUN curl -sSL https://install.python-poetry.org | python3 -
-RUN if [ "x$skip_ds_deps" = "x" ] ; then pip install -r requirements_all_ds.txt ; else echo "Skipping pip install -r requirements_all_ds.txt" ; fi
 
-COPY . /app
+# Avoid crashes, including corrupted cache artifacts, when building multi-platform images with GitHub Actions.
-COPY --from=frontend-builder /frontend/client/dist /app/client/dist
+RUN /etc/poetry/bin/poetry cache clear pypi --all
-RUN chown -R redash /app
+
+COPY pyproject.toml poetry.lock ./
+
+ARG POETRY_OPTIONS="--no-root --no-interaction --no-ansi"
+# for LDAP authentication, install with `ldap3` group
+# disabled by default due to GPL license conflict
+ARG install_groups="main,all_ds,dev"
+RUN /etc/poetry/bin/poetry install --only $install_groups $POETRY_OPTIONS
+
+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,57 +1,75 @@
-.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:
+compose_build: .env
-	docker-compose build
+	COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose build
 
 up:
-	docker-compose up -d --build
+	docker compose up -d redis postgres --remove-orphans
+	docker compose exec -u postgres postgres psql postgres --csv \
+		-1tqc "SELECT table_name FROM information_schema.tables WHERE table_name = 'organizations'" 2> /dev/null \
+		| grep -q "organizations" || make create_database
+	COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose up -d --build --remove-orphans
 
 test_db:
 	@for i in `seq 1 5`; do \
-		if (docker-compose exec postgres sh -c 'psql -U postgres -c "select 1;"' 2>&1 > /dev/null) then break; \
+		if (docker compose exec postgres sh -c 'psql -U postgres -c "select 1;"' 2>&1 > /dev/null) then break; \
 		else echo "postgres initializing..."; sleep 5; fi \
 	done
-	docker-compose exec postgres sh -c 'psql -U postgres -c "drop database if exists tests;" && psql -U postgres -c "create database tests;"'
+	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
+	docker compose run server create_db
 
 clean:
-	docker-compose down && docker-compose rm
+	docker compose down
+	docker compose --project-name cypress down
+	docker compose rm --stop --force
+	docker compose --project-name cypress rm --stop --force
+	docker image rm --force \
+		cypress-server:latest cypress-worker:latest cypress-scheduler:latest \
+		redash-server:latest redash-worker:latest redash-scheduler:latest
+	docker container prune --force
+	docker image prune --force
+	docker volume prune --force
 
 down:
-	docker-compose down
+	docker compose down
 
-bundle:
+.env:
-	docker-compose run server bin/bundle-extensions
+	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
+	docker compose run server tests
 
 lint:
-	./bin/flake8_tests.sh
+	ruff check .
+	black --check . --diff
 
 backend-unit-tests: up test_db
-	docker-compose run --rm --name tests server tests
+	docker compose run --rm --name tests server tests
 
-frontend-unit-tests: bundle
+frontend-unit-tests:
-	npm install
+	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 yarn --frozen-lockfile
-	npm run bundle
+	yarn test
-	npm test
 
-test: lint backend-unit-tests frontend-unit-tests
+test: backend-unit-tests frontend-unit-tests lint
 
-build: bundle
+build:
-	npm run build
+	yarn build
 
-watch: bundle
+watch:
-	npm run watch
+	yarn watch
 
-start: bundle
+start:
-	npm run start
+	yarn start
 
 redis-cli:
-	docker-compose run --rm redis redis-cli -h redis
+	docker compose run --rm redis redis-cli -h redis
 
 bash:
-	docker-compose run --rm server bash
+	docker compose run --rm server bash

README.md

@@ -3,41 +3,113 @@
 </p>
 
 [![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)
+[![GitHub Build](https://github.com/getredash/redash/actions/workflows/ci.yml/badge.svg)](https://github.com/getredash/redash/actions)
-[![Build Status](https://circleci.com/gh/getredash/redash.png?style=shield&circle-token=8a695aa5ec2cbfa89b48c275aea298318016f040)](https://circleci.com/gh/getredash/redash/tree/master)
 
-**_Redash_** is our take on freeing the data within our company in a way that will better fit our culture and usage patterns.
+Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users leverage Redash to explore, query, visualize, and share data from any data sources. Their work in turn enables anybody in their organization to use the data. Every day, millions of users at thousands of organizations around the world use Redash to develop insights and make data-driven decisions.
 
-Prior to **_Redash_**, we tried to use traditional BI suites and discovered a set of bloated, technically challenged and slow tools/flows. What we were looking for was a more hacker'ish way to look at data, so we built one.
+Redash features:
 
-**_Redash_** was built to allow fast and easy access to billions of records, that we process and collect using Amazon Redshift ("petabyte scale data warehouse" that "speaks" PostgreSQL).
+1. **Browser-based**: Everything in your browser, with a shareable URL.
-Today **_Redash_** has support for querying multiple databases, including: Redshift, Google BigQuery, PostgreSQL, MySQL, Graphite, Presto, Google Spreadsheets, Cloudera Impala, Hive and custom scripts.
+2. **Ease-of-use**: Become immediately productive with data without the need to master complex software.
-
+3. **Query editor**: Quickly compose SQL and NoSQL queries with a schema browser and auto-complete.
-**_Redash_** consists of two parts:
+4. **Visualization and dashboards**: Create [beautiful visualizations](https://redash.io/help/user-guide/visualizations/visualization-types) with drag and drop, and combine them into a single dashboard.
-
+5. **Sharing**: Collaborate easily by sharing visualizations and their associated queries, enabling peer review of reports and queries.
-1. **Query Editor**: think of [JS Fiddle](https://jsfiddle.net) for SQL queries. It's your way to share data in the organization in an open way, by sharing both the dataset and the query that generated it. This way everyone can peer review not only the resulting dataset but also the process that generated it. Also it's possible to fork it and generate new datasets and reach new insights.
+6. **Schedule refreshes**: Automatically update your charts and dashboards at regular intervals you define.
-2. **Visualizations and Dashboards**: once you have a dataset, you can create different visualizations out of it, and then combine several visualizations into a single dashboard. Currently Redash supports charts, pivot table, cohorts and [more](https://redash.io/help/user-guide/visualizations/visualization-types).
+7. **Alerts**: Define conditions and be alerted instantly when your data changes.
+8. **REST API**: Everything that can be done in the UI is also available through REST API.
+9. **Broad support for data sources**: Extensible data source API with native support for a long list of common databases and platforms.
 
 <img src="https://raw.githubusercontent.com/getredash/website/8e820cd02c73a8ddf4f946a9d293c54fd3fb08b9/website/_assets/images/redash-anim.gif" width="80%"/>
 
 ## Getting Started
 
-* [Setting up Redash instance](https://redash.io/help/open-source/setup) (includes links to ready made AWS/GCE images).
+* [Setting up Redash instance](https://redash.io/help/open-source/setup) (includes links to ready-made AWS/GCE images).
 * [Documentation](https://redash.io/help/).
 
 ## Supported Data Sources
 
-Redash supports more than 35 [data sources](https://redash.io/help/data-sources/supported-data-sources). 
+Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help/data-sources/supported-data-sources). It can also be extended to support more. Below is a list of built-in sources:
+
+- Amazon Athena
+- Amazon CloudWatch / Insights
+- Amazon DynamoDB
+- Amazon Redshift
+- ArangoDB
+- Axibase Time Series Database
+- Apache Cassandra
+- ClickHouse
+- CockroachDB
+- Couchbase
+- CSV
+- Databricks
+- DB2 by IBM
+- Dgraph
+- Apache Drill
+- Apache Druid
+- e6data
+- Eccenca Corporate Memory
+- Elasticsearch
+- Exasol
+- Microsoft Excel
+- Firebolt
+- Databend
+- Google Analytics
+- Google BigQuery
+- Google Spreadsheets
+- Graphite
+- Greenplum
+- Apache Hive
+- Apache Impala
+- InfluxDB
+- InfluxDBv2
+- 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
+- Python
+- Qubole
+- Rockset
+- RisingWave
+- Salesforce
+- ScyllaDB
+- Shell Scripts
+- Snowflake
+- SPARQL
+- SQLite
+- TiDB
+- Tinybird
+- TreasureData
+- Trino
+- Uptycs
+- Vertica
+- Yandex AppMetrrica
+- Yandex Metrica
 
 ## 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,117 +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
-
-from importlib_metadata import entry_points
-from importlib_resources import contents, is_resource, path
-
-# 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 resource_isdir(module, resource):
-    """Whether a given resource is a directory in the given module
-
-    https://importlib-resources.readthedocs.io/en/latest/migration.html#pkg-resources-resource-isdir
-    """
-    try:
-        return resource in contents(module) and not is_resource(module, resource)
-    except (ImportError, TypeError):
-        # module isn't a package, so can't have a subdirectory/-package
-        return False
-
-
-def entry_point_module(entry_point):
-    """Returns the dotted module path for the given entry point"""
-    return entry_point.pattern.match(entry_point.value).group("module")
-
-
-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 entry_points().get("redash.bundles", []):
-        logger.info('Loading Redash bundle "%s".', entry_point.name)
-        module = entry_point_module(entry_point)
-        # Try to get a list of bundle files
-        if not resource_isdir(module, BUNDLE_DIRECTORY):
-            logger.error(
-                'Redash bundle directory "%s" could not be found.', entry_point.name
-            )
-            continue
-        with path(module, BUNDLE_DIRECTORY) as bundle_dir:
-            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

@@ -18,8 +18,21 @@ worker() {
 
   export WORKERS_COUNT=${WORKERS_COUNT:-2}
   export QUEUES=${QUEUES:-}
-  
+
-  supervisord -c worker.conf
+  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() {
@@ -32,17 +45,14 @@ 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 --limit-request-line ${REDASH_GUNICORN_LIMIT_REQUEST_LINE:-0}
 }
 
 create_db() {
   exec /app/manage.py database create_tables
 }
 
-rq_healthcheck() {
-  exec /app/manage.py rq healthcheck
-}
-
 help() {
   echo "Redash Docker."
   echo ""
@@ -54,11 +64,10 @@ help() {
   echo "dev_worker -- start a single RQ worker with code reloading"
   echo "scheduler -- start an rq-scheduler instance"
   echo "dev_scheduler -- start an rq-scheduler instance with code reloading"
-  echo "rq_healthcheck -- runs a RQ healthcheck that verifies that all local workers are active. Useful for Docker's HEALTHCHECK mechanism."
   echo ""
   echo "shell -- open shell"
   echo "dev_server -- start Flask development server with debugger and auto reload"
-  echo "debug -- start Flask development server with remote debugger via ptvsd"
+  echo "debug -- start Flask development server with remote debugger via debugpy"
   echo "create_db -- create database tables"
   echo "manage -- CLI to manage redash"
   echo "tests -- run tests"
@@ -80,6 +89,10 @@ case "$1" in
     shift
     worker
     ;;
+  workers_healthcheck)
+    shift
+    workers_healthcheck
+    ;;
   server)
     shift
     server
@@ -96,9 +109,9 @@ case "$1" in
     shift
     dev_worker
     ;;
-  rq_healthcheck)
+  celery_healthcheck)
     shift
-    rq_healthcheck
+    echo "DEPRECATED: Celery has been replaced with RQ and now performs healthchecks autonomously as part of the 'worker' entrypoint."
     ;;
   dev_server)
     export FLASK_DEBUG=1
@@ -131,4 +144,3 @@ case "$1" in
     exec "$@"
     ;;
 esac
-

bin/flake8_tests.sh

@@ -1,9 +0,0 @@
-#!/bin/sh
-
-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      
-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/pre_compile

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

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']
+github_token = os.environ["GITHUB_TOKEN"]
-auth = (github_token, 'x-oauth-basic')
+auth = (github_token, "x-oauth-basic")
-repo = 'getredash/redash'
+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,
+        "tag_name": tag,
-        'name': "{} - RC".format(version),
+        "name": "{} - RC".format(version),
-        'target_commitish': commit_sha,
+        "target_commitish": commit_sha,
-        'prerelease': True
+        "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}', '')
+    upload_url = release["upload_url"].replace("{?name,label}", "")
-    filename = filepath.split('/')[-1]
+    filename = filepath.split("/")[-1]
 
     with open(filepath) as file_content:
-        headers = {'Content-Type': 'application/gzip'}
+        headers = {"Content-Type": "application/gzip"}
-        response = requests.post(upload_url, file_content, params={'name': filename}, headers=headers, auth=auth, verify=False)
+        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']:
+    for asset in release["assets"]:
-        response = _github_request('delete', asset['url'])
+        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,242 +0,0 @@
-#!/usr/bin/env python3
-import urllib
-import argparse
-import os
-import subprocess
-import sys
-from collections import namedtuple
-from fnmatch import fnmatch
-
-import requests
-
-try:
-    import semver
-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)
-
-
-def run(cmd, cwd=None):
-    if not cwd:
-        cwd = REDASH_HOME
-
-    return subprocess.check_output(cmd, cwd=cwd, shell=True, stderr=subprocess.STDOUT)
-
-
-def confirm(question):
-    reply = str(input(question + ' (y/n): ')).lower().strip()
-
-    if reply[0] == 'y':
-        return True
-    if reply[0] == 'n':
-        return False
-    else:
-        return confirm("Please use 'y' or 'n'")
-
-
-def version_path(version_name):
-    return "{}/{}".format(REDASH_HOME, version_name)
-
-END_CODE = '\033[0m'
-
-
-def colored_string(text, color):
-    if sys.stdout.isatty():
-        return "{}{}{}".format(color, text, END_CODE)
-    else:
-        return text
-
-
-def h1(text):
-    print(colored_string(text, '\033[4m\033[1m'))
-
-
-def green(text):
-    print(colored_string(text, '\033[92m'))
-
-
-def red(text):
-    print(colored_string(text, '\033[91m'))
-
-
-class Release(namedtuple('Release', ('version', 'download_url', 'filename', 'description'))):
-    def v1_or_newer(self):
-        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', '')
-
-
-def get_latest_release_from_ci():
-    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', '')
-
-    release = Release(version, tarball_asset['url'], filename, '')
-
-    return release
-
-
-def get_release(channel):
-    if channel == 'ci':
-        return get_latest_release_from_ci()
-
-    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'])
-
-    return release
-
-
-def link_to_current(version_name):
-    green("Linking to current version...")
-    run('ln -nfs {} {}'.format(version_path(version_name), CURRENT_VERSION_PATH))
-
-
-def restart_services():
-    # We're doing this instead of simple 'supervisorctl restart all' because
-    # otherwise it won't notice that /opt/redash/current pointing at a different
-    # directory.
-    green("Restarting...")
-    try:
-        run('sudo /etc/init.d/redash_supervisord restart')
-    except subprocess.CalledProcessError as e:
-        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))
-
-    install_requirements = False
-
-    try:
-        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))
-
-
-def apply_migrations(release):
-    green("Running migrations (if needed)...")
-    if not release.v1_or_newer():
-        return apply_migrations_pre_v1(release.version_name)
-
-    run("sudo -u redash bin/run ./manage.py db upgrade", cwd=version_path(release.version_name))
-
-
-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')])
-
-    return [m for m in new_migrations if m not in current_migrations]
-
-
-def apply_migrations_pre_v1(version_name):
-    new_migrations = find_migrations(version_name)
-
-    if new_migrations:
-        green("New migrations to run: ")
-        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))
-
-
-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))
-    green("Unpacking to: {}...".format(directory_name))
-    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))
-
-    green("Linking .env file...")
-    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.', '')
-
-
-def verify_minimum_version():
-    green("Current version: " + current_version())
-    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)
-
-
-def show_description_and_confirm(description):
-    if description:
-        print(description)
-
-        if not confirm("Continue with upgrade?"):
-            red("Cancelling upgrade.")
-            exit(1)
-
-
-def verify_newer_version(release):
-    if not release.is_newer(current_version()):
-        red("The found release is not newer than your current deployed release ({}).".format(current_version()))
-        if not confirm("Continue with upgrade?"):
-            red("Cancelling upgrade.")
-            exit(1)
-
-
-def deploy_release(channel):
-    h1("Starting Redash upgrade:")
-
-    release = get_release(channel)
-    green("Found version: {}".format(release.version))
-
-    if release.v1_or_newer():
-        verify_minimum_version()
-
-    verify_newer_version(release)
-    show_description_and_confirm(release.description)
-
-    try:
-        download_and_unpack(release)
-        update_requirements(release.version_name)
-        apply_migrations(release)
-        link_to_current(release.version_name)
-        restart_services()
-        green("Done! Enjoy.")
-    except subprocess.CalledProcessError as e:
-        red("Failed running: {}".format(e.cmd))
-        red("Exit status: {}\nOutput:\n{}".format(e.returncode, e.output))
-
-
-if __name__ == '__main__':
-    parser = argparse.ArgumentParser()
-    parser.add_argument("--channel", help="The channel to get release from (default: stable).", default='stable')
-    args = parser.parse_args()
-
-    deploy_release(args.channel)

client/.babelrc

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

client/.eslintrc.js

@@ -1,17 +1,71 @@
 module.exports = {
   root: true,
-  extends: ["react-app", "plugin:compat/recommended", "prettier"],
+  parser: "@typescript-eslint/parser",
-  plugins: ["jest", "compat", "no-only-tests"],
+  extends: [
+    "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", "jsx-a11y"],
   settings: {
-    "import/resolver": "webpack"
+    "import/resolver": "webpack",
   },
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
-    "jsx-a11y/anchor-is-valid": "off",
+    "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",
+      {
+        paths: [
+          {
+            name: "antd",
+            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+          },
+          {
+            name: "antd/lib",
+            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+          },
+        ],
+      },
+    ],
+  },
+  overrides: [
+    {
+      // Only run typescript-eslint on TS files
+      files: ["*.ts", "*.tsx", ".*.ts", ".*.tsx"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+      rules: {
+        // Do not require functions (especially react components) to have explicit returns
+        "@typescript-eslint/explicit-function-return-type": "off",
+        // Do not require to type every import from a JS file to speed up development
+        "@typescript-eslint/no-explicit-any": "off",
+        // Do not complain about useless contructors in declaration files
+        "no-useless-constructor": "off",
+        "@typescript-eslint/no-useless-constructor": "error",
+        // Many API fields and generated types use camelcase
+        "@typescript-eslint/camelcase": "off",
+      },
+    },
+  ],
 };

client/app/assets/css/login.css

@@ -15,7 +15,7 @@ body {
   display: table;
   width: 100%;
   padding: 10px;
-  height: calc(100vh - 116px);
+  height: calc(100% - 116px);
 }
 
 @media (min-width: 992px) {

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

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

client/app/assets/less/ant.less

@@ -1,42 +1,43 @@
-@import '~antd/lib/style/core/iconfont';
+@import "~antd/lib/style/core/iconfont";
-@import '~antd/lib/style/core/motion';
+@import "~antd/lib/style/core/motion";
-@import '~antd/lib/alert/style/index';
+@import "~antd/lib/alert/style/index";
-@import '~antd/lib/input/style/index';
+@import "~antd/lib/input/style/index";
-@import '~antd/lib/input-number/style/index';
+@import "~antd/lib/input-number/style/index";
-@import '~antd/lib/date-picker/style/index';
+@import "~antd/lib/date-picker/style/index";
-@import '~antd/lib/modal/style/index';
+@import "~antd/lib/modal/style/index";
-@import '~antd/lib/tooltip/style/index';
+@import "~antd/lib/tooltip/style/index";
-@import '~antd/lib/select/style/index';
+@import "~antd/lib/select/style/index";
-@import '~antd/lib/checkbox/style/index';
+@import "~antd/lib/checkbox/style/index";
-@import '~antd/lib/upload/style/index';
+@import "~antd/lib/upload/style/index";
-@import '~antd/lib/form/style/index';
+@import "~antd/lib/form/style/index";
-@import '~antd/lib/button/style/index';
+@import "~antd/lib/button/style/index";
-@import '~antd/lib/radio/style/index';
+@import "~antd/lib/radio/style/index";
-@import '~antd/lib/time-picker/style/index';
+@import "~antd/lib/time-picker/style/index";
-@import '~antd/lib/pagination/style/index';
+@import "~antd/lib/pagination/style/index";
-@import '~antd/lib/table/style/index';
+@import "~antd/lib/table/style/index";
-@import '~antd/lib/popover/style/index';
+@import "~antd/lib/popover/style/index";
-@import '~antd/lib/icon/style/index';
+@import "~antd/lib/tag/style/index";
-@import '~antd/lib/tag/style/index';
+@import "~antd/lib/grid/style/index";
-@import '~antd/lib/grid/style/index';
+@import "~antd/lib/switch/style/index";
-@import '~antd/lib/switch/style/index';
+@import "~antd/lib/empty/style/index";
-@import '~antd/lib/empty/style/index';
+@import "~antd/lib/drawer/style/index";
-@import '~antd/lib/drawer/style/index';
+@import "~antd/lib/card/style/index";
-@import '~antd/lib/card/style/index';
+@import "~antd/lib/steps/style/index";
-@import '~antd/lib/steps/style/index';
+@import "~antd/lib/divider/style/index";
-@import '~antd/lib/divider/style/index';
+@import "~antd/lib/dropdown/style/index";
-@import '~antd/lib/dropdown/style/index';
+@import "~antd/lib/menu/style/index";
-@import '~antd/lib/menu/style/index';
+@import "~antd/lib/list/style/index";
-@import '~antd/lib/list/style/index';
 @import "~antd/lib/badge/style/index";
 @import "~antd/lib/card/style/index";
 @import "~antd/lib/spin/style/index";
+@import "~antd/lib/skeleton/style/index";
 @import "~antd/lib/tabs/style/index";
 @import "~antd/lib/notification/style/index";
 @import "~antd/lib/collapse/style/index";
 @import "~antd/lib/progress/style/index";
 @import "~antd/lib/typography/style/index";
-@import 'inc/ant-variables';
+@import "~antd/lib/descriptions/style/index";
+@import "inc/ant-variables";
 
 // Increase z-indexes to avoid conflicts with some other libraries (e.g. Plotly)
 @zindex-modal: 2000;
@@ -224,6 +225,16 @@
     }
   }
 
+  &-tbody > tr&-row {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      & > td {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+
   // Custom styles
 
   &-headerless &-tbody > tr:first-child > td {
@@ -237,11 +248,11 @@
   &-item {
     // custom rule
     &.selected {
-      background-color: #F6F8F9;
+      background-color: #f6f8f9;
     }
 
     &.disabled {
-      background-color: fade(#F6F8F9, 40%);
+      background-color: fade(#f6f8f9, 40%);
 
       & > * {
         opacity: 0.4;
@@ -367,7 +378,7 @@
     top: auto !important;
     bottom: 8px;
 
-     // makes the icon white instead of see-through
+    // makes the icon white instead of see-through
     & svg {
       background: white;
       border-radius: 50%;
@@ -390,13 +401,36 @@
         left: 0;
       }
     }
+
+    &:focus,
+    &:focus-within {
+      color: @menu-highlight-color;
+    }
+  }
+}
+
+.@{dropdown-prefix-cls}-menu-item {
+  &:focus,
+  &:focus-within {
+    background-color: @item-hover-bg;
   }
 }
 
 // overrides for checkbox
-@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox';
+@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox";
 
 .@{checkbox-prefix-cls}-wrapper + span,
 .@{checkbox-prefix-cls} + span {
   padding-right: 0;
 }
+
+// make sure Multiple select has room for icons
+.@{select-prefix-cls}-multiple {
+  &.@{select-prefix-cls}-show-arrow,
+  &.@{select-prefix-cls}-show-search,
+  &.@{select-prefix-cls}-loading {
+    .@{select-prefix-cls}-selector {
+      padding-right: 30px;
+    }
+  }
+}

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

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

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

@@ -1,8 +1,8 @@
 /* --------------------------------------------------------
     Colors
 -----------------------------------------------------------*/
-@lightblue:                             #03A9F4;
+@lightblue: #03a9f4;
-@primary-color:                        #2196F3;
+@primary-color: #2196f3;
 
 @redash-gray: rgba(102, 136, 153, 1);
 @redash-orange: rgba(255, 120, 100, 1);
@@ -12,41 +12,31 @@
 /* --------------------------------------------------------
     Font
 -----------------------------------------------------------*/
-@redash-font:                          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+@redash-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
-@font-family-no-number:                @redash-font;
+  sans-serif;
-@font-family:                          @redash-font;
+@font-family-no-number: @redash-font;
-@code-family:                          @redash-font;
+@font-family: @redash-font;
-@font-size-base:                       13px;
+@code-family: @redash-font;
-
+@font-size-base: 13px;
 
 /* --------------------------------------------------------
     Borders
 -----------------------------------------------------------*/
-@border-color-split:                   #f0f0f0;
+@border-color-split: #f0f0f0;
-
 
 /* --------------------------------------------------------
     Typograpgy
 -----------------------------------------------------------*/
-@text-color:                           #595959;
+@text-color: #595959;
-
 
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
-@input-height-base:                    35px;
+@input-height-base: 35px;
-@input-color:                          #595959;
+@input-color: #595959;
-@input-color-placeholder:               #b4b4b4;
+@input-color-placeholder: #b4b4b4;
 @border-radius-base: 2px;
-@border-color-base:                    #E8E8E8;
+@border-color-base: #e8e8e8;
-
-
-/* --------------------------------------------------------
-    Button
------------------------------------------------------------*/
-@btn-danger-bg: fade(@redash-gray, 10%);
-@btn-danger-border: fade(@redash-gray, 15%);
-
 
 /* --------------------------------------------------------
     Pagination
@@ -55,14 +45,13 @@
 @pagination-font-family: @redash-font;
 @pagination-font-weight-active: normal;
 
-@pagination-bg:                         fade(@redash-gray, 15%);
+@pagination-bg: fade(@redash-gray, 15%);
-@pagination-color:                      #7E7E7E;
+@pagination-color: #7e7e7e;
-@pagination-active-bg:                  @lightblue;
+@pagination-active-bg: @lightblue;
-@pagination-active-color:               #FFF;
+@pagination-active-color: #fff;
-@pagination-disabled-bg:                fade(@redash-gray, 15%);
+@pagination-disabled-bg: fade(@redash-gray, 15%);
-@pagination-hover-color:                #333;
+@pagination-hover-color: #333;
-@pagination-hover-bg:                   fade(@redash-gray, 25%);
+@pagination-hover-bg: fade(@redash-gray, 25%);
-
 
 /* --------------------------------------------------------
     Table

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

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

client/app/assets/less/inc/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 {
+  .editable {
-  display: inline-block;
+    display: inline-block;
-  cursor: pointer;
+    cursor: pointer;
-}
 
-.edit-in-place span.editable:hover {
+    &:hover {
-  background: @redash-yellow;
+      background: @redash-yellow;
-  border-radius: @redash-radius;
+      border-radius: @redash-radius;
-}
+    }
+  }
 
-.edit-in-place.active input,
+  &.active input,
-.edit-in-place.active textarea {
+  &.active textarea {
-  display: inline-block;
+    display: inline-block;
-}
+  }
-
-.edit-in-place {
-  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){
+.margin (@label, @size: 1, @key:1) when (@size =< 30) {
-    .m-@{key} {
+  .m-@{key} {
-        margin: @size !important;
+    margin: @size !important;
-    }
+  }
-    
+
-    .m-t-@{key} {
+  .m-t-@{key} {
-        margin-top: @size !important;
+    margin-top: @size !important;
-    }
+  }
-    
+
-    .m-b-@{key} {
+  .m-b-@{key} {
-        margin-bottom: @size !important;
+    margin-bottom: @size !important;
-    }
+  }
-    
+
-    .m-l-@{key} {
+  .m-l-@{key} {
-        margin-left: @size !important;
+    margin-left: @size !important;
-    }
+  }
-    
+
-    .m-r-@{key} {
+  .m-r-@{key} {
-        margin-right: @size !important;
+    margin-right: @size !important;
-    }
+  }
-    
+
-    .margin(@label - 5; @size + 5; @key + 5);
+  .margin(@label - 5; @size + 5; @key + 5);
 }
 
 .margin(25, 0px, 0);
 
-.m-2{
+.m-2 {
-  margin:2px;
+  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){
+.padding (@label, @size: 1, @key:1) when (@size =< 30) {
-    .p-@{key} {
+  .p-@{key} {
-        padding: @size !important;
+    padding: @size !important;
-    }
+  }
-    
+
-    .p-t-@{key} {
+  .p-t-@{key} {
-        padding-top: @size !important;
+    padding-top: @size !important;
-    }
+  }
-    
+
-    .p-b-@{key} {
+  .p-b-@{key} {
-        padding-bottom: @size !important;
+    padding-bottom: @size !important;
-    }
+  }
-    
+
-    .p-l-@{key} {
+  .p-l-@{key} {
-        padding-left: @size !important;
+    padding-left: @size !important;
-    }
+  }
-    
+
-    .p-r-@{key} {
+  .p-r-@{key} {
-        padding-right: @size !important; 
+    padding-right: @size !important;
-    }
+  }
-    
+
-    .padding(@label - 5; @size + 5; @key + 5);
+  .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){
+.font-size (@label, @size: 8, @key:10) when (@size =< 20) {
-    .f-@{key} {
+  .f-@{key} {
-        font-size: @size !important;
+    font-size: @size !important;
-    }
+  }
-    
+
-    .font-size(@label - 1; @size + 1; @key + 1);
+  .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-300 {
-.f-400 { font-weight: 400 !important; }
+  font-weight: 300 !important;
-.f-500 { font-weight: 500 !important; }
+}
-.f-700 { font-weight: 700 !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-relative {
-.p-absolute { position: absolute !important; }
+  position: relative !important;
-.p-fixed { position: fixed !important; }
+}
-.p-static { position: static !important; }
+.p-absolute {
-
+  position: absolute !important;
+}
+.p-fixed {
+  position: fixed !important;
+}
+.p-static {
+  position: static !important;
+}
 
 /* --------------------------------------------------------
     Overflow
 -----------------------------------------------------------*/
-.o-hidden { overflow: hidden !important; }
+.o-hidden {
-.o-visible { overflow: visible !important; }
+  overflow: hidden !important;
-.o-auto { overflow: auto !important; }
+}
-
+.o-visible {
+  overflow: visible !important;
+}
+.o-auto {
+  overflow: auto !important;
+}
 
 /* --------------------------------------------------------
     Display
 -----------------------------------------------------------*/
-.di-block { display: inline-block !important; } 
+.di-block {
-.d-block { display: 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) {
+.for(@array);
-    @name:  extract(@value, 1);
+.-each(@value) {
-    @name2:  extract(@value, 2);
+  @name: extract(@value, 1);
-    @color: extract(@value, 3); 
+  @name2: extract(@value, 2);
-    &.@{name2} {
+  @color: extract(@value, 3);
-        background-color: @color !important;
+  &.@{name2} {
-    }
+    background-color: @color !important;
-    
+  }
-    &.@{name} {
+
-        color: @color !important;
+  &.@{name} {
-    }
+    color: @color !important;
+  }
 }
 
-
 /* --------------------------------------------------------
     Background Colors
 -----------------------------------------------------------*/
-.bg-brand { background-color: @brand-bg; }
+.bg-brand {
-.bg-black-trp { background-color: rgba(0,0,0,0.12) !important; }
+  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-100 {
-.w-50 { width: 50% !important; }
+  width: 100% !important;
-.w-25 { width: 25% !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/login.less

@@ -10,7 +10,7 @@
         vertical-align: middle; 
         display: inline-block;
         width: 1px;
-        height: 100vh;
+        height: 100%;
     }
 }
 
@@ -135,4 +135,4 @@
 
     }
 }
- 
+

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

@@ -1,87 +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;
-
-  .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 {
+  .schema-browser {
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: none;
-  margin-top: 10px;
-  position: relative;
-  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;
     overflow: hidden;
-    text-overflow: ellipsis;
+    border: none;
-    white-space: nowrap;
+    padding-top: 10px;
     position: relative;
+    height: 100%;
 
-    .copy-to-editor {
+    .schema-loading-state {
-      display: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
     }
 
-    &:hover {
+    .collapse.in {
-      background: fade(@redash-gray, 10%);
+      background: transparent;
+    }
 
-      .copy-to-editor {
+    .copy-to-editor {
+      visibility: hidden;
+      color: fade(@redash-gray, 90%);
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: none;
+    }
+
+    .schema-list-item {
+      display: flex;
+      border-radius: @redash-radius;
+      height: 22px;
+
+      .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 {
+  .schema-control {
-  display: flex;
+    display: flex;
-  flex-wrap: nowrap;
+    flex-wrap: nowrap;
-  padding: 0;
+    padding: 0;
 
-  .ant-btn {
+    .ant-btn {
-    height: auto;
+      height: auto;
+    }
+  }
+
+  .parameter-label {
+    display: block;
   }
 }
-
-.parameter-label {
-  display: block;
-}

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

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

client/app/assets/less/main.less

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

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

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

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

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

client/app/components/AceEditorInput.jsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,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

@@ -0,0 +1,172 @@
+@backgroundColor: #001529;
+@dividerColor: rgba(255, 255, 255, 0.5);
+@textColor: rgba(255, 255, 255, 0.75);
+@brandColor: #ff7964; // Redash logo color
+@activeItemColor: @brandColor;
+@iconSize: 26px;
+
+.desktop-navbar {
+  background: @backgroundColor;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 80px;
+  overflow: hidden;
+
+  &-spacer {
+    flex: 1 1 auto;
+  }
+
+  &-logo.ant-menu {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    text-align: center;
+
+    img {
+      height: 40px;
+      transition: all 270ms;
+    }
+  }
+
+  .help-trigger {
+    font: inherit;
+  }
+
+  .ant-menu {
+    .ant-menu-item,
+    .ant-menu-submenu {
+      font-weight: 500;
+      color: @textColor;
+
+      &.navbar-active-item {
+        box-shadow: inset 3px 0 0 @activeItemColor;
+
+        .anticon {
+          color: @activeItemColor;
+        }
+      }
+
+      &.ant-menu-submenu-open,
+      &.ant-menu-submenu-active,
+      &:hover,
+      &:active,
+      &:focus,
+      &:focus-within {
+        color: #fff;
+      }
+
+      .anticon {
+        font-size: @iconSize;
+        margin: 0;
+      }
+
+      .desktop-navbar-label {
+        margin-top: 4px;
+        font-size: 11px;
+      }
+
+      a,
+      span,
+      .anticon {
+        color: inherit;
+      }
+    }
+
+    .ant-menu-submenu-arrow {
+      display: none;
+    }
+
+    .ant-menu-item,
+    .ant-menu-submenu {
+      padding: 0;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .ant-menu-submenu-title {
+      width: 100%;
+      padding: 0;
+    }
+
+    a,
+    &.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
+    .ant-menu-submenu-title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      line-height: normal;
+      height: auto;
+      background: none;
+      color: inherit;
+    }
+  }
+
+  .desktop-navbar-profile-menu {
+    .desktop-navbar-profile-menu-title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+
+      .profile__image_thumb {
+        margin: 0;
+        vertical-align: middle;
+        width: @iconSize;
+        height: @iconSize;
+      }
+    }
+  }
+}
+
+.desktop-navbar-submenu {
+  .ant-menu {
+    .ant-menu-item-divider {
+      background: @dividerColor;
+    }
+
+    .ant-menu-item {
+      font-weight: 500;
+      color: @textColor;
+
+      &:hover,
+      &:active,
+      &:focus,
+      &:focus-within {
+        color: #fff;
+      }
+
+      a,
+      span,
+      .anticon {
+        color: inherit;
+      }
+
+      .zmdi,
+      .fa {
+        margin-right: 5px;
+      }
+
+      &.version-info {
+        height: auto;
+        line-height: normal;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        a {
+          color: rgba(255, 255, 255, 0.8);
+
+          &:hover,
+          &:active,
+          &:focus,
+          &:focus-within {
+            color: rgba(255, 255, 255, 1);
+          }
+        }
+      }
+    }
+  }
+}

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

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

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

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

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

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

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

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

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

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

client/app/components/ApplicationArea/ErrorMessage.jsx

@@ -1,7 +1,11 @@
-import { isObject, get } from "lodash";
+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:
@@ -14,7 +18,7 @@ function getErrorMessageByStatus(status, defaultMessage) {
   }
 }
 
-export function getErrorMessage(error) {
+function getErrorMessage(error) {
   const message = "It seems like we encountered an error. Try refreshing this page or contact your administrator.";
   if (isObject(error)) {
     // HTTP errors
@@ -29,25 +33,30 @@ export function getErrorMessage(error) {
   return message;
 }
 
-export default function ErrorMessage({ error }) {
+export default function ErrorMessage({ error, message }) {
   if (!error) {
     return null;
   }
 
   console.error(error);
 
+  const errorDetailsProps = {
+    error,
+    message: message || getErrorMessage(error),
+  };
+
   return (
-    <div className="fixed-container" data-test="ErrorMessage">
+    <div className="error-message-container" data-test="ErrorMessage" role="alert">
-      <div className="container">
+      <div className="error-state bg-white tiled">
-        <div className="col-md-8 col-md-push-2">
+        <div className="error-state__icon">
-          <div className="error-state bg-white tiled">
+          <i className="zmdi zmdi-alert-circle-o" aria-hidden="true" />
-            <div className="error-state__icon">
+        </div>
-              <i className="zmdi zmdi-alert-circle-o" />
+        <div className="error-state__details">
-            </div>
+          <DynamicComponent
-            <div className="error-state__details">
+            name="ErrorMessageDetails"
-              <h4>{getErrorMessage(error)}</h4>
+            fallback={<ErrorMessageDetails {...errorDetailsProps} />}
-            </div>
+            {...errorDetailsProps}
-          </div>
+          />
         </div>
       </div>
     </div>
@@ -56,4 +65,5 @@ export default function ErrorMessage({ error }) {
 
 ErrorMessage.propTypes = {
   error: PropTypes.object.isRequired,
+  message: PropTypes.string,
 };

client/app/components/ApplicationArea/ErrorMessage.less

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