Update changelog details for snowflake (#5519)

* Add test that reproduces issue #5466

* Fix: Duplicate dashboard rows were returned by Dashboard.all() (#5466)

.circleci/Dockerfile.cypress

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

.circleci/config.yml

@@ -57,6 +57,9 @@ jobs:
       - store_artifacts:
           path: coverage.xml
   frontend-lint:
+    environment:
+      CYPRESS_INSTALL_BINARY: 0
+      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
     docker:
       - image: circleci/node:12
     steps:
@@ -67,6 +70,9 @@ jobs:
       - store_test_results:
           path: /tmp/test-results
   frontend-unit-tests:
+    environment:
+      CYPRESS_INSTALL_BINARY: 0
+      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
     docker:
       - image: circleci/node:12
     steps:
@@ -90,11 +96,20 @@ jobs:
       PERCY_TOKEN_ENCODED: ZGRiY2ZmZDQ0OTdjMzM5ZWE0ZGQzNTZiOWNkMDRjOTk4Zjg0ZjMxMWRmMDZiM2RjOTYxNDZhOGExMjI4ZDE3MA==
       CYPRESS_PROJECT_ID_ENCODED: OTI0Y2th
       CYPRESS_RECORD_KEY_ENCODED: YzA1OTIxMTUtYTA1Yy00NzQ2LWEyMDMtZmZjMDgwZGI2ODgx
+      CYPRESS_INSTALL_BINARY: 0
+      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
     docker:
       - image: circleci/node:12
     steps:
       - setup_remote_docker
       - checkout
+      - run:
+          name: Enable Code Coverage report for master branch
+          command: |
+            if [ "$CIRCLE_BRANCH" = "master" ]; then
+              echo 'export CODE_COVERAGE=true' >> $BASH_ENV
+              source $BASH_ENV
+            fi
       - run:
           name: Install npm dependencies
           command: |
@@ -113,6 +128,13 @@ jobs:
           command: |
             docker-compose logs
           when: on_fail
+      - run:
+          name: Copy Code Coverage results
+          command: |
+            docker cp cypress:/usr/src/app/coverage ./coverage || true
+          when: always
+      - store_artifacts:
+          path: coverage
   build-docker-image: *build-docker-image-job
   build-preview-docker-image: *build-docker-image-job
 workflows:

.circleci/docker-compose.cypress.yml

@@ -1,7 +1,20 @@
-version: '2.2'
+version: "2.2"
+x-redash-service: &redash-service
+  build:
+    context: ../
+    args:
+      skip_dev_deps: "true"
+      skip_ds_deps: "true"
+      code_coverage: ${CODE_COVERAGE}
+x-redash-environment: &redash-environment
+  REDASH_LOG_LEVEL: "INFO"
+  REDASH_REDIS_URL: "redis://redis:6379/0"
+  REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
+  REDASH_RATELIMIT_ENABLED: "false"
+  REDASH_ENFORCE_CSRF: "true"
 services:
   server:
-    build: ../
+    <<: *redash-service
     command: server
     depends_on:
       - postgres
@@ -9,30 +22,25 @@ services:
     ports:
       - "5000:5000"
     environment:
+      <<: *redash-environment
       PYTHONUNBUFFERED: 0
-      REDASH_LOG_LEVEL: "INFO"
-      REDASH_REDIS_URL: "redis://redis:6379/0"
-      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-      REDASH_RATELIMIT_ENABLED: "false"
-      REDASH_ENFORCE_CSRF: "true"
   scheduler:
-    build: ../
+    <<: *redash-service
     command: scheduler
     depends_on:
       - server
     environment:
-      REDASH_REDIS_URL: "redis://redis:6379/0"
+      <<: *redash-environment
   worker:
-    build: ../
+    <<: *redash-service
     command: worker
     depends_on:
       - server
     environment:
+      <<: *redash-environment
       PYTHONUNBUFFERED: 0
-      REDASH_LOG_LEVEL: "INFO"
-      REDASH_REDIS_URL: "redis://redis:6379/0"
-      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
   cypress:
+    ipc: host
     build:
       context: ../
       dockerfile: .circleci/Dockerfile.cypress
@@ -42,6 +50,7 @@ services:
       - scheduler
     environment:
       CYPRESS_baseUrl: "http://server:5000"
+      CYPRESS_coverage: ${CODE_COVERAGE}
       PERCY_TOKEN: ${PERCY_TOKEN}
       PERCY_BRANCH: ${CIRCLE_BRANCH}
       PERCY_COMMIT: ${CIRCLE_SHA1}

.gitignore

@@ -5,6 +5,8 @@ venv/
 .coveralls.yml
 .idea
 *.pyc
+.nyc_output
+coverage
 .coverage
 coverage.xml
 client/dist

CHANGELOG.md

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

Dockerfile

@@ -3,13 +3,24 @@ FROM node:12 as frontend-builder
 # Controls whether to build the frontend assets
 ARG skip_frontend_build
 
+ENV CYPRESS_INSTALL_BINARY=0
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
+
+RUN useradd -m -d /frontend redash
+USER redash
+
 WORKDIR /frontend
-COPY package.json package-lock.json /frontend/
+COPY --chown=redash package.json package-lock.json /frontend/
-COPY viz-lib /frontend/viz-lib
+COPY --chown=redash viz-lib /frontend/viz-lib
+
+# Controls whether to instrument code for coverage information
+ARG code_coverage
+ENV BABEL_ENV=${code_coverage:+test}
+
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
 
-COPY client /frontend/client
+COPY --chown=redash client /frontend/client
-COPY webpack.config.js /frontend/
+COPY --chown=redash webpack.config.js /frontend/
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm run build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
 FROM python:3.7-slim
 
@@ -55,8 +66,9 @@ RUN apt-get update && \
   rm -rf /var/lib/apt/lists/*
 
 ARG databricks_odbc_driver_url=https://databricks.com/wp-content/uploads/2.6.10.1010-2/SimbaSparkODBC-2.6.10.1010-2-Debian-64bit.zip
-ADD $databricks_odbc_driver_url /tmp/simba_odbc.zip
+RUN wget --quiet $databricks_odbc_driver_url -O /tmp/simba_odbc.zip \
-RUN unzip /tmp/simba_odbc.zip -d /tmp/ \
+  && chmod 600 /tmp/simba_odbc.zip \
+  && unzip /tmp/simba_odbc.zip -d /tmp/ \
   && dpkg -i /tmp/SimbaSparkODBC-*/*.deb \
   && echo "[Simba]\nDriver = /opt/simba/spark/lib/64/libsparkodbc_sb64.so" >> /etc/odbcinst.ini \
   && rm /tmp/simba_odbc.zip \
@@ -68,12 +80,19 @@ WORKDIR /app
 ENV PIP_DISABLE_PIP_VERSION_CHECK=1
 ENV PIP_NO_CACHE_DIR=1
 
-# We first copy only the requirements file, to avoid rebuilding on every file
+# rollback pip version to avoid legacy resolver problem
-# change.
+RUN pip install pip==20.2.4;
-COPY requirements.txt requirements_bundles.txt requirements_dev.txt requirements_all_ds.txt ./
+
-RUN if [ "x$skip_dev_deps" = "x" ] ; then pip install -r requirements.txt -r requirements_dev.txt; else pip install -r requirements.txt; fi
+# We first copy only the requirements file, to avoid rebuilding on every file change.
+COPY requirements_all_ds.txt ./
 RUN if [ "x$skip_ds_deps" = "x" ] ; then pip install -r requirements_all_ds.txt ; else echo "Skipping pip install -r requirements_all_ds.txt" ; fi
 
+COPY requirements_bundles.txt requirements_dev.txt ./
+RUN if [ "x$skip_dev_deps" = "x" ] ; then pip install -r requirements_dev.txt ; fi
+
+COPY requirements.txt ./
+RUN pip install -r requirements.txt
+
 COPY . /app
 COPY --from=frontend-builder /frontend/client/dist /app/client/dist
 RUN chown -R redash /app

Makefile

@@ -35,7 +35,7 @@ backend-unit-tests: up test_db
 	docker-compose run --rm --name tests server tests
 
 frontend-unit-tests: bundle
-	npm ci
+	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm ci
 	npm run bundle
 	npm test
 

README.md

@@ -73,6 +73,7 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - Shell Scripts
 - Snowflake
 - SQLite
+- TiDB
 - TreasureData
 - Vertica
 - Yandex AppMetrrica

bin/docker-entrypoint

@@ -18,8 +18,8 @@ worker() {
 
   export WORKERS_COUNT=${WORKERS_COUNT:-2}
   export QUEUES=${QUEUES:-}
-  
+
-  supervisord -c worker.conf
+  exec supervisord -c worker.conf
 }
 
 dev_worker() {

client/.babelrc

@@ -20,5 +20,10 @@
         "globals": ["Error"]
       }
     ]
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  }
 }

client/.eslintrc.js

@@ -5,10 +5,11 @@ module.exports = {
     "react-app",
     "plugin:compat/recommended",
     "prettier",
+    "plugin:jsx-a11y/recommended",
     // Remove any typescript-eslint rules that would conflict with prettier
     "prettier/@typescript-eslint",
   ],
-  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint"],
+  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint", "jsx-a11y"],
   settings: {
     "import/resolver": "webpack",
   },
@@ -19,7 +20,35 @@ module.exports = {
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
-    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/anchor-is-valid": [
+      // TMP
+      "off",
+      {
+        components: ["Link"],
+        aspects: ["noHref", "invalidHref", "preferButton"],
+      },
+    ],
+    "jsx-a11y/no-redundant-roles": "error",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/click-events-have-key-events": "off", // TMP
+    "jsx-a11y/no-static-element-interactions": "off", // TMP
+    "jsx-a11y/no-noninteractive-element-interactions": "off", // TMP
+    "no-console": ["warn", { allow: ["warn", "error"] }],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "antd",
+            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+          },
+          {
+            name: "antd/lib",
+            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {
@@ -34,6 +63,8 @@ module.exports = {
         // Do not complain about useless contructors in declaration files
         "no-useless-constructor": "off",
         "@typescript-eslint/no-useless-constructor": "error",
+        // Many API fields and generated types use camelcase
+        "@typescript-eslint/camelcase": "off",
       },
     },
   ],

client/app/assets/less/ant.less

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

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

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

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

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

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

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

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

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

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

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

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

@@ -127,11 +127,13 @@ body.fixed-layout {
   }
 }
 
