8

Co-authored-by: ts-migrate <>

.circleci/docker-compose.circle.yml

@@ -13,7 +13,6 @@ services:
       REDASH_LOG_LEVEL: "INFO"
       REDASH_REDIS_URL: "redis://redis:6379/0"
       REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-      REDASH_COOKIE_SECRET: "2H9gNG9obnAQ9qnR9BDTQUph6CbXKCzF"
   redis:
     image: redis:3.0-alpine
     restart: unless-stopped

.circleci/docker-compose.cypress.yml

@@ -12,7 +12,6 @@ x-redash-environment: &redash-environment
   REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
   REDASH_RATELIMIT_ENABLED: "false"
   REDASH_ENFORCE_CSRF: "true"
-  REDASH_COOKIE_SECRET: "2H9gNG9obnAQ9qnR9BDTQUph6CbXKCzF"
 services:
   server:
     <<: *redash-service

CHANGELOG.md

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

Dockerfile

@@ -22,8 +22,7 @@ RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
 COPY --chown=redash client /frontend/client
 COPY --chown=redash webpack.config.js /frontend/
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm run build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
-
-FROM python:3.7-slim-buster
+FROM python:3.7-slim
 
 EXPOSE 5000
 
@@ -67,9 +66,8 @@ 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
-RUN wget --quiet $databricks_odbc_driver_url -O /tmp/simba_odbc.zip \
-  && chmod 600 /tmp/simba_odbc.zip \
-  && unzip /tmp/simba_odbc.zip -d /tmp/ \
+ADD $databricks_odbc_driver_url /tmp/simba_odbc.zip
+RUN unzip /tmp/simba_odbc.zip -d /tmp/ \
   && dpkg -i /tmp/SimbaSparkODBC-*/*.deb \
   && echo "[Simba]\nDriver = /opt/simba/spark/lib/64/libsparkodbc_sb64.so" >> /etc/odbcinst.ini \
   && rm /tmp/simba_odbc.zip \
@@ -81,19 +79,12 @@ WORKDIR /app
 ENV PIP_DISABLE_PIP_VERSION_CHECK=1
 ENV PIP_NO_CACHE_DIR=1
 
-# rollback pip version to avoid legacy resolver problem
-RUN pip install pip==20.2.4;
-
-# We first copy only the requirements file, to avoid rebuilding on every file change.
-COPY requirements_all_ds.txt ./
+# We first copy only the requirements file, to avoid rebuilding on every file
+# change.
+COPY requirements.txt requirements_bundles.txt requirements_dev.txt requirements_all_ds.txt ./
+RUN if [ "x$skip_dev_deps" = "x" ] ; then pip install -r requirements.txt -r requirements_dev.txt; else pip install -r requirements.txt; fi
 RUN if [ "x$skip_ds_deps" = "x" ] ; then pip install -r requirements_all_ds.txt ; else echo "Skipping pip install -r requirements_all_ds.txt" ; fi
 
-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

README.md

@@ -43,7 +43,6 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - DB2 by IBM
 - Druid
 - Elasticsearch
-- Firebolt
 - Google Analytics
 - Google BigQuery
 - Google Spreadsheets
@@ -74,7 +73,6 @@ Redash supports more than 35 SQL and NoSQL [data sources](https://redash.io/help
 - Shell Scripts
 - Snowflake
 - SQLite
-- TiDB
 - TreasureData
 - Vertica
 - Yandex AppMetrrica

client/.eslintrc.js

@@ -5,11 +5,10 @@ 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", "jsx-a11y"],
+  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint"],
   settings: {
     "import/resolver": "webpack",
   },
@@ -20,19 +19,7 @@ module.exports = {
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
-    "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
+    "jsx-a11y/anchor-is-valid": "off",
     "no-console": ["warn", { allow: ["warn", "error"] }],
     "no-restricted-imports": [
       "error",
@@ -64,7 +51,7 @@ module.exports = {
         "no-useless-constructor": "off",
         "@typescript-eslint/no-useless-constructor": "error",
         // Many API fields and generated types use camelcase
-        "@typescript-eslint/camelcase": "off",
+        "@typescript-eslint/camelcase": "off","@typescript-eslint/no-empty-function": "off",
       },
     },
   ],

client/app/__tests__/enzyme_setup.js

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

client/app/__tests__/enzyme_setup.ts

@@ -0,0 +1,5 @@
+import { configure } from "enzyme";
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'enzy... Remove this comment to see the full error message
+import Adapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new Adapter() });

client/app/assets/less/ant.less

@@ -225,16 +225,6 @@
     }
   }
 
-  &-tbody > tr&-row {
-    &:hover,
-    &:focus,
-    &:focus-within {
-      & > td {
-        background: @table-row-hover-bg;
-      }
-    }
-  }
-
   // Custom styles
 
   &-headerless &-tbody > tr:first-child > td {
@@ -401,18 +391,6 @@
         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,10 +98,6 @@ strong {
 
 .clickable {
   cursor: pointer;
-
-  button&:disabled {
-    cursor: not-allowed;
-  }
 }
 
 .resize-vertical {

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

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

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

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

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

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

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

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

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

@@ -127,13 +127,11 @@ body.fixed-layout {
   }
 }
 
-.label-tag {
+a.label-tag {
   background: fade(@redash-gray, 15%);
   color: darken(@redash-gray, 15%);
 
-  &:hover,
-  &:focus,
-  &:active {
+  &:hover {
     color: darken(@redash-gray, 15%);
     background: fade(@redash-gray, 25%);
   }

client/app/components/AceEditorInput.tsx

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

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

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

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

@@ -2,12 +2,12 @@ import React, { useMemo } from "react";
 import { first, includes } from "lodash";
 import Menu from "antd/lib/menu";
 import Link from "@/components/Link";
-import PlainButton from "@/components/PlainButton";
 import HelpTrigger from "@/components/HelpTrigger";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import { useCurrentRoute } from "@/components/ApplicationArea/Router";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
+// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '@/assets/images/redash_icon_sm... Remove this comment to see the full error message
 import logoUrl from "@/assets/images/redash_icon_small.png";
 
 import DesktopOutlinedIcon from "@ant-design/icons/DesktopOutlined";
@@ -16,11 +16,14 @@ import AlertOutlinedIcon from "@ant-design/icons/AlertOutlined";
 import PlusOutlinedIcon from "@ant-design/icons/PlusOutlined";
 import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
 import SettingOutlinedIcon from "@ant-design/icons/SettingOutlined";
-import VersionInfo from "./VersionInfo";
 
+import VersionInfo from "./VersionInfo";
 import "./DesktopNavbar.less";
 
-function NavbarSection({ children, ...props }) {
+function NavbarSection({
+  children,
+  ...props
+}: any) {
   return (
     <Menu selectable={false} mode="vertical" theme="dark" {...props}>
       {children}
@@ -34,13 +37,8 @@ function useNavbarActiveState() {
   return useMemo(
     () => ({
       dashboards: includes(
-        [
-          "Dashboards.List",
-          "Dashboards.Favorites",
-          "Dashboards.My",
-          "Dashboards.ViewOrEdit",
-          "Dashboards.LegacyViewOrEdit",
-        ],
+        ["Dashboards.List", "Dashboards.Favorites", "Dashboards.ViewOrEdit", "Dashboards.LegacyViewOrEdit"],
+        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
         currentRoute.id
       ),
       queries: includes(
@@ -53,11 +51,15 @@ function useNavbarActiveState() {
           "Queries.New",
           "Queries.Edit",
         ],
+        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
         currentRoute.id
       ),
+      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       dataSources: includes(["DataSources.List"], currentRoute.id),
+      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View", "Alerts.Edit"], currentRoute.id),
     }),
+    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     [currentRoute.id]
   );
 }
@@ -72,9 +74,9 @@ export default function DesktopNavbar() {
   const canCreateAlert = currentUser.hasPermission("list_alerts");
 
   return (
-    <nav className="desktop-navbar">
+    <div className="desktop-navbar">
       <NavbarSection className="desktop-navbar-logo">
-        <div role="menuitem">
+        <div>
           <Link href="./">
             <img src={logoUrl} alt="Redash" />
           </Link>
@@ -83,25 +85,28 @@ export default function DesktopNavbar() {
 
       <NavbarSection>
         {currentUser.hasPermission("list_dashboards") && (
+          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
           <Menu.Item key="dashboards" className={activeState.dashboards ? "navbar-active-item" : null}>
             <Link href="dashboards">
-              <DesktopOutlinedIcon aria-label="Dashboard navigation button" />
+              <DesktopOutlinedIcon />
               <span className="desktop-navbar-label">Dashboards</span>
             </Link>
           </Menu.Item>
         )}
         {currentUser.hasPermission("view_query") && (
+          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
           <Menu.Item key="queries" className={activeState.queries ? "navbar-active-item" : null}>
             <Link href="queries">
-              <CodeOutlinedIcon aria-label="Queries navigation button" />
+              <CodeOutlinedIcon />
               <span className="desktop-navbar-label">Queries</span>
             </Link>
           </Menu.Item>
         )}
         {currentUser.hasPermission("list_alerts") && (
+          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
           <Menu.Item key="alerts" className={activeState.alerts ? "navbar-active-item" : null}>
             <Link href="alerts">
-              <AlertOutlinedIcon aria-label="Alerts navigation button" />
+              <AlertOutlinedIcon />
               <span className="desktop-navbar-label">Alerts</span>
             </Link>
           </Menu.Item>
@@ -114,7 +119,6 @@ export default function DesktopNavbar() {
             key="create"
             popupClassName="desktop-navbar-submenu"
             data-test="CreateButton"
-            tabIndex={0}
             title={
               <React.Fragment>
                 <PlusOutlinedIcon />
@@ -130,9 +134,10 @@ export default function DesktopNavbar() {
             )}
             {canCreateDashboard && (
               <Menu.Item key="new-dashboard">
-                <PlainButton data-test="CreateDashboardMenuItem" onClick={() => CreateDashboardDialog.showModal()}>
+                {/* @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0. */}
+                <a data-test="CreateDashboardMenuItem" onMouseUp={() => CreateDashboardDialog.showModal()}>
                   New Dashboard
