Don't reuse getErrorMessage (#4972)

* Sankey: Make sure last stage has "Exit"

* Sankey: Use 2 as min stage width size to render

* Use null instead of "Exit"

* Add comment about corresponding exit node

* Add multiple stages on Cypress test

.circleci/Dockerfile.cypress

@@ -1,12 +1,12 @@
-FROM cypress/browsers:node14.0.0-chrome84
+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: |
@@ -123,18 +108,6 @@ jobs:
       - run:
           name: Execute Cypress tests
           command: npm run cypress run-ci
-      - run:
-          name: "Failure: output container logs to console"
-          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,24 +3,13 @@ FROM node:12 as frontend-builder
 # Controls whether to build the frontend assets
 ARG skip_frontend_build
 
-ENV CYPRESS_INSTALL_BINARY=0
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
-
-RUN useradd -m -d /frontend redash
-USER redash
-
 WORKDIR /frontend
-COPY --chown=redash package.json package-lock.json /frontend/
-COPY --chown=redash viz-lib /frontend/viz-lib
-
-# Controls whether to instrument code for coverage information
-ARG code_coverage
-ENV BABEL_ENV=${code_coverage:+test}
-
+COPY package.json package-lock.json /frontend/
+COPY viz-lib /frontend/viz-lib
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
 
-COPY --chown=redash client /frontend/client
-COPY --chown=redash webpack.config.js /frontend/
+COPY client /frontend/client
+COPY webpack.config.js /frontend/
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm run build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
 FROM python:3.7-slim
 

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/bundle-extensions

@@ -6,8 +6,8 @@ from pathlib import Path
 from shutil import copy
 from collections import OrderedDict as odict
 
-import importlib_metadata
-import importlib_resources
+from importlib_metadata import entry_points
+from importlib_resources import contents, is_resource, path
 
 # Name of the subdirectory
 BUNDLE_DIRECTORY = "bundle"
@@ -25,6 +25,18 @@ if not extensions_directory.exists():
 os.environ["EXTENSIONS_DIRECTORY"] = str(extensions_relative_path)
 
 
+def resource_isdir(module, resource):
+    """Whether a given resource is a directory in the given module
+
+    https://importlib-resources.readthedocs.io/en/latest/migration.html#pkg-resources-resource-isdir
+    """
+    try:
+        return resource in contents(module) and not is_resource(module, resource)
+    except (ImportError, TypeError):
+        # module isn't a package, so can't have a subdirectory/-package
+        return False
+
+
 def entry_point_module(entry_point):
     """Returns the dotted module path for the given entry point"""
     return entry_point.pattern.match(entry_point.value).group("module")
