test with released eventlet

.circleci/Dockerfile.cypress

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

.circleci/config.yml

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

.circleci/docker-compose.circle.yml

@@ -1,4 +1,4 @@
-version: '2.2'
+version: '3'
 services:
   redash:
     build: ../

.circleci/docker-compose.cypress.yml

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

.gitignore

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

Dockerfile

@@ -3,17 +3,9 @@ FROM node:12 as frontend-builder
 # Controls whether to build the frontend assets
 ARG skip_frontend_build
 
-ENV CYPRESS_INSTALL_BINARY=0
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
-
 WORKDIR /frontend
 COPY package.json package-lock.json /frontend/
 COPY viz-lib /frontend/viz-lib
-
-# Controls whether to instrument code for coverage information
-ARG code_coverage
-ENV BABEL_ENV=${code_coverage:+test}
-
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
 
 COPY client /frontend/client

Makefile

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

bin/docker-entrypoint

@@ -32,7 +32,7 @@ server() {
   # Recycle gunicorn workers every n-th request. See http://docs.gunicorn.org/en/stable/settings.html#max-requests for more details.
   MAX_REQUESTS=${MAX_REQUESTS:-1000}
   MAX_REQUESTS_JITTER=${MAX_REQUESTS_JITTER:-100}
-  exec /usr/local/bin/gunicorn -b 0.0.0.0:5000 --name redash -w${REDASH_WEB_WORKERS:-4} redash.wsgi:app --max-requests $MAX_REQUESTS --max-requests-jitter $MAX_REQUESTS_JITTER
+  exec /usr/local/bin/gunicorn -b 0.0.0.0:5000 --name redash -w${REDASH_WEB_WORKERS:-4} redash.wsgi:app --max-requests $MAX_REQUESTS --max-requests-jitter $MAX_REQUESTS_JITTER --worker-class eventlet
 }
 
 create_db() {

client/.babelrc

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

client/.eslintrc.js

@@ -34,8 +34,6 @@ module.exports = {
         // Do not complain about useless contructors in declaration files
         "no-useless-constructor": "off",
         "@typescript-eslint/no-useless-constructor": "error",
-        // Many API fields and generated types use camelcase
-        "@typescript-eslint/camelcase": "off",
       },
     },
   ],

client/app/assets/less/ant.less

@@ -16,6 +16,7 @@
 @import "~antd/lib/pagination/style/index";
 @import "~antd/lib/table/style/index";
 @import "~antd/lib/popover/style/index";
+@import "~antd/lib/icon/style/index";
 @import "~antd/lib/tag/style/index";
 @import "~antd/lib/grid/style/index";
 @import "~antd/lib/switch/style/index";
@@ -30,7 +31,6 @@
 @import "~antd/lib/badge/style/index";
 @import "~antd/lib/card/style/index";
 @import "~antd/lib/spin/style/index";
-@import "~antd/lib/skeleton/style/index";
 @import "~antd/lib/tabs/style/index";
 @import "~antd/lib/notification/style/index";
 @import "~antd/lib/collapse/style/index";
@@ -401,14 +401,3 @@
 .@{checkbox-prefix-cls} + span {
   padding-right: 0;
 }
-
-// make sure Multiple select has room for icons
-.@{select-prefix-cls}-multiple {
-  &.@{select-prefix-cls}-show-arrow,
-  &.@{select-prefix-cls}-show-search,
-  &.@{select-prefix-cls}-loading {
-    .@{select-prefix-cls}-selector {
-      padding-right: 30px;
-    }
-  }
-}

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

@@ -23,10 +23,6 @@
     padding: 5px 8px;
   }
 
-  .ant-form-item-explain {
-    margin-top: 10px;
-  }
-
   .alert-last-triggered {
     color: @headings-color;
   }

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

@@ -78,6 +78,8 @@ strong {
   }
 }
 
+// Fixed width layout for specific pages
+
 .settings-screen,
 .home-page,
 .page-dashboard-list,