-                </PlainButton>
+                </a>
               </Menu.Item>
             )}
             {canCreateAlert && (
@@ -148,13 +153,16 @@ export default function DesktopNavbar() {
 
       <NavbarSection>
         <Menu.Item key="help">
-          <HelpTrigger showTooltip={false} type="HOME" tabIndex={0}>
+          {/* @ts-expect-error ts-migrate(2746) FIXME: This JSX tag's 'children' prop expects a single ch... Remove this comment to see the full error message */}
+          <HelpTrigger showTooltip={false} type="HOME">
             <QuestionCircleOutlinedIcon />
             <span className="desktop-navbar-label">Help</span>
           </HelpTrigger>
         </Menu.Item>
         {firstSettingsTab && (
+          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
           <Menu.Item key="settings" className={activeState.dataSources ? "navbar-active-item" : null}>
+            {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'path' does not exist on type 'number | (... Remove this comment to see the full error message */}
             <Link href={firstSettingsTab.path} data-test="SettingsLink">
               <SettingOutlinedIcon />
               <span className="desktop-navbar-label">Settings</span>
@@ -167,9 +175,9 @@ export default function DesktopNavbar() {
         <Menu.SubMenu
           key="profile"
           popupClassName="desktop-navbar-submenu"
-          tabIndex={0}
           title={
             <span data-test="ProfileDropdown" className="desktop-navbar-profile-menu-title">
+              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'profile_image_url' does not exist on typ... Remove this comment to see the full error message */}
               <img className="profile__image_thumb" src={currentUser.profile_image_url} alt={currentUser.name} />
             </span>
           }>
@@ -183,16 +191,16 @@ export default function DesktopNavbar() {
           )}
           <Menu.Divider />
           <Menu.Item key="logout">
-            <PlainButton data-test="LogOutButton" onClick={() => Auth.logout()}>
+            <a data-test="LogOutButton" onClick={() => Auth.logout()}>
               Log out
-            </PlainButton>
+            </a>
           </Menu.Item>
           <Menu.Divider />
-          <Menu.Item key="version" role="presentation" disabled className="version-info">
+          <Menu.Item key="version" disabled className="version-info">
             <VersionInfo />
           </Menu.Item>
         </Menu.SubMenu>
       </NavbarSection>
-    </nav>
+    </div>
   );
 }

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

@@ -1,6 +1,5 @@
 import { first } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import MenuOutlinedIcon from "@ant-design/icons/MenuOutlined";
 import Dropdown from "antd/lib/dropdown";
@@ -8,11 +7,18 @@ import Menu from "antd/lib/menu";
 import Link from "@/components/Link";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
+// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '@/assets/images/redash_icon_sm... Remove this comment to see the full error message
 import logoUrl from "@/assets/images/redash_icon_small.png";
 
 import "./MobileNavbar.less";
 
-export default function MobileNavbar({ getPopupContainer }) {
+type OwnProps = {
+    getPopupContainer?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof MobileNavbar.defaultProps;
+
+export default function MobileNavbar({ getPopupContainer }: Props) {
   const firstSettingsTab = first(settingsMenu.getAvailableItems());
 
   return (
@@ -50,6 +56,7 @@ export default function MobileNavbar({ getPopupContainer }) {
               <Menu.Divider />
               {firstSettingsTab && (
                 <Menu.Item key="settings">
+                  {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'path' does not exist on type 'number | (... Remove this comment to see the full error message */}
                   <Link href={firstSettingsTab.path}>Settings</Link>
                 </Menu.Item>
               )}
@@ -79,10 +86,6 @@ export default function MobileNavbar({ getPopupContainer }) {
   );
 }
 
-MobileNavbar.propTypes = {
-  getPopupContainer: PropTypes.func,
-};
-
 MobileNavbar.defaultProps = {
   getPopupContainer: null,
 };

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

@@ -1,21 +1,25 @@
 import React from "react";
 import Link from "@/components/Link";
 import { clientConfig, currentUser } from "@/services/auth";
+// @ts-expect-error ts-migrate(7042) FIXME: Module '@/version.json' was resolved to '/Users/el... Remove this comment to see the full error message
 import frontendVersion from "@/version.json";
 
 export default function VersionInfo() {
   return (
     <React.Fragment>
       <div>
+        {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'version' does not exist on type '{}'. */}
         Version: {clientConfig.version}
+        {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'version' does not exist on type '{}'. */}
         {frontendVersion !== clientConfig.version && ` (${frontendVersion.substring(0, 8)})`}
       </div>
+      {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'newVersionAvailable' does not exist on t... Remove this comment to see the full error message */}
       {clientConfig.newVersionAvailable && currentUser.hasPermission("super_admin") && (
         <div className="m-t-10">
           {/* eslint-disable react/jsx-no-target-blank */}
           <Link href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
-            Update Available <i className="fa fa-external-link m-l-5" aria-hidden="true" />
-            <span className="sr-only">(opens in a new tab)</span>
+            Update Available
+            <i className="fa fa-external-link m-l-5" />
           </Link>
         </div>
       )}

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

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

client/app/components/ApplicationArea/ErrorMessage.test.tsx

@@ -10,7 +10,9 @@ const ErrorMessages = {
 
 function mockAxiosError(status = 500, response = {}) {
   const error = new Error(`Failed with code ${status}.`);
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'isAxiosError' does not exist on type 'Er... Remove this comment to see the full error message
   error.isAxiosError = true;
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'response' does not exist on type 'Error'... Remove this comment to see the full error message
   error.response = { status, ...response };
   return error;
 }
@@ -22,7 +24,7 @@ describe("Error Message", () => {
     spyError.mockReset();
   });
 
-  function expectErrorMessageToBe(error, errorMessage) {
+  function expectErrorMessageToBe(error: any, errorMessage: any) {
     const component = mount(<ErrorMessage error={error} />);
 
     expect(component.find(".error-state__details h4").text()).toBe(errorMessage);

client/app/components/ApplicationArea/ErrorMessage.tsx

@@ -1,12 +1,11 @@
 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) {
+function getErrorMessageByStatus(status: any, defaultMessage: any) {
   switch (status) {
     case 404:
       return "It seems like the page you're looking for cannot be found.";
@@ -18,22 +17,31 @@ function getErrorMessageByStatus(status, defaultMessage) {
   }
 }
 
-function getErrorMessage(error) {
+function getErrorMessage(error: any) {
   const message = "It seems like we encountered an error. Try refreshing this page or contact your administrator.";
   if (isObject(error)) {
     // HTTP errors
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isAxiosError' does not exist on type 'ob... Remove this comment to see the full error message
     if (error.isAxiosError && isObject(error.response)) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'response' does not exist on type 'object... Remove this comment to see the full error message
       return getErrorMessageByStatus(error.response.status, get(error, "response.data.message", message));
     }
     // Router errors
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'status' does not exist on type 'object'.
     if (error.status) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'status' does not exist on type 'object'.
       return getErrorMessageByStatus(error.status, message);
     }
   }
   return message;
 }
 
-export default function ErrorMessage({ error, message }) {
+type Props = {
+    error: any;
+    message?: string;
+};
+
+export default function ErrorMessage({ error, message }: Props) {
   if (!error) {
     return null;
   }
@@ -49,7 +57,7 @@ export default function ErrorMessage({ error, message }) {
     <div className="error-message-container" data-test="ErrorMessage" role="alert">
       <div className="error-state bg-white tiled">
         <div className="error-state__icon">
-          <i className="zmdi zmdi-alert-circle-o" aria-hidden="true" />
+          <i className="zmdi zmdi-alert-circle-o" />
         </div>
         <div className="error-state__details">
           <DynamicComponent
@@ -62,8 +70,3 @@ export default function ErrorMessage({ error, message }) {
     </div>
   );
 }
-
-ErrorMessage.propTypes = {
-  error: PropTypes.object.isRequired,
-  message: PropTypes.string,
-};

client/app/components/ApplicationArea/ErrorMessageDetails.jsx

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

client/app/components/ApplicationArea/ErrorMessageDetails.tsx

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

client/app/components/ApplicationArea/Router.tsx

@@ -1,6 +1,5 @@
 import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
 import React, { useState, useEffect, useRef, useContext } from "react";
-import PropTypes from "prop-types";
 import UniversalRouter from "universal-router";
 import ErrorBoundary from "@redash/viz/lib/components/ErrorBoundary";
 import location from "@/services/location";
@@ -20,7 +19,7 @@ export function useCurrentRoute() {
   return useContext(CurrentRouteContext);
 }
 
-export function stripBase(href) {
+export function stripBase(href: any) {
   // Resolve provided link and '' (root) relative to document's base.
   // If provided href is not related to current document (does not
   // start with resolved root) - return false. Otherwise
@@ -36,7 +35,20 @@ export function stripBase(href) {
   return false;
 }
 
-export default function Router({ routes, onRouteChange }) {
+type OwnProps = {
+    routes?: {
+        path: string;
+        render?: (...args: any[]) => any;
+        resolve?: {
+            [key: string]: any;
+        };
+    }[];
+    onRouteChange?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof Router.defaultProps;
+
+export default function Router({ routes, onRouteChange }: Props) {
   const [currentRoute, setCurrentRoute] = useState(null);
 
   const currentPathRef = useRef(null);
@@ -47,15 +59,17 @@ export default function Router({ routes, onRouteChange }) {
 
     const router = new UniversalRouter(routes, {
       resolveRoute({ route }, routeParams) {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'render' does not exist on type 'Route<Co... Remove this comment to see the full error message
         if (isFunction(route.render)) {
           return { ...route, routeParams };
         }
       },
     });
 
-    function resolve(action) {
+    function resolve(action: any) {
       if (!isAbandoned) {
         if (errorHandlerRef.current) {
+          // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
           errorHandlerRef.current.reset();
         }
 
@@ -70,6 +84,7 @@ export default function Router({ routes, onRouteChange }) {
         if (pathname === currentPathRef.current) {
           return;
         }
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'null'.
         currentPathRef.current = pathname;
 
         // Don't reload controller if URL was replaced
@@ -87,7 +102,8 @@ export default function Router({ routes, onRouteChange }) {
           .catch(error => {
             if (!isAbandoned && currentPathRef.current === pathname) {
               setCurrentRoute({
-                render: currentRoute => <ErrorMessage {...currentRoute.routeParams} />,
+                // @ts-expect-error ts-migrate(2345) FIXME: Argument of type '{ render: (currentRoute: any) =>... Remove this comment to see the full error message
+                render: (currentRoute: any) => <ErrorMessage {...currentRoute.routeParams} />,
                 routeParams: { error },
               });
             }
@@ -97,7 +113,7 @@ export default function Router({ routes, onRouteChange }) {
 
     resolve("PUSH");
 
-    const unlisten = location.listen((unused, action) => resolve(action));
+    const unlisten = location.listen((unused: any, action: any) => resolve(action));
 
     return () => {
       isAbandoned = true;
@@ -116,29 +132,15 @@ export default function Router({ routes, onRouteChange }) {
 
   return (
     <CurrentRouteContext.Provider value={currentRoute}>
-      <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
+      {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
+      <ErrorBoundary ref={errorHandlerRef} renderError={(error: any) => <ErrorMessage error={error} />}>
+        {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
         {currentRoute.render(currentRoute)}
       </ErrorBoundary>
     </CurrentRouteContext.Provider>
   );
 }
 
-Router.propTypes = {
-  routes: PropTypes.arrayOf(
-    PropTypes.shape({
-      path: PropTypes.string.isRequired,
-      render: PropTypes.func, // (routeParams: PropTypes.object; currentRoute; location) => PropTypes.node
-      // Additional props to be injected into route component.
-      // Object keys are props names. Object values will become prop values:
-      // - if value is a function - it will be called without arguments, and result will be used; otherwise value will be used;
-      // - after previous step, if value is a promise - router will wait for it to resolve; resolved value then will be used;
-      //   otherwise value will be used directly.
-      resolve: PropTypes.objectOf(PropTypes.any),
-    })
-  ),
-  onRouteChange: PropTypes.func,
-};
-
 Router.defaultProps = {
   routes: [],
   onRouteChange: () => {},

client/app/components/ApplicationArea/handleNavigationIntent.ts

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

client/app/components/ApplicationArea/index.tsx

@@ -9,13 +9,15 @@ export default function ApplicationArea() {
   const [unhandledError, setUnhandledError] = useState(null);
 
   useEffect(() => {
+    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     if (currentRoute && currentRoute.title) {
+      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       document.title = currentRoute.title;
     }
   }, [currentRoute]);
 
   useEffect(() => {
-    function globalErrorHandler(event) {
+    function globalErrorHandler(event: any) {
       event.preventDefault();
       setUnhandledError(event.error);
     }
@@ -33,5 +35,6 @@ export default function ApplicationArea() {
     return <ErrorMessage error={unhandledError} />;
   }
 
+  // @ts-expect-error ts-migrate(2322) FIXME: Type 'RouteItem[]' is not assignable to type '{ pa... Remove this comment to see the full error message
   return <Router routes={routes.items} onRouteChange={setCurrentRoute} />;
 }

client/app/components/ApplicationArea/navigateTo.ts

@@ -4,7 +4,7 @@ import { stripBase } from "./Router";
 
 // When `replace` is set to `true` - it will just replace current URL
 // without reloading current page (router will skip this location change)
-export default function navigateTo(href, replace = false) {
+export default function navigateTo(href: any, replace = false) {
   // Allow calling chain to roll up, and then navigate
   setTimeout(() => {
     const isExternal = stripBase(href) === false;

client/app/components/ApplicationArea/routeWithApiKeySession.tsx

@@ -1,8 +1,14 @@
 import React, { useEffect, useState, useContext } from "react";
-import PropTypes from "prop-types";
 import { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
 import { Auth, clientConfig } from "@/services/auth";
 
+type OwnProps = {
+    apiKey: string;
+    renderChildren?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof ApiKeySessionWrapper.defaultProps;
+
 // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
 // that contains:
 // - `currentRoute.routeParams`
@@ -10,7 +16,8 @@ import { Auth, clientConfig } from "@/services/auth";
 // - `onError` field which is a `handleError` method of nearest error boundary
 // - `apiKey` field
 
-function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }) {
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'currentRoute' does not exist on type 'Pr... Remove this comment to see the full error message
+function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }: Props) {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const { handleError } = useContext(ErrorBoundaryContext);
 
@@ -33,6 +40,7 @@ function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }) {
     };
   }, [apiKey]);
 
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'disablePublicUrls' does not exist on typ... Remove this comment to see the full error message
   if (!isAuthenticated || clientConfig.disablePublicUrls) {
     return null;
   }
@@ -44,20 +52,18 @@ function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }) {
   );
 }
 
-ApiKeySessionWrapper.propTypes = {
-  apiKey: PropTypes.string.isRequired,
-  renderChildren: PropTypes.func,
-};
-
 ApiKeySessionWrapper.defaultProps = {
   renderChildren: () => null,
 };
 
-export default function routeWithApiKeySession({ render, getApiKey, ...rest }) {
+export default function routeWithApiKeySession({
+  render,
+  getApiKey,
+  ...rest
+}: any) {
   return {
     ...rest,
-    render: currentRoute => (
-      <ApiKeySessionWrapper apiKey={getApiKey(currentRoute)} currentRoute={currentRoute} renderChildren={render} />
-    ),
+    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ apiKey: any; currentRoute: any; renderChil... Remove this comment to see the full error message
+    render: (currentRoute: any) => <ApiKeySessionWrapper apiKey={getApiKey(currentRoute)} currentRoute={currentRoute} renderChildren={render} />,
   };
 }

client/app/components/ApplicationArea/routeWithUserSession.tsx

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

client/app/components/BeaconConsent.tsx

@@ -13,16 +13,18 @@ const Text = Typography.Text;
 function BeaconConsent() {
   const [hide, setHide] = useState(false);
 
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'showBeaconConsentMessage' does not exist... Remove this comment to see the full error message
   if (!clientConfig.showBeaconConsentMessage || hide) {
     return null;
   }
 
   const hideConsentCard = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'showBeaconConsentMessage' does not exist... Remove this comment to see the full error message
     clientConfig.showBeaconConsentMessage = false;
     setHide(true);
   };
 
-  const confirmConsent = confirm => {
+  const confirmConsent = (confirm: any) => {
     let message = "🙏 Thank you.";
 
     if (!confirm) {
@@ -39,11 +41,13 @@ function BeaconConsent() {
 
   return (
     <DynamicComponent name="BeaconConsent">
+      {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
       <div className="m-t-10 tiled">
         <Card
           title={
             <>
               Would you be ok with sharing anonymous usage data with the Redash team?{" "}
+              {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'. */}
               <HelpTrigger type="USAGE_DATA_SHARING" />
             </>
           }

client/app/components/BigMessage.jsx

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

client/app/components/BigMessage.tsx

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

client/app/components/CodeBlock.less

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

client/app/components/CodeBlock.tsx

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

client/app/components/Collapse.tsx

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

client/app/components/CreateSourceDialog.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { isEmpty, toUpper, includes, get, uniqueId } from "lodash";
+import { isEmpty, toUpper, includes, get } from "lodash";
 import Button from "antd/lib/button";
 import List from "antd/lib/list";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Steps from "antd/lib/steps";
+// @ts-expect-error ts-migrate(6133) FIXME: 'DialogPropType' is declared but its value is neve... Remove this comment to see the full error message
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import Link from "@/components/Link";
 import { PreviewCard } from "@/components/PreviewCard";
@@ -23,15 +23,21 @@ const StepEnum = {
   DONE: 2,
 };
 
-class CreateSourceDialog extends React.Component {
-  static propTypes = {
-    dialog: DialogPropType.isRequired,
-    types: PropTypes.arrayOf(PropTypes.object),
-    sourceType: PropTypes.string.isRequired,
-    imageFolder: PropTypes.string.isRequired,
-    helpTriggerPrefix: PropTypes.string,
-    onCreate: PropTypes.func.isRequired,
-  };
+type OwnProps = {
+    // @ts-expect-error ts-migrate(2749) FIXME: 'DialogPropType' refers to a value, but is being u... Remove this comment to see the full error message
+    dialog: DialogPropType;
+    types?: any[];
+    sourceType: string;
+    imageFolder: string;
+    helpTriggerPrefix?: string;
+    onCreate: (...args: any[]) => any;
+};
+
+type State = any;
+
+type Props = OwnProps & typeof CreateSourceDialog.defaultProps;
+
+class CreateSourceDialog extends React.Component<Props, State> {
 
   static defaultProps = {
     types: [],
@@ -45,9 +51,7 @@ class CreateSourceDialog extends React.Component {
     currentStep: StepEnum.SELECT_TYPE,
   };
 
-  formId = uniqueId("sourceForm");
-
-  selectType = selectedType => {
+  selectType = (selectedType: any) => {
     this.setState({ selectedType, currentStep: StepEnum.CONFIGURE_IT });
   };
 
@@ -57,17 +61,19 @@ class CreateSourceDialog extends React.Component {
     }
   };
 
-  createSource = (values, successCallback, errorCallback) => {
+  createSource = (values: any, successCallback: any, errorCallback: any) => {
     const { selectedType, savingSource } = this.state;
     if (!savingSource) {
       this.setState({ savingSource: true, currentStep: StepEnum.DONE });
       this.props
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'onCreate' does not exist on type 'never'... Remove this comment to see the full error message
         .onCreate(selectedType, values)
-        .then(data => {
+        .then((data: any) => {
           successCallback("Saved.");
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'dialog' does not exist on type 'never'.
           this.props.dialog.close({ success: true, data });
         })
-        .catch(error => {
+        .catch((error: any) => {
           this.setState({ savingSource: false, currentStep: StepEnum.CONFIGURE_IT });
           errorCallback(get(error, "response.data.message", "Failed saving."));
         });
@@ -77,14 +83,14 @@ class CreateSourceDialog extends React.Component {
   renderTypeSelector() {
     const { types } = this.props;
     const { searchText } = this.state;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'filter' does not exist on type 'never'.
     const filteredTypes = types.filter(
-      type => isEmpty(searchText) || includes(type.name.toLowerCase(), searchText.toLowerCase())
+      (type: any) => isEmpty(searchText) || includes(type.name.toLowerCase(), searchText.toLowerCase())
     );
     return (
       <div className="m-t-10">
         <Search
           placeholder="Search..."
-          aria-label="Search"
           onChange={e => this.setState({ searchText: e.target.value })}
           autoFocus
           data-test="SearchSource"
@@ -103,23 +109,30 @@ class CreateSourceDialog extends React.Component {
   renderForm() {
     const { imageFolder, helpTriggerPrefix } = this.props;
     const { selectedType } = this.state;
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'null' is not assignable to param... Remove this comment to see the full error message
     const fields = helper.getFields(selectedType);
+    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     const helpTriggerType = `${helpTriggerPrefix}${toUpper(selectedType.type)}`;
     return (
       <div>
         <div className="d-flex justify-content-center align-items-center">
+          {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
           <img className="p-5" src={`${imageFolder}/${selectedType.type}.png`} alt={selectedType.name} width="48" />
+          {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
           <h4 className="m-0">{selectedType.name}</h4>
         </div>
         <div className="text-right">
+          {/* @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
           {HELP_TRIGGER_TYPES[helpTriggerType] && (
+            // @ts-expect-error ts-migrate(2746) FIXME: This JSX tag's 'children' prop expects a single ch... Remove this comment to see the full error message
             <HelpTrigger className="f-13" type={helpTriggerType}>
-              Setup Instructions <i className="fa fa-question-circle" aria-hidden="true" />
-              <span className="sr-only">(help)</span>
+              Setup Instructions <i className="fa fa-question-circle" />
             </HelpTrigger>
           )}
         </div>
-        <DynamicForm id={this.formId} fields={fields} onSubmit={this.createSource} feedbackIcons hideSubmitButton />
+        {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'. */}
+        <DynamicForm id="sourceForm" fields={fields} onSubmit={this.createSource} feedbackIcons hideSubmitButton />
+        {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
         {selectedType.type === "databricks" && (
           <small>
             By using the Databricks Data Source you agree to the Databricks JDBC/ODBC{" "}
@@ -133,7 +146,7 @@ class CreateSourceDialog extends React.Component {
     );
   }
 
-  renderItem(item) {
+  renderItem(item: any) {
     const { imageFolder } = this.props;
     return (
       <List.Item className="p-l-10 p-r-10 clickable" onClick={() => this.selectType(item)}>
@@ -143,7 +156,8 @@ class CreateSourceDialog extends React.Component {
           roundedImage={false}
           data-test="PreviewItem"
           data-test-type={item.type}>
-          <i className="fa fa-angle-double-right" aria-hidden="true" />
+          {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'null | u... Remove this comment to see the full error message */}
+          <i className="fa fa-angle-double-right" />
         </PreviewCard>
       </List.Item>
     );
@@ -154,11 +168,13 @@ class CreateSourceDialog extends React.Component {
     const { dialog, sourceType } = this.props;
     return (
       <Modal
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'never'.
         {...dialog.props}
         title={`Create a New ${sourceType}`}
         footer={
           currentStep === StepEnum.SELECT_TYPE
             ? [
+                // @ts-expect-error ts-migrate(2339) FIXME: Property 'dismiss' does not exist on type 'never'.
                 <Button key="cancel" onClick={() => dialog.dismiss()} data-test="CreateSourceCancelButton">
                   Cancel
                 </Button>,
@@ -173,7 +189,7 @@ class CreateSourceDialog extends React.Component {
                 <Button
                   key="submit"
                   htmlType="submit"
-                  form={this.formId}
+                  form="sourceForm"
                   type="primary"
                   loading={savingSource}
                   data-test="CreateSourceSaveButton">

client/app/components/DateInput.jsx

@@ -1,43 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import DatePicker from "antd/lib/date-picker";
-import { clientConfig } from "@/services/auth";
-import { Moment } from "@/components/proptypes";
-
-const DateInput = React.forwardRef(({ defaultValue, value, onSelect, className, ...props }, ref) => {
-  const format = clientConfig.dateFormat || "YYYY-MM-DD";
-  const additionalAttributes = {};
-  if (defaultValue && defaultValue.isValid()) {
-    additionalAttributes.defaultValue = defaultValue;
-  }
-  if (value === null || (value && value.isValid())) {
-    additionalAttributes.value = value;
-  }
-  return (
-    <DatePicker
-      ref={ref}
-      className={className}
-      {...additionalAttributes}
-      format={format}
-      placeholder="Select Date"
-      onChange={onSelect}
-      {...props}
-    />
-  );
-});
-
-DateInput.propTypes = {
-  defaultValue: Moment,
-  value: Moment,
-  onSelect: PropTypes.func,
-  className: PropTypes.string,
-};
-
-DateInput.defaultProps = {
-  defaultValue: null,
-  value: undefined,
-  onSelect: () => {},
-  className: "",
-};
-
-export default DateInput;

client/app/components/DateInput.tsx

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

client/app/components/DateRangeInput.jsx

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

client/app/components/DateRangeInput.tsx

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

client/app/components/DateTimeInput.jsx

@@ -1,46 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import DatePicker from "antd/lib/date-picker";
-import { clientConfig } from "@/services/auth";
-import { Moment } from "@/components/proptypes";
-
-const DateTimeInput = React.forwardRef(({ defaultValue, value, withSeconds, onSelect, className, ...props }, ref) => {
-  const format = (clientConfig.dateFormat || "YYYY-MM-DD") + (withSeconds ? " HH:mm:ss" : " HH:mm");
-  const additionalAttributes = {};
-  if (defaultValue && defaultValue.isValid()) {
-    additionalAttributes.defaultValue = defaultValue;
-  }
-  if (value === null || (value && value.isValid())) {
-    additionalAttributes.value = value;
-  }
-  return (
-    <DatePicker
-      ref={ref}
-      className={className}
-      showTime
-      {...additionalAttributes}
-      format={format}
-      placeholder="Select Date and Time"
-      onChange={onSelect}
-      {...props}
-    />
-  );
-});
-
-DateTimeInput.propTypes = {
-  defaultValue: Moment,
-  value: Moment,
-  withSeconds: PropTypes.bool,
-  onSelect: PropTypes.func,
-  className: PropTypes.string,
-};
-
-DateTimeInput.defaultProps = {
-  defaultValue: null,
-  value: undefined,
-  withSeconds: false,
-  onSelect: () => {},
-  className: "",
-};
-
-export default DateTimeInput;

client/app/components/DateTimeInput.tsx

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

client/app/components/DateTimeRangeInput.tsx

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

client/app/components/DialogWrapper.tsx

@@ -3,6 +3,17 @@ import React from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 
+type DialogPropType = {
+    props: {
+        visible?: boolean;
+        onOk?: (...args: any[]) => any;
+        onCancel?: (...args: any[]) => any;
+        afterClose?: (...args: any[]) => any;
+    };
+    close: (...args: any[]) => any;
+    dismiss: (...args: any[]) => any;
+};
+
 /**
   Wrapper for dialogs based on Ant's <Modal> component.
 
@@ -75,7 +86,7 @@ import ReactDOM from "react-dom";
       );
     }
 
-  4. wrap your component and export it:
+  4. wrap your component and it:
 
     export default wrapDialog(YourComponent).
 
@@ -96,18 +107,20 @@ import ReactDOM from "react-dom";
     }
 */
 
-export const DialogPropType = PropTypes.shape({
-  props: PropTypes.shape({
-    visible: PropTypes.bool,
-    onOk: PropTypes.func,
-    onCancel: PropTypes.func,
-    afterClose: PropTypes.func,
-  }).isRequired,
-  close: PropTypes.func.isRequired,
-  dismiss: PropTypes.func.isRequired,
+// @ts-expect-error ts-migrate(2322) FIXME: Type 'Requireable<InferProps<{ props: Validator<In... Remove this comment to see the full error message
+export const DialogPropType: PropTypes.Requireable<DialogPropType> = PropTypes.shape({
+    props: PropTypes.shape({
+        visible: PropTypes.bool,
+        onOk: PropTypes.func,
+        onCancel: PropTypes.func,
+        afterClose: PropTypes.func,
+    }).isRequired,
+    close: PropTypes.func.isRequired,
+    dismiss: PropTypes.func.isRequired,
 });
 
-function openDialog(DialogComponent, props) {
+
+function openDialog(DialogComponent: any, props: any) {
   const dialog = {
     props: {
       visible: true,
@@ -121,7 +134,7 @@ function openDialog(DialogComponent, props) {
     dismiss: () => {},
   };
 
-  let pendingCloseTask = null;
+  let pendingCloseTask: any = null;
 
   const handlers = {
     onClose: () => {},
@@ -143,7 +156,7 @@ function openDialog(DialogComponent, props) {
     }, 10);
   }
 
-  function processDialogClose(result, setAdditionalDialogProps) {
+  function processDialogClose(result: any, setAdditionalDialogProps: any) {
     dialog.props.okButtonProps = { disabled: true };
     dialog.props.cancelButtonProps = { disabled: true };
     setAdditionalDialogProps();
@@ -160,9 +173,11 @@ function openDialog(DialogComponent, props) {
       });
   }
 
-  function closeDialog(result) {
+  function closeDialog(result: any) {
     if (!pendingCloseTask) {
+      // @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
       pendingCloseTask = processDialogClose(handlers.onClose(result), () => {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'loading' does not exist on type '{}'.
         dialog.props.okButtonProps.loading = true;
       }).finally(() => {
         pendingCloseTask = null;
@@ -171,9 +186,11 @@ function openDialog(DialogComponent, props) {
     return pendingCloseTask;
   }
 
-  function dismissDialog(result) {
+  function dismissDialog(result: any) {
     if (!pendingCloseTask) {
+      // @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
       pendingCloseTask = processDialogClose(handlers.onDismiss(result), () => {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'loading' does not exist on type '{}'.
         dialog.props.cancelButtonProps.loading = true;
       }).finally(() => {
         pendingCloseTask = null;
@@ -182,26 +199,30 @@ function openDialog(DialogComponent, props) {
     return pendingCloseTask;
   }
 
+  // @ts-expect-error ts-migrate(2322) FIXME: Type '(result: any) => any' is not assignable to t... Remove this comment to see the full error message
   dialog.props.onOk = closeDialog;
+  // @ts-expect-error ts-migrate(2322) FIXME: Type '(result: any) => any' is not assignable to t... Remove this comment to see the full error message
   dialog.props.onCancel = dismissDialog;
   dialog.props.afterClose = destroyDialog;
+  // @ts-expect-error ts-migrate(2322) FIXME: Type '(result: any) => any' is not assignable to t... Remove this comment to see the full error message
   dialog.close = closeDialog;
+  // @ts-expect-error ts-migrate(2322) FIXME: Type '(result: any) => any' is not assignable to t... Remove this comment to see the full error message
   dialog.dismiss = dismissDialog;
 
   const result = {
     close: closeDialog,
     dismiss: dismissDialog,
-    update: newProps => {
+    update: (newProps: any) => {
       props = { ...props, ...newProps };
       render();
     },
-    onClose: handler => {
+    onClose: (handler: any) => {
       if (isFunction(handler)) {
         handlers.onClose = handler;
       }
       return result;
     },
-    onDismiss: handler => {
+    onDismiss: (handler: any) => {
       if (isFunction(handler)) {
         handlers.onDismiss = handler;
       }
@@ -214,14 +235,9 @@ function openDialog(DialogComponent, props) {
   return result;
 }
 
-export function wrap(DialogComponent) {
+export function wrap(DialogComponent: any) {
   return {
     Component: DialogComponent,
-    showModal: props => openDialog(DialogComponent, props),
+    showModal: (props: any) => openDialog(DialogComponent, props),
   };
 }
-
-export default {
-  DialogPropType,
-  wrap,
-};

client/app/components/DynamicComponent.tsx

@@ -1,32 +1,35 @@
 import { isFunction, isString, isUndefined } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 
 const componentsRegistry = new Map();
 const activeInstances = new Set();
 
-export function registerComponent(name, component) {
+export function registerComponent(name: any, component: any) {
   if (isString(name) && name !== "") {
     componentsRegistry.set(name, isFunction(component) ? component : null);
     // Refresh active DynamicComponent instances which use this component
     activeInstances.forEach(dynamicComponent => {
+      // @ts-expect-error ts-migrate(2571) FIXME: Object is of type 'unknown'.
       if (dynamicComponent.props.name === name) {
+        // @ts-expect-error ts-migrate(2571) FIXME: Object is of type 'unknown'.
         dynamicComponent.forceUpdate();
       }
     });
   }
 }
 
-export function unregisterComponent(name) {
+export function unregisterComponent(name: any) {
   registerComponent(name, null);
 }
 
-export default class DynamicComponent extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    fallback: PropTypes.node,
-    children: PropTypes.node,
-  };
+type OwnProps = {
+    name: string;
+    fallback?: React.ReactNode;
+};
+
+type Props = OwnProps & typeof DynamicComponent.defaultProps;
+
+export default class DynamicComponent extends React.Component<Props> {
 
   static defaultProps = {
     children: null,

client/app/components/EditInPlace.tsx

@@ -1,21 +1,25 @@
 import { trim } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 import cx from "classnames";
 import Input from "antd/lib/input";
 
-export default class EditInPlace extends React.Component {
-  static propTypes = {
-    ignoreBlanks: PropTypes.bool,
-    isEditable: PropTypes.bool,
-    placeholder: PropTypes.string,
-    value: PropTypes.string,
-    onDone: PropTypes.func.isRequired,
-    onStopEditing: PropTypes.func,
-    multiline: PropTypes.bool,
-    editorProps: PropTypes.object,
-    defaultEditing: PropTypes.bool,
-  };
+type OwnProps = {
+    ignoreBlanks?: boolean;
+    isEditable?: boolean;
+    placeholder?: string;
+    value?: string;
+    onDone: (...args: any[]) => any;
+    onStopEditing?: (...args: any[]) => any;
+    multiline?: boolean;
+    editorProps?: any;
+    defaultEditing?: boolean;
+};
+
+type State = any;
+
+type Props = OwnProps & typeof EditInPlace.defaultProps;
+
+export default class EditInPlace extends React.Component<Props, State> {
 
   static defaultProps = {
     ignoreBlanks: false,
@@ -28,14 +32,14 @@ export default class EditInPlace extends React.Component {
     defaultEditing: false,
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.state = {
       editing: props.defaultEditing,
     };
   }
 
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate(_: Props, prevState: State) {
     if (!this.state.editing && prevState.editing) {
       this.props.onStopEditing();
     }
@@ -47,7 +51,7 @@ export default class EditInPlace extends React.Component {
     }
   };
 
-  stopEditing = currentValue => {
+  stopEditing = (currentValue: any) => {
     const newValue = trim(currentValue);
     const ignorableBlank = this.props.ignoreBlanks && newValue === "";
     if (!ignorableBlank && newValue !== this.props.value) {
@@ -56,7 +60,7 @@ export default class EditInPlace extends React.Component {
     this.setState({ editing: false });
   };
 
-  handleKeyDown = event => {
+  handleKeyDown = (event: any) => {
     if (event.keyCode === 13 && !event.shiftKey) {
       event.preventDefault();
       this.stopEditing(event.target.value);
@@ -86,8 +90,7 @@ export default class EditInPlace extends React.Component {
     return (
       <InputComponent
         defaultValue={value}
-        aria-label="Editing"
-        onBlur={e => this.stopEditing(e.target.value)}
+        onBlur={(e: any) => this.stopEditing(e.target.value)}
         onKeyDown={this.handleKeyDown}
         autoFocus
         {...editorProps}
@@ -97,6 +100,7 @@ export default class EditInPlace extends React.Component {
 
   render() {
     return (
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Reado... Remove this comment to see the full error message
       <span className={cx("edit-in-place", { active: this.state.editing }, this.props.className)}>
         {this.state.editing ? this.renderEdit() : this.renderNormal()}
       </span>

client/app/components/EditParameterSettingsDialog.tsx

@@ -1,6 +1,5 @@
 import { includes, words, capitalize, clone, isNull } from "lodash";
 import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import Checkbox from "antd/lib/checkbox";
 import Modal from "antd/lib/modal";
 import Form from "antd/lib/form";
@@ -8,28 +7,36 @@ import Button from "antd/lib/button";
 import Select from "antd/lib/select";
 import Input from "antd/lib/input";
 import Divider from "antd/lib/divider";
+// @ts-expect-error ts-migrate(6133) FIXME: 'DialogPropType' is declared but its value is neve... Remove this comment to see the full error message
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import 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 } };
 
-function getDefaultTitle(text) {
+function getDefaultTitle(text: any) {
   return capitalize(words(text).join(" ")); // humanize
 }
 
-function isTypeDateRange(type) {
+function isTypeDateRange(type: any) {
   return /-range/.test(type);
 }
 
-function joinExampleList(multiValuesOptions) {
+function joinExampleList(multiValuesOptions: any) {
   const { prefix, suffix } = multiValuesOptions;
   return ["value1", "value2", "value3"].map(value => `${prefix}${value}${suffix}`).join(",");
 }
 
-function NameInput({ name, type, onChange, existingNames, setValidation }) {
+type NameInputProps = {
+    name: string;
+    onChange: (...args: any[]) => any;
+    existingNames: string[];
+    setValidation: (...args: any[]) => any;
+    type: string;
+};
+
+function NameInput({ name, type, onChange, existingNames, setValidation }: NameInputProps) {
   let helpText = "";
   let validateStatus = "";
 
@@ -42,6 +49,7 @@ function NameInput({ name, type, onChange, existingNames, setValidation }) {
     validateStatus = "error";
   } else {
     if (isTypeDateRange(type)) {
+      // @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       helpText = (
         <React.Fragment>
           Appears in query as{" "}
@@ -53,21 +61,23 @@ function NameInput({ name, type, onChange, existingNames, setValidation }) {
   }
 
   return (
+    // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type '"" | "err... Remove this comment to see the full error message
     <Form.Item required label="Keyword" help={helpText} validateStatus={validateStatus} {...formItemProps}>
       <Input onChange={e => onChange(e.target.value)} autoFocus />
     </Form.Item>
   );
 }
 
-NameInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  existingNames: PropTypes.arrayOf(PropTypes.string).isRequired,
-  setValidation: PropTypes.func.isRequired,
-  type: PropTypes.string.isRequired,
+type OwnEditParameterSettingsDialogProps = {
+    parameter: any;
+    // @ts-expect-error ts-migrate(2749) FIXME: 'DialogPropType' refers to a value, but is being u... Remove this comment to see the full error message
+    dialog: DialogPropType;
+    existingParams?: string[];
 };
 
-function EditParameterSettingsDialog(props) {
+type EditParameterSettingsDialogProps = OwnEditParameterSettingsDialogProps & typeof EditParameterSettingsDialog.defaultProps;
+
+function EditParameterSettingsDialog(props: EditParameterSettingsDialogProps) {
   const [param, setParam] = useState(clone(props.parameter));
   const [isNameValid, setIsNameValid] = useState(true);
   const [initialQuery, setInitialQuery] = useState();
@@ -78,6 +88,7 @@ function EditParameterSettingsDialog(props) {
   useEffect(() => {
     const queryId = props.parameter.queryId;
     if (queryId) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'get' does not exist on type 'typeof Quer... Remove this comment to see the full error message
       Query.get({ id: queryId }).then(setInitialQuery);
     }
   }, [props.parameter.queryId]);
@@ -112,8 +123,6 @@ function EditParameterSettingsDialog(props) {
     props.dialog.close(param);
   }
 
-  const paramFormId = useUniqueId("paramForm");
-
   return (
     <Modal
       {...props.dialog.props}
@@ -128,12 +137,12 @@ function EditParameterSettingsDialog(props) {
           htmlType="submit"
           disabled={!isFulfilled()}
           type="primary"
-          form={paramFormId}
+          form="paramForm"
           data-test="SaveParameterSettings">
           {isNew ? "Add Parameter" : "OK"}
         </Button>,
       ]}>
-      <Form layout="horizontal" onFinish={onConfirm} id={paramFormId}>
+      <Form layout="horizontal" onFinish={onConfirm} id="paramForm">
         {isNew && (
           <NameInput
             name={param.name}
@@ -160,6 +169,7 @@ function EditParameterSettingsDialog(props) {
             </Option>
             <Option value="enum">Dropdown List</Option>
             <Option value="query">Query Based Dropdown List</Option>
+            {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'value' is missing in type '{ children: E... Remove this comment to see the full error message */}
             <Option disabled key="dv1">
               <Divider className="select-option-divider" />
             </Option>
@@ -170,6 +180,7 @@ function EditParameterSettingsDialog(props) {
               Date and Time
             </Option>
             <Option value="datetime-with-seconds">Date and Time (with seconds)</Option>
+            {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'value' is missing in type '{ children: E... Remove this comment to see the full error message */}
             <Option disabled key="dv2">
               <Divider className="select-option-divider" />
             </Option>
@@ -192,8 +203,11 @@ function EditParameterSettingsDialog(props) {
         {param.type === "query" && (
           <Form.Item label="Query" help="Select query to load dropdown values from" {...formItemProps}>
             <QuerySelector
+              // @ts-expect-error ts-migrate(2322) FIXME: Type 'undefined' is not assignable to type 'never'... Remove this comment to see the full error message
               selectedQuery={initialQuery}
-              onChange={q => setParam({ ...param, queryId: q && q.id })}
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '(q: any) => void' is not assignable to type ... Remove this comment to see the full error message
+              onChange={(q: any) => setParam({ ...param, queryId: q && q.id })}
+              // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'.
               type="select"
             />
           </Form.Item>
@@ -254,12 +268,6 @@ function EditParameterSettingsDialog(props) {
   );
 }
 
-EditParameterSettingsDialog.propTypes = {
-  parameter: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  dialog: DialogPropType.isRequired,
-  existingParams: PropTypes.arrayOf(PropTypes.string),
-};
-
 EditParameterSettingsDialog.defaultProps = {
   existingParams: [],
 };

client/app/components/EditVisualizationButton/QueryControlDropdown.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Button from "antd/lib/button";
-import PlainButton from "@/components/PlainButton";
 import { clientConfig } from "@/services/auth";
 
 import PlusCircleFilledIcon from "@ant-design/icons/PlusCircleFilled";
@@ -14,23 +12,35 @@ import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
 
 import QueryResultsLink from "./QueryResultsLink";
 
-export default function QueryControlDropdown(props) {
+type OwnProps = {
+    query: any;
+    queryResult?: any;
+    queryExecuting: boolean;
+    showEmbedDialog: (...args: any[]) => any;
+    embed?: boolean;
+    apiKey?: string;
+    selectedTab?: string | number;
+    openAddToDashboardForm: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof QueryControlDropdown.defaultProps;
+
+export default function QueryControlDropdown(props: Props) {
   const menu = (
     <Menu>
       {!props.query.isNew() && (!props.query.is_draft || !props.query.is_archived) && (
         <Menu.Item>
-          <PlainButton onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
+          <a target="_self" onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
             <PlusCircleFilledIcon /> Add to Dashboard
-          </PlainButton>
+          </a>
         </Menu.Item>
       )}
+      {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'disablePublicUrls' does not exist on typ... Remove this comment to see the full error message */}
       {!clientConfig.disablePublicUrls && !props.query.isNew() && (
         <Menu.Item>
-          <PlainButton
-            onClick={() => props.showEmbedDialog(props.query, props.selectedTab)}
-            data-test="ShowEmbedDialogButton">
+          <a onClick={() => props.showEmbedDialog(props.query, props.selectedTab)} data-test="ShowEmbedDialogButton">
             <ShareAltOutlinedIcon /> Embed Elsewhere
-          </PlainButton>
+          </a>
         </Menu.Item>
       )}
       <Menu.Item>
@@ -78,17 +88,6 @@ export default function QueryControlDropdown(props) {
   );
 }
 
-QueryControlDropdown.propTypes = {
-  query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  queryResult: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  queryExecuting: PropTypes.bool.isRequired,
-  showEmbedDialog: PropTypes.func.isRequired,
-  embed: PropTypes.bool,
-  apiKey: PropTypes.string,
-  selectedTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  openAddToDashboardForm: PropTypes.func.isRequired,
-};
-
 QueryControlDropdown.defaultProps = {
   queryResult: {},
   embed: false,

client/app/components/EditVisualizationButton/QueryResultsLink.tsx

@@ -1,8 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Link from "@/components/Link";
 
-export default function QueryResultsLink(props) {
+type OwnProps = {
+    query: any;
+    queryResult?: any;
+    fileType?: string;
+    disabled: boolean;
+    embed?: boolean;
+    apiKey?: string;
+    children: React.ReactNode[] | React.ReactNode;
+};
+
+type Props = OwnProps & typeof QueryResultsLink.defaultProps;
+
+export default function QueryResultsLink(props: Props) {
   let href = "";
 
   const { query, queryResult, fileType } = props;
@@ -24,16 +35,6 @@ export default function QueryResultsLink(props) {
   );
 }
 
-QueryResultsLink.propTypes = {
-  query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  queryResult: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  fileType: PropTypes.string,
-  disabled: PropTypes.bool.isRequired,
-  embed: PropTypes.bool,
-  apiKey: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-};
-
 QueryResultsLink.defaultProps = {
   queryResult: {},
   fileType: "csv",

client/app/components/EditVisualizationButton/index.tsx

@@ -1,9 +1,15 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import FormOutlinedIcon from "@ant-design/icons/FormOutlined";
 
-export default function EditVisualizationButton(props) {
+type OwnProps = {
+    openVisualizationEditor: (...args: any[]) => any;
+    selectedTab?: string | number;
+};
+
+type Props = OwnProps & typeof EditVisualizationButton.defaultProps;
+
+export default function EditVisualizationButton(props: Props) {
   return (
     <Button
       data-test="EditVisualization"
@@ -15,11 +21,6 @@ export default function EditVisualizationButton(props) {
   );
 }
 
-EditVisualizationButton.propTypes = {
-  openVisualizationEditor: PropTypes.func.isRequired,
-  selectedTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
 EditVisualizationButton.defaultProps = {
   selectedTab: "",
 };

client/app/components/EmailSettingsWarning.tsx

@@ -1,14 +1,21 @@
 import React from "react";
-import PropTypes from "prop-types";
+import cx from "classnames";
 import { clientConfig, currentUser } from "@/services/auth";
-import Tooltip from "@/components/Tooltip";
+import Tooltip from "antd/lib/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");
+type OwnProps = {
+    featureName: string;
+    className?: string;
+    mode?: "alert" | "icon";
+    adminOnly?: boolean;
+};
 
+type Props = OwnProps & typeof EmailSettingsWarning.defaultProps;
+
+export default function EmailSettingsWarning({ featureName, className, mode, adminOnly }: Props) {
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'mailSettingsMissing' does not exist on t... Remove this comment to see the full error message
   if (!clientConfig.mailSettingsMissing) {
     return null;
   }
@@ -18,19 +25,17 @@ export default function EmailSettingsWarning({ featureName, className, mode, adm
   }
 
   const message = (
-    <span id={messageDescriptionId}>
+    <span>
       Your mail server isn&apos;t configured correctly, and is needed for {featureName} to work.{" "}
+      {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'. */}
       <HelpTrigger type="MAIL_CONFIG" className="f-inherit" />
     </span>
   );
 
   if (mode === "icon") {
     return (
-      <Tooltip title={message} placement="topRight" arrowPointAtCenter>
-        {/* 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 title={message}>
+        <i className={cx("fa fa-exclamation-triangle", className)} />
       </Tooltip>
     );
   }
@@ -38,13 +43,6 @@ export default function EmailSettingsWarning({ featureName, className, mode, adm
   return <Alert message={message} type="error" className={className} />;
 }
 
-EmailSettingsWarning.propTypes = {
-  featureName: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  mode: PropTypes.oneOf(["alert", "icon"]),
-  adminOnly: PropTypes.bool,
-};
-
 EmailSettingsWarning.defaultProps = {
   className: null,
   mode: "alert",

client/app/components/FavoritesControl.tsx

@@ -1,20 +1,21 @@
 import React from "react";
-import PropTypes from "prop-types";
-import PlainButton from "@/components/PlainButton";
 
-export default class FavoritesControl extends React.Component {
-  static propTypes = {
-    item: PropTypes.shape({
-      is_favorite: PropTypes.bool.isRequired,
-    }).isRequired,
-    onChange: PropTypes.func,
-  };
+type OwnProps = {
+    item: {
+        is_favorite: boolean;
+    };
+    onChange?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof FavoritesControl.defaultProps;
+
+export default class FavoritesControl extends React.Component<Props> {
 
   static defaultProps = {
     onChange: () => {},
   };
 
-  toggleItem(event, item, callback) {
+  toggleItem(event: any, item: any, callback: any) {
     const action = item.is_favorite ? item.unfavorite.bind(item) : item.favorite.bind(item);
     const savedIsFavorite = item.is_favorite;
 
@@ -30,13 +31,12 @@ 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 (
-      <PlainButton
+      <a
         title={title}
-        aria-label={title}
-        className="favorites-control btn-favorite"
+        className="favorites-control btn-favourite"
         onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
-      </PlainButton>
+      </a>
     );
   }
 }

client/app/components/Filters.tsx

@@ -8,18 +8,28 @@ import { formatColumnValue } from "@/lib/utils";
 const ALL_VALUES = "###Redash::Filters::SelectAll###";
 const NONE_VALUES = "###Redash::Filters::Clear###";
 
-export const FilterType = PropTypes.shape({
-  name: PropTypes.string.isRequired,
-  friendlyName: PropTypes.string.isRequired,
-  multiple: PropTypes.bool,
-  current: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
-  values: PropTypes.arrayOf(PropTypes.any).isRequired,
+type FilterType = {
+    name: string;
+    friendlyName: string;
+    multiple?: boolean;
+    current?: any | any[];
+    values: any[];
+};
+
+// @ts-expect-error ts-migrate(2322) FIXME: Type 'Requireable<InferProps<{ name: Validator<str... Remove this comment to see the full error message
+const FilterType: PropTypes.Requireable<FilterType> = PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    friendlyName: PropTypes.string.isRequired,
+    multiple: PropTypes.bool,
+    current: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
+    values: PropTypes.arrayOf(PropTypes.any).isRequired,
 });
+export { FilterType };
 
 export const FiltersType = PropTypes.arrayOf(FilterType);
 
-function createFilterChangeHandler(filters, onChange) {
-  return (filter, values) => {
+function createFilterChangeHandler(filters: any, onChange: any) {
+  return (filter: any, values: any) => {
     if (isArray(values)) {
       values = map(values, value => filter.values[toNumber(value.key)] || value.key);
     } else {
@@ -38,7 +48,7 @@ function createFilterChangeHandler(filters, onChange) {
   };
 }
 
-export function filterData(rows, filters = []) {
+export function filterData(rows: any, filters = []) {
   if (!isArray(rows)) {
     return [];
   }
@@ -49,7 +59,9 @@ export function filterData(rows, filters = []) {
     // "every" field's value should match "some" of corresponding filter's values
     result = result.filter(row =>
       every(filters, filter => {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'name' does not exist on type 'never'.
         const rowValue = row[filter.name];
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'current' does not exist on type 'never'.
         const filterValues = isArray(filter.current) ? filter.current : [filter.current];
         return some(filterValues, filterValue => {
           if (moment.isMoment(rowValue)) {
@@ -66,11 +78,20 @@ export function filterData(rows, filters = []) {
   return result;
 }
 
-function Filters({ filters, onChange }) {
+type OwnProps = {
+    // @ts-expect-error ts-migrate(2749) FIXME: 'FiltersType' refers to a value, but is being used... Remove this comment to see the full error message
+    filters: FiltersType;
+    onChange?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof Filters.defaultProps;
+
+function Filters({ filters, onChange }: Props) {
   if (filters.length === 0) {
     return null;
   }
 
+  // @ts-expect-error ts-migrate(2322) FIXME: Type '(filter: any, values: any) => void' is not a... Remove this comment to see the full error message
   onChange = createFilterChangeHandler(filters, onChange);
 
   return (
@@ -79,6 +100,7 @@ function Filters({ filters, onChange }) {
         <div className="row">
           {map(filters, filter => {
             const options = map(filter.values, (value, index) => (
+              // @ts-expect-error ts-migrate(2741) FIXME: Property 'value' is missing in type '{ children: a... Remove this comment to see the full error message
               <Select.Option key={index}>{formatColumnValue(value, get(filter, "column.type"))}</Select.Option>
             ));
 
@@ -90,6 +112,7 @@ function Filters({ filters, onChange }) {
                 <label>{filter.friendlyName}</label>
                 {options.length === 0 && <Select className="w-100" disabled value="No values" />}
                 {options.length > 0 && (
+                  // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
                   <Select
                     labelInValue
                     className="w-100"
@@ -111,12 +134,14 @@ function Filters({ filters, onChange }) {
                     onChange={values => onChange(filter, values)}>
                     {!filter.multiple && options}
                     {filter.multiple && [
+                      // @ts-expect-error ts-migrate(2741) FIXME: Property 'value' is missing in type '{ children: (... Remove this comment to see the full error message
                       <Select.Option key={NONE_VALUES} data-test="ClearOption">
-                        <i className="fa fa-square-o m-r-5" aria-hidden="true" />
+                        <i className="fa fa-square-o m-r-5" />
                         Clear
                       </Select.Option>,
+                      // @ts-expect-error ts-migrate(2741) FIXME: Property 'value' is missing in type '{ children: (... Remove this comment to see the full error message
                       <Select.Option key={ALL_VALUES} data-test="SelectAllOption">
-                        <i className="fa fa-check-square-o m-r-5" aria-hidden="true" />
+                        <i className="fa fa-check-square-o m-r-5" />
                         Select All
                       </Select.Option>,
                       <Select.OptGroup key="Values" title="Values">
@@ -134,11 +159,6 @@ function Filters({ filters, onChange }) {
   );
 }
 
-Filters.propTypes = {
-  filters: FiltersType.isRequired,
-  onChange: PropTypes.func, // (name, value) => void
-};
-
 Filters.defaultProps = {
   onChange: () => {},
 };

client/app/components/HelpTrigger.less

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

client/app/components/HelpTrigger.tsx

@@ -2,10 +2,9 @@ import { startsWith, get, some, mapValues } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
-import Tooltip from "@/components/Tooltip";
+import Tooltip from "antd/lib/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, { registerComponent } from "@/components/DynamicComponent";
@@ -46,12 +45,22 @@ export const TYPES = mapValues(
     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"],
+    QUERIES: ["/help/user-guide/querying", "Guide: Queries"],
     ALERTS: ["/user-guide/alerts", "Guide: Alerts"],
   },
   ([url, title]) => [DOMAIN + HELP_PATH + url, title]
 );
 
+type OwnProps = {
+    type?: string;
+    href?: string;
+    title?: React.ReactNode;
+    className?: string;
+    showTooltip?: boolean;
+    renderAsLink?: boolean;
+    children?: React.ReactNode;
+};
+
 const HelpTriggerPropTypes = {
   type: PropTypes.string,
   href: PropTypes.string,
@@ -69,10 +78,10 @@ const HelpTriggerDefaultProps = {
   className: null,
   showTooltip: true,
   renderAsLink: false,
-  children: <i className="fa fa-question-circle" aria-hidden="true" />,
+  children: <i className="fa fa-question-circle" />,
 };
 
-export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName = null) {
+export function helpTriggerWithTypes(types: any, allowedDomains = [], drawerClassName = null) {
   return class HelpTrigger extends React.Component {
     static propTypes = {
       ...HelpTriggerPropTypes,
@@ -98,14 +107,18 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
 
     componentWillUnmount() {
       window.removeEventListener("message", this.onPostMessageReceived);
+      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       clearTimeout(this.iframeLoadingTimeout);
     }
 
-    loadIframe = url => {
+    loadIframe = (url: any) => {
+      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       clearTimeout(this.iframeLoadingTimeout);
       this.setState({ loading: true, error: false });
 
+      // @ts-expect-error ts-migrate(2571) FIXME: Object is of type 'unknown'.
       this.iframeRef.current.src = url;
+      // @ts-expect-error ts-migrate(2322) FIXME: Type 'number' is not assignable to type 'null'.
       this.iframeLoadingTimeout = setTimeout(() => {
         this.setState({ error: url, loading: false });
       }, IFRAME_TIMEOUT); // safety
@@ -113,10 +126,11 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
 
     onIframeLoaded = () => {
       this.setState({ loading: false });
+      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       clearTimeout(this.iframeLoadingTimeout);
     };
 
-    onPostMessageReceived = event => {
+    onPostMessageReceived = (event: any) => {
       if (!some(allowedDomains, domain => startsWith(event.origin, domain))) {
         return;
       }
@@ -130,11 +144,13 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
     };
 
     getUrl = () => {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'type' does not exist on type 'Readonly<{... Remove this comment to see the full error message
       const helpTriggerType = get(types, this.props.type);
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'href' does not exist on type 'Readonly<{... Remove this comment to see the full error message
       return helpTriggerType ? helpTriggerType[0] : this.props.href;
     };
 
-    openDrawer = e => {
+    openDrawer = (e: any) => {
       // keep "open in new tab" behavior
       if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
         e.preventDefault();
@@ -144,7 +160,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
       }
     };
 
-    closeDrawer = event => {
+    closeDrawer = (event: any) => {
       if (event) {
         event.preventDefault();
       }
@@ -158,26 +174,24 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
         return null;
       }
 
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'type' does not exist on type 'Readonly<{... Remove this comment to see the full error message
       const tooltip = get(types, `${this.props.type}[1]`, this.props.title);
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Reado... Remove this comment to see the full error message
       const className = cx("help-trigger", this.props.className);
       const url = this.state.currentUrl;
       const isAllowedDomain = some(allowedDomains, domain => startsWith(url || targetUrl, domain));
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'renderAsLink' does not exist on type 'Re... Remove this comment to see the full error message
       const shouldRenderAsLink = this.props.renderAsLink || !isAllowedDomain;
 
       return (
         <React.Fragment>
           <Tooltip
             title={
+              // @ts-expect-error ts-migrate(2339) FIXME: Property 'showTooltip' does not exist on type 'Rea... Remove this comment to see the full error message
               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>
-                    </>
-                  )}
+                  {shouldRenderAsLink && <i className="fa fa-external-link" style={{ marginLeft: 5 }} />}
                 </>
               ) : null
             }>
@@ -204,21 +218,21 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                   <Tooltip title="Open page in a new window" placement="left">
                     {/* eslint-disable-next-line react/jsx-no-target-blank */}
                     <Link href={url} target="_blank">
-                      <i className="fa fa-external-link" aria-hidden="true" />
-                      <span className="sr-only">(opens in a new tab)</span>
+                      <i className="fa fa-external-link" />
                     </Link>
                   </Tooltip>
                 )}
                 <Tooltip title="Close" placement="bottom">
-                  <PlainButton onClick={this.closeDrawer}>
+                  <a onClick={this.closeDrawer}>
                     <CloseOutlinedIcon />
-                  </PlainButton>
+                  </a>
                 </Tooltip>
               </div>
 
               {/* iframe */}
               {!this.state.error && (
                 <iframe
+                  // @ts-expect-error ts-migrate(2322) FIXME: Type 'RefObject<unknown>' is not assignable to typ... Remove this comment to see the full error message
                   ref={this.iframeRef}
                   title="Usage Help"
                   src="about:blank"
@@ -234,6 +248,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
 
               {/* error message */}
               {this.state.error && (
+                // @ts-expect-error ts-migrate(2746) FIXME: This JSX tag's 'children' prop expects a single ch... Remove this comment to see the full error message
                 <BigMessage icon="fa-exclamation-circle" className="help-message">
                   Something went wrong.
                   <br />
@@ -247,6 +262,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
             </div>
 
             {/* extra content */}
+            {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
             <DynamicComponent name="HelpDrawerExtraContent" onLeave={this.closeDrawer} openPageUrl={this.loadIframe} />
           </Drawer>
         </React.Fragment>
@@ -255,11 +271,12 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
   };
 }
 
+// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'.
 registerComponent("HelpTrigger", helpTriggerWithTypes(TYPES, [DOMAIN]));
 
-export default function HelpTrigger(props) {
+type Props = OwnProps & typeof HelpTriggerDefaultProps;
+
+export default function HelpTrigger(props: Props) {
   return <DynamicComponent {...props} name="HelpTrigger" />;
 }
-
-HelpTrigger.propTypes = HelpTriggerPropTypes;
 HelpTrigger.defaultProps = HelpTriggerDefaultProps;

client/app/components/InputWithCopy.tsx

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

client/app/components/Link.tsx

@@ -1,61 +1,26 @@
 import React from "react";
-import Button, { ButtonProps as AntdButtonProps } from "antd/lib/button";
+import Button from "antd/lib/button";
 
-function DefaultLinkComponent({ children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
-  return <a {...props}>{children}</a>;
+function DefaultLinkComponent(props: any) {
+  return <a {...props} />; // eslint-disable-line jsx-a11y/anchor-has-content
+}
+
+function Link(props: any) {
+  return <Link.Component {...props} />;
 }
 
 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>;
+function DefaultButtonLinkComponent(props: any) {
+  return <Button role="button" {...props} />;
 }
 
-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} />;
+function ButtonLink(props: any) {
+  return <ButtonLink.Component {...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/NoTaggedObjectsFound.jsx

@@ -1,18 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import BigMessage from "@/components/BigMessage";
-import { TagsControl } from "@/components/tags-control/TagsControl";
-
-export default function NoTaggedObjectsFound({ objectType, tags }) {
-  return (
-    <BigMessage icon="fa-tags">
-      No {objectType} found tagged with&nbsp;
-      <TagsControl className="inline-tags-control" tags={Array.from(tags)} tagSeparator={"+"} />.
-    </BigMessage>
-  );
-}
-
-NoTaggedObjectsFound.propTypes = {
-  objectType: PropTypes.string.isRequired,
-  tags: PropTypes.oneOfType([PropTypes.array, PropTypes.objectOf(Set)]).isRequired,
-};

client/app/components/NoTaggedObjectsFound.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import BigMessage from "@/components/BigMessage";
+import { TagsControl } from "@/components/tags-control/TagsControl";
+
+type Props = {
+    objectType: string;
+    tags: any[] | {
+        // @ts-expect-error ts-migrate(2314) FIXME: Generic type 'Set<T>' requires 1 type argument(s).
+        [key: string]: Set;
+    };
+};
+
+export default function NoTaggedObjectsFound({ objectType, tags }: Props) {
+  return (
+    // @ts-expect-error ts-migrate(2746) FIXME: This JSX tag's 'children' prop expects a single ch... Remove this comment to see the full error message
+    <BigMessage icon="fa-tags">
+      No {objectType} found tagged with&nbsp;
+      {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
+      <TagsControl className="inline-tags-control" tags={Array.from(tags)} tagSeparator={"+"} />.
+    </BigMessage>
+  );
+}

client/app/components/PageHeader/index.tsx

@@ -1,9 +1,15 @@
 import React from "react";
-import PropTypes from "prop-types";
 
 import "./index.less";
 
-export default function PageHeader({ title, actions }) {
+type OwnProps = {
+    title?: string;
+    actions?: React.ReactNode;
+};
+
+type Props = OwnProps & typeof PageHeader.defaultProps;
+
+export default function PageHeader({ title, actions }: Props) {
   return (
     <div className="page-header-wrapper">
       <h3>{title}</h3>
@@ -12,11 +18,6 @@ export default function PageHeader({ title, actions }) {
   );
 }
 
-PageHeader.propTypes = {
-  title: PropTypes.string,
-  actions: PropTypes.node,
-};
-
 PageHeader.defaultProps = {
   title: "",
   actions: null,

client/app/components/Paginator.tsx

@@ -1,10 +1,20 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Pagination from "antd/lib/pagination";
 
 const MIN_ITEMS_PER_PAGE = 5;
 
-export default function Paginator({ page, showPageSizeSelect, pageSize, onPageSizeChange, totalCount, onChange }) {
+type OwnProps = {
+    page: number;
+    showPageSizeSelect?: boolean;
+    pageSize: number;
+    totalCount: number;
+    onPageSizeChange?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
+};
+
+type Props = OwnProps & typeof Paginator.defaultProps;
+
+export default function Paginator({ page, showPageSizeSelect, pageSize, onPageSizeChange, totalCount, onChange }: Props) {
   if (totalCount <= (showPageSizeSelect ? MIN_ITEMS_PER_PAGE : pageSize)) {
     return null;
   }
@@ -23,15 +33,6 @@ export default function Paginator({ page, showPageSizeSelect, pageSize, onPageSi
   );
 }
 
-Paginator.propTypes = {
-  page: PropTypes.number.isRequired,
-  showPageSizeSelect: PropTypes.bool,
-  pageSize: PropTypes.number.isRequired,
-  totalCount: PropTypes.number.isRequired,
-  onPageSizeChange: PropTypes.func,
-  onChange: PropTypes.func,
-};
-
 Paginator.defaultProps = {
   showPageSizeSelect: false,
   onChange: () => {},

client/app/components/ParameterApplyButton.jsx

@@ -1,37 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Button from "antd/lib/button";
-import Badge from "antd/lib/badge";
-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 ? (
-    <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}>{icon} Apply Changes</Button>
-          </span>
-        </Tooltip>
-      </Badge>
-    </div>
-  );
-}
-
-ParameterApplyButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  paramCount: PropTypes.number.isRequired,
-};
-
-export default ParameterApplyButton;

client/app/components/ParameterApplyButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Button from "antd/lib/button";
+import Badge from "antd/lib/badge";
+import Tooltip from "antd/lib/tooltip";
+import KeyboardShortcuts from "@/services/KeyboardShortcuts";
+
+type Props = {
+    onClick: (...args: any[]) => any;
+    paramCount: number;
+};
+
+function ParameterApplyButton({ paramCount, onClick }: Props) {
+  // show spinner when count is empty so the fade out is consistent
+  const icon = !paramCount ? "spinner fa-pulse" : "check";
+
+  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}>
+              <i className={`fa fa-${icon}`} /> Apply Changes
+            </Button>
+          </span>
+        </Tooltip>
+      </Badge>
+    </div>
+  );
+}
+
+export default ParameterApplyButton;

client/app/components/ParameterMappingInput.less

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

client/app/components/ParameterMappingInput.tsx

@@ -2,7 +2,6 @@
 
 import { isString, extend, each, has, map, includes, findIndex, find, fromPairs, clone, isEmpty } from "lodash";
 import React, { Fragment } from "react";
-import PropTypes from "prop-types";
 import classNames from "classnames";
 import Select from "antd/lib/select";
 import Table from "antd/lib/table";
@@ -12,7 +11,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 "@/components/Tooltip";
+import Tooltip from "antd/lib/tooltip";
 import ParameterValueInput from "@/components/ParameterValueInput";
 import { ParameterMappingType } from "@/services/widget";
 import { Parameter, cloneParameter } from "@/services/parameters";
@@ -32,7 +31,7 @@ export const MappingType = {
   StaticValue: "static-value",
 };
 
-export function parameterMappingsToEditableMappings(mappings, parameters, existingParameterNames = []) {
+export function parameterMappingsToEditableMappings(mappings: any, parameters: any, existingParameterNames = []) {
   return map(mappings, mapping => {
     const result = extend({}, mapping);
     const alreadyExists = includes(existingParameterNames, mapping.mapTo);
@@ -57,7 +56,7 @@ export function parameterMappingsToEditableMappings(mappings, parameters, existi
   });
 }
 
-export function editableMappingsToParameterMappings(mappings) {
+export function editableMappingsToParameterMappings(mappings: any) {
   return fromPairs(
     map(
       // convert to map
@@ -92,8 +91,8 @@ export function editableMappingsToParameterMappings(mappings) {
   );
 }
 
-export function synchronizeWidgetTitles(sourceMappings, widgets) {
-  const affectedWidgets = [];
+export function synchronizeWidgetTitles(sourceMappings: any, widgets: any) {
+  const affectedWidgets: any = [];
 
   each(sourceMappings, sourceMapping => {
     if (sourceMapping.type === ParameterMappingType.DashboardLevel) {
@@ -119,13 +118,16 @@ export function synchronizeWidgetTitles(sourceMappings, widgets) {
   return affectedWidgets;
 }
 
-export class ParameterMappingInput extends React.Component {
-  static propTypes = {
-    mapping: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    existingParamNames: PropTypes.arrayOf(PropTypes.string),
-    onChange: PropTypes.func,
-    inputError: PropTypes.string,
-  };
+type OwnParameterMappingInputProps = {
+    mapping?: any;
+    existingParamNames?: string[];
+    onChange?: (...args: any[]) => any;
+    inputError?: string;
+};
+
+type ParameterMappingInputProps = OwnParameterMappingInputProps & typeof ParameterMappingInput.defaultProps;
+
+export class ParameterMappingInput extends React.Component<ParameterMappingInputProps> {
 
   static defaultProps = {
     mapping: {},
@@ -140,7 +142,7 @@ export class ParameterMappingInput extends React.Component {
     className: "form-item",
   };
 
-  updateSourceType = type => {
+  updateSourceType = (type: any) => {
     let {
       mapping: { mapTo },
     } = this.props;
@@ -155,26 +157,34 @@ export class ParameterMappingInput extends React.Component {
     this.updateParamMapping({ type, mapTo });
   };
 
-  updateParamMapping = update => {
+  updateParamMapping = (update: any) => {
     const { onChange, mapping } = this.props;
     const newMapping = extend({}, mapping, update);
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
     if (newMapping.value !== mapping.value) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'param' does not exist on type 'never'.
       newMapping.param = cloneParameter(newMapping.param);
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'param' does not exist on type 'never'.
       newMapping.param.setValue(newMapping.value);
     }
     if (has(update, "type")) {
       if (update.type === MappingType.StaticValue) {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
         newMapping.value = newMapping.param.value;
       } else {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
         newMapping.value = null;
       }
     }
+    // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
     onChange(newMapping);
   };
 
   renderMappingTypeSelector() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'existingParamNames' does not exist on ty... Remove this comment to see the full error message
     const noExisting = isEmpty(this.props.existingParamNames);
     return (
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'mapping' does not exist on type 'never'.
       <Radio.Group value={this.props.mapping.type} onChange={e => this.updateSourceType(e.target.value)}>
         <Radio className="radio" value={MappingType.DashboardAddNew} data-test="NewDashboardParameterOption">
           New dashboard parameter
@@ -201,19 +211,14 @@ export class ParameterMappingInput extends React.Component {
     const {
       mapping: { mapTo },
     } = this.props;
-    return (
-      <Input
-        value={mapTo}
-        aria-label="Parameter name (key)"
-        onChange={e => this.updateParamMapping({ mapTo: e.target.value })}
-      />
-    );
+    return <Input value={mapTo} onChange={e => this.updateParamMapping({ mapTo: e.target.value })} />;
   }
 
   renderDashboardMapToExisting() {
     const { mapping, existingParamNames } = this.props;
     const options = map(existingParamNames, paramName => ({ label: paramName, value: paramName }));
 
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'mapTo' does not exist on type 'never'.
     return <Select value={mapping.mapTo} onChange={mapTo => this.updateParamMapping({ mapTo })} options={options} />;
   }
 
@@ -221,18 +226,25 @@ export class ParameterMappingInput extends React.Component {
     const { mapping } = this.props;
     return (
       <ParameterValueInput
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
         type={mapping.param.type}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
         value={mapping.param.normalizedValue}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
         enumOptions={mapping.param.enumOptions}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
         queryId={mapping.param.queryId}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
         parameter={mapping.param}
-        onSelect={value => this.updateParamMapping({ value })}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '(value: any) => void' is not assignable to t... Remove this comment to see the full error message
+        onSelect={(value: any) => this.updateParamMapping({ value })}
       />
     );
   }
 
   renderInputBlock() {
     const { mapping } = this.props;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'type' does not exist on type 'never'.
     switch (mapping.type) {
       case MappingType.DashboardAddNew:
         return ["Key", "Enter a new parameter keyword", this.renderDashboardAddNew()];
@@ -268,14 +280,17 @@ export class ParameterMappingInput extends React.Component {
   }
 }
 
-class MappingEditor extends React.Component {
-  static propTypes = {
-    mapping: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-    existingParamNames: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onChange: PropTypes.func.isRequired,
-  };
+type MappingEditorProps = {
+    mapping: any;
+    existingParamNames: string[];
+    onChange: (...args: any[]) => any;
+};
 
-  constructor(props) {
+type MappingEditorState = any;
+
+class MappingEditor extends React.Component<MappingEditorProps, MappingEditorState> {
+
+  constructor(props: MappingEditorProps) {
     super(props);
     this.state = {
       visible: false,
@@ -284,12 +299,12 @@ class MappingEditor extends React.Component {
     };
   }
 
-  onVisibleChange = visible => {
+  onVisibleChange = (visible: any) => {
     if (visible) this.show();
     else this.hide();
   };
 
-  onChange = mapping => {
+  onChange = (mapping: any) => {
     let inputError = null;
 
     if (mapping.type === MappingType.DashboardAddNew) {
@@ -325,8 +340,10 @@ class MappingEditor extends React.Component {
     return (
       <div className="parameter-mapping-editor" data-test="EditParamMappingPopover">
         <header>
+          {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'. */}
           Edit Source and Value <HelpTrigger type="VALUE_SOURCE_OPTIONS" />
         </header>
+        {/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
         <ParameterMappingInput
           mapping={mapping}
           existingParamNames={this.props.existingParamNames}
@@ -360,12 +377,17 @@ class MappingEditor extends React.Component {
   }
 }
 
-class TitleEditor extends React.Component {
-  static propTypes = {
-    existingParams: PropTypes.arrayOf(PropTypes.object),
-    mapping: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-    onChange: PropTypes.func.isRequired,
-  };
+type OwnTitleEditorProps = {
+    existingParams?: any[];
+    mapping: any;
+    onChange: (...args: any[]) => any;
+};
+
+type TitleEditorState = any;
+
+type TitleEditorProps = OwnTitleEditorProps & typeof TitleEditor.defaultProps;
+
+class TitleEditor extends React.Component<TitleEditorProps, TitleEditorState> {
 
   static defaultProps = {
     existingParams: [],
@@ -376,14 +398,14 @@ class TitleEditor extends React.Component {
     title: "", // will be set on editing
   };
 
-  onPopupVisibleChange = showPopup => {
+  onPopupVisibleChange = (showPopup: any) => {
     this.setState({
       showPopup,
       title: showPopup ? this.getMappingTitle() : "",
     });
   };
 
-  onEditingTitleChange = event => {
+  onEditingTitleChange = (event: any) => {
     this.setState({ title: event.target.value });
   };
 
@@ -426,7 +448,6 @@ 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}
@@ -447,10 +468,7 @@ class TitleEditor extends React.Component {
     if (mapping.type === MappingType.StaticValue) {
       return (
         <Tooltip placement="right" title="Titles for static values don't appear in widgets">
-          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-          <span tabIndex={0}>
-            <i className="fa fa-eye-slash" aria-hidden="true" />
-          </span>
+          <i className="fa fa-eye-slash" />
         </Tooltip>
       );
     }
@@ -482,12 +500,15 @@ class TitleEditor extends React.Component {
   }
 }
 
-export class ParameterMappingListInput extends React.Component {
-  static propTypes = {
-    mappings: PropTypes.arrayOf(PropTypes.object),
-    existingParams: PropTypes.arrayOf(PropTypes.object),
-    onChange: PropTypes.func,
-  };
+type OwnParameterMappingListInputProps = {
+    mappings?: any[];
+    existingParams?: any[];
+    onChange?: (...args: any[]) => any;
+};
+
+type ParameterMappingListInputProps = OwnParameterMappingListInputProps & typeof ParameterMappingListInput.defaultProps;
+
+export class ParameterMappingListInput extends React.Component<ParameterMappingListInputProps> {
 
   static defaultProps = {
     mappings: [],
@@ -495,7 +516,8 @@ export class ParameterMappingListInput extends React.Component {
     onChange: () => {},
   };
 
-  static getStringValue(value) {
+  // @ts-expect-error ts-migrate(7023) FIXME: 'getStringValue' implicitly has return type 'any' ... Remove this comment to see the full error message
+  static getStringValue(value: any) {
     // null
     if (!value) {
       return "";
@@ -515,7 +537,7 @@ export class ParameterMappingListInput extends React.Component {
     return value.toString();
   }
 
-  static getDefaultValue(mapping, existingParams) {
+  static getDefaultValue(mapping: any, existingParams: any) {
     const { type, mapTo, name } = mapping;
     let { param } = mapping;
 
@@ -542,7 +564,10 @@ export class ParameterMappingListInput extends React.Component {
     return this.getStringValue(value);
   }
 
-  static getSourceTypeLabel({ type, mapTo }) {
+  static getSourceTypeLabel({
+    type,
+    mapTo
+  }: any) {
     switch (type) {
       case MappingType.DashboardAddNew:
       case MappingType.DashboardMapToExisting:
@@ -560,13 +585,15 @@ export class ParameterMappingListInput extends React.Component {
     }
   }
 
-  updateParamMapping(oldMapping, newMapping) {
+  updateParamMapping(oldMapping: any, newMapping: any) {
     const mappings = [...this.props.mappings];
     const index = findIndex(mappings, oldMapping);
     if (index >= 0) {
       // This should be the only possible case, but need to handle `else` too
+      // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
       mappings[index] = newMapping;
     } else {
+      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
       mappings.push(newMapping);
     }
     this.props.onChange(mappings);
@@ -602,6 +629,7 @@ export class ParameterMappingListInput extends React.Component {
             title="Default Value"
             dataIndex="mapping"
             key="value"
+            // @ts-expect-error ts-migrate(2339) FIXME: Property 'getDefaultValue' does not exist on type ... Remove this comment to see the full error message
             render={mapping => this.constructor.getDefaultValue(mapping, this.props.existingParams)}
           />
           <Table.Column
@@ -615,6 +643,7 @@ export class ParameterMappingListInput extends React.Component {
 
               return (
                 <Fragment>
+                  {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'getSourceTypeLabel' does not exist on ty... Remove this comment to see the full error message */}
                   {this.constructor.getSourceTypeLabel(mapping)}{" "}
                   <MappingEditor
                     mapping={mapping}

client/app/components/ParameterValueInput.less

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

client/app/components/ParameterValueInput.tsx

@@ -1,6 +1,5 @@
 import { isEqual, isEmpty, map } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 import SelectWithVirtualScroll from "@/components/SelectWithVirtualScroll";
 import Input from "antd/lib/input";
 import InputNumber from "antd/lib/input-number";
@@ -13,19 +12,24 @@ import "./ParameterValueInput.less";
 const multipleValuesProps = {
   maxTagCount: 3,
   maxTagTextLength: 10,
-  maxTagPlaceholder: num => `+${num.length} more`,
+  maxTagPlaceholder: (num: any) => `+${num.length} more`,
 };
 
-class ParameterValueInput extends React.Component {
-  static propTypes = {
-    type: PropTypes.string,
-    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    enumOptions: PropTypes.string,
-    queryId: PropTypes.number,
-    parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    onSelect: PropTypes.func,
-    className: PropTypes.string,
-  };
+type OwnProps = {
+    type?: string;
+    value?: any;
+    enumOptions?: string;
+    queryId?: number;
+    parameter?: any;
+    onSelect?: (...args: any[]) => any;
+    className?: string;
+};
+
+type State = any;
+
+type Props = OwnProps & typeof ParameterValueInput.defaultProps;
+
+class ParameterValueInput extends React.Component<Props, State> {
 
   static defaultProps = {
     type: "text",
@@ -37,28 +41,34 @@ class ParameterValueInput extends React.Component {
     className: "",
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.state = {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'parameter' does not exist on type 'never... Remove this comment to see the full error message
       value: props.parameter.hasPendingValue ? props.parameter.pendingValue : props.value,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'parameter' does not exist on type 'never... Remove this comment to see the full error message
       isDirty: props.parameter.hasPendingValue,
     };
   }
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps: any) => {
     const { value, parameter } = this.props;
     // if value prop updated, reset dirty state
     if (prevProps.value !== value || prevProps.parameter !== parameter) {
       this.setState({
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'hasPendingValue' does not exist on type ... Remove this comment to see the full error message
         value: parameter.hasPendingValue ? parameter.pendingValue : value,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'hasPendingValue' does not exist on type ... Remove this comment to see the full error message
         isDirty: parameter.hasPendingValue,
       });
     }
   };
 
-  onSelect = value => {
+  onSelect = (value: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
     const isDirty = !isEqual(value, this.props.value);
     this.setState({ value, isDirty });
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onSelect' does not exist on type 'never'... Remove this comment to see the full error message
     this.props.onSelect(value, isDirty);
   };
 
@@ -68,9 +78,11 @@ class ParameterValueInput extends React.Component {
     return (
       <DateParameter
         type={type}
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'never... Remove this comment to see the full error message
         className={this.props.className}
         value={value}
         parameter={parameter}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '(value: any) => void' is not assignable to t... Remove this comment to see the full error message
         onSelect={this.onSelect}
       />
     );
@@ -82,9 +94,11 @@ class ParameterValueInput extends React.Component {
     return (
       <DateRangeParameter
         type={type}
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'never... Remove this comment to see the full error message
         className={this.props.className}
         value={value}
         parameter={parameter}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '(value: any) => void' is not assignable to t... Remove this comment to see the full error message
         onSelect={this.onSelect}
       />
     );
@@ -93,14 +107,19 @@ class ParameterValueInput extends React.Component {
   renderEnumInput() {
     const { enumOptions, parameter } = this.props;
     const { value } = this.state;
-    const enumOptionsArray = enumOptions.split("\n").filter(v => v !== "");
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'split' does not exist on type 'never'.
+    const enumOptionsArray = enumOptions.split("\n").filter((v: any) => v !== "");
     // Antd Select doesn't handle null in multiple mode
-    const normalize = val => (parameter.multiValuesOptions && val === null ? [] : val);
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'multiValuesOptions' does not exist on ty... Remove this comment to see the full error message
+    const normalize = (val: any) => parameter.multiValuesOptions && val === null ? [] : val;
 
     return (
       <SelectWithVirtualScroll
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'never... Remove this comment to see the full error message
         className={this.props.className}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '"multiple" | "default"' is not assignable to... Remove this comment to see the full error message
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
+        optionFilterProp="children"
         value={normalize(value)}
         onChange={this.onSelect}
         options={map(enumOptionsArray, opt => ({ label: String(opt), value: opt }))}
@@ -117,12 +136,19 @@ class ParameterValueInput extends React.Component {
     const { value } = this.state;
     return (
       <QueryBasedParameterInput
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
         className={this.props.className}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'.
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'.
+        optionFilterProp="children"
         parameter={parameter}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
         value={value}
         queryId={queryId}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '(value: any) => void' is not assignable to t... Remove this comment to see the full error message
         onSelect={this.onSelect}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type 'number' is not assignable to type 'never'.
         style={{ minWidth: 60 }}
         {...multipleValuesProps}
       />
@@ -133,15 +159,10 @@ class ParameterValueInput extends React.Component {
     const { className } = this.props;
     const { value } = this.state;
 
-    const normalize = val => (isNaN(val) ? undefined : val);
+    const normalize = (val: any) => isNaN(val) ? undefined : val;
 
     return (
-      <InputNumber
-        className={className}
-        value={normalize(value)}
-        aria-label="Parameter number value"
-        onChange={val => this.onSelect(normalize(val))}
-      />
+      <InputNumber className={className} value={normalize(value)} onChange={val => this.onSelect(normalize(val))} />
     );
   }
 
@@ -153,7 +174,6 @@ 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/Parameters.less

@@ -1,4 +1,4 @@
-@import (reference, less) "~@/assets/less/ant";
+@import "../assets/less/ant";
 
 .parameter-block {
   display: inline-block;
@@ -21,8 +21,6 @@
 
   &.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/Parameters.tsx

@@ -1,49 +1,50 @@
 import { size, filter, forEach, extend } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 import { SortableContainer, SortableElement, DragHandle } from "@redash/viz/lib/components/sortable";
 import location from "@/services/location";
+// @ts-expect-error ts-migrate(6133) FIXME: 'Parameter' is declared but its value is never rea... Remove this comment to see the full error message
 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";
 
 import "./Parameters.less";
 
-function updateUrl(parameters) {
+function updateUrl(parameters: any) {
   const params = extend({}, location.search);
-  parameters.forEach(param => {
+  parameters.forEach((param: any) => {
     extend(params, param.toUrlParams());
   });
   location.setSearch(params, true);
 }
 
-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,
-  };
+type OwnProps = {
+    parameters?: any[]; // TODO: PropTypes.instanceOf(Parameter)
+    editable?: boolean;
+    disableUrlUpdate?: boolean;
+    onValuesChange?: (...args: any[]) => any;
+    onPendingValuesChange?: (...args: any[]) => any;
+    onParametersEdit?: (...args: any[]) => any;
+};
 
+type State = any;
+
+type Props = OwnProps & typeof Parameters.defaultProps;
+
+export default class Parameters extends React.Component<Props, State> {
   static defaultProps = {
     parameters: [],
     editable: false,
-    sortable: false,
     disableUrlUpdate: false,
     onValuesChange: () => {},
     onPendingValuesChange: () => {},
     onParametersEdit: () => {},
-    appendSortableToParent: true,
   };
 
-  constructor(props) {
+  onBeforeSortStart: any;
+
+  constructor(props: Props) {
     super(props);
     const { parameters } = props;
     this.state = { parameters };
@@ -52,7 +53,7 @@ export default class Parameters extends React.Component {
     }
   }
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps: any) => {
     const { parameters, disableUrlUpdate } = this.props;
     const parametersChanged = prevProps.parameters !== parameters;
     const disableUrlUpdateChanged = prevProps.disableUrlUpdate !== disableUrlUpdate;
@@ -64,7 +65,7 @@ export default class Parameters extends React.Component {
     }
   };
 
-  handleKeyDown = e => {
+  handleKeyDown = (e: any) => {
     // Cmd/Ctrl/Alt + Enter
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey || e.altKey)) {
       e.stopPropagation();
@@ -72,9 +73,11 @@ export default class Parameters extends React.Component {
     }
   };
 
-  setPendingValue = (param, value, isDirty) => {
+  setPendingValue = (param: any, value: any, isDirty: any) => {
     const { onPendingValuesChange } = this.props;
-    this.setState(({ parameters }) => {
+    this.setState(({
+      parameters
+    }: any) => {
       if (isDirty) {
         param.setPendingValue(value);
       } else {
@@ -85,12 +88,17 @@ export default class Parameters extends React.Component {
     });
   };
 
-  moveParameter = ({ oldIndex, newIndex }) => {
+  moveParameter = ({
+    oldIndex,
+    newIndex
+  }: any) => {
     const { onParametersEdit } = this.props;
     if (oldIndex !== newIndex) {
-      this.setState(({ parameters }) => {
+      this.setState(({
+        parameters
+      }: any) => {
         parameters.splice(newIndex, 0, parameters.splice(oldIndex, 1)[0]);
-        onParametersEdit(parameters);
+        onParametersEdit();
         return { parameters };
       });
     }
@@ -98,8 +106,10 @@ export default class Parameters extends React.Component {
 
   applyChanges = () => {
     const { onValuesChange, disableUrlUpdate } = this.props;
-    this.setState(({ parameters }) => {
-      const parametersWithPendingValues = parameters.filter(p => p.hasPendingValue);
+    this.setState(({
+      parameters
+    }: any) => {
+      const parametersWithPendingValues = parameters.filter((p: any) => p.hasPendingValue);
       forEach(parameters, p => p.applyPendingValue());
       if (!disableUrlUpdate) {
         updateUrl(parameters);
@@ -109,42 +119,49 @@ export default class Parameters extends React.Component {
     });
   };
 
-  showParameterSettings = (parameter, index) => {
+  showParameterSettings = (parameter: any, index: any) => {
     const { onParametersEdit } = this.props;
-    EditParameterSettingsDialog.showModal({ parameter }).onClose(updated => {
-      this.setState(({ parameters }) => {
+    EditParameterSettingsDialog.showModal({ parameter }).onClose((updated: any) => {
+      this.setState(({
+        parameters
+      }: any) => {
         const updatedParameter = extend(parameter, updated);
         parameters[index] = createParameter(updatedParameter, updatedParameter.parentQueryId);
-        onParametersEdit(parameters);
+        onParametersEdit();
         return { parameters };
       });
     });
   };
 
-  renderParameter(param, index) {
+  renderParameter(param: any, index: any) {
     const { editable } = this.props;
     return (
       <div key={param.name} className="di-block" data-test={`ParameterName-${param.name}`}>
         <div className="parameter-heading">
           <label>{param.title || toHuman(param.name)}</label>
           {editable && (
-            <PlainButton
+            <button
               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" aria-hidden="true" />
-            </PlainButton>
+              <i className="fa fa-cog" />
+            </button>
           )}
         </div>
         <ParameterValueInput
+          // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
           type={param.type}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
           value={param.normalizedValue}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
           parameter={param}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
           enumOptions={param.enumOptions}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type 'any' is not assignable to type 'never'.
           queryId={param.queryId}
-          onSelect={(value, isDirty) => this.setPendingValue(param, value, isDirty)}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '(value: any, isDirty: any) => void' is not a... Remove this comment to see the full error message
+          onSelect={(value: any, isDirty: any) => this.setPendingValue(param, value, isDirty)}
         />
       </div>
     );
@@ -152,30 +169,26 @@ export default class Parameters extends React.Component {
 
   render() {
     const { parameters } = this.state;
-    const { sortable, appendSortableToParent } = this.props;
+    const { editable } = this.props;
     const dirtyParamCount = size(filter(parameters, "hasPendingValue"));
-
     return (
+      // @ts-expect-error ts-migrate(2746) FIXME: This JSX tag's 'children' prop expects a single ch... Remove this comment to see the full error message
       <SortableContainer
-        disabled={!sortable}
+        disabled={!editable}
         axis="xy"
         useDragHandle
         lockToContainerEdges
         helperClass="parameter-dragged"
-        helperContainer={containerEl => (appendSortableToParent ? containerEl : document.body)}
         updateBeforeSortStart={this.onBeforeSortStart}
         onSortEnd={this.moveParameter}
         containerProps={{
           className: "parameter-container",
           onKeyDown: dirtyParamCount ? this.handleKeyDown : null,
         }}>
-        {parameters.map((param, index) => (
+        {parameters.map((param: any, index: any) => (
           <SortableElement key={param.name} index={index}>
-            <div
-              className="parameter-block"
-              data-editable={sortable || null}
-              data-test={`ParameterBlock-${param.name}`}>
-              {sortable && <DragHandle data-test={`DragHandle-${param.name}`} />}
+            <div className="parameter-block" data-editable={editable || null}>
+              {editable && <DragHandle data-test={`DragHandle-${param.name}`} />}
               {this.renderParameter(param, index)}
             </div>
           </SortableElement>

client/app/components/PermissionsEditorDialog/index.tsx

@@ -1,18 +1,17 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { axios } from "@/services/axios";
-import PropTypes from "prop-types";
 import { each, debounce, get, find } from "lodash";
 import Button from "antd/lib/button";
 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 "@/components/Tooltip";
+import Tooltip from "antd/lib/tooltip";
+// @ts-expect-error ts-migrate(6133) FIXME: 'DialogPropType' is declared but its value is neve... Remove this comment to see the full error message
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import { 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";
 
@@ -21,13 +20,13 @@ import "./index.less";
 const { Option } = Select;
 const DEBOUNCE_SEARCH_DURATION = 200;
 
-function useGrantees(url) {
+function useGrantees(url: any) {
   const loadGrantees = useCallback(
     () =>
       axios.get(url).then(data => {
-        const resultGrantees = [];
+        const resultGrantees: any = [];
         each(data, (grantees, accessType) => {
-          grantees.forEach(grantee => {
+          grantees.forEach((grantee: any) => {
             grantee.accessType = toHuman(accessType);
             resultGrantees.push(grantee);
           });
@@ -41,6 +40,7 @@ function useGrantees(url) {
     (userId, accessType = "modify") =>
       axios
         .post(url, { access_type: accessType, user_id: userId })
+        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
         .catch(() => notification.error("Could not grant permission to the user")),
     [url]
   );
@@ -49,6 +49,7 @@ function useGrantees(url) {
     (userId, accessType = "modify") =>
       axios
         .delete(url, { data: { access_type: accessType, user_id: userId } })
+        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
         .catch(() => notification.error("Could not remove permission from the user")),
     [url]
   );
@@ -56,37 +57,48 @@ function useGrantees(url) {
   return { loadGrantees, addPermission, removePermission };
 }
 
-const searchUsers = searchTerm =>
-  User.query({ q: searchTerm })
-    .then(({ results }) => results)
-    .catch(() => []);
+const searchUsers = (searchTerm: any) => User.query({ q: searchTerm })
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'results' does not exist on type 'AxiosRe... Remove this comment to see the full error message
+  .then(({ results }) => results)
+  .catch(() => []);
 
-function PermissionsEditorDialogHeader({ context }) {
+type OwnPermissionsEditorDialogHeaderProps = {
+    context?: "query" | "dashboard";
+};
+
+type PermissionsEditorDialogHeaderProps = OwnPermissionsEditorDialogHeaderProps & typeof PermissionsEditorDialogHeader.defaultProps;
+
+function PermissionsEditorDialogHeader({ context }: PermissionsEditorDialogHeaderProps) {
   return (
     <>
       Manage Permissions
       <div className="modal-header-desc">
         {`Editing this ${context} is enabled for the users in this list and for admins. `}
+        {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'never'. */}
         <HelpTrigger type="MANAGE_PERMISSIONS" />
       </div>
     </>
   );
 }
-
-PermissionsEditorDialogHeader.propTypes = { context: PropTypes.oneOf(["query", "dashboard"]) };
 PermissionsEditorDialogHeader.defaultProps = { context: "query" };
 
-function UserSelect({ onSelect, shouldShowUser }) {
+type OwnUserSelectProps = {
+    onSelect?: (...args: any[]) => any;
+    shouldShowUser?: (...args: any[]) => any;
+};
+
+type UserSelectProps = OwnUserSelectProps & typeof UserSelect.defaultProps;
+
+function UserSelect({ onSelect, shouldShowUser }: UserSelectProps) {
   const [loadingUsers, setLoadingUsers] = useState(true);
   const [users, setUsers] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
 
   const debouncedSearchUsers = useCallback(
     debounce(
-      search =>
-        searchUsers(search)
-          .then(setUsers)
-          .finally(() => setLoadingUsers(false)),
+      (search: any) => searchUsers(search)
+        .then(setUsers)
+        .finally(() => setLoadingUsers(false)),
       DEBOUNCE_SEARCH_DURATION
     ),
     []
@@ -103,22 +115,14 @@ function UserSelect({ onSelect, shouldShowUser }) {
       placeholder="Add users..."
       showSearch
       onSearch={setSearchTerm}
-      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" />
-        )
-      }
+      suffixIcon={loadingUsers ? <i className="fa fa-spinner fa-pulse" /> : <i className="fa fa-search" />}
       filterOption={false}
       notFoundContent={null}
       value={undefined}
       getPopupContainer={trigger => trigger.parentNode}
       onSelect={onSelect}>
       {users.filter(shouldShowUser).map(user => (
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'id' does not exist on type 'never'.
         <Option key={user.id} value={user.id}>
           <UserPreviewCard user={user} />
         </Option>
@@ -126,14 +130,19 @@ function UserSelect({ onSelect, shouldShowUser }) {
     </Select>
   );
 }
-
-UserSelect.propTypes = {
-  onSelect: PropTypes.func,
-  shouldShowUser: PropTypes.func,
-};
 UserSelect.defaultProps = { onSelect: () => {}, shouldShowUser: () => true };
 
-function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
+type OwnPermissionsEditorDialogProps = {
+    // @ts-expect-error ts-migrate(2749) FIXME: 'DialogPropType' refers to a value, but is being u... Remove this comment to see the full error message
+    dialog: DialogPropType;
+    author: any;
+    context?: "query" | "dashboard";
+    aclUrl: string;
+};
+
+type PermissionsEditorDialogProps = OwnPermissionsEditorDialogProps & typeof PermissionsEditorDialog.defaultProps;
+
+function PermissionsEditorDialog({ dialog, author, context, aclUrl }: PermissionsEditorDialogProps) {
   const [loadingGrantees, setLoadingGrantees] = useState(true);
   const [grantees, setGrantees] = useState([]);
   const { loadGrantees, addPermission, removePermission } = useGrantees(aclUrl);
@@ -141,6 +150,7 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
     setLoadingGrantees(true);
     loadGrantees()
       .then(setGrantees)
+      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
       .catch(() => notification.error("Failed to load grantees list"))
       .finally(() => setLoadingGrantees(false));
   }, [loadGrantees]);
@@ -161,17 +171,14 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
       title={<PermissionsEditorDialogHeader context={context} />}
       footer={<Button onClick={dialog.dismiss}>Close</Button>}>
       <UserSelect
-        onSelect={userId => addPermission(userId).then(loadUsersWithPermissions)}
-        shouldShowUser={user => !userHasPermission(user)}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '(userId: any) => Promise<void>' is not assig... Remove this comment to see the full error message
+        onSelect={(userId: any) => addPermission(userId).then(loadUsersWithPermissions)}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '(user: any) => boolean' is not assignable to... Remove this comment to see the full error message
+        shouldShowUser={(user: any) => !userHasPermission(user)}
       />
       <div className="d-flex align-items-center m-t-5">
         <h5 className="flex-fill">Users with permissions</h5>
-        {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>
-        )}
+        {loadingGrantees && <i className="fa fa-spinner fa-pulse" />}
       </div>
       <div className="scrollbox p-5" style={{ maxHeight: "40vh" }}>
         <List
@@ -180,15 +187,15 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
           renderItem={user => (
             <List.Item>
               <UserPreviewCard key={user.id} user={user}>
+                {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'null | u... Remove this comment to see the full error message */}
                 {user.id === author.id ? (
                   <Tag className="m-0">Author</Tag>
                 ) : (
                   <Tooltip title="Remove user permissions">
-                    <PlainButton
-                      aria-label="Remove permissions"
-                      onClick={() => removePermission(user.id).then(loadUsersWithPermissions)}>
-                      <i className="fa fa-remove clickable" aria-hidden="true" />
-                    </PlainButton>
+                    <i
+                      className="fa fa-remove clickable"
+                      onClick={() => removePermission(user.id).then(loadUsersWithPermissions)}
+                    />
                   </Tooltip>
                 )}
               </UserPreviewCard>
@@ -200,13 +207,6 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
   );
 }
 
-PermissionsEditorDialog.propTypes = {
-  dialog: DialogPropType.isRequired,
-  author: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  context: PropTypes.oneOf(["query", "dashboard"]),
-  aclUrl: PropTypes.string.isRequired,
-};
-
 PermissionsEditorDialog.defaultProps = { context: "query" };
 
 export default wrapDialog(PermissionsEditorDialog);

client/app/components/PlainButton.less

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

@@ -1,20 +0,0 @@
-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/PreviewCard.tsx

@@ -1,11 +1,21 @@
 import React from "react";
-import PropTypes from "prop-types";
 import classNames from "classnames";
 import Link from "@/components/Link";
 
+type OwnPreviewCardProps = {
+    imageUrl: string;
+    title: React.ReactNode;
+    body?: React.ReactNode;
+    roundedImage?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+};
+
+type PreviewCardProps = OwnPreviewCardProps & typeof PreviewCard.defaultProps;
+
 // PreviewCard
 
-export function PreviewCard({ imageUrl, roundedImage, title, body, children, className, ...props }) {
+export function PreviewCard({ imageUrl, roundedImage, title, body, children, className, ...props }: PreviewCardProps) {
   return (
     <div {...props} className={className + " w-100 d-flex align-items-center"}>
       <img
@@ -24,15 +34,6 @@ export function PreviewCard({ imageUrl, roundedImage, title, body, children, cla
   );
 }
 
-PreviewCard.propTypes = {
-  imageUrl: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
-  body: PropTypes.node,
-  roundedImage: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.node,
-};
-
 PreviewCard.defaultProps = {
   body: null,
   roundedImage: true,
@@ -40,36 +41,52 @@ PreviewCard.defaultProps = {
   children: null,
 };
 
+type OwnUserPreviewCardProps = {
+    user: {
+        profile_image_url: string;
+        name: string;
+        email: string;
+    };
+    withLink?: boolean;
+    children?: React.ReactNode;
+};
+
+type UserPreviewCardProps = OwnUserPreviewCardProps & typeof UserPreviewCard.defaultProps;
+
 // UserPreviewCard
 
-export function UserPreviewCard({ user, withLink, children, ...props }) {
+export function UserPreviewCard({ user, withLink, children, ...props }: UserPreviewCardProps) {
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'id' does not exist on type '{ profile_im... Remove this comment to see the full error message
   const title = withLink ? <Link href={"users/" + user.id}>{user.name}</Link> : user.name;
   return (
+    // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'null | un... Remove this comment to see the full error message
     <PreviewCard {...props} imageUrl={user.profile_image_url} title={title} body={user.email}>
       {children}
     </PreviewCard>
   );
 }
 
-UserPreviewCard.propTypes = {
-  user: PropTypes.shape({
-    profile_image_url: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
-  }).isRequired,
-  withLink: PropTypes.bool,
-  children: PropTypes.node,
-};
-
 UserPreviewCard.defaultProps = {
   withLink: false,
   children: null,
 };
 
+type OwnDataSourcePreviewCardProps = {
+    dataSource: {
+        name: string;
+        type: string;
+    };
+    withLink?: boolean;
+    children?: React.ReactNode;
+};
+
+type DataSourcePreviewCardProps = OwnDataSourcePreviewCardProps & typeof DataSourcePreviewCard.defaultProps;
+
 // DataSourcePreviewCard
 
-export function DataSourcePreviewCard({ dataSource, withLink, children, ...props }) {
+export function DataSourcePreviewCard({ dataSource, withLink, children, ...props }: DataSourcePreviewCardProps) {
   const imageUrl = `static/images/db-logos/${dataSource.type}.png`;
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'id' does not exist on type '{ name: stri... Remove this comment to see the full error message
   const title = withLink ? <Link href={"data_sources/" + dataSource.id}>{dataSource.name}</Link> : dataSource.name;
   return (
     <PreviewCard {...props} imageUrl={imageUrl} title={title}>
@@ -78,15 +95,6 @@ export function DataSourcePreviewCard({ dataSource, withLink, children, ...props
   );
 }
 
-DataSourcePreviewCard.propTypes = {
-  dataSource: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-  withLink: PropTypes.bool,
-  children: PropTypes.node,
-};
-
 DataSourcePreviewCard.defaultProps = {
   withLink: false,
   children: null,

client/app/components/QueryBasedParameterInput.tsx

@@ -1,17 +1,21 @@
 import { find, isArray, get, first, map, intersection, isEqual, isEmpty } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 import SelectWithVirtualScroll from "@/components/SelectWithVirtualScroll";
 
-export default class QueryBasedParameterInput extends React.Component {
-  static propTypes = {
-    parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    mode: PropTypes.oneOf(["default", "multiple"]),
-    queryId: PropTypes.number,
-    onSelect: PropTypes.func,
-    className: PropTypes.string,
-  };
+type OwnProps = {
+    parameter?: any;
+    value?: any;
+    mode?: "default" | "multiple";
+    queryId?: number;
+    onSelect?: (...args: any[]) => any;
+    className?: string;
+};
+
+type State = any;
+
+type Props = OwnProps & typeof QueryBasedParameterInput.defaultProps;
+
+export default class QueryBasedParameterInput extends React.Component<Props, State> {
 
   static defaultProps = {
     value: null,
@@ -22,7 +26,7 @@ export default class QueryBasedParameterInput extends React.Component {
     className: "",
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.state = {
       options: [],
@@ -32,20 +36,26 @@ export default class QueryBasedParameterInput extends React.Component {
   }
 
   componentDidMount() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'queryId' does not exist on type 'never'.
     this._loadOptions(this.props.queryId);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'queryId' does not exist on type 'never'.
     if (this.props.queryId !== prevProps.queryId) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'queryId' does not exist on type 'never'.
       this._loadOptions(this.props.queryId);
     }
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
     if (this.props.value !== prevProps.value) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
       this.setValue(this.props.value);
     }
   }
 
-  setValue(value) {
+  setValue(value: any) {
     const { options } = this.state;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'mode' does not exist on type 'never'.
     if (this.props.mode === "multiple") {
       value = isArray(value) ? value : [value];
       const optionValues = map(options, option => option.value);
@@ -53,22 +63,28 @@ export default class QueryBasedParameterInput extends React.Component {
       this.setState({ value: validValues });
       return validValues;
     }
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
     const found = find(options, option => option.value === this.props.value) !== undefined;
     value = found ? value : get(first(options), "value");
     this.setState({ value });
     return value;
   }
 
-  async _loadOptions(queryId) {
+  async _loadOptions(queryId: any) {
     if (queryId && queryId !== this.state.queryId) {
       this.setState({ loading: true });
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'parameter' does not exist on type 'never... Remove this comment to see the full error message
       const options = await this.props.parameter.loadDropdownValues();
 
       // stale queryId check
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'queryId' does not exist on type 'never'.
       if (this.props.queryId === queryId) {
         this.setState({ options, loading: false }, () => {
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
           const updatedValue = this.setValue(this.props.value);
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'never'.
           if (!isEqual(updatedValue, this.props.value)) {
+            // @ts-expect-error ts-migrate(2339) FIXME: Property 'onSelect' does not exist on type 'never'... Remove this comment to see the full error message
             this.props.onSelect(updatedValue);
           }
         });
@@ -77,6 +93,7 @@ export default class QueryBasedParameterInput extends React.Component {
   }
 
   render() {
+    // @ts-expect-error ts-migrate(2700) FIXME: Rest types may only be created from object types.
     const { className, mode, onSelect, queryId, value, ...otherProps } = this.props;
     const { loading, options } = this.state;
     return (
@@ -89,6 +106,7 @@ export default class QueryBasedParameterInput extends React.Component {
           value={this.state.value}
           onChange={onSelect}
           options={map(options, ({ value, name }) => ({ label: String(name), value }))}
+          optionFilterProp="children"
           showSearch
           showArrow
           notFoundContent={isEmpty(options) ? "No options available" : null}

client/app/components/QueryLink.tsx

@@ -1,41 +1,44 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { VisualizationType } from "@redash/viz/lib";
 import Link from "@/components/Link";
 import VisualizationName from "@/components/visualizations/VisualizationName";
 
 import "./QueryLink.less";
 
-function QueryLink({ query, visualization, readOnly }) {
+type OwnProps = {
+    query: any;
+    visualization?: VisualizationType;
+    readOnly?: boolean;
+};
+
+type Props = OwnProps & typeof QueryLink.defaultProps;
+
+function QueryLink({ query, visualization, readOnly }: Props) {
   const getUrl = () => {
     let hash = null;
     if (visualization) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'type' does not exist on type 'never'.
       if (visualization.type === "TABLE") {
         // link to hard-coded table tab instead of the (hidden) visualization tab
         hash = "table";
       } else {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'id' does not exist on type 'never'.
         hash = visualization.id;
       }
     }
 
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'getUrl' does not exist on type 'never'.
     return query.getUrl(false, hash);
   };
 
-  const QueryLinkWrapper = props => (readOnly ? <span {...props} /> : <Link href={getUrl()} {...props} />);
-
   return (
-    <QueryLinkWrapper className="query-link">
+    <Link href={readOnly ? null : getUrl()} className="query-link">
+      {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'name' does not exist on type 'never'. */}
       <VisualizationName visualization={visualization} /> <span>{query.name}</span>
-    </QueryLinkWrapper>
+    </Link>
   );
 }
 
-QueryLink.propTypes = {
-  query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  visualization: VisualizationType,
-  readOnly: PropTypes.bool,
-};
-
 QueryLink.defaultProps = {
   visualization: null,
   readOnly: false,

client/app/components/QuerySelector.jsx

@@ -1,177 +0,0 @@
-import { find } from "lodash";
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-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";
-
-const { Option } = Select;
-function search(term) {
-  if (term === null) {
-    return Promise.resolve(null);
-  }
-
-  // get recent
-  if (!term) {
-    return Query.recent().then(results => results.filter(item => !item.is_draft)); // filter out draft
-  }
-
-  // search by query
-  return Query.query({ q: term }).then(({ results }) => results);
-}
-
-export default function QuerySelector(props) {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedQuery, setSelectedQuery] = useState();
-  const [doSearch, searchResults, searching] = useSearchResults(search, { initialResults: [] });
-
-  const placeholder = "Search a query by name";
-  const clearIcon = (
-    <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);
-  }, [doSearch, searchTerm]);
-
-  // set selected from prop
-  useEffect(() => {
-    if (props.selectedQuery) {
-      setSelectedQuery(props.selectedQuery);
-    }
-  }, [props.selectedQuery]);
-
-  function selectQuery(queryId) {
-    let query = null;
-    if (queryId) {
-      query = find(searchResults, { id: queryId });
-      if (!query) {
-        // shouldn't happen
-        notification.error("Something went wrong...", "Couldn't select query");
-      }
-    }
-
-    setSearchTerm(query ? null : ""); // empty string triggers recent fetch
-    setSelectedQuery(query);
-    props.onChange(query);
-  }
-
-  function renderResults() {
-    if (!searchResults.length) {
-      return <div className="text-muted">No results matching search term.</div>;
-    }
-
-    return (
-      <ul className="list-group">
-        {searchResults.map(q => (
-          <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" />
-          </PlainButton>
-        ))}
-      </ul>
-    );
-  }
-
-  if (props.disabled) {
-    return (
-      <Input value={selectedQuery && selectedQuery.name} aria-label="Tied query" placeholder={placeholder} disabled />
-    );
-  }
-
-  if (props.type === "select") {
-    const suffixIcon = selectedQuery ? clearIcon : null;
-    const value = selectedQuery ? selectedQuery.name : searchTerm;
-
-    return (
-      <Select
-        showSearch
-        dropdownMatchSelectWidth={false}
-        placeholder={placeholder}
-        value={value || undefined} // undefined for the placeholder to show
-        onSearch={setSearchTerm}
-        onChange={selectQuery}
-        suffixIcon={searching ? spinIcon : suffixIcon}
-        notFoundContent={null}
-        filterOption={false}
-        defaultActiveFirstOption={false}
-        className={props.className}
-        data-test="QuerySelector">
-        {searchResults &&
-          searchResults.map(q => {
-            const disabled = q.is_draft;
-            return (
-              <Option
-                value={q.id}
-                key={q.id}
-                disabled={disabled}
-                className="query-selector-result"
-                data-test={`QueryId${q.id}`}>
-                {q.name}{" "}
-                <QueryTagsControl
-                  isDraft={q.is_draft}
-                  tags={q.tags}
-                  className={cx("inline-tags-control", { disabled })}
-                />
-              </Option>
-            );
-          })}
-      </Select>
-    );
-  }
-
-  return (
-    <span data-test="QuerySelector">
-      {selectedQuery ? (
-        <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}
-        />
-      )}
-      <div className="scrollbox" style={{ maxHeight: "50vh", marginTop: 15 }}>
-        {searchResults && renderResults()}
-      </div>
-    </span>
-  );
-}
-
-QuerySelector.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  selectedQuery: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  type: PropTypes.oneOf(["select", "default"]),
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-
-QuerySelector.defaultProps = {
-  selectedQuery: null,
-  type: "default",
-  className: null,
-  disabled: false,
-};

client/app/components/QuerySelector.tsx

@@ -0,0 +1,183 @@
+import { find } from "lodash";
+import React, { useState, useEffect } from "react";
+import cx from "classnames";
+import Input from "antd/lib/input";
+import Select from "antd/lib/select";
+import { Query } from "@/services/query";
+import notification from "@/services/notification";
+import { QueryTagsControl } from "@/components/tags-control/TagsControl";
+import useSearchResults from "@/lib/hooks/useSearchResults";
+
+const { Option } = Select;
+function search(term: any) {
+  if (term === null) {
+    return Promise.resolve(null);
+  }
+
+  // get recent
+  if (!term) {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'recent' does not exist on type 'typeof Q... Remove this comment to see the full error message
+    return Query.recent().then((results: any) => results.filter((item: any) => !item.is_draft)); // filter out draft
+  }
+
+  // search by query
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'query' does not exist on type 'typeof Qu... Remove this comment to see the full error message
+  return Query.query({ q: term }).then(({
+    results
+  }: any) => results);
+}
+
+type OwnProps = {
+    onChange: (...args: any[]) => any;
+    selectedQuery?: any;
+    type?: "select" | "default";
+    className?: string;
+    disabled?: boolean;
+};
+
+type Props = OwnProps & typeof QuerySelector.defaultProps;
+
+export default function QuerySelector(props: Props) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedQuery, setSelectedQuery] = useState();
+  // @ts-expect-error ts-migrate(2322) FIXME: Type 'never[]' is not assignable to type 'null | u... Remove this comment to see the full error message
+  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 spinIcon = <i className={cx("fa fa-spinner fa-pulse hide-in-percy", { hidden: !searching })} />;
+
+  useEffect(() => {
+    // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+    doSearch(searchTerm);
+  }, [doSearch, searchTerm]);
+
+  // set selected from prop
+  useEffect(() => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedQuery' does not exist on type 'n... Remove this comment to see the full error message
+    if (props.selectedQuery) {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedQuery' does not exist on type 'n... Remove this comment to see the full error message
+      setSelectedQuery(props.selectedQuery);
+    }
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectedQuery' does not exist on type 'n... Remove this comment to see the full error message
+  }, [props.selectedQuery]);
+
+  function selectQuery(queryId: any) {
+    let query = null;
+    if (queryId) {
+      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+      query = find(searchResults, { id: queryId });
+      if (!query) {
+        // shouldn't happen
+        // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 2.
+        notification.error("Something went wrong...", "Couldn't select query");
+      }
+    }
+
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string | null' is not assignable... Remove this comment to see the full error message
+    setSearchTerm(query ? null : ""); // empty string triggers recent fetch
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'unknown' is not assignable to pa... Remove this comment to see the full error message
+    setSelectedQuery(query);
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onChange' does not exist on type 'never'... Remove this comment to see the full error message
+    props.onChange(query);
+  }
+
+  function renderResults() {
+    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+    if (!searchResults.length) {
+      return <div className="text-muted">No results matching search term.</div>;
+    }
+
+    return (
+      <div className="list-group">
+        {/* @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'. */}
+        {searchResults.map((q: any) => <a
+          className={cx("query-selector-result", "list-group-item", { inactive: q.is_draft })}
+          key={q.id}
+          onClick={() => selectQuery(q.id)}
+          data-test={`QueryId${q.id}`}>
+          {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ isDraft: any; tags: any; className: string... Remove this comment to see the full error message */}
+          {q.name} <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className="inline-tags-control" />
+        </a>)}
+      </div>
+    );
+  }
+
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'disabled' does not exist on type 'never'... Remove this comment to see the full error message
+  if (props.disabled) {
+    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
+    return <Input value={selectedQuery && selectedQuery.name} placeholder={placeholder} disabled />;
+  }
+
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'type' does not exist on type 'never'.
+  if (props.type === "select") {
+    const suffixIcon = selectedQuery ? clearIcon : null;
+    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
+    const value = selectedQuery ? selectedQuery.name : searchTerm;
+
+    return (
+      <Select
+        showSearch
+        dropdownMatchSelectWidth={false}
+        placeholder={placeholder}
+        value={value || undefined} // undefined for the placeholder to show
+        onSearch={setSearchTerm}
+        onChange={selectQuery}
+        suffixIcon={searching ? spinIcon : suffixIcon}
+        notFoundContent={null}
+        filterOption={false}
+        defaultActiveFirstOption={false}
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'never... Remove this comment to see the full error message
+        className={props.className}
+        data-test="QuerySelector">
+        {searchResults &&
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'map' does not exist on type 'true | ((se... Remove this comment to see the full error message
+          searchResults.map((q: any) => {
+            const disabled = q.is_draft;
+            return (
+              <Option
+                value={q.id}
+                key={q.id}
+                disabled={disabled}
+                className="query-selector-result"
+                data-test={`QueryId${q.id}`}>
+                {q.name}{" "}
+                <QueryTagsControl
+                  isDraft={q.is_draft}
+                  // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isDraft: any; tags: any; className: string... Remove this comment to see the full error message
+                  tags={q.tags}
+                  className={cx("inline-tags-control", { disabled })}
+                />
+              </Option>
+            );
+          })}
+      </Select>
+    );
+  }
+
+  return (
+    <span data-test="QuerySelector">
+      {selectedQuery ? (
+        // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
+        <Input value={selectedQuery.name} suffix={clearIcon} readOnly />
+      ) : (
+        <Input
+          placeholder={placeholder}
+          value={searchTerm}
+          onChange={e => setSearchTerm(e.target.value)}
+          suffix={spinIcon}
+        />
+      )}
+      <div className="scrollbox" style={{ maxHeight: "50vh", marginTop: 15 }}>
+        {searchResults && renderResults()}
+      </div>
+    </span>
+  );
+}
+
+QuerySelector.defaultProps = {
+  selectedQuery: null,
+  type: "default",
+  className: null,
+  disabled: false,
+};

client/app/components/Resizable/index.tsx

@@ -1,12 +1,20 @@
 import d3 from "d3";
 import React, { useRef, useMemo, useCallback, useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import { Resizable as ReactResizable } from "react-resizable";
 import KeyboardShortcuts from "@/services/KeyboardShortcuts";
 
 import "./index.less";
 
-export default function Resizable({ toggleShortcut, direction, sizeAttribute, children }) {
+type OwnProps = {
+    direction?: "horizontal" | "vertical";
+    sizeAttribute?: string;
+    toggleShortcut?: string;
+    children?: React.ReactElement;
+};
+
+type Props = OwnProps & typeof Resizable.defaultProps;
+
+export default function Resizable({ toggleShortcut, direction, sizeAttribute, children }: Props) {
   const [size, setSize] = useState(0);
   const elementRef = useRef();
   const wasUsingTouchEventsRef = useRef(false);
@@ -19,6 +27,7 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
     if (!elementRef.current) {
       return 0;
     }
+    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
     return Math.floor(elementRef.current.getBoundingClientRect()[sizeProp]);
   }, [sizeProp]);
 
@@ -28,10 +37,12 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
       return;
     }
 
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     const element = d3.select(elementRef.current);
     let targetSize;
     if (savedSize.current === null) {
       targetSize = "0px";
+      // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'null'.
       savedSize.current = `${getElementSize()}px`;
     } else {
       targetSize = savedSize.current;
@@ -42,21 +53,21 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
       .style(sizeAttribute, savedSize.current || "0px")
       .transition()
       .duration(200)
+      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
       .ease("swing")
+      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       .style(sizeAttribute, targetSize);
 
     // update state to new element's size
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string | null' is not assignable... Remove this comment to see the full error message
     setSize(parseInt(targetSize) || 0);
   }, [getElementSize, sizeAttribute]);
 
   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
@@ -95,8 +106,9 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
         // updated here and in `draggableCore::onMouseDown` handler to ensure that right value will be used
         setSize(getElementSize());
       },
-      onResize: (unused, data) => {
+      onResize: (unused: any, data: any) => {
         // update element directly for better UI responsiveness
+        // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
         d3.select(elementRef.current).style(sizeAttribute, `${data.size[sizeProp]}px`);
         setSize(data.size[sizeProp]);
         wasResizedRef.current = true;
@@ -112,7 +124,7 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
 
   const draggableCoreOptions = useMemo(
     () => ({
-      onMouseDown: e => {
+      onMouseDown: (e: any) => {
         // In some cases this handler is executed twice during the same resize operation - first time
         // with `touchstart` event and second time with `mousedown` (probably emulated by browser).
         // Therefore we set the flag only when we receive `touchstart` because in ths case it's definitely
@@ -133,6 +145,7 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
     return null;
   }
 
+  // @ts-expect-error ts-migrate(2322) FIXME: Type 'CElement<any, Component<any, any, any>>' is ... Remove this comment to see the full error message
   children = React.createElement(children.type, { ...children.props, ref: elementRef });
 
   return (
@@ -151,13 +164,6 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
   );
 }
 
-Resizable.propTypes = {
-  direction: PropTypes.oneOf(["horizontal", "vertical"]),
-  sizeAttribute: PropTypes.string,
-  toggleShortcut: PropTypes.string,
-  children: PropTypes.element,
-};
-
 Resizable.defaultProps = {
   direction: "horizontal",
   sizeAttribute: null, // "width"/"height" - depending on `direction`

client/app/components/SelectItemsDialog.jsx

@@ -1,200 +0,0 @@
-import { filter, find, isEmpty, size } from "lodash";
-import React, { useState, useCallback, useEffect } from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import Modal from "antd/lib/modal";
-import Input from "antd/lib/input";
-import List from "antd/lib/list";
-import Button from "antd/lib/button";
-import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import BigMessage from "@/components/BigMessage";
-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("select-items-list", "w-100", "p-l-10", "p-r-10", { disabled: isDisabled }, className)}
-          onClick={isDisabled ? null : () => onItemClick(item)}>
-          {content}
-        </List.Item>
-      );
-    },
-    [renderItem, onItemClick]
-  );
-
-  return <List size="small" dataSource={items} renderItem={renderListItem} />;
-}
-
-ItemsList.propTypes = {
-  items: PropTypes.array,
-  renderItem: PropTypes.func,
-  onItemClick: PropTypes.func,
-};
-
-ItemsList.defaultProps = {
-  items: [],
-  renderItem: () => {},
-  onItemClick: () => {},
-};
-
-function SelectItemsDialog({
-  dialog,
-  dialogTitle,
-  inputPlaceholder,
-  itemKey,
-  renderItem,
-  renderStagedItem,
-  searchItems,
-  selectedItemsTitle,
-  width,
-  showCount,
-  extraFooterContent,
-}) {
-  const [selectedItems, setSelectedItems] = useState([]);
-  const [search, items, isLoading] = useSearchResults(searchItems, { initialResults: [] });
-  const hasResults = items.length > 0;
-
-  useEffect(() => {
-    search();
-  }, [search]);
-
-  const isItemSelected = useCallback(
-    item => {
-      const key = itemKey(item);
-      return !!find(selectedItems, i => itemKey(i) === key);
-    },
-    [selectedItems, itemKey]
-  );
-
-  const toggleItem = useCallback(
-    item => {
-      if (isItemSelected(item)) {
-        const key = itemKey(item);
-        setSelectedItems(filter(selectedItems, i => itemKey(i) !== key));
-      } else {
-        setSelectedItems([...selectedItems, item]);
-      }
-    },
-    [selectedItems, itemKey, isItemSelected]
-  );
-
-  const save = useCallback(() => {
-    dialog.close(selectedItems).catch(error => {
-      if (error) {
-        notification.error("Failed to save some of selected items.");
-      }
-    });
-  }, [dialog, selectedItems]);
-
-  return (
-    <Modal
-      {...dialog.props}
-      className="select-items-dialog"
-      width={width}
-      title={dialogTitle}
-      footer={
-        <div className="d-flex align-items-center">
-          <span className="flex-fill m-r-5" style={{ textAlign: "left", color: "rgba(0, 0, 0, 0.5)" }}>
-            {extraFooterContent}
-          </span>
-          <Button {...dialog.props.cancelButtonProps} onClick={dialog.dismiss}>
-            Cancel
-          </Button>
-          <Button
-            {...dialog.props.okButtonProps}
-            onClick={save}
-            disabled={selectedItems.length === 0 || dialog.props.okButtonProps.disabled}
-            type="primary">
-            Save
-            {showCount && !isEmpty(selectedItems) ? ` (${size(selectedItems)})` : null}
-          </Button>
-        </div>
-      }>
-      <div className="d-flex align-items-center m-b-10">
-        <div className="flex-fill">
-          <Input.Search
-            onChange={event => search(event.target.value)}
-            placeholder={inputPlaceholder}
-            aria-label={inputPlaceholder}
-            autoFocus
-          />
-        </div>
-        {renderStagedItem && (
-          <div className="w-50 m-l-20">
-            <h5 className="m-0">{selectedItemsTitle}</h5>
-          </div>
-        )}
-      </div>
-
-      <div className="d-flex align-items-stretch" style={{ minHeight: "30vh", maxHeight: "50vh" }}>
-        <div className="flex-fill scrollbox">
-          {isLoading && <LoadingState className="" />}
-          {!isLoading && !hasResults && (
-            <BigMessage icon="fa-search" message="No items match your search." className="" />
-          )}
-          {!isLoading && hasResults && (
-            <ItemsList
-              items={items}
-              renderItem={item => renderItem(item, { isSelected: isItemSelected(item) })}
-              onItemClick={toggleItem}
-            />
-          )}
-        </div>
-        {renderStagedItem && (
-          <div className="w-50 m-l-20 scrollbox">
-            {selectedItems.length > 0 && (
-              <ItemsList
-                items={selectedItems}
-                renderItem={item => renderStagedItem(item, { isSelected: true })}
-                onItemClick={toggleItem}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
-}
-
-SelectItemsDialog.propTypes = {
-  dialog: DialogPropType.isRequired,
-  dialogTitle: PropTypes.string,
-  inputPlaceholder: PropTypes.string,
-  selectedItemsTitle: PropTypes.string,
-  searchItems: PropTypes.func.isRequired, // (searchTerm: string): Promise<Items[]> if `searchTerm === ''` load all
-  itemKey: PropTypes.func, // (item) => string|number - return key of item (by default `id`)
-  // left list
-  // (item, { isSelected }) => {
-  //   content: node, // item contents
-  //   className: string = '', // additional class for item wrapper
-  //   isDisabled: bool = false, // is item clickable or disabled
-  // }
-  renderItem: PropTypes.func,
-  // right list; args/results save as for `renderItem`. if not specified - `renderItem` will be used
-  renderStagedItem: PropTypes.func,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  extraFooterContent: PropTypes.node,
-  showCount: PropTypes.bool,
-};
-
-SelectItemsDialog.defaultProps = {
-  dialogTitle: "Add Items",
-  inputPlaceholder: "Search...",
-  selectedItemsTitle: "Selected items",
-  itemKey: item => item.id,
-  renderItem: () => "",
-  renderStagedItem: null, // hidden by default
-  width: "80%",
-  extraFooterContent: null,
-  showCount: false,
-};
-
-export default wrapDialog(SelectItemsDialog);

client/app/components/SelectItemsDialog.less

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

client/app/components/SelectItemsDialog.tsx

@@ -0,0 +1,199 @@
+import { filter, find, isEmpty, size } from "lodash";
+import React, { useState, useCallback, useEffect } from "react";
+import classNames from "classnames";
+import Modal from "antd/lib/modal";
+import Input from "antd/lib/input";
+import List from "antd/lib/list";
+import Button from "antd/lib/button";
+// @ts-expect-error ts-migrate(6133) FIXME: 'DialogPropType' is declared but its value is neve... Remove this comment to see the full error message
+import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
+import BigMessage from "@/components/BigMessage";
+import LoadingState from "@/components/items-list/components/LoadingState";
+import notification from "@/services/notification";
+import useSearchResults from "@/lib/hooks/useSearchResults";
+
+type OwnItemsListProps = {
+    items?: any[];
+    renderItem?: (...args: any[]) => any;
+    onItemClick?: (...args: any[]) => any;
+};
+
+type ItemsListProps = OwnItemsListProps & typeof ItemsList.defaultProps;
+
+function ItemsList({ items, renderItem, onItemClick }: ItemsListProps) {
+  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)}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '(() => any) | null' is not assignable to typ... Remove this comment to see the full error message
+          onClick={isDisabled ? null : () => onItemClick(item)}>
+          {content}
+        </List.Item>
+      );
+    },
+    [renderItem, onItemClick]
+  );
+
+  return <List size="small" dataSource={items} renderItem={renderListItem} />;
+}
+
+ItemsList.defaultProps = {
+  items: [],
+  renderItem: () => {},
+  onItemClick: () => {},
+};
+
+type OwnSelectItemsDialogProps = {
+    // @ts-expect-error ts-migrate(2749) FIXME: 'DialogPropType' refers to a value, but is being u... Remove this comment to see the full error message
+    dialog: DialogPropType;
+    dialogTitle?: string;
+    inputPlaceholder?: string;
+    selectedItemsTitle?: string;
+    searchItems: (...args: any[]) => any;
+    itemKey?: (...args: any[]) => any;
+    renderItem?: (...args: any[]) => any;
+    renderStagedItem?: (...args: any[]) => any;
+    width?: string | number;
+    extraFooterContent?: React.ReactNode;
+    showCount?: boolean;
+};
+
+type SelectItemsDialogProps = OwnSelectItemsDialogProps & typeof SelectItemsDialog.defaultProps;
+
+function SelectItemsDialog({ dialog, dialogTitle, inputPlaceholder, itemKey, renderItem, renderStagedItem, searchItems, selectedItemsTitle, width, showCount, extraFooterContent, }: SelectItemsDialogProps) {
+  const [selectedItems, setSelectedItems] = useState([]);
+  // @ts-expect-error ts-migrate(2322) FIXME: Type 'never[]' is not assignable to type 'null | u... Remove this comment to see the full error message
+  const [search, items, isLoading] = useSearchResults(searchItems, { initialResults: [] });
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+  const hasResults = items.length > 0;
+
+  useEffect(() => {
+    // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+    search();
+  }, [search]);
+
+  const isItemSelected = useCallback(
+    item => {
+      // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+      const key = itemKey(item);
+      // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+      return !!find(selectedItems, i => itemKey(i) === key);
+    },
+    [selectedItems, itemKey]
+  );
+
+  const toggleItem = useCallback(
+    item => {
+      if (isItemSelected(item)) {
+        // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+        const key = itemKey(item);
+        // @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable.
+        setSelectedItems(filter(selectedItems, i => itemKey(i) !== key));
+      } else {
+        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any[]' is not assignable to para... Remove this comment to see the full error message
+        setSelectedItems([...selectedItems, item]);
+      }
+    },
+    [selectedItems, itemKey, isItemSelected]
+  );
+
+  const save = useCallback(() => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'close' does not exist on type 'never'.
+    dialog.close(selectedItems).catch((error: any) => {
+      if (error) {
+        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
+        notification.error("Failed to save some of selected items.");
+      }
+    });
+  }, [dialog, selectedItems]);
+
+  return (
+    <Modal
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'never'.
+      {...dialog.props}
+      className="select-items-dialog"
+      width={width}
+      title={dialogTitle}
+      footer={
+        <div className="d-flex align-items-center">
+          <span className="flex-fill m-r-5" style={{ textAlign: "left", color: "rgba(0, 0, 0, 0.5)" }}>
+            {extraFooterContent}
+          </span>
+          {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'never'. */}
+          <Button {...dialog.props.cancelButtonProps} onClick={dialog.dismiss}>
+            Cancel
+          </Button>
+          <Button
+            // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'never'.
+            {...dialog.props.okButtonProps}
+            onClick={save}
+            // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'never'.
+            disabled={selectedItems.length === 0 || dialog.props.okButtonProps.disabled}
+            type="primary">
+            Save
+            {showCount && !isEmpty(selectedItems) ? ` (${size(selectedItems)})` : null}
+          </Button>
+        </div>
+      }>
+      <div className="d-flex align-items-center m-b-10">
+        <div className="flex-fill">
+          {/* @ts-expect-error ts-migrate(2349) FIXME: This expression is not callable. */}
+          <Input.Search onChange={event => search(event.target.value)} placeholder={inputPlaceholder} autoFocus />
+        </div>
+        {renderStagedItem && (
+          <div className="w-50 m-l-20">
+            <h5 className="m-0">{selectedItemsTitle}</h5>
+          </div>
+        )}
+      </div>
+
+      <div className="d-flex align-items-stretch" style={{ minHeight: "30vh", maxHeight: "50vh" }}>
+        <div className="flex-fill scrollbox">
+          {isLoading && <LoadingState className="" />}
+          {!isLoading && !hasResults && (
+            <BigMessage icon="fa-search" message="No items match your search." className="" />
+          )}
+          {!isLoading && hasResults && (
+            <ItemsList
+              // @ts-expect-error ts-migrate(2322) FIXME: Type 'boolean | ((searchTerm: any) => void) | null... Remove this comment to see the full error message
+              items={items}
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '(item: any) => any' is not assignable to typ... Remove this comment to see the full error message
+              renderItem={(item: any) => renderItem(item, { isSelected: isItemSelected(item) })}
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '(item: any) => void' is not assignable to ty... Remove this comment to see the full error message
+              onItemClick={toggleItem}
+            />
+          )}
+        </div>
+        {renderStagedItem && (
+          <div className="w-50 m-l-20 scrollbox">
+            {selectedItems.length > 0 && (
+              <ItemsList
+                items={selectedItems}
+                // @ts-expect-error ts-migrate(2322) FIXME: Type '(item: any) => any' is not assignable to typ... Remove this comment to see the full error message
+                renderItem={(item: any) => renderStagedItem(item, { isSelected: true })}
+                // @ts-expect-error ts-migrate(2322) FIXME: Type '(item: any) => void' is not assignable to ty... Remove this comment to see the full error message
+                onItemClick={toggleItem}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+SelectItemsDialog.defaultProps = {
+  dialogTitle: "Add Items",
+  inputPlaceholder: "Search...",
+  selectedItemsTitle: "Selected items",
+  itemKey: (item: any) => item.id,
+  renderItem: () => "",
+  renderStagedItem: null, // hidden by default
+  width: "80%",
+  extraFooterContent: null,
+  showCount: false,
+};
+
+export default wrapDialog(SelectItemsDialog);

client/app/components/SelectWithVirtualScroll.tsx

@@ -9,7 +9,7 @@ interface VirtualScrollLabeledValue extends LabeledValue {
   label: string;
 }
 
-interface VirtualScrollSelectProps extends Omit<SelectProps<string>, "optionFilterProp" | "children"> {
+interface VirtualScrollSelectProps extends SelectProps<string> {
   options: Array<VirtualScrollLabeledValue>;
 }
 function SelectWithVirtualScroll({ options, ...props }: VirtualScrollSelectProps): JSX.Element {
@@ -32,14 +32,7 @@ function SelectWithVirtualScroll({ options, ...props }: VirtualScrollSelectProps
     return false;
   }, [options]);
 
-  return (
-    <AntdSelect<string>
-      dropdownMatchSelectWidth={dropdownMatchSelectWidth}
-      options={options}
-      optionFilterProp="label" // as this component expects "options" prop
-      {...props}
-    />
-  );
+  return <AntdSelect<string> dropdownMatchSelectWidth={dropdownMatchSelectWidth} options={options} {...props} />;
 }
 
 export default SelectWithVirtualScroll;

client/app/components/SettingsWrapper.tsx

@@ -5,20 +5,24 @@ import Link from "@/components/Link";
 import location from "@/services/location";
 import settingsMenu from "@/services/settingsMenu";
 
-function wrapSettingsTab(id, options, WrappedComponent) {
+function wrapSettingsTab(id: any, options: any, WrappedComponent: any) {
   settingsMenu.add(id, options);
 
-  return function SettingsTab(props) {
+  return function SettingsTab(props: any) {
     const activeItem = settingsMenu.getActiveItem(location.path);
     return (
       <div className="settings-screen">
         <div className="container">
           <PageHeader title="Settings" />
           <div className="bg-white tiled">
+            {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'number | ... Remove this comment to see the full error message */}
             <Menu selectedKeys={[activeItem && activeItem.title]} selectable={false} mode="horizontal">
               {settingsMenu.getAvailableItems().map(item => (
+                // @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'number | ... Remove this comment to see the full error message
                 <Menu.Item key={item.title}>
+                  {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'path' does not exist on type 'number | (... Remove this comment to see the full error message */}
                   <Link href={item.path} data-test="SettingsScreenItem">
+                    {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'number | ... Remove this comment to see the full error message */}
                     {item.title}
                   </Link>
                 </Menu.Item>

client/app/components/TagsList.less

@@ -1,4 +1,4 @@
-@import (reference, less) "~@/assets/less/ant";
+@import "~@/assets/less/ant";
 
 .tags-list {
   .tags-list-title {
@@ -7,14 +7,13 @@
     justify-content: space-between;
     align-items: center;
 
-    .tags-list-label {
+    label {
       display: block;
       white-space: nowrap;
       margin: 0;
     }
 
-    a,
-    .plain-button {
+    a {
       display: block;
       white-space: nowrap;
       cursor: pointer;
@@ -44,15 +43,5 @@
         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

@@ -4,7 +4,6 @@ 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";
 
@@ -78,12 +77,12 @@ function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps)
   return (
     <div className="tags-list">
       <div className="tags-list-title">
-        <span className="tags-list-label">Tags</span>
+        <label>Tags</label>
         {showUnselectAll && selectedTags.length > 0 && (
-          <PlainButton type="link" onClick={unselectAll}>
+          <a onClick={unselectAll}>
             <CloseOutlinedIcon />
             clear selection
-          </PlainButton>
+          </a>
         )}
       </div>
 
@@ -91,12 +90,12 @@ function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps)
         <Menu className="invert-stripe-position" mode="inline" selectedKeys={selectedTags}>
           {map(allTags, tag => (
             <Menu.Item key={tag.name} className="m-0">
-              <PlainButton
+              <a
                 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>
+              </a>
             </Menu.Item>
           ))}
         </Menu>

client/app/components/TimeAgo.tsx

@@ -1,19 +1,30 @@
 import moment from "moment";
 import { isNil } from "lodash";
 import React, { useEffect, useMemo, useState } from "react";
-import PropTypes from "prop-types";
+// @ts-expect-error ts-migrate(6133) FIXME: 'Moment' is declared but its value is never read.
 import { Moment } from "@/components/proptypes";
 import { clientConfig } from "@/services/auth";
-import Tooltip from "@/components/Tooltip";
+import Tooltip from "antd/lib/tooltip";
 
-function toMoment(value) {
+function toMoment(value: any) {
   value = !isNil(value) ? moment(value) : null;
   return value && value.isValid() ? value : null;
 }
 
-export default function TimeAgo({ date, placeholder, autoUpdate, variation }) {
+type OwnProps = {
+    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
+    date?: string | number | any | Moment;
+    placeholder?: string;
+    autoUpdate?: boolean;
+    variation?: "timeAgoInTooltip";
+};
+
+type Props = OwnProps & typeof TimeAgo.defaultProps;
+
+export default function TimeAgo({ date, placeholder, autoUpdate, variation }: Props) {
   const startDate = toMoment(date);
   const [value, setValue] = useState(null);
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'dateTimeFormat' does not exist on type '... Remove this comment to see the full error message
   const title = useMemo(() => (startDate ? startDate.format(clientConfig.dateTimeFormat) : null), [startDate]);
 
   useEffect(() => {
@@ -42,13 +53,6 @@ export default function TimeAgo({ date, placeholder, autoUpdate, variation }) {
   );
 }
 
-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 = {
   date: null,
   placeholder: "",

client/app/components/Timer.tsx

@@ -1,9 +1,16 @@
 import React, { useMemo, useState, useEffect } from "react";
 import moment from "moment";
-import PropTypes from "prop-types";
+// @ts-expect-error ts-migrate(6133) FIXME: 'Moment' is declared but its value is never read.
 import { Moment } from "@/components/proptypes";
 
-export default function Timer({ from }) {
+type OwnProps = {
+    // @ts-expect-error ts-migrate(2749) FIXME: 'Moment' refers to a value, but is being used as a... Remove this comment to see the full error message
+    from?: string | number | any | Moment;
+};
+
+type Props = OwnProps & typeof Timer.defaultProps;
+
+export default function Timer({ from }: Props) {
   const startTime = useMemo(() => moment(from).valueOf(), [from]);
   const [value, setValue] = useState(null);
 
@@ -11,6 +18,7 @@ export default function Timer({ from }) {
     function update() {
       const diff = moment.now() - startTime;
       const format = diff > 1000 * 60 * 60 ? "HH:mm:ss" : "mm:ss"; // no HH under an hour
+      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
       setValue(moment.utc(diff).format(format));
     }
     update();
@@ -22,10 +30,6 @@ export default function Timer({ from }) {
   return <span className="rd-timer">{value}</span>;
 }
 
-Timer.propTypes = {
-  from: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date), Moment]),
-};
-
 Timer.defaultProps = {
   from: null,
 };

client/app/components/Tooltip.tsx

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

@@ -1,12 +1,21 @@
 import { map } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 import Tag from "antd/lib/tag";
 import Link from "@/components/Link";
 
 import "./UserGroups.less";
 
-export default function UserGroups({ groups, linkGroups, ...props }) {
+type OwnProps = {
+    groups?: {
+        id: number | string;
+        name?: string;
+    }[];
+    linkGroups?: boolean;
+};
+
+type Props = OwnProps & typeof UserGroups.defaultProps;
+
+export default function UserGroups({ groups, linkGroups, ...props }: Props) {
   return (
     <div className="user-groups" {...props}>
       {map(groups, group => (
@@ -16,16 +25,6 @@ export default function UserGroups({ groups, linkGroups, ...props }) {
   );
 }
 
-UserGroups.propTypes = {
-  groups: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      name: PropTypes.string,
-    })
-  ),
-  linkGroups: PropTypes.bool,
-};
-
 UserGroups.defaultProps = {
   groups: [],
   linkGroups: true,

client/app/components/admin/Layout.tsx

@@ -1,12 +1,18 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Menu from "antd/lib/menu";
 import PageHeader from "@/components/PageHeader";
 import Link from "@/components/Link";
 
 import "./layout.less";
 
-export default function Layout({ activeTab, children }) {
+type OwnProps = {
+    activeTab?: string;
+    children?: React.ReactNode;
+};
+
+type Props = OwnProps & typeof Layout.defaultProps;
+
+export default function Layout({ activeTab, children }: Props) {
   return (
     <div className="admin-page-layout">
       <div className="container">
@@ -30,11 +36,6 @@ export default function Layout({ activeTab, children }) {
   );
 }
 
-Layout.propTypes = {
-  activeTab: PropTypes.string,
-  children: PropTypes.node,
-};
-
 Layout.defaultProps = {
   activeTab: "system_status",
   children: null,

client/app/components/admin/RQStatus.tsx

@@ -1,6 +1,5 @@
 import { map } from "lodash";
 import React from "react";
-import PropTypes from "prop-types";
 
 import Badge from "antd/lib/badge";
 import Card from "antd/lib/card";
@@ -8,9 +7,17 @@ import Spin from "antd/lib/spin";
 import Table from "antd/lib/table";
 import { Columns } from "@/components/items-list/components/ItemsTable";
 
+type OwnCounterCardProps = {
+    title: string;
+    value?: number | string;
+    loading: boolean;
+};
+
+type CounterCardProps = OwnCounterCardProps & typeof CounterCard.defaultProps;
+
 // CounterCard
 
-export function CounterCard({ title, value, loading }) {
+export function CounterCard({ title, value, loading }: CounterCardProps) {
   return (
     <Spin spinning={loading}>
       <Card>
@@ -21,12 +28,6 @@ export function CounterCard({ title, value, loading }) {
   );
 }
 
-CounterCard.propTypes = {
-  title: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  loading: PropTypes.bool.isRequired,
-};
-
 CounterCard.defaultProps = {
   value: "",
 };
@@ -35,11 +36,11 @@ CounterCard.defaultProps = {
 
 const queryJobsColumns = [
   { title: "Queue", dataIndex: "origin" },
-  { title: "Query ID", dataIndex: ["meta", "query_id"] },
-  { title: "Org ID", dataIndex: ["meta", "org_id"] },
-  { title: "Data Source ID", dataIndex: ["meta", "data_source_id"] },
-  { title: "User ID", dataIndex: ["meta", "user_id"] },
-  Columns.custom(scheduled => scheduled.toString(), { title: "Scheduled", dataIndex: ["meta", "scheduled"] }),
+  { title: "Query ID", dataIndex: "meta.query_id" },
+  { title: "Org ID", dataIndex: "meta.org_id" },
+  { title: "Data Source ID", dataIndex: "meta.data_source_id" },
+  { title: "User ID", dataIndex: "meta.user_id" },
+  Columns.custom((scheduled: any) => scheduled.toString(), { title: "Scheduled", dataIndex: "meta.scheduled" }),
   Columns.timeAgo({ title: "Start Time", dataIndex: "started_at" }),
   Columns.timeAgo({ title: "Enqueue Time", dataIndex: "enqueued_at" }),
 ];
@@ -53,12 +54,11 @@ const otherJobsColumns = [
 
 const workersColumns = [
   Columns.custom(
-    value => (
-      <span>
-        <Badge status={{ busy: "processing", idle: "default", started: "success", suspended: "warning" }[value]} />{" "}
-        {value}
-      </span>
-    ),
+    (value: any) => <span>
+      {/* @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
+      <Badge status={{ busy: "processing", idle: "default", started: "success", suspended: "warning" }[value]} />{" "}
+      {value}
+    </span>,
     { title: "State", dataIndex: "state" }
   ),
 ]
@@ -75,12 +75,27 @@ const workersColumns = [
 
 const queuesColumns = map(["Name", "Started", "Queued"], c => ({ title: c, dataIndex: c.toLowerCase() }));
 
-const TablePropTypes = {
-  loading: PropTypes.bool.isRequired,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+type WorkersTableProps = {
+    loading: boolean;
+    items: any[];
 };
 
-export function WorkersTable({ loading, items }) {
+type QueuesTableProps = {
+    loading: boolean;
+    items: any[];
+};
+
+type QueryJobsTableProps = {
+    loading: boolean;
+    items: any[];
+};
+
+type OtherJobsTableProps = {
+    loading: boolean;
+    items: any[];
+};
+
+export function WorkersTable({ loading, items }: WorkersTableProps) {
   return (
     <Table
       loading={loading}
@@ -96,9 +111,7 @@ export function WorkersTable({ loading, items }) {
   );
 }
 
-WorkersTable.propTypes = TablePropTypes;
-
-export function QueuesTable({ loading, items }) {
+export function QueuesTable({ loading, items }: QueuesTableProps) {
   return (
     <Table
       loading={loading}
@@ -114,9 +127,7 @@ export function QueuesTable({ loading, items }) {
   );
 }
 
-QueuesTable.propTypes = TablePropTypes;
-
-export function QueryJobsTable({ loading, items }) {
+export function QueryJobsTable({ loading, items }: QueryJobsTableProps) {
   return (
     <Table
       loading={loading}
@@ -132,9 +143,7 @@ export function QueryJobsTable({ loading, items }) {
   );
 }
 
-QueryJobsTable.propTypes = TablePropTypes;
-
-export function OtherJobsTable({ loading, items }) {
+export function OtherJobsTable({ loading, items }: OtherJobsTableProps) {
   return (
     <Table
       loading={loading}
@@ -149,5 +158,3 @@ export function OtherJobsTable({ loading, items }) {
     />
   );
 }
-
-OtherJobsTable.propTypes = TablePropTypes;

client/app/components/admin/StatusBlock.tsx

@@ -9,7 +9,9 @@ import TimeAgo from "@/components/TimeAgo";
 
 import { toHuman, prettySize } from "@/lib/utils";
 
-export function General({ info }) {
+export function General({
+  info
+}: any) {
   info = toPairs(info);
   return (
     <Card title="General" size="small">
@@ -19,6 +21,7 @@ export function General({ info }) {
           size="small"
           itemLayout="vertical"
           dataSource={info}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '([name, value]: [any, any]) => Element' is n... Remove this comment to see the full error message
           renderItem={([name, value]) => (
             <List.Item extra={<span className="badge">{value}</span>}>{toHuman(name)}</List.Item>
           )}
@@ -28,7 +31,9 @@ export function General({ info }) {
   );
 }
 
-export function DatabaseMetrics({ info }) {
+export function DatabaseMetrics({
+  info
+}: any) {
   return (
     <Card title="Redash Database" size="small">
       {info.length === 0 && <div className="text-muted text-center">No data</div>}
@@ -37,6 +42,7 @@ export function DatabaseMetrics({ info }) {
           size="small"
           itemLayout="vertical"
           dataSource={info}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '([name, size]: [any, any]) => Element' is no... Remove this comment to see the full error message
           renderItem={([name, size]) => (
             <List.Item extra={<span className="badge">{prettySize(size)}</span>}>{name}</List.Item>
           )}
@@ -46,7 +52,9 @@ export function DatabaseMetrics({ info }) {
   );
 }
 
-export function Queues({ info }) {
+export function Queues({
+  info
+}: any) {
   info = toPairs(info);
   return (
     <Card title="Queues" size="small">
@@ -56,6 +64,7 @@ export function Queues({ info }) {
           size="small"
           itemLayout="vertical"
           dataSource={info}
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '([name, queue]: [any, any]) => Element' is n... Remove this comment to see the full error message
           renderItem={([name, queue]) => (
             <List.Item extra={<span className="badge">{queue.size}</span>}>{name}</List.Item>
           )}
@@ -65,7 +74,9 @@ export function Queues({ info }) {
   );
 }
 
-export function Manager({ info }) {
+export function Manager({
+  info
+}: any) {
   const items = info
     ? [
         <List.Item