-a.label-tag {
+.label-tag {
   background: fade(@redash-gray, 15%);
   color: darken(@redash-gray, 15%);
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
     color: darken(@redash-gray, 15%);
     background: fade(@redash-gray, 25%);
   }
@@ -141,6 +143,7 @@ a.label-tag {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  position: relative;
 }
 
 .query-fullscreen {

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

@@ -1,10 +1,11 @@
-import { first } from "lodash";
+import React, { useMemo } from "react";
-import React, { useState } from "react";
+import { first, includes } from "lodash";
-import Button from "antd/lib/button";
 import Menu from "antd/lib/menu";
 import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
 import HelpTrigger from "@/components/HelpTrigger";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
+import { useCurrentRoute } from "@/components/ApplicationArea/Router";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
 import logoUrl from "@/assets/images/redash_icon_small.png";
@@ -15,83 +16,109 @@ import AlertOutlinedIcon from "@ant-design/icons/AlertOutlined";
 import PlusOutlinedIcon from "@ant-design/icons/PlusOutlined";
 import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
 import SettingOutlinedIcon from "@ant-design/icons/SettingOutlined";
-import MenuUnfoldOutlinedIcon from "@ant-design/icons/MenuUnfoldOutlined";
-import MenuFoldOutlinedIcon from "@ant-design/icons/MenuFoldOutlined";
-
 import VersionInfo from "./VersionInfo";
+
 import "./DesktopNavbar.less";
 
-function NavbarSection({ inlineCollapsed, children, ...props }) {
+function NavbarSection({ children, ...props }) {
   return (
-    <Menu
+    <Menu selectable={false} mode="vertical" theme="dark" {...props}>
-      selectable={false}
-      mode={inlineCollapsed ? "inline" : "vertical"}
-      inlineCollapsed={inlineCollapsed}
-      theme="dark"
-      {...props}>
       {children}
     </Menu>
   );
 }
 
-export default function DesktopNavbar() {
+function useNavbarActiveState() {
-  const [collapsed, setCollapsed] = useState(true);
+  const currentRoute = useCurrentRoute();
 
+  return useMemo(
+    () => ({
+      dashboards: includes(
+        [
+          "Dashboards.List",
+          "Dashboards.Favorites",
+          "Dashboards.My",
+          "Dashboards.ViewOrEdit",
+          "Dashboards.LegacyViewOrEdit",
+        ],
+        currentRoute.id
+      ),
+      queries: includes(
+        [
+          "Queries.List",
+          "Queries.Favorites",
+          "Queries.Archived",
+          "Queries.My",
+          "Queries.View",
+          "Queries.New",
+          "Queries.Edit",
+        ],
+        currentRoute.id
+      ),
+      dataSources: includes(["DataSources.List"], currentRoute.id),
+      alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View", "Alerts.Edit"], currentRoute.id),
+    }),
+    [currentRoute.id]
+  );
+}
+
+export default function DesktopNavbar() {
   const firstSettingsTab = first(settingsMenu.getAvailableItems());
 
+  const activeState = useNavbarActiveState();
+
   const canCreateQuery = currentUser.hasPermission("create_query");
   const canCreateDashboard = currentUser.hasPermission("create_dashboard");
   const canCreateAlert = currentUser.hasPermission("list_alerts");
 
   return (
-    <div className="desktop-navbar">
+    <nav className="desktop-navbar">
-      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-logo">
+      <NavbarSection className="desktop-navbar-logo">
-        <div>
+        <div role="menuitem">
           <Link href="./">
             <img src={logoUrl} alt="Redash" />
           </Link>
         </div>
       </NavbarSection>
 
-      <NavbarSection inlineCollapsed={collapsed}>
+      <NavbarSection>
         {currentUser.hasPermission("list_dashboards") && (
-          <Menu.Item key="dashboards">
+          <Menu.Item key="dashboards" className={activeState.dashboards ? "navbar-active-item" : null}>
             <Link href="dashboards">
-              <DesktopOutlinedIcon />
+              <DesktopOutlinedIcon aria-label="Dashboard navigation button" />
-              <span>Dashboards</span>
+              <span className="desktop-navbar-label">Dashboards</span>
             </Link>
           </Menu.Item>
         )}
         {currentUser.hasPermission("view_query") && (
-          <Menu.Item key="queries">
+          <Menu.Item key="queries" className={activeState.queries ? "navbar-active-item" : null}>
             <Link href="queries">
-              <CodeOutlinedIcon />
+              <CodeOutlinedIcon aria-label="Queries navigation button" />
-              <span>Queries</span>
+              <span className="desktop-navbar-label">Queries</span>
             </Link>
           </Menu.Item>
         )}
         {currentUser.hasPermission("list_alerts") && (
-          <Menu.Item key="alerts">
+          <Menu.Item key="alerts" className={activeState.alerts ? "navbar-active-item" : null}>
             <Link href="alerts">
-              <AlertOutlinedIcon />
+              <AlertOutlinedIcon aria-label="Alerts navigation button" />
-              <span>Alerts</span>
+              <span className="desktop-navbar-label">Alerts</span>
             </Link>
           </Menu.Item>
         )}
       </NavbarSection>
 
-      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-spacer">
+      <NavbarSection className="desktop-navbar-spacer">
-        {(canCreateQuery || canCreateDashboard || canCreateAlert) && <Menu.Divider />}
         {(canCreateQuery || canCreateDashboard || canCreateAlert) && (
           <Menu.SubMenu
             key="create"
             popupClassName="desktop-navbar-submenu"
+            data-test="CreateButton"
+            tabIndex={0}
             title={
               <React.Fragment>
-                <span data-test="CreateButton">
+                <PlusOutlinedIcon />
-                  <PlusOutlinedIcon />
+                <span className="desktop-navbar-label">Create</span>
-                  <span>Create</span>
-                </span>
               </React.Fragment>
             }>
             {canCreateQuery && (
@@ -103,9 +130,9 @@ export default function DesktopNavbar() {
             )}
             {canCreateDashboard && (
               <Menu.Item key="new-dashboard">
-                <a data-test="CreateDashboardMenuItem" onMouseUp={() => CreateDashboardDialog.showModal()}>
+                <PlainButton data-test="CreateDashboardMenuItem" onClick={() => CreateDashboardDialog.showModal()}>
                   New Dashboard
-                </a>
+                </PlainButton>
               </Menu.Item>
             )}
             {canCreateAlert && (
@@ -119,32 +146,31 @@ export default function DesktopNavbar() {
         )}
       </NavbarSection>
 
-      <NavbarSection inlineCollapsed={collapsed}>
+      <NavbarSection>
         <Menu.Item key="help">
-          <HelpTrigger showTooltip={false} type="HOME">
+          <HelpTrigger showTooltip={false} type="HOME" tabIndex={0}>
             <QuestionCircleOutlinedIcon />
-            <span>Help</span>
+            <span className="desktop-navbar-label">Help</span>
           </HelpTrigger>
         </Menu.Item>
         {firstSettingsTab && (
-          <Menu.Item key="settings">
+          <Menu.Item key="settings" className={activeState.dataSources ? "navbar-active-item" : null}>
             <Link href={firstSettingsTab.path} data-test="SettingsLink">
               <SettingOutlinedIcon />
-              <span>Settings</span>
+              <span className="desktop-navbar-label">Settings</span>
             </Link>
           </Menu.Item>
         )}
-        <Menu.Divider />
       </NavbarSection>
 
-      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-profile-menu">
+      <NavbarSection className="desktop-navbar-profile-menu">
         <Menu.SubMenu
           key="profile"
           popupClassName="desktop-navbar-submenu"
+          tabIndex={0}
           title={
             <span data-test="ProfileDropdown" className="desktop-navbar-profile-menu-title">
               <img className="profile__image_thumb" src={currentUser.profile_image_url} alt={currentUser.name} />
-              <span>{currentUser.name}</span>
             </span>
           }>
           <Menu.Item key="profile">
@@ -157,20 +183,16 @@ export default function DesktopNavbar() {
           )}
           <Menu.Divider />
           <Menu.Item key="logout">
-            <a data-test="LogOutButton" onClick={() => Auth.logout()}>
+            <PlainButton data-test="LogOutButton" onClick={() => Auth.logout()}>
               Log out
-            </a>
+            </PlainButton>
           </Menu.Item>
           <Menu.Divider />
-          <Menu.Item key="version" disabled className="version-info">
+          <Menu.Item key="version" role="presentation" disabled className="version-info">
             <VersionInfo />
           </Menu.Item>
         </Menu.SubMenu>
       </NavbarSection>
-
+    </nav>
-      <Button onClick={() => setCollapsed(!collapsed)} className="desktop-navbar-collapse-button">
-        {collapsed ? <MenuUnfoldOutlinedIcon /> : <MenuFoldOutlinedIcon />}
-      </Button>
-    </div>
   );
 }

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

@@ -1,12 +1,17 @@
 @backgroundColor: #001529;
 @dividerColor: rgba(255, 255, 255, 0.5);
 @textColor: rgba(255, 255, 255, 0.75);
+@brandColor: #ff7964; // Redash logo color
+@activeItemColor: @brandColor;
+@iconSize: 26px;
 
 .desktop-navbar {
   background: @backgroundColor;
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 80px;
+  overflow: hidden;
 
   &-spacer {
     flex: 1 1 auto;
@@ -21,12 +26,6 @@
       height: 40px;
       transition: all 270ms;
     }
-
-    &.ant-menu-inline-collapsed {
-      img {
-        height: 20px;
-      }
-    }
   }
 
   .help-trigger {
@@ -34,33 +33,38 @@
   }
 
   .ant-menu {
-    &:not(.ant-menu-inline-collapsed) {
-      width: 170px;
-    }
-
-    &.ant-menu-inline-collapsed > .ant-menu-submenu-title span img + span,
-    &.ant-menu-inline-collapsed > .ant-menu-item i + span {
-      display: inline-block;
-      max-width: 0;
-      opacity: 0;
-    }
-
-    .ant-menu-item-divider {
-      background: @dividerColor;
-    }
-
     .ant-menu-item,
     .ant-menu-submenu {
       font-weight: 500;
       color: @textColor;
 
+      &.navbar-active-item {
+        box-shadow: inset 3px 0 0 @activeItemColor;
+
+        .anticon {
+          color: @activeItemColor;
+        }
+      }
+
       &.ant-menu-submenu-open,
       &.ant-menu-submenu-active,
       &:hover,
-      &:active {
+      &:active,
+      &:focus,
+      &:focus-within {
         color: #fff;
       }
 
+      .anticon {
+        font-size: @iconSize;
+        margin: 0;
+      }
+
+      .desktop-navbar-label {
+        margin-top: 4px;
+        font-size: 11px;
+      }
+
       a,
       span,
       .anticon {
@@ -71,21 +75,33 @@
     .ant-menu-submenu-arrow {
       display: none;
     }
-  }
 
-  .ant-btn.desktop-navbar-collapse-button {
+    .ant-menu-item,
-    background-color: @backgroundColor;
+    .ant-menu-submenu {
-    border: 0;
+      padding: 0;
-    border-radius: 0;
+      height: 60px;
-    color: @textColor;
+      display: flex;
-
+      align-items: center;
-    &:hover,
+      flex-direction: column;
-    &:active {
+      justify-content: center;
-      color: #fff;
     }
 
-    &:after {
+    .ant-menu-submenu-title {
-      animation: 0s !important;
+      width: 100%;
+      padding: 0;
+    }
+
+    a,
+    &.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
+    .ant-menu-submenu-title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      line-height: normal;
+      height: auto;
+      background: none;
+      color: inherit;
     }
   }
 
@@ -99,37 +115,8 @@
       .profile__image_thumb {
         margin: 0;
         vertical-align: middle;
-      }
+        width: @iconSize;
-
+        height: @iconSize;
-      .profile__image_thumb + span {
-        flex: 1 1 auto;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        margin-left: 10px;
-        vertical-align: middle;
-        display: inline-block;
-
-        // styles from Antd
-        opacity: 1;
-        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-          margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-      }
-    }
-
-    &.ant-menu-inline-collapsed {
-      .ant-menu-submenu-title {
-        padding-left: 16px !important;
-        padding-right: 16px !important;
-      }
-
-      .desktop-navbar-profile-menu-title {
-        .profile__image_thumb + span {
-          opacity: 0;
-          max-width: 0;
-          margin-left: 0;
-        }
       }
     }
   }
@@ -146,7 +133,9 @@
       color: @textColor;
 
       &:hover,
-      &:active {
+      &:active,
+      &:focus,
+      &:focus-within {
         color: #fff;
       }
 
@@ -171,7 +160,9 @@
           color: rgba(255, 255, 255, 0.8);
 
           &:hover,
-          &:active {
+          &:active,
+          &:focus,
+          &:focus-within {
             color: rgba(255, 255, 255, 1);
           }
         }

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

@@ -14,8 +14,8 @@ export default function VersionInfo() {
         <div className="m-t-10">
           {/* eslint-disable react/jsx-no-target-blank */}
           <Link href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
-            Update Available
+            Update Available <i className="fa fa-external-link m-l-5" aria-hidden="true" />
-            <i className="fa fa-external-link m-l-5" />
+            <span className="sr-only">(opens in a new tab)</span>
           </Link>
         </div>
       )}

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

@@ -13,19 +13,21 @@ export default function ApplicationLayout({ children }) {
 
   return (
     <React.Fragment>
-      <div className="application-layout-side-menu">
+      <DynamicComponent name="ApplicationWrapper">
-        <DynamicComponent name="ApplicationDesktopNavbar">
+        <div className="application-layout-side-menu">
-          <DesktopNavbar />
+          <DynamicComponent name="ApplicationDesktopNavbar">
-        </DynamicComponent>
+            <DesktopNavbar />
-      </div>
-      <div className="application-layout-content">
-        <nav className="application-layout-top-menu" ref={mobileNavbarContainerRef}>
-          <DynamicComponent name="ApplicationMobileNavbar" getPopupContainer={getMobileNavbarPopupContainer}>
-            <MobileNavbar getPopupContainer={getMobileNavbarPopupContainer} />
           </DynamicComponent>
-        </nav>
+        </div>
-        {children}
+        <div className="application-layout-content">
-      </div>
+          <nav className="application-layout-top-menu" ref={mobileNavbarContainerRef}>
+            <DynamicComponent name="ApplicationMobileNavbar" getPopupContainer={getMobileNavbarPopupContainer}>
+              <MobileNavbar getPopupContainer={getMobileNavbarPopupContainer} />
+            </DynamicComponent>
+          </nav>
+          {children}
+        </div>
+      </DynamicComponent>
     </React.Fragment>
   );
 }

client/app/components/ApplicationArea/ErrorMessage.jsx

@@ -1,8 +1,10 @@
-import { isObject, get } from "lodash";
+import { get, isObject } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 
 import "./ErrorMessage.less";
+import DynamicComponent from "@/components/DynamicComponent";
+import { ErrorMessageDetails } from "@/components/ApplicationArea/ErrorMessageDetails";
 
 function getErrorMessageByStatus(status, defaultMessage) {
   switch (status) {
@@ -31,21 +33,30 @@ function getErrorMessage(error) {
   return message;
 }
 
-export default function ErrorMessage({ error }) {
+export default function ErrorMessage({ error, message }) {
   if (!error) {
     return null;
   }
 
   console.error(error);
 
+  const errorDetailsProps = {
+    error,
+    message: message || getErrorMessage(error),
+  };
+
   return (
-    <div className="error-message-container" data-test="ErrorMessage">
+    <div className="error-message-container" data-test="ErrorMessage" role="alert">
       <div className="error-state bg-white tiled">
         <div className="error-state__icon">
-          <i className="zmdi zmdi-alert-circle-o" />
+          <i className="zmdi zmdi-alert-circle-o" aria-hidden="true" />
         </div>
         <div className="error-state__details">
-          <h4>{getErrorMessage(error)}</h4>
+          <DynamicComponent
+            name="ErrorMessageDetails"
+            fallback={<ErrorMessageDetails {...errorDetailsProps} />}
+            {...errorDetailsProps}
+          />
         </div>
       </div>
     </div>
@@ -54,4 +65,5 @@ export default function ErrorMessage({ error }) {
 
 ErrorMessage.propTypes = {
   error: PropTypes.object.isRequired,
+  message: PropTypes.string,
 };

client/app/components/ApplicationArea/ErrorMessageDetails.jsx

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

client/app/components/ApplicationArea/handleNavigationIntent.js

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

client/app/components/ApplicationArea/routeWithApiKeySession.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
-import { Auth } from "@/services/auth";
+import { Auth, clientConfig } from "@/services/auth";
 
 // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
 // that contains:
@@ -33,7 +33,7 @@ function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }) {
     };
   }, [apiKey]);
 
-  if (!isAuthenticated) {
+  if (!isAuthenticated || clientConfig.disablePublicUrls) {
     return null;
   }
 

client/app/components/ApplicationArea/routeWithUserSession.tsx

@@ -1,21 +1,32 @@
 import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import ErrorBoundary, { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
 import { Auth } from "@/services/auth";
 import { policy } from "@/services/policy";
+import { CurrentRoute } from "@/services/routes";
 import organizationStatus from "@/services/organizationStatus";
+import DynamicComponent from "@/components/DynamicComponent";
 import ApplicationLayout from "./ApplicationLayout";
 import ErrorMessage from "./ErrorMessage";
 
+export type UserSessionWrapperRenderChildrenProps<P> = {
+  pageTitle?: string;
+  onError: (error: Error) => void;
+} & P;
+
+export interface UserSessionWrapperProps<P> {
+  render: (props: UserSessionWrapperRenderChildrenProps<P>) => React.ReactNode;
+  currentRoute: CurrentRoute<P>;
+  bodyClass?: string;
+}
+
 // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
 // that contains:
 // - `currentRoute.routeParams`
 // - `pageTitle` field which is equal to `currentRoute.title`
 // - `onError` field which is a `handleError` method of nearest error boundary
 
-function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
+export function UserSessionWrapper<P>({ bodyClass, currentRoute, render }: UserSessionWrapperProps<P>) {
   const [isAuthenticated, setIsAuthenticated] = useState(!!Auth.isAuthenticated());
-
   useEffect(() => {
     let isCancelled = false;
     Promise.all([Auth.requireSession(), organizationStatus.refresh(), policy.refresh()])
@@ -50,11 +61,14 @@ function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
   return (
     <ApplicationLayout>
       <React.Fragment key={currentRoute.key}>
-        <ErrorBoundary renderError={error => <ErrorMessage error={error} />}>
+        {/* @ts-expect-error FIXME */}
+        <ErrorBoundary renderError={(error: Error) => <ErrorMessage error={error} />}>
           <ErrorBoundaryContext.Consumer>
-            {({ handleError }) =>
+            {(
-              renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
+              {
-            }
+                handleError,
+              } /* : { handleError: UserSessionWrapperRenderChildrenProps<P>["onError"] } FIXME bring back type */
+            ) => render({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })}
           </ErrorBoundaryContext.Consumer>
         </ErrorBoundary>
       </React.Fragment>
@@ -62,21 +76,35 @@ function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
   );
 }
 
-UserSessionWrapper.propTypes = {
+export type RouteWithUserSessionOptions<P> = {
-  bodyClass: PropTypes.string,
+  render: (props: UserSessionWrapperRenderChildrenProps<P>) => React.ReactNode;
-  renderChildren: PropTypes.func,
+  bodyClass?: string;
+  title: string;
+  path: string;
 };
 
-UserSessionWrapper.defaultProps = {
+export const UserSessionWrapperDynamicComponentName = "UserSessionWrapper";
-  bodyClass: null,
-  renderChildren: () => null,
-};
 
-export default function routeWithUserSession({ render, bodyClass, ...rest }) {
+export default function routeWithUserSession<P extends {} = {}>({
+  render: originalRender,
+  bodyClass,
+  ...rest
+}: RouteWithUserSessionOptions<P>) {
   return {
     ...rest,
-    render: currentRoute => (
+    render: (currentRoute: CurrentRoute<P>) => {
-      <UserSessionWrapper bodyClass={bodyClass} currentRoute={currentRoute} renderChildren={render} />
+      const props = {
-    ),
+        render: originalRender,
+        bodyClass,
+        currentRoute,
+      };
+      return (
+        <DynamicComponent
+          {...props}
+          name={UserSessionWrapperDynamicComponentName}
+          fallback={<UserSessionWrapper {...props} />}
+        />
+      );
+    },
   };
 }

client/app/components/BigMessage.jsx

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

client/app/components/CodeBlock.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
 import "./CodeBlock.less";
 

client/app/components/CodeBlock.less

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

client/app/components/CreateSourceDialog.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { isEmpty, toUpper, includes, get } from "lodash";
+import { isEmpty, toUpper, includes, get, uniqueId } from "lodash";
 import Button from "antd/lib/button";
 import List from "antd/lib/list";
 import Modal from "antd/lib/modal";
@@ -45,6 +45,8 @@ class CreateSourceDialog extends React.Component {
     currentStep: StepEnum.SELECT_TYPE,
   };
 
+  formId = uniqueId("sourceForm");
+
   selectType = selectedType => {
     this.setState({ selectedType, currentStep: StepEnum.CONFIGURE_IT });
   };
@@ -82,6 +84,7 @@ class CreateSourceDialog extends React.Component {
       <div className="m-t-10">
         <Search
           placeholder="Search..."
+          aria-label="Search"
           onChange={e => this.setState({ searchText: e.target.value })}
           autoFocus
           data-test="SearchSource"
@@ -111,11 +114,12 @@ class CreateSourceDialog extends React.Component {
         <div className="text-right">
           {HELP_TRIGGER_TYPES[helpTriggerType] && (
             <HelpTrigger className="f-13" type={helpTriggerType}>
-              Setup Instructions <i className="fa fa-question-circle" />
+              Setup Instructions <i className="fa fa-question-circle" aria-hidden="true" />
+              <span className="sr-only">(help)</span>
             </HelpTrigger>
           )}
         </div>
-        <DynamicForm id="sourceForm" fields={fields} onSubmit={this.createSource} feedbackIcons hideSubmitButton />
+        <DynamicForm id={this.formId} fields={fields} onSubmit={this.createSource} feedbackIcons hideSubmitButton />
         {selectedType.type === "databricks" && (
           <small>
             By using the Databricks Data Source you agree to the Databricks JDBC/ODBC{" "}
@@ -139,7 +143,7 @@ class CreateSourceDialog extends React.Component {
           roundedImage={false}
           data-test="PreviewItem"
           data-test-type={item.type}>
-          <i className="fa fa-angle-double-right" />
+          <i className="fa fa-angle-double-right" aria-hidden="true" />
         </PreviewCard>
       </List.Item>
     );
@@ -169,7 +173,7 @@ class CreateSourceDialog extends React.Component {
                 <Button
                   key="submit"
                   htmlType="submit"
-                  form="sourceForm"
+                  form={this.formId}
                   type="primary"
                   loading={savingSource}
                   data-test="CreateSourceSaveButton">

client/app/components/DialogWrapper.d.ts

@@ -22,8 +22,8 @@ export function wrap<ROk = void, P = {}, RCancel = void>(
     props?: P
   ) => {
     update: (props: P) => void;
-    onClose: (handler: (result: ROk) => Promise<void>) => void;
+    onClose: (handler: (result: ROk) => Promise<void> | void) => void;
-    onDismiss: (handler: (result: RCancel) => Promise<void>) => void;
+    onDismiss: (handler: (result: RCancel) => Promise<void> | void) => void;
     close: (result: ROk) => void;
     dismiss: (result: RCancel) => void;
   };

client/app/components/DynamicComponent.jsx

@@ -1,4 +1,4 @@
-import { isFunction, isString } from "lodash";
+import { isFunction, isString, isUndefined } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 
@@ -24,6 +24,7 @@ export function unregisterComponent(name) {
 export default class DynamicComponent extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
+    fallback: PropTypes.node,
     children: PropTypes.node,
   };
 
@@ -40,10 +41,11 @@ export default class DynamicComponent extends React.Component {
   }
 
   render() {
-    const { name, children, ...props } = this.props;
+    const { name, children, fallback, ...props } = this.props;
     const RealComponent = componentsRegistry.get(name);
     if (!RealComponent) {
-      return children;
+      // return fallback if any, otherwise return children
+      return isUndefined(fallback) ? children : fallback;
     }
     return <RealComponent {...props}>{children}</RealComponent>;
   }

client/app/components/EditInPlace.jsx

@@ -86,6 +86,7 @@ export default class EditInPlace extends React.Component {
     return (
       <InputComponent
         defaultValue={value}
+        aria-label="Editing"
         onBlur={e => this.stopEditing(e.target.value)}
         onKeyDown={this.handleKeyDown}
         autoFocus

client/app/components/EditParameterSettingsDialog.jsx

@@ -11,6 +11,7 @@ import Divider from "antd/lib/divider";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import QuerySelector from "@/components/QuerySelector";
 import { Query } from "@/services/query";
+import { useUniqueId } from "@/lib/hooks/useUniqueId";
 
 const { Option } = Select;
 const formItemProps = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
@@ -111,6 +112,8 @@ function EditParameterSettingsDialog(props) {
     props.dialog.close(param);
   }
 
+  const paramFormId = useUniqueId("paramForm");
+
   return (
     <Modal
       {...props.dialog.props}
@@ -125,12 +128,12 @@ function EditParameterSettingsDialog(props) {
           htmlType="submit"
           disabled={!isFulfilled()}
           type="primary"
-          form="paramForm"
+          form={paramFormId}
           data-test="SaveParameterSettings">
           {isNew ? "Add Parameter" : "OK"}
         </Button>,
       ]}>
-      <Form layout="horizontal" onFinish={onConfirm} id="paramForm">
+      <Form layout="horizontal" onFinish={onConfirm} id={paramFormId}>
         {isNew && (
           <NameInput
             name={param.name}
@@ -140,7 +143,7 @@ function EditParameterSettingsDialog(props) {
             type={param.type}
           />
         )}
-        <Form.Item label="Title" {...formItemProps}>
+        <Form.Item required label="Title" {...formItemProps}>
           <Input
             value={isNull(param.title) ? getDefaultTitle(param.name) : param.title}
             onChange={e => setParam({ ...param, title: e.target.value })}

client/app/components/EditVisualizationButton/QueryControlDropdown.jsx

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Button from "antd/lib/button";
+import PlainButton from "@/components/PlainButton";
+import { clientConfig } from "@/services/auth";
 
 import PlusCircleFilledIcon from "@ant-design/icons/PlusCircleFilled";
 import ShareAltOutlinedIcon from "@ant-design/icons/ShareAltOutlined";
@@ -17,16 +19,18 @@ export default function QueryControlDropdown(props) {
     <Menu>
       {!props.query.isNew() && (!props.query.is_draft || !props.query.is_archived) && (
         <Menu.Item>
-          <a target="_self" onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
+          <PlainButton onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
             <PlusCircleFilledIcon /> Add to Dashboard
-          </a>
+          </PlainButton>
         </Menu.Item>
       )}
-      {!props.query.isNew() && (
+      {!clientConfig.disablePublicUrls && !props.query.isNew() && (
         <Menu.Item>
-          <a onClick={() => props.showEmbedDialog(props.query, props.selectedTab)} data-test="ShowEmbedDialogButton">
+          <PlainButton
+            onClick={() => props.showEmbedDialog(props.query, props.selectedTab)}
+            data-test="ShowEmbedDialogButton">
             <ShareAltOutlinedIcon /> Embed Elsewhere
-          </a>
+          </PlainButton>
         </Menu.Item>
       )}
       <Menu.Item>

client/app/components/EmailSettingsWarning.jsx

@@ -1,12 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import cx from "classnames";
 import { clientConfig, currentUser } from "@/services/auth";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import Alert from "antd/lib/alert";
 import HelpTrigger from "@/components/HelpTrigger";
+import { useUniqueId } from "@/lib/hooks/useUniqueId";
 
 export default function EmailSettingsWarning({ featureName, className, mode, adminOnly }) {
+  const messageDescriptionId = useUniqueId("sr-mail-description");
+
   if (!clientConfig.mailSettingsMissing) {
     return null;
   }
@@ -16,7 +18,7 @@ export default function EmailSettingsWarning({ featureName, className, mode, adm
   }
 
   const message = (
-    <span>
+    <span id={messageDescriptionId}>
       Your mail server isn&apos;t configured correctly, and is needed for {featureName} to work.{" "}
       <HelpTrigger type="MAIL_CONFIG" className="f-inherit" />
     </span>
@@ -24,8 +26,11 @@ export default function EmailSettingsWarning({ featureName, className, mode, adm
 
   if (mode === "icon") {
     return (
-      <Tooltip title={message}>
+      <Tooltip title={message} placement="topRight" arrowPointAtCenter>
-        <i className={cx("fa fa-exclamation-triangle", className)} />
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+        <span className={className} aria-label="Mail alert" aria-describedby={messageDescriptionId} tabIndex={0}>
+          <i className={"fa fa-exclamation-triangle"} aria-hidden="true" />
+        </span>
       </Tooltip>
     );
   }

client/app/components/FavoritesControl.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import PlainButton from "@/components/PlainButton";
 
 export default class FavoritesControl extends React.Component {
   static propTypes = {
@@ -29,12 +30,13 @@ export default class FavoritesControl extends React.Component {
     const icon = item.is_favorite ? "fa fa-star" : "fa fa-star-o";
     const title = item.is_favorite ? "Remove from favorites" : "Add to favorites";
     return (
-      <a
+      <PlainButton
         title={title}
-        className="favorites-control btn-favourite"
+        aria-label={title}
+        className="favorites-control btn-favorite"
         onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
-      </a>
+      </PlainButton>
     );
   }
 }

client/app/components/Filters.jsx

@@ -112,11 +112,11 @@ function Filters({ filters, onChange }) {
                     {!filter.multiple && options}
                     {filter.multiple && [
                       <Select.Option key={NONE_VALUES} data-test="ClearOption">
-                        <i className="fa fa-square-o m-r-5" />
+                        <i className="fa fa-square-o m-r-5" aria-hidden="true" />
                         Clear
                       </Select.Option>,
                       <Select.Option key={ALL_VALUES} data-test="SelectAllOption">
-                        <i className="fa fa-check-square-o m-r-5" />
+                        <i className="fa fa-check-square-o m-r-5" aria-hidden="true" />
                         Select All
                       </Select.Option>,
                       <Select.OptGroup key="Values" title="Values">

client/app/components/HelpTrigger.jsx

@@ -1,13 +1,14 @@
-import { startsWith, get } from "lodash";
+import { startsWith, get, some, mapValues } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import Drawer from "antd/lib/drawer";
 import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
 import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import BigMessage from "@/components/BigMessage";
-import DynamicComponent from "@/components/DynamicComponent";
+import DynamicComponent, { registerComponent } from "@/components/DynamicComponent";
 
 import "./HelpTrigger.less";
 
@@ -16,204 +17,249 @@ const HELP_PATH = "/help";
 const IFRAME_TIMEOUT = 20000;
 const IFRAME_URL_UPDATE_MESSAGE = "iframe_url";
 
-export const TYPES = {
+export const TYPES = mapValues(
-  HOME: ["", "Help"],
+  {
-  VALUE_SOURCE_OPTIONS: ["/user-guide/querying/query-parameters#Value-Source-Options", "Guide: Value Source Options"],
+    HOME: ["", "Help"],
-  SHARE_DASHBOARD: ["/user-guide/dashboards/sharing-dashboards", "Guide: Sharing and Embedding Dashboards"],
+    VALUE_SOURCE_OPTIONS: ["/user-guide/querying/query-parameters#Value-Source-Options", "Guide: Value Source Options"],
-  AUTHENTICATION_OPTIONS: ["/user-guide/users/authentication-options", "Guide: Authentication Options"],
+    SHARE_DASHBOARD: ["/user-guide/dashboards/sharing-dashboards", "Guide: Sharing and Embedding Dashboards"],
-  USAGE_DATA_SHARING: ["/open-source/admin-guide/usage-data", "Help: Anonymous Usage Data Sharing"],
+    AUTHENTICATION_OPTIONS: ["/user-guide/users/authentication-options", "Guide: Authentication Options"],
-  DS_ATHENA: ["/data-sources/amazon-athena-setup", "Guide: Help Setting up Amazon Athena"],
+    USAGE_DATA_SHARING: ["/open-source/admin-guide/usage-data", "Help: Anonymous Usage Data Sharing"],
-  DS_BIGQUERY: ["/data-sources/bigquery-setup", "Guide: Help Setting up BigQuery"],
+    DS_ATHENA: ["/data-sources/amazon-athena-setup", "Guide: Help Setting up Amazon Athena"],
-  DS_URL: ["/data-sources/querying-urls", "Guide: Help Setting up URL"],
+    DS_BIGQUERY: ["/data-sources/bigquery-setup", "Guide: Help Setting up BigQuery"],
-  DS_MONGODB: ["/data-sources/mongodb-setup", "Guide: Help Setting up MongoDB"],
+    DS_URL: ["/data-sources/querying-urls", "Guide: Help Setting up URL"],
-  DS_GOOGLE_SPREADSHEETS: ["/data-sources/querying-a-google-spreadsheet", "Guide: Help Setting up Google Spreadsheets"],
+    DS_MONGODB: ["/data-sources/mongodb-setup", "Guide: Help Setting up MongoDB"],
-  DS_GOOGLE_ANALYTICS: ["/data-sources/google-analytics-setup", "Guide: Help Setting up Google Analytics"],
+    DS_GOOGLE_SPREADSHEETS: [
-  DS_AXIBASETSD: ["/data-sources/axibase-time-series-database", "Guide: Help Setting up Axibase Time Series"],
+      "/data-sources/querying-a-google-spreadsheet",
-  DS_RESULTS: ["/user-guide/querying/query-results-data-source", "Guide: Help Setting up Query Results"],
+      "Guide: Help Setting up Google Spreadsheets",
-  ALERT_SETUP: ["/user-guide/alerts/setting-up-an-alert", "Guide: Setting Up a New Alert"],
+    ],
-  MAIL_CONFIG: ["/open-source/setup/#Mail-Configuration", "Guide: Mail Configuration"],
+    DS_GOOGLE_ANALYTICS: ["/data-sources/google-analytics-setup", "Guide: Help Setting up Google Analytics"],
-  ALERT_NOTIF_TEMPLATE_GUIDE: ["/user-guide/alerts/custom-alert-notifications", "Guide: Custom Alerts Notifications"],
+    DS_AXIBASETSD: ["/data-sources/axibase-time-series-database", "Guide: Help Setting up Axibase Time Series"],
-  FAVORITES: ["/user-guide/querying/favorites-tagging/#Favorites", "Guide: Favorites"],
+    DS_RESULTS: ["/user-guide/querying/query-results-data-source", "Guide: Help Setting up Query Results"],
-  MANAGE_PERMISSIONS: [
+    ALERT_SETUP: ["/user-guide/alerts/setting-up-an-alert", "Guide: Setting Up a New Alert"],
-    "/user-guide/querying/writing-queries#Managing-Query-Permissions",
+    MAIL_CONFIG: ["/open-source/setup/#Mail-Configuration", "Guide: Mail Configuration"],
-    "Guide: Managing Query Permissions",
+    ALERT_NOTIF_TEMPLATE_GUIDE: ["/user-guide/alerts/custom-alert-notifications", "Guide: Custom Alerts Notifications"],
-  ],
+    FAVORITES: ["/user-guide/querying/favorites-tagging/#Favorites", "Guide: Favorites"],
-  NUMBER_FORMAT_SPECS: ["/user-guide/visualizations/formatting-numbers", "Formatting Numbers"],
+    MANAGE_PERMISSIONS: [
+      "/user-guide/querying/writing-queries#Managing-Query-Permissions",
+      "Guide: Managing Query Permissions",
+    ],
+    NUMBER_FORMAT_SPECS: ["/user-guide/visualizations/formatting-numbers", "Formatting Numbers"],
+    GETTING_STARTED: ["/user-guide/getting-started", "Guide: Getting Started"],
+    DASHBOARDS: ["/user-guide/dashboards", "Guide: Dashboards"],
+    QUERIES: ["/user-guide/querying", "Guide: Queries"],
+    ALERTS: ["/user-guide/alerts", "Guide: Alerts"],
+  },
+  ([url, title]) => [DOMAIN + HELP_PATH + url, title]
+);
+
+const HelpTriggerPropTypes = {
+  type: PropTypes.string,
+  href: PropTypes.string,
+  title: PropTypes.node,
+  className: PropTypes.string,
+  showTooltip: PropTypes.bool,
+  renderAsLink: PropTypes.bool,
+  children: PropTypes.node,
 };
 
-export default class HelpTrigger extends React.Component {
+const HelpTriggerDefaultProps = {
-  static propTypes = {
+  type: null,
-    type: PropTypes.oneOf(Object.keys(TYPES)),
+  href: null,
-    href: PropTypes.string,
+  title: null,
-    title: PropTypes.node,
+  className: null,
-    className: PropTypes.string,
+  showTooltip: true,
-    showTooltip: PropTypes.bool,
+  renderAsLink: false,
-    children: PropTypes.node,
+  children: <i className="fa fa-question-circle" aria-hidden="true" />,
-  };
+};
 
-  static defaultProps = {
+export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName = null) {
-    type: null,
+  return class HelpTrigger extends React.Component {
-    href: null,
+    static propTypes = {
-    title: null,
+      ...HelpTriggerPropTypes,
-    className: null,
+      type: PropTypes.oneOf(Object.keys(types)),
-    showTooltip: true,
+    };
-    children: <i className="fa fa-question-circle" />,
-  };
 
-  iframeRef = React.createRef();
+    static defaultProps = HelpTriggerDefaultProps;
 
-  iframeLoadingTimeout = null;
+    iframeRef = React.createRef();
 
-  state = {
+    iframeLoadingTimeout = null;
-    visible: false,
-    loading: false,
-    error: false,
-    currentUrl: null,
-  };
 
-  componentDidMount() {
+    state = {
-    window.addEventListener("message", this.onPostMessageReceived, false);
+      visible: false,
-  }
+      loading: false,
+      error: false,
+      currentUrl: null,
+    };
 
-  componentWillUnmount() {
+    componentDidMount() {
-    window.removeEventListener("message", this.onPostMessageReceived);
+      window.addEventListener("message", this.onPostMessageReceived, false);
-    clearTimeout(this.iframeLoadingTimeout);
-  }
-
-  loadIframe = url => {
-    clearTimeout(this.iframeLoadingTimeout);
-    this.setState({ loading: true, error: false });
-
-    this.iframeRef.current.src = url;
-    this.iframeLoadingTimeout = setTimeout(() => {
-      this.setState({ error: url, loading: false });
-    }, IFRAME_TIMEOUT); // safety
-  };
-
-  onIframeLoaded = () => {
-    this.setState({ loading: false });
-    clearTimeout(this.iframeLoadingTimeout);
-  };
-
-  onPostMessageReceived = event => {
-    if (!startsWith(event.origin, DOMAIN)) {
-      return;
     }
 
-    const { type, message: currentUrl } = event.data || {};
+    componentWillUnmount() {
-    if (type !== IFRAME_URL_UPDATE_MESSAGE) {
+      window.removeEventListener("message", this.onPostMessageReceived);
-      return;
+      clearTimeout(this.iframeLoadingTimeout);
     }
 
-    this.setState({ currentUrl });
+    loadIframe = url => {
-  };
+      clearTimeout(this.iframeLoadingTimeout);
+      this.setState({ loading: true, error: false });
 
-  getUrl = () => {
+      this.iframeRef.current.src = url;
-    const helpTriggerType = get(TYPES, this.props.type);
+      this.iframeLoadingTimeout = setTimeout(() => {
-    return helpTriggerType ? DOMAIN + HELP_PATH + helpTriggerType[0] : this.props.href;
+        this.setState({ error: url, loading: false });
-  };
+      }, IFRAME_TIMEOUT); // safety
+    };
 
-  openDrawer = () => {
+    onIframeLoaded = () => {
-    this.setState({ visible: true });
+      this.setState({ loading: false });
-    // wait for drawer animation to complete so there's no animation jank
+      clearTimeout(this.iframeLoadingTimeout);
-    setTimeout(() => this.loadIframe(this.getUrl()), 300);
+    };
-  };
 
-  closeDrawer = event => {
+    onPostMessageReceived = event => {
-    if (event) {
+      if (!some(allowedDomains, domain => startsWith(event.origin, domain))) {
-      event.preventDefault();
+        return;
-    }
+      }
-    this.setState({ visible: false });
-    this.setState({ visible: false, currentUrl: null });
-  };
 
-  render() {
+      const { type, message: currentUrl } = event.data || {};
-    const tooltip = get(TYPES, `${this.props.type}[1]`, this.props.title);
+      if (type !== IFRAME_URL_UPDATE_MESSAGE) {
-    const className = cx("help-trigger", this.props.className);
+        return;
-    const url = this.state.currentUrl;
+      }
 
-    const isAllowedDomain = startsWith(url || this.getUrl(), DOMAIN);
+      this.setState({ currentUrl });
+    };
 
-    return (
+    getUrl = () => {
-      <React.Fragment>
+      const helpTriggerType = get(types, this.props.type);
-        <Tooltip
+      return helpTriggerType ? helpTriggerType[0] : this.props.href;
-          title={
+    };
-            this.props.showTooltip ? (
+
-              <>
+    openDrawer = e => {
-                {tooltip}
+      // keep "open in new tab" behavior
-                {!isAllowedDomain && <i className="fa fa-external-link" style={{ marginLeft: 5 }} />}
+      if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
-              </>
+        e.preventDefault();
-            ) : null
+        this.setState({ visible: true });
-          }>
+        // wait for drawer animation to complete so there's no animation jank
-          {isAllowedDomain ? (
+        setTimeout(() => this.loadIframe(this.getUrl()), 300);
-            <a onClick={this.openDrawer} className={className}>
+      }
-              {this.props.children}
+    };
-            </a>
+
-          ) : (
+    closeDrawer = event => {
-            <Link href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
+      if (event) {
+        event.preventDefault();
+      }
+      this.setState({ visible: false });
+      this.setState({ visible: false, currentUrl: null });
+    };
+
+    render() {
+      const targetUrl = this.getUrl();
+      if (!targetUrl) {
+        return null;
+      }
+
+      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 shouldRenderAsLink = this.props.renderAsLink || !isAllowedDomain;
+
+      return (
+        <React.Fragment>
+          <Tooltip
+            title={
+              this.props.showTooltip ? (
+                <>
+                  {tooltip}
+                  {shouldRenderAsLink && (
+                    <>
+                      {" "}
+                      <i className="fa fa-external-link" style={{ marginLeft: 5 }} aria-hidden="true" />
+                      <span className="sr-only">(opens in a new tab)</span>
+                    </>
+                  )}
+                </>
+              ) : null
+            }>
+            <Link
+              href={url || this.getUrl()}
+              className={className}
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={shouldRenderAsLink ? () => {} : this.openDrawer}>
               {this.props.children}
             </Link>
-          )}
+          </Tooltip>
-        </Tooltip>
+          <Drawer
-        <Drawer
+            placement="right"
-          placement="right"
+            closable={false}
-          closable={false}
+            onClose={this.closeDrawer}
-          onClose={this.closeDrawer}
+            visible={this.state.visible}
-          visible={this.state.visible}
+            className={cx("help-drawer", drawerClassName)}
-          className="help-drawer"
+            destroyOnClose
-          destroyOnClose
+            width={400}>
-          width={400}>
+            <div className="drawer-wrapper">
-          <div className="drawer-wrapper">
+              <div className="drawer-menu">
-            <div className="drawer-menu">
+                {url && (
-              {url && (
+                  <Tooltip title="Open page in a new window" placement="left">
-                <Tooltip title="Open page in a new window" placement="left">
+                    {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                  {/* eslint-disable-next-line react/jsx-no-target-blank */}
+                    <Link href={url} target="_blank">
-                  <Link href={url} target="_blank">
+                      <i className="fa fa-external-link" aria-hidden="true" />
-                    <i className="fa fa-external-link" />
+                      <span className="sr-only">(opens in a new tab)</span>
-                  </Link>
+                    </Link>
+                  </Tooltip>
+                )}
+                <Tooltip title="Close" placement="bottom">
+                  <PlainButton onClick={this.closeDrawer}>
+                    <CloseOutlinedIcon />
+                  </PlainButton>
                 </Tooltip>
+              </div>
+
+              {/* iframe */}
+              {!this.state.error && (
+                <iframe
+                  ref={this.iframeRef}
+                  title="Usage Help"
+                  src="about:blank"
+                  className={cx({ ready: !this.state.loading })}
+                  onLoad={this.onIframeLoaded}
+                />
+              )}
+
+              {/* loading indicator */}
+              {this.state.loading && (
+                <BigMessage icon="fa-spinner fa-2x fa-pulse" message="Loading..." className="help-message" />
+              )}
+
+              {/* error message */}
+              {this.state.error && (
+                <BigMessage icon="fa-exclamation-circle" className="help-message">
+                  Something went wrong.
+                  <br />
+                  {/* eslint-disable-next-line react/jsx-no-target-blank */}
+                  <Link href={this.state.error} target="_blank" rel="noopener">
+                    Click here
+                  </Link>{" "}
+                  to open the page in a new window.
+                </BigMessage>
               )}
-              <Tooltip title="Close" placement="bottom">
-                <a onClick={this.closeDrawer}>
-                  <CloseOutlinedIcon />
-                </a>
-              </Tooltip>
             </div>
 
-            {/* iframe */}
+            {/* extra content */}
-            {!this.state.error && (
+            <DynamicComponent name="HelpDrawerExtraContent" onLeave={this.closeDrawer} openPageUrl={this.loadIframe} />
-              <iframe
+          </Drawer>
-                ref={this.iframeRef}
+        </React.Fragment>
-                title="Redash Help"
+      );
-                src="about:blank"
+    }
-                className={cx({ ready: !this.state.loading })}
+  };
-                onLoad={this.onIframeLoaded}
-              />
-            )}
-
-            {/* loading indicator */}
-            {this.state.loading && (
-              <BigMessage icon="fa-spinner fa-2x fa-pulse" message="Loading..." className="help-message" />
-            )}
-
-            {/* error message */}
-            {this.state.error && (
-              <BigMessage icon="fa-exclamation-circle" className="help-message">
-                Something went wrong.
-                <br />
-                {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <Link href={this.state.error} target="_blank" rel="noopener">
-                  Click here
-                </Link>{" "}
-                to open the page in a new window.
-              </BigMessage>
-            )}
-          </div>
-
-          {/* extra content */}
-          <DynamicComponent name="HelpDrawerExtraContent" onLeave={this.closeDrawer} openPageUrl={this.loadIframe} />
-        </Drawer>
-      </React.Fragment>
-    );
-  }
 }
+
+registerComponent("HelpTrigger", helpTriggerWithTypes(TYPES, [DOMAIN]));
+
+export default function HelpTrigger(props) {
+  return <DynamicComponent {...props} name="HelpTrigger" />;
+}
+
+HelpTrigger.propTypes = HelpTriggerPropTypes;
+HelpTrigger.defaultProps = HelpTriggerDefaultProps;

client/app/components/HelpTrigger.less

@@ -1,4 +1,4 @@
-@import "~antd/lib/drawer/style/drawer";
+@import (reference, less) "~@/assets/less/ant";
 
 @help-doc-bg: #f7f7f7; // according to https://github.com/getredash/website/blob/13daff2d8b570956565f482236f6245042e8477f/src/scss/_components/_variables.scss#L15
 
@@ -38,7 +38,8 @@
     border: 2px solid @help-doc-bg;
     display: flex;
 
-    a {
+    a,
+    .plain-button {
       height: 26px;
       width: 26px;
       display: flex;

client/app/components/InputWithCopy.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Input from "antd/lib/input";
 import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
+import PlainButton from "./PlainButton";
 
 export default class InputWithCopy extends React.Component {
   constructor(props) {
@@ -42,7 +43,10 @@ export default class InputWithCopy extends React.Component {
   render() {
     const copyButton = (
       <Tooltip title={this.state.copied || "Copy"}>
-        <CopyOutlinedIcon style={{ cursor: "pointer" }} onClick={this.copy} />
+        <PlainButton onClick={this.copy}>
+          {/* TODO: lacks visual feedback */}
+          <CopyOutlinedIcon />
+        </PlainButton>
       </Tooltip>
     );
 

client/app/components/Link.jsx

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

client/app/components/Link.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import Button, { ButtonProps as AntdButtonProps } from "antd/lib/button";
+
+function DefaultLinkComponent({ children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return <a {...props}>{children}</a>;
+}
+
+Link.Component = DefaultLinkComponent;
+
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "role" | "type" | "target"> {
+  href: string;
+}
+function Link({ children, ...props }: LinkProps) {
+  return <Link.Component {...props}>{children}</Link.Component>;
+}
+
+interface LinkWithIconProps extends LinkProps {
+  children: string;
+  icon: JSX.Element;
+  alt: string;
+  target?: "_self" | "_blank" | "_parent" | "_top";
+}
+
+function LinkWithIcon({ icon, alt, children, ...props }: LinkWithIconProps) {
+  return (
+    <Link.Component {...props}>
+      {children} {icon} <span className="sr-only">{alt}</span>
+    </Link.Component>
+  );
+}
+
+Link.WithIcon = LinkWithIcon;
+
+function ExternalLink({
+  icon = <i className="fa fa-external-link" aria-hidden="true" />,
+  alt = "(opens in a new tab)",
+  ...props
+}: Omit<LinkWithIconProps, "target">) {
+  return <Link.WithIcon target="_blank" rel="noopener noreferrer" icon={icon} alt={alt} {...props} />;
+}
+
+Link.External = ExternalLink;
+
+// Ant Button will render an <a> if href is present.
+function DefaultButtonLinkComponent(props: ButtonProps) {
+  return <Button {...props} />;
+}
+
+ButtonLink.Component = DefaultButtonLinkComponent;
+
+interface ButtonProps extends AntdButtonProps {
+  href: string;
+}
+
+function ButtonLink(props: ButtonProps) {
+  return <ButtonLink.Component {...props} />;
+}
+
+Link.Button = ButtonLink;
+
+export default Link;

client/app/components/ParameterApplyButton.jsx

@@ -2,21 +2,26 @@ import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Badge from "antd/lib/badge";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import KeyboardShortcuts from "@/services/KeyboardShortcuts";
 
 function ParameterApplyButton({ paramCount, onClick }) {
   // show spinner when count is empty so the fade out is consistent
-  const icon = !paramCount ? "spinner fa-pulse" : "check";
+  const icon = !paramCount ? (
+    <span role="status" aria-live="polite" aria-relevant="additions removals">
+      <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
+      <span className="sr-only">Loading...</span>
+    </span>
+  ) : (
+    <i className="fa fa-check" aria-hidden="true" />
+  );
 
   return (
     <div className="parameter-apply-button" data-show={!!paramCount} data-test="ParameterApplyButton">
       <Badge count={paramCount}>
         <Tooltip title={paramCount ? `${KeyboardShortcuts.modKey} + Enter` : null}>
           <span>
-            <Button onClick={onClick}>
+            <Button onClick={onClick}>{icon} Apply Changes</Button>
-              <i className={`fa fa-${icon}`} /> Apply Changes
-            </Button>
           </span>
         </Tooltip>
       </Badge>

client/app/components/ParameterMappingInput.jsx

@@ -12,7 +12,7 @@ import Tag from "antd/lib/tag";
 import Input from "antd/lib/input";
 import Radio from "antd/lib/radio";
 import Form from "antd/lib/form";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import ParameterValueInput from "@/components/ParameterValueInput";
 import { ParameterMappingType } from "@/services/widget";
 import { Parameter, cloneParameter } from "@/services/parameters";
@@ -25,8 +25,6 @@ import CheckOutlinedIcon from "@ant-design/icons/CheckOutlined";
 
 import "./ParameterMappingInput.less";
 
-const { Option } = Select;
-
 export const MappingType = {
   DashboardAddNew: "dashboard-add-new",
   DashboardMapToExisting: "dashboard-map-to-existing",
@@ -203,24 +201,20 @@ export class ParameterMappingInput extends React.Component {
     const {
       mapping: { mapTo },
     } = this.props;
-    return <Input value={mapTo} onChange={e => this.updateParamMapping({ mapTo: e.target.value })} />;
+    return (
+      <Input
+        value={mapTo}
+        aria-label="Parameter name (key)"
+        onChange={e => this.updateParamMapping({ mapTo: e.target.value })}
+      />
+    );
   }
 
   renderDashboardMapToExisting() {
     const { mapping, existingParamNames } = this.props;
+    const options = map(existingParamNames, paramName => ({ label: paramName, value: paramName }));
 
-    return (
+    return <Select value={mapping.mapTo} onChange={mapTo => this.updateParamMapping({ mapTo })} options={options} />;
-      <Select
-        value={mapping.mapTo}
-        onChange={mapTo => this.updateParamMapping({ mapTo })}
-        dropdownMatchSelectWidth={false}>
-        {map(existingParamNames, name => (
-          <Option value={name} key={name}>
-            {name}
-          </Option>
-        ))}
-      </Select>
-    );
   }
 
   renderStaticValue() {
@@ -358,7 +352,7 @@ class MappingEditor extends React.Component {
         content={this.renderContent()}
         visible={visible}
         onVisibleChange={this.onVisibleChange}>
-        <Button size="small" type="dashed" data-test={`EditParamMappingButon-${mapping.param.name}`}>
+        <Button size="small" type="dashed" data-test={`EditParamMappingButton-${mapping.param.name}`}>
           <EditOutlinedIcon />
         </Button>
       </Popover>
@@ -432,6 +426,7 @@ class TitleEditor extends React.Component {
           size="small"
           value={this.state.title}
           placeholder={paramTitle}
+          aria-label="Edit parameter title"
           onChange={this.onEditingTitleChange}
           onPressEnter={this.save}
           maxLength={100}
@@ -452,7 +447,10 @@ class TitleEditor extends React.Component {
     if (mapping.type === MappingType.StaticValue) {
       return (
         <Tooltip placement="right" title="Titles for static values don't appear in widgets">
-          <i className="fa fa-eye-slash" />
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+          <span tabIndex={0}>
+            <i className="fa fa-eye-slash" aria-hidden="true" />
+          </span>
         </Tooltip>
       );
     }

client/app/components/ParameterMappingInput.less

@@ -1,4 +1,4 @@
-@import '~antd/lib/modal/style/index'; // for ant @vars
+@import (reference, less) "~@/assets/less/ant"; // for ant @vars
 
 .parameters-mapping-list {
   .keyword {
@@ -63,7 +63,8 @@
     margin-right: 3px;
   }
 
-  &.disabled, .fa {
+  &.disabled,
+  .fa {
     color: #a4a4a4;
   }
 

client/app/components/ParameterValueInput.jsx

@@ -1,7 +1,7 @@
-import { isEqual, isEmpty } from "lodash";
+import { isEqual, isEmpty, map } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
-import Select from "antd/lib/select";
+import SelectWithVirtualScroll from "@/components/SelectWithVirtualScroll";
 import Input from "antd/lib/input";
 import InputNumber from "antd/lib/input-number";
 import DateParameter from "@/components/dynamic-parameters/DateParameter";
@@ -10,8 +10,6 @@ import QueryBasedParameterInput from "./QueryBasedParameterInput";
 
 import "./ParameterValueInput.less";
 
-const { Option } = Select;
-
 const multipleValuesProps = {
   maxTagCount: 3,
   maxTagTextLength: 10,
@@ -98,25 +96,19 @@ class ParameterValueInput extends React.Component {
     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);
+
     return (
-      <Select
+      <SelectWithVirtualScroll
         className={this.props.className}
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
-        optionFilterProp="children"
         value={normalize(value)}
         onChange={this.onSelect}
-        dropdownMatchSelectWidth={false}
+        options={map(enumOptionsArray, opt => ({ label: String(opt), value: opt }))}
         showSearch
         showArrow
-        style={{ minWidth: 60 }}
         notFoundContent={isEmpty(enumOptionsArray) ? "No options available" : null}
-        {...multipleValuesProps}>
+        {...multipleValuesProps}
-        {enumOptionsArray.map(option => (
+      />
-          <Option key={option} value={option}>
-            {option}
-          </Option>
-        ))}
-      </Select>
     );
   }
 
@@ -127,7 +119,6 @@ class ParameterValueInput extends React.Component {
       <QueryBasedParameterInput
         className={this.props.className}
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
-        optionFilterProp="children"
         parameter={parameter}
         value={value}
         queryId={queryId}
@@ -145,7 +136,12 @@ class ParameterValueInput extends React.Component {
     const normalize = val => (isNaN(val) ? undefined : val);
 
     return (
-      <InputNumber className={className} value={normalize(value)} onChange={val => this.onSelect(normalize(val))} />
+      <InputNumber
+        className={className}
+        value={normalize(value)}
+        aria-label="Parameter number value"
+        onChange={val => this.onSelect(normalize(val))}
+      />
     );
   }
 
@@ -157,6 +153,7 @@ class ParameterValueInput extends React.Component {
       <Input
         className={className}
         value={value}
+        aria-label="Parameter text value"
         data-test="TextParamInput"
         onChange={e => this.onSelect(e.target.value)}
       />

client/app/components/ParameterValueInput.less

@@ -1,4 +1,4 @@
-@import "~antd/lib/input-number/style/index"; // for ant @vars
+@import (reference, less) "~@/assets/less/ant"; // for ant @vars
 
 @input-dirty: #fffce1;
 

client/app/components/Parameters.jsx

@@ -6,6 +6,7 @@ import location from "@/services/location";
 import { Parameter, createParameter } from "@/services/parameters";
 import ParameterApplyButton from "@/components/ParameterApplyButton";
 import ParameterValueInput from "@/components/ParameterValueInput";
+import PlainButton from "@/components/PlainButton";
 import EditParameterSettingsDialog from "./EditParameterSettingsDialog";
 import { toHuman } from "@/lib/utils";
 
@@ -23,19 +24,23 @@ export default class Parameters extends React.Component {
   static propTypes = {
     parameters: PropTypes.arrayOf(PropTypes.instanceOf(Parameter)),
     editable: PropTypes.bool,
+    sortable: PropTypes.bool,
     disableUrlUpdate: PropTypes.bool,
     onValuesChange: PropTypes.func,
     onPendingValuesChange: PropTypes.func,
     onParametersEdit: PropTypes.func,
+    appendSortableToParent: PropTypes.bool,
   };
 
   static defaultProps = {
     parameters: [],
     editable: false,
+    sortable: false,
     disableUrlUpdate: false,
     onValuesChange: () => {},
     onPendingValuesChange: () => {},
     onParametersEdit: () => {},
+    appendSortableToParent: true,
   };
 
   constructor(props) {
@@ -85,7 +90,7 @@ export default class Parameters extends React.Component {
     if (oldIndex !== newIndex) {
       this.setState(({ parameters }) => {
         parameters.splice(newIndex, 0, parameters.splice(oldIndex, 1)[0]);
-        onParametersEdit();
+        onParametersEdit(parameters);
         return { parameters };
       });
     }
@@ -110,7 +115,7 @@ export default class Parameters extends React.Component {
       this.setState(({ parameters }) => {
         const updatedParameter = extend(parameter, updated);
         parameters[index] = createParameter(updatedParameter, updatedParameter.parentQueryId);
-        onParametersEdit();
+        onParametersEdit(parameters);
         return { parameters };
       });
     });
@@ -123,13 +128,14 @@ export default class Parameters extends React.Component {
         <div className="parameter-heading">
           <label>{param.title || toHuman(param.name)}</label>
           {editable && (
-            <button
+            <PlainButton
               className="btn btn-default btn-xs m-l-5"
+              aria-label="Edit"
               onClick={() => this.showParameterSettings(param, index)}
               data-test={`ParameterSettings-${param.name}`}
               type="button">
-              <i className="fa fa-cog" />
+              <i className="fa fa-cog" aria-hidden="true" />
-            </button>
+            </PlainButton>
           )}
         </div>
         <ParameterValueInput
@@ -146,15 +152,17 @@ export default class Parameters extends React.Component {
 
   render() {
     const { parameters } = this.state;
-    const { editable } = this.props;
+    const { sortable, appendSortableToParent } = this.props;
     const dirtyParamCount = size(filter(parameters, "hasPendingValue"));
+
     return (
       <SortableContainer
-        disabled={!editable}
+        disabled={!sortable}
         axis="xy"
         useDragHandle
         lockToContainerEdges
         helperClass="parameter-dragged"
+        helperContainer={containerEl => (appendSortableToParent ? containerEl : document.body)}
         updateBeforeSortStart={this.onBeforeSortStart}
         onSortEnd={this.moveParameter}
         containerProps={{
@@ -163,8 +171,11 @@ export default class Parameters extends React.Component {
         }}>
         {parameters.map((param, index) => (
           <SortableElement key={param.name} index={index}>
-            <div className="parameter-block" data-editable={editable || null}>
+            <div
-              {editable && <DragHandle data-test={`DragHandle-${param.name}`} />}
+              className="parameter-block"
+              data-editable={sortable || null}
+              data-test={`ParameterBlock-${param.name}`}>
+              {sortable && <DragHandle data-test={`DragHandle-${param.name}`} />}
               {this.renderParameter(param, index)}
             </div>
           </SortableElement>

client/app/components/Parameters.less

@@ -1,4 +1,4 @@
-@import "../assets/less/ant";
+@import (reference, less) "~@/assets/less/ant";
 
 .parameter-block {
   display: inline-block;
@@ -21,6 +21,8 @@
 
   &.parameter-dragged {
     z-index: 2;
+    margin: 4px 0 0 4px;
+    padding: 3px 6px 6px;
     box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
   }
 }

client/app/components/PermissionsEditorDialog/index.jsx

@@ -7,11 +7,12 @@ import List from "antd/lib/list";
 import Modal from "antd/lib/modal";
 import Select from "antd/lib/select";
 import Tag from "antd/lib/tag";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import { toHuman } from "@/lib/utils";
 import HelpTrigger from "@/components/HelpTrigger";
 import { UserPreviewCard } from "@/components/PreviewCard";
+import PlainButton from "@/components/PlainButton";
 import notification from "@/services/notification";
 import User from "@/services/user";
 
@@ -102,7 +103,16 @@ function UserSelect({ onSelect, shouldShowUser }) {
       placeholder="Add users..."
       showSearch
       onSearch={setSearchTerm}
-      suffixIcon={loadingUsers ? <i className="fa fa-spinner fa-pulse" /> : <i className="fa fa-search" />}
+      suffixIcon={
+        loadingUsers ? (
+          <span role="status" aria-live="polite" aria-relevant="additions removals">
+            <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
+            <span className="sr-only">Loading...</span>
+          </span>
+        ) : (
+          <i className="fa fa-search" aria-hidden="true" />
+        )
+      }
       filterOption={false}
       notFoundContent={null}
       value={undefined}
@@ -156,7 +166,12 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
       />
       <div className="d-flex align-items-center m-t-5">
         <h5 className="flex-fill">Users with permissions</h5>
-        {loadingGrantees && <i className="fa fa-spinner fa-pulse" />}
+        {loadingGrantees && (
+          <span role="status" aria-live="polite" aria-relevant="additions removals">
+            <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
+            <span className="sr-only">Loading...</span>
+          </span>
+        )}
       </div>
       <div className="scrollbox p-5" style={{ maxHeight: "40vh" }}>
         <List
@@ -169,10 +184,11 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
                   <Tag className="m-0">Author</Tag>
                 ) : (
                   <Tooltip title="Remove user permissions">
-                    <i
+                    <PlainButton
-                      className="fa fa-remove clickable"
+                      aria-label="Remove permissions"
-                      onClick={() => removePermission(user.id).then(loadUsersWithPermissions)}
+                      onClick={() => removePermission(user.id).then(loadUsersWithPermissions)}>
-                    />
+                      <i className="fa fa-remove clickable" aria-hidden="true" />
+                    </PlainButton>
                   </Tooltip>
                 )}
               </UserPreviewCard>

client/app/components/PlainButton.less

@@ -0,0 +1,22 @@
+@import (reference, less) "~@/assets/less/ant";
+
+.plain-button {
+  all: unset;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  .@{dropdown-prefix-cls}-menu-item > & {
+    width: 100%;
+    margin: -5px -12px;
+    padding: 5px 12px;
+  }
+
+  .@{menu-prefix-cls}-item > & {
+    width: 100%;
+    margin: 0 -16px;
+    padding: 0 16px;
+  }
+}
+
+.plain-button-link {
+  .btn-link();
+}

client/app/components/PlainButton.tsx

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import React from "react";
+
+import "./PlainButton.less";
+
+export interface PlainButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  type?: "link" | "button";
+}
+
+function PlainButton({ className, type, ...rest }: PlainButtonProps) {
+  return (
+    <button
+      className={classNames("plain-button", "clickable", { "plain-button-link": type === "link" }, className)}
+      type="button"
+      {...rest}
+    />
+  );
+}
+
+export default PlainButton;

client/app/components/QueryBasedParameterInput.jsx

@@ -1,9 +1,7 @@
 import { find, isArray, get, first, map, intersection, isEqual, isEmpty } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
-import Select from "antd/lib/select";
+import SelectWithVirtualScroll from "@/components/SelectWithVirtualScroll";
-
-const { Option } = Select;
 
 export default class QueryBasedParameterInput extends React.Component {
   static propTypes = {
@@ -79,29 +77,23 @@ export default class QueryBasedParameterInput extends React.Component {
   }
 
   render() {
-    const { className, value, mode, onSelect, ...otherProps } = this.props;
+    const { className, mode, onSelect, queryId, value, ...otherProps } = this.props;
     const { loading, options } = this.state;
     return (
       <span>
-        <Select
+        <SelectWithVirtualScroll
           className={className}
           disabled={loading}
           loading={loading}
           mode={mode}
           value={this.state.value}
           onChange={onSelect}
-          dropdownMatchSelectWidth={false}
+          options={map(options, ({ value, name }) => ({ label: String(name), value }))}
-          optionFilterProp="children"
           showSearch
           showArrow
           notFoundContent={isEmpty(options) ? "No options available" : null}
-          {...otherProps}>
+          {...otherProps}
-          {options.map(option => (
+        />
-            <Option value={option.value} key={option.value}>
-              {option.name}
-            </Option>
-          ))}
-        </Select>
       </span>
     );
   }

client/app/components/QueryLink.jsx

@@ -21,10 +21,12 @@ function QueryLink({ query, visualization, readOnly }) {
     return query.getUrl(false, hash);
   };
 
+  const QueryLinkWrapper = props => (readOnly ? <span {...props} /> : <Link href={getUrl()} {...props} />);
+
   return (
-    <Link href={readOnly ? null : getUrl()} className="query-link">
+    <QueryLinkWrapper className="query-link">
       <VisualizationName visualization={visualization} /> <span>{query.name}</span>
-    </Link>
+    </QueryLinkWrapper>
   );
 }
 

client/app/components/QuerySelector.jsx

@@ -5,6 +5,7 @@ import cx from "classnames";
 import Input from "antd/lib/input";
 import Select from "antd/lib/select";
 import { Query } from "@/services/query";
+import PlainButton from "@/components/PlainButton";
 import notification from "@/services/notification";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
 import useSearchResults from "@/lib/hooks/useSearchResults";
@@ -30,8 +31,21 @@ export default function QuerySelector(props) {
   const [doSearch, searchResults, searching] = useSearchResults(search, { initialResults: [] });
 
   const placeholder = "Search a query by name";
-  const clearIcon = <i className="fa fa-times hide-in-percy" onClick={() => selectQuery(null)} />;
+  const clearIcon = (
-  const spinIcon = <i className={cx("fa fa-spinner fa-pulse hide-in-percy", { hidden: !searching })} />;
+    <i
+      className="fa fa-times hide-in-percy"
+      role="button"
+      tabIndex={0}
+      aria-label="Clear"
+      onClick={() => selectQuery(null)}
+    />
+  );
+  const spinIcon = (
+    <span role="status" aria-live="polite" aria-relevant="additions removals">
+      <i className={cx("fa fa-spinner fa-pulse hide-in-percy", { hidden: !searching })} aria-hidden="true" />
+      <span className="sr-only">Searching...</span>
+    </span>
+  );
 
   useEffect(() => {
     doSearch(searchTerm);
@@ -65,22 +79,25 @@ export default function QuerySelector(props) {
     }
 
     return (
-      <div className="list-group">
+      <ul className="list-group">
         {searchResults.map(q => (
-          <a
+          <PlainButton
             className={cx("query-selector-result", "list-group-item", { inactive: q.is_draft })}
             key={q.id}
+            role="listitem"
             onClick={() => selectQuery(q.id)}
             data-test={`QueryId${q.id}`}>
             {q.name} <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className="inline-tags-control" />
-          </a>
+          </PlainButton>
         ))}
-      </div>
+      </ul>
     );
   }
 
   if (props.disabled) {
-    return <Input value={selectedQuery && selectedQuery.name} placeholder={placeholder} disabled />;
+    return (
+      <Input value={selectedQuery && selectedQuery.name} aria-label="Tied query" placeholder={placeholder} disabled />
+    );
   }
 
   if (props.type === "select") {
@@ -127,11 +144,12 @@ export default function QuerySelector(props) {
   return (
     <span data-test="QuerySelector">
       {selectedQuery ? (
-        <Input value={selectedQuery.name} suffix={clearIcon} readOnly />
+        <Input value={selectedQuery.name} aria-label="Tied query" suffix={clearIcon} readOnly />
       ) : (
         <Input
           placeholder={placeholder}
           value={searchTerm}
+          aria-label="Tied query"
           onChange={e => setSearchTerm(e.target.value)}
           suffix={spinIcon}
         />

client/app/components/Resizable/index.jsx

@@ -51,9 +51,12 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
 
   const resizeHandle = useMemo(
     () => (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
       <span
         className={`react-resizable-handle react-resizable-handle-${direction}`}
+        role="separator"
         onClick={() => {
+          // TODO: add key controls
           // On desktops resize uses `mousedown`/`mousemove`/`mouseup` events, and there is a conflict
           // with this `click` handler: after user releases mouse - this handler will be executed.
           // So we use `wasResized` flag to check if there was actual resize or user just pressed and released

client/app/components/SelectItemsDialog.jsx

@@ -12,13 +12,16 @@ import LoadingState from "@/components/items-list/components/LoadingState";
 import notification from "@/services/notification";
 import useSearchResults from "@/lib/hooks/useSearchResults";
 
+import "./SelectItemsDialog.less";
+
 function ItemsList({ items, renderItem, onItemClick }) {
   const renderListItem = useCallback(
     item => {
       const { content, className, isDisabled } = renderItem(item);
+
       return (
         <List.Item
-          className={classNames("p-l-10", "p-r-10", { clickable: !isDisabled, disabled: isDisabled }, className)}
+          className={classNames("select-items-list", "w-100", "p-l-10", "p-r-10", { disabled: isDisabled }, className)}
           onClick={isDisabled ? null : () => onItemClick(item)}>
           {content}
         </List.Item>
@@ -117,7 +120,12 @@ function SelectItemsDialog({
       }>
       <div className="d-flex align-items-center m-b-10">
         <div className="flex-fill">
-          <Input.Search onChange={event => search(event.target.value)} placeholder={inputPlaceholder} autoFocus />
+          <Input.Search
+            onChange={event => search(event.target.value)}
+            placeholder={inputPlaceholder}
+            aria-label={inputPlaceholder}
+            autoFocus
+          />
         </div>
         {renderStagedItem && (
           <div className="w-50 m-l-20">

client/app/components/SelectItemsDialog.less

@@ -0,0 +1,9 @@
+.select-items-list {
+  &:hover,
+  &:focus,
+  &:focus-within {
+    color: #555;
+    background-color: #f5f5f5;
+    transition: all 150ms ease-in-out;
+  }
+}

client/app/components/SelectWithVirtualScroll.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from "react";
+import { maxBy } from "lodash";
+import AntdSelect, { SelectProps, LabeledValue } from "antd/lib/select";
+import { calculateTextWidth } from "@/lib/calculateTextWidth";
+
+const MIN_LEN_FOR_VIRTUAL_SCROLL = 400;
+
+interface VirtualScrollLabeledValue extends LabeledValue {
+  label: string;
+}
+
+interface VirtualScrollSelectProps extends Omit<SelectProps<string>, "optionFilterProp" | "children"> {
+  options: Array<VirtualScrollLabeledValue>;
+}
+function SelectWithVirtualScroll({ options, ...props }: VirtualScrollSelectProps): JSX.Element {
+  const dropdownMatchSelectWidth = useMemo<number | boolean>(() => {
+    if (options && options.length > MIN_LEN_FOR_VIRTUAL_SCROLL) {
+      const largestOpt = maxBy(options, "label.length");
+
+      if (largestOpt) {
+        const offset = 40;
+        const optionText = largestOpt.label;
+        const width = calculateTextWidth(optionText);
+        if (width) {
+          return width + offset;
+        }
+      }
+
+      return true;
+    }
+
+    return false;
+  }, [options]);
+
+  return (
+    <AntdSelect<string>
+      dropdownMatchSelectWidth={dropdownMatchSelectWidth}
+      options={options}
+      optionFilterProp="label" // as this component expects "options" prop
+      {...props}
+    />
+  );
+}
+
+export default SelectWithVirtualScroll;

client/app/components/TagsList.jsx

@@ -1,82 +0,0 @@
-import { map } from "lodash";
-import React from "react";
-import PropTypes from "prop-types";
-import Badge from "antd/lib/badge";
-import Menu from "antd/lib/menu";
-import getTags from "@/services/getTags";
-
-import "./TagsList.less";
-
-export default class TagsList extends React.Component {
-  static propTypes = {
-    tagsUrl: PropTypes.string.isRequired,
-    onUpdate: PropTypes.func,
-  };
-
-  static defaultProps = {
-    onUpdate: () => {},
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      // An array of objects that with the name and count of the tagged items
-      allTags: [],
-      // A set of tag names
-      selectedTags: new Set(),
-    };
-  }
-
-  componentDidMount() {
-    getTags(this.props.tagsUrl).then(allTags => {
-      this.setState({ allTags });
-    });
-  }
-
-  toggleTag(event, tag) {
-    const { selectedTags } = this.state;
-    if (event.shiftKey) {
-      // toggle tag
-      if (selectedTags.has(tag)) {
-        selectedTags.delete(tag);
-      } else {
-        selectedTags.add(tag);
-      }
-    } else {
-      // if the tag is the only selected, deselect it, otherwise select only it
-      if (selectedTags.has(tag) && selectedTags.size === 1) {
-        selectedTags.clear();
-      } else {
-        selectedTags.clear();
-        selectedTags.add(tag);
-      }
-    }
-    this.forceUpdate();
-
-    this.props.onUpdate([...this.state.selectedTags]);
-  }
-
-  render() {
-    const { allTags, selectedTags } = this.state;
-    if (allTags.length > 0) {
-      return (
-        <div className="m-t-10 tags-list tiled">
-          <Menu className="invert-stripe-position" mode="inline" selectedKeys={[...selectedTags]}>
-            {map(allTags, tag => (
-              <Menu.Item key={tag.name} className="m-0">
-                <a
-                  className="d-flex align-items-center justify-content-between"
-                  onClick={event => this.toggleTag(event, tag.name)}>
-                  <span className="max-character col-xs-11">{tag.name}</span>
-                  <Badge count={tag.count} />
-                </a>
-              </Menu.Item>
-            ))}
-          </Menu>
-        </div>
-      );
-    }
-    return null;
-  }
-}

client/app/components/TagsList.less

@@ -1,15 +1,58 @@
-@import '~@/assets/less/ant';
+@import (reference, less) "~@/assets/less/ant";
 
 .tags-list {
+  .tags-list-title {
+    margin: 15px 5px 5px 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .tags-list-label {
+      display: block;
+      white-space: nowrap;
+      margin: 0;
+    }
+
+    a,
+    .plain-button {
+      display: block;
+      white-space: nowrap;
+      cursor: pointer;
+
+      .anticon {
+        font-size: 75%;
+        margin-right: 2px;
+      }
+    }
+  }
+
   .ant-badge-count {
     background-color: fade(@redash-gray, 10%);
     color: fade(@redash-gray, 75%);
   }
 
-  .ant-menu-item-selected {
+  .ant-menu.ant-menu-inline {
-    .ant-badge-count {
+    border: none;
-      background-color: @primary-color;
+
-      color: white;
+    .ant-menu-item {
+      width: 100%;
+    }
+
+    .ant-menu-item-selected {
+      .ant-badge-count {
+        background-color: @primary-color;
+        color: white;
+      }
+    }
+
+    .ant-menu-item {
+      &:hover,
+      &:active,
+      &:focus,
+      &:focus-within {
+        color: @primary-color;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
     }
   }
-}
+}

client/app/components/TagsList.tsx

@@ -0,0 +1,108 @@
+import { map, includes, difference } from "lodash";
+import React, { useState, useCallback, useEffect } from "react";
+import Badge from "antd/lib/badge";
+import Menu from "antd/lib/menu";
+import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
+import getTags from "@/services/getTags";
+import PlainButton from "@/components/PlainButton";
+
+import "./TagsList.less";
+
+type Tag = {
+  name: string;
+  count?: number;
+};
+
+type TagsListProps = {
+  tagsUrl: string;
+  showUnselectAll: boolean;
+  onUpdate?: (selectedTags: string[]) => void;
+};
+
+function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps): JSX.Element | null {
+  const [allTags, setAllTags] = useState<Tag[]>([]);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    getTags(tagsUrl).then(tags => {
+      if (!isCancelled) {
+        setAllTags(tags);
+      }
+    });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [tagsUrl]);
+
+  const toggleTag = useCallback(
+    (event, tag) => {
+      let newSelectedTags;
+      if (event.shiftKey) {
+        // toggle tag
+        if (includes(selectedTags, tag)) {
+          newSelectedTags = difference(selectedTags, [tag]);
+        } else {
+          newSelectedTags = [...selectedTags, tag];
+        }
+      } else {
+        // if the tag is the only selected, deselect it, otherwise select only it
+        if (includes(selectedTags, tag) && selectedTags.length === 1) {
+          newSelectedTags = [];
+        } else {
+          newSelectedTags = [tag];
+        }
+      }
+
+      setSelectedTags(newSelectedTags);
+      if (onUpdate) {
+        onUpdate([...newSelectedTags]);
+      }
+    },
+    [selectedTags, onUpdate]
+  );
+
+  const unselectAll = useCallback(() => {
+    setSelectedTags([]);
+    if (onUpdate) {
+      onUpdate([]);
+    }
+  }, [onUpdate]);
+
+  if (allTags.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="tags-list">
+      <div className="tags-list-title">
+        <span className="tags-list-label">Tags</span>
+        {showUnselectAll && selectedTags.length > 0 && (
+          <PlainButton type="link" onClick={unselectAll}>
+            <CloseOutlinedIcon />
+            clear selection
+          </PlainButton>
+        )}
+      </div>
+
+      <div className="tiled">
+        <Menu className="invert-stripe-position" mode="inline" selectedKeys={selectedTags}>
+          {map(allTags, tag => (
+            <Menu.Item key={tag.name} className="m-0">
+              <PlainButton
+                className="d-flex align-items-center justify-content-between"
+                onClick={event => toggleTag(event, tag.name)}>
+                <span className="max-character col-xs-11">{tag.name}</span>
+                <Badge count={tag.count} />
+              </PlainButton>
+            </Menu.Item>
+          ))}
+        </Menu>
+      </div>
+    </div>
+  );
+}
+
+export default TagsList;

client/app/components/TimeAgo.jsx

@@ -4,14 +4,14 @@ import React, { useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import { Moment } from "@/components/proptypes";
 import { clientConfig } from "@/services/auth";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 
 function toMoment(value) {
   value = !isNil(value) ? moment(value) : null;
   return value && value.isValid() ? value : null;
 }
 
-export default function TimeAgo({ date, placeholder, autoUpdate }) {
+export default function TimeAgo({ date, placeholder, autoUpdate, variation }) {
   const startDate = toMoment(date);
   const [value, setValue] = useState(null);
   const title = useMemo(() => (startDate ? startDate.format(clientConfig.dateTimeFormat) : null), [startDate]);
@@ -28,6 +28,13 @@ export default function TimeAgo({ date, placeholder, autoUpdate }) {
     }
   }, [autoUpdate, startDate, placeholder]);
 
+  if (variation === "timeAgoInTooltip") {
+    return (
+      <Tooltip title={value}>
+        <span data-test="TimeAgo">{title}</span>
+      </Tooltip>
+    );
+  }
   return (
     <Tooltip title={title}>
       <span data-test="TimeAgo">{value}</span>
@@ -39,6 +46,7 @@ TimeAgo.propTypes = {
   date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date), Moment]),
   placeholder: PropTypes.string,
   autoUpdate: PropTypes.bool,
+  variation: PropTypes.oneOf(["timeAgoInTooltip"]),
 };
 
 TimeAgo.defaultProps = {

client/app/components/Tooltip.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import AntTooltip, { TooltipProps } from "antd/lib/tooltip";
+import { isNil } from "lodash";
+
+export default function Tooltip({ title, ...restProps }: TooltipProps) {
+  const liveTitle = !isNil(title) ? (
+    <span role="status" aria-live="assertive" aria-relevant="additions">
+      {title}
+    </span>
+  ) : null;
+
+  return <AntTooltip trigger={["hover", "focus"]} title={liveTitle} {...restProps} />;
+}

client/app/components/UserGroups.jsx

@@ -4,13 +4,13 @@ import PropTypes from "prop-types";
 import Tag from "antd/lib/tag";
 import Link from "@/components/Link";
 
-export default function UserGroups({ groups, ...props }) {
+import "./UserGroups.less";
+
+export default function UserGroups({ groups, linkGroups, ...props }) {
   return (
-    <div {...props}>
+    <div className="user-groups" {...props}>
       {map(groups, group => (
-        <Tag className="m-b-5 m-r-5" key={group.id}>
+        <Tag key={group.id}>{linkGroups ? <Link href={`groups/${group.id}`}>{group.name}</Link> : group.name}</Tag>
-          <Link href={`groups/${group.id}`}>{group.name}</Link>
-        </Tag>
       ))}
     </div>
   );
@@ -19,12 +19,14 @@ export default function UserGroups({ groups, ...props }) {
 UserGroups.propTypes = {
   groups: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.number.isRequired,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       name: PropTypes.string,
     })
   ),
+  linkGroups: PropTypes.bool,
 };
 
 UserGroups.defaultProps = {
   groups: [],
+  linkGroups: true,
 };

client/app/components/UserGroups.less

@@ -0,0 +1,7 @@
+.user-groups {
+  margin: -5px 0 0 -5px;
+
+  .ant-tag {
+    margin: 5px 0 0 5px;
+  }
+}

client/app/components/admin/RQStatus.jsx

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

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

@@ -1,84 +0,0 @@
-import Input from "antd/lib/input";
-import { includes, isEmpty } from "lodash";
-import PropTypes from "prop-types";
-import React from "react";
-import Link from "@/components/Link";
-import EmptyState from "@/components/items-list/components/EmptyState";
-
-import "./CardsList.less";
-
-const { Search } = Input;
-
-export default class CardsList extends React.Component {
-  static propTypes = {
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        imgSrc: PropTypes.string.isRequired,
-        onClick: PropTypes.func,
-        href: PropTypes.string,
-      })
-    ),
-    showSearch: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    items: [],
-    showSearch: false,
-  };
-
-  state = {
-    searchText: "",
-  };
-
-  constructor(props) {
-    super(props);
-    this.items = [];
-
-    let itemId = 1;
-    props.items.forEach(item => {
-      this.items.push({ id: itemId, ...item });
-      itemId += 1;
-    });
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  renderListItem(item) {
-    return (
-      <Link key={`card${item.id}`} className="visual-card" onClick={item.onClick} href={item.href}>
-        <img alt={item.title} src={item.imgSrc} />
-        <h3>{item.title}</h3>
-      </Link>
-    );
-  }
-
-  render() {
-    const { showSearch } = this.props;
-    const { searchText } = this.state;
-
-    const filteredItems = this.items.filter(
-      item => isEmpty(searchText) || includes(item.title.toLowerCase(), searchText.toLowerCase())
-    );
-
-    return (
-      <div data-test="CardsList">
-        {showSearch && (
-          <div className="row p-10">
-            <div className="col-md-4 col-md-offset-4">
-              <Search placeholder="Search..." onChange={e => this.setState({ searchText: e.target.value })} autoFocus />
-            </div>
-          </div>
-        )}
-        {isEmpty(filteredItems) ? (
-          <EmptyState className="" />
-        ) : (
-          <div className="row">
-            <div className="col-lg-12 d-inline-flex flex-wrap visual-card-list">
-              {filteredItems.map(item => this.renderListItem(item))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-}

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

@@ -1,5 +1,4 @@
-
+@import (reference, less) "~@/assets/less/inc/variables";
-@import '../../assets/less/inc/variables';
 
 .visual-card-list {
   width: 100%;
@@ -7,7 +6,7 @@
 }
 
 .visual-card {
-  background: #FFFFFF;
+  background: #ffffff;
   border: 1px solid fade(@redash-gray, 15%);
   border-radius: 3px;
   margin: 5px;
@@ -22,7 +21,9 @@
   display: flex;
   align-items: center;
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &:focus-within {
     box-shadow: rgba(102, 136, 153, 0.15) 0px 4px 9px -3px;
   }
 
@@ -74,4 +75,4 @@
       height: 48px;
     }
   }
-}
+}

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

@@ -0,0 +1,89 @@
+import { includes, isEmpty } from "lodash";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import Input from "antd/lib/input";
+import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
+import EmptyState from "@/components/items-list/components/EmptyState";
+
+import "./CardsList.less";
+
+export interface CardsListItem {
+  title: string;
+  imgSrc: string;
+  href?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export interface CardsListProps {
+  items?: CardsListItem[];
+  showSearch?: boolean;
+}
+
+interface ListItemProps {
+  item: CardsListItem;
+  keySuffix: string;
+}
+
+function ListItem({ item, keySuffix }: ListItemProps) {
+  const commonProps = {
+    key: `card${keySuffix}`,
+    className: "visual-card",
+    onClick: item.onClick,
+    children: (
+      <>
+        <img alt={item.title} src={item.imgSrc} />
+        <h3>{item.title}</h3>
+      </>
+    ),
+  };
+
+  return item.href ? <Link href={item.href} {...commonProps} /> : <PlainButton type="link" {...commonProps} />;
+}
+
+export default function CardsList({ items = [], showSearch = false }: CardsListProps) {
+  const [searchText, setSearchText] = useState("");
+  const filteredItems = items.filter(
+    item => isEmpty(searchText) || includes(item.title.toLowerCase(), searchText.toLowerCase())
+  );
+
+  return (
+    <div data-test="CardsList">
+      {showSearch && (
+        <div className="row p-10">
+          <div className="col-md-4 col-md-offset-4">
+            <Input.Search
+              placeholder="Search..."
+              aria-label="Search cards"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchText(e.target.value)}
+              autoFocus
+            />
+          </div>
+        </div>
+      )}
+      {isEmpty(filteredItems) ? (
+        <EmptyState className="" />
+      ) : (
+        <div className="row">
+          <div className="col-lg-12 d-inline-flex flex-wrap visual-card-list">
+            {filteredItems.map((item: CardsListItem, index: number) => (
+              <ListItem key={index} item={item} keySuffix={index.toString()} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+CardsList.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      imgSrc: PropTypes.string.isRequired,
+      onClick: PropTypes.func,
+      href: PropTypes.string,
+    })
+  ),
+  showSearch: PropTypes.bool,
+};

client/app/components/dashboards/AddWidgetDialog.jsx

@@ -8,12 +8,15 @@ import { MappingType, ParameterMappingListInput } from "@/components/ParameterMa
 import QuerySelector from "@/components/QuerySelector";
 import notification from "@/services/notification";
 import { Query } from "@/services/query";
+import { useUniqueId } from "@/lib/hooks/useUniqueId";
 
 function VisualizationSelect({ query, visualization, onChange }) {
   const visualizationGroups = useMemo(() => {
     return query ? groupBy(query.visualizations, "type") : {};
   }, [query]);
 
+  const vizSelectId = useUniqueId("visualization-select");
+
   const handleChange = useCallback(
     visualizationId => {
       const selectedVisualization = query ? find(query.visualizations, { id: visualizationId }) : null;
@@ -29,9 +32,9 @@ function VisualizationSelect({ query, visualization, onChange }) {
   return (
     <div>
       <div className="form-group">
-        <label htmlFor="choose-visualization">Choose Visualization</label>
+        <label htmlFor={vizSelectId}>Choose Visualization</label>
         <Select
-          id="choose-visualization"
+          id={vizSelectId}
           className="w-100"
           value={visualization ? visualization.id : undefined}
           onChange={handleChange}>
@@ -108,6 +111,7 @@ function AddWidgetDialog({ dialog, dashboard }) {
   }, [dialog, selectedVisualization, parameterMappings]);
 
   const existingParams = dashboard.getParametersDefs();
+  const parameterMappingsId = useUniqueId("parameter-mappings");
 
   return (
     <Modal
@@ -132,12 +136,12 @@ function AddWidgetDialog({ dialog, dashboard }) {
         )}
 
         {parameterMappings.length > 0 && [
-          <label key="parameters-title" htmlFor="parameter-mappings">
+          <label key="parameters-title" htmlFor={parameterMappingsId}>
             Parameters
           </label>,
           <ParameterMappingListInput
             key="parameters-list"
-            id="parameter-mappings"
+            id={parameterMappingsId}
             mappings={parameterMappings}
             existingParams={existingParams}
             onChange={setParameterMappings}

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -60,6 +60,7 @@ function CreateDashboardDialog({ dialog }) {
           onChange={handleNameChange}
           onPressEnter={save}
           placeholder="Dashboard Name"
+          aria-label="Dashboard name"
           disabled={saveInProgress}
           autoFocus
         />

client/app/components/dashboards/DashboardGrid.jsx

@@ -41,6 +41,7 @@ const DashboardWidget = React.memo(
     onRefreshWidget,
     onRemoveWidget,
     onParameterMappingsChange,
+    isEditing,
     canEdit,
     isPublic,
     isLoading,
@@ -57,6 +58,7 @@ const DashboardWidget = React.memo(
           widget={widget}
           dashboard={dashboard}
           filters={filters}
+          isEditing={isEditing}
           canEdit={canEdit}
           isPublic={isPublic}
           isLoading={isLoading}
@@ -77,7 +79,8 @@ const DashboardWidget = React.memo(
     prevProps.canEdit === nextProps.canEdit &&
     prevProps.isPublic === nextProps.isPublic &&
     prevProps.isLoading === nextProps.isLoading &&
-    prevProps.filters === nextProps.filters
+    prevProps.filters === nextProps.filters &&
+    prevProps.isEditing === nextProps.isEditing
 );
 
 class DashboardGrid extends React.Component {
@@ -223,7 +226,6 @@ class DashboardGrid extends React.Component {
   });
 
   render() {
-    const className = cx("dashboard-wrapper", this.props.isEditing ? "editing-mode" : "preview-mode");
     const {
       onLoadWidget,
       onRefreshWidget,
@@ -232,18 +234,21 @@ class DashboardGrid extends React.Component {
       filters,
       dashboard,
       isPublic,
+      isEditing,
       widgets,
     } = this.props;
+    const className = cx("dashboard-wrapper", isEditing ? "editing-mode" : "preview-mode");
 
     return (
       <div className={className}>
         <ResponsiveGridLayout
+          draggableCancel="input,.sortable-container"
           className={cx("layout", { "disable-animations": this.state.disableAnimations })}
           cols={{ [MULTI]: cfg.columns, [SINGLE]: 1 }}
           rowHeight={cfg.rowHeight - cfg.margins}
           margin={[cfg.margins, cfg.margins]}
-          isDraggable={this.props.isEditing}
+          isDraggable={isEditing}
-          isResizable={this.props.isEditing}
+          isResizable={isEditing}
           onResizeStart={this.autoHeightCtrl.stop}
           onResizeStop={this.onWidgetResize}
           layouts={this.state.layouts}
@@ -265,6 +270,7 @@ class DashboardGrid extends React.Component {
                 filters={filters}
                 isPublic={isPublic}
                 isLoading={widget.loading}
+                isEditing={isEditing}
                 canEdit={dashboard.canEdit()}
                 onLoadWidget={onLoadWidget}
                 onRefreshWidget={onRefreshWidget}

client/app/components/dashboards/ExpandedWidgetDialog.jsx

@@ -3,10 +3,11 @@ import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
+import { FiltersType } from "@/components/Filters";
 import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
 import VisualizationName from "@/components/visualizations/VisualizationName";
 
-function ExpandedWidgetDialog({ dialog, widget }) {
+function ExpandedWidgetDialog({ dialog, widget, filters }) {
   return (
     <Modal
       {...dialog.props}
@@ -20,6 +21,7 @@ function ExpandedWidgetDialog({ dialog, widget }) {
       <VisualizationRenderer
         visualization={widget.visualization}
         queryResult={widget.getQueryResult()}
+        filters={filters}
         context="widget"
       />
     </Modal>
@@ -29,6 +31,11 @@ function ExpandedWidgetDialog({ dialog, widget }) {
 ExpandedWidgetDialog.propTypes = {
   dialog: DialogPropType.isRequired,
   widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: FiltersType,
+};
+
+ExpandedWidgetDialog.defaultProps = {
+  filters: [],
 };
 
 export default wrapDialog(ExpandedWidgetDialog);

client/app/components/dashboards/TextboxDialog.jsx

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { useDebouncedCallback } from "use-debounce";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import Divider from "antd/lib/divider";
 import Link from "@/components/Link";
 import HtmlContent from "@redash/viz/lib/components/HtmlContent";
@@ -73,6 +73,7 @@ function TextboxDialog({ dialog, isNew, ...props }) {
           className="resize-vertical"
           rows="5"
           value={text}
+          aria-label="Textbox widget content"
           onChange={handleInputChange}
           autoFocus
           placeholder="This is where you write some text"

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

@@ -48,10 +48,10 @@
       top: 0;
       left: 0;
       bottom: 85px;
-      right: 15px;
+      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((100vw - 15px) / 6) 5px;
+      background-size: calc((100% + 15px) / 6) 5px;
       background-position: -7px 1px;
     }
   }

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { compact, isEmpty, invoke } from "lodash";
+import { compact, isEmpty, invoke, map } from "lodash";
 import { markdown } from "markdown";
 import cx from "classnames";
 import Menu from "antd/lib/menu";
@@ -15,9 +15,11 @@ import Timer from "@/components/Timer";
 import { Moment } from "@/components/proptypes";
 import QueryLink from "@/components/QueryLink";
 import { FiltersType } from "@/components/Filters";
+import PlainButton from "@/components/PlainButton";
 import ExpandedWidgetDialog from "@/components/dashboards/ExpandedWidgetDialog";
 import EditParameterMappingsDialog from "@/components/dashboards/EditParameterMappingsDialog";
 import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
+
 import Widget from "./Widget";
 
 function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParametersEdit }) {
@@ -74,7 +76,8 @@ function RefreshIndicator({ refreshStartedAt }) {
   return (
     <div className="refresh-indicator">
       <div className="refresh-icon">
-        <i className="zmdi zmdi-refresh zmdi-hc-spin" />
+        <i className="zmdi zmdi-refresh zmdi-hc-spin" aria-hidden="true" />
+        <span className="sr-only">Refreshing...</span>
       </div>
       <Timer from={refreshStartedAt} />
     </div>
@@ -84,7 +87,14 @@ function RefreshIndicator({ refreshStartedAt }) {
 RefreshIndicator.propTypes = { refreshStartedAt: Moment };
 RefreshIndicator.defaultProps = { refreshStartedAt: null };
 
-function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onParametersUpdate }) {
+function VisualizationWidgetHeader({
+  widget,
+  refreshStartedAt,
+  parameters,
+  isEditing,
+  onParametersUpdate,
+  onParametersEdit,
+}) {
   const canViewQuery = currentUser.hasPermission("view_query");
 
   return (
@@ -104,7 +114,13 @@ function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onPar
       </div>
       {!isEmpty(parameters) && (
         <div className="m-b-10">
-          <Parameters parameters={parameters} onValuesChange={onParametersUpdate} />
+          <Parameters
+            parameters={parameters}
+            sortable={isEditing}
+            appendSortableToParent={false}
+            onValuesChange={onParametersUpdate}
+            onParametersEdit={onParametersEdit}
+          />
         </div>
       )}
     </>
@@ -115,12 +131,16 @@ VisualizationWidgetHeader.propTypes = {
   widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   refreshStartedAt: Moment,
   parameters: PropTypes.arrayOf(PropTypes.object),
+  isEditing: PropTypes.bool,
   onParametersUpdate: PropTypes.func,
+  onParametersEdit: PropTypes.func,
 };
 
 VisualizationWidgetHeader.defaultProps = {
   refreshStartedAt: null,
   onParametersUpdate: () => {},
+  onParametersEdit: () => {},
+  isEditing: false,
   parameters: [],
 };
 
@@ -140,34 +160,40 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
     <>
       <span>
         {!isPublic && !!widgetQueryResult && (
-          <a
+          <PlainButton
             className="refresh-button hidden-print btn btn-sm btn-default btn-transparent"
             onClick={() => refreshWidget(1)}
             data-test="RefreshButton">
-            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 1 })} />{" "}
+            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 1 })} aria-hidden="true" />
+            <span className="sr-only">
+              {refreshClickButtonId === 1 ? "Refreshing, please wait. " : "Press to refresh. "}
+            </span>{" "}
             <TimeAgo date={updatedAt} />
-          </a>
+          </PlainButton>
         )}
         <span className="visible-print">
-          <i className="zmdi zmdi-time-restore" /> {formatDateTime(updatedAt)}
+          <i className="zmdi zmdi-time-restore" aria-hidden="true" /> {formatDateTime(updatedAt)}
         </span>
         {isPublic && (
           <span className="small hidden-print">
-            <i className="zmdi zmdi-time-restore" /> <TimeAgo date={updatedAt} />
+            <i className="zmdi zmdi-time-restore" aria-hidden="true" /> <TimeAgo date={updatedAt} />
           </span>
         )}
       </span>
       <span>
         {!isPublic && (
-          <a
+          <PlainButton
             className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh"
             onClick={() => refreshWidget(2)}>
-            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 2 })} />
+            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 2 })} aria-hidden="true" />
-          </a>
+            <span className="sr-only">
+              {refreshClickButtonId === 2 ? "Refreshing, please wait." : "Press to refresh."}
+            </span>
+          </PlainButton>
         )}
-        <a className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh" onClick={onExpand}>
+        <PlainButton className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh" onClick={onExpand}>
-          <i className="zmdi zmdi-fullscreen" />
+          <i className="zmdi zmdi-fullscreen" aria-hidden="true" />
-        </a>
+        </PlainButton>
       </span>
     </>
   ) : null;
@@ -190,6 +216,7 @@ class VisualizationWidget extends React.Component {
     isPublic: PropTypes.bool,
     isLoading: PropTypes.bool,
     canEdit: PropTypes.bool,
+    isEditing: PropTypes.bool,
     onLoad: PropTypes.func,
     onRefresh: PropTypes.func,
     onDelete: PropTypes.func,
@@ -201,6 +228,7 @@ class VisualizationWidget extends React.Component {
     isPublic: false,
     isLoading: false,
     canEdit: false,
+    isEditing: false,
     onLoad: () => {},
     onRefresh: () => {},
     onDelete: () => {},
@@ -209,7 +237,10 @@ class VisualizationWidget extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { localParameters: props.widget.getLocalParameters() };
+    this.state = {
+      localParameters: props.widget.getLocalParameters(),
+      localFilters: props.filters,
+    };
   }
 
   componentDidMount() {
@@ -219,8 +250,12 @@ class VisualizationWidget extends React.Component {
     onLoad();
   }
 
+  onLocalFiltersChange = localFilters => {
+    this.setState({ localFilters });
+  };
+
   expandWidget = () => {
-    ExpandedWidgetDialog.showModal({ widget: this.props.widget });
+    ExpandedWidgetDialog.showModal({ widget: this.props.widget, filters: this.state.localFilters });
   };
 
   editParameterMappings = () => {
@@ -260,15 +295,21 @@ class VisualizationWidget extends React.Component {
               visualization={widget.visualization}
               queryResult={widgetQueryResult}
               filters={filters}
+              onFiltersChange={this.onLocalFiltersChange}
               context="widget"
             />
           </div>
         );
       default:
         return (
-          <div className="body-row-auto spinner-container">
+          <div
+            className="body-row-auto spinner-container"
+            role="status"
+            aria-live="polite"
+            aria-relevant="additions removals">
             <div className="spinner">
-              <i className="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x" />
+              <i className="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x" aria-hidden="true" />
+              <span className="sr-only">Loading...</span>
             </div>
           </div>
         );
@@ -276,10 +317,15 @@ class VisualizationWidget extends React.Component {
   }
 
   render() {
-    const { widget, isLoading, isPublic, canEdit, onRefresh } = this.props;
+    const { widget, isLoading, isPublic, canEdit, isEditing, onRefresh } = this.props;
     const { localParameters } = this.state;
     const widgetQueryResult = widget.getQueryResult();
     const isRefreshing = isLoading && !!(widgetQueryResult && widgetQueryResult.getStatus());
+    const onParametersEdit = parameters => {
+      const paramOrder = map(parameters, "name");
+      widget.options.paramOrder = paramOrder;
+      widget.save("options", { paramOrder });
+    };
 
     return (
       <Widget
@@ -295,7 +341,9 @@ class VisualizationWidget extends React.Component {
             widget={widget}
             refreshStartedAt={isRefreshing ? widget.refreshStartedAt : null}
             parameters={localParameters}
+            isEditing={isEditing}
             onParametersUpdate={onRefresh}
+            onParametersEdit={onParametersEdit}
           />
         }
         footer={

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

@@ -7,6 +7,7 @@ import Modal from "antd/lib/modal";
 import Menu from "antd/lib/menu";
 import recordEvent from "@/services/recordEvent";
 import { Moment } from "@/components/proptypes";
+import PlainButton from "@/components/PlainButton";
 
 import "./Widget.less";
 
@@ -22,9 +23,9 @@ function WidgetDropdownButton({ extraOptions, showDeleteOption, onDelete }) {
   return (
     <div className="widget-menu-regular">
       <Dropdown overlay={WidgetMenu} placement="bottomRight" trigger={["click"]}>
-        <a className="action p-l-15 p-r-15" data-test="WidgetDropdownButton">
+        <PlainButton className="action p-l-15 p-r-15" data-test="WidgetDropdownButton" aria-label="More options">
-          <i className="zmdi zmdi-more-vert" />
+          <i className="zmdi zmdi-more-vert" aria-hidden="true" />
-        </a>
+        </PlainButton>
       </Dropdown>
     </div>
   );
@@ -45,9 +46,14 @@ WidgetDropdownButton.defaultProps = {
 function WidgetDeleteButton({ onClick }) {
   return (
     <div className="widget-menu-remove">
-      <a className="action" title="Remove From Dashboard" onClick={onClick} data-test="WidgetDeleteButton">
+      <PlainButton
-        <i className="zmdi zmdi-close" />
+        className="action"
-      </a>
+        title="Remove From Dashboard"
+        onClick={onClick}
+        data-test="WidgetDeleteButton"
+        aria-label="Close">
+        <i className="zmdi zmdi-close" aria-hidden="true" />
+      </PlainButton>
     </div>
   );
 }

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

@@ -1,12 +1,4 @@
-@import "../../../assets/less/inc/variables";
+@import (reference, less) "~@/assets/less/inc/variables";
-
-.tile .t-header .th-title a.query-link {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.th-title p.hidden-print {
-  margin-bottom: 0;
-}
 
 .widget-wrapper {
   .widget-actions {
@@ -22,10 +14,19 @@
       line-height: 100%;
       display: block;
       padding: 4px 10px 3px;
-    }
 
-    .action:hover {
+      &:focus {
-      background-color: rgba(0, 0, 0, 0.1);
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      &:hover {
+        background-color: transparent;
+        color: @blue;
+      }
+
+      &:active {
+        filter: brightness(75%);
+      }
     }
   }
 
@@ -83,7 +84,7 @@
     display: block;
   }
 
-  a.query-link {
+  .query-link {
     pointer-events: none;
     cursor: move;
   }
@@ -190,10 +191,18 @@
     .th-title {
       padding-right: 23px; // no overlap on RefreshIndicator
 
-      a {
+      .hidden-print {
+        margin-bottom: 0;
+      }
+
+      .query-link {
         color: fade(@redash-black, 80%);
         font-size: 15px;
         font-weight: 500;
+
+        &:not(.visualization-name) {
+          color: fade(@redash-black, 50%);
+        }
       }
     }
 
@@ -212,7 +221,10 @@
     padding: 15px;
   }
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within {
     .widget-menu-regular,
     .btn__refresh {
       opacity: 1 !important;
@@ -240,10 +252,12 @@
       }
     }
 
-    a {
+    a,
+    .plain-button {
       color: fade(@redash-black, 65%);
 
-      &:hover {
+      &:hover,
+      &:focus {
         color: fade(@redash-black, 95%);
       }
     }

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

@@ -201,7 +201,10 @@ export default function DynamicForm({
             className="extra-options-button"
             onClick={() => setShowExtraFields(currentShowExtraFields => !currentShowExtraFields)}>
             Additional Settings
-            <i className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })} />
+            <i
+              className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })}
+              aria-hidden="true"
+            />
           </Button>
           <Collapse collapsed={!showExtraFields} className="extra-options-content">
             <DynamicFormFields fields={extraFields} feedbackIcons={feedbackIcons} form={form} />

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

@@ -1,4 +1,4 @@
-@import "~@/assets/less/ant";
+@import (reference, less) "~@/assets/less/ant";
 
 @btn-extra-options-bg: fade(@redash-gray, 10%);
 @btn-extra-options-border: fade(@redash-gray, 15%);

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

@@ -1,14 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import { getDynamicDateFromString } from "@/services/parameters/DateParameter";
-import moment from "moment";
+import DynamicDatePicker from "@/components/dynamic-parameters/DynamicDatePicker";
-import { includes } from "lodash";
-import { isDynamicDate, getDynamicDateFromString } from "@/services/parameters/DateParameter";
-import DateInput from "@/components/DateInput";
-import DateTimeInput from "@/components/DateTimeInput";
-import DynamicButton from "@/components/dynamic-parameters/DynamicButton";
-
-import "./DynamicParameters.less";
 
 const DYNAMIC_DATE_OPTIONS = [
   {
@@ -29,87 +22,30 @@ const DYNAMIC_DATE_OPTIONS = [
   },
 ];
 
-class DateParameter extends React.Component {
+function DateParameter(props) {
-  static propTypes = {
+  return (
-    type: PropTypes.string,
+    <DynamicDatePicker
-    className: PropTypes.string,
+      dynamicButtonOptions={{ options: DYNAMIC_DATE_OPTIONS }}
-    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+      {...props}
-    parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+      dateOptions={{ "aria-label": "Parameter date value" }}
-    onSelect: PropTypes.func,
+    />
-  };
+  );
-
-  static defaultProps = {
-    type: "",
-    className: "",
-    value: null,
-    parameter: null,
-    onSelect: () => {},
-  };
-
-  constructor(props) {
-    super(props);
-    this.dateComponentRef = React.createRef();
-  }
-
-  onDynamicValueSelect = dynamicValue => {
-    const { onSelect, parameter } = this.props;
-    if (dynamicValue === "static") {
-      const parameterValue = parameter.getExecutionValue();
-      if (parameterValue) {
-        onSelect(moment(parameterValue));
-      } else {
-        onSelect(null);
-      }
-    } else {
-      onSelect(dynamicValue.value);
-    }
-    // give focus to the DatePicker to get keyboard shortcuts to work
-    this.dateComponentRef.current.focus();
-  };
-
-  render() {
-    const { type, value, className, onSelect } = this.props;
-    const hasDynamicValue = isDynamicDate(value);
-    const isDateTime = includes(type, "datetime");
-
-    const additionalAttributes = {};
-
-    let DateComponent = DateInput;
-    if (isDateTime) {
-      DateComponent = DateTimeInput;
-      if (includes(type, "with-seconds")) {
-        additionalAttributes.withSeconds = true;
-      }
-    }
-
-    if (moment.isMoment(value) || value === null) {
-      additionalAttributes.value = value;
-    }
-
-    if (hasDynamicValue) {
-      const dynamicDate = value;
-      additionalAttributes.placeholder = dynamicDate && dynamicDate.name;
-      additionalAttributes.value = null;
-    }
-
-    return (
-      <div className="date-parameter">
-        <DateComponent
-          ref={this.dateComponentRef}
-          className={classNames("redash-datepicker", { "dynamic-value": hasDynamicValue }, className)}
-          onSelect={onSelect}
-          suffixIcon={null}
-          {...additionalAttributes}
-        />
-        <DynamicButton
-          options={DYNAMIC_DATE_OPTIONS}
-          selectedDynamicValue={hasDynamicValue ? value : null}
-          enabled={hasDynamicValue}
-          onSelect={this.onDynamicValueSelect}
-        />
-      </div>
-    );
-  }
 }
 
+DateParameter.propTypes = {
+  type: PropTypes.string,
+  className: PropTypes.string,
+  value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  onSelect: PropTypes.func,
+};
+
+DateParameter.defaultProps = {
+  type: "",
+  className: "",
+  value: null,
+  parameter: null,
+  onSelect: () => {},
+};
+
 export default DateParameter;

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

@@ -1,14 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import { includes } from "lodash";
-import moment from "moment";
+import { getDynamicDateRangeFromString } from "@/services/parameters/DateRangeParameter";
-import { includes, isArray, isObject } from "lodash";
+import DynamicDateRangePicker from "@/components/dynamic-parameters/DynamicDateRangePicker";
-import { isDynamicDateRange, getDynamicDateRangeFromString } from "@/services/parameters/DateRangeParameter";
-import DateRangeInput from "@/components/DateRangeInput";
-import DateTimeRangeInput from "@/components/DateTimeRangeInput";
-import DynamicButton from "@/components/dynamic-parameters/DynamicButton";
-
-import "./DynamicParameters.less";
 
 const DYNAMIC_DATE_OPTIONS = [
   {
@@ -134,98 +128,25 @@ const DYNAMIC_DATETIME_OPTIONS = [
   ...DYNAMIC_DATE_OPTIONS,
 ];
 
-const widthByType = {
+function DateRangeParameter(props) {
-  "date-range": 294,
+  const options = includes(props.type, "datetime-range") ? DYNAMIC_DATETIME_OPTIONS : DYNAMIC_DATE_OPTIONS;
-  "datetime-range": 352,
+  return <DynamicDateRangePicker {...props} dynamicButtonOptions={{ options }} />;
-  "datetime-range-with-seconds": 382,
+}
+
+DateRangeParameter.propTypes = {
+  type: PropTypes.string,
+  className: PropTypes.string,
+  value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  onSelect: PropTypes.func,
 };
 
-function isValidDateRangeValue(value) {
+DateRangeParameter.defaultProps = {
-  return isArray(value) && value.length === 2 && moment.isMoment(value[0]) && moment.isMoment(value[1]);
+  type: "",
-}
+  className: "",
-
+  value: null,
-class DateRangeParameter extends React.Component {
+  parameter: null,
-  static propTypes = {
+  onSelect: () => {},
-    type: PropTypes.string,
+};
-    className: PropTypes.string,
-    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    onSelect: PropTypes.func,
-  };
-
-  static defaultProps = {
-    type: "",
-    className: "",
-    value: null,
-    parameter: null,
-    onSelect: () => {},
-  };
-
-  constructor(props) {
-    super(props);
-    this.dateRangeComponentRef = React.createRef();
-  }
-
-  onDynamicValueSelect = dynamicValue => {
-    const { onSelect, parameter } = this.props;
-    if (dynamicValue === "static") {
-      const parameterValue = parameter.getExecutionValue();
-      if (isObject(parameterValue) && parameterValue.start && parameterValue.end) {
-        onSelect([moment(parameterValue.start), moment(parameterValue.end)]);
-      } else {
-        onSelect(null);
-      }
-    } else {
-      onSelect(dynamicValue.value);
-    }
-    // give focus to the DatePicker to get keyboard shortcuts to work
-    this.dateRangeComponentRef.current.focus();
-  };
-
-  render() {
-    const { type, value, onSelect, className } = this.props;
-    const isDateTimeRange = includes(type, "datetime-range");
-    const hasDynamicValue = isDynamicDateRange(value);
-    const options = isDateTimeRange ? DYNAMIC_DATETIME_OPTIONS : DYNAMIC_DATE_OPTIONS;
-
-    const additionalAttributes = {};
-
-    let DateRangeComponent = DateRangeInput;
-    if (isDateTimeRange) {
-      DateRangeComponent = DateTimeRangeInput;
-      if (includes(type, "with-seconds")) {
-        additionalAttributes.withSeconds = true;
-      }
-    }
-
-    if (isValidDateRangeValue(value) || value === null) {
-      additionalAttributes.value = value;
-    }
-
-    if (hasDynamicValue) {
-      additionalAttributes.placeholder = [value && value.name];
-      additionalAttributes.value = null;
-    }
-
-    return (
-      <div className="data-range-parameter">
-        <DateRangeComponent
-          ref={this.dateRangeComponentRef}
-          className={classNames("redash-datepicker date-range-input", { "dynamic-value": hasDynamicValue }, className)}
-          onSelect={onSelect}
-          style={{ width: hasDynamicValue ? 195 : widthByType[type] }}
-          suffixIcon={null}
-          {...additionalAttributes}
-        />
-        <DynamicButton
-          options={options}
-          selectedDynamicValue={hasDynamicValue ? value : null}
-          enabled={hasDynamicValue}
-          onSelect={this.onDynamicValueSelect}
-        />
-      </div>
-    );
-  }
-}
 
 export default DateRangeParameter;

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

@@ -15,7 +15,7 @@ import "./DynamicButton.less";
 
 const { Text } = Typography;
 
-function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
+function DynamicButton({ options, selectedDynamicValue, onSelect, enabled, staticValueLabel }) {
   const menu = (
     <Menu
       className="dynamic-menu"
@@ -32,7 +32,7 @@ function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
       {enabled && (
         <Menu.Item>
           <ArrowLeftOutlinedIcon />
-          <Text type="secondary">Back to Static Value</Text>
+          <Text type="secondary">{staticValueLabel}</Text>
         </Menu.Item>
       )}
     </Menu>
@@ -42,7 +42,7 @@ function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
 
   return (
     <div ref={containerRef}>
-      <a onClick={e => e.stopPropagation()}>
+      <div role="presentation" onClick={e => e.stopPropagation()}>
         <Dropdown.Button
           overlay={menu}
           className="dynamic-button"
@@ -58,7 +58,7 @@ function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
           getPopupContainer={() => containerRef.current}
           data-test="DynamicButton"
         />
-      </a>
+      </div>
     </div>
   );
 }
@@ -68,6 +68,7 @@ DynamicButton.propTypes = {
   selectedDynamicValue: PropTypes.oneOfType([DynamicDateType, DynamicDateRangeType]),
   onSelect: PropTypes.func,
   enabled: PropTypes.bool,
+  staticValueLabel: PropTypes.string,
 };
 
 DynamicButton.defaultProps = {
@@ -75,6 +76,7 @@ DynamicButton.defaultProps = {
   selectedDynamicValue: null,
   onSelect: () => {},
   enabled: false,
+  staticValueLabel: "Back to Static Value",
 };
 
 export default DynamicButton;

client/app/components/dynamic-parameters/DynamicButton.less

@@ -34,3 +34,9 @@
     font-size: 11px;
   }
 }
+
+.dynamic-icon {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,112 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import moment from "moment";
+import { includes } from "lodash";
+import { isDynamicDate } from "@/services/parameters/DateParameter";
+import DateInput from "@/components/DateInput";
+import DateTimeInput from "@/components/DateTimeInput";
+import DynamicButton from "@/components/dynamic-parameters/DynamicButton";
+
+import "./DynamicParameters.less";
+
+class DynamicDatePicker extends React.Component {
+  static propTypes = {
+    type: PropTypes.string,
+    className: PropTypes.string,
+    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    onSelect: PropTypes.func,
+    dynamicButtonOptions: PropTypes.shape({
+      staticValueLabel: PropTypes.string,
+      options: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string,
+          value: PropTypes.object,
+          label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+        })
+      ),
+    }),
+    dateOptions: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  };
+
+  static defaultProps = {
+    type: "",
+    className: "",
+    value: null,
+    parameter: null,
+    dynamicButtonOptions: {
+      options: [],
+    },
+    onSelect: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.dateComponentRef = React.createRef();
+  }
+
+  onDynamicValueSelect = dynamicValue => {
+    const { onSelect, parameter } = this.props;
+    if (dynamicValue === "static") {
+      const parameterValue = parameter.getExecutionValue();
+      if (parameterValue) {
+        onSelect(moment(parameterValue));
+      } else {
+        onSelect(null);
+      }
+    } else {
+      onSelect(dynamicValue.value);
+    }
+    // give focus to the DatePicker to get keyboard shortcuts to work
+    this.dateComponentRef.current.focus();
+  };
+
+  render() {
+    const { type, value, className, dateOptions, dynamicButtonOptions, onSelect } = this.props;
+    const hasDynamicValue = isDynamicDate(value);
+    const isDateTime = includes(type, "datetime");
+
+    const additionalAttributes = {};
+
+    let DateComponent = DateInput;
+    if (isDateTime) {
+      DateComponent = DateTimeInput;
+      if (includes(type, "with-seconds")) {
+        additionalAttributes.withSeconds = true;
+      }
+    }
+
+    if (moment.isMoment(value) || value === null) {
+      additionalAttributes.value = value;
+    }
+
+    if (hasDynamicValue) {
+      const dynamicDate = value;
+      additionalAttributes.placeholder = dynamicDate && dynamicDate.name;
+      additionalAttributes.value = null;
+    }
+
+    return (
+      <div className={classNames("date-parameter", className)}>
+        <DateComponent
+          {...dateOptions}
+          ref={this.dateComponentRef}
+          className={classNames("redash-datepicker", type, { "dynamic-value": hasDynamicValue })}
+          onSelect={onSelect}
+          suffixIcon={null}
+          {...additionalAttributes}
+        />
+        <DynamicButton
+          options={dynamicButtonOptions.options}
+          staticValueLabel={dynamicButtonOptions.staticValueLabel}
+          selectedDynamicValue={hasDynamicValue ? value : null}
+          enabled={hasDynamicValue}
+          onSelect={this.onDynamicValueSelect}
+        />
+      </div>
+    );
+  }
+}
+
+export default DynamicDatePicker;

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

@@ -0,0 +1,115 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import moment from "moment";
+import { includes, isArray, isObject } from "lodash";
+import { isDynamicDateRange } from "@/services/parameters/DateRangeParameter";
+import DateRangeInput from "@/components/DateRangeInput";
+import DateTimeRangeInput from "@/components/DateTimeRangeInput";
+import DynamicButton from "@/components/dynamic-parameters/DynamicButton";
+
+import "./DynamicParameters.less";
+
+function isValidDateRangeValue(value) {
+  return isArray(value) && value.length === 2 && moment.isMoment(value[0]) && moment.isMoment(value[1]);
+}
+
+class DynamicDateRangePicker extends React.Component {
+  static propTypes = {
+    type: PropTypes.oneOf(["date-range", "datetime-range", "datetime-range-with-seconds"]).isRequired,
+    className: PropTypes.string,
+    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    onSelect: PropTypes.func,
+    dynamicButtonOptions: PropTypes.shape({
+      staticValueLabel: PropTypes.string,
+      options: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string,
+          value: PropTypes.object,
+          label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+        })
+      ),
+    }),
+    dateRangeOptions: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  };
+
+  static defaultProps = {
+    type: "date-range",
+    className: "",
+    value: null,
+    parameter: null,
+    dynamicButtonOptions: {
+      options: [],
+    },
+    onSelect: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.dateRangeComponentRef = React.createRef();
+  }
+
+  onDynamicValueSelect = dynamicValue => {
+    const { onSelect, parameter } = this.props;
+    if (dynamicValue === "static") {
+      const parameterValue = parameter.getExecutionValue();
+      if (isObject(parameterValue) && parameterValue.start && parameterValue.end) {
+        onSelect([moment(parameterValue.start), moment(parameterValue.end)]);
+      } else {
+        onSelect(null);
+      }
+    } else {
+      onSelect(dynamicValue.value);
+    }
+    // give focus to the DatePicker to get keyboard shortcuts to work
+    this.dateRangeComponentRef.current.focus();
+  };
+
+  render() {
+    const { type, value, onSelect, className, dynamicButtonOptions, dateRangeOptions, parameter, ...rest } = this.props;
+    const isDateTimeRange = includes(type, "datetime-range");
+    const hasDynamicValue = isDynamicDateRange(value);
+
+    const additionalAttributes = {};
+
+    let DateRangeComponent = DateRangeInput;
+    if (isDateTimeRange) {
+      DateRangeComponent = DateTimeRangeInput;
+      if (includes(type, "with-seconds")) {
+        additionalAttributes.withSeconds = true;
+      }
+    }
+
+    if (isValidDateRangeValue(value) || value === null) {
+      additionalAttributes.value = value;
+    }
+
+    if (hasDynamicValue) {
+      additionalAttributes.placeholder = [value && value.name];
+      additionalAttributes.value = null;
+    }
+
+    return (
+      <div {...rest} className={classNames("date-range-parameter", className)}>
+        <DateRangeComponent
+          {...dateRangeOptions}
+          ref={this.dateRangeComponentRef}
+          className={classNames("redash-datepicker date-range-input", type, { "dynamic-value": hasDynamicValue })}
+          onSelect={onSelect}
+          suffixIcon={null}
+          {...additionalAttributes}
+        />
+        <DynamicButton
+          options={dynamicButtonOptions.options}
+          staticValueLabel={dynamicButtonOptions.staticValueLabel}
+          selectedDynamicValue={hasDynamicValue ? value : null}
+          enabled={hasDynamicValue}
+          onSelect={this.onDynamicValueSelect}
+        />
+      </div>
+    );
+  }
+}
+
+export default DynamicDateRangePicker;

client/app/components/dynamic-parameters/DynamicParameters.less

@@ -1,8 +1,26 @@
-@import "../../assets/less/inc/variables";
+@import (reference, less) "~@/assets/less/inc/variables";
+
+.date-range-parameter,
+.date-parameter {
+  position: relative;
+}
 
 .redash-datepicker {
   padding-right: 35px !important;
 
+  &.date-range {
+    width: 294px;
+  }
+  &.datetime-range {
+    width: 352px;
+  }
+  &.datetime-range-with-seconds {
+    width: 382px;
+  }
+  &.dynamic-value {
+    width: 195px;
+  }
+
   &.ant-picker-range .ant-picker-clear {
     right: 35px !important;
     background: transparent;
@@ -14,7 +32,7 @@
 
   &.dynamic-value {
     & ::placeholder {
-      color: @text-color !important;
+      color: @input-color !important;
     }
 
     &.date-range-input {
@@ -22,7 +40,8 @@
         opacity: 0;
       }
 
-      .ant-picker-separator {
+      .ant-picker-separator,
+      .ant-picker-range-separator {
         display: none;
       }
 

client/app/components/empty-state/EmptyState.d.ts

@@ -8,13 +8,21 @@ export interface StepItem<K> {
   node: React.ReactNode;
 }
 
+export interface EmptyStateHelpMessageProps {
+  helpTriggerType: string;
+}
+
+export declare const EmptyStateHelpMessage: React.FunctionComponent<EmptyStateHelpMessageProps>;
+
 export interface EmptyStateProps<K = unknown> {
   header?: string;
   icon?: string;
   description: string;
   illustration: string;
   illustrationPath?: string;
-  helpLink: string;
+  helpMessage?: React.ReactNode;
+  closable?: boolean;
+  onClose?: () => void;
 
   onboardingMode?: boolean;
   showAlertStep?: boolean;
@@ -33,8 +41,9 @@ export interface StepProps {
   show: boolean;
   completed: boolean;
   url?: string;
-  urlText?: string;
+  urlTarget?: string;
-  text: string;
+  urlText?: React.ReactNode;
+  text?: React.ReactNode;
   onClick?: () => void;
 }
 

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

@@ -2,10 +2,14 @@ import { keys, some } from "lodash";
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
+import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
+import HelpTrigger from "@/components/HelpTrigger";
 import { currentUser } from "@/services/auth";
 import organizationStatus from "@/services/organizationStatus";
+
 import "./empty-state.less";
 
 export function Step({ show, completed, text, url, urlText, onClick }) {
@@ -13,12 +17,11 @@ export function Step({ show, completed, text, url, urlText, onClick }) {
     return null;
   }
 
+  const commonProps = { children: urlText, onClick };
+
   return (
     <li className={classNames({ done: completed })}>
-      <Link href={url} onClick={onClick}>
+      {url ? <Link href={url} {...commonProps} /> : <PlainButton type="link" {...commonProps} />} {text}
-        {urlText}
-      </Link>{" "}
-      {text}
     </li>
   );
 }
@@ -26,24 +29,44 @@ export function Step({ show, completed, text, url, urlText, onClick }) {
 Step.propTypes = {
   show: PropTypes.bool.isRequired,
   completed: PropTypes.bool.isRequired,
-  text: PropTypes.string.isRequired,
+  text: PropTypes.node,
   url: PropTypes.string,
-  urlText: PropTypes.string,
+  urlTarget: PropTypes.string,
+  urlText: PropTypes.node,
   onClick: PropTypes.func,
 };
 
 Step.defaultProps = {
   url: null,
+  urlTarget: null,
   urlText: null,
+  text: null,
   onClick: null,
 };
 
+export function EmptyStateHelpMessage({ helpTriggerType }) {
+  return (
+    <p>
+      Need more support?{" "}
+      <HelpTrigger className="f-14" type={helpTriggerType} showTooltip={false}>
+        See our Help
+      </HelpTrigger>
+    </p>
+  );
+}
+
+EmptyStateHelpMessage.propTypes = {
+  helpTriggerType: PropTypes.string.isRequired,
+};
+
 function EmptyState({
   icon,
   header,
   description,
   illustration,
-  helpLink,
+  helpMessage,
+  closable,
+  onClose,
   onboardingMode,
   showAlertStep,
   showDashboardStep,
@@ -87,8 +110,7 @@ function EmptyState({
           show={isAvailable.dataSource}
           completed={isCompleted.dataSource}
           url="data_sources/new"
-          urlText="Connect"
+          urlText="Connect a Data Source"
-          text="a Data Source"
         />
       );
     }
@@ -116,8 +138,7 @@ function EmptyState({
           show={isAvailable.query}
           completed={isCompleted.query}
           url="queries/new"
-          urlText="Create"
+          urlText="Create your first Query"
-          text="your first Query"
         />
       ),
     },
@@ -129,8 +150,7 @@ function EmptyState({
           show={isAvailable.alert}
           completed={isCompleted.alert}
           url="alerts/new"
-          urlText="Create"
+          urlText="Create your first Alert"
-          text="your first Alert"
         />
       ),
     },
@@ -142,8 +162,7 @@ function EmptyState({
           show={isAvailable.dashboard}
           completed={isCompleted.dashboard}
           onClick={showCreateDashboardDialog}
-          urlText="Create"
+          urlText="Create your first Dashboard"
-          text="your first Dashboard"
         />
       ),
     },
@@ -155,8 +174,7 @@ function EmptyState({
           show={isAvailable.inviteUsers}
           completed={isCompleted.inviteUsers}
           url="users/new"
-          urlText="Invite"
+          urlText="Invite your team members"
-          text="your team members"
         />
       ),
     },
@@ -166,26 +184,27 @@ function EmptyState({
   const imageSource = illustrationPath ? illustrationPath : "static/images/illustrations/" + illustration + ".svg";
 
   return (
-    <div className="empty-state bg-white tiled">
+    <div className="empty-state-wrapper">
-      <div className="empty-state__summary">
+      <div className="empty-state bg-white tiled">
-        {header && <h4>{header}</h4>}
+        <div className="empty-state__summary">
-        <h2>
+          {header && <h4>{header}</h4>}
-          <i className={icon} />
+          <h2>
-        </h2>
+            <i className={icon} aria-hidden="true" />
-        <p>{description}</p>
+          </h2>
-        <img src={imageSource} alt={illustration + " Illustration"} width="75%" />
+          <p>{description}</p>
-      </div>
+          <img src={imageSource} alt={illustration + " Illustration"} width="75%" />
-      <div className="empty-state__steps">
+        </div>
-        <h4>Let&apos;s get started</h4>
+        <div className="empty-state__steps">
-        <ol>{stepsItems.map(item => item.node)}</ol>
+          <h4>Let&apos;s get started</h4>
-        <p>
+          <ol>{stepsItems.map(item => item.node)}</ol>
-          Need more support?{" "}
+          {helpMessage}
-          <Link href={helpLink} target="_blank" rel="noopener noreferrer">
+        </div>
-            See our Help
-            <i className="fa fa-external-link m-l-5" aria-hidden="true" />
-          </Link>
-        </p>
       </div>
+      {closable && (
+        <PlainButton className="close-button" aria-label="Close" onClick={onClose}>
+          <CloseOutlinedIcon />
+        </PlainButton>
+      )}
     </div>
   );
 }
@@ -196,7 +215,9 @@ EmptyState.propTypes = {
   description: PropTypes.string.isRequired,
   illustration: PropTypes.string.isRequired,
   illustrationPath: PropTypes.string,
-  helpLink: PropTypes.string.isRequired,
+  helpMessage: PropTypes.node,
+  closable: PropTypes.bool,
+  onClose: PropTypes.func,
 
   onboardingMode: PropTypes.bool,
   showAlertStep: PropTypes.bool,
@@ -210,6 +231,9 @@ EmptyState.propTypes = {
 EmptyState.defaultProps = {
   icon: null,
   header: null,
+  helpMessage: null,
+  closable: false,
+  onClose: () => {},
 
   onboardingMode: false,
   showAlertStep: false,

client/app/components/empty-state/empty-state.less

@@ -1,7 +1,9 @@
+@import (reference, less) "~@/assets/less/ant";
+
 // Empty states
 .empty-state {
   width: 100%;
-  margin: 0px auto 10px;
+  margin: 0 auto 10px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -16,14 +18,17 @@
   }
 
   .empty-state__steps {
-    padding-left: 0px;
+    padding-left: 0;
   }
 
-
   .empty-state__summary {
     align-self: flex-start;
     text-align: center;
     background: rgba(102, 136, 153, 0.025);
+
+    p {
+      margin-bottom: 0;
+    }
   }
 
   ol {
@@ -44,10 +49,6 @@
     margin-bottom: 15px;
   }
 
-  p {
-    margin-bottom: 0;
-  }
-
   a:hover {
     cursor: pointer;
   }
@@ -71,3 +72,27 @@
     }
   }
 }
+
+// close button
+.empty-state-wrapper {
+  position: relative;
+
+  .close-button {
+    position: absolute;
+    top: 15px;
+    right: 25px;
+    font-size: 15px;
+    color: @text-color-secondary;
+    cursor: pointer;
+    transition: color @animation-duration-slow;
+
+    &:hover,
+    &:focus {
+      color: @text-color;
+    }
+
+    &:active {
+      filter: contrast(200%);
+    }
+  }
+}

client/app/components/groups/CreateGroupDialog.jsx

@@ -28,6 +28,7 @@ class CreateGroupDialog extends React.Component {
           onChange={event => this.setState({ name: event.target.value })}
           onPressEnter={() => this.save()}
           placeholder="Group Name"
+          aria-label="Group name"
           autoFocus
         />
       </Modal>

client/app/components/groups/DeleteGroupButton.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
-import Tooltip from "antd/lib/tooltip";
+import Tooltip from "@/components/Tooltip";
 import notification from "@/services/notification";
 import Group from "@/services/group";
 

client/app/components/groups/DetailsPageSidebar.jsx

@@ -26,13 +26,13 @@ export default function DetailsPageSidebar({
       <Sidebar.Menu items={items} selected={controller.params.currentPage} />
       {canAddMembers && (
         <Button className="w-100 m-t-5" type="primary" onClick={onAddMembersClick}>
-          <i className="fa fa-plus m-r-5" />
+          <i className="fa fa-plus m-r-5" aria-hidden="true" />
           Add Members
         </Button>
       )}
       {canAddDataSources && (
         <Button className="w-100 m-t-5" type="primary" onClick={onAddDataSourcesClick}>
-          <i className="fa fa-plus m-r-5" />
+          <i className="fa fa-plus m-r-5" aria-hidden="true" />
           Add Data Sources
         </Button>
       )}