@@ -87,7 +89,7 @@ strong {
 .admin-page-layout {
   .container {
     width: 100%;
-    max-width: none;
+    max-width: 1200px;
   }
 }
 

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

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

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

@@ -2,22 +2,13 @@ import { first } from "lodash";
 import React, { useState } from "react";
 import Button from "antd/lib/button";
 import Menu from "antd/lib/menu";
-import Link from "@/components/Link";
+import Icon from "antd/lib/icon";
 import HelpTrigger from "@/components/HelpTrigger";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
 import logoUrl from "@/assets/images/redash_icon_small.png";
 
-import DesktopOutlinedIcon from "@ant-design/icons/DesktopOutlined";
-import CodeOutlinedIcon from "@ant-design/icons/CodeOutlined";
-import AlertOutlinedIcon from "@ant-design/icons/AlertOutlined";
-import PlusOutlinedIcon from "@ant-design/icons/PlusOutlined";
-import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
-import SettingOutlinedIcon from "@ant-design/icons/SettingOutlined";
-import MenuUnfoldOutlinedIcon from "@ant-design/icons/MenuUnfoldOutlined";
-import MenuFoldOutlinedIcon from "@ant-design/icons/MenuFoldOutlined";
-
 import VersionInfo from "./VersionInfo";
 import "./DesktopNavbar.less";
 
@@ -46,36 +37,34 @@ export default function DesktopNavbar() {
   return (
     <div className="desktop-navbar">
       <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-logo">
-        <div>
-          <Link href="./">
-            <img src={logoUrl} alt="Redash" />
-          </Link>
-        </div>
+        <a href="./">
+          <img src={logoUrl} alt="Redash" />
+        </a>
       </NavbarSection>
 
       <NavbarSection inlineCollapsed={collapsed}>
         {currentUser.hasPermission("list_dashboards") && (
           <Menu.Item key="dashboards">
-            <Link href="dashboards">
-              <DesktopOutlinedIcon />
+            <a href="dashboards">
+              <Icon type="desktop" />
               <span>Dashboards</span>
-            </Link>
+            </a>
           </Menu.Item>
         )}
         {currentUser.hasPermission("view_query") && (
           <Menu.Item key="queries">
-            <Link href="queries">
-              <CodeOutlinedIcon />
+            <a href="queries">
+              <Icon type="code" />
               <span>Queries</span>
-            </Link>
+            </a>
           </Menu.Item>
         )}
         {currentUser.hasPermission("list_alerts") && (
           <Menu.Item key="alerts">
-            <Link href="alerts">
-              <AlertOutlinedIcon />
+            <a href="alerts">
+              <Icon type="alert" />
               <span>Alerts</span>
-            </Link>
+            </a>
           </Menu.Item>
         )}
       </NavbarSection>
@@ -89,16 +78,16 @@ export default function DesktopNavbar() {
             title={
               <React.Fragment>
                 <span data-test="CreateButton">
-                  <PlusOutlinedIcon />
+                  <Icon type="plus" />
                   <span>Create</span>
                 </span>
               </React.Fragment>
             }>
             {canCreateQuery && (
               <Menu.Item key="new-query">
-                <Link href="queries/new" data-test="CreateQueryMenuItem">
+                <a href="queries/new" data-test="CreateQueryMenuItem">
                   New Query
-                </Link>
+                </a>
               </Menu.Item>
             )}
             {canCreateDashboard && (
@@ -110,9 +99,9 @@ export default function DesktopNavbar() {
             )}
             {canCreateAlert && (
               <Menu.Item key="new-alert">
-                <Link data-test="CreateAlertMenuItem" href="alerts/new">
+                <a data-test="CreateAlertMenuItem" href="alerts/new">
                   New Alert
-                </Link>
+                </a>
               </Menu.Item>
             )}
           </Menu.SubMenu>
@@ -122,16 +111,16 @@ export default function DesktopNavbar() {
       <NavbarSection inlineCollapsed={collapsed}>
         <Menu.Item key="help">
           <HelpTrigger showTooltip={false} type="HOME">
-            <QuestionCircleOutlinedIcon />
+            <Icon type="question-circle" />
             <span>Help</span>
           </HelpTrigger>
         </Menu.Item>
         {firstSettingsTab && (
           <Menu.Item key="settings">
-            <Link href={firstSettingsTab.path} data-test="SettingsLink">
-              <SettingOutlinedIcon />
+            <a href={firstSettingsTab.path} data-test="SettingsLink">
+              <Icon type="setting" />
               <span>Settings</span>
-            </Link>
+            </a>
           </Menu.Item>
         )}
         <Menu.Divider />
@@ -148,11 +137,11 @@ export default function DesktopNavbar() {
             </span>
           }>
           <Menu.Item key="profile">
-            <Link href="users/me">Profile</Link>
+            <a href="users/me">Profile</a>
           </Menu.Item>
           {currentUser.hasPermission("super_admin") && (
             <Menu.Item key="status">
-              <Link href="admin/status">System Status</Link>
+              <a href="admin/status">System Status</a>
             </Menu.Item>
           )}
           <Menu.Divider />
@@ -169,7 +158,7 @@ export default function DesktopNavbar() {
       </NavbarSection>
 
       <Button onClick={() => setCollapsed(!collapsed)} className="desktop-navbar-collapse-button">
-        {collapsed ? <MenuUnfoldOutlinedIcon /> : <MenuFoldOutlinedIcon />}
+        <Icon type={collapsed ? "menu-unfold" : "menu-fold"} />
       </Button>
     </div>
   );

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

@@ -2,10 +2,9 @@ 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 Icon from "antd/lib/icon";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
-import Link from "@/components/Link";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
 import logoUrl from "@/assets/images/redash_icon_small.png";
@@ -18,9 +17,9 @@ export default function MobileNavbar({ getPopupContainer }) {
   return (
     <div className="mobile-navbar">
       <div className="mobile-navbar-logo">
-        <Link href="./">
+        <a href="./">
           <img src={logoUrl} alt="Redash" />
-        </Link>
+        </a>
       </div>
       <div>
         <Dropdown
@@ -31,39 +30,39 @@ export default function MobileNavbar({ getPopupContainer }) {
             <Menu mode="vertical" theme="dark" selectable={false} className="mobile-navbar-menu">
               {currentUser.hasPermission("list_dashboards") && (
                 <Menu.Item key="dashboards">
-                  <Link href="dashboards">Dashboards</Link>
+                  <a href="dashboards">Dashboards</a>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("view_query") && (
                 <Menu.Item key="queries">
-                  <Link href="queries">Queries</Link>
+                  <a href="queries">Queries</a>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("list_alerts") && (
                 <Menu.Item key="alerts">
-                  <Link href="alerts">Alerts</Link>
+                  <a href="alerts">Alerts</a>
                 </Menu.Item>
               )}
               <Menu.Item key="profile">
-                <Link href="users/me">Edit Profile</Link>
+                <a href="users/me">Edit Profile</a>
               </Menu.Item>
               <Menu.Divider />
               {firstSettingsTab && (
                 <Menu.Item key="settings">
-                  <Link href={firstSettingsTab.path}>Settings</Link>
+                  <a href={firstSettingsTab.path}>Settings</a>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("super_admin") && (
                 <Menu.Item key="status">
-                  <Link href="admin/status">System Status</Link>
+                  <a href="admin/status">System Status</a>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("super_admin") && <Menu.Divider />}
               <Menu.Item key="help">
                 {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <Link href="https://redash.io/help" target="_blank" rel="noopener">
+                <a href="https://redash.io/help" target="_blank" rel="noopener">
                   Help
-                </Link>
+                </a>
               </Menu.Item>
               <Menu.Item key="logout" onClick={() => Auth.logout()}>
                 Log out
@@ -71,7 +70,7 @@ export default function MobileNavbar({ getPopupContainer }) {
             </Menu>
           }>
           <Button className="mobile-navbar-toggle-button" ghost>
-            <MenuOutlinedIcon />
+            <Icon type="menu" />
           </Button>
         </Dropdown>
       </div>

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

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from "@/components/Link";
 import { clientConfig, currentUser } from "@/services/auth";
 import frontendVersion from "@/version.json";
 
@@ -13,10 +12,10 @@ export default function VersionInfo() {
       {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">
+          <a href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
             Update Available
             <i className="fa fa-external-link m-l-5" />
-          </Link>
+          </a>
         </div>
       )}
     </React.Fragment>

client/app/components/ApplicationArea/Router.jsx

@@ -1,5 +1,5 @@
 import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
-import React, { useState, useEffect, useRef, useContext } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import UniversalRouter from "universal-router";
 import ErrorBoundary from "@redash/viz/lib/components/ErrorBoundary";
@@ -14,12 +14,6 @@ function generateRouteKey() {
     .substr(2);
 }
 
-export const CurrentRouteContext = React.createContext(null);
-
-export function useCurrentRoute() {
-  return useContext(CurrentRouteContext);
-}
-
 export function stripBase(href) {
   // Resolve provided link and '' (root) relative to document's base.
   // If provided href is not related to current document (does not
@@ -59,7 +53,7 @@ export default function Router({ routes, onRouteChange }) {
           errorHandlerRef.current.reset();
         }
 
-        const pathname = stripBase(location.path) || "/";
+        const pathname = stripBase(location.path);
 
         // This is a optimization for route resolver: if current route was already resolved
         // from this path - do nothing. It also prevents router from using outdated route in a case
@@ -115,11 +109,9 @@ export default function Router({ routes, onRouteChange }) {
   }
 
   return (
-    <CurrentRouteContext.Provider value={currentRoute}>
-      <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
-        {currentRoute.render(currentRoute)}
-      </ErrorBoundary>
-    </CurrentRouteContext.Provider>
+    <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
+      {currentRoute.render(currentRoute)}
+    </ErrorBoundary>
   );
 }
 

client/app/components/ApplicationArea/routeWithApiKeySession.jsx

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

client/app/components/ApplicationArea/routeWithUserSession.jsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import ErrorBoundary, { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
+import { Auth } from "@/services/auth";
+import organizationStatus from "@/services/organizationStatus";
+import ApplicationLayout from "./ApplicationLayout";
+import ErrorMessage from "./ErrorMessage";
+
+// This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
+// that contains:
+// - `currentRoute.routeParams`
+// - `pageTitle` field which is equal to `currentRoute.title`
+// - `onError` field which is a `handleError` method of nearest error boundary
+
+function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(!!Auth.isAuthenticated());
+
+  useEffect(() => {
+    let isCancelled = false;
+    Promise.all([Auth.requireSession(), organizationStatus.refresh()])
+      .then(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(!!Auth.isAuthenticated());
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(false);
+        }
+      });
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (bodyClass) {
+      document.body.classList.toggle(bodyClass, true);
+      return () => {
+        document.body.classList.toggle(bodyClass, false);
+      };
+    }
+  }, [bodyClass]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <ApplicationLayout>
+      <React.Fragment key={currentRoute.key}>
+        <ErrorBoundary renderError={error => <ErrorMessage error={error} />}>
+          <ErrorBoundaryContext.Consumer>
+            {({ handleError }) =>
+              renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
+            }
+          </ErrorBoundaryContext.Consumer>
+        </ErrorBoundary>
+      </React.Fragment>
+    </ApplicationLayout>
+  );
+}
+
+UserSessionWrapper.propTypes = {
+  bodyClass: PropTypes.string,
+  renderChildren: PropTypes.func,
+};
+
+UserSessionWrapper.defaultProps = {
+  bodyClass: null,
+  renderChildren: () => null,
+};
+
+export default function routeWithUserSession({ render, bodyClass, ...rest }) {
+  return {
+    ...rest,
+    render: currentRoute => (
+      <UserSessionWrapper bodyClass={bodyClass} currentRoute={currentRoute} renderChildren={render} />
+    ),
+  };
+}

client/app/components/ApplicationArea/routeWithUserSession.tsx

@@ -1,108 +0,0 @@
-import React, { useEffect, useState } from "react";
-// @ts-expect-error (Must be removed after adding @redash/viz typing)
-import ErrorBoundary, { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
-import { Auth } from "@/services/auth";
-import { policy } from "@/services/policy";
-import { CurrentRoute } from "@/services/routes";
-import organizationStatus from "@/services/organizationStatus";
-import DynamicComponent from "@/components/DynamicComponent";
-import ApplicationLayout from "./ApplicationLayout";
-import ErrorMessage from "./ErrorMessage";
-
-export type UserSessionWrapperRenderChildrenProps<P> = {
-  pageTitle?: string;
-  onError: (error: Error) => void;
-} & P;
-
-export interface UserSessionWrapperProps<P> {
-  render: (props: UserSessionWrapperRenderChildrenProps<P>) => React.ReactNode;
-  currentRoute: CurrentRoute<P>;
-  bodyClass?: string;
-}
-
-// This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
-// that contains:
-// - `currentRoute.routeParams`
-// - `pageTitle` field which is equal to `currentRoute.title`
-// - `onError` field which is a `handleError` method of nearest error boundary
-
-export function UserSessionWrapper<P>({ bodyClass, currentRoute, render }: UserSessionWrapperProps<P>) {
-  const [isAuthenticated, setIsAuthenticated] = useState(!!Auth.isAuthenticated());
-  useEffect(() => {
-    let isCancelled = false;
-    Promise.all([Auth.requireSession(), organizationStatus.refresh(), policy.refresh()])
-      .then(() => {
-        if (!isCancelled) {
-          setIsAuthenticated(!!Auth.isAuthenticated());
-        }
-      })
-      .catch(() => {
-        if (!isCancelled) {
-          setIsAuthenticated(false);
-        }
-      });
-    return () => {
-      isCancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (bodyClass) {
-      document.body.classList.toggle(bodyClass, true);
-      return () => {
-        document.body.classList.toggle(bodyClass, false);
-      };
-    }
-  }, [bodyClass]);
-
-  if (!isAuthenticated) {
-    return null;
-  }
-
-  return (
-    <ApplicationLayout>
-      <React.Fragment key={currentRoute.key}>
-        <ErrorBoundary renderError={(error: Error) => <ErrorMessage error={error} />}>
-          <ErrorBoundaryContext.Consumer>
-            {({ handleError }: { handleError: UserSessionWrapperRenderChildrenProps<P>["onError"] }) =>
-              render({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
-            }
-          </ErrorBoundaryContext.Consumer>
-        </ErrorBoundary>
-      </React.Fragment>
-    </ApplicationLayout>
-  );
-}
-
-export type RouteWithUserSessionOptions<P> = {
-  render: (props: UserSessionWrapperRenderChildrenProps<P>) => React.ReactNode;
-  bodyClass?: string;
-  title: string;
-  path: string;
-};
-
-export const UserSessionWrapperDynamicComponentName = "UserSessionWrapper";
-
-export default function routeWithUserSession<P extends {} = {}>({
-  render: originalRender,
-  bodyClass,
-  ...rest
-}: RouteWithUserSessionOptions<P>) {
-  return {
-    ...rest,
-    render: (currentRoute: CurrentRoute<P>) => {
-      const props = {
-        render: originalRender,
-        bodyClass,
-        currentRoute,
-      };
-      return (
-        <DynamicComponent
-          {...props}
-          name={UserSessionWrapperDynamicComponentName}
-          fallback={<UserSessionWrapper {...props} />}
-        />
-      );
-    },
-  };
-}

client/app/components/BeaconConsent.jsx

@@ -3,7 +3,6 @@ import Card from "antd/lib/card";
 import Button from "antd/lib/button";
 import Typography from "antd/lib/typography";
 import { clientConfig } from "@/services/auth";
-import Link from "@/components/Link";
 import HelpTrigger from "@/components/HelpTrigger";
 import DynamicComponent from "@/components/DynamicComponent";
 import OrgSettings from "@/services/organizationSettings";
@@ -66,8 +65,8 @@ function BeaconConsent() {
           </div>
           <div className="m-t-15">
             <Text type="secondary">
-              You can change this setting anytime from the{" "}
-              <Link href="settings/organization">Organization Settings</Link> page.
+              You can change this setting anytime from the <a href="settings/organization">Organization Settings</a>{" "}
+              page.
             </Text>
           </div>
         </Card>

client/app/components/CodeBlock.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Tooltip from "antd/lib/tooltip";
-import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
 import "./CodeBlock.less";
 
 export default class CodeBlock extends React.Component {
@@ -60,7 +59,7 @@ export default class CodeBlock extends React.Component {
 
     const copyButton = (
       <Tooltip title={this.state.copied || "Copy"}>
-        <Button icon={<CopyOutlinedIcon />} type="dashed" size="small" onClick={this.copy} />
+        <Button icon="copy" type="dashed" size="small" onClick={this.copy} />
       </Tooltip>
     );
 

client/app/components/CreateSourceDialog.jsx

@@ -7,7 +7,6 @@ import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Steps from "antd/lib/steps";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import Link from "@/components/Link";
 import { PreviewCard } from "@/components/PreviewCard";
 import EmptyState from "@/components/items-list/components/EmptyState";
 import DynamicForm from "@/components/dynamic-form/DynamicForm";
@@ -119,9 +118,9 @@ class CreateSourceDialog extends React.Component {
         {selectedType.type === "databricks" && (
           <small>
             By using the Databricks Data Source you agree to the Databricks JDBC/ODBC{" "}
-            <Link href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
+            <a href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
               Driver Download Terms and Conditions
-            </Link>
+            </a>
             .
           </small>
         )}
@@ -155,7 +154,7 @@ class CreateSourceDialog extends React.Component {
         footer={
           currentStep === StepEnum.SELECT_TYPE
             ? [
-                <Button key="cancel" onClick={() => dialog.dismiss()} data-test="CreateSourceCancelButton">
+                <Button key="cancel" onClick={() => dialog.dismiss()}>
                   Cancel
                 </Button>,
                 <Button key="submit" type="primary" disabled>
@@ -172,7 +171,7 @@ class CreateSourceDialog extends React.Component {
                   form="sourceForm"
                   type="primary"
                   loading={savingSource}
-                  data-test="CreateSourceSaveButton">
+                  data-test="CreateSourceButton">
                   Create
                 </Button>,
               ]

client/app/components/DialogWrapper.d.ts

@@ -1,30 +0,0 @@
-import { ModalProps } from "antd/lib/modal/Modal";
-
-export interface DialogProps<ROk, RCancel> {
-  props: ModalProps;
-  close: (result: ROk) => void;
-  dismiss: (result: RCancel) => void;
-}
-
-export type DialogWrapperChildProps<ROk, RCancel> = {
-  dialog: DialogProps<ROk, RCancel>;
-};
-
-export type DialogComponentType<ROk = void, P = {}, RCancel = void> = React.ComponentType<
-  DialogWrapperChildProps<ROk, RCancel> & P
->;
-
-export function wrap<ROk = void, P = {}, RCancel = void>(
-  DialogComponent: DialogComponentType<ROk, P, RCancel>
-): {
-  Component: DialogComponentType<ROk, P, RCancel>;
-  showModal: (
-    props?: P
-  ) => {
-    update: (props: P) => void;
-    onClose: (handler: (result: ROk) => Promise<void>) => void;
-    onDismiss: (handler: (result: RCancel) => Promise<void>) => void;
-    close: (result: ROk) => void;
-    dismiss: (result: RCancel) => void;
-  };
-};

client/app/components/DynamicComponent.jsx

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

client/app/components/EditParameterSettingsDialog.jsx

@@ -100,7 +100,7 @@ function EditParameterSettingsDialog(props) {
     return true;
   }
 
-  function onConfirm() {
+  function onConfirm(e) {
     // update title to default
     if (!param.title) {
       // forced to do this cause param won't update in time for save
@@ -109,6 +109,8 @@ function EditParameterSettingsDialog(props) {
     }
 
     props.dialog.close(param);
+
+    e.preventDefault(); // stops form redirect
   }
 
   return (
@@ -130,7 +132,7 @@ function EditParameterSettingsDialog(props) {
           {isNew ? "Add Parameter" : "OK"}
         </Button>,
       ]}>
-      <Form layout="horizontal" onFinish={onConfirm} id="paramForm">
+      <Form layout="horizontal" onSubmit={onConfirm} id="paramForm">
         {isNew && (
           <NameInput
             name={param.name}

client/app/components/EditVisualizationButton/QueryControlDropdown.jsx

@@ -3,13 +3,7 @@ import PropTypes from "prop-types";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Button from "antd/lib/button";
-import { clientConfig } from "@/services/auth";
-
-import PlusCircleFilledIcon from "@ant-design/icons/PlusCircleFilled";
-import ShareAltOutlinedIcon from "@ant-design/icons/ShareAltOutlined";
-import FileOutlinedIcon from "@ant-design/icons/FileOutlined";
-import FileExcelOutlinedIcon from "@ant-design/icons/FileExcelOutlined";
-import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
+import Icon from "antd/lib/icon";
 
 import QueryResultsLink from "./QueryResultsLink";
 
@@ -19,14 +13,14 @@ export default function QueryControlDropdown(props) {
       {!props.query.isNew() && (!props.query.is_draft || !props.query.is_archived) && (
         <Menu.Item>
           <a target="_self" onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
-            <PlusCircleFilledIcon /> Add to Dashboard
+            <Icon type="plus-circle" theme="filled" /> Add to Dashboard
           </a>
         </Menu.Item>
       )}
-      {!clientConfig.disablePublicUrls && !props.query.isNew() && (
+      {!props.query.isNew() && (
         <Menu.Item>
           <a onClick={() => props.showEmbedDialog(props.query, props.selectedTab)} data-test="ShowEmbedDialogButton">
-            <ShareAltOutlinedIcon /> Embed Elsewhere
+            <Icon type="share-alt" /> Embed Elsewhere
           </a>
         </Menu.Item>
       )}
@@ -38,7 +32,7 @@ export default function QueryControlDropdown(props) {
           queryResult={props.queryResult}
           embed={props.embed}
           apiKey={props.apiKey}>
-          <FileOutlinedIcon /> Download as CSV File
+          <Icon type="file" /> Download as CSV File
         </QueryResultsLink>
       </Menu.Item>
       <Menu.Item>
@@ -49,7 +43,7 @@ export default function QueryControlDropdown(props) {
           queryResult={props.queryResult}
           embed={props.embed}
           apiKey={props.apiKey}>
-          <FileOutlinedIcon /> Download as TSV File
+          <Icon type="file" /> Download as TSV File
         </QueryResultsLink>
       </Menu.Item>
       <Menu.Item>
@@ -60,7 +54,7 @@ export default function QueryControlDropdown(props) {
           queryResult={props.queryResult}
           embed={props.embed}
           apiKey={props.apiKey}>
-          <FileExcelOutlinedIcon /> Download as Excel File
+          <Icon type="file-excel" /> Download as Excel File
         </QueryResultsLink>
       </Menu.Item>
     </Menu>
@@ -69,7 +63,7 @@ export default function QueryControlDropdown(props) {
   return (
     <Dropdown trigger={["click"]} overlay={menu} overlayClassName="query-control-dropdown-overlay">
       <Button data-test="QueryControlDropdownButton">
-        <EllipsisOutlinedIcon rotate={90} />
+        <Icon type="ellipsis" rotate={90} />
       </Button>
     </Dropdown>
   );

client/app/components/EditVisualizationButton/QueryResultsLink.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Link from "@/components/Link";
 
 export default function QueryResultsLink(props) {
   let href = "";
@@ -18,9 +17,9 @@ export default function QueryResultsLink(props) {
   }
 
   return (
-    <Link target="_blank" rel="noopener noreferrer" disabled={props.disabled} href={href} download>
+    <a target="_blank" rel="noopener noreferrer" disabled={props.disabled} href={href} download>
       {props.children}
-    </Link>
+    </a>
   );
 }
 

client/app/components/EditVisualizationButton/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
-import FormOutlinedIcon from "@ant-design/icons/FormOutlined";
+import Icon from "antd/lib/icon";
 
 export default function EditVisualizationButton(props) {
   return (
@@ -9,7 +9,7 @@ export default function EditVisualizationButton(props) {
       data-test="EditVisualization"
       className="edit-visualization"
       onClick={() => props.openVisualizationEditor(props.selectedTab)}>
-      <FormOutlinedIcon />
+      <Icon type="form" />
       <span className="hidden-xs hidden-s hidden-m">Edit Visualization</span>
     </Button>
   );

client/app/components/HelpTrigger.jsx

@@ -4,8 +4,7 @@ import PropTypes from "prop-types";
 import cx from "classnames";
 import Tooltip from "antd/lib/tooltip";
 import Drawer from "antd/lib/drawer";
-import Link from "@/components/Link";
-import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
+import Icon from "antd/lib/icon";
 import BigMessage from "@/components/BigMessage";
 import DynamicComponent from "@/components/DynamicComponent";
 
@@ -150,9 +149,9 @@ export default class HelpTrigger extends React.Component {
               {this.props.children}
             </a>
           ) : (
-            <Link href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
+            <a href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
               {this.props.children}
-            </Link>
+            </a>
           )}
         </Tooltip>
         <Drawer
@@ -168,14 +167,14 @@ export default class HelpTrigger extends React.Component {
               {url && (
                 <Tooltip title="Open page in a new window" placement="left">
                   {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                  <Link href={url} target="_blank">
+                  <a href={url} target="_blank">
                     <i className="fa fa-external-link" />
-                  </Link>
+                  </a>
                 </Tooltip>
               )}
               <Tooltip title="Close" placement="bottom">
                 <a onClick={this.closeDrawer}>
-                  <CloseOutlinedIcon />
+                  <Icon type="close" />
                 </a>
               </Tooltip>
             </div>
@@ -202,9 +201,9 @@ export default class HelpTrigger extends React.Component {
                 Something went wrong.
                 <br />
                 {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <Link href={this.state.error} target="_blank" rel="noopener">
+                <a href={this.state.error} target="_blank" rel="noopener">
                   Click here
-                </Link>{" "}
+                </a>{" "}
                 to open the page in a new window.
               </BigMessage>
             )}

client/app/components/InputWithCopy.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Input from "antd/lib/input";
-import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
+import Icon from "antd/lib/icon";
 import Tooltip from "antd/lib/tooltip";
 
 export default class InputWithCopy extends React.Component {
@@ -42,7 +42,7 @@ export default class InputWithCopy extends React.Component {
   render() {
     const copyButton = (
       <Tooltip title={this.state.copied || "Copy"}>
-        <CopyOutlinedIcon style={{ cursor: "pointer" }} onClick={this.copy} />
+        <Icon type="copy" style={{ cursor: "pointer" }} onClick={this.copy} />
       </Tooltip>
     );
 

client/app/components/Link.jsx

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

client/app/components/ParameterMappingInput.jsx

@@ -8,6 +8,7 @@ import Select from "antd/lib/select";
 import Table from "antd/lib/table";
 import Popover from "antd/lib/popover";
 import Button from "antd/lib/button";
+import Icon from "antd/lib/icon";
 import Tag from "antd/lib/tag";
 import Input from "antd/lib/input";
 import Radio from "antd/lib/radio";
@@ -18,11 +19,6 @@ import { ParameterMappingType } from "@/services/widget";
 import { Parameter, cloneParameter } from "@/services/parameters";
 import HelpTrigger from "@/components/HelpTrigger";
 
-import QuestionCircleFilledIcon from "@ant-design/icons/QuestionCircleFilled";
-import EditOutlinedIcon from "@ant-design/icons/EditOutlined";
-import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
-import CheckOutlinedIcon from "@ant-design/icons/CheckOutlined";
-
 import "./ParameterMappingInput.less";
 
 const { Option } = Select;
@@ -185,7 +181,7 @@ export class ParameterMappingInput extends React.Component {
           Existing dashboard parameter{" "}
           {noExisting ? (
             <Tooltip title="There are no dashboard parameters corresponding to this data type">
-              <QuestionCircleFilledIcon />
+              <Icon type="question-circle" theme="filled" />
             </Tooltip>
           ) : null}
         </Radio>
@@ -359,7 +355,7 @@ class MappingEditor extends React.Component {
         visible={visible}
         onVisibleChange={this.onVisibleChange}>
         <Button size="small" type="dashed" data-test={`EditParamMappingButon-${mapping.param.name}`}>
-          <EditOutlinedIcon />
+          <Icon type="edit" />
         </Button>
       </Popover>
     );
@@ -438,10 +434,10 @@ class TitleEditor extends React.Component {
           autoFocus
         />
         <Button size="small" type="dashed" onClick={this.hide}>
-          <CloseOutlinedIcon />
+          <Icon type="close" />
         </Button>
         <Button size="small" type="dashed" onClick={this.save}>
-          <CheckOutlinedIcon />
+          <Icon type="check" />
         </Button>
       </div>
     );
@@ -464,7 +460,7 @@ class TitleEditor extends React.Component {
         visible={this.state.showPopup}
         onVisibleChange={this.onPopupVisibleChange}>
         <Button size="small" type="dashed">
-          <EditOutlinedIcon />
+          <Icon type="edit" />
         </Button>
       </Popover>
     );

client/app/components/ParameterValueInput.less

@@ -1,4 +1,4 @@
-@import "~antd/lib/input-number/style/index"; // for ant @vars
+@import '~antd/lib/input-number/style/index'; // for ant @vars
 
 @input-dirty: #fffce1;
 
@@ -17,10 +17,9 @@
   }
 
   &[data-dirty] {
-    .@{ant-prefix}-input,
+    .@{ant-prefix}-input, // covers also ant date component
     .@{ant-prefix}-input-number,
-    .@{ant-prefix}-select-selector,
-    .@{ant-prefix}-picker {
+    .@{ant-prefix}-select-selection {
       background-color: @input-dirty;
     }
   }

client/app/components/PreviewCard.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import Link from "@/components/Link";
 
 // PreviewCard
 
@@ -43,7 +42,7 @@ PreviewCard.defaultProps = {
 // UserPreviewCard
 
 export function UserPreviewCard({ user, withLink, children, ...props }) {
-  const title = withLink ? <Link href={"users/" + user.id}>{user.name}</Link> : user.name;
+  const title = withLink ? <a href={"users/" + user.id}>{user.name}</a> : user.name;
   return (
     <PreviewCard {...props} imageUrl={user.profile_image_url} title={title} body={user.email}>
       {children}
@@ -69,8 +68,8 @@ UserPreviewCard.defaultProps = {
 // DataSourcePreviewCard
 
 export function DataSourcePreviewCard({ dataSource, withLink, children, ...props }) {
-  const imageUrl = `static/images/db-logos/${dataSource.type}.png`;
-  const title = withLink ? <Link href={"data_sources/" + dataSource.id}>{dataSource.name}</Link> : dataSource.name;
+  const imageUrl = `/static/images/db-logos/${dataSource.type}.png`;
+  const title = withLink ? <a href={"data_sources/" + dataSource.id}>{dataSource.name}</a> : dataSource.name;
   return (
     <PreviewCard {...props} imageUrl={imageUrl} title={title}>
       {children}

client/app/components/QueryLink.jsx

@@ -1,7 +1,6 @@
 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";
@@ -22,9 +21,9 @@ function QueryLink({ query, visualization, readOnly }) {
   };
 
   return (
-    <Link href={readOnly ? null : getUrl()} className="query-link">
+    <a href={readOnly ? null : getUrl()} className="query-link">
       <VisualizationName visualization={visualization} /> <span>{query.name}</span>
-    </Link>
+    </a>
   );
 }
 

client/app/components/SettingsWrapper.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Menu from "antd/lib/menu";
 import PageHeader from "@/components/PageHeader";
-import Link from "@/components/Link";
 import location from "@/services/location";
 import settingsMenu from "@/services/settingsMenu";
 
@@ -18,9 +17,9 @@ function wrapSettingsTab(id, options, WrappedComponent) {
             <Menu selectedKeys={[activeItem && activeItem.title]} selectable={false} mode="horizontal">
               {settingsMenu.getAvailableItems().map(item => (
                 <Menu.Item key={item.title}>
-                  <Link href={item.path} data-test="SettingsScreenItem">
+                  <a href={item.path} data-test="SettingsScreenItem">
                     {item.title}
-                  </Link>
+                  </a>
                 </Menu.Item>
               ))}
             </Menu>

client/app/components/TagsList.jsx

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

client/app/components/TagsList.less

@@ -1,47 +1,15 @@
-@import "~@/assets/less/ant";
+@import '~@/assets/less/ant';
 
 .tags-list {
-  .tags-list-title {
-    margin: 15px 5px 5px 5px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    label {
-      display: block;
-      white-space: nowrap;
-      margin: 0;
-    }
-
-    a {
-      display: block;
-      white-space: nowrap;
-      cursor: pointer;
-
-      .anticon {
-        font-size: 75%;
-        margin-right: 2px;
-      }
-    }
-  }
-
   .ant-badge-count {
     background-color: fade(@redash-gray, 10%);
     color: fade(@redash-gray, 75%);
   }
 
-  .ant-menu.ant-menu-inline {
-    border: none;
-
-    .ant-menu-item {
-      width: 100%;
-    }
-
-    .ant-menu-item-selected {
-      .ant-badge-count {
-        background-color: @primary-color;
-        color: white;
-      }
+  .ant-menu-item-selected {
+    .ant-badge-count {
+      background-color: @primary-color;
+      color: white;
     }
   }
-}
+}

client/app/components/TagsList.tsx

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

client/app/components/TimeAgo.jsx

@@ -11,7 +11,7 @@ function toMoment(value) {
   return value && value.isValid() ? value : null;
 }
 
-export default function TimeAgo({ date, placeholder, autoUpdate, variation }) {
+export default function TimeAgo({ date, placeholder, autoUpdate }) {
   const startDate = toMoment(date);
   const [value, setValue] = useState(null);
   const title = useMemo(() => (startDate ? startDate.format(clientConfig.dateTimeFormat) : null), [startDate]);
@@ -28,13 +28,6 @@ export default function TimeAgo({ date, placeholder, autoUpdate, variation }) {
     }
   }, [autoUpdate, startDate, placeholder]);
 
-  if (variation === "timeAgoInTooltip") {
-    return (
-      <Tooltip title={value}>
-        <span data-test="TimeAgo">{title}</span>
-      </Tooltip>
-    );
-  }
   return (
     <Tooltip title={title}>
       <span data-test="TimeAgo">{value}</span>
@@ -46,7 +39,6 @@ TimeAgo.propTypes = {
   date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date), Moment]),
   placeholder: PropTypes.string,
   autoUpdate: PropTypes.bool,
-  variation: PropTypes.oneOf(["timeAgoInTooltip"]),
 };
 
 TimeAgo.defaultProps = {

client/app/components/admin/Layout.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Menu from "antd/lib/menu";
+import Tabs from "antd/lib/tabs";
 import PageHeader from "@/components/PageHeader";
-import Link from "@/components/Link";
 
 import "./layout.less";
 
@@ -11,19 +10,19 @@ export default function Layout({ activeTab, children }) {
     <div className="admin-page-layout">
       <div className="container">
         <PageHeader title="Admin" />
+
         <div className="bg-white tiled">
-          <Menu selectedKeys={[activeTab]} selectable={false} mode="horizontal">
-            <Menu.Item key="system_status">
-              <Link href="admin/status">System Status</Link>
-            </Menu.Item>
-            <Menu.Item key="jobs">
-              <Link href="admin/queries/jobs">RQ Status</Link>
-            </Menu.Item>
-            <Menu.Item key="outdated_queries">
-              <Link href="admin/queries/outdated">Outdated Queries</Link>
-            </Menu.Item>
-          </Menu>
-          {children}
+          <Tabs className="admin-page-layout-tabs" defaultActiveKey={activeTab} animated={false} tabBarGutter={0}>
+            <Tabs.TabPane key="system_status" tab={<a href="admin/status">System Status</a>}>
+              {activeTab === "system_status" ? children : null}
+            </Tabs.TabPane>
+            <Tabs.TabPane key="jobs" tab={<a href="admin/queries/jobs">RQ Status</a>}>
+              {activeTab === "jobs" ? children : null}
+            </Tabs.TabPane>
+            <Tabs.TabPane key="outdated_queries" tab={<a href="admin/queries/outdated">Outdated Queries</a>}>
+              {activeTab === "outdated_queries" ? children : null}
+            </Tabs.TabPane>
+          </Tabs>
         </div>
       </div>
     </div>

client/app/components/admin/layout.less

@@ -1,5 +1,17 @@
 .admin-page-layout {
-  .ant-table {
-    overflow-x: auto;
+  &-tabs.ant-tabs {
+    > .ant-tabs-bar {
+      margin: 0;
+
+      .ant-tabs-tab {
+        padding: 0;
+
+        a {
+          display: inline-block;
+          padding: 12px 16px;
+          color: inherit;
+        }
+      }
+    }
   }
 }

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

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

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

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

client/app/components/dashboards/ExpandedWidgetDialog.jsx

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

client/app/components/dashboards/TextboxDialog.jsx

@@ -7,7 +7,6 @@ import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Tooltip from "antd/lib/tooltip";
 import Divider from "antd/lib/divider";
-import Link from "@/components/Link";
 import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import notification from "@/services/notification";
@@ -79,12 +78,9 @@ function TextboxDialog({ dialog, isNew, ...props }) {
         />
         <small>
           Supports basic{" "}
-          <Link
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://www.markdownguide.org/cheat-sheet/#basic-syntax">
+          <a target="_blank" rel="noopener noreferrer" href="https://www.markdownguide.org/cheat-sheet/#basic-syntax">
             <Tooltip title="Markdown guide opens in new window">Markdown</Tooltip>
-          </Link>
+          </a>
           .
         </small>
         {text && (

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

@@ -8,7 +8,6 @@ import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { currentUser } from "@/services/auth";
 import recordEvent from "@/services/recordEvent";
 import { formatDateTime } from "@/lib/utils";
-import Link from "@/components/Link";
 import Parameters from "@/components/Parameters";
 import TimeAgo from "@/components/TimeAgo";
 import Timer from "@/components/Timer";
@@ -31,27 +30,27 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
   return compact([
     <Menu.Item key="download_csv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <Link href={downloadLink("csv")} download={downloadName("csv")} target="_self">
+        <a href={downloadLink("csv")} download={downloadName("csv")} target="_self">
           Download as CSV File
-        </Link>
+        </a>
       ) : (
         "Download as CSV File"
       )}
     </Menu.Item>,
     <Menu.Item key="download_tsv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <Link href={downloadLink("tsv")} download={downloadName("tsv")} target="_self">
+        <a href={downloadLink("tsv")} download={downloadName("tsv")} target="_self">
           Download as TSV File
-        </Link>
+        </a>
       ) : (
         "Download as TSV File"
       )}
     </Menu.Item>,
     <Menu.Item key="download_excel" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <Link href={downloadLink("xlsx")} download={downloadName("xlsx")} target="_self">
+        <a href={downloadLink("xlsx")} download={downloadName("xlsx")} target="_self">
           Download as Excel File
-        </Link>
+        </a>
       ) : (
         "Download as Excel File"
       )}
@@ -59,7 +58,7 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
     (canViewQuery || canEditParameters) && <Menu.Divider key="divider" />,
     canViewQuery && (
       <Menu.Item key="view_query">
-        <Link href={widget.getQuery().getUrl(true, widget.visualization.id)}>View Query</Link>
+        <a href={widget.getQuery().getUrl(true, widget.visualization.id)}>View Query</a>
       </Menu.Item>
     ),
     canEditParameters && (
@@ -209,10 +208,7 @@ class VisualizationWidget extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      localParameters: props.widget.getLocalParameters(),
-      localFilters: props.filters,
-    };
+    this.state = { localParameters: props.widget.getLocalParameters() };
   }
 
   componentDidMount() {
@@ -222,12 +218,8 @@ class VisualizationWidget extends React.Component {
     onLoad();
   }
 
-  onLocalFiltersChange = localFilters => {
-    this.setState({ localFilters });
-  };
-
   expandWidget = () => {
-    ExpandedWidgetDialog.showModal({ widget: this.props.widget, filters: this.state.localFilters });
+    ExpandedWidgetDialog.showModal({ widget: this.props.widget });
   };
 
   editParameterMappings = () => {
@@ -267,7 +259,6 @@ class VisualizationWidget extends React.Component {
               visualization={widget.visualization}
               queryResult={widgetQueryResult}
               filters={filters}
-              onFiltersChange={this.onLocalFiltersChange}
               context="widget"
             />
           </div>

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

@@ -1,29 +1,24 @@
-import React, { useState, useReducer, useCallback } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import Form from "antd/lib/form";
+import Input from "antd/lib/input";
+import InputNumber from "antd/lib/input-number";
+import Checkbox from "antd/lib/checkbox";
 import Button from "antd/lib/button";
-import { includes, isFunction, filter, find, difference, isEmpty, mapValues } from "lodash";
+import Upload from "antd/lib/upload";
+import Icon from "antd/lib/icon";
+import { includes, isFunction, filter, difference, isEmpty } from "lodash";
+import Select from "antd/lib/select";
 import notification from "@/services/notification";
 import Collapse from "@/components/Collapse";
-import DynamicFormField, { FieldType } from "./DynamicFormField";
-import getFieldLabel from "./getFieldLabel";
+import AceEditorInput from "@/components/AceEditorInput";
+import { toHuman } from "@/lib/utils";
+import { Field, Action, AntdForm } from "../proptypes";
 import helper from "./dynamicFormHelper";
 
 import "./DynamicForm.less";
 
-const ActionType = PropTypes.shape({
-  name: PropTypes.string.isRequired,
-  callback: PropTypes.func.isRequired,
-  type: PropTypes.string,
-  pullRight: PropTypes.bool,
-  disabledWhenDirty: PropTypes.bool,
-});
-
-const AntdFormType = PropTypes.shape({
-  validateFieldsAndScroll: PropTypes.func,
-});
-
 const fieldRules = ({ type, required, minLength }) => {
   const requiredRule = required;
   const minLengthRule = minLength && includes(["text", "email", "password"], type);
@@ -36,206 +31,282 @@ const fieldRules = ({ type, required, minLength }) => {
   ].filter(rule => rule);
 };
 
-function normalizeEmptyValuesToNull(fields, values) {
-  return mapValues(values, (value, key) => {
-    const { initialValue } = find(fields, { name: key }) || {};
-    if ((initialValue === null || initialValue === undefined || initialValue === "") && value === "") {
-      return null;
+class DynamicForm extends React.Component {
+  static propTypes = {
+    id: PropTypes.string,
+    fields: PropTypes.arrayOf(Field),
+    actions: PropTypes.arrayOf(Action),
+    feedbackIcons: PropTypes.bool,
+    hideSubmitButton: PropTypes.bool,
+    defaultShowExtraFields: PropTypes.bool,
+    saveText: PropTypes.string,
+    onSubmit: PropTypes.func,
+    form: AntdForm.isRequired,
+  };
+
+  static defaultProps = {
+    id: null,
+    fields: [],
+    actions: [],
+    feedbackIcons: false,
+    hideSubmitButton: false,
+    defaultShowExtraFields: false,
+    saveText: "Save",
+    onSubmit: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+
+    const inProgressActions = {};
+    props.actions.forEach(action => (inProgressActions[action.name] = false));
+
+    this.state = {
+      isSubmitting: false,
+      showExtraFields: props.defaultShowExtraFields,
+      inProgressActions,
+    };
+
+    this.actionCallbacks = this.props.actions.reduce(
+      (acc, cur) => ({
+        ...acc,
+        [cur.name]: cur.callback,
+      }),
+      null
+    );
+  }
+
+  setActionInProgress = (actionName, inProgress) => {
+    this.setState(prevState => ({
+      inProgressActions: {
+        ...prevState.inProgressActions,
+        [actionName]: inProgress,
+      },
+    }));
+  };
+
+  handleSubmit = e => {
+    this.setState({ isSubmitting: true });
+    e.preventDefault();
+
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      Object.entries(values).forEach(([key, value]) => {
+        const initialValue = this.props.fields.find(f => f.name === key).initialValue;
+        if ((initialValue === null || initialValue === undefined || initialValue === "") && value === "") {
+          values[key] = null;
+        }
+      });
+
+      if (!err) {
+        this.props.onSubmit(
+          values,
+          msg => {
+            const { setFieldsValue, getFieldsValue } = this.props.form;
+            this.setState({ isSubmitting: false });
+            setFieldsValue(getFieldsValue()); // reset form touched state
+            notification.success(msg);
+          },
+          msg => {
+            this.setState({ isSubmitting: false });
+            notification.error(msg);
+          }
+        );
+      } else this.setState({ isSubmitting: false });
+    });
+  };
+
+  handleAction = e => {
+    const actionName = e.target.dataset.action;
+
+    this.setActionInProgress(actionName, true);
+    this.actionCallbacks[actionName](() => {
+      this.setActionInProgress(actionName, false);
+    });
+  };
+
+  base64File = (fieldName, e) => {
+    if (e && e.fileList[0]) {
+      helper.getBase64(e.file).then(value => {
+        this.props.form.setFieldsValue({ [fieldName]: value });
+      });
     }
-    return value;
-  });
-}
+  };
 
-function DynamicFormFields({ fields, feedbackIcons, form }) {
-  return fields.map(field => {
-    const { name, type, initialValue, contentAfter } = field;
-    const fieldLabel = getFieldLabel(field);
+  renderUpload(field, props) {
+    const { getFieldDecorator, getFieldValue } = this.props.form;
+    const { name, initialValue } = field;
 
-    const formItemProps = {
+    const fileOptions = {
+      rules: fieldRules(field),
+      initialValue,
+      getValueFromEvent: this.base64File.bind(this, name),
+    };
+
+    const disabled = getFieldValue(name) !== undefined && getFieldValue(name) !== initialValue;
+
+    const upload = (
+      <Upload {...props} beforeUpload={() => false}>
+        <Button disabled={disabled}>
+          <Icon type="upload" /> Click to upload
+        </Button>
+      </Upload>
+    );
+
+    return getFieldDecorator(name, fileOptions)(upload);
+  }
+
+  renderSelect(field, props) {
+    const { getFieldDecorator } = this.props.form;
+    const { name, options, mode, initialValue, readOnly, loading } = field;
+    const { Option } = Select;
+
+    const decoratorOptions = {
+      rules: fieldRules(field),
+      initialValue,
+    };
+
+    return getFieldDecorator(
       name,
-      className: "m-b-10",
-      hasFeedback: type !== "checkbox" && type !== "file" && feedbackIcons,
-      label: type === "checkbox" ? "" : fieldLabel,
+      decoratorOptions
+    )(
+      <Select
+        {...props}
+        optionFilterProp="children"
+        loading={loading || false}
+        mode={mode}
+        getPopupContainer={trigger => trigger.parentNode}>
+        {options &&
+          options.map(option => (
+            <Option key={`${option.value}`} value={option.value} disabled={readOnly}>
+              {option.name || option.value}
+            </Option>
+          ))}
+      </Select>
+    );
+  }
+
+  renderField(field, props) {
+    const { getFieldDecorator } = this.props.form;
+    const { name, type, initialValue } = field;
+    const fieldLabel = field.title || toHuman(name);
+
+    const options = {
       rules: fieldRules(field),
       valuePropName: type === "checkbox" ? "checked" : "value",
       initialValue,
     };
 
-    if (type === "file") {
-      formItemProps.valuePropName = "data-value";
-      formItemProps.getValueFromEvent = e => {
-        if (e && e.fileList[0]) {
-          helper.getBase64(e.file).then(value => {
-            form.setFieldsValue({ [name]: value });
-          });
-        }
-        return undefined;
-      };
+    if (type === "checkbox") {
+      return getFieldDecorator(name, options)(<Checkbox {...props}>{fieldLabel}</Checkbox>);
+    } else if (type === "file") {
+      return this.renderUpload(field, props);
+    } else if (type === "select") {
+      return this.renderSelect(field, props);
+    } else if (type === "content") {
+      return field.content;
+    } else if (type === "number") {
+      return getFieldDecorator(name, options)(<InputNumber {...props} />);
+    } else if (type === "textarea") {
+      return getFieldDecorator(name, options)(<Input.TextArea {...props} />);
+    } else if (type === "ace") {
+      return getFieldDecorator(name, options)(<AceEditorInput {...props} />);
     }
+    return getFieldDecorator(name, options)(<Input {...props} />);
+  }
+
+  renderFields(fields) {
+    return fields.map(field => {
+      const FormItem = Form.Item;
+      const { name, title, type, readOnly, autoFocus, contentAfter } = field;
+      const fieldLabel = title || toHuman(name);
+      const { feedbackIcons, form } = this.props;
+
+      const formItemProps = {
+        className: "m-b-10",
+        hasFeedback: type !== "checkbox" && type !== "file" && feedbackIcons,
+        label: type === "checkbox" ? "" : fieldLabel,
+      };
+
+      const fieldProps = {
+        ...field.props,
+        className: "w-100",
+        name,
+        type,
+        readOnly,
+        autoFocus,
+        placeholder: field.placeholder,
+        "data-test": fieldLabel,
+      };
+
+      return (
+        <React.Fragment key={name}>
+          <FormItem {...formItemProps}>{this.renderField(field, fieldProps)}</FormItem>
+          {isFunction(contentAfter) ? contentAfter(form.getFieldValue(name)) : contentAfter}
+        </React.Fragment>
+      );
+    });
+  }
+
+  renderActions() {
+    return this.props.actions.map(action => {
+      const inProgress = this.state.inProgressActions[action.name];
+      const { isFieldsTouched } = this.props.form;
+
+      const actionProps = {
+        key: action.name,
+        htmlType: "button",
+        className: action.pullRight ? "pull-right m-t-10" : "m-t-10",
+        type: action.type,
+        disabled: isFieldsTouched() && action.disableWhenDirty,
+        loading: inProgress,
+        onClick: this.handleAction,
+      };
+
+      return (
+        <Button {...actionProps} data-action={action.name}>
+          {action.name}
+        </Button>
+      );
+    });
+  }
+
+  render() {
+    const submitProps = {
+      type: "primary",
+      htmlType: "submit",
+      className: "w-100 m-t-20",
+      disabled: this.state.isSubmitting,
+      loading: this.state.isSubmitting,
+    };
+    const { id, hideSubmitButton, saveText, fields } = this.props;
+    const { showExtraFields } = this.state;
+    const saveButton = !hideSubmitButton;
+    const extraFields = filter(fields, { extra: true });
+    const regularFields = difference(fields, extraFields);
 
     return (
-      <React.Fragment key={name}>
-        <Form.Item {...formItemProps}>
-          <DynamicFormField field={field} form={form} />
-        </Form.Item>
-        {isFunction(contentAfter) ? contentAfter(form.getFieldValue(name)) : contentAfter}
-      </React.Fragment>
+      <Form id={id} className="dynamic-form" layout="vertical" onSubmit={this.handleSubmit}>
+        {this.renderFields(regularFields)}
+        {!isEmpty(extraFields) && (
+          <div className="extra-options">
+            <Button
+              type="dashed"
+              block
+              className="extra-options-button"
+              onClick={() => this.setState({ showExtraFields: !showExtraFields })}>
+              Additional Settings
+              <i className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })} />
+            </Button>
+            <Collapse collapsed={!showExtraFields} className="extra-options-content">
+              {this.renderFields(extraFields)}
+            </Collapse>
+          </div>
+        )}
+        {saveButton && <Button {...submitProps}>{saveText}</Button>}
+        {this.renderActions()}
+      </Form>
     );
-  });
-}
-
-DynamicFormFields.propTypes = {
-  fields: PropTypes.arrayOf(FieldType),
-  feedbackIcons: PropTypes.bool,
-  form: AntdFormType.isRequired,
-};
-
-DynamicFormFields.defaultProps = {
-  fields: [],
-  feedbackIcons: false,
-};
-
-const reducerForActionSet = (state, action) => {
-  if (action.inProgress) {
-    state.add(action.actionName);
-  } else {
-    state.delete(action.actionName);
   }
-  return new Set(state);
-};
-
-function DynamicFormActions({ actions, isFormDirty }) {
-  const [inProgressActions, setActionInProgress] = useReducer(reducerForActionSet, new Set());
-
-  const handleAction = useCallback(action => {
-    const actionName = action.name;
-    if (isFunction(action.callback)) {
-      setActionInProgress({ actionName, inProgress: true });
-      action.callback(() => {
-        setActionInProgress({ actionName, inProgress: false });
-      });
-    }
-  }, []);
-  return actions.map(action => (
-    <Button
-      key={action.name}
-      htmlType="button"
-      className={cx("m-t-10", { "pull-right": action.pullRight })}
-      type={action.type}
-      disabled={isFormDirty && action.disableWhenDirty}
-      loading={inProgressActions.has(action.name)}
-      onClick={() => handleAction(action)}>
-      {action.name}
-    </Button>
-  ));
 }
 
-DynamicFormActions.propTypes = {
-  actions: PropTypes.arrayOf(ActionType),
-  isFormDirty: PropTypes.bool,
-};
-
-DynamicFormActions.defaultProps = {
-  actions: [],
-  isFormDirty: false,
-};
-
-export default function DynamicForm({
-  id,
-  fields,
-  actions,
-  feedbackIcons,
-  hideSubmitButton,
-  defaultShowExtraFields,
-  saveText,
-  onSubmit,
-}) {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showExtraFields, setShowExtraFields] = useState(defaultShowExtraFields);
-  const [form] = Form.useForm();
-  const extraFields = filter(fields, { extra: true });
-  const regularFields = difference(fields, extraFields);
-
-  const handleFinish = useCallback(
-    values => {
-      setIsSubmitting(true);
-      values = normalizeEmptyValuesToNull(fields, values);
-      onSubmit(
-        values,
-        msg => {
-          const { setFieldsValue, getFieldsValue } = form;
-          setIsSubmitting(false);
-          setFieldsValue(getFieldsValue()); // reset form touched state
-          notification.success(msg);
-        },
-        msg => {
-          setIsSubmitting(false);
-          notification.error(msg);
-        }
-      );
-    },
-    [form, fields, onSubmit]
-  );
-
-  const handleFinishFailed = useCallback(
-    ({ errorFields }) => {
-      form.scrollToField(errorFields[0].name);
-    },
-    [form]
-  );
-
-  return (
-    <Form
-      form={form}
-      id={id}
-      className="dynamic-form"
-      layout="vertical"
-      onFinish={handleFinish}
-      onFinishFailed={handleFinishFailed}>
-      <DynamicFormFields fields={regularFields} feedbackIcons={feedbackIcons} form={form} />
-      {!isEmpty(extraFields) && (
-        <div className="extra-options">
-          <Button
-            type="dashed"
-            block
-            className="extra-options-button"
-            onClick={() => setShowExtraFields(currentShowExtraFields => !currentShowExtraFields)}>
-            Additional Settings
-            <i className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })} />
-          </Button>
-          <Collapse collapsed={!showExtraFields} className="extra-options-content">
-            <DynamicFormFields fields={extraFields} feedbackIcons={feedbackIcons} form={form} />
-          </Collapse>
-        </div>
-      )}
-      {!hideSubmitButton && (
-        <Button className="w-100 m-t-20" type="primary" htmlType="submit" disabled={isSubmitting}>
-          {saveText}
-        </Button>
-      )}
-      <DynamicFormActions actions={actions} isFormDirty={form.isFieldsTouched()} />
-    </Form>
-  );
-}
-
-DynamicForm.propTypes = {
-  id: PropTypes.string,
-  fields: PropTypes.arrayOf(FieldType),
-  actions: PropTypes.arrayOf(ActionType),
-  feedbackIcons: PropTypes.bool,
-  hideSubmitButton: PropTypes.bool,
-  defaultShowExtraFields: PropTypes.bool,
-  saveText: PropTypes.string,
-  onSubmit: PropTypes.func,
-};
-
-DynamicForm.defaultProps = {
-  id: null,
-  fields: [],
-  actions: [],
-  feedbackIcons: false,
-  hideSubmitButton: false,
-  defaultShowExtraFields: false,
-  saveText: "Save",
-  onSubmit: () => {},
-};
+export default Form.create()(DynamicForm);

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

@@ -1,82 +0,0 @@
-import React from "react";
-import { get } from "lodash";
-import PropTypes from "prop-types";
-import getFieldLabel from "./getFieldLabel";
-
-import {
-  AceEditorField,
-  CheckboxField,
-  ContentField,
-  FileField,
-  InputField,
-  NumberField,
-  SelectField,
-  TextAreaField,
-} from "./fields";
-
-export const FieldType = PropTypes.shape({
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  type: PropTypes.oneOf([
-    "ace",
-    "text",
-    "textarea",
-    "email",
-    "password",
-    "number",
-    "checkbox",
-    "file",
-    "select",
-    "content",
-  ]).isRequired,
-  initialValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.arrayOf(PropTypes.number),
-  ]),
-  content: PropTypes.node,
-  mode: PropTypes.string,
-  required: PropTypes.bool,
-  extra: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  minLength: PropTypes.number,
-  placeholder: PropTypes.string,
-  contentAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  loading: PropTypes.bool,
-  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-});
-
-const FieldTypeComponent = {
-  checkbox: CheckboxField,
-  file: FileField,
-  select: SelectField,
-  number: NumberField,
-  textarea: TextAreaField,
-  ace: AceEditorField,
-  content: ContentField,
-};
-
-export default function DynamicFormField({ form, field, ...otherProps }) {
-  const { name, type, readOnly, autoFocus } = field;
-  const fieldLabel = getFieldLabel(field);
-
-  const fieldProps = {
-    ...field.props,
-    className: "w-100",
-    name,
-    type,
-    readOnly,
-    autoFocus,
-    placeholder: field.placeholder,
-    "data-test": fieldLabel,
-    ...otherProps,
-  };
-
-  const FieldComponent = get(FieldTypeComponent, type, InputField);
-  return <FieldComponent {...fieldProps} form={form} field={field} />;
-}
-
-DynamicFormField.propTypes = { field: FieldType.isRequired };

client/app/components/dynamic-form/fields/AceEditorField.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import AceEditorInput from "@/components/AceEditorInput";
-
-export default function AceEditorField({ form, field, ...otherProps }) {
-  return <AceEditorInput {...otherProps} />;
-}

client/app/components/dynamic-form/fields/CheckboxField.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import Checkbox from "antd/lib/checkbox";
-import getFieldLabel from "../getFieldLabel";
-
-export default function CheckboxField({ form, field, ...otherProps }) {
-  const fieldLabel = getFieldLabel(field);
-  return <Checkbox {...otherProps}>{fieldLabel}</Checkbox>;
-}

client/app/components/dynamic-form/fields/ContentField.jsx

@@ -1,3 +0,0 @@
-export default function ContentField({ field }) {
-  return field.content;
-}

client/app/components/dynamic-form/fields/FileField.jsx

@@ -1,18 +0,0 @@
-import React from "react";
-import Button from "antd/lib/button";
-import Upload from "antd/lib/upload";
-import UploadOutlinedIcon from "@ant-design/icons/UploadOutlined";
-
-export default function FileField({ form, field, ...otherProps }) {
-  const { name, initialValue } = field;
-  const { getFieldValue } = form;
-  const disabled = getFieldValue(name) !== undefined && getFieldValue(name) !== initialValue;
-
-  return (
-    <Upload {...otherProps} beforeUpload={() => false}>
-      <Button disabled={disabled}>
-        <UploadOutlinedIcon /> Click to upload
-      </Button>
-    </Upload>
-  );
-}

client/app/components/dynamic-form/fields/InputField.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import Input from "antd/lib/input";
-
-export default function InputField({ form, field, ...otherProps }) {
-  return <Input {...otherProps} />;
-}

client/app/components/dynamic-form/fields/NumberField.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import InputNumber from "antd/lib/input-number";
-
-export default function NumberField({ form, field, ...otherProps }) {
-  return <InputNumber {...otherProps} />;
-}

client/app/components/dynamic-form/fields/SelectField.jsx

@@ -1,21 +0,0 @@
-import React from "react";
-import Select from "antd/lib/select";
-
-export default function SelectField({ form, field, ...otherProps }) {
-  const { readOnly } = field;
-  return (
-    <Select
-      {...otherProps}
-      optionFilterProp="children"
-      loading={field.loading || false}
-      mode={field.mode}
-      getPopupContainer={trigger => trigger.parentNode}>
-      {field.options &&
-        field.options.map(option => (
-          <Select.Option key={`${option.value}`} value={option.value} disabled={readOnly}>
-            {option.name || option.value}
-          </Select.Option>
-        ))}
-    </Select>
-  );
-}

client/app/components/dynamic-form/fields/TextAreaField.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import Input from "antd/lib/input";
-
-export default function TextAreaField({ form, field, ...otherProps }) {
-  return <Input.TextArea {...otherProps} />;
-}

client/app/components/dynamic-form/fields/index.js

@@ -1,8 +0,0 @@
-export { default as AceEditorField } from "./AceEditorField";
-export { default as CheckboxField } from "./CheckboxField";
-export { default as ContentField } from "./ContentField";
-export { default as FileField } from "./FileField";
-export { default as InputField } from "./InputField";
-export { default as NumberField } from "./NumberField";
-export { default as SelectField } from "./SelectField";
-export { default as TextAreaField } from "./TextAreaField";

client/app/components/dynamic-form/getFieldLabel.js

@@ -1,6 +0,0 @@
-import { toHuman } from "@/lib/utils";
-
-export default function getFieldLabel(field) {
-  const { title, name } = field;
-  return title || toHuman(name);
-}

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

@@ -93,21 +93,20 @@ class DateParameter extends React.Component {
     }
 
     return (
-      <div className="date-parameter">
-        <DateComponent
-          ref={this.dateComponentRef}
-          className={classNames("redash-datepicker", { "dynamic-value": hasDynamicValue }, className)}
-          onSelect={onSelect}
-          suffixIcon={null}
-          {...additionalAttributes}
-        />
-        <DynamicButton
-          options={DYNAMIC_DATE_OPTIONS}
-          selectedDynamicValue={hasDynamicValue ? value : null}
-          enabled={hasDynamicValue}
-          onSelect={this.onDynamicValueSelect}
-        />
-      </div>
+      <DateComponent
+        ref={this.dateComponentRef}
+        className={classNames("redash-datepicker", { "dynamic-value": hasDynamicValue }, className)}
+        onSelect={onSelect}
+        suffixIcon={
+          <DynamicButton
+            options={DYNAMIC_DATE_OPTIONS}
+            selectedDynamicValue={hasDynamicValue ? value : null}
+            enabled={hasDynamicValue}
+            onSelect={this.onDynamicValueSelect}
+          />
+        }
+        {...additionalAttributes}
+      />
     );
   }
 }

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

@@ -208,22 +208,21 @@ class DateRangeParameter extends React.Component {
     }
 
     return (
-      <div className="data-range-parameter">
-        <DateRangeComponent
-          ref={this.dateRangeComponentRef}
-          className={classNames("redash-datepicker date-range-input", { "dynamic-value": hasDynamicValue }, className)}
-          onSelect={onSelect}
-          style={{ width: hasDynamicValue ? 195 : widthByType[type] }}
-          suffixIcon={null}
-          {...additionalAttributes}
-        />
-        <DynamicButton
-          options={options}
-          selectedDynamicValue={hasDynamicValue ? value : null}
-          enabled={hasDynamicValue}
-          onSelect={this.onDynamicValueSelect}
-        />
-      </div>
+      <DateRangeComponent
+        ref={this.dateRangeComponentRef}
+        className={classNames("redash-datepicker date-range-input", { "dynamic-value": hasDynamicValue }, className)}
+        onSelect={onSelect}
+        style={{ width: hasDynamicValue ? 195 : widthByType[type] }}
+        suffixIcon={
+          <DynamicButton
+            options={options}
+            selectedDynamicValue={hasDynamicValue ? value : null}
+            enabled={hasDynamicValue}
+            onSelect={this.onDynamicValueSelect}
+          />
+        }
+        {...additionalAttributes}
+      />
     );
   }
 }

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

@@ -2,15 +2,12 @@ import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import { isFunction, get, findIndex } from "lodash";
 import Dropdown from "antd/lib/dropdown";
+import Icon from "antd/lib/icon";
 import Menu from "antd/lib/menu";
 import Typography from "antd/lib/typography";
 import { DynamicDateType } from "@/services/parameters/DateParameter";
 import { DynamicDateRangeType } from "@/services/parameters/DateRangeParameter";
 
-import ArrowLeftOutlinedIcon from "@ant-design/icons/ArrowLeftOutlined";
-import ThunderboltTwoToneIcon from "@ant-design/icons/ThunderboltTwoTone";
-import ThunderboltOutlinedIcon from "@ant-design/icons/ThunderboltOutlined";
-
 import "./DynamicButton.less";
 
 const { Text } = Typography;
@@ -31,7 +28,7 @@ function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
       {enabled && <Menu.Divider />}
       {enabled && (
         <Menu.Item>
-          <ArrowLeftOutlinedIcon />
+          <Icon type="arrow-left" />
           <Text type="secondary">Back to Static Value</Text>
         </Menu.Item>
       )}
@@ -48,13 +45,7 @@ function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
           className="dynamic-button"
           placement="bottomRight"
           trigger={["click"]}
-          icon={
-            enabled ? (
-              <ThunderboltTwoToneIcon className="dynamic-icon" />
-            ) : (
-              <ThunderboltOutlinedIcon className="dynamic-icon" />
-            )
-          }
+          icon={<Icon type="thunderbolt" theme={enabled ? "twoTone" : "outlined"} className="dynamic-icon" />}
           getPopupContainer={() => containerRef.current}
           data-test="DynamicButton"
         />

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

@@ -1,10 +1,8 @@
-@import "../../assets/less/inc/variables";
+@import '../../assets/less/inc/variables';
 
 .redash-datepicker {
-  padding-right: 35px !important;
-
-  &.ant-picker-range .ant-picker-clear {
-    right: 35px !important;
+  .ant-calendar-picker-clear {
+    right: 35px;
     background: transparent;
   }
 
@@ -16,19 +14,17 @@
     & ::placeholder {
       color: @text-color !important;
     }
-
+  
     &.date-range-input {
-      .ant-picker-active-bar {
-        opacity: 0;
+      .ant-calendar-range-picker-input {
+        width: 100%;
+        text-align: left;
       }
-
-      .ant-picker-separator {
+    
+      .ant-calendar-range-picker-separator,
+      .ant-calendar-range-picker-input:not(:first-child) {
         display: none;
       }
-
-      .ant-picker-input:not(:first-child) {
-        width: 0;
-      }
     }
   }
 }

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

@@ -1,41 +1,18 @@
 import React from "react";
 
-type DefaultStepKey = "dataSources" | "queries" | "alerts" | "dashboards" | "users";
-export type StepKey<K> = DefaultStepKey | K;
-
-export interface StepItem<K> {
-  key: StepKey<K>;
-  node: React.ReactNode;
-}
-
-export interface EmptyStateProps<K = unknown> {
+export interface EmptyStateProps {
   header?: string;
   icon?: string;
   description: string;
   illustration: string;
-  illustrationPath?: string;
   helpLink: string;
 
   onboardingMode?: boolean;
   showAlertStep?: boolean;
   showDashboardStep?: boolean;
-  showDataSourceStep?: boolean;
   showInviteStep?: boolean;
-
-  getStepsItems?: (items: Array<StepItem<K>>) => Array<StepItem<K>>;
 }
 
-declare class EmptyState<R> extends React.Component<EmptyStateProps<R>> {}
+declare const EmptyState: React.FunctionComponent<EmptyStateProps>;
 
 export default EmptyState;
-
-export interface StepProps {
-  show: boolean;
-  completed: boolean;
-  url?: string;
-  urlText?: string;
-  text: string;
-  onClick?: () => void;
-}
-
-export declare const Step: React.FunctionComponent<StepProps>;

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

@@ -2,22 +2,21 @@ import { keys, some } from "lodash";
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import Link from "@/components/Link";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import { currentUser } from "@/services/auth";
 import organizationStatus from "@/services/organizationStatus";
 import "./empty-state.less";
 
-export function Step({ show, completed, text, url, urlText, onClick }) {
+function Step({ show, completed, text, url, urlText, onClick }) {
   if (!show) {
     return null;
   }
 
   return (
     <li className={classNames({ done: completed })}>
-      <Link href={url} onClick={onClick}>
+      <a href={url} onClick={onClick}>
         {urlText}
-      </Link>{" "}
+      </a>{" "}
       {text}
     </li>
   );
@@ -47,13 +46,10 @@ function EmptyState({
   onboardingMode,
   showAlertStep,
   showDashboardStep,
-  showDataSourceStep,
   showInviteStep,
-  getStepsItems,
-  illustrationPath,
 }) {
   const isAvailable = {
-    dataSource: showDataSourceStep,
+    dataSource: true,
     query: true,
     alert: showAlertStep,
     dashboard: showDashboardStep,
@@ -79,92 +75,6 @@ function EmptyState({
     return null;
   }
 
-  const renderDataSourcesStep = () => {
-    if (currentUser.isAdmin) {
-      return (
-        <Step
-          key="dataSources"
-          show={isAvailable.dataSource}
-          completed={isCompleted.dataSource}
-          url="data_sources/new"
-          urlText="Connect"
-          text="a Data Source"
-        />
-      );
-    }
-
-    return (
-      <Step
-        key="dataSources"
-        show={isAvailable.dataSource}
-        completed={isCompleted.dataSource}
-        text="Ask an account admin to connect a data source"
-      />
-    );
-  };
-
-  const defaultStepsItems = [
-    {
-      key: "dataSources",
-      node: renderDataSourcesStep(),
-    },
-    {
-      key: "queries",
-      node: (
-        <Step
-          key="queries"
-          show={isAvailable.query}
-          completed={isCompleted.query}
-          url="queries/new"
-          urlText="Create"
-          text="your first Query"
-        />
-      ),
-    },
-    {
-      key: "alerts",
-      node: (
-        <Step
-          key="alerts"
-          show={isAvailable.alert}
-          completed={isCompleted.alert}
-          url="alerts/new"
-          urlText="Create"
-          text="your first Alert"
-        />
-      ),
-    },
-    {
-      key: "dashboards",
-      node: (
-        <Step
-          key="dashboards"
-          show={isAvailable.dashboard}
-          completed={isCompleted.dashboard}
-          onClick={showCreateDashboardDialog}
-          urlText="Create"
-          text="your first Dashboard"
-        />
-      ),
-    },
-    {
-      key: "users",
-      node: (
-        <Step
-          key="users"
-          show={isAvailable.inviteUsers}
-          completed={isCompleted.inviteUsers}
-          url="users/new"
-          urlText="Invite"
-          text="your team members"
-        />
-      ),
-    },
-  ];
-
-  const stepsItems = getStepsItems ? getStepsItems(defaultStepsItems) : defaultStepsItems;
-  const imageSource = illustrationPath ? illustrationPath : "static/images/illustrations/" + illustration + ".svg";
-
   return (
     <div className="empty-state bg-white tiled">
       <div className="empty-state__summary">
@@ -173,17 +83,66 @@ function EmptyState({
           <i className={icon} />
         </h2>
         <p>{description}</p>
-        <img src={imageSource} alt={illustration + " Illustration"} width="75%" />
+        <img
+          src={"/static/images/illustrations/" + illustration + ".svg"}
+          alt={illustration + " Illustration"}
+          width="75%"
+        />
       </div>
       <div className="empty-state__steps">
         <h4>Let&apos;s get started</h4>
-        <ol>{stepsItems.map(item => item.node)}</ol>
+        <ol>
+          {currentUser.isAdmin && (
+            <Step
+              show={isAvailable.dataSource}
+              completed={isCompleted.dataSource}
+              url="data_sources/new"
+              urlText="Connect"
+              text="a Data Source"
+            />
+          )}
+          {!currentUser.isAdmin && (
+            <Step
+              show={isAvailable.dataSource}
+              completed={isCompleted.dataSource}
+              text="Ask an account admin to connect a data source"
+            />
+          )}
+          <Step
+            show={isAvailable.query}
+            completed={isCompleted.query}
+            url="queries/new"
+            urlText="Create"
+            text="your first Query"
+          />
+          <Step
+            show={isAvailable.alert}
+            completed={isCompleted.alert}
+            url="alerts/new"
+            urlText="Create"
+            text="your first Alert"
+          />
+          <Step
+            show={isAvailable.dashboard}
+            completed={isCompleted.dashboard}
+            onClick={showCreateDashboardDialog}
+            urlText="Create"
+            text="your first Dashboard"
+          />
+          <Step
+            show={isAvailable.inviteUsers}
+            completed={isCompleted.inviteUsers}
+            url="users/new"
+            urlText="Invite"
+            text="your team members"
+          />
+        </ol>
         <p>
           Need more support?{" "}
-          <Link href={helpLink} target="_blank" rel="noopener noreferrer">
+          <a href={helpLink} target="_blank" rel="noopener noreferrer">
             See our Help
             <i className="fa fa-external-link m-l-5" aria-hidden="true" />
-          </Link>
+          </a>
         </p>
       </div>
     </div>
@@ -195,16 +154,12 @@ EmptyState.propTypes = {
   header: PropTypes.string,
   description: PropTypes.string.isRequired,
   illustration: PropTypes.string.isRequired,
-  illustrationPath: PropTypes.string,
   helpLink: PropTypes.string.isRequired,
 
   onboardingMode: PropTypes.bool,
   showAlertStep: PropTypes.bool,
   showDashboardStep: PropTypes.bool,
-  showDataSourceStep: PropTypes.bool,
   showInviteStep: PropTypes.bool,
-
-  getStepItems: PropTypes.func,
 };
 
 EmptyState.defaultProps = {
@@ -214,7 +169,6 @@ EmptyState.defaultProps = {
   onboardingMode: false,
   showAlertStep: false,
   showDashboardStep: false,
-  showDataSourceStep: true,
   showInviteStep: false,
 };
 

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

@@ -3,42 +3,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { clientConfig } from "@/services/auth";
-import { AxiosError } from "axios";
-
-export interface PaginationOptions {
-  page?: number;
-  itemsPerPage?: number;
-}
-
-export interface Controller<I, P = any> {
-  params: P; // TODO: Find out what params is (except merging with props)
-
-  isLoaded: boolean;
-  isEmpty: boolean;
-
-  // search
-  searchTerm?: string;
-  updateSearch: (searchTerm: string) => void;
-
-  // tags
-  selectedTags: string[];
-  updateSelectedTags: (selectedTags: string[]) => void;
-
-  // sorting
-  orderByField?: string;
-  orderByReverse: boolean;
-  toggleSorting: (orderByField: string) => void;
-
-  // pagination
-  page: number;
-  itemsPerPage: number;
-  totalItemsCount: number;
-  pageSizeOptions: number[];
-  pageItems: I[];
-  updatePagination: (options: PaginationOptions) => void; // ({ page: number, itemsPerPage: number }) => void
-
-  handleError: (error: any) => void; // TODO: Find out if error is string or object or Exception.
-}
 
 export const ControllerType = PropTypes.shape({
   // values of props declared by wrapped component and some additional props from items list
@@ -71,40 +35,15 @@ export const ControllerType = PropTypes.shape({
   handleError: PropTypes.func.isRequired, // (error) => void
 });
 
-export type GenericItemSourceError = AxiosError | Error;
-
-export interface ItemsListWrapperProps {
-  onError?: (error: AxiosError | Error) => void;
-  children: React.ReactNode;
-}
-
-interface ItemsListWrapperState<I, P = any> extends Controller<I, P> {
-  totalCount?: number;
-  update: () => void;
-}
-
-type ItemsSource = any; // TODO: Type ItemsSource
-type StateStorage = any; // TODO: Type StateStore
-
-export interface ItemsListWrappedComponentProps<I, P = any> {
-  controller: Controller<I, P>;
-}
-
-export function wrap<I, P = any>(
-  WrappedComponent: React.ComponentType<ItemsListWrappedComponentProps<I>>,
-  createItemsSource: () => ItemsSource,
-  createStateStorage: () => StateStorage
-) {
-  class ItemsListWrapper extends React.Component<ItemsListWrapperProps, ItemsListWrapperState<I, P>> {
-    private _itemsSource: ItemsSource;
-
+export function wrap(WrappedComponent, createItemsSource, createStateStorage) {
+  class ItemsListWrapper extends React.Component {
     static propTypes = {
       onError: PropTypes.func,
       children: PropTypes.node,
     };
 
     static defaultProps = {
-      onError: (error: GenericItemSourceError) => {
+      onError: error => {
         // Allow calling chain to roll up, and then throw the error in global context
         setTimeout(() => {
           throw error;
@@ -113,7 +52,7 @@ export function wrap<I, P = any>(
       children: null,
     };
 
-    constructor(props: ItemsListWrapperProps) {
+    constructor(props) {
       super(props);
 
       const stateStorage = createStateStorage();
@@ -134,9 +73,7 @@ export function wrap<I, P = any>(
         this.setState(this.getState({ ...state, isLoaded: true }));
       };
 
-      itemsSource.onError = (error: GenericItemSourceError) =>
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.props.onError!(error);
+      itemsSource.onError = error => this.props.onError(error);
 
       const initialState = this.getState({ ...itemsSource.getState(), isLoaded: false });
       const { updatePagination, toggleSorting, updateSearch, updateSelectedTags, update, handleError } = itemsSource;
@@ -156,22 +93,13 @@ export function wrap<I, P = any>(
     }
 
     componentWillUnmount() {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       this._itemsSource.onBeforeUpdate = () => {};
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       this._itemsSource.onAfterUpdate = () => {};
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       this._itemsSource.onError = () => {};
     }
 
     // eslint-disable-next-line class-methods-use-this
-    getState({
-      isLoaded,
-      totalCount,
-      pageItems,
-      params,
-      ...rest
-    }: ItemsListWrapperState<I, P>): ItemsListWrapperState<I, P> {
+    getState({ isLoaded, totalCount, pageItems, params, ...rest }) {
       return {
         ...rest,
 
@@ -182,9 +110,9 @@ export function wrap<I, P = any>(
 
         isLoaded,
         isEmpty: !isLoaded || totalCount === 0,
-        totalItemsCount: totalCount || 0,
-        pageSizeOptions: (clientConfig as any).pageSizeOptions, // TODO: Type auth.js
-        pageItems: pageItems || [],
+        totalItemsCount: isLoaded ? totalCount : 0,
+        pageSizeOptions: clientConfig.pageSizeOptions,
+        pageItems: isLoaded ? pageItems : [],
       };
     }
 

client/app/components/items-list/classes/ItemsSource.d.ts

@@ -1,51 +0,0 @@
-export interface ItemsSourceOptions<I = any> extends Partial<ItemsSourceState> {
-  getRequest?: (params: any, context: any) => any; // TODO: Add stricter types
-  doRequest?: () => any; // TODO: Add stricter type
-  processResults?: () => any; // TODO: Add stricter type
-  isPlainList?: boolean;
-  sortByIteratees?: { [fieldName: string]: (a: I) => number };
-}
-
-export interface GetResourceContext extends ItemsSourceState {
-  params: {
-    currentPage: number;
-    // TODO: Add more context parameters
-  };
-}
-
-export type GetResourceRequest = any; // TODO: Add stricter type
-
-export interface ItemsPage<INPUT = any> {
-  count: number;
-  page: number;
-  page_size: number;
-  results: INPUT[];
-}
-
-export interface ResourceItemsSourceOptions<INPUT = any, ITEM = any> extends ItemsSourceOptions {
-  getResource: (context: GetResourceContext) => (request: GetResourceRequest) => Promise<INPUT[]>;
-  getItemProcessor?: () => (input: INPUT) => ITEM;
-}
-
-export type ItemsSourceState<ITEM = any> = {
-  page: number;
-  itemsPerPage: number;
-  orderByField: string;
-  orderByReverse: boolean;
-  searchTerm: string;
-  selectedTags: string[];
-  totalCount: number;
-  pageItems: ITEM[];
-  allItems: ITEM[] | undefined;
-  params: {
-    pageTitle?: string;
-  } & { [key: string]: string | number };
-};
-
-declare class ItemsSource {
-  constructor(options: ItemsSourceOptions);
-}
-
-declare class ResourceItemsSource<I> {
-  constructor(options: ResourceItemsSourceOptions<I>);
-}

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

@@ -10,8 +10,6 @@ export class ItemsSource {
 
   onError = null;
 
-  sortByIteratees = undefined;
-
   getCallbackContext = () => null;
 
   _beforeUpdate() {
@@ -43,34 +41,21 @@ export class ItemsSource {
         extend(customParams, params);
       },
     };
-    return this._beforeUpdate().then(() => {
-      const fetchToken = Math.random()
-        .toString(36)
-        .substr(2);
-      this._currentFetchToken = fetchToken;
-      return this._fetcher
+    return this._beforeUpdate().then(() =>
+      this._fetcher
         .fetch(changes, state, context)
         .then(({ results, count, allResults }) => {
-          if (this._currentFetchToken === fetchToken) {
-            this._pageItems = results;
-            this._allItems = allResults || null;
-            this._paginator.setTotalCount(count);
-            this._params = { ...this._params, ...customParams };
-            return this._afterUpdate();
-          }
+          this._pageItems = results;
+          this._allItems = allResults || null;
+          this._paginator.setTotalCount(count);
+          this._params = { ...this._params, ...customParams };
+          return this._afterUpdate();
         })
-        .catch(error => this.handleError(error));
-    });
+        .catch(error => this.handleError(error))
+    );
   }
 
-  constructor({
-    getRequest,
-    doRequest,
-    processResults,
-    isPlainList = false,
-    sortByIteratees = undefined,
-    ...defaultState
-  }) {
+  constructor({ getRequest, doRequest, processResults, isPlainList = false, ...defaultState }) {
     if (!isFunction(getRequest)) {
       getRequest = identity;
     }
@@ -79,8 +64,6 @@ export class ItemsSource {
       ? new PlainListFetcher({ getRequest, doRequest, processResults })
       : new PaginatedListFetcher({ getRequest, doRequest, processResults });
 
-    this.sortByIteratees = sortByIteratees;
-
     this.setState(defaultState);
     this._pageItems = [];
 
@@ -104,7 +87,7 @@ export class ItemsSource {
 
   setState(state) {
     this._paginator = new Paginator(state);
-    this._sorter = new Sorter(state, this.sortByIteratees);
+    this._sorter = new Sorter(state);
 
     this._searchTerm = state.searchTerm || "";
     this._selectedTags = state.selectedTags || [];

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

@@ -24,8 +24,6 @@ export default class Sorter {
 
   reverse = false;
 
-  sortByIteratees = null;
-
   get compiled() {
     return compile(this.field, this.reverse);
   }
@@ -44,10 +42,9 @@ export default class Sorter {
     this.reverse = !!value; // cast to boolean
   }
 
-  constructor({ orderByField, orderByReverse } = {}, sortByIteratees = undefined) {
+  constructor({ orderByField, orderByReverse } = {}) {
     this.setField(orderByField);
     this.setReverse(orderByReverse);
-    this.sortByIteratees = sortByIteratees;
   }
 
   toggleField(field) {
@@ -64,8 +61,7 @@ export default class Sorter {
 
   sort(items) {
     if (this.field) {
-      const customIteratee = this.sortByIteratees && this.sortByIteratees[this.field];
-      items = sortBy(items, customIteratee ? [customIteratee] : this.field);
+      items = sortBy(items, this.field);
       if (this.reverse) {
         items.reverse();
       }

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

@@ -1,9 +1,8 @@
-import { isFunction, map, filter, extend, omit, identity, range, isEmpty } from "lodash";
+import { isFunction, map, filter, extend, omit, identity } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import Table from "antd/lib/table";
-import Skeleton from "antd/lib/skeleton";
 import FavoritesControl from "@/components/FavoritesControl";
 import TimeAgo from "@/components/TimeAgo";
 import { durationHumanize, formatDate, formatDateTime } from "@/lib/utils";
@@ -142,7 +141,7 @@ export default class ItemsTable extends React.Component {
 
         return extend(omit(column, ["field", "orderByField", "render"]), {
           key: "column" + index,
-          dataIndex: ["item", column.field],
+          dataIndex: "item[" + JSON.stringify(column.field) + "]",
           defaultSortOrder: column.orderByField === orderByField ? orderByDirection : null,
           onHeaderCell,
           render,
@@ -152,10 +151,8 @@ export default class ItemsTable extends React.Component {
   }
 
   render() {
-    const tableDataProps = {
-      columns: this.prepareColumns(),
-      dataSource: map(this.props.items, (item, index) => ({ key: "row" + index, item })),
-    };
+    const columns = this.prepareColumns();
+    const rows = map(this.props.items, (item, index) => ({ key: "row" + index, item }));
 
     // Bind events only if `onRowClick` specified
     const onTableRow = isFunction(this.props.onRowClick)
@@ -167,27 +164,17 @@ export default class ItemsTable extends React.Component {
       : null;
 
     const { showHeader } = this.props;
-    if (this.props.loading) {
-      if (isEmpty(tableDataProps.dataSource)) {
-        tableDataProps.columns = tableDataProps.columns.map(column => ({
-          ...column,
-          sorter: false,
-          render: () => <Skeleton active paragraph={false} />,
-        }));
-        tableDataProps.dataSource = range(10).map(key => ({ key: `${key}` }));
-      } else {
-        tableDataProps.loading = { indicator: null };
-      }
-    }
 
     return (
       <Table
         className={classNames("table-data", { "ant-table-headerless": !showHeader })}
+        loading={this.props.loading}
+        columns={columns}
         showHeader={showHeader}
+        dataSource={rows}
         rowKey={row => row.key}
         pagination={false}
         onRow={onTableRow}
-        {...tableDataProps}
       />
     );
   }

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

@@ -3,7 +3,6 @@ import React, { useState, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
 import Input from "antd/lib/input";
 import AntdMenu from "antd/lib/menu";
-import Link from "@/components/Link";
 import TagsList from "@/components/TagsList";
 
 /*
@@ -60,7 +59,7 @@ export function Menu({ items, selected }) {
       <AntdMenu className="invert-stripe-position" mode="inline" selectable={false} selectedKeys={[selected]}>
         {map(items, item => (
           <AntdMenu.Item key={item.key} className="m-0">
-            <Link href={item.href}>
+            <a href={item.href}>
               {isString(item.icon) && item.icon !== "" && (
                 <span className="btn-favourite m-r-5">
                   <i className={item.icon} aria-hidden="true" />
@@ -68,7 +67,7 @@ export function Menu({ items, selected }) {
               )}
               {isFunction(item.icon) && (item.icon(item) || null)}
               {item.title}
-            </Link>
+            </a>
           </AntdMenu.Item>
         ))}
       </AntdMenu>
@@ -132,13 +131,13 @@ ProfileImage.propTypes = {
     Tags
  */
 
-export function Tags({ url, onChange, showUnselectAll }) {
+export function Tags({ url, onChange }) {
   if (url === "") {
     return null;
   }
   return (
     <div className="m-b-10">
-      <TagsList tagsUrl={url} onUpdate={onChange} showUnselectAll={showUnselectAll} />
+      <TagsList tagsUrl={url} onUpdate={onChange} />
     </div>
   );
 }
@@ -146,6 +145,4 @@ export function Tags({ url, onChange, showUnselectAll }) {
 Tags.propTypes = {
   url: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
-  showUnselectAll: PropTypes.bool,
-  unselectAllButtonTitle: PropTypes.string,
 };

client/app/components/layouts/ContentWithSidebar.jsx

@@ -42,7 +42,7 @@ Content.defaultProps = defaultProps;
 
 // Layout
 
-export default function Layout({ children, className = undefined, ...props }) {
+export default function Layout({ className, children, ...props }) {
   return (
     <div className={classNames("layout-with-sidebar", className)} {...props}>
       {children}

client/app/components/layouts/content-with-sidebar.less

@@ -9,7 +9,7 @@
   margin: 0;
 
   > .layout-content {
-    flex: 1 0 auto;
+    flex: 0 0 auto;
     width: 75%;
     order: 0;
     margin: 0;
@@ -18,7 +18,6 @@
   > .layout-sidebar {
     flex: 0 0 auto;
     width: 25%;
-    max-width: 350px;
     order: 1;
     margin: 0;
     padding: 0 0 0 @spacing;
@@ -35,7 +34,6 @@
 
     > .layout-sidebar {
       width: 100%;
-      max-width: none;
       order: 0;
       margin: 0 0 @spacing 0;
       padding: 0;

client/app/components/proptypes.js

@@ -31,6 +31,53 @@ export const RefreshScheduleDefault = {
   until: null,
 };
 
+export const Field = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  type: PropTypes.oneOf([
+    "ace",
+    "text",
+    "textarea",
+    "email",
+    "password",
+    "number",
+    "checkbox",
+    "file",
+    "select",
+    "content",
+  ]).isRequired,
+  initialValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+  content: PropTypes.node,
+  mode: PropTypes.string,
+  required: PropTypes.bool,
+  extra: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  minLength: PropTypes.number,
+  placeholder: PropTypes.string,
+  contentAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  loading: PropTypes.bool,
+  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+});
+
+export const Action = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  callback: PropTypes.func.isRequired,
+  type: PropTypes.string,
+  pullRight: PropTypes.bool,
+  disabledWhenDirty: PropTypes.bool,
+});
+
+export const AntdForm = PropTypes.shape({
+  validateFieldsAndScroll: PropTypes.func,
+});
+
 export const UserProfile = PropTypes.shape({
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,

client/app/components/queries/AddToDashboardDialog.jsx

@@ -4,8 +4,7 @@ import PropTypes from "prop-types";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import List from "antd/lib/list";
-import Link from "@/components/Link";
-import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
+import Icon from "antd/lib/icon";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
 import { Dashboard } from "@/services/dashboard";
@@ -52,9 +51,9 @@ function AddToDashboardDialog({ dialog, visualization }) {
         notification.success(
           "Widget added to dashboard",
           <React.Fragment>
-            <Link href={`${dashboard.url}`} onClick={() => notification.close(key)}>
+            <a href={`${dashboard.url}`} onClick={() => notification.close(key)}>
               {dashboard.name}
-            </Link>
+            </a>
             <QueryTagsControl isDraft={dashboard.is_draft} tags={dashboard.tags} />
           </React.Fragment>,
           { key }
@@ -89,7 +88,7 @@ function AddToDashboardDialog({ dialog, visualization }) {
           value={searchTerm}
           onChange={event => setSearchTerm(event.target.value)}
           suffix={
-            <CloseOutlinedIcon className={searchTerm === "" ? "hidden" : null} onClick={() => setSearchTerm("")} />
+            <Icon type="close" className={searchTerm === "" ? "hidden" : null} onClick={() => setSearchTerm("")} />
           }
         />
       )}
@@ -104,7 +103,7 @@ function AddToDashboardDialog({ dialog, visualization }) {
           renderItem={d => (
             <List.Item
               key={`dashboard-${d.id}`}
-              actions={selectedDashboard ? [<CloseOutlinedIcon onClick={() => setSelectedDashboard(null)} />] : []}
+              actions={selectedDashboard ? [<Icon type="close" onClick={() => setSelectedDashboard(null)} />] : []}
               onClick={selectedDashboard ? null : () => setSelectedDashboard(d)}>
               <div className="add-to-dashboard-dialog-item-content">
                 {d.name}

client/app/components/queries/QueryEditor/AutoLimitCheckbox.jsx

@@ -1,37 +0,0 @@
-import React, { useCallback } from "react";
-import PropTypes from "prop-types";
-import recordEvent from "@/services/recordEvent";
-import Checkbox from "antd/lib/checkbox";
-import Tooltip from "antd/lib/tooltip";
-
-export default function AutoLimitCheckbox({ available, checked, onChange }) {
-  const handleClick = useCallback(() => {
-    recordEvent("checkbox_auto_limit", "screen", "query_editor", { state: !checked });
-    onChange(!checked);
-  }, [checked, onChange]);
-
-  let tooltipMessage = null;
-  if (!available) {
-    tooltipMessage = "Auto limiting is not available for this Data Source type.";
-  } else {
-    tooltipMessage = "Auto limit results to first 1000 rows.";
-  }
-
-  return (
-    <Tooltip placement="top" title={tooltipMessage}>
-      <Checkbox
-        className="query-editor-controls-checkbox"
-        disabled={!available}
-        onClick={handleClick}
-        checked={available && checked}>
-        LIMIT 1000
-      </Checkbox>
-    </Tooltip>
-  );
-}
-
-AutoLimitCheckbox.propTypes = {
-  available: PropTypes.bool,
-  checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-};

client/app/components/queries/QueryEditor/QueryEditorControls.jsx

@@ -8,7 +8,6 @@ import KeyboardShortcuts, { humanReadableShortcut } from "@/services/KeyboardSho
 
 import AutocompleteToggle from "./AutocompleteToggle";
 import "./QueryEditorControls.less";
-import AutoLimitCheckbox from "@/components/queries/QueryEditor/AutoLimitCheckbox";
 
 export function ButtonTooltip({ title, shortcut, ...props }) {
   shortcut = humanReadableShortcut(shortcut, 1); // show only primary shortcut
@@ -39,7 +38,6 @@ export default function EditorControl({
   saveButtonProps,
   executeButtonProps,
   autocompleteToggleProps,
-  autoLimitCheckboxProps,
   dataSourceSelectorProps,
 }) {
   useEffect(() => {
@@ -86,7 +84,6 @@ export default function EditorControl({
           onToggle={autocompleteToggleProps.onToggle}
         />
       )}
-      {autoLimitCheckboxProps !== false && <AutoLimitCheckbox {...autoLimitCheckboxProps} />}
       {dataSourceSelectorProps === false && <span className="query-editor-controls-spacer" />}
       {dataSourceSelectorProps !== false && (
         <Select
@@ -156,10 +153,6 @@ EditorControl.propTypes = {
       onToggle: PropTypes.func,
     }),
   ]),
-  autoLimitCheckboxProps: PropTypes.oneOfType([
-    PropTypes.bool, // `false` to hide
-    PropTypes.shape(AutoLimitCheckbox.propTypes),
-  ]),
   dataSourceSelectorProps: PropTypes.oneOfType([
     PropTypes.bool, // `false` to hide
     PropTypes.shape({
@@ -182,6 +175,5 @@ EditorControl.defaultProps = {
   saveButtonProps: false,
   executeButtonProps: false,
   autocompleteToggleProps: false,
-  autoLimitCheckboxProps: false,
   dataSourceSelectorProps: false,
 };

client/app/components/queries/QueryEditor/QueryEditorControls.less

@@ -21,12 +21,6 @@
     }
   }
 
-  .query-editor-controls-checkbox {
-    display: inline-block;
-    white-space: nowrap;
-    margin: auto 5px;
-  }
-
   .query-editor-controls-spacer {
     flex: 1 1 auto;
     height: 35px; // same as Antd <Select>

client/app/components/queries/ScheduleDialog.jsx

@@ -210,7 +210,7 @@ class ScheduleDialog extends React.Component {
               {Object.keys(this.intervals).map(int => (
                 <OptGroup label={capitalize(pluralize(int))} key={int}>
                   {this.intervals[int].map(([cnt, secs]) => (
-                    <Option value={secs} key={`${int}-${cnt}`}>
+                    <Option value={secs} key={cnt}>
                       {durationHumanize(secs)}
                     </Option>
                   ))}

client/app/components/queries/ScheduleDialog.test.js

@@ -120,36 +120,27 @@ describe("ScheduleDialog", () => {
         expect(utc.exists()).toBeFalsy();
       });
 
-      // Disabling this test as the TimePicker wasn't setting values from here after Antd v4
-      // eslint-disable-next-line jest/no-disabled-tests
-      test.skip("onChange correct result", () => {
+      test("onChange correct result", () => {
         const onChangeCb = jest.fn(time => time.format("HH:mm"));
         const editor = mount(<TimeEditor onChange={onChangeCb} />);
 
         // click TimePicker
-        editor.find(".ant-picker-input input").simulate("mouseDown");
-
-        const timePickerPanel = editor.find(".ant-picker-panel");
+        editor.find(".ant-time-picker-input").simulate("click");
 
         // select hour "07"
-        const hourSelector = timePickerPanel.find(".ant-picker-time-panel-column").at(0);
+        const hourSelector = editor.find(".ant-time-picker-panel-select").at(0);
         hourSelector
           .find("li")
           .at(7)
           .simulate("click");
 
         // select minute "30"
-        const minuteSelector = timePickerPanel.find(".ant-picker-time-panel-column").at(1);
+        const minuteSelector = editor.find(".ant-time-picker-panel-select").at(1);
         minuteSelector
           .find("li")
           .at(6)
           .simulate("click");
 
-        timePickerPanel
-          .find(".ant-picker-ok")
-          .find("button")
-          .simulate("mouseDown");
-
         // expect utc to be 2h below initial time
         const utc = findByTestID(editor, "utc");
         expect(utc.text()).toBe("(05:30 UTC)");
@@ -222,7 +213,7 @@ describe("ScheduleDialog", () => {
           .find("Trigger")
           .instance()
           .getComponent()
-      ).find(".ant-select-item-option-content");
+      ).find("MenuItem");
 
       const texts = options.map(node => node.text());
       const expected = ["Never", "1 minute", "5 minutes", "1 hour", "2 hours"];

client/app/components/queries/SchedulePhrase.jsx

@@ -51,7 +51,7 @@ export default class SchedulePhrase extends React.Component {
     const content = full ? <Tooltip title={full}>{short}</Tooltip> : short;
 
     return this.props.isLink ? (
-      <a className="schedule-phrase" onClick={this.props.onClick} data-test="EditSchedule">
+      <a className="schedule-phrase" onClick={this.props.onClick}>
         {content}
       </a>
     ) : (

client/app/components/queries/SchemaBrowser.jsx

@@ -20,7 +20,6 @@ const SchemaItemColumnType = PropTypes.shape({
 export const SchemaItemType = PropTypes.shape({
   name: PropTypes.string.isRequired,
   size: PropTypes.number,
-  loading: PropTypes.bool,
   columns: PropTypes.arrayOf(SchemaItemColumnType).isRequired,
 });
 
@@ -57,24 +56,20 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
       </div>
       {expanded && (
         <div>
-          {item.loading ? (
-            <div className="table-open">Loading...</div>
-          ) : (
-            map(item.columns, column => {
-              const columnName = get(column, "name");
-              const columnType = get(column, "type");
-              return (
-                <div key={columnName} className="table-open">
-                  {columnName} {columnType && <span className="column-type">{columnType}</span>}
-                  <i
-                    className="fa fa-angle-double-right copy-to-editor"
-                    aria-hidden="true"
-                    onClick={e => handleSelect(e, columnName)}
-                  />
-                </div>
-              );
-            })
-          )}
+          {map(item.columns, column => {
+            const columnName = get(column, "name");
+            const columnType = get(column, "type");
+            return (
+              <div key={columnName} className="table-open">
+                {columnName} {columnType && <span className="column-type">{columnType}</span>}
+                <i
+                  className="fa fa-angle-double-right copy-to-editor"
+                  aria-hidden="true"
+                  onClick={e => handleSelect(e, columnName)}
+                />
+              </div>
+            );
+          })}
         </div>
       )}
     </div>
@@ -125,8 +120,7 @@ export function SchemaList({ loading, schema, expandedFlags, onTableExpand, onIt
               rowCount={schema.length}
               rowHeight={({ index }) => {
                 const item = schema[index];
-                const columnsLength = !item.loading ? item.columns.length : 1;
-                let columnCount = expandedFlags[item.name] ? columnsLength : 0;
+                const columnCount = expandedFlags[item.name] ? item.columns.length : 0;
                 return schemaTableHeight + schemaColumnHeight * columnCount;
               }}
               rowRenderer={({ key, index, style }) => {

client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx

@@ -1,18 +1,22 @@
 import React, { useState, useMemo, useEffect, useCallback } from "react";
-import { filter, includes, get, find } from "lodash";
+import { slice, without, filter, includes } from "lodash";
 import PropTypes from "prop-types";
 import { useDebouncedCallback } from "use-debounce";
-import Button from "antd/lib/button";
-import SyncOutlinedIcon from "@ant-design/icons/SyncOutlined";
 import Input from "antd/lib/input";
 import Select from "antd/lib/select";
-import Tooltip from "antd/lib/tooltip";
 import { SchemaList, applyFilterOnSchema } from "@/components/queries/SchemaBrowser";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
 import useDatabricksSchema from "./useDatabricksSchema";
 
 import "./DatabricksSchemaBrowser.less";
 
+// Limit number of rendered options to improve performance until Antd v4
+function getLimitedDatabases(databases, currentDatabaseName, limit = 1000) {
+  const limitedDatabases = slice(without(databases, currentDatabaseName), 0, limit);
+
+  return currentDatabaseName ? [...limitedDatabases, currentDatabaseName].sort() : limitedDatabases;
+}
+
 export default function DatabricksSchemaBrowser({
   dataSource,
   options,
@@ -26,11 +30,8 @@ export default function DatabricksSchemaBrowser({
     loadingDatabases,
     schema,
     loadingSchema,
-    loadTableColumns,
     currentDatabaseName,
     setCurrentDatabase,
-    refreshAll,
-    refreshing,
   } = useDatabricksSchema(dataSource, options, onOptionsUpdate);
   const [filterString, setFilterString] = useState("");
   const [databaseFilterString, setDatabaseFilterString] = useState("");
@@ -56,26 +57,23 @@ export default function DatabricksSchemaBrowser({
     () => filter(databases, database => includes(database.toLowerCase(), databaseFilterString.toLowerCase())),
     [databases, databaseFilterString]
   );
+  const limitedDatabases = useMemo(() => getLimitedDatabases(filteredDatabases, currentDatabaseName), [
+    filteredDatabases,
+    currentDatabaseName,
+  ]);
 
   const handleSchemaUpdate = useImmutableCallback(onSchemaUpdate);
 
   useEffect(() => {
+    setExpandedFlags({});
     handleSchemaUpdate(schema);
   }, [schema, handleSchemaUpdate]);
 
-  useEffect(() => {
-    setExpandedFlags({});
-  }, [currentDatabaseName]);
-
   if (schema.length === 0 && databases.length === 0 && !(loadingDatabases || loadingSchema)) {
     return null;
   }
 
   function toggleTable(tableName) {
-    const table = find(schema, { name: tableName });
-    if (!expandedFlags[tableName] && get(table, "loading", false)) {
-      loadTableColumns(tableName);
-    }
     setExpandedFlags({
       ...expandedFlags,
       [tableName]: !expandedFlags[tableName],
@@ -105,12 +103,17 @@ export default function DatabricksSchemaBrowser({
                   <i className="fa fa-database m-r-5" /> Database
                 </>
               }>
-              {filteredDatabases.map(database => (
+              {limitedDatabases.map(database => (
                 <Select.Option key={database}>
                   <i className="fa fa-database m-r-5" />
                   {database}
                 </Select.Option>
               ))}
+              {limitedDatabases.length < filteredDatabases.length && (
+                <Select.Option key="hidden_options" value={-1} disabled>
+                  Some databases were hidden due to a large set, search to limit results.
+                </Select.Option>
+              )}
             </Select>
           }
         />
@@ -123,15 +126,6 @@ export default function DatabricksSchemaBrowser({
           onTableExpand={toggleTable}
           onItemSelect={onItemSelect}
         />
-        {!(loadingSchema || loadingDatabases) && (
-          <div className="load-button">
-            <Tooltip title={!refreshing ? "Refresh Databases and Current Schema" : null}>
-              <Button type="link" onClick={refreshAll} disabled={refreshing}>
-                <SyncOutlinedIcon spin={refreshing} />
-              </Button>
-            </Tooltip>
-          </div>
-        )}
       </div>
     </div>
   );

client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.less

@@ -1,11 +1,9 @@
-@import "~@/assets/less/ant";
-
 .databricks-schema-browser {
   .schema-control {
     .database-select-open .ant-input-group-addon {
       background-color: #fff;
 
-      .ant-select-selection-item {
+      .ant-select-selection-selected-value {
         visibility: hidden;
       }
     }
@@ -21,11 +19,7 @@
         .ant-select {
           width: 100%;
 
-          .ant-select-selection-item {
-            text-align: left;
-          }
-
-          &.ant-select-focused .ant-select-selector {
+          &.ant-select-focused .ant-select-selection {
             color: inherit;
           }
         }
@@ -38,29 +32,15 @@
   }
 
   .schema-list-wrapper {
-    position: relative;
     height: 100%;
     border: 1px solid #eaeaea;
     border-top: 0;
     border-radius: 0 0 4px 4px;
     margin-bottom: 20px;
-    padding-bottom: 32px;
-
-    .load-button {
-      display: flex;
-      justify-content: center;
-      position: absolute;
-      width: 100%;
-      bottom: 0;
-
-      .ant-btn {
-        color: @text-color;
-        padding: 0 10px;
-      }
-    }
   }
 }
 
 .databricks-schema-browser-db-dropdown {
-  width: 50vw !important;
+  width: auto !important;
+  max-width: 50vw;
 }

client/app/components/queries/editor-components/databricks/useDatabricksSchema.js

@@ -1,27 +1,27 @@
-import { has, get, map, first, isFunction, isEmpty } from "lodash";
+import { has, get, first, isFunction } from "lodash";
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import notification from "@/services/notification";
 import DatabricksDataSource from "@/services/databricks-data-source";
 
-function getDatabases(dataSource, refresh = false) {
+function getDatabases(dataSource) {
   if (!dataSource) {
     return Promise.resolve([]);
   }
 
-  return DatabricksDataSource.getDatabases(dataSource, refresh).catch(() => {
+  return DatabricksDataSource.getDatabases(dataSource).catch(() => {
     notification.error("Failed to load Database list", "Please try again later.");
-    return Promise.reject();
+    return Promise.resolve([]);
   });
 }
 
-function getSchema(dataSource, databaseName, refresh = false) {
+function getSchema(dataSource, databaseName) {
   if (!dataSource || !databaseName) {
     return Promise.resolve([]);
   }
 
-  return DatabricksDataSource.getDatabaseTables(dataSource, databaseName, refresh).catch(() => {
+  return DatabricksDataSource.getDatabaseTables(dataSource, databaseName).catch(() => {
     notification.error("Failed to load Schema", "Please try again later.");
-    return Promise.reject();
+    return Promise.resolve([]);
   });
 }
 
@@ -31,63 +31,9 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
   const [currentDatabaseName, setCurrentDatabaseName] = useState();
   const [schemas, setSchemas] = useState({});
   const [loadingSchema, setLoadingSchema] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-
-  const setCurrentSchema = useCallback(
-    schema =>
-      setSchemas(currentSchemas => ({
-        ...currentSchemas,
-        [currentDatabaseName]: schema,
-      })),
-    [currentDatabaseName]
-  );
-
-  const currentDatabaseNameRef = useRef();
-  currentDatabaseNameRef.current = currentDatabaseName;
-  const loadTableColumns = useCallback(
-    tableName => {
-      // remove [databaseName.] from the tableName
-      DatabricksDataSource.getTableColumns(
-        dataSource,
-        currentDatabaseName,
-        tableName.substring(currentDatabaseName.length + 1)
-      ).then(columns => {
-        if (currentDatabaseNameRef.current === currentDatabaseName) {
-          setSchemas(currentSchemas => {
-            const schema = get(currentSchemas, currentDatabaseName, []);
-            const updatedSchema = map(schema, table => {
-              if (table.name === tableName) {
-                return { ...table, columns, loading: false };
-              }
-              return table;
-            });
-            return {
-              ...currentSchemas,
-              [currentDatabaseName]: updatedSchema,
-            };
-          });
-        }
-      });
-    },
-    [dataSource, currentDatabaseName]
-  );
 
   const schema = useMemo(() => get(schemas, currentDatabaseName, []), [schemas, currentDatabaseName]);
 
-  const refreshAll = useCallback(() => {
-    if (!refreshing) {
-      setRefreshing(true);
-      const getDatabasesPromise = getDatabases(dataSource, true).then(setDatabases);
-      const getSchemasPromise = getSchema(dataSource, currentDatabaseName, true).then(({ schema }) =>
-        setCurrentSchema(schema)
-      );
-
-      Promise.all([getSchemasPromise.catch(() => {}), getDatabasesPromise.catch(() => {})]).then(() =>
-        setRefreshing(false)
-      );
-    }
-  }, [dataSource, currentDatabaseName, setCurrentSchema, refreshing]);
-
   const schemasRef = useRef();
   schemasRef.current = schemas;
   useEffect(() => {
@@ -95,18 +41,12 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
     if (currentDatabaseName && !has(schemasRef.current, currentDatabaseName)) {
       setLoadingSchema(true);
       getSchema(dataSource, currentDatabaseName)
-        .catch(() => Promise.resolve({ schema: [], has_columns: true }))
-        .then(({ schema, has_columns }) => {
+        .then(data => {
           if (!isCancelled) {
-            if (!has_columns && !isEmpty(schema)) {
-              schema = map(schema, table => ({ ...table, loading: true }));
-              getSchema(dataSource, currentDatabaseName, true).then(({ schema }) => {
-                if (!isCancelled) {
-                  setCurrentSchema(schema);
-                }
-              });
-            }
-            setCurrentSchema(schema);
+            setSchemas(currentSchemas => ({
+              ...currentSchemas,
+              [currentDatabaseName]: data,
+            }));
           }
         })
         .finally(() => {
@@ -118,17 +58,14 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
     return () => {
       isCancelled = true;
     };
-  }, [dataSource, currentDatabaseName, setCurrentSchema]);
+  }, [dataSource, currentDatabaseName]);
 
   const defaultDatabaseNameRef = useRef();
   defaultDatabaseNameRef.current = get(options, "selectedDatabase", null);
   useEffect(() => {
     let isCancelled = false;
     setLoadingDatabases(true);
-    setCurrentDatabaseName(undefined);
-    setSchemas({});
     getDatabases(dataSource)
-      .catch(() => Promise.resolve([]))
       .then(data => {
         if (!isCancelled) {
           setDatabases(data);
@@ -177,8 +114,5 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
     loadingSchema,
     currentDatabaseName,
     setCurrentDatabase,
-    loadTableColumns,
-    refreshAll,
-    refreshing,
   };
 }

client/app/components/queries/editor-components/index.js

@@ -9,9 +9,6 @@ registerEditorComponent(QueryEditorComponents.SCHEMA_BROWSER, SchemaBrowser);
 registerEditorComponent(QueryEditorComponents.QUERY_EDITOR, QueryEditor);
 
 // databricks
-registerEditorComponent(QueryEditorComponents.SCHEMA_BROWSER, DatabricksSchemaBrowser, [
-  "databricks",
-  "databricks_internal",
-]);
+registerEditorComponent(QueryEditorComponents.SCHEMA_BROWSER, DatabricksSchemaBrowser, ["databricks"]);
 
 export { getEditorComponents };

client/app/components/visualizations/VisualizationRenderer.jsx

@@ -1,8 +1,7 @@
-import { isEqual, map, find, fromPairs } from "lodash";
+import { map, find } from "lodash";
 import React, { useState, useMemo, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import useQueryResultData from "@/lib/useQueryResultData";
-import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
 import Filters, { FiltersType, filterData } from "@/components/Filters";
 import { VisualizationType } from "@redash/viz/lib";
 import { Renderer } from "@/components/visualizations/visualizationComponents";
@@ -25,41 +24,23 @@ function combineFilters(localFilters, globalFilters) {
   });
 }
 
-function areFiltersEqual(a, b) {
-  if (a.length !== b.length) {
-    return false;
-  }
-
-  a = fromPairs(map(a, item => [item.name, item]));
-  b = fromPairs(map(b, item => [item.name, item]));
-
-  return isEqual(a, b);
-}
-
 export default function VisualizationRenderer(props) {
   const data = useQueryResultData(props.queryResult);
-  const [filters, setFilters] = useState(() => combineFilters(data.filters, props.filters)); // lazy initialization
+  const [filters, setFilters] = useState(data.filters);
   const filtersRef = useRef();
   filtersRef.current = filters;
 
-  const handleFiltersChange = useImmutableCallback(newFilters => {
-    if (!areFiltersEqual(newFilters, filters)) {
-      setFilters(newFilters);
-      props.onFiltersChange(newFilters);
-    }
-  });
-
   // Reset local filters when query results updated
   useEffect(() => {
-    handleFiltersChange(combineFilters(data.filters, props.filters));
-  }, [data.filters, props.filters, handleFiltersChange]);
+    setFilters(combineFilters(data.filters, props.filters));
+  }, [data.filters, props.filters]);
 
   // Update local filters when global filters changed.
   // For correct behavior need to watch only `props.filters` here,
   // therefore using ref to access current local filters
   useEffect(() => {
-    handleFiltersChange(combineFilters(filtersRef.current, props.filters));
-  }, [props.filters, handleFiltersChange]);
+    setFilters(combineFilters(filtersRef.current, props.filters));
+  }, [props.filters]);
 
   const filteredData = useMemo(
     () => ({
@@ -85,7 +66,7 @@ export default function VisualizationRenderer(props) {
       options={options}
       data={filteredData}
       visualizationName={visualization.name}
-      addonBefore={showFilters && <Filters filters={filters} onChange={handleFiltersChange} />}
+      addonBefore={showFilters && <Filters filters={filters} onChange={setFilters} />}
     />
   );
 }
@@ -93,14 +74,12 @@ export default function VisualizationRenderer(props) {
 VisualizationRenderer.propTypes = {
   visualization: VisualizationType.isRequired,
   queryResult: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  showFilters: PropTypes.bool,
   filters: FiltersType,
-  onFiltersChange: PropTypes.func,
+  showFilters: PropTypes.bool,
   context: PropTypes.oneOf(["query", "widget"]).isRequired,
 };
 
 VisualizationRenderer.defaultProps = {
-  showFilters: true,
   filters: [],
-  onFiltersChange: () => {},
+  showFilters: true,
 };

client/app/components/visualizations/visualizationComponents.jsx

@@ -1,57 +1,24 @@
 import React from "react";
 import { pick } from "lodash";
 import HelpTrigger from "@/components/HelpTrigger";
-import Link from "@/components/Link";
 import { Renderer as VisRenderer, Editor as VisEditor, updateVisualizationsSettings } from "@redash/viz/lib";
 import { clientConfig } from "@/services/auth";
 
 import countriesDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/countries.geo.json";
-import usaDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/usa-albers.geo.json";
 import subdivJapanDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/japan.prefectures.geo.json";
 
 function wrapComponentWithSettings(WrappedComponent) {
   return function VisualizationComponent(props) {
     updateVisualizationsSettings({
       HelpTriggerComponent: HelpTrigger,
-      LinkComponent: Link,
       choroplethAvailableMaps: {
         countries: {
           name: "Countries",
           url: countriesDataUrl,
-          fieldNames: {
-            name: "Short name",
-            name_long: "Full name",
-            abbrev: "Abbreviated name",
-            iso_a2: "ISO code (2 letters)",
-            iso_a3: "ISO code (3 letters)",
-            iso_n3: "ISO code (3 digits)",
-          },
-        },
-        usa: {
-          name: "USA",
-          url: usaDataUrl,
-          fieldNames: {
-            name: "Name",
-            ns_code: "National Standard ANSI Code (8-character)",
-            geoid: "Geographic ID",
-            usps_abbrev: "USPS Abbreviation",
-            fips_code: "FIPS Code (2-character)",
-          },
         },
         subdiv_japan: {
           name: "Japan/Prefectures",
           url: subdivJapanDataUrl,
-          fieldNames: {
-            name: "Name",
-            name_alt: "Name (alternative)",
-            name_local: "Name (local)",
-            iso_3166_2: "ISO-3166-2",
-            postal: "Postal Code",
-            type: "Type",
-            type_en: "Type (EN)",
-            region: "Region",
-            region_code: "Region Code",
-          },
         },
       },
       ...pick(clientConfig, [

client/app/lib/utils.js

@@ -8,16 +8,6 @@ export const IntervalEnum = {
   HOURS: "hour",
   DAYS: "day",
   WEEKS: "week",
-  MILLISECONDS: "millisecond",
-};
-
-export const AbbreviatedTimeUnits = {
-  SECONDS: "s",
-  MINUTES: "m",
-  HOURS: "h",
-  DAYS: "d",
-  WEEKS: "w",
-  MILLISECONDS: "ms",
 };
 
 export function formatDateTime(value) {
@@ -86,12 +76,12 @@ export function pluralize(text, count) {
   return text + (should ? "s" : "");
 }
 
-export function durationHumanize(durationInSeconds, options = {}) {
-  if (!durationInSeconds) {
+export function durationHumanize(duration, options = {}) {
+  if (!duration) {
     return "-";
   }
   let ret = "";
-  const { interval, count } = secondsToInterval(durationInSeconds);
+  const { interval, count } = secondsToInterval(duration);
   const rounded = Math.round(count);
   if (rounded !== 1 || !options.omitSingleValueNumber) {
     ret = `${rounded} `;

client/app/lib/value-format.js

@@ -1,9 +1,6 @@
-import React from "react";
-import ReactDOMServer from "react-dom/server";
 import moment from "moment/moment";
 import numeral from "numeral";
 import { isString, isArray, isUndefined, isFinite, isNil, toString } from "lodash";
-import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
 
 numeral.options.scalePercentBy100 = false;
 
@@ -16,15 +13,7 @@ export function createTextFormatter(highlightLinks) {
   if (highlightLinks) {
     return value => {
       if (isString(value)) {
-        const Link = visualizationsSettings.LinkComponent;
-        value = value.replace(urlPattern, (unused, prefix, href) => {
-          const link = ReactDOMServer.renderToStaticMarkup(
-            <Link href={href} target="_blank" rel="noopener noreferrer">
-              {href}
-            </Link>
-          );
-          return prefix + link;
-        });
+        value = value.replace(urlPattern, '$1<a href="$2" target="_blank">$2</a>');
       }
       return toString(value);
     };

client/app/pages/admin/OutdatedQueries.jsx

@@ -3,7 +3,6 @@ import React from "react";
 
 import Switch from "antd/lib/switch";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
-import Link from "@/components/Link";
 import Paginator from "@/components/Paginator";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
 import SchedulePhrase from "@/components/queries/SchedulePhrase";
@@ -38,9 +37,9 @@ class OutdatedQueries extends React.Component {
     Columns.custom.sortable(
       (text, item) => (
         <React.Fragment>
-          <Link className="table-main-title" href={"queries/" + item.id}>
+          <a className="table-main-title" href={"queries/" + item.id}>
             {item.name}
-          </Link>
+          </a>
           <QueryTagsControl
             className="d-block"
             tags={item.tags}

client/app/pages/alert/AlertView.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 
-import Link from "@/components/Link";
 import TimeAgo from "@/components/TimeAgo";
 import { Alert as AlertType } from "@/components/proptypes";
 
@@ -24,9 +23,9 @@ function AlertState({ state, lastTriggered }) {
   return (
     <div className="alert-state">
       <span className={`alert-state-indicator label ${STATE_CLASS[state]}`}>Status: {state}</span>
-      {state === "unknown" && <div className="ant-form-item-explain">Alert condition has not been evaluated.</div>}
+      {state === "unknown" && <div className="ant-form-explain">Alert condition has not been evaluated.</div>}
       {lastTriggered && (
-        <div className="ant-form-item-explain">
+        <div className="ant-form-explain">
           Last triggered{" "}
           <span className="alert-last-triggered">
             <TimeAgo date={lastTriggered} />
@@ -137,9 +136,9 @@ export default class AlertView extends React.Component {
               <h4>
                 Destinations{" "}
                 <Tooltip title="Open Alert Destinations page in a new tab.">
-                  <Link href="destinations" target="_blank">
+                  <a href="destinations" target="_blank">
                     <i className="fa fa-external-link f-13" />
-                  </Link>
+                  </a>
                 </Tooltip>
               </h4>
               <AlertDestinations alertId={alert.id} />

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

@@ -2,7 +2,6 @@ import { without, find, includes, map, toLower } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 
-import Link from "@/components/Link";
 import SelectItemsDialog from "@/components/SelectItemsDialog";
 import { Destination as DestinationType, UserProfile as UserType } from "@/components/proptypes";
 
@@ -13,7 +12,7 @@ import notification from "@/services/notification";
 import ListItemAddon from "@/components/groups/ListItemAddon";
 import EmailSettingsWarning from "@/components/EmailSettingsWarning";
 
-import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
+import Icon from "antd/lib/icon";
 import Tooltip from "antd/lib/tooltip";
 import Switch from "antd/lib/switch";
 import Button from "antd/lib/button";
@@ -46,7 +45,7 @@ function ListItem({ destination: { name, type }, user, unsubscribe }) {
       )}
       {canUnsubscribe && (
         <Tooltip title="Remove" mouseEnterDelay={0.5}>
-          <CloseOutlinedIcon className="remove-button" onClick={unsubscribe} />
+          <Icon type="close" className="remove-button" onClick={unsubscribe} />
         </Tooltip>
       )}
     </li>
@@ -90,9 +89,9 @@ export default class AlertDestinations extends React.Component {
         <>
           <i className="fa fa-info-circle" /> Create new destinations in{" "}
           <Tooltip title="Opens page in a new tab.">
-            <Link href="destinations/new" target="_blank">
+            <a href="destinations/new" target="_blank">
               Alert Destinations
-            </Link>
+            </a>
           </Tooltip>
         </>
       ),

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

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { head, includes, toString, isEmpty } from "lodash";
 
 import Input from "antd/lib/input";
-import WarningFilledIcon from "@ant-design/icons/WarningFilled";
+import Icon from "antd/lib/icon";
 import Select from "antd/lib/select";
 import Divider from "antd/lib/divider";
 
@@ -124,12 +124,12 @@ export default function Criteria({ columnNames, resultValues, alertOptions, onCh
           <DisabledInput minWidth={50}>{alertOptions.value}</DisabledInput>
         )}
       </div>
-      <div className="ant-form-item-explain">
+      <div className="ant-form-explain">
         {columnHint}
         <br />
         {invalidMessage && (
           <small>
-            <WarningFilledIcon className="warning-icon-danger" /> {invalidMessage}
+            <Icon type="warning" theme="filled" className="warning-icon-danger" /> {invalidMessage}
           </small>
         )}
       </div>

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

@@ -10,19 +10,19 @@
     vertical-align: middle;
 
     & > span {
-      position: absolute;
-      top: -16px;
-      left: 0;
-      line-height: normal;
-      font-size: 10px;
+        position: absolute;
+        top: -16px;
+        left: 0;
+        line-height: normal;
+        font-size: 10px;
 
-      & + * {
-        vertical-align: top;
-      }
+        & + * {
+            vertical-align: top;
+        }
     }
   }
 
-  .ant-form-item-explain {
+  .ant-form-explain {
     margin-top: -17px; // compensation for .input-title bottom margin
   }
 
@@ -49,4 +49,4 @@
   overflow: hidden;
   white-space: nowrap;
   padding: 0 8px;
-}
+}

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

@@ -6,9 +6,7 @@ import Modal from "antd/lib/modal";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Button from "antd/lib/button";
-
-import LoadingOutlinedIcon from "@ant-design/icons/LoadingOutlined";
-import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
+import Icon from "antd/lib/icon";
 
 export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
   const [loading, setLoading] = useState(false);
@@ -56,7 +54,7 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
           </Menu.Item>
         </Menu>
       }>
-      <Button>{loading ? <LoadingOutlinedIcon /> : <EllipsisOutlinedIcon rotate={90} />}</Button>
+      <Button>{loading ? <Icon type="loading" /> : <Icon type="ellipsis" rotate={90} />}</Button>
     </Dropdown>
   );
 }

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

@@ -88,7 +88,7 @@ function NotificationTemplate({ alert, query, columnNames, resultValues, subject
           />
           <Input.TextArea
             value={showPreview ? render(body) : body}
-            autoSize={{ minRows: 9 }}
+            autosize={{ minRows: 9 }}
             onChange={e => setBody(e.target.value)}
             disabled={showPreview}
             data-test="CustomBody"