@@ -65,28 +77,18 @@ def load_bundles():
 
     """
     bundles = odict()
-    for entry_point in importlib_metadata.entry_points().get("redash.bundles", []):
+    for entry_point in entry_points().get("redash.bundles", []):
         logger.info('Loading Redash bundle "%s".', entry_point.name)
         module = entry_point_module(entry_point)
         # Try to get a list of bundle files
-        try:
-            bundle_dir = importlib_resources.files(module).joinpath(BUNDLE_DIRECTORY)
-        except (ImportError, TypeError):
-            # Module isn't a package, so can't have a subdirectory/-package
+        if not resource_isdir(module, BUNDLE_DIRECTORY):
             logger.error(
-                'Redash bundle module "%s" could not be imported: "%s"',
-                entry_point.name,
-                module,
-            )
-            continue
-        if not bundle_dir.is_dir():
-            logger.error(
-                'Redash bundle directory "%s" could not be found or is not a directory: "%s"',
-                entry_point.name,
-                bundle_dir,
+                'Redash bundle directory "%s" could not be found.', entry_point.name
             )
             continue
+        with path(module, BUNDLE_DIRECTORY) as bundle_dir:
             bundles[entry_point.name] = list(bundle_dir.rglob("*"))
+
     return bundles
 
 

bin/docker-entrypoint

@@ -19,7 +19,7 @@ worker() {
   export WORKERS_COUNT=${WORKERS_COUNT:-2}
   export QUEUES=${QUEUES:-}
   
-  exec supervisord -c worker.conf
+  supervisord -c worker.conf
 }
 
 dev_worker() {
@@ -126,3 +126,4 @@ case "$1" in
     exec "$@"
     ;;
 esac
+

client/.babelrc

@@ -1,29 +1,19 @@
 {
   "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"
       ],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
+      "useBuiltIns": "usage"
+    }],
+    "@babel/preset-react"
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-object-assign",
-    [
-      "babel-plugin-transform-builtin-extend",
-      {
+    ["babel-plugin-transform-builtin-extend", {
       "globals": ["Error"]
-      }
+    }]
   ]
-  ],
-  "env": {
-    "test": {
-      "plugins": ["istanbul"]
-    }
-  }
 }

client/.eslintrc.js

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

client/app/assets/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

@@ -32,6 +32,17 @@ body {
   #application-root {
     padding-bottom: 15px;
   }
+
+  &.headless {
+    #application-root {
+      padding-top: 10px;
+      padding-bottom: 0;
+    }
+
+    .app-header-wrapper {
+      display: none;
+    }
+  }
 }
 
 #application-root {
@@ -78,16 +89,46 @@ strong {
   }
 }
 
+// Fixed width layout for specific pages
+@media (min-width: 768px) {
   .settings-screen,
   .home-page,
   .page-dashboard-list,
   .page-queries-list,
   .page-alerts-list,
   .alert-page,
-.admin-page-layout {
+  .fixed-container {
     .container {
-    width: 100%;
-    max-width: none;
+      width: 750px;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .settings-screen,
+  .home-page,
+  .page-dashboard-list,
+  .page-queries-list,
+  .page-alerts-list,
+  .alert-page,
+  .fixed-container {
+    .container {
+      width: 970px;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  .settings-screen,
+  .home-page,
+  .page-dashboard-list,
+  .page-queries-list,
+  .page-alerts-list,
+  .alert-page,
+  .fixed-container {
+    .container {
+      width: 1170px;
+    }
   }
 }
 
@@ -214,6 +255,7 @@ text.slicetext {
   }
 }
 
+.page-header-wrapper,
 .page-header--new {
   h3 {
     margin: 0.2em 0;

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

@@ -6,7 +6,6 @@ div.table-name {
   padding: 2px 22px 2px 10px;
   border-radius: @redash-radius;
   position: relative;
-  height: 22px;
 
   .copy-to-editor {
     display: none;
@@ -28,19 +27,13 @@ div.table-name {
 }
 
 .schema-browser {
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
   border: none;
-  padding-top: 10px;
+  margin-top: 10px;
   position: relative;
   height: 100%;
 
-  .schema-loading-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-
   .collapse.in {
     background: transparent;
   }
@@ -64,14 +57,6 @@ div.table-name {
     text-overflow: ellipsis;
     white-space: nowrap;
     position: relative;
-    height: 18px;
-
-    .column-type {
-      color: fade(@text-color, 80%);
-      font-size: 10px;
-      margin-left: 2px;
-      text-transform: uppercase;
-    }
 
     .copy-to-editor {
       display: none;

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

@@ -6,7 +6,7 @@
     }
     
     &:not(.table-striped) > thead > tr > th {
-    background-color: #fafafa;
+        background-color: #FAFAFA;
     }
     
     [class*="bg-"] {
@@ -33,8 +33,9 @@
     & > thead > tr,
     & > tbody > tr,
     & > tfoot > tr {
-    & > th,
-    & > td {
+        
+        & > th, & > td {
+            
             &:first-child {
                 padding-left: 30px;
             }
@@ -42,6 +43,7 @@
             &:last-child {
                 padding-right: 30px;
             }
+            
         }
     }
     
@@ -54,8 +56,7 @@
     border: 0;
     
     & > tbody > tr {
-    & > td,
-    & > th {
+        & > td, & > th {
             border-bottom: 0;
             border-left: 0;
             
@@ -85,8 +86,10 @@
 }
 
 .tile .table  {
+    
     & > thead:not([class*="bg-"]) > tr > th {
         border-top: 1px solid @table-border-color;
+        
     }
 }
 
@@ -95,16 +98,11 @@
 }
 
 .table-data {
-  thead > tr > th {
-    white-space: nowrap;
-  }
-
     tbody > tr > td {
         padding-top: 5px !important;
     }
     
-  .btn-favourite,
-  .btn-archive {
+    .btn-favourite, .btn-archive {
         font-size: 15px;
     }
 }
@@ -116,10 +114,9 @@
 
 .btn-favourite {
     color: #d4d4d4;
-  transition: all 0.25s ease-in-out;
+    transition: all .25s ease-in-out;
     
-  &:hover,
-  &:focus {
+    &:hover, &:focus {
         color: @yellow-darker;
         cursor: pointer;
     }
@@ -131,10 +128,9 @@
 
 .btn-archive {
     color: #d4d4d4;
-  transition: all 0.25s ease-in-out;
+    transition: all .25s ease-in-out;
     
-  &:hover,
-  &:focus {
+    &:hover, &:focus {
         color: @gray-light;
     }
     

client/app/assets/less/main.less

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

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

@@ -4,13 +4,14 @@ body.fixed-layout {
 
   #application-root {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     padding-bottom: 0;
 
     width: 100vw;
     height: 100vh;
 
-    .application-layout-content > div {
+    > div {
+      flex-grow: 1;
       display: flex;
     }
   }
@@ -72,6 +73,9 @@ body.fixed-layout {
   }
 }
 
+.embed__vis {
+}
+
 .query__vis {
   table {
     border: 1px solid #f0f0f0;
@@ -90,7 +94,6 @@ body.fixed-layout {
 .embed__vis {
   display: flex;
   flex-flow: column;
-  width: 100%;
 }
 
 .embed-heading {
@@ -137,11 +140,14 @@ a.label-tag {
   }
 }
 
+.schema-browser {
+  overflow-y: auto;
+}
+
 .query-page-wrapper {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  position: relative;
 }
 
 .query-fullscreen {
@@ -150,6 +156,7 @@ a.label-tag {
   box-shadow: rgba(102, 136, 153, 0.15) 0 4px 9px -3px;
   flex-grow: 1;
   display: flex;
+  width: 100vw;
 
   .resizable-component.react-resizable {
     .react-resizable-handle-horizontal {
@@ -479,6 +486,13 @@ nav .rg-bottom {
     }
   }
 
+  .query-page-wrapper {
+    .container {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
   .datasource-small {
     visibility: visible;
   }

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

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

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

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

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

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

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

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

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

@@ -1,176 +0,0 @@
-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 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";
-
-function NavbarSection({ inlineCollapsed, children, ...props }) {
-  return (
-    <Menu
-      selectable={false}
-      mode={inlineCollapsed ? "inline" : "vertical"}
-      inlineCollapsed={inlineCollapsed}
-      theme="dark"
-      {...props}>
-      {children}
-    </Menu>
-  );
-}
-
-export default function DesktopNavbar() {
-  const [collapsed, setCollapsed] = useState(true);
-
-  const firstSettingsTab = first(settingsMenu.getAvailableItems());
-
-  const canCreateQuery = currentUser.hasPermission("create_query");
-  const canCreateDashboard = currentUser.hasPermission("create_dashboard");
-  const canCreateAlert = currentUser.hasPermission("list_alerts");
-
-  return (
-    <div className="desktop-navbar">
-      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-logo">
-        <div>
-          <Link href="./">
-            <img src={logoUrl} alt="Redash" />
-          </Link>
-        </div>
-      </NavbarSection>
-
-      <NavbarSection inlineCollapsed={collapsed}>
-        {currentUser.hasPermission("list_dashboards") && (
-          <Menu.Item key="dashboards">
-            <Link href="dashboards">
-              <DesktopOutlinedIcon />
-              <span>Dashboards</span>
-            </Link>
-          </Menu.Item>
-        )}
-        {currentUser.hasPermission("view_query") && (
-          <Menu.Item key="queries">
-            <Link href="queries">
-              <CodeOutlinedIcon />
-              <span>Queries</span>
-            </Link>
-          </Menu.Item>
-        )}
-        {currentUser.hasPermission("list_alerts") && (
-          <Menu.Item key="alerts">
-            <Link href="alerts">
-              <AlertOutlinedIcon />
-              <span>Alerts</span>
-            </Link>
-          </Menu.Item>
-        )}
-      </NavbarSection>
-
-      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-spacer">
-        {(canCreateQuery || canCreateDashboard || canCreateAlert) && <Menu.Divider />}
-        {(canCreateQuery || canCreateDashboard || canCreateAlert) && (
-          <Menu.SubMenu
-            key="create"
-            popupClassName="desktop-navbar-submenu"
-            title={
-              <React.Fragment>
-                <span data-test="CreateButton">
-                  <PlusOutlinedIcon />
-                  <span>Create</span>
-                </span>
-              </React.Fragment>
-            }>
-            {canCreateQuery && (
-              <Menu.Item key="new-query">
-                <Link href="queries/new" data-test="CreateQueryMenuItem">
-                  New Query
-                </Link>
-              </Menu.Item>
-            )}
-            {canCreateDashboard && (
-              <Menu.Item key="new-dashboard">
-                <a data-test="CreateDashboardMenuItem" onMouseUp={() => CreateDashboardDialog.showModal()}>
-                  New Dashboard
-                </a>
-              </Menu.Item>
-            )}
-            {canCreateAlert && (
-              <Menu.Item key="new-alert">
-                <Link data-test="CreateAlertMenuItem" href="alerts/new">
-                  New Alert
-                </Link>
-              </Menu.Item>
-            )}
-          </Menu.SubMenu>
-        )}
-      </NavbarSection>
-
-      <NavbarSection inlineCollapsed={collapsed}>
-        <Menu.Item key="help">
-          <HelpTrigger showTooltip={false} type="HOME">
-            <QuestionCircleOutlinedIcon />
-            <span>Help</span>
-          </HelpTrigger>
-        </Menu.Item>
-        {firstSettingsTab && (
-          <Menu.Item key="settings">
-            <Link href={firstSettingsTab.path} data-test="SettingsLink">
-              <SettingOutlinedIcon />
-              <span>Settings</span>
-            </Link>
-          </Menu.Item>
-        )}
-        <Menu.Divider />
-      </NavbarSection>
-
-      <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-profile-menu">
-        <Menu.SubMenu
-          key="profile"
-          popupClassName="desktop-navbar-submenu"
-          title={
-            <span data-test="ProfileDropdown" className="desktop-navbar-profile-menu-title">
-              <img className="profile__image_thumb" src={currentUser.profile_image_url} alt={currentUser.name} />
-              <span>{currentUser.name}</span>
-            </span>
-          }>
-          <Menu.Item key="profile">
-            <Link href="users/me">Profile</Link>
-          </Menu.Item>
-          {currentUser.hasPermission("super_admin") && (
-            <Menu.Item key="status">
-              <Link href="admin/status">System Status</Link>
-            </Menu.Item>
-          )}
-          <Menu.Divider />
-          <Menu.Item key="logout">
-            <a data-test="LogOutButton" onClick={() => Auth.logout()}>
-              Log out
-            </a>
-          </Menu.Item>
-          <Menu.Divider />
-          <Menu.Item key="version" disabled className="version-info">
-            <VersionInfo />
-          </Menu.Item>
-        </Menu.SubMenu>
-      </NavbarSection>
-
-      <Button onClick={() => setCollapsed(!collapsed)} className="desktop-navbar-collapse-button">
-        {collapsed ? <MenuUnfoldOutlinedIcon /> : <MenuFoldOutlinedIcon />}
-      </Button>
-    </div>
-  );
-}

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

@@ -1,181 +0,0 @@
-@backgroundColor: #001529;
-@dividerColor: rgba(255, 255, 255, 0.5);
-@textColor: rgba(255, 255, 255, 0.75);
-
-.desktop-navbar {
-  background: @backgroundColor;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  &-spacer {
-    flex: 1 1 auto;
-  }
-
-  &-logo.ant-menu {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    text-align: center;
-
-    img {
-      height: 40px;
-      transition: all 270ms;
-    }
-
-    &.ant-menu-inline-collapsed {
-      img {
-        height: 20px;
-      }
-    }
-  }
-
-  .help-trigger {
-    font: inherit;
-  }
-
-  .ant-menu {
-    &:not(.ant-menu-inline-collapsed) {
-      width: 170px;
-    }
-
-    &.ant-menu-inline-collapsed > .ant-menu-submenu-title span img + span,
-    &.ant-menu-inline-collapsed > .ant-menu-item i + span {
-      display: inline-block;
-      max-width: 0;
-      opacity: 0;
-    }
-
-    .ant-menu-item-divider {
-      background: @dividerColor;
-    }
-
-    .ant-menu-item,
-    .ant-menu-submenu {
-      font-weight: 500;
-      color: @textColor;
-
-      &.ant-menu-submenu-open,
-      &.ant-menu-submenu-active,
-      &:hover,
-      &:active {
-        color: #fff;
-      }
-
-      a,
-      span,
-      .anticon {
-        color: inherit;
-      }
-    }
-
-    .ant-menu-submenu-arrow {
-      display: none;
-    }
-  }
-
-  .ant-btn.desktop-navbar-collapse-button {
-    background-color: @backgroundColor;
-    border: 0;
-    border-radius: 0;
-    color: @textColor;
-
-    &:hover,
-    &:active {
-      color: #fff;
-    }
-
-    &:after {
-      animation: 0s !important;
-    }
-  }
-
-  .desktop-navbar-profile-menu {
-    .desktop-navbar-profile-menu-title {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-
-      .profile__image_thumb {
-        margin: 0;
-        vertical-align: middle;
-      }
-
-      .profile__image_thumb + span {
-        flex: 1 1 auto;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        margin-left: 10px;
-        vertical-align: middle;
-        display: inline-block;
-
-        // styles from Antd
-        opacity: 1;
-        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-          margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-      }
-    }
-
-    &.ant-menu-inline-collapsed {
-      .ant-menu-submenu-title {
-        padding-left: 16px !important;
-        padding-right: 16px !important;
-      }
-
-      .desktop-navbar-profile-menu-title {
-        .profile__image_thumb + span {
-          opacity: 0;
-          max-width: 0;
-          margin-left: 0;
-        }
-      }
-    }
-  }
-}
-
-.desktop-navbar-submenu {
-  .ant-menu {
-    .ant-menu-item-divider {
-      background: @dividerColor;
-    }
-
-    .ant-menu-item {
-      font-weight: 500;
-      color: @textColor;
-
-      &:hover,
-      &:active {
-        color: #fff;
-      }
-
-      a,
-      span,
-      .anticon {
-        color: inherit;
-      }
-
-      .zmdi,
-      .fa {
-        margin-right: 5px;
-      }
-
-      &.version-info {
-        height: auto;
-        line-height: normal;
-        padding-top: 12px;
-        padding-bottom: 12px;
-
-        a {
-          color: rgba(255, 255, 255, 0.8);
-
-          &:hover,
-          &:active {
-            color: rgba(255, 255, 255, 1);
-          }
-        }
-      }
-    }
-  }
-}

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

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

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

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

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

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

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

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

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

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

client/app/components/ApplicationArea/ErrorMessage.jsx

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

client/app/components/ApplicationArea/ErrorMessage.less

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

client/app/components/ApplicationArea/ErrorMessageDetails.jsx

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

client/app/components/ApplicationArea/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
@@ -101,7 +95,6 @@ export default function Router({ routes, onRouteChange }) {
 
     return () => {
       isAbandoned = true;
-      currentPathRef.current = null;
       unlisten();
     };
   }, [routes]);
@@ -115,11 +108,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>
   );
 }
 

client/app/components/ApplicationArea/handleNavigationIntent.js

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

client/app/components/ApplicationArea/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import routes from "@/services/routes";
+import routes from "@/pages";
 import Router from "./Router";
 import handleNavigationIntent from "./handleNavigationIntent";
 import ErrorMessage from "./ErrorMessage";
@@ -33,5 +33,5 @@ export default function ApplicationArea() {
     return <ErrorMessage error={unhandledError} />;
   }
 
-  return <Router routes={routes.items} onRouteChange={setCurrentRoute} />;
+  return <Router routes={routes} onRouteChange={setCurrentRoute} />;
 }

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,82 @@
+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 ApplicationHeader from "./ApplicationHeader";
+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 (
+    <React.Fragment>
+      <ApplicationHeader />
+      <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>
+    </React.Fragment>
+  );
+}
+
+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) => void;
-    onDismiss: (handler: (result: RCancel) => Promise<void> | void) => void;
-    close: (result: ROk) => void;
-    dismiss: (result: RCancel) => void;
-  };
-};

client/app/components/DynamicComponent.jsx

@@ -1,4 +1,4 @@
-import { isFunction, isString, 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

@@ -1,5 +1,5 @@
-import { includes, words, capitalize, clone, isNull, map, get, find } from "lodash";
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import { includes, words, capitalize, clone, isNull } from "lodash";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import Checkbox from "antd/lib/checkbox";
 import Modal from "antd/lib/modal";
@@ -11,8 +11,6 @@ import Divider from "antd/lib/divider";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import QuerySelector from "@/components/QuerySelector";
 import { Query } from "@/services/query";
-import { QueryBasedParameterMappingType } from "@/services/parameters/QueryBasedDropdownParameter";
-import QueryBasedParameterMappingTable from "./query-based-parameter/QueryBasedParameterMappingTable";
 
 const { Option } = Select;
 const formItemProps = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
@@ -71,27 +69,17 @@ NameInput.propTypes = {
 function EditParameterSettingsDialog(props) {
   const [param, setParam] = useState(clone(props.parameter));
   const [isNameValid, setIsNameValid] = useState(true);
-  const [paramQuery, setParamQuery] = useState();
-  const mappingParameters = useMemo(
-    () =>
-      map(paramQuery && paramQuery.getParametersDefs(), mappingParam => ({
-        mappingParam,
-        existingMapping: get(param.parameterMapping, mappingParam.name, {
-          mappingType: QueryBasedParameterMappingType.UNDEFINED,
-        }),
-      })),
-    [param.parameterMapping, paramQuery]
-  );
+  const [initialQuery, setInitialQuery] = useState();
 
   const isNew = !props.parameter.name;
 
   // fetch query by id
-  const initialQueryId = useRef(props.parameter.queryId);
   useEffect(() => {
-    if (initialQueryId.current) {
-      Query.get({ id: initialQueryId.current }).then(setParamQuery);
+    const queryId = props.parameter.queryId;
+    if (queryId) {
+      Query.get({ id: queryId }).then(setInitialQuery);
     }
-  }, []);
+  }, [props.parameter.queryId]);
 
   function isFulfilled() {
     // name
@@ -105,20 +93,14 @@ function EditParameterSettingsDialog(props) {
     }
 
     // query
-    if (param.type === "query") {
-      if (!param.queryId) {
+    if (param.type === "query" && !param.queryId) {
       return false;
     }
 
-      if (find(mappingParameters, { existingMapping: { mappingType: QueryBasedParameterMappingType.UNDEFINED } })) {
-        return false;
-      }
-    }
-
     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
@@ -127,6 +109,8 @@ function EditParameterSettingsDialog(props) {
     }
 
     props.dialog.close(param);
+
+    e.preventDefault(); // stops form redirect
   }
 
   return (
@@ -148,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}
@@ -158,7 +142,7 @@ function EditParameterSettingsDialog(props) {
             type={param.type}
           />
         )}
-        <Form.Item required label="Title" {...formItemProps}>
+        <Form.Item label="Title" {...formItemProps}>
           <Input
             value={isNull(param.title) ? getDefaultTitle(param.name) : param.title}
             onChange={e => setParam({ ...param, title: e.target.value })}
@@ -205,28 +189,14 @@ function EditParameterSettingsDialog(props) {
           </Form.Item>
         )}
         {param.type === "query" && (
-          <Form.Item label="Query" help="Select query to load dropdown values from" required {...formItemProps}>
+          <Form.Item label="Query" help="Select query to load dropdown values from" {...formItemProps}>
             <QuerySelector
-              selectedQuery={paramQuery}
-              onChange={q => {
-                if (q) {
-                  setParamQuery(q);
-                  setParam({ ...param, queryId: q.id, parameterMapping: {} });
-                }
-              }}
+              selectedQuery={initialQuery}
+              onChange={q => setParam({ ...param, queryId: q && q.id })}
               type="select"
             />
           </Form.Item>
         )}
-        {param.type === "query" && paramQuery && paramQuery.hasParameters() && (
-          <Form.Item className="m-t-15 m-b-5" label="Parameters" required {...formItemProps}>
-            <QueryBasedParameterMappingTable
-              param={param}
-              mappingParameters={mappingParameters}
-              onChangeParam={setParam}
-            />
-          </Form.Item>
-        )}
         {(param.type === "enum" || param.type === "query") && (
           <Form.Item className="m-b-0" label=" " colon={false} {...formItemProps}>
             <Checkbox

client/app/components/EditParameterSettingsDialog/query-based-parameter/QueryBasedParameterMappingEditor.jsx

@@ -1,134 +0,0 @@
-import React, { useState, useEffect, useRef, useReducer } from "react";
-import PropTypes from "prop-types";
-import { values } from "lodash";
-import Button from "antd/lib/button";
-import Tooltip from "antd/lib/tooltip";
-import Radio from "antd/lib/radio";
-import Typography from "antd/lib/typography/Typography";
-import ParameterValueInput from "@/components/ParameterValueInput";
-import InputPopover from "@/components/InputPopover";
-import Form from "antd/lib/form";
-import { QueryBasedParameterMappingType } from "@/services/parameters/QueryBasedDropdownParameter";
-
-import QuestionCircleFilledIcon from "@ant-design/icons/QuestionCircleFilled";
-import EditOutlinedIcon from "@ant-design/icons/EditOutlined";
-
-const { Text } = Typography;
-
-const formItemProps = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
-export default function QueryBasedParameterMappingEditor({ parameter, mapping, searchAvailable, onChange }) {
-  const [showPopover, setShowPopover] = useState(false);
-  const [newMapping, setNewMapping] = useReducer((prevState, updates) => ({ ...prevState, ...updates }), mapping);
-
-  const newMappingRef = useRef(newMapping);
-  useEffect(() => {
-    if (
-      mapping.mappingType !== newMappingRef.current.mappingType ||
-      mapping.staticValue !== newMappingRef.current.staticValue
-    ) {
-      setNewMapping(mapping);
-    }
-  }, [mapping]);
-
-  const parameterRef = useRef(parameter);
-  useEffect(() => {
-    parameterRef.current.setValue(mapping.staticValue);
-  }, [mapping.staticValue]);
-
-  const onCancel = () => {
-    setNewMapping(mapping);
-    setShowPopover(false);
-  };
-
-  const onOk = () => {
-    onChange(newMapping);
-    setShowPopover(false);
-  };
-
-  let currentState = <Text type="secondary">Pick a type</Text>;
-  if (mapping.mappingType === QueryBasedParameterMappingType.DROPDOWN_SEARCH) {
-    currentState = "Dropdown Search";
-  } else if (mapping.mappingType === QueryBasedParameterMappingType.STATIC) {
-    currentState = `Value: ${mapping.staticValue}`;
-  }
-  return (
-    <>
-      {currentState}
-      <InputPopover
-        placement="left"
-        trigger="click"
-        header="Edit Parameter Source"
-        okButtonProps={{
-          disabled: newMapping.mappingType === QueryBasedParameterMappingType.STATIC && parameter.isEmpty,
-        }}
-        onOk={onOk}
-        onCancel={onCancel}
-        content={
-          <Form>
-            <Form.Item className="m-b-15" label="Source" {...formItemProps}>
-              <Radio.Group
-                value={newMapping.mappingType}
-                onChange={({ target }) => setNewMapping({ mappingType: target.value })}>
-                <Radio
-                  className="radio"
-                  value={QueryBasedParameterMappingType.DROPDOWN_SEARCH}
-                  disabled={!searchAvailable || parameter.type !== "text"}>
-                  Dropdown Search{" "}
-                  {(!searchAvailable || parameter.type !== "text") && (
-                    <Tooltip
-                      title={
-                        parameter.type !== "text"
-                          ? "Dropdown Search is only available for Text Parameters"
-                          : "There is already a parameter mapped with the Dropdown Search type."
-                      }>
-                      <QuestionCircleFilledIcon />
-                    </Tooltip>
-                  )}
-                </Radio>
-                <Radio className="radio" value={QueryBasedParameterMappingType.STATIC}>
-                  Static Value
-                </Radio>
-              </Radio.Group>
-            </Form.Item>
-            {newMapping.mappingType === QueryBasedParameterMappingType.STATIC && (
-              <Form.Item label="Value" required {...formItemProps}>
-                <ParameterValueInput
-                  type={parameter.type}
-                  value={parameter.normalizedValue}
-                  enumOptions={parameter.enumOptions}
-                  queryId={parameter.queryId}
-                  parameter={parameter}
-                  onSelect={value => {
-                    parameter.setValue(value);
-                    setNewMapping({ staticValue: parameter.getExecutionValue({ joinListValues: true }) });
-                  }}
-                />
-              </Form.Item>
-            )}
-          </Form>
-        }
-        visible={showPopover}
-        onVisibleChange={setShowPopover}>
-        <Button className="m-l-5" size="small" type="dashed">
-          <EditOutlinedIcon />
-        </Button>
-      </InputPopover>
-    </>
-  );
-}
-
-QueryBasedParameterMappingEditor.propTypes = {
-  parameter: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  mapping: PropTypes.shape({
-    mappingType: PropTypes.oneOf(values(QueryBasedParameterMappingType)),
-    staticValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  }),
-  searchAvailable: PropTypes.bool,
-  onChange: PropTypes.func,
-};
-
-QueryBasedParameterMappingEditor.defaultProps = {
-  mapping: { mappingType: QueryBasedParameterMappingType.UNDEFINED, staticValue: undefined },
-  searchAvailable: false,
-  onChange: () => {},
-};

client/app/components/EditParameterSettingsDialog/query-based-parameter/QueryBasedParameterMappingTable.jsx

@@ -1,56 +0,0 @@
-import React from "react";
-import { findKey } from "lodash";
-import PropTypes from "prop-types";
-import Table from "antd/lib/table";
-import { QueryBasedParameterMappingType } from "@/services/parameters/QueryBasedDropdownParameter";
-import QueryBasedParameterMappingEditor from "./QueryBasedParameterMappingEditor";
-
-export default function QueryBasedParameterMappingTable({ param, mappingParameters, onChangeParam }) {
-  return (
-    <Table
-      dataSource={mappingParameters}
-      size="middle"
-      pagination={false}
-      rowKey={({ mappingParam }) => `param${mappingParam.name}`}>
-      <Table.Column title="Title" key="title" render={({ mappingParam }) => mappingParam.getTitle()} />
-      <Table.Column
-        title="Keyword"
-        key="keyword"
-        className="keyword"
-        render={({ mappingParam }) => <code>{`{{ ${mappingParam.name} }}`}</code>}
-      />
-      <Table.Column
-        title="Value Source"
-        key="source"
-        render={({ mappingParam, existingMapping }) => (
-          <QueryBasedParameterMappingEditor
-            parameter={mappingParam.setValue(existingMapping.staticValue)}
-            mapping={existingMapping}
-            searchAvailable={
-              !findKey(param.parameterMapping, {
-                mappingType: QueryBasedParameterMappingType.DROPDOWN_SEARCH,
-              }) || existingMapping.mappingType === QueryBasedParameterMappingType.DROPDOWN_SEARCH
-            }
-            onChange={mapping =>
-              onChangeParam({
-                ...param,
-                parameterMapping: { ...param.parameterMapping, [mappingParam.name]: mapping },
-              })
-            }
-          />
-        )}
-      />
-    </Table>
-  );
-}
-
-QueryBasedParameterMappingTable.propTypes = {
-  param: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  mappingParameters: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
-  onChangeParam: PropTypes.func,
-};
-
-QueryBasedParameterMappingTable.defaultProps = {
-  mappingParameters: [],
-  onChangeParam: () => {},
-};

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

@@ -1,13 +1,12 @@
-import { startsWith, get, some, mapValues } from "lodash";
+import { startsWith, get } from "lodash";
 import React from "react";
 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, { registerComponent } from "@/components/DynamicComponent";
+import DynamicComponent from "@/components/DynamicComponent";
 
 import "./HelpTrigger.less";
 
@@ -16,8 +15,7 @@ const HELP_PATH = "/help";
 const IFRAME_TIMEOUT = 20000;
 const IFRAME_URL_UPDATE_MESSAGE = "iframe_url";
 
-export const TYPES = mapValues(
-  {
+export const TYPES = {
   HOME: ["", "Help"],
   VALUE_SOURCE_OPTIONS: ["/user-guide/querying/query-parameters#Value-Source-Options", "Guide: Value Source Options"],
   SHARE_DASHBOARD: ["/user-guide/dashboards/sharing-dashboards", "Guide: Sharing and Embedding Dashboards"],
@@ -27,10 +25,7 @@ export const TYPES = mapValues(
   DS_BIGQUERY: ["/data-sources/bigquery-setup", "Guide: Help Setting up BigQuery"],
   DS_URL: ["/data-sources/querying-urls", "Guide: Help Setting up URL"],
   DS_MONGODB: ["/data-sources/mongodb-setup", "Guide: Help Setting up MongoDB"],
-    DS_GOOGLE_SPREADSHEETS: [
-      "/data-sources/querying-a-google-spreadsheet",
-      "Guide: Help Setting up Google Spreadsheets",
-    ],
+  DS_GOOGLE_SPREADSHEETS: ["/data-sources/querying-a-google-spreadsheet", "Guide: Help Setting up Google Spreadsheets"],
   DS_GOOGLE_ANALYTICS: ["/data-sources/google-analytics-setup", "Guide: Help Setting up Google Analytics"],
   DS_AXIBASETSD: ["/data-sources/axibase-time-series-database", "Guide: Help Setting up Axibase Time Series"],
   DS_RESULTS: ["/user-guide/querying/query-results-data-source", "Guide: Help Setting up Query Results"],
@@ -43,43 +38,27 @@ export const TYPES = mapValues(
     "Guide: Managing Query Permissions",
   ],
   NUMBER_FORMAT_SPECS: ["/user-guide/visualizations/formatting-numbers", "Formatting Numbers"],
-    GETTING_STARTED: ["/user-guide/getting-started", "Guide: Getting Started"],
-    DASHBOARDS: ["/user-guide/dashboards", "Guide: Dashboards"],
-    QUERIES: ["/help/user-guide/querying", "Guide: Queries"],
-    ALERTS: ["/user-guide/alerts", "Guide: Alerts"],
-  },
-  ([url, title]) => [DOMAIN + HELP_PATH + url, title]
-);
+};
 
-const HelpTriggerPropTypes = {
-  type: PropTypes.string,
+export default class HelpTrigger extends React.Component {
+  static propTypes = {
+    type: PropTypes.oneOf(Object.keys(TYPES)),
     href: PropTypes.string,
     title: PropTypes.node,
     className: PropTypes.string,
     showTooltip: PropTypes.bool,
-  renderAsLink: PropTypes.bool,
     children: PropTypes.node,
   };
 
-const HelpTriggerDefaultProps = {
+  static defaultProps = {
     type: null,
     href: null,
     title: null,
     className: null,
     showTooltip: true,
-  renderAsLink: false,
     children: <i className="fa fa-question-circle" />,
   };
 
-export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName = null) {
-  return class HelpTrigger extends React.Component {
-    static propTypes = {
-      ...HelpTriggerPropTypes,
-      type: PropTypes.oneOf(Object.keys(types)),
-    };
-
-    static defaultProps = HelpTriggerDefaultProps;
-
   iframeRef = React.createRef();
 
   iframeLoadingTimeout = null;
@@ -116,7 +95,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
   };
 
   onPostMessageReceived = event => {
-      if (!some(allowedDomains, domain => startsWith(event.origin, domain))) {
+    if (!startsWith(event.origin, DOMAIN)) {
       return;
     }
 
@@ -129,18 +108,14 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
   };
 
   getUrl = () => {
-      const helpTriggerType = get(types, this.props.type);
-      return helpTriggerType ? helpTriggerType[0] : this.props.href;
+    const helpTriggerType = get(TYPES, this.props.type);
+    return helpTriggerType ? DOMAIN + HELP_PATH + helpTriggerType[0] : this.props.href;
   };
 
-    openDrawer = e => {
-      // keep "open in new tab" behavior
-      if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
+  openDrawer = () => {
     this.setState({ visible: true });
     // wait for drawer animation to complete so there's no animation jank
     setTimeout(() => this.loadIframe(this.getUrl()), 300);
-      }
   };
 
   closeDrawer = event => {
@@ -152,16 +127,11 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
   };
 
   render() {
-      const targetUrl = this.getUrl();
-      if (!targetUrl) {
-        return null;
-      }
-
-      const tooltip = get(types, `${this.props.type}[1]`, this.props.title);
+    const tooltip = get(TYPES, `${this.props.type}[1]`, this.props.title);
     const className = cx("help-trigger", this.props.className);
     const url = this.state.currentUrl;
-      const isAllowedDomain = some(allowedDomains, domain => startsWith(url || targetUrl, domain));
-      const shouldRenderAsLink = this.props.renderAsLink || !isAllowedDomain;
+
+    const isAllowedDomain = startsWith(url || this.getUrl(), DOMAIN);
 
     return (
       <React.Fragment>
@@ -170,25 +140,26 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
             this.props.showTooltip ? (
               <>
                 {tooltip}
-                  {shouldRenderAsLink && <i className="fa fa-external-link" style={{ marginLeft: 5 }} />}
+                {!isAllowedDomain && <i className="fa fa-external-link" style={{ marginLeft: 5 }} />}
               </>
             ) : null
           }>
-            <Link
-              href={url || this.getUrl()}
-              className={className}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={shouldRenderAsLink ? () => {} : this.openDrawer}>
+          {isAllowedDomain ? (
+            <a onClick={this.openDrawer} className={className}>
               {this.props.children}
-            </Link>
+            </a>
+          ) : (
+            <a href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
+              {this.props.children}
+            </a>
+          )}
         </Tooltip>
         <Drawer
           placement="right"
           closable={false}
           onClose={this.closeDrawer}
           visible={this.state.visible}
-            className={cx("help-drawer", drawerClassName)}
+          className="help-drawer"
           destroyOnClose
           width={400}>
           <div className="drawer-wrapper">
@@ -196,14 +167,14 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
               {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>
@@ -212,7 +183,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
             {!this.state.error && (
               <iframe
                 ref={this.iframeRef}
-                  title="Usage Help"
+                title="Redash Help"
                 src="about:blank"
                 className={cx({ ready: !this.state.loading })}
                 onLoad={this.onIframeLoaded}
@@ -230,9 +201,9 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                 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>
             )}
@@ -244,14 +215,4 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
       </React.Fragment>
     );
   }
-  };
 }
-
-registerComponent("HelpTrigger", helpTriggerWithTypes(TYPES, [DOMAIN]));
-
-export default function HelpTrigger(props) {
-  return <DynamicComponent {...props} name="HelpTrigger" />;
-}
-
-HelpTrigger.propTypes = HelpTriggerPropTypes;
-HelpTrigger.defaultProps = HelpTriggerDefaultProps;

client/app/components/InputPopover/index.jsx

@@ -1,57 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Button from "antd/lib/button";
-import Popover from "antd/lib/popover";
-
-import "./index.less";
-
-export default function InputPopover({
-  header,
-  content,
-  children,
-  okButtonProps,
-  cancelButtonProps,
-  onCancel,
-  onOk,
-  ...props
-}) {
-  return (
-    <Popover
-      {...props}
-      content={
-        <div className="input-popover-content" data-test="InputPopoverContent">
-          {header && <header>{header}</header>}
-          {content}
-          <footer>
-            <Button onClick={onCancel} {...cancelButtonProps}>
-              Cancel
-            </Button>
-            <Button onClick={onOk} type="primary" {...okButtonProps}>
-              OK
-            </Button>
-          </footer>
-        </div>
-      }>
-      {children}
-    </Popover>
-  );
-}
-
-InputPopover.propTypes = {
-  header: PropTypes.node,
-  content: PropTypes.node,
-  children: PropTypes.node,
-  okButtonProps: PropTypes.object,
-  cancelButtonProps: PropTypes.object,
-  onOk: PropTypes.func,
-  onCancel: PropTypes.func,
-};
-
-InputPopover.defaultProps = {
-  header: null,
-  children: null,
-  okButtonProps: null,
-  cancelButtonProps: null,
-  onOk: () => {},
-  onCancel: () => {},
-};

client/app/components/InputPopover/index.less

@@ -1,37 +0,0 @@
-@import "~antd/lib/modal/style/index"; // for ant @vars
-
-.input-popover-content {
-  width: 390px;
-
-  .radio {
-    display: block;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .form-item {
-    margin-bottom: 10px;
-  }
-
-  header {
-    padding: 0 16px 10px;
-    margin: 0 -16px 20px;
-    border-bottom: @border-width-base @border-style-base @border-color-split;
-    font-size: @font-size-lg;
-    font-weight: 500;
-    color: @heading-color;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  footer {
-    border-top: @border-width-base @border-style-base @border-color-split;
-    padding: 10px 16px 0;
-    margin: 0 -16px;
-    text-align: right;
-
-    button {
-      margin-left: 8px;
-    }
-  }
-}

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 role="button" {...props} />;
-}
-
-function ButtonLink(props) {
-  return <ButtonLink.Component {...props} />;
-}
-
-ButtonLink.Component = DefaultButtonLinkComponent;
-
-Link.Button = ButtonLink;
-
-export default Link;

client/app/components/NoTaggedObjectsFound.jsx

@@ -7,7 +7,7 @@ export default function NoTaggedObjectsFound({ objectType, tags }) {
   return (
     <BigMessage icon="fa-tags">
       No {objectType} found tagged with&nbsp;
-      <TagsControl className="inline-tags-control" tags={Array.from(tags)} tagSeparator={"+"} />.
+      <TagsControl className="inline-tags-control" tags={Array.from(tags)} />.
     </BigMessage>
   );
 }

client/app/components/PageHeader.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function PageHeader({ title }) {
+  return (
+    <div className="page-header-wrapper row p-l-15 p-r-15 m-b-10 m-l-0 m-r-0">
+      <div className="col-sm-9 p-l-0 p-r-0">
+        <h3>{title}</h3>
+      </div>
+    </div>
+  );
+}
+
+PageHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+};

client/app/components/PageHeader/index.jsx

@@ -1,23 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import "./index.less";
-
-export default function PageHeader({ title, actions }) {
-  return (
-    <div className="page-header-wrapper">
-      <h3>{title}</h3>
-      {actions && <div className="page-header-actions">{actions}</div>}
-    </div>
-  );
-}
-
-PageHeader.propTypes = {
-  title: PropTypes.string,
-  actions: PropTypes.node,
-};
-
-PageHeader.defaultProps = {
-  title: "",
-  actions: null,
-};

client/app/components/PageHeader/index.less

@@ -1,20 +0,0 @@
-.page-header-wrapper {
-  margin: 15px 0 10px 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: stretch;
-
-  h3 {
-    margin: 0;
-    line-height: 1.3;
-    font-weight: 500;
-    flex: 1 1 auto;
-  }
-
-  .page-header-actions {
-    flex: 0 0 auto;
-    padding: 0 0 0 15px;
-  }
-}

client/app/components/Paginator.jsx

@@ -2,38 +2,24 @@ import React from "react";
 import PropTypes from "prop-types";
 import Pagination from "antd/lib/pagination";
 
-const MIN_ITEMS_PER_PAGE = 5;
-
-export default function Paginator({ page, showPageSizeSelect, pageSize, onPageSizeChange, totalCount, onChange }) {
-  if (totalCount <= (showPageSizeSelect ? MIN_ITEMS_PER_PAGE : pageSize)) {
+export default function Paginator({ page, itemsPerPage, totalCount, onChange }) {
+  if (totalCount <= itemsPerPage) {
     return null;
   }
   return (
     <div className="paginator-container">
-      <Pagination
-        showSizeChanger={showPageSizeSelect}
-        pageSizeOptions={["5", "10", "20", "50", "100"]}
-        onShowSizeChange={(_, size) => onPageSizeChange(size)}
-        defaultCurrent={page}
-        pageSize={pageSize}
-        total={totalCount}
-        onChange={onChange}
-      />
+      <Pagination defaultCurrent={page} defaultPageSize={itemsPerPage} total={totalCount} onChange={onChange} />
     </div>
   );
 }
 
 Paginator.propTypes = {
   page: PropTypes.number.isRequired,
-  showPageSizeSelect: PropTypes.bool,
-  pageSize: PropTypes.number.isRequired,
+  itemsPerPage: PropTypes.number.isRequired,
   totalCount: PropTypes.number.isRequired,
-  onPageSizeChange: PropTypes.func,
   onChange: PropTypes.func,
 };
 
 Paginator.defaultProps = {
-  showPageSizeSelect: false,
   onChange: () => {},
-  onPageSizeChange: () => {},
 };

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";
@@ -17,15 +18,11 @@ import ParameterValueInput from "@/components/ParameterValueInput";
 import { ParameterMappingType } from "@/services/widget";
 import { Parameter, cloneParameter } from "@/services/parameters";
 import HelpTrigger from "@/components/HelpTrigger";
-import InputPopover from "@/components/InputPopover";
-
-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;
+
 export const MappingType = {
   DashboardAddNew: "dashboard-add-new",
   DashboardMapToExisting: "dashboard-map-to-existing",
@@ -184,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>
@@ -207,9 +204,19 @@ export class ParameterMappingInput extends React.Component {
 
   renderDashboardMapToExisting() {
     const { mapping, existingParamNames } = this.props;
-    const options = map(existingParamNames, paramName => ({ label: paramName, value: paramName }));
 
-    return <Select value={mapping.mapTo} onChange={mapTo => this.updateParamMapping({ mapTo })} options={options} />;
+    return (
+      <Select
+        value={mapping.mapTo}
+        onChange={mapTo => this.updateParamMapping({ mapTo })}
+        dropdownMatchSelectWidth={false}>
+        {map(existingParamNames, name => (
+          <Option value={name} key={name}>
+            {name}
+          </Option>
+        ))}
+      </Select>
+    );
   }
 
   renderStaticValue() {
@@ -314,34 +321,43 @@ class MappingEditor extends React.Component {
     this.setState({ visible: false });
   };
 
-  render() {
-    const { visible, mapping, inputError } = this.state;
+  renderContent() {
+    const { mapping, inputError } = this.state;
+
     return (
-      <InputPopover
-        placement="left"
-        trigger="click"
-        header={
-          <>
+      <div className="parameter-mapping-editor" data-test="EditParamMappingPopover">
+        <header>
           Edit Source and Value <HelpTrigger type="VALUE_SOURCE_OPTIONS" />
-          </>
-        }
-        content={
+        </header>
         <ParameterMappingInput
           mapping={mapping}
           existingParamNames={this.props.existingParamNames}
           onChange={this.onChange}
           inputError={inputError}
         />
+        <footer>
+          <Button onClick={this.hide}>Cancel</Button>
+          <Button onClick={this.save} disabled={!!inputError} type="primary">
+            OK
+          </Button>
+        </footer>
+      </div>
+    );
   }
-        onOk={this.save}
-        onCancel={this.hide}
-        okButtonProps={{ disabled: !!inputError }}
+
+  render() {
+    const { visible, mapping } = this.state;
+    return (
+      <Popover
+        placement="left"
+        trigger="click"
+        content={this.renderContent()}
         visible={visible}
         onVisibleChange={this.onVisibleChange}>
-        <Button size="small" type="dashed" data-test={`EditParamMappingButton-${mapping.param.name}`}>
-          <EditOutlinedIcon />
+        <Button size="small" type="dashed" data-test={`EditParamMappingButon-${mapping.param.name}`}>
+          <Icon type="edit" />
         </Button>
-      </InputPopover>
+      </Popover>
     );
   }
 }
@@ -418,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>
     );
@@ -444,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/ParameterMappingInput.less

@@ -1,4 +1,4 @@
-@import "~antd/lib/modal/style/index"; // for ant @vars
+@import '~antd/lib/modal/style/index'; // for ant @vars
 
 .parameters-mapping-list {
   .keyword {
@@ -22,13 +22,48 @@
   }
 }
 
+.parameter-mapping-editor {
+  width: 390px;
+
+  .radio {
+    display: block;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .form-item {
+    margin-bottom: 10px;
+  }
+
+  header {
+    padding: 0 16px 10px;
+    margin: 0 -16px 20px;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+    font-size: @font-size-lg;
+    font-weight: 500;
+    color: @heading-color;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  footer {
+    border-top: @border-width-base @border-style-base @border-color-split;
+    padding: 10px 16px 0;
+    margin: 0 -16px;
+    text-align: right;
+
+    button {
+      margin-left: 8px;
+    }
+  }
+}
+
 .parameter-mapping-title {
   .text {
     margin-right: 3px;
   }
 
-  &.disabled,
-  .fa {
+  &.disabled, .fa {
     color: #a4a4a4;
   }
 

client/app/components/ParameterValueInput.jsx

@@ -1,7 +1,7 @@
-import { isEqual, isEmpty, map } from "lodash";
+import { isEqual, isEmpty } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
-import SelectWithVirtualScroll from "@/components/SelectWithVirtualScroll";
+import Select from "antd/lib/select";
 import Input from "antd/lib/input";
 import InputNumber from "antd/lib/input-number";
 import DateParameter from "@/components/dynamic-parameters/DateParameter";
@@ -10,6 +10,8 @@ import QueryBasedParameterInput from "./QueryBasedParameterInput";
 
 import "./ParameterValueInput.less";
 
+const { Option } = Select;
+
 const multipleValuesProps = {
   maxTagCount: 3,
   maxTagTextLength: 10,
@@ -96,20 +98,25 @@ class ParameterValueInput extends React.Component {
     const enumOptionsArray = enumOptions.split("\n").filter(v => v !== "");
     // Antd Select doesn't handle null in multiple mode
     const normalize = val => (parameter.multiValuesOptions && val === null ? [] : val);
-
     return (
-      <SelectWithVirtualScroll
+      <Select
         className={this.props.className}
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
         optionFilterProp="children"
         value={normalize(value)}
         onChange={this.onSelect}
-        options={map(enumOptionsArray, opt => ({ label: String(opt), value: opt }))}
+        dropdownMatchSelectWidth={false}
         showSearch
         showArrow
+        style={{ minWidth: 60 }}
         notFoundContent={isEmpty(enumOptionsArray) ? "No options available" : null}
-        {...multipleValuesProps}
-      />
+        {...multipleValuesProps}>
+        {enumOptionsArray.map(option => (
+          <Option key={option} value={option}>
+            {option}
+          </Option>
+        ))}
+      </Select>
     );
   }
 

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,11 +17,10 @@
   }
 
   &[data-dirty] {
-    .@{ant-prefix}-input,
+    .@{ant-prefix}-input, // covers also ant date component
     .@{ant-prefix}-input-number,
-    .@{ant-prefix}-select-selector,
-    .@{ant-prefix}-picker {
-      background-color: @input-dirty !important;
+    .@{ant-prefix}-select-selection {
+      background-color: @input-dirty;
     }
   }
 }

client/app/components/Parameters.jsx

@@ -7,6 +7,7 @@ import { Parameter, createParameter } from "@/services/parameters";
 import ParameterApplyButton from "@/components/ParameterApplyButton";
 import ParameterValueInput from "@/components/ParameterValueInput";
 import EditParameterSettingsDialog from "./EditParameterSettingsDialog";
+import { toHuman } from "@/lib/utils";
 
 import "./Parameters.less";
 
@@ -120,7 +121,7 @@ export default class Parameters extends React.Component {
     return (
       <div key={param.name} className="di-block" data-test={`ParameterName-${param.name}`}>
         <div className="parameter-heading">
-          <label>{param.getTitle()}</label>
+          <label>{param.title || toHuman(param.name)}</label>
           {editable && (
             <button
               className="btn btn-default btn-xs m-l-5"

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/QueryBasedParameterInput.jsx

@@ -1,18 +1,9 @@
-import { find, isArray, get, first, map, intersection, isEqual, isEmpty, trim, debounce, isNil } from "lodash";
+import { find, isArray, get, first, map, intersection, isEqual, isEmpty } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
-import SelectWithVirtualScroll from "@/components/SelectWithVirtualScroll";
+import Select from "antd/lib/select";
 
-const SEARCH_DEBOUNCE_TIME = 300;
-
-function filterValuesThatAreNotInOptions(value, options) {
-  if (isArray(value)) {
-    const optionValues = map(options, option => option.value);
-    return intersection(value, optionValues);
-  }
-  const found = find(options, option => option.value === value) !== undefined;
-  return found ? value : get(first(options), "value");
-}
+const { Option } = Select;
 
 export default class QueryBasedParameterInput extends React.Component {
   static propTypes = {
@@ -39,7 +30,6 @@ export default class QueryBasedParameterInput extends React.Component {
       options: [],
       value: null,
       loading: false,
-      currentSearchTerm: null,
     };
   }
 
@@ -48,10 +38,9 @@ export default class QueryBasedParameterInput extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.queryId !== prevProps.queryId || this.props.parameter !== prevProps.parameter) {
+    if (this.props.queryId !== prevProps.queryId) {
       this._loadOptions(this.props.queryId);
     }
-
     if (this.props.value !== prevProps.value) {
       this.setValue(this.props.value);
     }
@@ -59,26 +48,26 @@ export default class QueryBasedParameterInput extends React.Component {
 
   setValue(value) {
     const { options } = this.state;
-    const { mode, parameter } = this.props;
-
-    if (mode === "multiple") {
-      if (isNil(value)) {
-        value = [];
-      }
-
+    if (this.props.mode === "multiple") {
       value = isArray(value) ? value : [value];
+      const optionValues = map(options, option => option.value);
+      const validValues = intersection(value, optionValues);
+      this.setState({ value: validValues });
+      return validValues;
     }
-
-    // parameters with search don't have options available, so we trust what we get
-    if (!parameter.searchFunction) {
-      value = filterValuesThatAreNotInOptions(value, options);
-    }
-
+    const found = find(options, option => option.value === this.props.value) !== undefined;
+    value = found ? value : get(first(options), "value");
     this.setState({ value });
     return value;
   }
 
-  updateOptions(options) {
+  async _loadOptions(queryId) {
+    if (queryId && queryId !== this.state.queryId) {
+      this.setState({ loading: true });
+      const options = await this.props.parameter.loadDropdownValues();
+
+      // stale queryId check
+      if (this.props.queryId === queryId) {
         this.setState({ options, loading: false }, () => {
           const updatedValue = this.setValue(this.props.value);
           if (!isEqual(updatedValue, this.props.value)) {
@@ -86,59 +75,33 @@ export default class QueryBasedParameterInput extends React.Component {
           }
         });
       }
-
-  async _loadOptions(queryId) {
-    if (queryId && queryId !== this.state.queryId) {
-      this.setState({ loading: true });
-      const options = await this.props.parameter.loadDropdownValues(this.state.currentSearchTerm);
-
-      // stale queryId check
-      if (this.props.queryId === queryId) {
-        this.updateOptions(options);
     }
   }
-  }
-
-  searchFunction = debounce(searchTerm => {
-    const { parameter } = this.props;
-    if (parameter.searchFunction && trim(searchTerm)) {
-      this.setState({ loading: true, currentSearchTerm: searchTerm });
-      parameter.searchFunction(searchTerm).then(options => {
-        if (this.state.currentSearchTerm === searchTerm) {
-          this.updateOptions(options);
-        }
-      });
-    }
-  }, SEARCH_DEBOUNCE_TIME);
 
   render() {
-    const { parameter, className, mode, onSelect, queryId, value, ...otherProps } = this.props;
+    const { className, value, mode, onSelect, ...otherProps } = this.props;
     const { loading, options } = this.state;
-    const selectProps = { ...otherProps };
-
-    if (parameter.searchColumn) {
-      selectProps.filterOption = false;
-      selectProps.onSearch = this.searchFunction;
-      selectProps.onChange = value => onSelect(parameter.normalizeValue(value));
-      selectProps.notFoundContent = null;
-      selectProps.labelInValue = true;
-    }
     return (
       <span>
-        <SelectWithVirtualScroll
+        <Select
           className={className}
-          disabled={!parameter.searchFunction && loading}
+          disabled={loading}
           loading={loading}
           mode={mode}
-          value={this.state.value || undefined}
+          value={this.state.value}
           onChange={onSelect}
-          options={options}
+          dropdownMatchSelectWidth={false}
           optionFilterProp="children"
           showSearch
           showArrow
           notFoundContent={isEmpty(options) ? "No options available" : null}
-          {...selectProps}
-        />
+          {...otherProps}>
+          {options.map(option => (
+            <Option value={option.value} key={option.value}>
+              {option.name}
+            </Option>
+          ))}
+        </Select>
       </span>
     );
   }

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/SelectWithVirtualScroll.tsx

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

client/app/components/SettingsWrapper.jsx

@@ -1,12 +1,13 @@
 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";
 
-function wrapSettingsTab(id, options, WrappedComponent) {
-  settingsMenu.add(id, options);
+function wrapSettingsTab(options, WrappedComponent) {
+  if (options) {
+    settingsMenu.add(options);
+  }
 
   return function SettingsTab(props) {
     const activeItem = settingsMenu.getActiveItem(location.path);
@@ -16,11 +17,13 @@ function wrapSettingsTab(id, options, WrappedComponent) {
           <PageHeader title="Settings" />
           <div className="bg-white tiled">
             <Menu selectedKeys={[activeItem && activeItem.title]} selectable={false} mode="horizontal">
-              {settingsMenu.getAvailableItems().map(item => (
+              {settingsMenu.items
+                .filter(item => item.isAvailable())
+                .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,42 +1,11 @@
-@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;
@@ -44,4 +13,3 @@
     }
   }
 }
-}

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/UserGroups.jsx

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

client/app/components/UserGroups.less

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

client/app/components/admin/Layout.jsx

@@ -1,30 +1,27 @@
 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";
 
 export default function Layout({ activeTab, children }) {
   return (
-    <div className="admin-page-layout">
-      <div className="container">
+    <div className="container admin-page-layout">
       <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}
-        </div>
+        <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>
   );

client/app/components/admin/layout.less

@@ -1,5 +1,19 @@
 .admin-page-layout {
-  .ant-table {
-    overflow-x: auto;
+  max-width: 100%;
+
+  &-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/CreateDashboardDialog.jsx

@@ -1,5 +1,6 @@
 import { trim } from "lodash";
 import React, { useState } from "react";
+import { axios } from "@/services/axios";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import DynamicComponent from "@/components/DynamicComponent";
@@ -7,7 +8,6 @@ import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import navigateTo from "@/components/ApplicationArea/navigateTo";
 import recordEvent from "@/services/recordEvent";
 import { policy } from "@/services/policy";
-import { Dashboard } from "@/services/dashboard";
 
 function CreateDashboardDialog({ dialog }) {
   const [name, setName] = useState("");
@@ -25,9 +25,9 @@ function CreateDashboardDialog({ dialog }) {
     if (name !== "") {
       setSaveInProgress(true);
 
-      Dashboard.save({ name }).then(data => {
+      axios.post("api/dashboards", { name }).then(data => {
         dialog.close();
-        navigateTo(`${data.url}?edit`);
+        navigateTo(`dashboard/${data.slug}?edit`);
       });
       recordEvent("create", "dashboard");
     }

client/app/components/dashboards/DashboardGrid.jsx

@@ -238,7 +238,6 @@ class DashboardGrid extends React.Component {
     return (
       <div className={className}>
         <ResponsiveGridLayout
-          draggableCancel="input"
           className={cx("layout", { "disable-animations": this.state.disableAnimations })}
           cols={{ [MULTI]: cfg.columns, [SINGLE]: 1 }}
           rowHeight={cfg.rowHeight - cfg.margins}

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";
@@ -41,30 +40,11 @@ function TextboxDialog({ dialog, isNew, ...props }) {
     });
   }, [dialog, isNew, text]);
 
-  const confirmDialogDismiss = useCallback(() => {
-    const originalText = props.text;
-    if (text !== originalText) {
-      Modal.confirm({
-        title: "Quit editing?",
-        content: "Changes you made so far will not be saved. Are you sure?",
-        okText: "Yes, quit",
-        okType: "danger",
-        onOk: () => dialog.dismiss(),
-        maskClosable: true,
-        autoFocusButton: null,
-        style: { top: 170 },
-      });
-    } else {
-      dialog.dismiss();
-    }
-  }, [dialog, text, props.text]);
-
   return (
     <Modal
       {...dialog.props}
       title={isNew ? "Add Textbox" : "Edit Textbox"}
       onOk={saveWidget}
-      onCancel={confirmDialogDismiss}
       okText={isNew ? "Add to Dashboard" : "Save"}
       width={500}
       wrapProps={{ "data-test": "TextboxDialog" }}>
@@ -79,12 +59,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-grid.less

@@ -48,10 +48,10 @@
       top: 0;
       left: 0;
       bottom: 85px;
-      right: 0;
+      right: 15px;
       background: linear-gradient(to bottom, transparent, transparent 2px, #f6f8f9 2px, #f6f8f9 5px),
         linear-gradient(to left, #b3babf, #b3babf 1px, transparent 1px, transparent);
-      background-size: calc((100% + 15px) / 6) 5px;
+      background-size: calc((100vw - 15px) / 6) 5px;
       background-position: -7px 1px;
     }
   }
@@ -93,7 +93,6 @@
 
     > .filters-wrapper {
       flex-grow: 0;
-      flex-shrink: 0;
     }
   }
 
@@ -113,9 +112,6 @@
     overflow: hidden;
   }
 
-  .counter-visualization-container {
-    height: 100%;
-
   .counter-visualization-content {
     position: absolute;
     left: 10px;
@@ -127,24 +123,6 @@
     padding: 0;
   }
 }
-}
-
-.query-fixed-layout {
-  .visualization-renderer > .visualization-renderer-wrapper {
-    .counter-visualization-container {
-      // counter is too large on Query pages, so let's add some constraints
-      max-width: 600px;
-      max-height: 400px;
-      // center it
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  }
-}
 
 // react-grid-layout overrides
 .react-grid-item {

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, some, isNumber, isBoolean } 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,290 @@ 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,
+    saveText: PropTypes.string,
+    onSubmit: PropTypes.func,
+    form: AntdForm.isRequired,
+  };
+
+  static defaultProps = {
+    id: null,
+    fields: [],
+    actions: [],
+    feedbackIcons: false,
+    hideSubmitButton: false,
+    saveText: "Save",
+    onSubmit: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+
+    const hasFilledExtraField = some(props.fields, field => {
+      const { extra, initialValue, placeholder } = field;
+      return (
+        extra &&
+        (!isEmpty(initialValue) ||
+          isNumber(initialValue) ||
+          (isBoolean(initialValue) && initialValue.toString() !== placeholder))
+      );
+    });
+
+    const inProgressActions = {};
+    props.actions.forEach(action => (inProgressActions[action.name] = false));
+
+    this.state = {
+      isSubmitting: false,
+      showExtraFields: hasFilledExtraField,
+      inProgressActions,
+    };
+
+    this.actionCallbacks = this.props.actions.reduce(
+      (acc, cur) => ({
+        ...acc,
+        [cur.name]: cur.callback,
+      }),
+      null
+    );
   }
-    return value;
+
+  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 });
       });
     }
+  };
 
-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 });
-          });
+    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 undefined;
+    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}>
-        <Form.Item {...formItemProps}>
-          <DynamicFormField field={field} form={form} />
-        </Form.Item>
+          <FormItem {...formItemProps}>{this.renderField(field, fieldProps)}</FormItem>
           {isFunction(contentAfter) ? contentAfter(form.getFieldValue(name)) : contentAfter}
         </React.Fragment>
       );
     });
   }
 
-DynamicFormFields.propTypes = {
-  fields: PropTypes.arrayOf(FieldType),
-  feedbackIcons: PropTypes.bool,
-  form: AntdFormType.isRequired,
+  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,
       };
 
-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)}>
+      return (
+        <Button {...actionProps} data-action={action.name}>
           {action.name}
         </Button>
-  ));
+      );
+    });
   }
 
-DynamicFormActions.propTypes = {
-  actions: PropTypes.arrayOf(ActionType),
-  isFormDirty: PropTypes.bool,
+  render() {
+    const submitProps = {
+      type: "primary",
+      htmlType: "submit",
+      className: "w-100 m-t-20",
+      disabled: this.state.isSubmitting,
+      loading: this.state.isSubmitting,
     };
-
-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 { id, hideSubmitButton, saveText, fields } = this.props;
+    const { showExtraFields } = this.state;
+    const saveButton = !hideSubmitButton;
     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} />
+      <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={() => setShowExtraFields(currentShowExtraFields => !currentShowExtraFields)}>
+              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">
-            <DynamicFormFields fields={extraFields} feedbackIcons={feedbackIcons} form={form} />
+              {this.renderFields(extraFields)}
             </Collapse>
           </div>
         )}
-      {!hideSubmitButton && (
-        <Button className="w-100 m-t-20" type="primary" htmlType="submit" disabled={isSubmitting}>
-          {saveText}
-        </Button>
-      )}
-      <DynamicFormActions actions={actions} isFormDirty={form.isFieldsTouched()} />
+        {saveButton && <Button {...submitProps}>{saveText}</Button>}
+        {this.renderActions()}
       </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/dynamicFormHelper.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { each, includes, isUndefined, isEmpty, isNil, map, get, some } from "lodash";
+import { each, includes, isUndefined, isEmpty, isNil, map } from "lodash";
 
 function orderedInputs(properties, order, targetOptions) {
   const inputs = new Array(order.length);
@@ -124,18 +124,8 @@ function getBase64(file) {
   });
 }
 
-function hasFilledExtraField(type, target) {
-  const extraOptions = get(type, "configuration_schema.extra_options", []);
-  return some(extraOptions, optionName => {
-    const defaultOptionValue = get(type, ["configuration_schema", "properties", optionName, "default"]);
-    const targetOptionValue = get(target, ["options", optionName]);
-    return !isNil(targetOptionValue) && targetOptionValue !== defaultOptionValue;
-  });
-}
-
 export default {
   getFields,
   updateTargetWithValues,
   getBase64,
-  hasFilledExtraField,
 };

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

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