Feature/catch notsupported exception (#7573)

* Handle NotSupported exception in refresh_schema

- Add NotSupported exception handling to refresh_schema()
- Log unsupported datasources at DEBUG level
- Avoid error metrics for datasources without schema support

* Add test for NotSupported exception handling

- Test that NotSupported exceptions are caught and logged at DEBUG level
- Verify no warning logs are generated for unsupported datasources

* Fix import order (ruff)

* Remove test for NotSupported exception handling

As suggested by @yoshiokatsuneo, testing logging details for 3 lines of code
is excessive and may hurt maintainability. The existing tests already ensure
the functionality works correctly.

.ci/Dockerfile.cypress

@@ -1,11 +1,11 @@
-FROM cypress/browsers:node16.18.0-chrome90-ff88
+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.19 -g && yarn --frozen-lockfile --network-concurrency 1 > /dev/null
+RUN npm install yarn@1.22.22 -g && yarn --frozen-lockfile --network-concurrency 1 > /dev/null
 
 COPY . $APP
 

.ci/compose.ci.yaml

@@ -1,4 +1,3 @@
-version: '2.2'
 services:
   redash:
     build: ../
@@ -19,7 +18,7 @@ services:
     image: redis:7-alpine
     restart: unless-stopped
   postgres:
-    image: pgautoupgrade/pgautoupgrade:15-alpine3.8
+    image: postgres:18-alpine
     command: "postgres -c fsync=off -c full_page_writes=off -c synchronous_commit=OFF"
     restart: unless-stopped
     environment:

.ci/compose.cypress.yaml

@@ -1,10 +1,8 @@
-version: "2.2"
 x-redash-service: &redash-service
   build:
     context: ../
     args:
-      skip_dev_deps: "true"
+      install_groups: "main"
-      skip_ds_deps: "true"
       code_coverage: ${CODE_COVERAGE}
 x-redash-environment: &redash-environment
   REDASH_LOG_LEVEL: "INFO"
@@ -68,7 +66,7 @@ services:
     image: redis:7-alpine
     restart: unless-stopped
   postgres:
-    image: pgautoupgrade/pgautoupgrade:15-alpine3.8
+    image: postgres:18-alpine
     command: "postgres -c fsync=off -c full_page_writes=off -c synchronous_commit=OFF"
     restart: unless-stopped
     environment:

.ci/docker_build

@@ -1,21 +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$CIRCLE_BUILD_NUM
+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
+docker login -u "${DOCKER_USER}" -p "${DOCKER_PASS}"
 
-if [ $CIRCLE_BRANCH = master ] || [ $CIRCLE_BRANCH = preview-image ]
+DOCKERHUB_REPO="redash/redash"
-then
+DOCKER_TAGS="-t redash/redash:preview -t redash/preview:${VERSION_TAG}"
-    docker build --build-arg skip_dev_deps=true -t redash/redash:preview -t redash/preview:$VERSION_TAG .
-    docker push redash/redash:preview
-    docker push redash/preview:$VERSION_TAG
-else
-    docker build --build-arg skip_dev_deps=true -t redash/redash:$VERSION_TAG .
-    docker push redash/redash:$VERSION_TAG
-fi
 
-echo "Built: $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

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

.dockerignore

@@ -1,5 +1,4 @@
 client/.tmp/
-client/dist/
 node_modules/
 viz-lib/node_modules/
 .tmp/

.github/workflows/ci.yml

@@ -4,61 +4,73 @@ on:
     branches:
       - master
   pull_request:
+    branches:
+      - master
 env:
-  NODE_VERSION: 16.20.1
+  NODE_VERSION: 18
+  YARN_VERSION: 1.22.22
 jobs:
   backend-lint:
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
+      - 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
-      - uses: actions/setup-python@v4
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: actions/setup-python@v5
         with:
           python-version: '3.8'
-      - run: sudo pip install flake8==6.1.0 black==23.1.0 isort==5.12.0
+      - run: sudo pip install black==23.1.0 ruff==0.0.287
-      - run: flake8 .
+      - run: ruff check .
       - run: black --check .
-      - run: isort --check-only --diff .
 
   backend-unit-tests:
     runs-on: ubuntu-22.04
     needs: backend-lint
     env:
-      COMPOSE_FILE: .ci/docker-compose.ci.yml
+      COMPOSE_FILE: .ci/compose.ci.yaml
       COMPOSE_PROJECT_NAME: redash
       COMPOSE_DOCKER_CLI_BUILD: 1
       DOCKER_BUILDKIT: 1
     steps:
-      - uses: actions/checkout@v3
+      - 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 test_all_deps=true --build-arg skip_frontend_build=true
+          docker compose build --build-arg install_groups="main,all_ds,dev" --build-arg skip_frontend_build=true
-          docker-compose up -d
+          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;"
+        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
+        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/
+        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
+      # - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
+      #   uses: codecov/codecov-action@v3
+      #   with:
+      #     token: ${{ secrets.CODECOV_TOKEN }}
       - name: Store Test Results
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: test-results
+          name: backend-test-results
           path: /tmp/test-results
       - name: Store Coverage Results
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: coverage
           path: coverage.xml
@@ -66,39 +78,47 @@ jobs:
   frontend-lint:
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
+      - 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
-      - uses: actions/setup-node@v3
+          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@1.22.19
+          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@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: test-results
+          name: frontend-test-results
           path: /tmp/test-results
 
   frontend-unit-tests:
     runs-on: ubuntu-22.04
     needs: frontend-lint
     steps:
-      - uses: actions/checkout@v3
+      - 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
-      - uses: actions/setup-node@v3
+          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@1.22.19
+          npm install --global --force yarn@$YARN_VERSION
           yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
       - name: Run App Tests
         run: yarn test
@@ -110,44 +130,48 @@ jobs:
     runs-on: ubuntu-22.04
     needs: frontend-lint
     env:
-      COMPOSE_FILE: .ci/docker-compose.cypress.yml
+      COMPOSE_FILE: .ci/compose.cypress.yaml
       COMPOSE_PROJECT_NAME: cypress
-      PERCY_TOKEN_ENCODED: ZGRiY2ZmZDQ0OTdjMzM5ZWE0ZGQzNTZiOWNkMDRjOTk4Zjg0ZjMxMWRmMDZiM2RjOTYxNDZhOGExMjI4ZDE3MA==
-      CYPRESS_PROJECT_ID_ENCODED: OTI0Y2th
-      CYPRESS_RECORD_KEY_ENCODED: YzA1OTIxMTUtYTA1Yy00NzQ2LWEyMDMtZmZjMDgwZGI2ODgx
       CYPRESS_INSTALL_BINARY: 0
       PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+      # PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      # CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+      # CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
     steps:
-      - uses: actions/checkout@v3
+      - 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
-      - uses: actions/setup-node@v3
+          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
+          echo "CODE_COVERAGE=true" >> "$GITHUB_ENV"
       - name: Install Dependencies
         run: |
-          npm install --global --force yarn@1.22.19
+          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
+          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
+        run: docker compose logs
       - name: Copy Code Coverage Results
         run: docker cp cypress:/usr/src/app/coverage ./coverage || true
       - name: Store Coverage Results
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: coverage
           path: coverage

.github/workflows/periodic-snapshot.yml

@@ -1,26 +1,86 @@
 name: Periodic Snapshot
 
-# 10 minutes after midnight on the first of every month
 on:
   schedule:
-  - cron: "10 0 1 * *"
+    - 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@v3
+      - uses: actions/checkout@v4
+        with:
+          ssh-key: ${{ secrets.ACTION_PUSH_KEY }}
+
       - run: |
-          date="$(date +%y.%m).0-dev"
+          git config user.name 'github-actions[bot]'
-          gawk -i inplace -F: -v q=\" -v tag=$date '/^  "version": / { print $1 FS, q tag q ","; next} { print }' package.json
+          git config user.email '41898282+github-actions[bot]@users.noreply.github.com'
-          gawk -i inplace -F= -v q=\" -v tag=$date '/^__version__ =/ { print $1 FS, q tag q; next} { print }' redash/__init__.py
+
-          git config user.name github-actions
+          # Function to bump the version
-          git config user.email github-actions@github.com
+          bump_version() {
-          git add package.json redash/__init__.py
+            local version="$1"
-          git commit -m "Shapshot: ${date}"
+            local IFS=.
-          git push origin
+            read -r major minor patch <<< "$version"
-          git tag $date
+            patch=$((patch + 1))
-          git push origin $date
+            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

@@ -17,6 +17,7 @@ client/dist
 _build
 .vscode
 .env
+.tool-versions
 
 dump.rdb
 

.npmrc

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

.nvmrc

@@ -1 +1 @@
-v16.20.1
+v18

.pre-commit-config.yaml

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

.restyled.yaml

@@ -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,13 +52,13 @@ labels: ["Skip CI"]
 # Restylers to run, and how
 restylers:
   - name: black
-    image: restyled/restyler-black:v19.10b0
+    image: restyled/restyler-black:v24.4.2
     include:
       - redash
       - tests
       - migrations/versions
   - name: prettier
-    image: restyled/restyler-prettier:v1.19.1-2
+    image: restyled/restyler-prettier:v3.3.2-2
     command:
       - prettier
       - --write

Dockerfile

@@ -1,6 +1,6 @@
-FROM node:16.20.1 as frontend-builder
+FROM node:18-bookworm AS frontend-builder
 
-RUN npm install --global --force yarn@1.22.19
+RUN npm install --global --force yarn@1.22.22
 
 # Controls whether to build the frontend assets
 ARG skip_frontend_build
@@ -14,33 +14,39 @@ USER redash
 WORKDIR /frontend
 COPY --chown=redash package.json yarn.lock .yarnrc /frontend/
 COPY --chown=redash viz-lib /frontend/viz-lib
+COPY --chown=redash scripts /frontend/scripts
 
 # Controls whether to instrument code for coverage information
 ARG code_coverage
 ENV BABEL_ENV=${code_coverage:+test}
 
+# 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 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
+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.8-slim-buster
+FROM python:3.10-slim-bookworm
 
 EXPOSE 5000
 
-# Controls whether to install extra dependencies needed for all data sources.
-ARG skip_ds_deps
-# Controls whether to install dev dependencies.
-ARG skip_dev_deps
-# Controls whether to install all dependencies for testing.
-ARG test_all_deps
-
 RUN useradd --create-home redash
 
 # Ubuntu packages
 RUN apt-get update && \
   apt-get install -y --no-install-recommends \
+  pkg-config \
   curl \
   gnupg \
   build-essential \
@@ -48,6 +54,8 @@ RUN apt-get update && \
   libffi-dev \
   sudo \
   git-core \
+  # Kerberos, needed for MS SQL Python driver to compile on arm64
+  libkrb5-dev \
   # Postgres client
   libpq-dev \
   # ODBC support:
@@ -67,41 +75,41 @@ RUN apt-get update && \
 
 ARG TARGETPLATFORM
 ARG databricks_odbc_driver_url=https://databricks-bi-artifacts.s3.us-east-2.amazonaws.com/simbaspark-drivers/odbc/2.6.26/SimbaSparkODBC-2.6.26.1045-Debian-64bit.zip
-RUN if [ "$TARGETPLATFORM" = "linux/amd64" ]; then \
+RUN <<EOF
-  curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add - \
+  if [ "$TARGETPLATFORM" = "linux/amd64" ]; then
-  && curl https://packages.microsoft.com/config/debian/10/prod.list > /etc/apt/sources.list.d/mssql-release.list \
+    curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor -o /usr/share/keyrings/microsoft-prod.gpg
-  && apt-get update \
+    curl https://packages.microsoft.com/config/debian/12/prod.list > /etc/apt/sources.list.d/mssql-release.list
-  && ACCEPT_EULA=Y apt-get install  -y --no-install-recommends msodbcsql17 \
+    apt-get update
-  && apt-get clean \
+    ACCEPT_EULA=Y apt-get install  -y --no-install-recommends msodbcsql18
-  && rm -rf /var/lib/apt/lists/* \
+    apt-get clean
-  && curl "$databricks_odbc_driver_url" --location --output /tmp/simba_odbc.zip \
+    rm -rf /var/lib/apt/lists/*
-  && chmod 600 /tmp/simba_odbc.zip \
+    curl "$databricks_odbc_driver_url" --location --output /tmp/simba_odbc.zip
-  && unzip /tmp/simba_odbc.zip -d /tmp/simba \
+    chmod 600 /tmp/simba_odbc.zip
-  && dpkg -i /tmp/simba/*.deb \
+    unzip /tmp/simba_odbc.zip -d /tmp/simba
-  && printf "[Simba]\nDriver = /opt/simba/spark/lib/64/libsparkodbc_sb64.so" >> /etc/odbcinst.ini \
+    dpkg -i /tmp/simba/*.deb
-  && rm /tmp/simba_odbc.zip \
+    printf "[Simba]\nDriver = /opt/simba/spark/lib/64/libsparkodbc_sb64.so" >> /etc/odbcinst.ini
-  && rm -rf /tmp/simba; fi
+    rm /tmp/simba_odbc.zip
+    rm -rf /tmp/simba
+  fi
+EOF
 
 WORKDIR /app
 
-# Disable PIP Cache and Version Check
+ENV POETRY_VERSION=2.1.4
-ENV PIP_DISABLE_PIP_VERSION_CHECK=1
+ENV POETRY_HOME=/etc/poetry
-ENV PIP_NO_CACHE_DIR=1
+ENV POETRY_VIRTUALENVS_CREATE=false
+RUN curl -sSL https://install.python-poetry.org | python3 -
 
-RUN pip install pip==23.1.2;
+# Avoid crashes, including corrupted cache artifacts, when building multi-platform images with GitHub Actions.
+RUN /etc/poetry/bin/poetry cache clear pypi --all
 
-# We first copy only the requirements file, to avoid rebuilding on every file change.
+COPY pyproject.toml poetry.lock ./
-COPY requirements_all_ds.txt ./
-RUN if [ "x$skip_ds_deps" = "x" ] ; then cat requirements_all_ds.txt | sed -e '/^\s*#.*$/d' -e '/^\s*$/d' | xargs -n 1 pip install || true ; else echo "Skipping pip install -r requirements_all_ds.txt" ; fi
 
-
+ARG POETRY_OPTIONS="--no-root --no-interaction --no-ansi"
-COPY requirements_dev.txt ./
+# for LDAP authentication, install with `ldap3` group
-RUN if [ "x$skip_dev_deps" = "x" ] ; then pip install -r requirements_dev.txt ; fi
+# disabled by default due to GPL license conflict
-
+ARG install_groups="main,all_ds,dev"
-COPY requirements.txt ./
+RUN /etc/poetry/bin/poetry install --only $install_groups $POETRY_OPTIONS
-RUN pip install -r requirements.txt
-
-RUN if [ "x$test_all_deps" != "x" ] ; then pip3 install -r requirements.txt -r requirements_dev.txt -r requirements_all_ds.txt ; fi
 
 COPY --chown=redash . /app
 COPY --from=frontend-builder --chown=redash /frontend/client/dist /app/client/dist

Makefile

@@ -1,26 +1,39 @@
 .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: .env
-	COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose build
+	COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose build
 
 up:
-	COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 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: .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
 
 .env:
 	printf "REDASH_COOKIE_SECRET=`pwgen -1s 32`\nREDASH_SECRET_KEY=`pwgen -1s 32`\n" >> .env
@@ -31,19 +44,20 @@ 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:
 	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 yarn --frozen-lockfile
 	yarn test
 
-test: lint backend-unit-tests frontend-unit-tests
+test: backend-unit-tests frontend-unit-tests lint
 
 build:
 	yarn build
@@ -55,7 +69,7 @@ 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,7 +3,6 @@
 </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)
 
 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.
@@ -47,6 +46,7 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - Dgraph
 - Apache Drill
 - Apache Druid
+- e6data
 - Eccenca Corporate Memory
 - Elasticsearch
 - Exasol
@@ -61,6 +61,7 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - Apache Hive
 - Apache Impala
 - InfluxDB
+- InfluxDBv2
 - IBM Netezza Performance Server
 - JIRA (JQL)
 - JSON
@@ -83,6 +84,7 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - Python
 - Qubole
 - Rockset
+- RisingWave
 - Salesforce
 - ScyllaDB
 - Shell Scripts
@@ -90,6 +92,7 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - SPARQL
 - SQLite
 - TiDB
+- Tinybird
 - TreasureData
 - Trino
 - Uptycs

bin/docker-entrypoint

@@ -46,7 +46,7 @@ server() {
   MAX_REQUESTS=${MAX_REQUESTS:-1000}
   MAX_REQUESTS_JITTER=${MAX_REQUESTS_JITTER:-100}
   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
+  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() {
@@ -67,7 +67,7 @@ help() {
   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"

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/upgrade

@@ -1,254 +0,0 @@
-#!/usr/bin/env python3
-import argparse
-import os
-import subprocess
-import sys
-import urllib
-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/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/less/inc/base.less

@@ -20,7 +20,7 @@ html {
 
 html,
 body {
-  min-height: 100vh;
+  height: 100%;
 }
 
 body {
@@ -35,7 +35,7 @@ body {
 }
 
 #application-root {
-  min-height: 100vh;
+  height: 100%;
 }
 
 #application-root,

client/app/assets/less/inc/login.less

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

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

@@ -8,7 +8,7 @@ body.fixed-layout {
     padding-bottom: 0;
 
     width: 100vw;
-    height: 100vh;
+    height: 100%;
 
     .application-layout-content > div {
       display: flex;
@@ -90,7 +90,7 @@ body.fixed-layout {
 .embed__vis {
   display: flex;
   flex-flow: column;
-  height: calc(~'100vh - 25px');
+  height: calc(~'100% - 25px');
 
   > .embed-heading {
     flex: 0 0 auto;
@@ -223,6 +223,7 @@ body.fixed-layout {
     }
 
     .editor__left__schema {
+      min-height: 120px;
       flex-grow: 1;
       display: flex;
       flex-direction: column;

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

@@ -7,10 +7,10 @@ body #application-root {
   flex-direction: row;
   justify-content: stretch;
   padding-bottom: 0 !important;
-  height: 100vh;
+  height: 100%;
 
   .application-layout-side-menu {
-    height: 100vh;
+    height: 100%;
     position: relative;
 
     @media @mobileBreakpoint {
@@ -47,6 +47,10 @@ body #application-root {
   }
 }
 
+body > section {
+  height: 100%;
+}
+
 body.fixed-layout #application-root {
   .application-layout-content {
     padding-bottom: 0;

client/app/components/BeaconConsent.jsx

@@ -22,7 +22,7 @@ function BeaconConsent() {
     setHide(true);
   };
 
-  const confirmConsent = confirm => {
+  const confirmConsent = (confirm) => {
     let message = "🙏 Thank you.";
 
     if (!confirm) {
@@ -47,7 +47,8 @@ function BeaconConsent() {
               <HelpTrigger type="USAGE_DATA_SHARING" />
             </>
           }
-          bordered={false}>
+          bordered={false}
+        >
           <Text>Help Redash improve by automatically sending anonymous usage data:</Text>
           <div className="m-t-5">
             <ul>
@@ -66,8 +67,7 @@ function BeaconConsent() {
           </div>
           <div className="m-t-15">
             <Text type="secondary">
-              You can change this setting anytime from the{" "}
+              You can change this setting anytime from the <Link href="settings/general">Settings</Link> page.
-              <Link href="settings/organization">Organization Settings</Link> page.
             </Text>
           </div>
         </Card>

client/app/components/EditParameterSettingsDialog.jsx

@@ -12,6 +12,7 @@ import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import QuerySelector from "@/components/QuerySelector";
 import { Query } from "@/services/query";
 import { useUniqueId } from "@/lib/hooks/useUniqueId";
+import "./EditParameterSettingsDialog.less";
 
 const { Option } = Select;
 const formItemProps = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
@@ -26,7 +27,7 @@ function isTypeDateRange(type) {
 
 function joinExampleList(multiValuesOptions) {
   const { prefix, suffix } = multiValuesOptions;
-  return ["value1", "value2", "value3"].map(value => `${prefix}${value}${suffix}`).join(",");
+  return ["value1", "value2", "value3"].map((value) => `${prefix}${value}${suffix}`).join(",");
 }
 
 function NameInput({ name, type, onChange, existingNames, setValidation }) {
@@ -54,7 +55,7 @@ function NameInput({ name, type, onChange, existingNames, setValidation }) {
 
   return (
     <Form.Item required label="Keyword" help={helpText} validateStatus={validateStatus} {...formItemProps}>
-      <Input onChange={e => onChange(e.target.value)} autoFocus />
+      <Input onChange={(e) => onChange(e.target.value)} autoFocus />
     </Form.Item>
   );
 }
@@ -71,6 +72,8 @@ function EditParameterSettingsDialog(props) {
   const [param, setParam] = useState(clone(props.parameter));
   const [isNameValid, setIsNameValid] = useState(true);
   const [initialQuery, setInitialQuery] = useState();
+  const [userInput, setUserInput] = useState(param.regex || "");
+  const [isValidRegex, setIsValidRegex] = useState(true);
 
   const isNew = !props.parameter.name;
 
@@ -114,6 +117,17 @@ function EditParameterSettingsDialog(props) {
 
   const paramFormId = useUniqueId("paramForm");
 
+  const handleRegexChange = (e) => {
+    setUserInput(e.target.value);
+    try {
+      new RegExp(e.target.value);
+      setParam({ ...param, regex: e.target.value });
+      setIsValidRegex(true);
+    } catch (error) {
+      setIsValidRegex(false);
+    }
+  };
+
   return (
     <Modal
       {...props.dialog.props}
@@ -129,15 +143,17 @@ function EditParameterSettingsDialog(props) {
           disabled={!isFulfilled()}
           type="primary"
           form={paramFormId}
-          data-test="SaveParameterSettings">
+          data-test="SaveParameterSettings"
+        >
           {isNew ? "Add Parameter" : "OK"}
         </Button>,
-      ]}>
+      ]}
+    >
       <Form layout="horizontal" onFinish={onConfirm} id={paramFormId}>
         {isNew && (
           <NameInput
             name={param.name}
-            onChange={name => setParam({ ...param, name })}
+            onChange={(name) => setParam({ ...param, name })}
             setValidation={setIsNameValid}
             existingNames={props.existingParams}
             type={param.type}
@@ -146,15 +162,16 @@ function EditParameterSettingsDialog(props) {
         <Form.Item required label="Title" {...formItemProps}>
           <Input
             value={isNull(param.title) ? getDefaultTitle(param.name) : param.title}
-            onChange={e => setParam({ ...param, title: e.target.value })}
+            onChange={(e) => setParam({ ...param, title: e.target.value })}
             data-test="ParameterTitleInput"
           />
         </Form.Item>
         <Form.Item label="Type" {...formItemProps}>
-          <Select value={param.type} onChange={type => setParam({ ...param, type })} data-test="ParameterTypeSelect">
+          <Select value={param.type} onChange={(type) => setParam({ ...param, type })} data-test="ParameterTypeSelect">
             <Option value="text" data-test="TextParameterTypeOption">
               Text
             </Option>
+            <Option value="text-pattern">Text Pattern</Option>
             <Option value="number" data-test="NumberParameterTypeOption">
               Number
             </Option>
@@ -180,12 +197,26 @@ function EditParameterSettingsDialog(props) {
             <Option value="datetime-range-with-seconds">Date and Time Range (with seconds)</Option>
           </Select>
         </Form.Item>
+        {param.type === "text-pattern" && (
+          <Form.Item
+            label="Regex"
+            help={!isValidRegex ? "Invalid Regex Pattern" : "Valid Regex Pattern"}
+            {...formItemProps}
+          >
+            <Input
+              value={userInput}
+              onChange={handleRegexChange}
+              className={!isValidRegex ? "input-error" : ""}
+              data-test="RegexPatternInput"
+            />
+          </Form.Item>
+        )}
         {param.type === "enum" && (
           <Form.Item label="Values" help="Dropdown list values (newline delimited)" {...formItemProps}>
             <Input.TextArea
               rows={3}
               value={param.enumOptions}
-              onChange={e => setParam({ ...param, enumOptions: e.target.value })}
+              onChange={(e) => setParam({ ...param, enumOptions: e.target.value })}
             />
           </Form.Item>
         )}
@@ -193,7 +224,7 @@ function EditParameterSettingsDialog(props) {
           <Form.Item label="Query" help="Select query to load dropdown values from" {...formItemProps}>
             <QuerySelector
               selectedQuery={initialQuery}
-              onChange={q => setParam({ ...param, queryId: q && q.id })}
+              onChange={(q) => setParam({ ...param, queryId: q && q.id })}
               type="select"
             />
           </Form.Item>
@@ -202,7 +233,7 @@ function EditParameterSettingsDialog(props) {
           <Form.Item className="m-b-0" label=" " colon={false} {...formItemProps}>
             <Checkbox
               defaultChecked={!!param.multiValuesOptions}
-              onChange={e =>
+              onChange={(e) =>
                 setParam({
                   ...param,
                   multiValuesOptions: e.target.checked
@@ -214,7 +245,8 @@ function EditParameterSettingsDialog(props) {
                     : null,
                 })
               }
-              data-test="AllowMultipleValuesCheckbox">
+              data-test="AllowMultipleValuesCheckbox"
+            >
               Allow multiple values
             </Checkbox>
           </Form.Item>
@@ -227,10 +259,11 @@ function EditParameterSettingsDialog(props) {
                 Placed in query as: <code>{joinExampleList(param.multiValuesOptions)}</code>
               </React.Fragment>
             }
-            {...formItemProps}>
+            {...formItemProps}
+          >
             <Select
               value={param.multiValuesOptions.prefix}
-              onChange={quoteOption =>
+              onChange={(quoteOption) =>
                 setParam({
                   ...param,
                   multiValuesOptions: {
@@ -240,7 +273,8 @@ function EditParameterSettingsDialog(props) {
                   },
                 })
               }
-              data-test="QuotationSelect">
+              data-test="QuotationSelect"
+            >
               <Option value="">None (default)</Option>
               <Option value="'">Single Quotation Mark</Option>
               <Option value={'"'} data-test="DoubleQuotationMarkOption">

client/app/components/EditParameterSettingsDialog.less

@@ -0,0 +1,3 @@
+.input-error {
+    border-color: red !important;
+}

client/app/components/HelpTrigger.jsx

@@ -101,7 +101,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
       clearTimeout(this.iframeLoadingTimeout);
     }
 
-    loadIframe = url => {
+    loadIframe = (url) => {
       clearTimeout(this.iframeLoadingTimeout);
       this.setState({ loading: true, error: false });
 
@@ -116,8 +116,8 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
       clearTimeout(this.iframeLoadingTimeout);
     };
 
-    onPostMessageReceived = event => {
+    onPostMessageReceived = (event) => {
-      if (!some(allowedDomains, domain => startsWith(event.origin, domain))) {
+      if (!some(allowedDomains, (domain) => startsWith(event.origin, domain))) {
         return;
       }
 
@@ -134,7 +134,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
       return helpTriggerType ? helpTriggerType[0] : this.props.href;
     };
 
-    openDrawer = e => {
+    openDrawer = (e) => {
       // keep "open in new tab" behavior
       if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
         e.preventDefault();
@@ -144,7 +144,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
       }
     };
 
-    closeDrawer = event => {
+    closeDrawer = (event) => {
       if (event) {
         event.preventDefault();
       }
@@ -161,7 +161,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
       const tooltip = get(types, `${this.props.type}[1]`, this.props.title);
       const className = cx("help-trigger", this.props.className);
       const url = this.state.currentUrl;
-      const isAllowedDomain = some(allowedDomains, domain => startsWith(url || targetUrl, domain));
+      const isAllowedDomain = some(allowedDomains, (domain) => startsWith(url || targetUrl, domain));
       const shouldRenderAsLink = this.props.renderAsLink || !isAllowedDomain;
 
       return (
@@ -180,13 +180,15 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                   )}
                 </>
               ) : null
-            }>
+            }
+          >
             <Link
               href={url || this.getUrl()}
               className={className}
               rel="noopener noreferrer"
               target="_blank"
-              onClick={shouldRenderAsLink ? () => {} : this.openDrawer}>
+              onClick={shouldRenderAsLink ? () => {} : this.openDrawer}
+            >
               {this.props.children}
             </Link>
           </Tooltip>
@@ -197,7 +199,8 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
             visible={this.state.visible}
             className={cx("help-drawer", drawerClassName)}
             destroyOnClose
-            width={400}>
+            width={400}
+          >
             <div className="drawer-wrapper">
               <div className="drawer-menu">
                 {url && (

client/app/components/ParameterMappingInput.jsx

@@ -33,10 +33,10 @@ export const MappingType = {
 };
 
 export function parameterMappingsToEditableMappings(mappings, parameters, existingParameterNames = []) {
-  return map(mappings, mapping => {
+  return map(mappings, (mapping) => {
     const result = extend({}, mapping);
     const alreadyExists = includes(existingParameterNames, mapping.mapTo);
-    result.param = find(parameters, p => p.name === mapping.name);
+    result.param = find(parameters, (p) => p.name === mapping.name);
     switch (mapping.type) {
       case ParameterMappingType.DashboardLevel:
         result.type = alreadyExists ? MappingType.DashboardMapToExisting : MappingType.DashboardAddNew;
@@ -62,7 +62,7 @@ export function editableMappingsToParameterMappings(mappings) {
     map(
       // convert to map
       mappings,
-      mapping => {
+      (mapping) => {
         const result = extend({}, mapping);
         switch (mapping.type) {
           case MappingType.DashboardAddNew:
@@ -95,11 +95,11 @@ export function editableMappingsToParameterMappings(mappings) {
 export function synchronizeWidgetTitles(sourceMappings, widgets) {
   const affectedWidgets = [];
 
-  each(sourceMappings, sourceMapping => {
+  each(sourceMappings, (sourceMapping) => {
     if (sourceMapping.type === ParameterMappingType.DashboardLevel) {
-      each(widgets, widget => {
+      each(widgets, (widget) => {
         const widgetMappings = widget.options.parameterMappings;
-        each(widgetMappings, widgetMapping => {
+        each(widgetMappings, (widgetMapping) => {
           // check if mapped to the same dashboard-level parameter
           if (
             widgetMapping.type === ParameterMappingType.DashboardLevel &&
@@ -140,7 +140,7 @@ export class ParameterMappingInput extends React.Component {
     className: "form-item",
   };
 
-  updateSourceType = type => {
+  updateSourceType = (type) => {
     let {
       mapping: { mapTo },
     } = this.props;
@@ -155,7 +155,7 @@ export class ParameterMappingInput extends React.Component {
     this.updateParamMapping({ type, mapTo });
   };
 
-  updateParamMapping = update => {
+  updateParamMapping = (update) => {
     const { onChange, mapping } = this.props;
     const newMapping = extend({}, mapping, update);
     if (newMapping.value !== mapping.value) {
@@ -175,7 +175,7 @@ export class ParameterMappingInput extends React.Component {
   renderMappingTypeSelector() {
     const noExisting = isEmpty(this.props.existingParamNames);
     return (
-      <Radio.Group value={this.props.mapping.type} onChange={e => this.updateSourceType(e.target.value)}>
+      <Radio.Group value={this.props.mapping.type} onChange={(e) => this.updateSourceType(e.target.value)}>
         <Radio className="radio" value={MappingType.DashboardAddNew} data-test="NewDashboardParameterOption">
           New dashboard parameter
         </Radio>
@@ -205,16 +205,16 @@ export class ParameterMappingInput extends React.Component {
       <Input
         value={mapTo}
         aria-label="Parameter name (key)"
-        onChange={e => this.updateParamMapping({ mapTo: e.target.value })}
+        onChange={(e) => this.updateParamMapping({ mapTo: e.target.value })}
       />
     );
   }
 
   renderDashboardMapToExisting() {
     const { mapping, existingParamNames } = this.props;
-    const options = map(existingParamNames, paramName => ({ label: paramName, value: paramName }));
+    const options = map(existingParamNames, (paramName) => ({ label: paramName, value: paramName }));
 
-    return <Select value={mapping.mapTo} onChange={mapTo => this.updateParamMapping({ mapTo })} options={options} />;
+    return <Select value={mapping.mapTo} onChange={(mapTo) => this.updateParamMapping({ mapTo })} options={options} />;
   }
 
   renderStaticValue() {
@@ -226,7 +226,8 @@ export class ParameterMappingInput extends React.Component {
         enumOptions={mapping.param.enumOptions}
         queryId={mapping.param.queryId}
         parameter={mapping.param}
-        onSelect={value => this.updateParamMapping({ value })}
+        onSelect={(value) => this.updateParamMapping({ value })}
+        regex={mapping.param.regex}
       />
     );
   }
@@ -284,12 +285,12 @@ class MappingEditor extends React.Component {
     };
   }
 
-  onVisibleChange = visible => {
+  onVisibleChange = (visible) => {
     if (visible) this.show();
     else this.hide();
   };
 
-  onChange = mapping => {
+  onChange = (mapping) => {
     let inputError = null;
 
     if (mapping.type === MappingType.DashboardAddNew) {
@@ -351,7 +352,8 @@ class MappingEditor extends React.Component {
         trigger="click"
         content={this.renderContent()}
         visible={visible}
-        onVisibleChange={this.onVisibleChange}>
+        onVisibleChange={this.onVisibleChange}
+      >
         <Button size="small" type="dashed" data-test={`EditParamMappingButton-${mapping.param.name}`}>
           <EditOutlinedIcon />
         </Button>
@@ -376,14 +378,14 @@ class TitleEditor extends React.Component {
     title: "", // will be set on editing
   };
 
-  onPopupVisibleChange = showPopup => {
+  onPopupVisibleChange = (showPopup) => {
     this.setState({
       showPopup,
       title: showPopup ? this.getMappingTitle() : "",
     });
   };
 
-  onEditingTitleChange = event => {
+  onEditingTitleChange = (event) => {
     this.setState({ title: event.target.value });
   };
 
@@ -460,7 +462,8 @@ class TitleEditor extends React.Component {
         trigger="click"
         content={this.renderPopover()}
         visible={this.state.showPopup}
-        onVisibleChange={this.onPopupVisibleChange}>
+        onVisibleChange={this.onPopupVisibleChange}
+      >
         <Button size="small" type="dashed">
           <EditOutlinedIcon />
         </Button>
@@ -508,7 +511,7 @@ export class ParameterMappingListInput extends React.Component {
 
     // just to be safe, array or object
     if (typeof value === "object") {
-      return map(value, v => this.getStringValue(v)).join(", ");
+      return map(value, (v) => this.getStringValue(v)).join(", ");
     }
 
     // rest
@@ -574,7 +577,7 @@ export class ParameterMappingListInput extends React.Component {
 
   render() {
     const { existingParams } = this.props; // eslint-disable-line react/prop-types
-    const dataSource = this.props.mappings.map(mapping => ({ mapping }));
+    const dataSource = this.props.mappings.map((mapping) => ({ mapping }));
 
     return (
       <div className="parameters-mapping-list">
@@ -583,11 +586,11 @@ export class ParameterMappingListInput extends React.Component {
             title="Title"
             dataIndex="mapping"
             key="title"
-            render={mapping => (
+            render={(mapping) => (
               <TitleEditor
                 existingParams={existingParams}
                 mapping={mapping}
-                onChange={newMapping => this.updateParamMapping(mapping, newMapping)}
+                onChange={(newMapping) => this.updateParamMapping(mapping, newMapping)}
               />
             )}
           />
@@ -596,19 +599,19 @@ export class ParameterMappingListInput extends React.Component {
             dataIndex="mapping"
             key="keyword"
             className="keyword"
-            render={mapping => <code>{`{{ ${mapping.name} }}`}</code>}
+            render={(mapping) => <code>{`{{ ${mapping.name} }}`}</code>}
           />
           <Table.Column
             title="Default Value"
             dataIndex="mapping"
             key="value"
-            render={mapping => this.constructor.getDefaultValue(mapping, this.props.existingParams)}
+            render={(mapping) => this.constructor.getDefaultValue(mapping, this.props.existingParams)}
           />
           <Table.Column
             title="Value Source"
             dataIndex="mapping"
             key="source"
-            render={mapping => {
+            render={(mapping) => {
               const existingParamsNames = existingParams
                 .filter(({ type }) => type === mapping.param.type) // exclude mismatching param types
                 .map(({ name }) => name); // keep names only

client/app/components/ParameterValueInput.jsx

@@ -9,11 +9,12 @@ import DateRangeParameter from "@/components/dynamic-parameters/DateRangeParamet
 import QueryBasedParameterInput from "./QueryBasedParameterInput";
 
 import "./ParameterValueInput.less";
+import Tooltip from "./Tooltip";
 
 const multipleValuesProps = {
   maxTagCount: 3,
   maxTagTextLength: 10,
-  maxTagPlaceholder: num => `+${num.length} more`,
+  maxTagPlaceholder: (num) => `+${num.length} more`,
 };
 
 class ParameterValueInput extends React.Component {
@@ -25,6 +26,7 @@ class ParameterValueInput extends React.Component {
     parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     onSelect: PropTypes.func,
     className: PropTypes.string,
+    regex: PropTypes.string,
   };
 
   static defaultProps = {
@@ -35,6 +37,7 @@ class ParameterValueInput extends React.Component {
     parameter: null,
     onSelect: () => {},
     className: "",
+    regex: "",
   };
 
   constructor(props) {
@@ -45,7 +48,7 @@ class ParameterValueInput extends React.Component {
     };
   }
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps) => {
     const { value, parameter } = this.props;
     // if value prop updated, reset dirty state
     if (prevProps.value !== value || prevProps.parameter !== parameter) {
@@ -56,7 +59,7 @@ class ParameterValueInput extends React.Component {
     }
   };
 
-  onSelect = value => {
+  onSelect = (value) => {
     const isDirty = !isEqual(value, this.props.value);
     this.setState({ value, isDirty });
     this.props.onSelect(value, isDirty);
@@ -93,9 +96,9 @@ class ParameterValueInput extends React.Component {
   renderEnumInput() {
     const { enumOptions, parameter } = this.props;
     const { value } = this.state;
-    const enumOptionsArray = enumOptions.split("\n").filter(v => v !== "");
+    const enumOptionsArray = enumOptions.split("\n").filter((v) => v !== "");
     // Antd Select doesn't handle null in multiple mode
-    const normalize = val => (parameter.multiValuesOptions && val === null ? [] : val);
+    const normalize = (val) => (parameter.multiValuesOptions && val === null ? [] : val);
 
     return (
       <SelectWithVirtualScroll
@@ -103,7 +106,7 @@ class ParameterValueInput extends React.Component {
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
         value={normalize(value)}
         onChange={this.onSelect}
-        options={map(enumOptionsArray, opt => ({ label: String(opt), value: opt }))}
+        options={map(enumOptionsArray, (opt) => ({ label: String(opt), value: opt }))}
         showSearch
         showArrow
         notFoundContent={isEmpty(enumOptionsArray) ? "No options available" : null}
@@ -133,18 +136,36 @@ class ParameterValueInput extends React.Component {
     const { className } = this.props;
     const { value } = this.state;
 
-    const normalize = val => (isNaN(val) ? undefined : val);
+    const normalize = (val) => (isNaN(val) ? undefined : val);
 
     return (
       <InputNumber
         className={className}
         value={normalize(value)}
         aria-label="Parameter number value"
-        onChange={val => this.onSelect(normalize(val))}
+        onChange={(val) => this.onSelect(normalize(val))}
       />
     );
   }
 
+  renderTextPatternInput() {
+    const { className } = this.props;
+    const { value } = this.state;
+
+    return (
+      <React.Fragment>
+        <Tooltip title={`Regex to match: ${this.props.regex}`} placement="right">
+          <Input
+            className={className}
+            value={value}
+            aria-label="Parameter text pattern value"
+            onChange={(e) => this.onSelect(e.target.value)}
+          />
+        </Tooltip>
+      </React.Fragment>
+    );
+  }
+
   renderTextInput() {
     const { className } = this.props;
     const { value } = this.state;
@@ -155,7 +176,7 @@ class ParameterValueInput extends React.Component {
         value={value}
         aria-label="Parameter text value"
         data-test="TextParamInput"
-        onChange={e => this.onSelect(e.target.value)}
+        onChange={(e) => this.onSelect(e.target.value)}
       />
     );
   }
@@ -177,6 +198,8 @@ class ParameterValueInput extends React.Component {
         return this.renderQueryBasedInput();
       case "number":
         return this.renderNumberInput();
+      case "text-pattern":
+        return this.renderTextPatternInput();
       default:
         return this.renderTextInput();
     }

client/app/components/Parameters.jsx

@@ -1,4 +1,4 @@
-import { size, filter, forEach, extend } from "lodash";
+import { size, filter, forEach, extend, isEmpty } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import { SortableContainer, SortableElement, DragHandle } from "@redash/viz/lib/components/sortable";
@@ -14,7 +14,7 @@ import "./Parameters.less";
 
 function updateUrl(parameters) {
   const params = extend({}, location.search);
-  parameters.forEach(param => {
+  parameters.forEach((param) => {
     extend(params, param.toUrlParams());
   });
   location.setSearch(params, true);
@@ -43,16 +43,26 @@ export default class Parameters extends React.Component {
     appendSortableToParent: true,
   };
 
+  toCamelCase = (str) => {
+    if (isEmpty(str)) {
+      return "";
+    }
+    return str.replace(/\s+/g, "").toLowerCase();
+  };
+
   constructor(props) {
     super(props);
-    const { parameters } = props;
+    const { parameters, disableUrlUpdate } = props;
     this.state = { parameters };
-    if (!props.disableUrlUpdate) {
+    if (!disableUrlUpdate) {
       updateUrl(parameters);
     }
+    const hideRegex = /hide_filter=([^&]+)/g;
+    const matches = window.location.search.matchAll(hideRegex);
+    this.hideValues = Array.from(matches, (match) => match[1]);
   }
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps) => {
     const { parameters, disableUrlUpdate } = this.props;
     const parametersChanged = prevProps.parameters !== parameters;
     const disableUrlUpdateChanged = prevProps.disableUrlUpdate !== disableUrlUpdate;
@@ -64,7 +74,7 @@ export default class Parameters extends React.Component {
     }
   };
 
-  handleKeyDown = e => {
+  handleKeyDown = (e) => {
     // Cmd/Ctrl/Alt + Enter
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey || e.altKey)) {
       e.stopPropagation();
@@ -99,8 +109,8 @@ export default class Parameters extends React.Component {
   applyChanges = () => {
     const { onValuesChange, disableUrlUpdate } = this.props;
     this.setState(({ parameters }) => {
-      const parametersWithPendingValues = parameters.filter(p => p.hasPendingValue);
+      const parametersWithPendingValues = parameters.filter((p) => p.hasPendingValue);
-      forEach(parameters, p => p.applyPendingValue());
+      forEach(parameters, (p) => p.applyPendingValue());
       if (!disableUrlUpdate) {
         updateUrl(parameters);
       }
@@ -111,7 +121,7 @@ export default class Parameters extends React.Component {
 
   showParameterSettings = (parameter, index) => {
     const { onParametersEdit } = this.props;
-    EditParameterSettingsDialog.showModal({ parameter }).onClose(updated => {
+    EditParameterSettingsDialog.showModal({ parameter }).onClose((updated) => {
       this.setState(({ parameters }) => {
         const updatedParameter = extend(parameter, updated);
         parameters[index] = createParameter(updatedParameter, updatedParameter.parentQueryId);
@@ -122,7 +132,13 @@ export default class Parameters extends React.Component {
   };
 
   renderParameter(param, index) {
+    if (this.hideValues.some((value) => this.toCamelCase(value) === this.toCamelCase(param.name))) {
+      return null;
+    }
     const { editable } = this.props;
+    if (param.hidden) {
+      return null;
+    }
     return (
       <div key={param.name} className="di-block" data-test={`ParameterName-${param.name}`}>
         <div className="parameter-heading">
@@ -133,11 +149,13 @@ export default class Parameters extends React.Component {
               aria-label="Edit"
               onClick={() => this.showParameterSettings(param, index)}
               data-test={`ParameterSettings-${param.name}`}
-              type="button">
+              type="button"
+            >
               <i className="fa fa-cog" aria-hidden="true" />
             </PlainButton>
           )}
         </div>
+
         <ParameterValueInput
           type={param.type}
           value={param.normalizedValue}
@@ -145,6 +163,7 @@ export default class Parameters extends React.Component {
           enumOptions={param.enumOptions}
           queryId={param.queryId}
           onSelect={(value, isDirty) => this.setPendingValue(param, value, isDirty)}
+          regex={param.regex}
         />
       </div>
     );
@@ -154,7 +173,6 @@ export default class Parameters extends React.Component {
     const { parameters } = this.state;
     const { sortable, appendSortableToParent } = this.props;
     const dirtyParamCount = size(filter(parameters, "hasPendingValue"));
-
     return (
       <SortableContainer
         disabled={!sortable}
@@ -162,24 +180,27 @@ export default class Parameters extends React.Component {
         useDragHandle
         lockToContainerEdges
         helperClass="parameter-dragged"
-        helperContainer={containerEl => (appendSortableToParent ? containerEl : document.body)}
+        helperContainer={(containerEl) => (appendSortableToParent ? containerEl : document.body)}
         updateBeforeSortStart={this.onBeforeSortStart}
         onSortEnd={this.moveParameter}
         containerProps={{
           className: "parameter-container",
           onKeyDown: dirtyParamCount ? this.handleKeyDown : null,
-        }}>
+        }}
-        {parameters.map((param, index) => (
+      >
-          <SortableElement key={param.name} index={index}>
+        {parameters &&
-            <div
+          parameters.map((param, index) => (
-              className="parameter-block"
+            <SortableElement key={param.name} index={index}>
-              data-editable={sortable || null}
+              <div
-              data-test={`ParameterBlock-${param.name}`}>
+                className="parameter-block"
-              {sortable && <DragHandle data-test={`DragHandle-${param.name}`} />}
+                data-editable={sortable || null}
-              {this.renderParameter(param, index)}
+                data-test={`ParameterBlock-${param.name}`}
-            </div>
+              >
-          </SortableElement>
+                {sortable && <DragHandle data-test={`DragHandle-${param.name}`} />}
-        ))}
+                {this.renderParameter(param, index)}
+              </div>
+            </SortableElement>
+          ))}
         <ParameterApplyButton onClick={this.applyChanges} paramCount={dirtyParamCount} />
       </SortableContainer>
     );

client/app/components/PreviewCard.jsx

@@ -69,7 +69,7 @@ UserPreviewCard.defaultProps = {
 // DataSourcePreviewCard
 
 export function DataSourcePreviewCard({ dataSource, withLink, children, ...props }) {
-  const imageUrl = `static/images/db-logos/${dataSource.type}.png`;
+  const imageUrl = `/static/images/db-logos/${dataSource.type}.png`;
   const title = withLink ? <Link href={"data_sources/" + dataSource.id}>{dataSource.name}</Link> : dataSource.name;
   return (
     <PreviewCard {...props} imageUrl={imageUrl} title={title}>

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

@@ -51,7 +51,7 @@
       right: 0;
       background: linear-gradient(to bottom, transparent, transparent 2px, #f6f8f9 2px, #f6f8f9 5px),
         linear-gradient(to left, #b3babf, #b3babf 1px, transparent 1px, transparent);
-      background-size: calc((100% + 15px) / 6) 5px;
+      background-size: calc((100% + 15px) / 12) 5px;
       background-position: -7px 1px;
     }
   }
@@ -123,6 +123,7 @@
       right: 10px;
       bottom: 15px;
       height: auto;
+      overflow: hidden;
       padding: 0;
     }
   }

client/app/components/dynamic-parameters/DateRangeParameter.jsx

@@ -9,121 +9,85 @@ const DYNAMIC_DATE_OPTIONS = [
     name: "This week",
     value: getDynamicDateRangeFromString("d_this_week"),
     label: () =>
-      getDynamicDateRangeFromString("d_this_week")
+      getDynamicDateRangeFromString("d_this_week").value()[0].format("MMM D") +
-        .value()[0]
-        .format("MMM D") +
       " - " +
-      getDynamicDateRangeFromString("d_this_week")
+      getDynamicDateRangeFromString("d_this_week").value()[1].format("MMM D"),
-        .value()[1]
-        .format("MMM D"),
   },
   {
     name: "This month",
     value: getDynamicDateRangeFromString("d_this_month"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_this_month").value()[0].format("MMMM"),
-      getDynamicDateRangeFromString("d_this_month")
-        .value()[0]
-        .format("MMMM"),
   },
   {
     name: "This year",
     value: getDynamicDateRangeFromString("d_this_year"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_this_year").value()[0].format("YYYY"),
-      getDynamicDateRangeFromString("d_this_year")
-        .value()[0]
-        .format("YYYY"),
   },
   {
     name: "Last week",
     value: getDynamicDateRangeFromString("d_last_week"),
     label: () =>
-      getDynamicDateRangeFromString("d_last_week")
+      getDynamicDateRangeFromString("d_last_week").value()[0].format("MMM D") +
-        .value()[0]
-        .format("MMM D") +
       " - " +
-      getDynamicDateRangeFromString("d_last_week")
+      getDynamicDateRangeFromString("d_last_week").value()[1].format("MMM D"),
-        .value()[1]
-        .format("MMM D"),
   },
   {
     name: "Last month",
     value: getDynamicDateRangeFromString("d_last_month"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_last_month").value()[0].format("MMMM"),
-      getDynamicDateRangeFromString("d_last_month")
-        .value()[0]
-        .format("MMMM"),
   },
   {
     name: "Last year",
     value: getDynamicDateRangeFromString("d_last_year"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_last_year").value()[0].format("YYYY"),
-      getDynamicDateRangeFromString("d_last_year")
-        .value()[0]
-        .format("YYYY"),
   },
   {
     name: "Last 7 days",
     value: getDynamicDateRangeFromString("d_last_7_days"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_last_7_days").value()[0].format("MMM D") + " - Today",
-      getDynamicDateRangeFromString("d_last_7_days")
-        .value()[0]
-        .format("MMM D") + " - Today",
   },
   {
     name: "Last 14 days",
     value: getDynamicDateRangeFromString("d_last_14_days"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_last_14_days").value()[0].format("MMM D") + " - Today",
-      getDynamicDateRangeFromString("d_last_14_days")
-        .value()[0]
-        .format("MMM D") + " - Today",
   },
   {
     name: "Last 30 days",
     value: getDynamicDateRangeFromString("d_last_30_days"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_last_30_days").value()[0].format("MMM D") + " - Today",
-      getDynamicDateRangeFromString("d_last_30_days")
-        .value()[0]
-        .format("MMM D") + " - Today",
   },
   {
     name: "Last 60 days",
     value: getDynamicDateRangeFromString("d_last_60_days"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_last_60_days").value()[0].format("MMM D") + " - Today",
-      getDynamicDateRangeFromString("d_last_60_days")
-        .value()[0]
-        .format("MMM D") + " - Today",
   },
   {
     name: "Last 90 days",
     value: getDynamicDateRangeFromString("d_last_90_days"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_last_90_days").value()[0].format("MMM D") + " - Today",
-      getDynamicDateRangeFromString("d_last_90_days")
-        .value()[0]
-        .format("MMM D") + " - Today",
   },
   {
     name: "Last 12 months",
     value: getDynamicDateRangeFromString("d_last_12_months"),
     label: null,
   },
+  {
+    name: "Last 10 years",
+    value: getDynamicDateRangeFromString("d_last_10_years"),
+    label: null,
+  },
 ];
 
 const DYNAMIC_DATETIME_OPTIONS = [
   {
     name: "Today",
     value: getDynamicDateRangeFromString("d_today"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_today").value()[0].format("MMM D"),
-      getDynamicDateRangeFromString("d_today")
-        .value()[0]
-        .format("MMM D"),
   },
   {
     name: "Yesterday",
     value: getDynamicDateRangeFromString("d_yesterday"),
-    label: () =>
+    label: () => getDynamicDateRangeFromString("d_yesterday").value()[0].format("MMM D"),
-      getDynamicDateRangeFromString("d_yesterday")
-        .value()[0]
-        .format("MMM D"),
   },
   ...DYNAMIC_DATE_OPTIONS,
 ];

client/app/components/empty-state/EmptyState.jsx

@@ -96,7 +96,7 @@ function EmptyState({
   }, []);
 
   // Show if `onboardingMode=false` or any requested step not completed
-  const shouldShow = !onboardingMode || some(keys(isAvailable), step => isAvailable[step] && !isCompleted[step]);
+  const shouldShow = !onboardingMode || some(keys(isAvailable), (step) => isAvailable[step] && !isCompleted[step]);
 
   if (!shouldShow) {
     return null;
@@ -181,7 +181,7 @@ function EmptyState({
   ];
 
   const stepsItems = getStepsItems ? getStepsItems(defaultStepsItems) : defaultStepsItems;
-  const imageSource = illustrationPath ? illustrationPath : "static/images/illustrations/" + illustration + ".svg";
+  const imageSource = illustrationPath ? illustrationPath : "/static/images/illustrations/" + illustration + ".svg";
 
   return (
     <div className="empty-state-wrapper">
@@ -196,7 +196,7 @@ function EmptyState({
         </div>
         <div className="empty-state__steps">
           <h4>Let&apos;s get started</h4>
-          <ol>{stepsItems.map(item => item.node)}</ol>
+          <ol>{stepsItems.map((item) => item.node)}</ol>
           {helpMessage}
         </div>
       </div>

client/app/components/items-list/ItemsList.tsx

@@ -10,6 +10,10 @@ export interface PaginationOptions {
   itemsPerPage?: number;
 }
 
+export interface SearchOptions {
+  isServerSideFTS?: boolean;
+}
+
 export interface Controller<I, P = any> {
   params: P; // TODO: Find out what params is (except merging with props)
 
@@ -18,7 +22,7 @@ export interface Controller<I, P = any> {
 
   // search
   searchTerm?: string;
-  updateSearch: (searchTerm: string) => void;
+  updateSearch: (searchTerm: string, searchOptions?: SearchOptions) => void;
 
   // tags
   selectedTags: string[];
@@ -28,6 +32,7 @@ export interface Controller<I, P = any> {
   orderByField?: string;
   orderByReverse: boolean;
   toggleSorting: (orderByField: string) => void;
+  setSorting: (orderByField: string, orderByReverse: boolean) => void;
 
   // pagination
   page: number;
@@ -93,7 +98,7 @@ export interface ItemsListWrappedComponentProps<I, P = any> {
 export function wrap<I, P = any>(
   WrappedComponent: React.ComponentType<ItemsListWrappedComponentProps<I>>,
   createItemsSource: () => ItemsSource,
-  createStateStorage: () => StateStorage
+  createStateStorage: ( { ...props }) => StateStorage
 ) {
   class ItemsListWrapper extends React.Component<ItemsListWrapperProps, ItemsListWrapperState<I, P>> {
     private _itemsSource: ItemsSource;
@@ -116,7 +121,7 @@ export function wrap<I, P = any>(
     constructor(props: ItemsListWrapperProps) {
       super(props);
 
-      const stateStorage = createStateStorage();
+      const stateStorage = createStateStorage({ ...props });
       const itemsSource = createItemsSource();
       this._itemsSource = itemsSource;
 
@@ -139,11 +144,33 @@ export function wrap<I, P = any>(
         this.props.onError!(error);
 
       const initialState = this.getState({ ...itemsSource.getState(), isLoaded: false });
-      const { updatePagination, toggleSorting, updateSearch, updateSelectedTags, update, handleError } = itemsSource;
+      const { updatePagination, toggleSorting, setSorting, updateSearch, updateSelectedTags, update, handleError } = itemsSource;
+
+      let isRunningUpdateSearch = false;
+      let pendingUpdateSearchParams: any[] | null = null;
+      const debouncedUpdateSearch = debounce(async (...params) => {
+        // Avoid running multiple updateSerch concurrently.
+        // If an updateSearch is already running, we save the params for the latest call.
+        // When the current updateSearch is finished, we call debouncedUpdateSearch again with the saved params.
+        if (isRunningUpdateSearch) {
+          pendingUpdateSearchParams = params;
+          return;
+        }
+        isRunningUpdateSearch = true;
+        await updateSearch(...params);
+        isRunningUpdateSearch = false;
+        if (pendingUpdateSearchParams) {
+          const pendingParams = pendingUpdateSearchParams;
+          pendingUpdateSearchParams = null;
+          debouncedUpdateSearch(...pendingParams);
+        }
+      }, 200);
+
       this.state = {
         ...initialState,
         toggleSorting, // eslint-disable-line react/no-unused-state
-        updateSearch: debounce(updateSearch, 200), // eslint-disable-line react/no-unused-state
+        setSorting, // eslint-disable-line react/no-unused-state
+        updateSearch: debouncedUpdateSearch, // eslint-disable-line react/no-unused-state
         updateSelectedTags, // eslint-disable-line react/no-unused-state
         updatePagination, // eslint-disable-line react/no-unused-state
         update, // eslint-disable-line react/no-unused-state

client/app/components/items-list/classes/ItemsSource.js

@@ -39,14 +39,12 @@ export class ItemsSource {
     const customParams = {};
     const context = {
       ...this.getCallbackContext(),
-      setCustomParams: params => {
+      setCustomParams: (params) => {
         extend(customParams, params);
       },
     };
     return this._beforeUpdate().then(() => {
-      const fetchToken = Math.random()
+      const fetchToken = Math.random().toString(36).substr(2);
-        .toString(36)
-        .substr(2);
       this._currentFetchToken = fetchToken;
       return this._fetcher
         .fetch(changes, state, context)
@@ -59,7 +57,7 @@ export class ItemsSource {
             return this._afterUpdate();
           }
         })
-        .catch(error => this.handleError(error));
+        .catch((error) => this.handleError(error));
     });
   }
 
@@ -124,28 +122,35 @@ export class ItemsSource {
     });
   };
 
-  toggleSorting = orderByField => {
+  toggleSorting = (orderByField) => {
     this._sorter.toggleField(orderByField);
     this._savedOrderByField = this._sorter.field;
     this._changed({ sorting: true });
   };
 
-  updateSearch = searchTerm => {
+  setSorting = (orderByField, orderByReverse) => {
+    this._sorter.setField(orderByField);
+    this._sorter.setReverse(orderByReverse);
+    this._savedOrderByField = this._sorter.field;
+    this._changed({ sorting: true });
+  };
+
+  updateSearch = (searchTerm, options) => {
     // here we update state directly, but later `fetchData` will update it properly
     this._searchTerm = searchTerm;
     // in search mode ignore the ordering and use the ranking order
     // provided by the server-side FTS backend instead, unless it was
     // requested by the user by actively ordering in search mode
-    if (searchTerm === "") {
+    if (searchTerm === "" || !options?.isServerSideFTS) {
       this._sorter.setField(this._savedOrderByField); // restore ordering
     } else {
       this._sorter.setField(null);
     }
     this._paginator.setPage(1);
-    this._changed({ search: true, pagination: { page: true } });
+    return this._changed({ search: true, pagination: { page: true } });
   };
 
-  updateSelectedTags = selectedTags => {
+  updateSelectedTags = (selectedTags) => {
     this._selectedTags = selectedTags;
     this._paginator.setPage(1);
     this._changed({ tags: true, pagination: { page: true } });
@@ -153,7 +158,7 @@ export class ItemsSource {
 
   update = () => this._changed();
 
-  handleError = error => {
+  handleError = (error) => {
     if (isFunction(this.onError)) {
       this.onError(error);
     }
@@ -172,7 +177,7 @@ export class ResourceItemsSource extends ItemsSource {
       processResults: (results, context) => {
         let processItem = getItemProcessor(context);
         processItem = isFunction(processItem) ? processItem : identity;
-        return map(results, item => processItem(item, context));
+        return map(results, (item) => processItem(item, context));
       },
     });
   }

client/app/components/items-list/components/ItemsTable.jsx

@@ -44,7 +44,7 @@ export const Columns = {
   date(overrides) {
     return extend(
       {
-        render: text => formatDate(text),
+        render: (text) => formatDate(text),
       },
       overrides
     );
@@ -52,7 +52,7 @@ export const Columns = {
   dateTime(overrides) {
     return extend(
       {
-        render: text => formatDateTime(text),
+        render: (text) => formatDateTime(text),
       },
       overrides
     );
@@ -62,7 +62,7 @@ export const Columns = {
       {
         width: "1%",
         className: "text-nowrap",
-        render: text => durationHumanize(text),
+        render: (text) => durationHumanize(text),
       },
       overrides
     );
@@ -70,7 +70,7 @@ export const Columns = {
   timeAgo(overrides, timeAgoCustomProps = undefined) {
     return extend(
       {
-        render: value => <TimeAgo date={value} {...timeAgoCustomProps} />,
+        render: (value) => <TimeAgo date={value} {...timeAgoCustomProps} />,
       },
       overrides
     );
@@ -110,6 +110,7 @@ export default class ItemsTable extends React.Component {
     orderByField: PropTypes.string,
     orderByReverse: PropTypes.bool,
     toggleSorting: PropTypes.func,
+    setSorting: PropTypes.func,
     "data-test": PropTypes.string,
     rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   };
@@ -127,18 +128,15 @@ export default class ItemsTable extends React.Component {
   };
 
   prepareColumns() {
-    const { orderByField, orderByReverse, toggleSorting } = this.props;
+    const { orderByField, orderByReverse } = this.props;
     const orderByDirection = orderByReverse ? "descend" : "ascend";
 
     return map(
       map(
-        filter(this.props.columns, column => (isFunction(column.isAvailable) ? column.isAvailable() : true)),
+        filter(this.props.columns, (column) => (isFunction(column.isAvailable) ? column.isAvailable() : true)),
-        column => extend(column, { orderByField: column.orderByField || column.field })
+        (column) => extend(column, { orderByField: column.orderByField || column.field })
       ),
       (column, index) => {
-        // Bind click events only to sortable columns
-        const onHeaderCell = column.sorter ? () => ({ onClick: () => toggleSorting(column.orderByField) }) : null;
-
         // Wrap render function to pass correct arguments
         const render = isFunction(column.render) ? (text, row) => column.render(text, row.item) : identity;
 
@@ -146,14 +144,13 @@ export default class ItemsTable extends React.Component {
           key: "column" + index,
           dataIndex: ["item", column.field],
           defaultSortOrder: column.orderByField === orderByField ? orderByDirection : null,
-          onHeaderCell,
           render,
         });
       }
     );
   }
 
-  getRowKey = record => {
+  getRowKey = (record) => {
     const { rowKey } = this.props;
     if (rowKey) {
       if (isFunction(rowKey)) {
@@ -172,22 +169,43 @@ export default class ItemsTable extends React.Component {
 
     // Bind events only if `onRowClick` specified
     const onTableRow = isFunction(this.props.onRowClick)
-      ? row => ({
+      ? (row) => ({
-          onClick: event => {
+          onClick: (event) => {
             this.props.onRowClick(event, row.item);
           },
         })
       : null;
 
+    const onChange = (pagination, filters, sorter, extra) => {
+      const action = extra?.action;
+      if (action === "sort") {
+        const propsColumn = this.props.columns.find((column) => column.field === sorter.field[1]);
+        if (!propsColumn.sorter) {
+          return;
+        }
+        let orderByField = propsColumn.orderByField;
+        const orderByReverse = sorter.order === "descend";
+
+        if (orderByReverse === undefined) {
+          orderByField = null;
+        }
+        if (this.props.setSorting) {
+          this.props.setSorting(orderByField, orderByReverse);
+        } else {
+          this.props.toggleSorting(orderByField);
+        }
+      }
+    };
+
     const { showHeader } = this.props;
     if (this.props.loading) {
       if (isEmpty(tableDataProps.dataSource)) {
-        tableDataProps.columns = tableDataProps.columns.map(column => ({
+        tableDataProps.columns = tableDataProps.columns.map((column) => ({
           ...column,
           sorter: false,
           render: () => <Skeleton active paragraph={false} />,
         }));
-        tableDataProps.dataSource = range(10).map(key => ({ key: `${key}` }));
+        tableDataProps.dataSource = range(10).map((key) => ({ key: `${key}` }));
       } else {
         tableDataProps.loading = { indicator: null };
       }
@@ -200,6 +218,7 @@ export default class ItemsTable extends React.Component {
         rowKey={this.getRowKey}
         pagination={false}
         onRow={onTableRow}
+        onChange={onChange}
         data-test={this.props["data-test"]}
         {...tableDataProps}
       />

client/app/components/proptypes.js

@@ -65,6 +65,7 @@ export const Query = PropTypes.shape({
 
 export const AlertOptions = PropTypes.shape({
   column: PropTypes.string,
+  selector: PropTypes.oneOf(["first", "min", "max"]),
   op: PropTypes.oneOf([">", ">=", "<", "<=", "==", "!="]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   custom_subject: PropTypes.string,
@@ -83,6 +84,7 @@ export const Alert = PropTypes.shape({
   query: Query,
   options: PropTypes.shape({
     column: PropTypes.string,
+    selector: PropTypes.string,
     op: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }).isRequired,

client/app/components/queries/SchemaBrowser.jsx

@@ -47,20 +47,30 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
   return (
     <div {...props}>
       <div className="schema-list-item">
-        <PlainButton className="table-name" onClick={onToggle}>
+        <Tooltip
-          <i className="fa fa-table m-r-5" aria-hidden="true" />
+          title={item.description}
-          <strong>
+          mouseEnterDelay={0}
-            <span title={item.name}>{tableDisplayName}</span>
+          mouseLeaveDelay={0}
-            {!isNil(item.size) && <span> ({item.size})</span>}
+          placement="rightTop"
-          </strong>
+          trigger={item.description ? "hover" : ""}
-        </PlainButton>
+          overlayStyle={{ whiteSpace: "pre-line" }}
+        >
+          <PlainButton className="table-name" onClick={onToggle}>
+            <i className="fa fa-table m-r-5" aria-hidden="true" />
+            <strong>
+              <span title={item.name}>{tableDisplayName}</span>
+              {!isNil(item.size) && <span> ({item.size})</span>}
+            </strong>
+          </PlainButton>
+        </Tooltip>
         <Tooltip
           title="Insert table name into query text"
           mouseEnterDelay={0}
           mouseLeaveDelay={0}
           placement="topRight"
-          arrowPointAtCenter>
+          arrowPointAtCenter
-          <PlainButton className="copy-to-editor" onClick={e => handleSelect(e, item.name)}>
+        >
+          <PlainButton className="copy-to-editor" onClick={(e) => handleSelect(e, item.name)}>
             <i className="fa fa-angle-double-right" aria-hidden="true" />
           </PlainButton>
         </Tooltip>
@@ -70,16 +80,23 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
           {item.loading ? (
             <div className="table-open">Loading...</div>
           ) : (
-            map(item.columns, column => {
+            map(item.columns, (column) => {
               const columnName = get(column, "name");
               const columnType = get(column, "type");
+              const columnDescription = get(column, "description");
               return (
                 <Tooltip
-                  title="Insert column name into query text"
+                  title={"Insert column name into query text" + (columnDescription ? "\n" + columnDescription : "")}
                   mouseEnterDelay={0}
                   mouseLeaveDelay={0}
-                  placement="rightTop">
+                  placement="rightTop"
-                  <PlainButton key={columnName} className="table-open-item" onClick={e => handleSelect(e, columnName)}>
+                  overlayStyle={{ whiteSpace: "pre-line" }}
+                >
+                  <PlainButton
+                    key={columnName}
+                    className="table-open-item"
+                    onClick={(e) => handleSelect(e, columnName)}
+                  >
                     <div>
                       {columnName} {columnType && <span className="column-type">{columnType}</span>}
                     </div>
@@ -168,7 +185,7 @@ export function SchemaList({ loading, schema, expandedFlags, onTableExpand, onIt
 }
 
 export function applyFilterOnSchema(schema, filterString) {
-  const filters = filter(filterString.toLowerCase().split(/\s+/), s => s.length > 0);
+  const filters = filter(filterString.toLowerCase().split(/\s+/), (s) => s.length > 0);
 
   // Empty string: return original schema
   if (filters.length === 0) {
@@ -181,9 +198,9 @@ export function applyFilterOnSchema(schema, filterString) {
     const columnFilter = filters[0];
     return filter(
       schema,
-      item =>
+      (item) =>
         includes(item.name.toLowerCase(), nameFilter) ||
-        some(item.columns, column => includes(get(column, "name").toLowerCase(), columnFilter))
+        some(item.columns, (column) => includes(get(column, "name").toLowerCase(), columnFilter))
     );
   }
 
@@ -191,11 +208,11 @@ export function applyFilterOnSchema(schema, filterString) {
   const nameFilter = filters[0];
   const columnFilter = filters[1];
   return filter(
-    map(schema, item => {
+    map(schema, (item) => {
       if (includes(item.name.toLowerCase(), nameFilter)) {
         item = {
           ...item,
-          columns: filter(item.columns, column => includes(get(column, "name").toLowerCase(), columnFilter)),
+          columns: filter(item.columns, (column) => includes(get(column, "name").toLowerCase(), columnFilter)),
         };
         return item.columns.length > 0 ? item : null;
       }
@@ -243,7 +260,7 @@ export default function SchemaBrowser({
           placeholder="Search schema..."
           aria-label="Search schema"
           disabled={schema.length === 0}
-          onChange={event => handleFilterChange(event.target.value)}
+          onChange={(event) => handleFilterChange(event.target.value)}
         />
 
         <Tooltip title="Refresh Schema">

client/app/components/visualizations/EditVisualizationDialog.jsx

@@ -148,7 +148,9 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
 
   function dismiss() {
     const optionsChanged = !isEqual(options, defaultState.originalOptions);
-    confirmDialogClose(nameChanged || optionsChanged).then(dialog.dismiss);
+    confirmDialogClose(nameChanged || optionsChanged)
+      .then(dialog.dismiss)
+      .catch(() => {});
   }
 
   // When editing existing visualization chart type selector is disabled, so add only existing visualization's

client/app/components/visualizations/visualizationComponents.jsx

@@ -59,6 +59,7 @@ function wrapComponentWithSettings(WrappedComponent) {
         "dateTimeFormat",
         "integerFormat",
         "floatFormat",
+        "nullValue",
         "booleanValues",
         "tableCellMaxJSONSize",
         "allowCustomJSVisualizations",

client/app/config/dashboard-grid-options.js

@@ -1,13 +1,13 @@
 export default {
-  columns: 6, // grid columns count
+  columns: 12, // grid columns count
   rowHeight: 50, // grid row height (incl. bottom padding)
   margins: 15, // widget margins
   mobileBreakPoint: 800,
   // defaults for widgets
-  defaultSizeX: 3,
+  defaultSizeX: 6,
   defaultSizeY: 3,
-  minSizeX: 1,
+  minSizeX: 2,
-  maxSizeX: 6,
+  maxSizeX: 12,
-  minSizeY: 1,
+  minSizeY: 2,
   maxSizeY: 1000,
 };

client/app/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" translate="no">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />

client/app/multi_org.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <base href="{{base_href}}" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script src="/static/unsupportedRedirect.js" async></script>
+    <script src="<%= htmlWebpackPlugin.options.staticPath %>unsupportedRedirect.js" async></script>
 
     <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicon-96x96.png" />

client/app/pages/alert/Alert.jsx

@@ -16,6 +16,7 @@ import MenuButton from "./components/MenuButton";
 import AlertView from "./AlertView";
 import AlertEdit from "./AlertEdit";
 import AlertNew from "./AlertNew";
+import notifications from "@/services/notifications";
 
 const MODES = {
   NEW: 0,
@@ -64,6 +65,7 @@ class Alert extends React.Component {
       this.setState({
         alert: {
           options: {
+            selector: "first",
             op: ">",
             value: 1,
             muted: false,
@@ -75,7 +77,7 @@ class Alert extends React.Component {
     } else {
       const { alertId } = this.props;
       AlertService.get({ id: alertId })
-        .then(alert => {
+        .then((alert) => {
           if (this._isMounted) {
             const canEdit = currentUser.canEdit(alert);
 
@@ -93,7 +95,7 @@ class Alert extends React.Component {
             this.onQuerySelected(alert.query);
           }
         })
-        .catch(error => {
+        .catch((error) => {
           if (this._isMounted) {
             this.props.onError(error);
           }
@@ -112,7 +114,7 @@ class Alert extends React.Component {
     alert.rearm = pendingRearm || null;
 
     return AlertService.save(alert)
-      .then(alert => {
+      .then((alert) => {
         notification.success("Saved.");
         navigateTo(`alerts/${alert.id}`, true);
         this.setState({ alert, mode: MODES.VIEW });
@@ -122,7 +124,7 @@ class Alert extends React.Component {
       });
   };
 
-  onQuerySelected = query => {
+  onQuerySelected = (query) => {
     this.setState(({ alert }) => ({
       alert: Object.assign(alert, { query }),
       queryResult: null,
@@ -130,7 +132,7 @@ class Alert extends React.Component {
 
     if (query) {
       // get cached result for column names and values
-      new QueryService(query).getQueryResultPromise().then(queryResult => {
+      new QueryService(query).getQueryResultPromise().then((queryResult) => {
         if (this._isMounted) {
           this.setState({ queryResult });
           let { column } = this.state.alert.options;
@@ -146,18 +148,18 @@ class Alert extends React.Component {
     }
   };
 
-  onNameChange = name => {
+  onNameChange = (name) => {
     const { alert } = this.state;
     this.setState({
       alert: Object.assign(alert, { name }),
     });
   };
 
-  onRearmChange = pendingRearm => {
+  onRearmChange = (pendingRearm) => {
     this.setState({ pendingRearm });
   };
 
-  setAlertOptions = obj => {
+  setAlertOptions = (obj) => {
     const { alert } = this.state;
     const options = { ...alert.options, ...obj };
     this.setState({
@@ -177,6 +179,17 @@ class Alert extends React.Component {
       });
   };
 
+  evaluate = () => {
+    const { alert } = this.state;
+    return AlertService.evaluate(alert)
+      .then(() => {
+        notification.success("Alert evaluated. Refresh page for updated status.");
+      })
+      .catch(() => {
+        notifications.error("Failed to evaluate alert.");
+      });
+  };
+
   mute = () => {
     const { alert } = this.state;
     return AlertService.mute(alert)
@@ -223,7 +236,14 @@ class Alert extends React.Component {
     const { queryResult, mode, canEdit, pendingRearm } = this.state;
 
     const menuButton = (
-      <MenuButton doDelete={this.delete} muted={muted} mute={this.mute} unmute={this.unmute} canEdit={canEdit} />
+      <MenuButton
+        doDelete={this.delete}
+        muted={muted}
+        mute={this.mute}
+        unmute={this.unmute}
+        canEdit={canEdit}
+        evaluate={this.evaluate}
+      />
     );
 
     const commonProps = {
@@ -258,7 +278,7 @@ routes.register(
   routeWithUserSession({
     path: "/alerts/new",
     title: "New Alert",
-    render: pageProps => <Alert {...pageProps} mode={MODES.NEW} />,
+    render: (pageProps) => <Alert {...pageProps} mode={MODES.NEW} />,
   })
 );
 routes.register(
@@ -266,7 +286,7 @@ routes.register(
   routeWithUserSession({
     path: "/alerts/:alertId",
     title: "Alert",
-    render: pageProps => <Alert {...pageProps} mode={MODES.VIEW} />,
+    render: (pageProps) => <Alert {...pageProps} mode={MODES.VIEW} />,
   })
 );
 routes.register(
@@ -274,6 +294,6 @@ routes.register(
   routeWithUserSession({
     path: "/alerts/:alertId/edit",
     title: "Alert",
-    render: pageProps => <Alert {...pageProps} mode={MODES.EDIT} />,
+    render: (pageProps) => <Alert {...pageProps} mode={MODES.EDIT} />,
   })
 );

client/app/pages/alert/AlertView.jsx

@@ -68,13 +68,23 @@ export default class AlertView extends React.Component {
       <>
         <Title name={name} alert={alert}>
           <DynamicComponent name="AlertView.HeaderExtra" alert={alert} />
-          <Tooltip title={canEdit ? "" : "You do not have sufficient permissions to edit this alert"}>
+          {canEdit ? (
-            <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
+            <>
-              <i className="fa fa-edit m-r-5" aria-hidden="true" />
+              <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
-              Edit
+                <i className="fa fa-edit m-r-5" aria-hidden="true" />
-            </Button>
+                Edit
-            {menuButton}
+              </Button>
-          </Tooltip>
+              {menuButton}
+            </>
+          ) : (
+            <Tooltip title="You do not have sufficient permissions to edit this alert">
+              <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
+                <i className="fa fa-edit m-r-5" aria-hidden="true" />
+                Edit
+              </Button>
+              {menuButton}
+            </Tooltip>
+          )}
         </Title>
         <div className="bg-white tiled p-20">
           <Grid.Row type="flex" gutter={16}>

client/app/pages/alert/components/Criteria.jsx

@@ -54,23 +54,74 @@ export default function Criteria({ columnNames, resultValues, alertOptions, onCh
     return null;
   })();
 
-  const columnHint = (
+  let columnHint;
-    <small className="alert-criteria-hint">
+
-      Top row value is <code className="p-0">{toString(columnValue) || "unknown"}</code>
+  if (alertOptions.selector === "first") {
-    </small>
+    columnHint = (
-  );
+      <small className="alert-criteria-hint">
+        Top row value is <code className="p-0">{toString(columnValue) || "unknown"}</code>
+      </small>
+    );
+  } else if (alertOptions.selector === "max") {
+    columnHint = (
+      <small className="alert-criteria-hint">
+        Max column value is{" "}
+        <code className="p-0">
+          {toString(
+            Math.max(...resultValues.map((o) => Number(o[alertOptions.column])).filter((value) => !isNaN(value)))
+          ) || "unknown"}
+        </code>
+      </small>
+    );
+  } else if (alertOptions.selector === "min") {
+    columnHint = (
+      <small className="alert-criteria-hint">
+        Min column value is{" "}
+        <code className="p-0">
+          {toString(
+            Math.min(...resultValues.map((o) => Number(o[alertOptions.column])).filter((value) => !isNaN(value)))
+          ) || "unknown"}
+        </code>
+      </small>
+    );
+  }
 
   return (
     <div data-test="Criteria">
+      <div className="input-title">
+        <span className="input-label">Selector</span>
+        {editMode ? (
+          <Select
+            value={alertOptions.selector}
+            onChange={(selector) => onChange({ selector })}
+            optionLabelProp="label"
+            dropdownMatchSelectWidth={false}
+            style={{ width: 80 }}
+          >
+            <Select.Option value="first" label="first">
+              first
+            </Select.Option>
+            <Select.Option value="min" label="min">
+              min
+            </Select.Option>
+            <Select.Option value="max" label="max">
+              max
+            </Select.Option>
+          </Select>
+        ) : (
+          <DisabledInput minWidth={60}>{alertOptions.selector}</DisabledInput>
+        )}
+      </div>
       <div className="input-title">
         <span className="input-label">Value column</span>
         {editMode ? (
           <Select
             value={alertOptions.column}
-            onChange={column => onChange({ column })}
+            onChange={(column) => onChange({ column })}
             dropdownMatchSelectWidth={false}
-            style={{ minWidth: 100 }}>
+            style={{ minWidth: 100 }}
-            {columnNames.map(name => (
+          >
+            {columnNames.map((name) => (
               <Select.Option key={name}>{name}</Select.Option>
             ))}
           </Select>
@@ -83,10 +134,11 @@ export default function Criteria({ columnNames, resultValues, alertOptions, onCh
         {editMode ? (
           <Select
             value={alertOptions.op}
-            onChange={op => onChange({ op })}
+            onChange={(op) => onChange({ op })}
             optionLabelProp="label"
             dropdownMatchSelectWidth={false}
-            style={{ width: 55 }}>
+            style={{ width: 55 }}
+          >
             <Select.Option value=">" label={CONDITIONS[">"]}>
               {CONDITIONS[">"]} greater than
             </Select.Option>
@@ -125,7 +177,7 @@ export default function Criteria({ columnNames, resultValues, alertOptions, onCh
             id="threshold-criterion"
             style={{ width: 90 }}
             value={alertOptions.value}
-            onChange={e => onChange({ value: e.target.value })}
+            onChange={(e) => onChange({ value: e.target.value })}
           />
         ) : (
           <DisabledInput minWidth={50}>{alertOptions.value}</DisabledInput>

client/app/pages/alert/components/MenuButton.jsx

@@ -11,7 +11,7 @@ import LoadingOutlinedIcon from "@ant-design/icons/LoadingOutlined";
 import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
 import PlainButton from "@/components/PlainButton";
 
-export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
+export default function MenuButton({ doDelete, canEdit, mute, unmute, evaluate, muted }) {
   const [loading, setLoading] = useState(false);
 
   const execute = useCallback(action => {
@@ -55,6 +55,9 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
           <Menu.Item>
             <PlainButton onClick={confirmDelete}>Delete</PlainButton>
           </Menu.Item>
+          <Menu.Item>
+            <PlainButton onClick={() => execute(evaluate)}>Evaluate</PlainButton>
+          </Menu.Item>
         </Menu>
       }>
       <Button aria-label="More actions">
@@ -69,6 +72,7 @@ MenuButton.propTypes = {
   canEdit: PropTypes.bool.isRequired,
   mute: PropTypes.func.isRequired,
   unmute: PropTypes.func.isRequired,
+  evaluate: PropTypes.func.isRequired,
   muted: PropTypes.bool,
 };
 

client/app/pages/dashboards/DashboardList.jsx

@@ -81,12 +81,19 @@ function DashboardListExtraActions(props) {
 }
 
 function DashboardList({ controller }) {
+  let usedListColumns = listColumns;
+  if (controller.params.currentPage === "favorites") {
+    usedListColumns = [
+      ...usedListColumns,
+      Columns.dateTime.sortable({ title: "Starred At", field: "starred_at", width: "1%" }),
+    ];
+  }
   const {
     areExtraActionsAvailable,
     listColumns: tableColumns,
     Component: ExtraActionsComponent,
     selectedItems,
-  } = useItemsListExtraActions(controller, listColumns, DashboardListExtraActions);
+  } = useItemsListExtraActions(controller, usedListColumns, DashboardListExtraActions);
 
   return (
     <div className="page-dashboard-list">
@@ -139,9 +146,9 @@ function DashboardList({ controller }) {
                       showPageSizeSelect
                       totalCount={controller.totalItemsCount}
                       pageSize={controller.itemsPerPage}
-                      onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
+                      onPageSizeChange={(itemsPerPage) => controller.updatePagination({ itemsPerPage })}
                       page={controller.page}
-                      onChange={page => controller.updatePagination({ page })}
+                      onChange={(page) => controller.updatePagination({ page })}
                     />
                   </div>
                 </React.Fragment>
@@ -170,10 +177,10 @@ const DashboardListPage = itemsList(
         }[currentPage];
       },
       getItemProcessor() {
-        return item => new Dashboard(item);
+        return (item) => new Dashboard(item);
       },
     }),
-  () => new UrlStateStorage({ orderByField: "created_at", orderByReverse: true })
+  ({ ...props }) => new UrlStateStorage({ orderByField: props.orderByField ?? "created_at", orderByReverse: true })
 );
 
 routes.register(
@@ -181,7 +188,7 @@ routes.register(
   routeWithUserSession({
     path: "/dashboards",
     title: "Dashboards",
-    render: pageProps => <DashboardListPage {...pageProps} currentPage="all" />,
+    render: (pageProps) => <DashboardListPage {...pageProps} currentPage="all" />,
   })
 );
 routes.register(
@@ -189,7 +196,7 @@ routes.register(
   routeWithUserSession({
     path: "/dashboards/favorites",
     title: "Favorite Dashboards",
-    render: pageProps => <DashboardListPage {...pageProps} currentPage="favorites" />,
+    render: (pageProps) => <DashboardListPage {...pageProps} currentPage="favorites" orderByField="starred_at" />,
   })
 );
 routes.register(
@@ -197,6 +204,6 @@ routes.register(
   routeWithUserSession({
     path: "/dashboards/my",
     title: "My Dashboards",
-    render: pageProps => <DashboardListPage {...pageProps} currentPage="my" />,
+    render: (pageProps) => <DashboardListPage {...pageProps} currentPage="my" />,
   })
 );

client/app/pages/dashboards/DashboardPage.jsx

@@ -31,7 +31,8 @@ function DashboardSettings({ dashboardConfiguration }) {
       <Checkbox
         checked={!!dashboard.dashboard_filters_enabled}
         onChange={({ target }) => updateDashboard({ dashboard_filters_enabled: target.checked })}
-        data-test="DashboardFiltersCheckbox">
+        data-test="DashboardFiltersCheckbox"
+      >
         Use Dashboard Level Filters
       </Checkbox>
     </div>
@@ -90,9 +91,9 @@ function DashboardComponent(props) {
 
   const [pageContainer, setPageContainer] = useState(null);
   const [bottomPanelStyles, setBottomPanelStyles] = useState({});
-  const onParametersEdit = parameters => {
+  const onParametersEdit = (parameters) => {
     const paramOrder = map(parameters, "name");
-    updateDashboard({ options: { globalParamOrder: paramOrder } });
+    updateDashboard({ options: { ...dashboard.options, globalParamOrder: paramOrder } });
   };
 
   useEffect(() => {
@@ -175,7 +176,7 @@ function DashboardPage({ dashboardSlug, dashboardId, onError }) {
 
   useEffect(() => {
     Dashboard.get({ id: dashboardId, slug: dashboardSlug })
-      .then(dashboardData => {
+      .then((dashboardData) => {
         recordEvent("view", "dashboard", dashboardData.id);
         setDashboard(dashboardData);
 
@@ -207,7 +208,7 @@ routes.register(
   "Dashboards.LegacyViewOrEdit",
   routeWithUserSession({
     path: "/dashboard/:dashboardSlug",
-    render: pageProps => <DashboardPage {...pageProps} />,
+    render: (pageProps) => <DashboardPage {...pageProps} />,
   })
 );
 
@@ -215,6 +216,6 @@ routes.register(
   "Dashboards.ViewOrEdit",
   routeWithUserSession({
     path: "/dashboards/:dashboardId([^-]+)(-.*)?",
-    render: pageProps => <DashboardPage {...pageProps} />,
+    render: (pageProps) => <DashboardPage {...pageProps} />,
   })
 );

client/app/pages/dashboards/PublicDashboardPage.less

@@ -8,7 +8,7 @@
   }
 
   > .container {
-    min-height: calc(100vh - 95px);
+    min-height: calc(100% - 95px);
   }
 
   .loading-message {

client/app/pages/dashboards/components/DashboardHeader.jsx

@@ -22,7 +22,7 @@ import { DashboardStatusEnum } from "../hooks/useDashboard";
 import "./DashboardHeader.less";
 
 function getDashboardTags() {
-  return getTags("api/dashboards/tags").then(tags => map(tags, t => t.name));
+  return getTags("api/dashboards/tags").then((tags) => map(tags, (t) => t.name));
 }
 
 function buttonType(value) {
@@ -38,7 +38,7 @@ function DashboardPageTitle({ dashboardConfiguration }) {
         <h3>
           <EditInPlace
             isEditable={editingLayout}
-            onDone={name => updateDashboard({ name })}
+            onDone={(name) => updateDashboard({ name })}
             value={dashboard.name}
             ignoreBlanks
           />
@@ -53,7 +53,7 @@ function DashboardPageTitle({ dashboardConfiguration }) {
         isArchived={dashboard.is_archived}
         canEdit={canEditDashboard}
         getAvailableTags={getDashboardTags}
-        onEdit={tags => updateDashboard({ tags })}
+        onEdit={(tags) => updateDashboard({ tags })}
       />
     </div>
   );
@@ -89,14 +89,15 @@ function RefreshButton({ dashboardConfiguration }) {
         placement="bottomRight"
         overlay={
           <Menu onClick={onRefreshRateSelected} selectedKeys={[`${refreshRate}`]}>
-            {refreshRateOptions.map(option => (
+            {refreshRateOptions.map((option) => (
               <Menu.Item key={`${option}`} disabled={!includes(allowedIntervals, option)}>
                 {durationHumanize(option)}
               </Menu.Item>
             ))}
             {refreshRate && <Menu.Item key={null}>Disable auto refresh</Menu.Item>}
           </Menu>
-        }>
+        }
+      >
         <Button className="icon-button hidden-xs" type={buttonType(refreshRate)}>
           <i className="fa fa-angle-down" aria-hidden="true" />
           <span className="sr-only">Split button!</span>
@@ -119,6 +120,8 @@ function DashboardMoreOptionsButton({ dashboardConfiguration }) {
     managePermissions,
     gridDisabled,
     isDashboardOwnerOrAdmin,
+    isDuplicating,
+    duplicateDashboard,
   } = dashboardConfiguration;
 
   const archive = () => {
@@ -142,6 +145,14 @@ function DashboardMoreOptionsButton({ dashboardConfiguration }) {
           <Menu.Item className={cx({ hidden: gridDisabled })}>
             <PlainButton onClick={() => setEditingLayout(true)}>Edit</PlainButton>
           </Menu.Item>
+          {!isDuplicating && dashboard.canEdit() && (
+            <Menu.Item>
+              <PlainButton onClick={duplicateDashboard}>
+                Fork <i className="fa fa-external-link m-l-5" aria-hidden="true" />
+                <span className="sr-only">(opens in a new tab)</span>
+              </PlainButton>
+            </Menu.Item>
+          )}
           {clientConfig.showPermissionsControl && isDashboardOwnerOrAdmin && (
             <Menu.Item>
               <PlainButton onClick={managePermissions}>Manage Permissions</PlainButton>
@@ -156,7 +167,8 @@ function DashboardMoreOptionsButton({ dashboardConfiguration }) {
             <PlainButton onClick={archive}>Archive</PlainButton>
           </Menu.Item>
         </Menu>
-      }>
+      }
+    >
       <Button className="icon-button m-l-5" data-test="DashboardMoreButton" aria-label="More actions">
         <EllipsisOutlinedIcon rotate={90} aria-hidden="true" />
       </Button>
@@ -206,7 +218,8 @@ function DashboardControl({ dashboardConfiguration, headerExtra }) {
                 type={buttonType(fullscreen)}
                 className="icon-button m-l-5"
                 onClick={toggleFullscreen}
-                aria-label="Toggle fullscreen display">
+                aria-label="Toggle fullscreen display"
+              >
                 <i className="zmdi zmdi-fullscreen" aria-hidden="true" />
               </Button>
             </Tooltip>
@@ -219,7 +232,8 @@ function DashboardControl({ dashboardConfiguration, headerExtra }) {
                 type={buttonType(dashboard.publicAccessEnabled)}
                 onClick={showShareDashboardDialog}
                 data-test="OpenShareForm"
-                aria-label="Share">
+                aria-label="Share"
+              >
                 <i className="zmdi zmdi-share" aria-hidden="true" />
               </Button>
             </Tooltip>
@@ -242,7 +256,11 @@ function DashboardEditControl({ dashboardConfiguration, headerExtra }) {
     doneBtnClickedWhileSaving,
     dashboardStatus,
     retrySaveDashboardLayout,
+    saveDashboardParameters,
   } = dashboardConfiguration;
+  const handleDoneEditing = () => {
+    saveDashboardParameters().then(() => setEditingLayout(false));
+  };
   let status;
   if (dashboardStatus === DashboardStatusEnum.SAVED) {
     status = <span className="save-status">Saved</span>;
@@ -267,7 +285,7 @@ function DashboardEditControl({ dashboardConfiguration, headerExtra }) {
           Retry
         </Button>
       ) : (
-        <Button loading={doneBtnClickedWhileSaving} type="primary" onClick={() => setEditingLayout(false)}>
+        <Button loading={doneBtnClickedWhileSaving} type="primary" onClick={handleDoneEditing}>
           {!doneBtnClickedWhileSaving && <i className="fa fa-check m-r-5" aria-hidden="true" />} Done Editing
         </Button>
       )}

client/app/pages/dashboards/components/ShareDashboardDialog.jsx

@@ -94,12 +94,12 @@ class ShareDashboardDialog extends React.Component {
   };
 
   render() {
-    const { dialog, dashboard } = this.props;
+    const { dialog, dashboard, hasOnlySafeQueries } = this.props;
-
+    const headerContent = this.constructor.headerContent;
     return (
-      <Modal {...dialog.props} title={this.constructor.headerContent} footer={null}>
+      <Modal {...dialog.props} title={headerContent} footer={null}>
         <Form layout="horizontal">
-          {!this.props.hasOnlySafeQueries && (
+          {!hasOnlySafeQueries && (
             <Form.Item>
               <Alert
                 message="For your security, sharing is currently not supported for dashboards containing queries with text parameters. Consider changing the text parameters in your query to a different type."
@@ -107,6 +107,7 @@ class ShareDashboardDialog extends React.Component {
               />
             </Form.Item>
           )}
+
           <Form.Item label="Allow public access" {...this.formItemProps}>
             <Switch
               checked={dashboard.publicAccessEnabled}

client/app/pages/dashboards/hooks/useDashboard.js

@@ -15,18 +15,19 @@ import ShareDashboardDialog from "../components/ShareDashboardDialog";
 import useFullscreenHandler from "../../../lib/hooks/useFullscreenHandler";
 import useRefreshRateHandler from "./useRefreshRateHandler";
 import useEditModeHandler from "./useEditModeHandler";
+import useDuplicateDashboard from "./useDuplicateDashboard";
 import { policy } from "@/services/policy";
 
 export { DashboardStatusEnum } from "./useEditModeHandler";
 
 function getAffectedWidgets(widgets, updatedParameters = []) {
   return !isEmpty(updatedParameters)
-    ? widgets.filter(widget =>
+    ? widgets.filter((widget) =>
         Object.values(widget.getParameterMappings())
           .filter(({ type }) => type === "dashboard-level")
           .some(({ mapTo }) =>
             includes(
-              updatedParameters.map(p => p.name),
+              updatedParameters.map((p) => p.name),
               mapTo
             )
           )
@@ -49,10 +50,12 @@ function useDashboard(dashboardData) {
     [dashboard]
   );
   const hasOnlySafeQueries = useMemo(
-    () => every(dashboard.widgets, w => (w.getQuery() ? w.getQuery().is_safe : true)),
+    () => every(dashboard.widgets, (w) => (w.getQuery() ? w.getQuery().is_safe : true)),
     [dashboard]
   );
 
+  const [isDuplicating, duplicateDashboard] = useDuplicateDashboard(dashboard);
+
   const managePermissions = useCallback(() => {
     const aclUrl = `api/dashboards/${dashboard.id}/acl`;
     PermissionsEditorDialog.showModal({
@@ -64,19 +67,19 @@ function useDashboard(dashboardData) {
 
   const updateDashboard = useCallback(
     (data, includeVersion = true) => {
-      setDashboard(currentDashboard => extend({}, currentDashboard, data));
+      setDashboard((currentDashboard) => extend({}, currentDashboard, data));
       data = { ...data, id: dashboard.id };
       if (includeVersion) {
         data = { ...data, version: dashboard.version };
       }
       return Dashboard.save(data)
-        .then(updatedDashboard => {
+        .then((updatedDashboard) => {
-          setDashboard(currentDashboard => extend({}, currentDashboard, pick(updatedDashboard, keys(data))));
+          setDashboard((currentDashboard) => extend({}, currentDashboard, pick(updatedDashboard, keys(data))));
           if (has(data, "name")) {
             location.setPath(url.parse(updatedDashboard.url).pathname, true);
           }
         })
-        .catch(error => {
+        .catch((error) => {
           const status = get(error, "response.status");
           if (status === 403) {
             notification.error("Dashboard update failed", "Permission Denied.");
@@ -99,25 +102,25 @@ function useDashboard(dashboardData) {
 
   const loadWidget = useCallback((widget, forceRefresh = false) => {
     widget.getParametersDefs(); // Force widget to read parameters values from URL
-    setDashboard(currentDashboard => extend({}, currentDashboard));
+    setDashboard((currentDashboard) => extend({}, currentDashboard));
     return widget
       .load(forceRefresh)
-      .catch(error => {
+      .catch((error) => {
         // QueryResultErrors are expected
         if (error instanceof QueryResultError) {
           return;
         }
         return Promise.reject(error);
       })
-      .finally(() => setDashboard(currentDashboard => extend({}, currentDashboard)));
+      .finally(() => setDashboard((currentDashboard) => extend({}, currentDashboard)));
   }, []);
 
-  const refreshWidget = useCallback(widget => loadWidget(widget, true), [loadWidget]);
+  const refreshWidget = useCallback((widget) => loadWidget(widget, true), [loadWidget]);
 
-  const removeWidget = useCallback(widgetId => {
+  const removeWidget = useCallback((widgetId) => {
-    setDashboard(currentDashboard =>
+    setDashboard((currentDashboard) =>
       extend({}, currentDashboard, {
-        widgets: currentDashboard.widgets.filter(widget => widget.id !== undefined && widget.id !== widgetId),
+        widgets: currentDashboard.widgets.filter((widget) => widget.id !== undefined && widget.id !== widgetId),
       })
     );
   }, []);
@@ -129,11 +132,11 @@ function useDashboard(dashboardData) {
     (forceRefresh = false, updatedParameters = []) => {
       const affectedWidgets = getAffectedWidgets(dashboardRef.current.widgets, updatedParameters);
       const loadWidgetPromises = compact(
-        affectedWidgets.map(widget => loadWidget(widget, forceRefresh).catch(error => error))
+        affectedWidgets.map((widget) => loadWidget(widget, forceRefresh).catch((error) => error))
       );
 
       return Promise.all(loadWidgetPromises).then(() => {
-        const queryResults = compact(map(dashboardRef.current.widgets, widget => widget.getQueryResult()));
+        const queryResults = compact(map(dashboardRef.current.widgets, (widget) => widget.getQueryResult()));
         const updatedFilters = collectDashboardFilters(dashboardRef.current, queryResults, location.search);
         setFilters(updatedFilters);
       });
@@ -142,7 +145,7 @@ function useDashboard(dashboardData) {
   );
 
   const refreshDashboard = useCallback(
-    updatedParameters => {
+    (updatedParameters) => {
       if (!refreshing) {
         setRefreshing(true);
         loadDashboard(true, updatedParameters).finally(() => setRefreshing(false));
@@ -151,15 +154,30 @@ function useDashboard(dashboardData) {
     [refreshing, loadDashboard]
   );
 
+  const saveDashboardParameters = useCallback(() => {
+    const currentDashboard = dashboardRef.current;
+
+    return updateDashboard({
+      options: {
+        ...currentDashboard.options,
+        parameters: map(globalParameters, (p) => p.toSaveableObject()),
+      },
+    }).catch((error) => {
+      console.error("Failed to persist parameter values:", error);
+      notification.error("Parameter values could not be saved. Your changes may not be persisted.");
+      throw error;
+    });
+  }, [globalParameters, updateDashboard]);
+
   const archiveDashboard = useCallback(() => {
     recordEvent("archive", "dashboard", dashboard.id);
-    Dashboard.delete(dashboard).then(updatedDashboard =>
+    Dashboard.delete(dashboard).then((updatedDashboard) =>
-      setDashboard(currentDashboard => extend({}, currentDashboard, pick(updatedDashboard, ["is_archived"])))
+      setDashboard((currentDashboard) => extend({}, currentDashboard, pick(updatedDashboard, ["is_archived"])))
     );
   }, [dashboard]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const showShareDashboardDialog = useCallback(() => {
-    const handleDialogClose = () => setDashboard(currentDashboard => extend({}, currentDashboard));
+    const handleDialogClose = () => setDashboard((currentDashboard) => extend({}, currentDashboard));
 
     ShareDashboardDialog.showModal({
       dashboard,
@@ -172,8 +190,8 @@ function useDashboard(dashboardData) {
   const showAddTextboxDialog = useCallback(() => {
     TextboxDialog.showModal({
       isNew: true,
-    }).onClose(text =>
+    }).onClose((text) =>
-      dashboard.addWidget(text).then(() => setDashboard(currentDashboard => extend({}, currentDashboard)))
+      dashboard.addWidget(text).then(() => setDashboard((currentDashboard) => extend({}, currentDashboard)))
     );
   }, [dashboard]);
 
@@ -185,13 +203,13 @@ function useDashboard(dashboardData) {
         .addWidget(visualization, {
           parameterMappings: editableMappingsToParameterMappings(parameterMappings),
         })
-        .then(widget => {
+        .then((widget) => {
           const widgetsToSave = [
             widget,
             ...synchronizeWidgetTitles(widget.options.parameterMappings, dashboard.widgets),
           ];
-          return Promise.all(widgetsToSave.map(w => w.save())).then(() =>
+          return Promise.all(widgetsToSave.map((w) => w.save())).then(() =>
-            setDashboard(currentDashboard => extend({}, currentDashboard))
+            setDashboard((currentDashboard) => extend({}, currentDashboard))
           );
         })
     );
@@ -235,6 +253,7 @@ function useDashboard(dashboardData) {
     setRefreshRate,
     disableRefreshRate,
     ...editModeHandler,
+    saveDashboardParameters,
     gridDisabled,
     setGridDisabled,
     fullscreen,
@@ -243,6 +262,8 @@ function useDashboard(dashboardData) {
     showAddTextboxDialog,
     showAddWidgetDialog,
     managePermissions,
+    isDuplicating,
+    duplicateDashboard,
   };
 }
 

client/app/pages/dashboards/hooks/useDuplicateDashboard.js

@@ -0,0 +1,40 @@
+import { noop, extend, pick } from "lodash";
+import { useCallback, useState } from "react";
+import url from "url";
+import qs from "query-string";
+import { Dashboard } from "@/services/dashboard";
+
+function keepCurrentUrlParams(targetUrl) {
+  const currentUrlParams = qs.parse(window.location.search);
+  targetUrl = url.parse(targetUrl);
+  const targetUrlParams = qs.parse(targetUrl.search);
+  return url.format(
+    extend(pick(targetUrl, ["protocol", "auth", "host", "pathname"]), {
+      search: qs.stringify(extend(currentUrlParams, targetUrlParams)),
+    })
+  );
+}
+
+export default function useDuplicateDashboard(dashboard) {
+  const [isDuplicating, setIsDuplicating] = useState(false);
+
+  const duplicateDashboard = useCallback(() => {
+    // To prevent opening the same tab, name must be unique for each browser
+    const tabName = `duplicatedDashboardTab/${Math.random().toString()}`;
+
+    // We should open tab here because this moment is a part of user interaction;
+    // later browser will block such attempts
+    const tab = window.open("", tabName);
+
+    setIsDuplicating(true);
+    Dashboard.fork({ id: dashboard.id })
+      .then(newDashboard => {
+        tab.location = keepCurrentUrlParams(newDashboard.getUrl());
+      })
+      .finally(() => {
+        setIsDuplicating(false);
+      });
+  }, [dashboard.id]);
+
+  return [isDuplicating, isDuplicating ? noop : duplicateDashboard];
+}

client/app/pages/home/Home.jsx

@@ -31,7 +31,8 @@ function DeprecatedEmbedFeatureAlert() {
           <Link
             href="https://discuss.redash.io/t/support-for-parameters-in-embedded-visualizations/3337"
             target="_blank"
-            rel="noopener noreferrer">
+            rel="noopener noreferrer"
+          >
             Read more
           </Link>
           .
@@ -43,7 +44,7 @@ function DeprecatedEmbedFeatureAlert() {
 
 function EmailNotVerifiedAlert() {
   const verifyEmail = () => {
-    axios.post("verification_email/").then(data => {
+    axios.post("verification_email/").then((data) => {
       notification.success(data.message);
     });
   };
@@ -100,6 +101,6 @@ routes.register(
   routeWithUserSession({
     path: "/",
     title: "Redash",
-    render: pageProps => <Home {...pageProps} />,
+    render: (pageProps) => <Home {...pageProps} />,
   })
 );

client/app/pages/home/components/FavoritesList.jsx

@@ -15,7 +15,7 @@ export function FavoriteList({ title, resource, itemUrl, emptyState }) {
   useEffect(() => {
     setLoading(true);
     resource
-      .favorites()
+      .favorites({ order: "-starred_at" })
       .then(({ results }) => setItems(results))
       .finally(() => setLoading(false));
   }, [resource]);
@@ -28,7 +28,7 @@ export function FavoriteList({ title, resource, itemUrl, emptyState }) {
       </div>
       {!isEmpty(items) && (
         <div role="list" className="list-group">
-          {items.map(item => (
+          {items.map((item) => (
             <Link key={itemUrl(item)} role="listitem" className="list-group-item" href={itemUrl(item)}>
               <span className="btn-favorite m-r-5">
                 <i className="fa fa-star" aria-hidden="true" />
@@ -61,7 +61,7 @@ export function DashboardAndQueryFavoritesList() {
             <FavoriteList
               title="Favorite Dashboards"
               resource={Dashboard}
-              itemUrl={dashboard => dashboard.url}
+              itemUrl={(dashboard) => dashboard.url}
               emptyState={
                 <p>
                   <span className="btn-favorite m-r-5">
@@ -76,7 +76,7 @@ export function DashboardAndQueryFavoritesList() {
             <FavoriteList
               title="Favorite Queries"
               resource={Query}
-              itemUrl={query => `queries/${query.id}`}
+              itemUrl={(query) => `queries/${query.id}`}
               emptyState={
                 <p>
                   <span className="btn-favorite m-r-5">

client/app/pages/queries-list/QueriesList.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import cx from "classnames";
 
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
@@ -20,7 +20,7 @@ import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTab
 import Layout from "@/components/layouts/ContentWithSidebar";
 
 import { Query } from "@/services/query";
-import { currentUser } from "@/services/auth";
+import { clientConfig, currentUser } from "@/services/auth";
 import location from "@/services/location";
 import routes from "@/services/routes";
 
@@ -95,25 +95,39 @@ function QueriesList({ controller }) {
   const controllerRef = useRef();
   controllerRef.current = controller;
 
+  const updateSearch = useCallback(
+    (searchTemm) => {
+      controller.updateSearch(searchTemm, { isServerSideFTS: !clientConfig.multiByteSearchEnabled });
+    },
+    [controller]
+  );
+
   useEffect(() => {
     const unlistenLocationChanges = location.listen((unused, action) => {
       const searchTerm = location.search.q || "";
       if (action === "PUSH" && searchTerm !== controllerRef.current.searchTerm) {
-        controllerRef.current.updateSearch(searchTerm);
+        updateSearch(searchTerm);
       }
     });
 
     return () => {
       unlistenLocationChanges();
     };
-  }, []);
+  }, [updateSearch]);
 
+  let usedListColumns = listColumns;
+  if (controller.params.currentPage === "favorites") {
+    usedListColumns = [
+      ...usedListColumns,
+      Columns.dateTime.sortable({ title: "Starred At", field: "starred_at", width: "1%" }),
+    ];
+  }
   const {
     areExtraActionsAvailable,
     listColumns: tableColumns,
     Component: ExtraActionsComponent,
     selectedItems,
-  } = useItemsListExtraActions(controller, listColumns, QueriesListExtraActions);
+  } = useItemsListExtraActions(controller, usedListColumns, QueriesListExtraActions);
 
   return (
     <div className="page-queries-list">
@@ -135,7 +149,7 @@ function QueriesList({ controller }) {
               placeholder="Search Queries..."
               label="Search queries"
               value={controller.searchTerm}
-              onChange={controller.updateSearch}
+              onChange={updateSearch}
             />
             <Sidebar.Menu items={sidebarMenu} selected={controller.params.currentPage} />
             <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} showUnselectAll />
@@ -160,14 +174,15 @@ function QueriesList({ controller }) {
                     orderByField={controller.orderByField}
                     orderByReverse={controller.orderByReverse}
                     toggleSorting={controller.toggleSorting}
+                    setSorting={controller.setSorting}
                   />
                   <Paginator
                     showPageSizeSelect
                     totalCount={controller.totalItemsCount}
                     pageSize={controller.itemsPerPage}
-                    onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
+                    onPageSizeChange={(itemsPerPage) => controller.updatePagination({ itemsPerPage })}
                     page={controller.page}
-                    onChange={page => controller.updatePagination({ page })}
+                    onChange={(page) => controller.updatePagination({ page })}
                   />
                 </div>
               </React.Fragment>
@@ -196,10 +211,10 @@ const QueriesListPage = itemsList(
         }[currentPage];
       },
       getItemProcessor() {
-        return item => new Query(item);
+        return (item) => new Query(item);
       },
     }),
-  () => new UrlStateStorage({ orderByField: "created_at", orderByReverse: true })
+  ({ ...props }) => new UrlStateStorage({ orderByField: props.orderByField ?? "created_at", orderByReverse: true })
 );
 
 routes.register(
@@ -207,7 +222,7 @@ routes.register(
   routeWithUserSession({
     path: "/queries",
     title: "Queries",
-    render: pageProps => <QueriesListPage {...pageProps} currentPage="all" />,
+    render: (pageProps) => <QueriesListPage {...pageProps} currentPage="all" />,
   })
 );
 routes.register(
@@ -215,7 +230,7 @@ routes.register(
   routeWithUserSession({
     path: "/queries/favorites",
     title: "Favorite Queries",
-    render: pageProps => <QueriesListPage {...pageProps} currentPage="favorites" />,
+    render: (pageProps) => <QueriesListPage {...pageProps} currentPage="favorites" orderByField="starred_at" />,
   })
 );
 routes.register(
@@ -223,7 +238,7 @@ routes.register(
   routeWithUserSession({
     path: "/queries/archive",
     title: "Archived Queries",
-    render: pageProps => <QueriesListPage {...pageProps} currentPage="archive" />,
+    render: (pageProps) => <QueriesListPage {...pageProps} currentPage="archive" />,
   })
 );
 routes.register(
@@ -231,6 +246,6 @@ routes.register(
   routeWithUserSession({
     path: "/queries/my",
     title: "My Queries",
-    render: pageProps => <QueriesListPage {...pageProps} currentPage="my" />,
+    render: (pageProps) => <QueriesListPage {...pageProps} currentPage="my" />,
   })
 );

client/app/pages/queries/QuerySource.less

@@ -37,9 +37,10 @@
 
       &.active {
         overflow: visible;
+        max-height: unset !important;
         .ant-input {
           resize: vertical;
-          max-height: 150px - 15px * 2;
+          height: 30vh;
         }
       }
     }

client/app/pages/queries/components/QueryExecutionMetadata.jsx

@@ -9,6 +9,7 @@ import QueryControlDropdown from "@/components/EditVisualizationButton/QueryCont
 import EditVisualizationButton from "@/components/EditVisualizationButton";
 import useQueryResultData from "@/lib/useQueryResultData";
 import { durationHumanize, pluralize, prettySize } from "@/lib/utils";
+import { isUndefined } from "lodash";
 
 import "./QueryExecutionMetadata.less";
 
@@ -51,7 +52,8 @@ export default function QueryExecutionMetadata({
                   "Result truncated to " +
                   queryResultData.rows.length +
                   " rows. Databricks may truncate query results that are unstably large."
-                }>
+                }
+              >
                 <WarningTwoTone twoToneColor="#FF9800" />
               </Tooltip>
             </span>
@@ -67,10 +69,9 @@ export default function QueryExecutionMetadata({
           )}
           {isQueryExecuting && <span>Running&hellip;</span>}
         </span>
-        {queryResultData.metadata.data_scanned && (
+        {!isUndefined(queryResultData.metadata.data_scanned) && !isQueryExecuting && (
           <span className="m-l-5">
-            Data Scanned
+            Data Scanned <strong>{prettySize(queryResultData.metadata.data_scanned)}</strong>
-            <strong>{prettySize(queryResultData.metadata.data_scanned)}</strong>
           </span>
         )}
       </span>

client/app/pages/queries/components/QuerySourceTypeIcon.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import React from "react";
 
 export function QuerySourceTypeIcon(props) {
-  return <img src={`static/images/db-logos/${props.type}.png`} width="20" alt={props.alt} />;
+  return <img src={`/static/images/db-logos/${props.type}.png`} width="20" alt={props.alt} />;
 }
 
 QuerySourceTypeIcon.propTypes = {

client/app/pages/queries/components/QueryVisualizationTabs.jsx

@@ -18,7 +18,7 @@ function EmptyState({ title, message, refreshButton }) {
     <div className="query-results-empty-state">
       <div className="empty-state-content">
         <div>
-          <img src="static/images/illustrations/no-query-results.svg" alt="No Query Results Illustration" />
+          <img src="/static/images/illustrations/no-query-results.svg" alt="No Query Results Illustration" />
         </div>
         <h3>{title}</h3>
         <div className="m-b-20">{message}</div>
@@ -40,7 +40,7 @@ EmptyState.defaultProps = {
 
 function TabWithDeleteButton({ visualizationName, canDelete, onDelete, ...props }) {
   const handleDelete = useCallback(
-    e => {
+    (e) => {
       e.stopPropagation();
       Modal.confirm({
         title: "Delete Visualization",
@@ -111,7 +111,8 @@ export default function QueryVisualizationTabs({
         className="add-visualization-button"
         data-test="NewVisualization"
         type="link"
-        onClick={() => onAddVisualization()}>
+        onClick={() => onAddVisualization()}
+      >
         <i className="fa fa-plus" aria-hidden="true" />
         <span className="m-l-5 hidden-xs">Add Visualization</span>
       </Button>
@@ -119,7 +120,7 @@ export default function QueryVisualizationTabs({
   }
 
   const orderedVisualizations = useMemo(() => orderBy(visualizations, ["id"]), [visualizations]);
-  const isFirstVisualization = useCallback(visId => visId === orderedVisualizations[0].id, [orderedVisualizations]);
+  const isFirstVisualization = useCallback((visId) => visId === orderedVisualizations[0].id, [orderedVisualizations]);
   const isMobile = useMedia({ maxWidth: 768 });
 
   const [filters, setFilters] = useState([]);
@@ -132,9 +133,10 @@ export default function QueryVisualizationTabs({
       data-test="QueryPageVisualizationTabs"
       animated={false}
       tabBarGutter={0}
-      onChange={activeKey => onChangeTab(+activeKey)}
+      onChange={(activeKey) => onChangeTab(+activeKey)}
-      destroyInactiveTabPane>
+      destroyInactiveTabPane
-      {orderedVisualizations.map(visualization => (
+    >
+      {orderedVisualizations.map((visualization) => (
         <TabPane
           key={`${visualization.id}`}
           tab={
@@ -144,7 +146,8 @@ export default function QueryVisualizationTabs({
               visualizationName={visualization.name}
               onDelete={() => onDeleteVisualization(visualization.id)}
             />
-          }>
+          }
+        >
           {queryResult ? (
             <VisualizationRenderer
               visualization={visualization}

client/app/pages/queries/hooks/useAutocompleteFlags.js

@@ -1,16 +1,11 @@
 import { useCallback, useMemo, useState } from "react";
-import { reduce } from "lodash";
 import localOptions from "@/lib/localOptions";
 
-function calculateTokensCount(schema) {
-  return reduce(schema, (totalLength, table) => totalLength + table.columns.length, 0);
-}
-
 export default function useAutocompleteFlags(schema) {
-  const isAvailable = useMemo(() => calculateTokensCount(schema) <= 5000, [schema]);
+  const isAvailable = true;
   const [isEnabled, setIsEnabled] = useState(localOptions.get("liveAutocomplete", true));
 
-  const toggleAutocomplete = useCallback(state => {
+  const toggleAutocomplete = useCallback((state) => {
     setIsEnabled(state);
     localOptions.set("liveAutocomplete", state);
   }, []);

client/app/pages/settings/components/GeneralSettings/BeaconConsentSettings.jsx

@@ -17,14 +17,16 @@ export default function BeaconConsentSettings(props) {
             Anonymous Usage Data Sharing
             <HelpTrigger className="m-l-5 m-r-5" type="USAGE_DATA_SHARING" />
           </span>
-        }>
+        }
+      >
         {loading ? (
           <Skeleton title={{ width: 300 }} paragraph={false} active />
         ) : (
           <Checkbox
             name="beacon_consent"
             checked={values.beacon_consent}
-            onChange={e => onChange({ beacon_consent: e.target.checked })}>
+            onChange={(e) => onChange({ beacon_consent: e.target.checked })}
+          >
             Help Redash improve by automatically sending anonymous usage data
           </Checkbox>
         )}

client/app/services/alert.js

@@ -36,6 +36,7 @@ const Alert = {
   delete: data => axios.delete(`api/alerts/${data.id}`),
   mute: data => axios.post(`api/alerts/${data.id}/mute`),
   unmute: data => axios.delete(`api/alerts/${data.id}/mute`),
+  evaluate: data => axios.post(`api/alerts/${data.id}/eval`),
 };
 
 export default Alert;

client/app/services/dashboard.js

@@ -10,9 +10,9 @@ export const urlForDashboard = ({ id, slug }) => `dashboards/${id}-${slug}`;
 
 export function collectDashboardFilters(dashboard, queryResults, urlParams) {
   const filters = {};
-  _.each(queryResults, queryResult => {
+  _.each(queryResults, (queryResult) => {
     const queryFilters = queryResult && queryResult.getFilters ? queryResult.getFilters() : [];
-    _.each(queryFilters, queryFilter => {
+    _.each(queryFilters, (queryFilter) => {
       const hasQueryStringValue = _.has(urlParams, queryFilter.name);
 
       if (!(hasQueryStringValue || dashboard.dashboard_filters_enabled)) {
@@ -44,7 +44,7 @@ function prepareWidgetsForDashboard(widgets) {
   const defaultWidgetSizeY =
     Math.max(
       _.chain(widgets)
-        .map(w => w.options.position.sizeY)
+        .map((w) => w.options.position.sizeY)
         .max()
         .value(),
       20
@@ -55,11 +55,11 @@ function prepareWidgetsForDashboard(widgets) {
   // 2. update position of widgets in each row - place it right below
   //    biggest widget from previous row
   _.chain(widgets)
-    .sortBy(widget => widget.options.position.row)
+    .sortBy((widget) => widget.options.position.row)
-    .groupBy(widget => widget.options.position.row)
+    .groupBy((widget) => widget.options.position.row)
     .reduce((row, widgetsAtRow) => {
       let height = 1;
-      _.each(widgetsAtRow, widget => {
+      _.each(widgetsAtRow, (widget) => {
         height = Math.max(
           height,
           widget.options.position.autoHeight ? defaultWidgetSizeY : widget.options.position.sizeY
@@ -74,8 +74,8 @@ function prepareWidgetsForDashboard(widgets) {
     .value();
 
   // Sort widgets by updated column and row value
-  widgets = _.sortBy(widgets, widget => widget.options.position.col);
+  widgets = _.sortBy(widgets, (widget) => widget.options.position.col);
-  widgets = _.sortBy(widgets, widget => widget.options.position.row);
+  widgets = _.sortBy(widgets, (widget) => widget.options.position.row);
 
   return widgets;
 }
@@ -85,7 +85,7 @@ function calculateNewWidgetPosition(existingWidgets, newWidget) {
 
   // Find first free row for each column
   const bottomLine = _.chain(existingWidgets)
-    .map(w => {
+    .map((w) => {
       const options = _.extend({}, w.options);
       const position = _.extend({ row: 0, sizeY: 0 }, options.position);
       return {
@@ -97,21 +97,24 @@ function calculateNewWidgetPosition(existingWidgets, newWidget) {
         height: position.sizeY,
       };
     })
-    .reduce((result, item) => {
+    .reduce(
-      const from = Math.max(item.left, 0);
+      (result, item) => {
-      const to = Math.min(item.right, result.length + 1);
+        const from = Math.max(item.left, 0);
-      for (let i = from; i < to; i += 1) {
+        const to = Math.min(item.right, result.length + 1);
-        result[i] = Math.max(result[i], item.bottom);
+        for (let i = from; i < to; i += 1) {
-      }
+          result[i] = Math.max(result[i], item.bottom);
-      return result;
+        }
-    }, _.map(new Array(dashboardGridOptions.columns), _.constant(0)))
+        return result;
+      },
+      _.map(new Array(dashboardGridOptions.columns), _.constant(0))
+    )
     .value();
 
   // Go through columns, pick them by count necessary to hold new block,
   // and calculate bottom-most free row per group.
   // Choose group with the top-most free row (comparing to other groups)
   return _.chain(_.range(0, dashboardGridOptions.columns - width + 1))
-    .map(col => ({
+    .map((col) => ({
       col,
       row: _.chain(bottomLine)
         .slice(col, col + width)
@@ -126,14 +129,14 @@ function calculateNewWidgetPosition(existingWidgets, newWidget) {
 export function Dashboard(dashboard) {
   _.extend(this, dashboard);
   Object.defineProperty(this, "url", {
-    get: function() {
+    get: function () {
       return urlForDashboard(this);
     },
   });
 }
 
 function prepareDashboardWidgets(widgets) {
-  return prepareWidgetsForDashboard(_.map(widgets, widget => new Widget(widget)));
+  return prepareWidgetsForDashboard(_.map(widgets, (widget) => new Widget(widget)));
 }
 
 function transformSingle(dashboard) {
@@ -154,7 +157,7 @@ function transformResponse(data) {
   return data;
 }
 
-const saveOrCreateUrl = data => (data.id ? `api/dashboards/${data.id}` : "api/dashboards");
+const saveOrCreateUrl = (data) => (data.id ? `api/dashboards/${data.id}` : "api/dashboards");
 const DashboardService = {
   get: ({ id, slug }) => {
     const params = {};
@@ -164,14 +167,15 @@ const DashboardService = {
     return axios.get(`api/dashboards/${id || slug}`, { params }).then(transformResponse);
   },
   getByToken: ({ token }) => axios.get(`api/dashboards/public/${token}`).then(transformResponse),
-  save: data => axios.post(saveOrCreateUrl(data), data).then(transformResponse),
+  save: (data) => axios.post(saveOrCreateUrl(data), data).then(transformResponse),
   delete: ({ id }) => axios.delete(`api/dashboards/${id}`).then(transformResponse),
-  query: params => axios.get("api/dashboards", { params }).then(transformResponse),
+  query: (params) => axios.get("api/dashboards", { params }).then(transformResponse),
-  recent: params => axios.get("api/dashboards/recent", { params }).then(transformResponse),
+  recent: (params) => axios.get("api/dashboards/recent", { params }).then(transformResponse),
-  myDashboards: params => axios.get("api/dashboards/my", { params }).then(transformResponse),
+  myDashboards: (params) => axios.get("api/dashboards/my", { params }).then(transformResponse),
-  favorites: params => axios.get("api/dashboards/favorites", { params }).then(transformResponse),
+  favorites: (params) => axios.get("api/dashboards/favorites", { params }).then(transformResponse),
   favorite: ({ id }) => axios.post(`api/dashboards/${id}/favorite`),
   unfavorite: ({ id }) => axios.delete(`api/dashboards/${id}/favorite`),
+  fork: ({ id }) => axios.post(`api/dashboards/${id}/fork`, { id }).then(transformResponse),
 };
 
 _.extend(Dashboard, DashboardService);
@@ -186,13 +190,13 @@ Dashboard.prototype.canEdit = function canEdit() {
 Dashboard.prototype.getParametersDefs = function getParametersDefs() {
   const globalParams = {};
   const queryParams = location.search;
-  _.each(this.widgets, widget => {
+  _.each(this.widgets, (widget) => {
     if (widget.getQuery()) {
       const mappings = widget.getParameterMappings();
       widget
         .getQuery()
         .getParametersDefs(false)
-        .forEach(param => {
+        .forEach((param) => {
           const mapping = mappings[param.name];
           if (mapping.type === Widget.MappingType.DashboardLevel) {
             // create global param
@@ -209,15 +213,19 @@ Dashboard.prototype.getParametersDefs = function getParametersDefs() {
         });
     }
   });
+  const mergedValues = {
+    ..._.mapValues(globalParams, (p) => p.value),
+    ...Object.fromEntries((this.options.parameters || []).map((param) => [param.name, param.value])),
+  };
   const resultingGlobalParams = _.values(
-    _.each(globalParams, param => {
+    _.each(globalParams, (param) => {
-      param.setValue(param.value); // apply global param value to all locals
+      param.setValue(mergedValues[param.name]); // apply merged value
-      param.fromUrlParams(queryParams); // try to initialize from url (may do nothing)
+      param.fromUrlParams(queryParams); // allow param-specific parsing logic
     })
   );
 
   // order dashboard params using paramOrder
-  return _.sortBy(resultingGlobalParams, param =>
+  return _.sortBy(resultingGlobalParams, (param) =>
     _.includes(this.options.globalParamOrder, param.name)
       ? _.indexOf(this.options.globalParamOrder, param.name)
       : _.size(this.options.globalParamOrder)
@@ -265,3 +273,7 @@ Dashboard.prototype.favorite = function favorite() {
 Dashboard.prototype.unfavorite = function unfavorite() {
   return Dashboard.unfavorite(this);
 };
+
+Dashboard.prototype.getUrl = function getUrl() {
+  return urlForDashboard(this);
+};

client/app/services/data-source.js

@@ -4,19 +4,19 @@ import { fetchDataFromJob } from "@/services/query-result";
 
 export const SCHEMA_NOT_SUPPORTED = 1;
 export const SCHEMA_LOAD_ERROR = 2;
-export const IMG_ROOT = "static/images/db-logos";
+export const IMG_ROOT = "/static/images/db-logos";
 
 function mapSchemaColumnsToObject(columns) {
-  return map(columns, column => (isObject(column) ? column : { name: column }));
+  return map(columns, (column) => (isObject(column) ? column : { name: column }));
 }
 
 const DataSource = {
   query: () => axios.get("api/data_sources"),
   get: ({ id }) => axios.get(`api/data_sources/${id}`),
   types: () => axios.get("api/data_sources/types"),
-  create: data => axios.post(`api/data_sources`, data),
+  create: (data) => axios.post(`api/data_sources`, data),
-  save: data => axios.post(`api/data_sources/${data.id}`, data),
+  save: (data) => axios.post(`api/data_sources/${data.id}`, data),
-  test: data => axios.post(`api/data_sources/${data.id}/test`),
+  test: (data) => axios.post(`api/data_sources/${data.id}/test`),
   delete: ({ id }) => axios.delete(`api/data_sources/${id}`),
   fetchSchema: (data, refresh = false) => {
     const params = {};
@@ -27,15 +27,15 @@ const DataSource = {
 
     return axios
       .get(`api/data_sources/${data.id}/schema`, { params })
-      .then(data => {
+      .then((data) => {
         if (has(data, "job")) {
-          return fetchDataFromJob(data.job.id).catch(error =>
+          return fetchDataFromJob(data.job.id).catch((error) =>
             error.code === SCHEMA_NOT_SUPPORTED ? [] : Promise.reject(new Error(data.job.error))
           );
         }
         return has(data, "schema") ? data.schema : Promise.reject();
       })
-      .then(tables => map(tables, table => ({ ...table, columns: mapSchemaColumnsToObject(table.columns) })));
+      .then((tables) => map(tables, (table) => ({ ...table, columns: mapSchemaColumnsToObject(table.columns) })));
   },
 };
 

client/app/services/location.js

@@ -9,7 +9,7 @@ function normalizeLocation(rawLocation) {
   const result = {};
 
   result.path = pathname;
-  result.search = mapValues(qs.parse(search), value => (isNil(value) ? true : value));
+  result.search = mapValues(qs.parse(search), (value) => (isNil(value) ? true : value));
   result.hash = trimStart(hash, "#");
   result.url = `${pathname}${search}${hash}`;
 
@@ -27,7 +27,7 @@ const location = {
 
   confirmChange(handler) {
     if (isFunction(handler)) {
-      return history.block(nextLocation => {
+      return history.block((nextLocation) => {
         return handler(normalizeLocation(nextLocation), location);
       });
     } else {
@@ -60,12 +60,18 @@ const location = {
       // serialize search and keep existing search parameters (!)
       if (isObject(newLocation.search)) {
         newLocation.search = omitBy(extend({}, location.search, newLocation.search), isNil);
-        newLocation.search = mapValues(newLocation.search, value => (value === true ? null : value));
+        newLocation.search = mapValues(newLocation.search, (value) => (value === true ? null : value));
         newLocation.search = qs.stringify(newLocation.search);
       }
     }
     if (replace) {
-      history.replace(newLocation);
+      if (
+        newLocation.pathname !== location.path ||
+        newLocation.search !== qs.stringify(location.search) ||
+        newLocation.hash !== location.hash
+      ) {
+        history.replace(newLocation);
+      }
     } else {
       history.push(newLocation);
     }

client/app/services/parameters/DateParameter.js

@@ -61,7 +61,7 @@ class DateParameter extends Parameter {
       return value;
     }
 
-    const normalizedValue = moment(value);
+    const normalizedValue = moment(value, moment.ISO_8601, true);
     return normalizedValue.isValid() ? normalizedValue : null;
   }
 

client/app/services/parameters/DateRangeParameter.js

@@ -17,7 +17,9 @@ const DYNAMIC_PREFIX = "d_";
  * @param now {function(): moment.Moment=} moment - defaults to now
  * @returns {function(withNow: boolean): [moment.Moment, moment.Moment|undefined]}
  */
-const untilNow = (from, now = () => moment()) => (withNow = true) => [from(), withNow ? now() : undefined];
+const untilNow =
+  (from, now = () => moment()) =>
+  (withNow = true) => [from(), withNow ? now() : undefined];
 
 const DYNAMIC_DATE_RANGES = {
   today: {
@@ -26,14 +28,7 @@ const DYNAMIC_DATE_RANGES = {
   },
   yesterday: {
     name: "Yesterday",
-    value: () => [
+    value: () => [moment().subtract(1, "day").startOf("day"), moment().subtract(1, "day").endOf("day")],
-      moment()
-        .subtract(1, "day")
-        .startOf("day"),
-      moment()
-        .subtract(1, "day")
-        .endOf("day"),
-    ],
   },
   this_week: {
     name: "This week",
@@ -49,36 +44,15 @@ const DYNAMIC_DATE_RANGES = {
   },
   last_week: {
     name: "Last week",
-    value: () => [
+    value: () => [moment().subtract(1, "week").startOf("week"), moment().subtract(1, "week").endOf("week")],
-      moment()
-        .subtract(1, "week")
-        .startOf("week"),
-      moment()
-        .subtract(1, "week")
-        .endOf("week"),
-    ],
   },
   last_month: {
     name: "Last month",
-    value: () => [
+    value: () => [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")],
-      moment()
-        .subtract(1, "month")
-        .startOf("month"),
-      moment()
-        .subtract(1, "month")
-        .endOf("month"),
-    ],
   },
   last_year: {
     name: "Last year",
-    value: () => [
+    value: () => [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")],
-      moment()
-        .subtract(1, "year")
-        .startOf("year"),
-      moment()
-        .subtract(1, "year")
-        .endOf("year"),
-    ],
   },
   last_hour: {
     name: "Last hour",
@@ -94,63 +68,31 @@ const DYNAMIC_DATE_RANGES = {
   },
   last_7_days: {
     name: "Last 7 days",
-    value: untilNow(
+    value: untilNow(() => moment().subtract(7, "days").startOf("day")),
-      () =>
-        moment()
-          .subtract(7, "days")
-          .startOf("day"),
-      () => moment().endOf("day")
-    ),
   },
   last_14_days: {
     name: "Last 14 days",
-    value: untilNow(
+    value: untilNow(() => moment().subtract(14, "days").startOf("day")),
-      () =>
-        moment()
-          .subtract(14, "days")
-          .startOf("day"),
-      () => moment().endOf("day")
-    ),
   },
   last_30_days: {
     name: "Last 30 days",
-    value: untilNow(
+    value: untilNow(() => moment().subtract(30, "days").startOf("day")),
-      () =>
-        moment()
-          .subtract(30, "days")
-          .startOf("day"),
-      () => moment().endOf("day")
-    ),
   },
   last_60_days: {
     name: "Last 60 days",
-    value: untilNow(
+    value: untilNow(() => moment().subtract(60, "days").startOf("day")),
-      () =>
-        moment()
-          .subtract(60, "days")
-          .startOf("day"),
-      () => moment().endOf("day")
-    ),
   },
   last_90_days: {
     name: "Last 90 days",
-    value: untilNow(
+    value: untilNow(() => moment().subtract(90, "days").startOf("day")),
-      () =>
-        moment()
-          .subtract(90, "days")
-          .startOf("day"),
-      () => moment().endOf("day")
-    ),
   },
   last_12_months: {
     name: "Last 12 months",
-    value: untilNow(
+    value: untilNow(() => moment().subtract(12, "months").startOf("day")),
-      () =>
+  },
-        moment()
+  last_10_years: {
-          .subtract(12, "months")
+    name: "Last 10 years",
-          .startOf("day"),
+    value: untilNow(() => moment().subtract(10, "years").startOf("day")),
-      () => moment().endOf("day")
-    ),
   },
 };
 
@@ -164,7 +106,7 @@ export function isDynamicDateRangeString(value) {
 }
 
 export function getDynamicDateRangeStringFromName(dynamicRangeName) {
-  const key = findKey(DYNAMIC_DATE_RANGES, range => range.name === dynamicRangeName);
+  const key = findKey(DYNAMIC_DATE_RANGES, (range) => range.name === dynamicRangeName);
   return key ? DYNAMIC_PREFIX + key : undefined;
 }
 
@@ -233,7 +175,7 @@ class DateRangeParameter extends Parameter {
 
   getExecutionValue() {
     if (this.hasDynamicValue) {
-      const format = date => date.format(DATETIME_FORMATS[this.type]);
+      const format = (date) => date.format(DATETIME_FORMATS[this.type]);
       const [start, end] = this.normalizedValue.value().map(format);
       return { start, end };
     }

client/app/services/parameters/Parameter.js

@@ -58,7 +58,7 @@ class Parameter {
 
   updateLocals() {
     if (isArray(this.locals)) {
-      each(this.locals, local => {
+      each(this.locals, (local) => {
         local.setValue(this.value);
       });
     }
@@ -117,7 +117,7 @@ class Parameter {
 
   /** Get a saveable version of the Parameter by omitting unnecessary props */
   toSaveableObject() {
-    return omit(this, ["$$value", "urlPrefix", "pendingValue", "parentQueryId"]);
+    return omit(this, ["$$value", "urlPrefix", "pendingValue", "parentQueryId", "locals"]);
   }
 }
 

client/app/services/parameters/TextPatternParameter.js

@@ -0,0 +1,29 @@
+import { toString, isNull } from "lodash";
+import Parameter from "./Parameter";
+
+class TextPatternParameter extends Parameter {
+  constructor(parameter, parentQueryId) {
+    super(parameter, parentQueryId);
+    this.regex = parameter.regex;
+    this.setValue(parameter.value);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  normalizeValue(value) {
+    const normalizedValue = toString(value);
+    if (isNull(normalizedValue)) {
+      return null;
+    }
+
+    var re = new RegExp(this.regex);
+
+    if (re !== null) {
+      if (re.test(normalizedValue)) {
+        return normalizedValue;
+      }
+    }
+    return null;
+  }
+}
+
+export default TextPatternParameter;

client/app/services/parameters/index.js

@@ -5,6 +5,7 @@ import EnumParameter from "./EnumParameter";
 import QueryBasedDropdownParameter from "./QueryBasedDropdownParameter";
 import DateParameter from "./DateParameter";
 import DateRangeParameter from "./DateRangeParameter";
+import TextPatternParameter from "./TextPatternParameter";
 
 function createParameter(param, parentQueryId) {
   switch (param.type) {
@@ -22,6 +23,8 @@ function createParameter(param, parentQueryId) {
     case "datetime-range":
     case "datetime-range-with-seconds":
       return new DateRangeParameter(param, parentQueryId);
+    case "text-pattern":
+      return new TextPatternParameter({ ...param, type: "text-pattern" }, parentQueryId);
     default:
       return new TextParameter({ ...param, type: "text" }, parentQueryId);
   }
@@ -34,6 +37,7 @@ function cloneParameter(param) {
 export {
   Parameter,
   TextParameter,
+  TextPatternParameter,
   NumberParameter,
   EnumParameter,
   QueryBasedDropdownParameter,

client/app/services/parameters/tests/Parameter.test.js

@@ -1,6 +1,7 @@
 import {
   createParameter,
   TextParameter,
+  TextPatternParameter,
   NumberParameter,
   EnumParameter,
   QueryBasedDropdownParameter,
@@ -12,6 +13,7 @@ describe("Parameter", () => {
   describe("create", () => {
     const parameterTypes = [
       ["text", TextParameter],
+      ["text-pattern", TextPatternParameter],
       ["number", NumberParameter],
       ["enum", EnumParameter],
       ["query", QueryBasedDropdownParameter],

client/app/services/parameters/tests/TextPatternParameter.test.js

@@ -0,0 +1,21 @@
+import { createParameter } from "..";
+
+describe("TextPatternParameter", () => {
+  let param;
+
+  beforeEach(() => {
+    param = createParameter({ name: "param", title: "Param", type: "text-pattern", regex: "a+" });
+  });
+
+  describe("noramlizeValue", () => {
+    test("converts matching strings", () => {
+      const normalizedValue = param.normalizeValue("art");
+      expect(normalizedValue).toBe("art");
+    });
+
+    test("returns null when string does not match pattern", () => {
+      const normalizedValue = param.normalizeValue("brt");
+      expect(normalizedValue).toBeNull();
+    });
+  });
+});

client/app/services/query-result.js

@@ -9,7 +9,7 @@ const logger = debug("redash:services:QueryResult");
 const filterTypes = ["filter", "multi-filter", "multiFilter"];
 
 function defer() {
-  const result = { onStatusChange: status => {} };
+  const result = { onStatusChange: (status) => {} };
   result.promise = new Promise((resolve, reject) => {
     result.resolve = resolve;
     result.reject = reject;
@@ -40,13 +40,13 @@ function getColumnNameWithoutType(column) {
 }
 
 function getColumnFriendlyName(column) {
-  return getColumnNameWithoutType(column).replace(/(?:^|\s)\S/g, a => a.toUpperCase());
+  return getColumnNameWithoutType(column).replace(/(?:^|\s)\S/g, (a) => a.toUpperCase());
 }
 
-const createOrSaveUrl = data => (data.id ? `api/query_results/${data.id}` : "api/query_results");
+const createOrSaveUrl = (data) => (data.id ? `api/query_results/${data.id}` : "api/query_results");
 const QueryResultResource = {
   get: ({ id }) => axios.get(`api/query_results/${id}`),
-  post: data => axios.post(createOrSaveUrl(data), data),
+  post: (data) => axios.post(createOrSaveUrl(data), data),
 };
 
 export const ExecutionStatus = {
@@ -97,11 +97,11 @@ function handleErrorResponse(queryResult, error) {
 }
 
 function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 export function fetchDataFromJob(jobId, interval = 1000) {
-  return axios.get(`api/jobs/${jobId}`).then(data => {
+  return axios.get(`api/jobs/${jobId}`).then((data) => {
     const status = statuses[data.job.status];
     if (status === ExecutionStatus.WAITING || status === ExecutionStatus.PROCESSING) {
       return sleep(interval).then(() => fetchDataFromJob(data.job.id));
@@ -114,7 +114,7 @@ export function fetchDataFromJob(jobId, interval = 1000) {
 }
 
 export function isDateTime(v) {
-  return isString(v) && moment(v).isValid() && /^\d{4}-\d{2}-\d{2}T/.test(v);
+  return isString(v) && moment(v, moment.ISO_8601, true).isValid() && /^\d{4}-\d{2}-\d{2}T/.test(v);
 }
 
 class QueryResult {
@@ -146,7 +146,7 @@ class QueryResult {
       // TODO: we should stop manipulating incoming data, and switch to relaying
       // on the column type set by the backend. This logic is prone to errors,
       // and better be removed. Kept for now, for backward compatability.
-      each(this.query_result.data.rows, row => {
+      each(this.query_result.data.rows, (row) => {
         forOwn(row, (v, k) => {
           let newType = null;
           if (isNumber(v)) {
@@ -173,7 +173,7 @@ class QueryResult {
         });
       });
 
-      each(this.query_result.data.columns, column => {
+      each(this.query_result.data.columns, (column) => {
         column.name = "" + column.name;
         if (columnTypes[column.name]) {
           if (column.type == null || column.type === "string") {
@@ -265,14 +265,14 @@ class QueryResult {
 
   getColumnNames() {
     if (this.columnNames === undefined && this.query_result.data) {
-      this.columnNames = this.query_result.data.columns.map(v => v.name);
+      this.columnNames = this.query_result.data.columns.map((v) => v.name);
     }
 
     return this.columnNames;
   }
 
   getColumnFriendlyNames() {
-    return this.getColumnNames().map(col => getColumnFriendlyName(col));
+    return this.getColumnNames().map((col) => getColumnFriendlyName(col));
   }
 
   getTruncated() {
@@ -286,7 +286,7 @@ class QueryResult {
 
     const filters = [];
 
-    this.getColumns().forEach(col => {
+    this.getColumns().forEach((col) => {
       const name = col.name;
       const type = name.split("::")[1] || name.split("__")[1];
       if (includes(filterTypes, type)) {
@@ -302,8 +302,8 @@ class QueryResult {
       }
     }, this);
 
-    this.getRawData().forEach(row => {
+    this.getRawData().forEach((row) => {
-      filters.forEach(filter => {
+      filters.forEach((filter) => {
         filter.values.push(row[filter.name]);
         if (filter.values.length === 1) {
           if (filter.multiple) {
@@ -315,8 +315,8 @@ class QueryResult {
       });
     });
 
-    filters.forEach(filter => {
+    filters.forEach((filter) => {
-      filter.values = uniqBy(filter.values, v => {
+      filter.values = uniqBy(filter.values, (v) => {
         if (moment.isMoment(v)) {
           return v.unix();
         }
@@ -345,12 +345,12 @@ class QueryResult {
 
     axios
       .get(`api/queries/${queryId}/results/${id}.json`)
-      .then(response => {
+      .then((response) => {
         // Success handler
         queryResult.isLoadingResult = false;
         queryResult.update(response);
       })
-      .catch(error => {
+      .catch((error) => {
         // Error handler
         queryResult.isLoadingResult = false;
         handleErrorResponse(queryResult, error);
@@ -362,10 +362,10 @@ class QueryResult {
   loadLatestCachedResult(queryId, parameters) {
     axios
       .post(`api/queries/${queryId}/results`, { queryId, parameters })
-      .then(response => {
+      .then((response) => {
         this.update(response);
       })
-      .catch(error => {
+      .catch((error) => {
         handleErrorResponse(this, error);
       });
   }
@@ -375,11 +375,11 @@ class QueryResult {
     this.deferred.onStatusChange(ExecutionStatus.LOADING_RESULT);
 
     QueryResultResource.get({ id: this.job.query_result_id })
-      .then(response => {
+      .then((response) => {
         this.update(response);
         this.isLoadingResult = false;
       })
-      .catch(error => {
+      .catch((error) => {
         if (tryCount === undefined) {
           tryCount = 0;
         }
@@ -394,9 +394,12 @@ class QueryResult {
           });
           this.isLoadingResult = false;
         } else {
-          setTimeout(() => {
+          setTimeout(
-            this.loadResult(tryCount + 1);
+            () => {
-          }, 1000 * Math.pow(2, tryCount));
+              this.loadResult(tryCount + 1);
+            },
+            1000 * Math.pow(2, tryCount)
+          );
         }
       });
   }
@@ -410,19 +413,26 @@ class QueryResult {
       : axios.get(`api/queries/${query}/jobs/${this.job.id}`);
 
     request
-      .then(jobResponse => {
+      .then((jobResponse) => {
         this.update(jobResponse);
 
         if (this.getStatus() === "processing" && this.job.query_result_id && this.job.query_result_id !== "None") {
           loadResult();
         } else if (this.getStatus() !== "failed") {
-          const waitTime = tryNumber > 10 ? 3000 : 500;
+          let waitTime;
+          if (tryNumber <= 10) {
+            waitTime = 500;
+          } else if (tryNumber <= 50) {
+            waitTime = 1000;
+          } else {
+            waitTime = 3000;
+          }
           setTimeout(() => {
             this.refreshStatus(query, parameters, tryNumber + 1);
           }, waitTime);
         }
       })
-      .catch(error => {
+      .catch((error) => {
         logger("Connection error", error);
         // TODO: use QueryResultError, or better yet: exception/reject of promise.
         this.update({
@@ -451,14 +461,14 @@ class QueryResult {
 
     axios
       .post(`api/queries/${id}/results`, { id, parameters, apply_auto_limit: applyAutoLimit, max_age: maxAge })
-      .then(response => {
+      .then((response) => {
         queryResult.update(response);
 
         if ("job" in response) {
           queryResult.refreshStatus(id, parameters);
         }
       })
-      .catch(error => {
+      .catch((error) => {
         handleErrorResponse(queryResult, error);
       });
 
@@ -481,14 +491,14 @@ class QueryResult {
     }
 
     QueryResultResource.post(params)
-      .then(response => {
+      .then((response) => {
         queryResult.update(response);
 
         if ("job" in response) {
           queryResult.refreshStatus(query, parameters);
         }
       })
-      .catch(error => {
+      .catch((error) => {
         handleErrorResponse(queryResult, error);
       });
 

client/cypress/cypress.js

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies, no-console */
 const { find } = require("lodash");
-const atob = require("atob");
 const { execSync } = require("child_process");
 const { get, post } = require("request").defaults({ jar: true });
 const { seedData } = require("./seed-data");
@@ -44,44 +43,32 @@ function seedDatabase(seedValues) {
 
 function buildServer() {
   console.log("Building the server...");
-  execSync("docker-compose -p cypress build", { stdio: "inherit" });
+  execSync("docker compose -p cypress build", { stdio: "inherit" });
 }
 
 function startServer() {
   console.log("Starting the server...");
-  execSync("docker-compose -p cypress up -d", { stdio: "inherit" });
+  execSync("docker compose -p cypress up -d", { stdio: "inherit" });
-  execSync("docker-compose -p cypress run server create_db", { stdio: "inherit" });
+  execSync("docker compose -p cypress run server create_db", { stdio: "inherit" });
 }
 
 function stopServer() {
   console.log("Stopping the server...");
-  execSync("docker-compose -p cypress down", { stdio: "inherit" });
+  execSync("docker compose -p cypress down", { stdio: "inherit" });
 }
 
 function runCypressCI() {
   const {
-    PERCY_TOKEN_ENCODED,
-    CYPRESS_PROJECT_ID_ENCODED,
-    CYPRESS_RECORD_KEY_ENCODED,
     GITHUB_REPOSITORY,
     CYPRESS_OPTIONS, // eslint-disable-line no-unused-vars
   } = process.env;
 
-  if (GITHUB_REPOSITORY === "getredash/redash") {
+  if (GITHUB_REPOSITORY === "getredash/redash" && process.env.CYPRESS_RECORD_KEY) {
-    if (PERCY_TOKEN_ENCODED) {
-      process.env.PERCY_TOKEN = atob(`${PERCY_TOKEN_ENCODED}`);
-    }
-    if (CYPRESS_PROJECT_ID_ENCODED) {
-      process.env.CYPRESS_PROJECT_ID = atob(`${CYPRESS_PROJECT_ID_ENCODED}`);
-    }
-    if (CYPRESS_RECORD_KEY_ENCODED) {
-      process.env.CYPRESS_RECORD_KEY = atob(`${CYPRESS_RECORD_KEY_ENCODED}`);
-    }
     process.env.CYPRESS_OPTIONS = "--record";
   }
 
   execSync(
-    "COMMIT_INFO_MESSAGE=$(git show -s --format=%s) docker-compose run --name cypress cypress ./node_modules/.bin/percy exec -t 300 -- ./node_modules/.bin/cypress run $CYPRESS_OPTIONS",
+    "COMMIT_INFO_MESSAGE=$(git show -s --format=%s) docker compose run --name cypress cypress ./node_modules/.bin/percy exec -t 300 -- ./node_modules/.bin/cypress run $CYPRESS_OPTIONS",
     { stdio: "inherit" }
   );
 }

client/cypress/integration/dashboard/dashboard_spec.js

@@ -23,7 +23,7 @@ describe("Dashboard", () => {
       cy.getByTestId("DashboardSaveButton").click();
     });
 
-    cy.wait("@NewDashboard").then(xhr => {
+    cy.wait("@NewDashboard").then((xhr) => {
       const id = Cypress._.get(xhr, "response.body.id");
       assert.isDefined(id, "Dashboard api call returns id");
 
@@ -40,13 +40,9 @@ describe("Dashboard", () => {
 
       cy.getByTestId("DashboardMoreButton").click();
 
-      cy.getByTestId("DashboardMoreButtonMenu")
+      cy.getByTestId("DashboardMoreButtonMenu").contains("Archive").click();
-        .contains("Archive")
-        .click();
 
-      cy.get(".ant-modal .ant-btn")
+      cy.get(".ant-modal .ant-btn").contains("Archive").click({ force: true });
-        .contains("Archive")
-        .click({ force: true });
       cy.get(".label-tag-archived").should("exist");
 
       cy.visit("/dashboards");
@@ -60,7 +56,7 @@ describe("Dashboard", () => {
     cy.server();
     cy.route("GET", "**/api/dashboards/*").as("LoadDashboard");
     cy.createDashboard("Dashboard multiple urls").then(({ id, slug }) => {
-      [`/dashboards/${id}`, `/dashboards/${id}-anything-here`, `/dashboard/${slug}`].forEach(url => {
+      [`/dashboards/${id}`, `/dashboards/${id}-anything-here`, `/dashboard/${slug}`].forEach((url) => {
         cy.visit(url);
         cy.wait("@LoadDashboard");
         cy.getByTestId(`DashboardId${id}Container`).should("exist");
@@ -72,7 +68,7 @@ describe("Dashboard", () => {
   });
 
   context("viewport width is at 800px", () => {
-    before(function() {
+    before(function () {
       cy.login();
       cy.createDashboard("Foo Bar")
         .then(({ id }) => {
@@ -80,49 +76,42 @@ describe("Dashboard", () => {
           this.dashboardEditUrl = `/dashboards/${id}?edit`;
           return cy.addTextbox(id, "Hello World!").then(getWidgetTestId);
         })
-        .then(elTestId => {
+        .then((elTestId) => {
           cy.visit(this.dashboardUrl);
           cy.getByTestId(elTestId).as("textboxEl");
         });
     });
 
-    beforeEach(function() {
+    beforeEach(function () {
       cy.login();
       cy.visit(this.dashboardUrl);
       cy.viewport(800 + menuWidth, 800);
     });
 
     it("shows widgets with full width", () => {
-      cy.get("@textboxEl").should($el => {
+      cy.get("@textboxEl").should(($el) => {
         expect($el.width()).to.eq(770);
       });
 
       cy.viewport(801 + menuWidth, 800);
-      cy.get("@textboxEl").should($el => {
+      cy.get("@textboxEl").should(($el) => {
-        expect($el.width()).to.eq(378);
+        expect($el.width()).to.eq(182);
       });
     });
 
     it("hides edit option", () => {
-      cy.getByTestId("DashboardMoreButton")
+      cy.getByTestId("DashboardMoreButton").click().should("be.visible");
-        .click()
-        .should("be.visible");
 
-      cy.getByTestId("DashboardMoreButtonMenu")
+      cy.getByTestId("DashboardMoreButtonMenu").contains("Edit").as("editButton").should("not.be.visible");
-        .contains("Edit")
-        .as("editButton")
-        .should("not.be.visible");
 
       cy.viewport(801 + menuWidth, 800);
       cy.get("@editButton").should("be.visible");
     });
 
-    it("disables edit mode", function() {
+    it("disables edit mode", function () {
       cy.viewport(801 + menuWidth, 800);
       cy.visit(this.dashboardEditUrl);
-      cy.contains("button", "Done Editing")
+      cy.contains("button", "Done Editing").as("saveButton").should("exist");
-        .as("saveButton")
-        .should("exist");
 
       cy.viewport(800 + menuWidth, 800);
       cy.contains("button", "Done Editing").should("not.exist");
@@ -130,14 +119,14 @@ describe("Dashboard", () => {
   });
 
   context("viewport width is at 767px", () => {
-    before(function() {
+    before(function () {
       cy.login();
       cy.createDashboard("Foo Bar").then(({ id }) => {
         this.dashboardUrl = `/dashboards/${id}`;
       });
     });
 
-    beforeEach(function() {
+    beforeEach(function () {
       cy.visit(this.dashboardUrl);
       cy.viewport(767, 800);
     });

client/cypress/integration/dashboard/filters_spec.js

@@ -23,7 +23,7 @@ describe("Dashboard Filters", () => {
       name: "Query Filters",
       query: `SELECT stage1 AS "stage1::filter", stage2, value FROM (${SQL}) q`,
     };
-    cy.createDashboard("Dashboard Filters").then(dashboard => {
+    cy.createDashboard("Dashboard Filters").then((dashboard) => {
       createQueryAndAddWidget(dashboard.id, queryData)
         .as("widget1TestId")
         .then(() => createQueryAndAddWidget(dashboard.id, queryData, { position: { col: 4 } }))
@@ -32,26 +32,23 @@ describe("Dashboard Filters", () => {
     });
   });
 
-  it("filters rows in a Table Visualization", function() {
+  it("filters rows in a Table Visualization", function () {
     editDashboard();
     cy.getByTestId("DashboardFilters").should("not.exist");
     cy.getByTestId("DashboardFiltersCheckbox").click();
 
     cy.getByTestId("DashboardFilters").within(() => {
-      cy.getByTestId("FilterName-stage1::filter")
+      cy.getByTestId("FilterName-stage1::filter").find(".ant-select-selection-item").should("have.text", "a");
-        .find(".ant-select-selection-item")
-        .should("have.text", "a");
     });
 
     cy.getByTestId(this.widget1TestId).within(() => {
       expectTableToHaveLength(4);
       expectFirstColumnToHaveMembers(["a", "a", "a", "a"]);
 
-      cy.getByTestId("FilterName-stage1::filter")
+      cy.getByTestId("FilterName-stage1::filter").find(".ant-select").click();
-        .find(".ant-select")
-        .click();
     });
 
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
     cy.contains(".ant-select-item-option-content:visible", "b").click();
 
     cy.getByTestId(this.widget1TestId).within(() => {
@@ -69,14 +66,13 @@ describe("Dashboard Filters", () => {
     // assert that changing a global filter affects all widgets
 
     cy.getByTestId("DashboardFilters").within(() => {
-      cy.getByTestId("FilterName-stage1::filter")
+      cy.getByTestId("FilterName-stage1::filter").find(".ant-select").click();
-        .find(".ant-select")
-        .click();
     });
 
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
     cy.contains(".ant-select-item-option-content:visible", "c").click();
 
-    [this.widget1TestId, this.widget2TestId].forEach(widgetTestId =>
+    [this.widget1TestId, this.widget2TestId].forEach((widgetTestId) =>
       cy.getByTestId(widgetTestId).within(() => {
         expectTableToHaveLength(4);
         expectFirstColumnToHaveMembers(["c", "c", "c", "c"]);

client/cypress/integration/dashboard/grid_compliant_widgets_spec.js

@@ -5,7 +5,7 @@ import { getWidgetTestId, editDashboard, resizeBy } from "../../support/dashboar
 const menuWidth = 80;
 
 describe("Grid compliant widgets", () => {
-  beforeEach(function() {
+  beforeEach(function () {
     cy.login();
     cy.viewport(1215 + menuWidth, 800);
     cy.createDashboard("Foo Bar")
@@ -13,7 +13,7 @@ describe("Grid compliant widgets", () => {
         this.dashboardUrl = `/dashboards/${id}`;
         return cy.addTextbox(id, "Hello World!").then(getWidgetTestId);
       })
-      .then(elTestId => {
+      .then((elTestId) => {
         cy.visit(this.dashboardUrl);
         cy.getByTestId(elTestId).as("textboxEl");
       });
@@ -27,7 +27,7 @@ describe("Grid compliant widgets", () => {
 
       it("stays put when dragged under snap threshold", () => {
         cy.get("@textboxEl")
-          .dragBy(90)
+          .dragBy(30)
           .invoke("offset")
           .should("have.property", "left", 15 + menuWidth); // no change, 15 -> 15
       });
@@ -36,14 +36,14 @@ describe("Grid compliant widgets", () => {
         cy.get("@textboxEl")
           .dragBy(110)
           .invoke("offset")
-          .should("have.property", "left", 215 + menuWidth); //  moved by 200, 15 -> 215
+          .should("have.property", "left", 115 + menuWidth); //  moved by 100, 15 -> 115
       });
 
       it("moves two columns when dragged over snap threshold", () => {
         cy.get("@textboxEl")
-          .dragBy(330)
+          .dragBy(200)
           .invoke("offset")
-          .should("have.property", "left", 415 + menuWidth); //  moved by 400, 15 -> 415
+          .should("have.property", "left", 215 + menuWidth); //  moved by 200, 15 -> 215
       });
     });
 
@@ -52,7 +52,7 @@ describe("Grid compliant widgets", () => {
       cy.route("POST", "**/api/widgets/*").as("WidgetSave");
 
       editDashboard();
-      cy.get("@textboxEl").dragBy(330);
+      cy.get("@textboxEl").dragBy(100);
       cy.wait("@WidgetSave");
     });
   });
@@ -64,24 +64,24 @@ describe("Grid compliant widgets", () => {
       });
 
       it("stays put when dragged under snap threshold", () => {
-        resizeBy(cy.get("@textboxEl"), 90)
+        resizeBy(cy.get("@textboxEl"), 30)
           .then(() => cy.get("@textboxEl"))
           .invoke("width")
-          .should("eq", 585); // no change, 585 -> 585
+          .should("eq", 285); // no change, 285 -> 285
       });
 
       it("moves one column when dragged over snap threshold", () => {
         resizeBy(cy.get("@textboxEl"), 110)
           .then(() => cy.get("@textboxEl"))
           .invoke("width")
-          .should("eq", 785); // resized by 200, 585 -> 785
+          .should("eq", 385); // resized by 200, 185 -> 385
       });
 
       it("moves two columns when dragged over snap threshold", () => {
         resizeBy(cy.get("@textboxEl"), 400)
           .then(() => cy.get("@textboxEl"))
           .invoke("width")
-          .should("eq", 985); // resized by 400, 585 -> 985
+          .should("eq", 685); // resized by 400, 285 -> 685
       });
     });
 
@@ -101,16 +101,16 @@ describe("Grid compliant widgets", () => {
         resizeBy(cy.get("@textboxEl"), 0, 30)
           .then(() => cy.get("@textboxEl"))
           .invoke("height")
-          .should("eq", 185); // resized by 50, , 135 -> 185
+          .should("eq", 185);
       });
 
       it("shrinks to minimum", () => {
         cy.get("@textboxEl")
-          .then($el => resizeBy(cy.get("@textboxEl"), -$el.width(), -$el.height())) // resize to 0,0
+          .then(($el) => resizeBy(cy.get("@textboxEl"), -$el.width(), -$el.height())) // resize to 0,0
           .then(() => cy.get("@textboxEl"))
-          .should($el => {
+          .should(($el) => {
             expect($el.width()).to.eq(185); // min textbox width
-            expect($el.height()).to.eq(35); // min textbox height
+            expect($el.height()).to.eq(85); // min textbox height
           });
       });
     });

client/cypress/integration/dashboard/textbox_spec.js

@@ -3,7 +3,7 @@
 import { getWidgetTestId, editDashboard } from "../../support/dashboard";
 
 describe("Textbox", () => {
-  beforeEach(function() {
+  beforeEach(function () {
     cy.login();
     cy.createDashboard("Foo Bar").then(({ id }) => {
       this.dashboardId = id;
@@ -12,12 +12,10 @@ describe("Textbox", () => {
   });
 
   const confirmDeletionInModal = () => {
-    cy.get(".ant-modal .ant-btn")
+    cy.get(".ant-modal .ant-btn").contains("Delete").click({ force: true });
-      .contains("Delete")
-      .click({ force: true });
   };
 
-  it("adds textbox", function() {
+  it("adds textbox", function () {
     cy.visit(this.dashboardUrl);
     editDashboard();
     cy.getByTestId("AddTextboxButton").click();
@@ -29,10 +27,10 @@ describe("Textbox", () => {
     cy.get(".widget-text").should("exist");
   });
 
-  it("removes textbox by X button", function() {
+  it("removes textbox by X button", function () {
     cy.addTextbox(this.dashboardId, "Hello World!")
       .then(getWidgetTestId)
-      .then(elTestId => {
+      .then((elTestId) => {
         cy.visit(this.dashboardUrl);
         editDashboard();
 
@@ -45,32 +43,30 @@ describe("Textbox", () => {
       });
   });
 
-  it("removes textbox by menu", function() {
+  it("removes textbox by menu", function () {
     cy.addTextbox(this.dashboardId, "Hello World!")
       .then(getWidgetTestId)
-      .then(elTestId => {
+      .then((elTestId) => {
         cy.visit(this.dashboardUrl);
         cy.getByTestId(elTestId).within(() => {
           cy.getByTestId("WidgetDropdownButton").click();
         });
-        cy.getByTestId("WidgetDropdownButtonMenu")
+        cy.getByTestId("WidgetDropdownButtonMenu").contains("Remove from Dashboard").click();
-          .contains("Remove from Dashboard")
-          .click();
 
         confirmDeletionInModal();
         cy.getByTestId(elTestId).should("not.exist");
       });
   });
 
-  it("allows opening menu after removal", function() {
+  it("allows opening menu after removal", function () {
     let elTestId1;
     cy.addTextbox(this.dashboardId, "txb 1")
       .then(getWidgetTestId)
-      .then(elTestId => {
+      .then((elTestId) => {
         elTestId1 = elTestId;
         return cy.addTextbox(this.dashboardId, "txb 2").then(getWidgetTestId);
       })
-      .then(elTestId2 => {
+      .then((elTestId2) => {
         cy.visit(this.dashboardUrl);
         editDashboard();
 
@@ -97,10 +93,10 @@ describe("Textbox", () => {
       });
   });
 
-  it("edits textbox", function() {
+  it("edits textbox", function () {
     cy.addTextbox(this.dashboardId, "Hello World!")
       .then(getWidgetTestId)
-      .then(elTestId => {
+      .then((elTestId) => {
         cy.visit(this.dashboardUrl);
         cy.getByTestId(elTestId)
           .as("textboxEl")
@@ -108,17 +104,13 @@ describe("Textbox", () => {
             cy.getByTestId("WidgetDropdownButton").click();
           });
 
-        cy.getByTestId("WidgetDropdownButtonMenu")
+        cy.getByTestId("WidgetDropdownButtonMenu").contains("Edit").click();
-          .contains("Edit")
-          .click();
 
         const newContent = "[edited]";
         cy.getByTestId("TextboxDialog")
           .should("exist")
           .within(() => {
-            cy.get("textarea")
+            cy.get("textarea").clear().type(newContent);
-              .clear()
-              .type(newContent);
             cy.contains("button", "Save").click();
           });
 
@@ -126,7 +118,7 @@ describe("Textbox", () => {
       });
   });
 
-  it("renders textbox according to position configuration", function() {
+  it("renders textbox according to position configuration", function () {
     const id = this.dashboardId;
     const txb1Pos = { col: 0, row: 0, sizeX: 3, sizeY: 2 };
     const txb2Pos = { col: 1, row: 1, sizeX: 3, sizeY: 4 };
@@ -135,15 +127,15 @@ describe("Textbox", () => {
     cy.addTextbox(id, "x", { position: txb1Pos })
       .then(() => cy.addTextbox(id, "x", { position: txb2Pos }))
       .then(getWidgetTestId)
-      .then(elTestId => {
+      .then((elTestId) => {
         cy.visit(this.dashboardUrl);
         return cy.getByTestId(elTestId);
       })
-      .should($el => {
+      .should(($el) => {
         const { top, left } = $el.offset();
         expect(top).to.be.oneOf([162, 162.015625]);
-        expect(left).to.eq(282);
+        expect(left).to.eq(188);
-        expect($el.width()).to.eq(545);
+        expect($el.width()).to.eq(265);
         expect($el.height()).to.eq(185);
       });
   });

client/cypress/integration/embed/share_embed_spec.js

@@ -5,8 +5,9 @@ describe("Embedded Queries", () => {
   });
 
   it("is unavailable when public urls feature is disabled", () => {
-    cy.createQuery({ query: "select name from users order by name" }).then(query => {
+    cy.createQuery({ query: "select name from users order by name" }).then((query) => {
       cy.visit(`/queries/${query.id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.getByTestId("ExecuteButton").click();
       cy.getByTestId("QueryPageVisualizationTabs", { timeout: 10000 }).should("exist");
       cy.clickThrough(`
@@ -15,7 +16,7 @@ describe("Embedded Queries", () => {
         `);
       cy.getByTestId("EmbedIframe")
         .invoke("text")
-        .then(embedUrl => {
+        .then((embedUrl) => {
           // disable the feature
           cy.updateOrgSettings({ disable_public_urls: true });
 
@@ -23,9 +24,7 @@ describe("Embedded Queries", () => {
           cy.visit(`/queries/${query.id}/source`);
           cy.getByTestId("QueryPageVisualizationTabs", { timeout: 10000 }).should("exist");
           cy.getByTestId("QueryPageHeaderMoreButton").click();
-          cy.get(".ant-dropdown-menu-item")
+          cy.get(".ant-dropdown-menu-item").should("exist").should("not.contain", "Show API Key");
-            .should("exist")
-            .should("not.contain", "Show API Key");
           cy.getByTestId("QueryControlDropdownButton").click();
           cy.get(".ant-dropdown-menu-item").should("exist");
           cy.getByTestId("ShowEmbedDialogButton").should("not.exist");
@@ -42,8 +41,9 @@ describe("Embedded Queries", () => {
   });
 
   it("can be shared without parameters", () => {
-    cy.createQuery({ query: "select name from users order by name" }).then(query => {
+    cy.createQuery({ query: "select name from users order by name" }).then((query) => {
       cy.visit(`/queries/${query.id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.getByTestId("ExecuteButton").click();
       cy.getByTestId("QueryPageVisualizationTabs", { timeout: 10000 }).should("exist");
       cy.clickThrough(`
@@ -52,7 +52,7 @@ describe("Embedded Queries", () => {
         `);
       cy.getByTestId("EmbedIframe")
         .invoke("text")
-        .then(embedUrl => {
+        .then((embedUrl) => {
           cy.logout();
           cy.visit(embedUrl);
           cy.getByTestId("VisualizationEmbed", { timeout: 10000 }).should("exist");
@@ -90,7 +90,7 @@ describe("Embedded Queries", () => {
 
     cy.getByTestId("EmbedIframe")
       .invoke("text")
-      .then(embedUrl => {
+      .then((embedUrl) => {
         cy.logout();
         cy.visit(embedUrl);
         cy.getByTestId("VisualizationEmbed", { timeout: 10000 }).should("exist");

client/cypress/integration/query/parameter_spec.js

@@ -2,16 +2,14 @@ import { dragParam } from "../../support/parameters";
 import dayjs from "dayjs";
 
 function openAndSearchAntdDropdown(testId, paramOption) {
-  cy.getByTestId(testId)
+  cy.getByTestId(testId).find(".ant-select-selection-search-input").type(paramOption, { force: true });
-    .find(".ant-select-selection-search-input")
-    .type(paramOption, { force: true });
 }
 
 describe("Parameter", () => {
-  const expectDirtyStateChange = edit => {
+  const expectDirtyStateChange = (edit) => {
     cy.getByTestId("ParameterName-test-parameter")
       .find(".parameter-input")
-      .should($el => {
+      .should(($el) => {
         assert.isUndefined($el.data("dirty"));
       });
 
@@ -19,7 +17,7 @@ describe("Parameter", () => {
 
     cy.getByTestId("ParameterName-test-parameter")
       .find(".parameter-input")
-      .should($el => {
+      .should(($el) => {
         assert.isTrue($el.data("dirty"));
       });
   };
@@ -42,9 +40,7 @@ describe("Parameter", () => {
     });
 
     it("updates the results after clicking Apply", () => {
-      cy.getByTestId("ParameterName-test-parameter")
+      cy.getByTestId("ParameterName-test-parameter").find("input").type("Redash");
-        .find("input")
-        .type("Redash");
 
       cy.getByTestId("ParameterApplyButton").click();
 
@@ -53,13 +49,66 @@ describe("Parameter", () => {
 
     it("sets dirty state when edited", () => {
       expectDirtyStateChange(() => {
-        cy.getByTestId("ParameterName-test-parameter")
+        cy.getByTestId("ParameterName-test-parameter").find("input").type("Redash");
-          .find("input")
-          .type("Redash");
       });
     });
   });
 
+  describe("Text Pattern Parameter", () => {
+    beforeEach(() => {
+      const queryData = {
+        name: "Text Pattern Parameter",
+        query: "SELECT '{{test-parameter}}' AS parameter",
+        options: {
+          parameters: [{ name: "test-parameter", title: "Test Parameter", type: "text-pattern", regex: "a.*a" }],
+        },
+      };
+
+      cy.createQuery(queryData, false).then(({ id }) => cy.visit(`/queries/${id}/source`));
+    });
+
+    it("updates the results after clicking Apply", () => {
+      cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}arta");
+
+      cy.getByTestId("ParameterApplyButton").click();
+
+      cy.getByTestId("TableVisualization").should("contain", "arta");
+
+      cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}arounda");
+
+      cy.getByTestId("ParameterApplyButton").click();
+
+      cy.getByTestId("TableVisualization").should("contain", "arounda");
+    });
+
+    it("throws error message with invalid query request", () => {
+      cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}arta");
+
+      cy.getByTestId("ParameterApplyButton").click();
+
+      cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}abcab");
+
+      cy.getByTestId("ParameterApplyButton").click();
+
+      cy.getByTestId("QueryExecutionStatus").should("exist");
+    });
+
+    it("sets dirty state when edited", () => {
+      expectDirtyStateChange(() => {
+        cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}arta");
+      });
+    });
+
+    it("doesn't let user save invalid regex", () => {
+      cy.get(".fa-cog").click();
+      cy.getByTestId("RegexPatternInput").type("{selectall}[");
+      cy.contains("Invalid Regex Pattern").should("exist");
+      cy.getByTestId("SaveParameterSettings").click();
+      cy.get(".fa-cog").click();
+      cy.getByTestId("RegexPatternInput").should("not.equal", "[");
+    });
+  });
+
   describe("Number Parameter", () => {
     beforeEach(() => {
       const queryData = {
@@ -74,17 +123,13 @@ describe("Parameter", () => {
     });
 
     it("updates the results after clicking Apply", () => {
-      cy.getByTestId("ParameterName-test-parameter")
+      cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}42");
-        .find("input")
-        .type("{selectall}42");
 
       cy.getByTestId("ParameterApplyButton").click();
 
       cy.getByTestId("TableVisualization").should("contain", 42);
 
-      cy.getByTestId("ParameterName-test-parameter")
+      cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}31415");
-        .find("input")
-        .type("{selectall}31415");
 
       cy.getByTestId("ParameterApplyButton").click();
 
@@ -93,9 +138,7 @@ describe("Parameter", () => {
 
     it("sets dirty state when edited", () => {
       expectDirtyStateChange(() => {
-        cy.getByTestId("ParameterName-test-parameter")
+        cy.getByTestId("ParameterName-test-parameter").find("input").type("{selectall}42");
-          .find("input")
-          .type("{selectall}42");
       });
     });
   });
@@ -119,10 +162,7 @@ describe("Parameter", () => {
       openAndSearchAntdDropdown("ParameterName-test-parameter", "value2"); // asserts option filter prop
 
       // only the filtered option should be on the DOM
-      cy.get(".ant-select-item-option")
+      cy.get(".ant-select-item-option").should("have.length", 1).and("contain", "value2").click();
-        .should("have.length", 1)
-        .and("contain", "value2")
-        .click();
 
       cy.getByTestId("ParameterApplyButton").click();
       // ensure that query is being executed
@@ -140,12 +180,10 @@ describe("Parameter", () => {
         SaveParameterSettings
       `);
 
-      cy.getByTestId("ParameterName-test-parameter")
+      cy.getByTestId("ParameterName-test-parameter").find(".ant-select-selection-search").click();
-        .find(".ant-select-selection-search")
-        .click();
 
       // select all unselected options
-      cy.get(".ant-select-item-option").each($option => {
+      cy.get(".ant-select-item-option").each(($option) => {
         if (!$option.hasClass("ant-select-item-option-selected")) {
           cy.wrap($option).click();
         }
@@ -160,9 +198,7 @@ describe("Parameter", () => {
 
     it("sets dirty state when edited", () => {
       expectDirtyStateChange(() => {
-        cy.getByTestId("ParameterName-test-parameter")
+        cy.getByTestId("ParameterName-test-parameter").find(".ant-select").click();
-          .find(".ant-select")
-          .click();
 
         cy.contains(".ant-select-item-option", "value2").click();
       });
@@ -176,7 +212,7 @@ describe("Parameter", () => {
           name: "Dropdown Query",
           query: "",
         };
-        cy.createQuery(dropdownQueryData, true).then(dropdownQuery => {
+        cy.createQuery(dropdownQueryData, true).then((dropdownQuery) => {
           const queryData = {
             name: "Query Based Dropdown Parameter",
             query: "SELECT '{{test-parameter}}' AS parameter",
@@ -208,7 +244,7 @@ describe("Parameter", () => {
                   SELECT 'value2' AS name, 2 AS value UNION ALL
                   SELECT 'value3' AS name, 3 AS value`,
         };
-        cy.createQuery(dropdownQueryData, true).then(dropdownQuery => {
+        cy.createQuery(dropdownQueryData, true).then((dropdownQuery) => {
           const queryData = {
             name: "Query Based Dropdown Parameter",
             query: "SELECT '{{test-parameter}}' AS parameter",
@@ -234,10 +270,7 @@ describe("Parameter", () => {
         openAndSearchAntdDropdown("ParameterName-test-parameter", "value2"); // asserts option filter prop
 
         // only the filtered option should be on the DOM
-        cy.get(".ant-select-item-option")
+        cy.get(".ant-select-item-option").should("have.length", 1).and("contain", "value2").click();
-          .should("have.length", 1)
-          .and("contain", "value2")
-          .click();
 
         cy.getByTestId("ParameterApplyButton").click();
         // ensure that query is being executed
@@ -255,12 +288,10 @@ describe("Parameter", () => {
           SaveParameterSettings
         `);
 
-        cy.getByTestId("ParameterName-test-parameter")
+        cy.getByTestId("ParameterName-test-parameter").find(".ant-select").click();
-          .find(".ant-select")
-          .click();
 
         // make sure all options are unselected and select all
-        cy.get(".ant-select-item-option").each($option => {
+        cy.get(".ant-select-item-option").each(($option) => {
           expect($option).not.to.have.class("ant-select-dropdown-menu-item-selected");
           cy.wrap($option).click();
         });
@@ -274,14 +305,10 @@ describe("Parameter", () => {
     });
   });
 
-  const selectCalendarDate = date => {
+  const selectCalendarDate = (date) => {
-    cy.getByTestId("ParameterName-test-parameter")
+    cy.getByTestId("ParameterName-test-parameter").find("input").click();
-      .find("input")
-      .click();
 
-    cy.get(".ant-picker-panel")
+    cy.get(".ant-picker-panel").contains(".ant-picker-cell-inner", date).click();
-      .contains(".ant-picker-cell-inner", date)
-      .click();
   };
 
   describe("Date Parameter", () => {
@@ -303,10 +330,10 @@ describe("Parameter", () => {
     });
 
     afterEach(() => {
-      cy.clock().then(clock => clock.restore());
+      cy.clock().then((clock) => clock.restore());
     });
 
-    it("updates the results after selecting a date", function() {
+    it("updates the results after selecting a date", function () {
       selectCalendarDate("15");
 
       cy.getByTestId("ParameterApplyButton").click();
@@ -314,12 +341,10 @@ describe("Parameter", () => {
       cy.getByTestId("TableVisualization").should("contain", dayjs(this.now).format("15/MM/YY"));
     });
 
-    it("allows picking a dynamic date", function() {
+    it("allows picking a dynamic date", function () {
       cy.getByTestId("DynamicButton").click();
 
-      cy.getByTestId("DynamicButtonMenu")
+      cy.getByTestId("DynamicButtonMenu").contains("Today/Now").click();
-        .contains("Today/Now")
-        .click();
 
       cy.getByTestId("ParameterApplyButton").click();
 
@@ -350,14 +375,11 @@ describe("Parameter", () => {
     });
 
     afterEach(() => {
-      cy.clock().then(clock => clock.restore());
+      cy.clock().then((clock) => clock.restore());
     });
 
-    it("updates the results after selecting a date and clicking in ok", function() {
+    it("updates the results after selecting a date and clicking in ok", function () {
-      cy.getByTestId("ParameterName-test-parameter")
+      cy.getByTestId("ParameterName-test-parameter").find("input").as("Input").click();
-        .find("input")
-        .as("Input")
-        .click();
 
       selectCalendarDate("15");
 
@@ -368,27 +390,20 @@ describe("Parameter", () => {
       cy.getByTestId("TableVisualization").should("contain", dayjs(this.now).format("YYYY-MM-15 HH:mm"));
     });
 
-    it("shows the current datetime after clicking in Now", function() {
+    it("shows the current datetime after clicking in Now", function () {
-      cy.getByTestId("ParameterName-test-parameter")
+      cy.getByTestId("ParameterName-test-parameter").find("input").as("Input").click();
-        .find("input")
-        .as("Input")
-        .click();
 
-      cy.get(".ant-picker-panel")
+      cy.get(".ant-picker-panel").contains("Now").click();
-        .contains("Now")
-        .click();
 
       cy.getByTestId("ParameterApplyButton").click();
 
       cy.getByTestId("TableVisualization").should("contain", dayjs(this.now).format("YYYY-MM-DD HH:mm"));
     });
 
-    it("allows picking a dynamic date", function() {
+    it("allows picking a dynamic date", function () {
       cy.getByTestId("DynamicButton").click();
 
-      cy.getByTestId("DynamicButtonMenu")
+      cy.getByTestId("DynamicButtonMenu").contains("Today/Now").click();
-        .contains("Today/Now")
-        .click();
 
       cy.getByTestId("ParameterApplyButton").click();
 
@@ -397,31 +412,20 @@ describe("Parameter", () => {
 
     it("sets dirty state when edited", () => {
       expectDirtyStateChange(() => {
-        cy.getByTestId("ParameterName-test-parameter")
+        cy.getByTestId("ParameterName-test-parameter").find("input").click();
-          .find("input")
-          .click();
 
-        cy.get(".ant-picker-panel")
+        cy.get(".ant-picker-panel").contains("Now").click();
-          .contains("Now")
-          .click();
       });
     });
   });
 
   describe("Date Range Parameter", () => {
     const selectCalendarDateRange = (startDate, endDate) => {
-      cy.getByTestId("ParameterName-test-parameter")
+      cy.getByTestId("ParameterName-test-parameter").find("input").first().click();
-        .find("input")
-        .first()
-        .click();
 
-      cy.get(".ant-picker-panel")
+      cy.get(".ant-picker-panel").contains(".ant-picker-cell-inner", startDate).click();
-        .contains(".ant-picker-cell-inner", startDate)
-        .click();
 
-      cy.get(".ant-picker-panel")
+      cy.get(".ant-picker-panel").contains(".ant-picker-cell-inner", endDate).click();
-        .contains(".ant-picker-cell-inner", endDate)
-        .click();
     };
 
     beforeEach(() => {
@@ -442,10 +446,10 @@ describe("Parameter", () => {
     });
 
     afterEach(() => {
-      cy.clock().then(clock => clock.restore());
+      cy.clock().then((clock) => clock.restore());
     });
 
-    it("updates the results after selecting a date range", function() {
+    it("updates the results after selecting a date range", function () {
       selectCalendarDateRange("15", "20");
 
       cy.getByTestId("ParameterApplyButton").click();
@@ -457,12 +461,10 @@ describe("Parameter", () => {
       );
     });
 
-    it("allows picking a dynamic date range", function() {
+    it("allows picking a dynamic date range", function () {
       cy.getByTestId("DynamicButton").click();
 
-      cy.getByTestId("DynamicButtonMenu")
+      cy.getByTestId("DynamicButtonMenu").contains("Last month").click();
-        .contains("Last month")
-        .click();
 
       cy.getByTestId("ParameterApplyButton").click();
 
@@ -479,15 +481,10 @@ describe("Parameter", () => {
   });
 
   describe("Apply Changes", () => {
-    const expectAppliedChanges = apply => {
+    const expectAppliedChanges = (apply) => {
-      cy.getByTestId("ParameterName-test-parameter-1")
+      cy.getByTestId("ParameterName-test-parameter-1").find("input").as("Input").type("Redash");
-        .find("input")
-        .as("Input")
-        .type("Redash");
 
-      cy.getByTestId("ParameterName-test-parameter-2")
+      cy.getByTestId("ParameterName-test-parameter-2").find("input").type("Redash");
-        .find("input")
-        .type("Redash");
 
       cy.location("search").should("not.contain", "Redash");
 
@@ -523,10 +520,7 @@ describe("Parameter", () => {
     it("shows and hides according to parameter dirty state", () => {
       cy.getByTestId("ParameterApplyButton").should("not.be", "visible");
 
-      cy.getByTestId("ParameterName-test-parameter-1")
+      cy.getByTestId("ParameterName-test-parameter-1").find("input").as("Param").type("Redash");
-        .find("input")
-        .as("Param")
-        .type("Redash");
 
       cy.getByTestId("ParameterApplyButton").should("be.visible");
 
@@ -536,21 +530,13 @@ describe("Parameter", () => {
     });
 
     it("updates dirty counter", () => {
-      cy.getByTestId("ParameterName-test-parameter-1")
+      cy.getByTestId("ParameterName-test-parameter-1").find("input").type("Redash");
-        .find("input")
-        .type("Redash");
 
-      cy.getByTestId("ParameterApplyButton")
+      cy.getByTestId("ParameterApplyButton").find(".ant-badge-count p.current").should("contain", "1");
-        .find(".ant-badge-count p.current")
-        .should("contain", "1");
 
-      cy.getByTestId("ParameterName-test-parameter-2")
+      cy.getByTestId("ParameterName-test-parameter-2").find("input").type("Redash");
-        .find("input")
-        .type("Redash");
 
-      cy.getByTestId("ParameterApplyButton")
+      cy.getByTestId("ParameterApplyButton").find(".ant-badge-count p.current").should("contain", "2");
-        .find(".ant-badge-count p.current")
-        .should("contain", "2");
     });
 
     it('applies changes from "Apply Changes" button', () => {
@@ -560,16 +546,13 @@ describe("Parameter", () => {
     });
 
     it('applies changes from "alt+enter" keyboard shortcut', () => {
-      expectAppliedChanges(input => {
+      expectAppliedChanges((input) => {
         input.type("{alt}{enter}");
       });
     });
 
     it('disables "Execute" button', () => {
-      cy.getByTestId("ParameterName-test-parameter-1")
+      cy.getByTestId("ParameterName-test-parameter-1").find("input").as("Input").type("Redash");
-        .find("input")
-        .as("Input")
-        .type("Redash");
       cy.getByTestId("ExecuteButton").should("be.disabled");
 
       cy.get("@Input").clear();
@@ -594,15 +577,12 @@ describe("Parameter", () => {
 
       cy.createQuery(queryData, false).then(({ id }) => cy.visit(`/queries/${id}/source`));
 
-      cy.get(".parameter-block")
+      cy.get(".parameter-block").first().invoke("width").as("paramWidth");
-        .first()
-        .invoke("width")
-        .as("paramWidth");
 
       cy.get("body").type("{alt}D"); // hide schema browser
     });
 
-    it("is possible to rearrange parameters", function() {
+    it("is possible to rearrange parameters", function () {
       cy.server();
       cy.route("POST", "**/api/queries/*").as("QuerySave");
 

client/cypress/integration/visualizations/box_plot_spec.js

@@ -44,6 +44,7 @@ describe("Box Plot", () => {
       .then(({ id }) => cy.createVisualization(id, "BOXPLOT", "Boxplot (Deprecated)", {}))
       .then(({ id: visualizationId, query_id: queryId }) => {
         cy.visit(`queries/${queryId}/source#${visualizationId}`);
+        cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
         cy.getByTestId("ExecuteButton").click();
       });
   });
@@ -61,9 +62,7 @@ describe("Box Plot", () => {
     // Wait for proper initialization of visualization
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find("svg").should("exist");
-      .find("svg")
-      .should("exist");
 
     cy.percySnapshot("Visualizations - Box Plot", { widths: [viewportWidth] });
   });

client/cypress/integration/visualizations/chart_spec.js

@@ -26,33 +26,34 @@ const SQL = `
 describe("Chart", () => {
   beforeEach(() => {
     cy.login();
-    cy.createQuery({ name: "Chart Visualization", query: SQL })
+    cy.createQuery({ name: "Chart Visualization", query: SQL }).its("id").as("queryId");
-      .its("id")
-      .as("queryId");
   });
 
-  it("creates Bar charts", function() {
+  it("creates Bar charts", function () {
     cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
     cy.getByTestId("ExecuteButton").click();
 
-    const getBarChartAssertionFunction = (specificBarChartAssertionFn = () => {}) => () => {
+    const getBarChartAssertionFunction =
-      // checks for TabbedEditor standard tabs
+      (specificBarChartAssertionFn = () => {}) =>
-      assertTabbedEditor();
+      () => {
+        // checks for TabbedEditor standard tabs
+        assertTabbedEditor();
 
-      // standard chart should be bar
+        // standard chart should be bar
-      cy.getByTestId("Chart.GlobalSeriesType").contains(".ant-select-selection-item", "Bar");
+        cy.getByTestId("Chart.GlobalSeriesType").contains(".ant-select-selection-item", "Bar");
 
-      // checks the plot canvas exists and is empty
+        // checks the plot canvas exists and is empty
-      assertPlotPreview("not.exist");
+        assertPlotPreview("not.exist");
 
-      // creates a chart and checks it is plotted
+        // creates a chart and checks it is plotted
-      cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
+        cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
-      cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value1");
+        cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value1");
-      cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value2");
+        cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value2");
-      assertPlotPreview("exist");
+        assertPlotPreview("exist");
 
-      specificBarChartAssertionFn();
+        specificBarChartAssertionFn();
-    };
+      };
 
     const chartTests = [
       {
@@ -95,8 +96,8 @@ describe("Chart", () => {
 
     const withDashboardWidgetsAssertionFn = (widgetGetters, dashboardUrl) => {
       cy.visit(dashboardUrl);
-      widgetGetters.forEach(widgetGetter => {
+      widgetGetters.forEach((widgetGetter) => {
-        cy.get(`@${widgetGetter}`).then(widget => {
+        cy.get(`@${widgetGetter}`).then((widget) => {
           cy.getByTestId(getWidgetTestId(widget)).within(() => {
             cy.get("g.points").should("exist");
           });
@@ -107,4 +108,36 @@ describe("Chart", () => {
     createDashboardWithCharts("Bar chart visualizations", chartGetters, withDashboardWidgetsAssertionFn);
     cy.percySnapshot("Visualizations - Charts - Bar");
   });
+  it("colors Bar charts", function () {
+    cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.getByTestId("ExecuteButton").click();
+    cy.getByTestId("NewVisualization").click();
+    cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
+    cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value1");
+    cy.getByTestId("VisualizationEditor.Tabs.Colors").click();
+    cy.getByTestId("ColorScheme").click();
+    cy.getByTestId("ColorOptionViridis").click();
+    cy.getByTestId("ColorScheme").click();
+    cy.getByTestId("ColorOptionTableau 10").click();
+    cy.getByTestId("ColorScheme").click();
+    cy.getByTestId("ColorOptionD3 Category 10").click();
+  });
+  it("colors Pie charts", function () {
+    cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.getByTestId("ExecuteButton").click();
+    cy.getByTestId("NewVisualization").click();
+    cy.getByTestId("Chart.GlobalSeriesType").click();
+    cy.getByTestId("Chart.ChartType.pie").click();
+    cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
+    cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value1");
+    cy.getByTestId("VisualizationEditor.Tabs.Colors").click();
+    cy.getByTestId("ColorScheme").click();
+    cy.getByTestId("ColorOptionViridis").click();
+    cy.getByTestId("ColorScheme").click();
+    cy.getByTestId("ColorOptionTableau 10").click();
+    cy.getByTestId("ColorScheme").click();
+    cy.getByTestId("ColorOptionD3 Category 10").click();
+  });
 });

client/cypress/integration/visualizations/choropleth_spec.js

@@ -34,6 +34,7 @@ describe("Choropleth", () => {
     cy.login();
     cy.createQuery({ query: SQL }).then(({ id }) => {
       cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.getByTestId("ExecuteButton").click();
     });
     cy.getByTestId("NewVisualization").click();
@@ -76,9 +77,7 @@ describe("Choropleth", () => {
 
     // Wait for proper initialization of visualization
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".map-visualization-container.leaflet-container").should("exist");
-      .find(".map-visualization-container.leaflet-container")
-      .should("exist");
 
     cy.percySnapshot("Visualizations - Choropleth", { widths: [viewportWidth] });
   });

client/cypress/integration/visualizations/cohort_spec.js

@@ -24,6 +24,7 @@ describe("Cohort", () => {
     cy.login();
     cy.createQuery({ query: SQL }).then(({ id }) => {
       cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.getByTestId("ExecuteButton").click();
     });
     cy.getByTestId("NewVisualization").click();
@@ -51,9 +52,7 @@ describe("Cohort", () => {
 
     // Wait for proper initialization of visualization
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find("table").should("exist");
-      .find("table")
-      .should("exist");
     cy.percySnapshot("Visualizations - Cohort (simple)", { widths: [viewportWidth] });
 
     cy.clickThrough(`
@@ -64,9 +63,7 @@ describe("Cohort", () => {
 
     // Wait for proper initialization of visualization
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find("table").should("exist");
-      .find("table")
-      .should("exist");
     cy.percySnapshot("Visualizations - Cohort (diagonal)", { widths: [viewportWidth] });
   });
 });

client/cypress/integration/visualizations/counter_spec.js

@@ -12,6 +12,7 @@ describe("Counter", () => {
     cy.login();
     cy.createQuery({ query: SQL }).then(({ id }) => {
       cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.getByTestId("ExecuteButton").click();
     });
     cy.getByTestId("NewVisualization").click();
@@ -24,9 +25,7 @@ describe("Counter", () => {
       Counter.General.ValueColumn.a
     `);
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -43,9 +42,7 @@ describe("Counter", () => {
       "Counter.General.Label": "Custom Label",
     });
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -65,9 +62,7 @@ describe("Counter", () => {
       "Counter.General.TargetValueRowNumber": "2",
     });
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -83,9 +78,7 @@ describe("Counter", () => {
       Counter.General.TargetValueColumn.b
     `);
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -106,9 +99,7 @@ describe("Counter", () => {
       "Counter.General.TargetValueRowNumber": "2",
     });
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -123,9 +114,7 @@ describe("Counter", () => {
       Counter.General.CountRows
     `);
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -151,9 +140,7 @@ describe("Counter", () => {
       "Counter.Formatting.StringSuffix": "%",
     });
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -180,9 +167,7 @@ describe("Counter", () => {
       "Counter.Formatting.StringSuffix": "%",
     });
 
-    cy.getByTestId("VisualizationPreview")
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");
-      .find(".counter-visualization-container")
-      .should("exist");
 
     // wait a bit before taking snapshot
     cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting