change item element

.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 package.json $APP/package.json
-COPY viz-lib $APP/viz-lib
+RUN npm run cypress:install > /dev/null
-RUN npm ci > /dev/null
 
-COPY . $APP
+COPY client/cypress $APP/client/cypress
+COPY cypress.json $APP/cypress.json
 
 RUN ./node_modules/.bin/cypress verify

.circleci/config.yml

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

.circleci/docker-compose.cypress.yml

@@ -1,20 +1,7 @@
-version: "2.2"
+version: '2.2'
-x-redash-service: &redash-service
-  build:
-    context: ../
-    args:
-      skip_dev_deps: "true"
-      skip_ds_deps: "true"
-      code_coverage: ${CODE_COVERAGE}
-x-redash-environment: &redash-environment
-  REDASH_LOG_LEVEL: "INFO"
-  REDASH_REDIS_URL: "redis://redis:6379/0"
-  REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
-  REDASH_RATELIMIT_ENABLED: "false"
-  REDASH_ENFORCE_CSRF: "true"
 services:
   server:
-    <<: *redash-service
+    build: ../
     command: server
     depends_on:
       - postgres
@@ -22,25 +9,30 @@ services:
     ports:
       - "5000:5000"
     environment:
-      <<: *redash-environment
       PYTHONUNBUFFERED: 0
+      REDASH_LOG_LEVEL: "INFO"
+      REDASH_REDIS_URL: "redis://redis:6379/0"
+      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
+      REDASH_RATELIMIT_ENABLED: "false"
+      REDASH_ENFORCE_CSRF: "true"
   scheduler:
-    <<: *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 +42,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 package.json package-lock.json /frontend/
-COPY --chown=redash viz-lib /frontend/viz-lib
+COPY viz-lib /frontend/viz-lib
-
-# Controls whether to instrument code for coverage information
-ARG code_coverage
-ENV BABEL_ENV=${code_coverage:+test}
-
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
 
-COPY --chown=redash client /frontend/client
+COPY client /frontend/client
-COPY --chown=redash webpack.config.js /frontend/
+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/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() {

client/.babelrc

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

client/.eslintrc.js

@@ -20,21 +20,6 @@ module.exports = {
     // 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: [
     {
@@ -49,8 +34,6 @@ module.exports = {
         // Do not complain about useless contructors in declaration files
         "no-useless-constructor": "off",
         "@typescript-eslint/no-useless-constructor": "error",
-        // Many API fields and generated types use camelcase
-        "@typescript-eslint/camelcase": "off",
       },
     },
   ],

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

@@ -141,7 +141,6 @@ a.label-tag {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  position: relative;
 }
 
 .query-fullscreen {

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

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

client/app/components/ApplicationArea/ErrorMessage.jsx

@@ -1,10 +1,8 @@
-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) {
@@ -33,30 +31,21 @@ 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="error-message-container" data-test="ErrorMessage">
       <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
+          <h4>{getErrorMessage(error)}</h4>
-            name="ErrorMessageDetails"
-            fallback={<ErrorMessageDetails {...errorDetailsProps} />}
-            {...errorDetailsProps}
-          />
         </div>
       </div>
     </div>
@@ -65,5 +54,4 @@ export default function ErrorMessage({ error, message }) {
 
 ErrorMessage.propTypes = {
   error: PropTypes.object.isRequired,
-  message: PropTypes.string,
 };

client/app/components/ApplicationArea/ErrorMessageDetails.jsx

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

client/app/components/ApplicationArea/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/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

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

client/app/components/DialogWrapper.d.ts

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

client/app/components/DynamicComponent.jsx

@@ -1,4 +1,4 @@
-import { isFunction, isString, isUndefined } from "lodash";
+import { isFunction, isString } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 
@@ -24,7 +24,6 @@ export function unregisterComponent(name) {
 export default class DynamicComponent extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
-    fallback: PropTypes.node,
     children: PropTypes.node,
   };
 
@@ -41,11 +40,10 @@ export default class DynamicComponent extends React.Component {
   }
 
   render() {
-    const { name, children, fallback, ...props } = this.props;
+    const { name, children, ...props } = this.props;
     const RealComponent = componentsRegistry.get(name);
     if (!RealComponent) {
-      // return fallback if any, otherwise return children
+      return children;
-      return isUndefined(fallback) ? children : fallback;
     }
     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 { includes, words, capitalize, clone, isNull } from "lodash";
-import React, { useState, useEffect, useRef, useMemo } from "react";
+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 [initialQuery, setInitialQuery] = useState();
-  const mappingParameters = useMemo(
-    () =>
-      map(paramQuery && paramQuery.getParametersDefs(), mappingParam => ({
-        mappingParam,
-        existingMapping: get(param.parameterMapping, mappingParam.name, {
-          mappingType: QueryBasedParameterMappingType.UNDEFINED,
-        }),
-      })),
-    [param.parameterMapping, paramQuery]
-  );
 
   const isNew = !props.parameter.name;
 
   // fetch query by id
-  const initialQueryId = useRef(props.parameter.queryId);
   useEffect(() => {
-    if (initialQueryId.current) {
+    const queryId = props.parameter.queryId;
-      Query.get({ id: initialQueryId.current }).then(setParamQuery);
+    if (queryId) {
+      Query.get({ id: queryId }).then(setInitialQuery);
     }
-  }, []);
+  }, [props.parameter.queryId]);
 
   function isFulfilled() {
     // name
@@ -105,14 +93,8 @@ function EditParameterSettingsDialog(props) {
     }
 
     // query
-    if (param.type === "query") {
+    if (param.type === "query" && !param.queryId) {
-      if (!param.queryId) {
+      return false;
-        return false;
-      }
-
-      if (find(mappingParameters, { existingMapping: { mappingType: QueryBasedParameterMappingType.UNDEFINED } })) {
-        return false;
-      }
     }
 
     return true;
@@ -158,7 +140,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 +187,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}
+              selectedQuery={initialQuery}
-              onChange={q => {
+              onChange={q => setParam({ ...param, queryId: q && q.id })}
-                if (q) {
-                  setParamQuery(q);
-                  setParam({ ...param, queryId: q.id, parameterMapping: {} });
-                }
-              }}
               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,7 +3,6 @@ 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";
@@ -23,7 +22,7 @@ export default function QueryControlDropdown(props) {
           </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

client/app/components/HelpTrigger.jsx

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

client/app/components/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/Link.jsx

@@ -12,7 +12,7 @@ function Link(props) {
 Link.Component = DefaultLinkComponent;
 
 function DefaultButtonLinkComponent(props) {
-  return <Button role="button" {...props} />;
+  return <Button {...props} />;
 }
 
 function ButtonLink(props) {

client/app/components/ParameterMappingInput.jsx

@@ -17,7 +17,6 @@ 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";
@@ -26,6 +25,8 @@ 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",
@@ -207,9 +208,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 +325,43 @@ class MappingEditor extends React.Component {
     this.setState({ visible: false });
   };
 
-  render() {
+  renderContent() {
-    const { visible, mapping, inputError } = this.state;
+    const { mapping, inputError } = this.state;
+
     return (
-      <InputPopover
+      <div className="parameter-mapping-editor" data-test="EditParamMappingPopover">
+        <header>
+          Edit Source and Value <HelpTrigger type="VALUE_SOURCE_OPTIONS" />
+        </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>
+    );
+  }
+
+  render() {
+    const { visible, mapping } = this.state;
+    return (
+      <Popover
         placement="left"
         trigger="click"
-        header={
+        content={this.renderContent()}
-          <>
-            Edit Source and Value <HelpTrigger type="VALUE_SOURCE_OPTIONS" />
-          </>
-        }
-        content={
-          <ParameterMappingInput
-            mapping={mapping}
-            existingParamNames={this.props.existingParamNames}
-            onChange={this.onChange}
-            inputError={inputError}
-          />
-        }
-        onOk={this.save}
-        onCancel={this.hide}
-        okButtonProps={{ disabled: !!inputError }}
         visible={visible}
         onVisibleChange={this.onVisibleChange}>
-        <Button size="small" type="dashed" data-test={`EditParamMappingButton-${mapping.param.name}`}>
+        <Button size="small" type="dashed" data-test={`EditParamMappingButon-${mapping.param.name}`}>
           <EditOutlinedIcon />
         </Button>
-      </InputPopover>
+      </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,
+  &.disabled, .fa {
-  .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

@@ -21,7 +21,7 @@
     .@{ant-prefix}-input-number,
     .@{ant-prefix}-select-selector,
     .@{ant-prefix}-picker {
-      background-color: @input-dirty !important;
+      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/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;
+const { Option } = Select;
-
-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");
-}
 
 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,86 +48,60 @@ export default class QueryBasedParameterInput extends React.Component {
 
   setValue(value) {
     const { options } = this.state;
-    const { mode, parameter } = this.props;
+    if (this.props.mode === "multiple") {
-
-    if (mode === "multiple") {
-      if (isNil(value)) {
-        value = [];
-      }
-
       value = isArray(value) ? value : [value];
+      const optionValues = map(options, option => option.value);
+      const validValues = intersection(value, optionValues);
+      this.setState({ value: validValues });
+      return validValues;
     }
-
+    const found = find(options, option => option.value === this.props.value) !== undefined;
-    // parameters with search don't have options available, so we trust what we get
+    value = found ? value : get(first(options), "value");
-    if (!parameter.searchFunction) {
-      value = filterValuesThatAreNotInOptions(value, options);
-    }
-
     this.setState({ value });
     return value;
   }
 
-  updateOptions(options) {
-    this.setState({ options, loading: false }, () => {
-      const updatedValue = this.setValue(this.props.value);
-      if (!isEqual(updatedValue, this.props.value)) {
-        this.props.onSelect(updatedValue);
-      }
-    });
-  }
-
   async _loadOptions(queryId) {
     if (queryId && queryId !== this.state.queryId) {
       this.setState({ loading: true });
-      const options = await this.props.parameter.loadDropdownValues(this.state.currentSearchTerm);
+      const options = await this.props.parameter.loadDropdownValues();
 
       // stale queryId check
       if (this.props.queryId === queryId) {
-        this.updateOptions(options);
+        this.setState({ options, loading: false }, () => {
+          const updatedValue = this.setValue(this.props.value);
+          if (!isEqual(updatedValue, this.props.value)) {
+            this.props.onSelect(updatedValue);
+          }
+        });
       }
     }
   }
 
-  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/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/TagsList.jsx

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

client/app/components/TagsList.less

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

client/app/components/TagsList.tsx

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

client/app/components/TimeAgo.jsx

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

client/app/components/UserGroups.less

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

client/app/components/admin/RQStatus.jsx

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

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

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

client/app/components/cards-list/CardsList.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/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/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;
     }
   }

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

@@ -209,10 +209,7 @@ class VisualizationWidget extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
+    this.state = { localParameters: props.widget.getLocalParameters() };
-      localParameters: props.widget.getLocalParameters(),
-      localFilters: props.filters,
-    };
   }
 
   componentDidMount() {
@@ -222,12 +219,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 +260,6 @@ class VisualizationWidget extends React.Component {
               visualization={widget.visualization}
               queryResult={widgetQueryResult}
               filters={filters}
-              onFiltersChange={this.onLocalFiltersChange}
               context="widget"
             />
           </div>

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

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

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

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

@@ -15,7 +15,7 @@ import "./DynamicButton.less";
 
 const { Text } = Typography;
 
-function DynamicButton({ options, selectedDynamicValue, onSelect, enabled, staticValueLabel }) {
+function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
   const menu = (
     <Menu
       className="dynamic-menu"
@@ -32,7 +32,7 @@ function DynamicButton({ options, selectedDynamicValue, onSelect, enabled, stati
       {enabled && (
         <Menu.Item>
           <ArrowLeftOutlinedIcon />
-          <Text type="secondary">{staticValueLabel}</Text>
+          <Text type="secondary">Back to Static Value</Text>
         </Menu.Item>
       )}
     </Menu>
@@ -68,7 +68,6 @@ DynamicButton.propTypes = {
   selectedDynamicValue: PropTypes.oneOfType([DynamicDateType, DynamicDateRangeType]),
   onSelect: PropTypes.func,
   enabled: PropTypes.bool,
-  staticValueLabel: PropTypes.string,
 };
 
 DynamicButton.defaultProps = {
@@ -76,7 +75,6 @@ DynamicButton.defaultProps = {
   selectedDynamicValue: null,
   onSelect: () => {},
   enabled: false,
-  staticValueLabel: "Back to Static Value",
 };
 
 export default DynamicButton;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,3 @@
-@import (reference, less) "~@/assets/less/ant";
-
 // Empty states
 .empty-state {
   width: 100%;
@@ -21,14 +19,11 @@
     padding-left: 0px;
   }
 
+
   .empty-state__summary {
     align-self: flex-start;
     text-align: center;
     background: rgba(102, 136, 153, 0.025);
-
-    p {
-      margin-bottom: 0;
-    }
   }
 
   ol {
@@ -49,6 +44,10 @@
     margin-bottom: 15px;
   }
 
+  p {
+    margin-bottom: 0;
+  }
+
   a:hover {
     cursor: pointer;
   }
@@ -72,22 +71,3 @@
     }
   }
 }
-
-// close button
-.empty-state-wrapper {
-  position: relative;
-
-  .close-button {
-    position: absolute;
-    top: 15px;
-    right: 25px;
-    font-size: 15px;
-    color: @text-color-secondary;
-    cursor: pointer;
-    transition: color @animation-duration-slow;
-
-    &:hover {
-      color: @text-color;
-    }
-  }
-}

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

@@ -67,10 +67,10 @@ export const Columns = {
       overrides
     );
   },
-  timeAgo(overrides, timeAgoCustomProps = undefined) {
+  timeAgo(overrides) {
     return extend(
       {
-        render: value => <TimeAgo date={value} {...timeAgoCustomProps} />,
+        render: value => <TimeAgo date={value} />,
       },
       overrides
     );
@@ -110,8 +110,6 @@ export default class ItemsTable extends React.Component {
     orderByField: PropTypes.string,
     orderByReverse: PropTypes.bool,
     toggleSorting: PropTypes.func,
-    "data-test": PropTypes.string,
-    rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   };
 
   static defaultProps = {
@@ -153,17 +151,6 @@ export default class ItemsTable extends React.Component {
     );
   }
 
-  getRowKey = record => {
-    const { rowKey } = this.props;
-    if (rowKey) {
-      if (isFunction(rowKey)) {
-        return rowKey(record.item);
-      }
-      return record.item[rowKey];
-    }
-    return record.key;
-  };
-
   render() {
     const tableDataProps = {
       columns: this.prepareColumns(),
@@ -197,10 +184,9 @@ export default class ItemsTable extends React.Component {
       <Table
         className={classNames("table-data", { "ant-table-headerless": !showHeader })}
         showHeader={showHeader}
-        rowKey={this.getRowKey}
+        rowKey={row => row.key}
         pagination={false}
         onRow={onTableRow}
-        data-test={this.props["data-test"]}
         {...tableDataProps}
       />
     );

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

@@ -132,13 +132,13 @@ ProfileImage.propTypes = {
     Tags
  */
 
-export function Tags({ url, onChange, showUnselectAll }) {
+export function Tags({ url, onChange }) {
   if (url === "") {
     return null;
   }
   return (
     <div className="m-b-10">
-      <TagsList tagsUrl={url} onUpdate={onChange} showUnselectAll={showUnselectAll} />
+      <TagsList tagsUrl={url} onUpdate={onChange} />
     </div>
   );
 }
@@ -146,6 +146,4 @@ export function Tags({ url, onChange, showUnselectAll }) {
 Tags.propTypes = {
   url: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
-  showUnselectAll: PropTypes.bool,
-  unselectAllButtonTitle: PropTypes.string,
 };

client/app/components/items-list/hooks/useItemsListExtraActions.js

@@ -1,77 +0,0 @@
-import { filter, includes, intersection } from "lodash";
-import React, { useState, useMemo, useEffect, useCallback } from "react";
-import Checkbox from "antd/lib/checkbox";
-import { Columns } from "../components/ItemsTable";
-
-export default function useItemsListExtraActions(controller, listColumns, ExtraActionsComponent) {
-  const [actionsState, setActionsState] = useState({ isAvailable: false });
-  const [selectedItems, setSelectedItems] = useState([]);
-
-  // clear selection when page changes
-  useEffect(() => {
-    setSelectedItems([]);
-  }, [controller.pageItems, actionsState.isAvailable]);
-
-  const areAllItemsSelected = useMemo(() => {
-    const allItems = controller.pageItems;
-    if (allItems.length === 0 || selectedItems.length === 0) {
-      return false;
-    }
-    return intersection(selectedItems, allItems).length === allItems.length;
-  }, [selectedItems, controller.pageItems]);
-
-  const toggleAllItems = useCallback(() => {
-    if (areAllItemsSelected) {
-      setSelectedItems([]);
-    } else {
-      setSelectedItems(controller.pageItems);
-    }
-  }, [areAllItemsSelected, controller.pageItems]);
-
-  const toggleItem = useCallback(
-    item => {
-      if (includes(selectedItems, item)) {
-        setSelectedItems(filter(selectedItems, s => s !== item));
-      } else {
-        setSelectedItems([...selectedItems, item]);
-      }
-    },
-    [selectedItems]
-  );
-
-  const checkboxColumn = useMemo(
-    () =>
-      Columns.custom(
-        (text, item) => <Checkbox checked={includes(selectedItems, item)} onChange={() => toggleItem(item)} />,
-        {
-          title: () => <Checkbox checked={areAllItemsSelected} onChange={toggleAllItems} />,
-          field: "id",
-          width: "1%",
-        }
-      ),
-    [selectedItems, areAllItemsSelected, toggleAllItems, toggleItem]
-  );
-
-  const Component = useCallback(
-    function ItemsListExtraActionsComponentWrapper(props) {
-      // this check mostly needed to avoid eslint exhaustive deps warning
-      if (!ExtraActionsComponent) {
-        return null;
-      }
-
-      return <ExtraActionsComponent onStateChange={setActionsState} {...props} />;
-    },
-    [ExtraActionsComponent]
-  );
-
-  return useMemo(
-    () => ({
-      areExtraActionsAvailable: actionsState.isAvailable,
-      listColumns: actionsState.isAvailable ? [checkboxColumn, ...listColumns] : listColumns,
-      Component,
-      selectedItems,
-      setSelectedItems,
-    }),
-    [actionsState, listColumns, checkboxColumn, selectedItems, Component]
-  );
-}

client/app/components/queries/ApiKeyDialog/index.jsx

@@ -11,7 +11,6 @@ import { clientConfig } from "@/services/auth";
 import notification from "@/services/notification";
 
 import "./index.less";
-import { policy } from "@/services/policy";
 
 function ApiKeyDialog({ dialog, ...props }) {
   const [query, setQuery] = useState(props.query);
@@ -46,7 +45,7 @@ function ApiKeyDialog({ dialog, ...props }) {
         <div className="m-b-20">
           <Input.Group compact>
             <Input readOnly value={query.api_key} />
-            {policy.canEdit(query) && (
+            {query.can_edit && (
               <Button disabled={updatingApiKey} loading={updatingApiKey} onClick={regenerateQueryApiKey}>
                 Regenerate
               </Button>

client/app/components/queries/ScheduleDialog.jsx

@@ -5,7 +5,7 @@ import DatePicker from "antd/lib/date-picker";
 import TimePicker from "antd/lib/time-picker";
 import Select from "antd/lib/select";
 import Radio from "antd/lib/radio";
-import { capitalize, clone, isEqual, omitBy, isNil, isEmpty } from "lodash";
+import { capitalize, clone, isEqual, omitBy, isNil } from "lodash";
 import moment from "moment";
 import { secondsToInterval, durationHumanize, pluralize, IntervalEnum, localizeTime } from "@/lib/utils";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
@@ -207,17 +207,15 @@ class ScheduleDialog extends React.Component {
               <Option value={null} key="never">
                 Never
               </Option>
-              {Object.keys(this.intervals)
+              {Object.keys(this.intervals).map(int => (
-                .filter(int => !isEmpty(this.intervals[int]))
+                <OptGroup label={capitalize(pluralize(int))} key={int}>
-                .map(int => (
+                  {this.intervals[int].map(([cnt, secs]) => (
-                  <OptGroup label={capitalize(pluralize(int))} key={int}>
+                    <Option value={secs} key={`${int}-${cnt}`}>
-                    {this.intervals[int].map(([cnt, secs]) => (
+                      {durationHumanize(secs)}
-                      <Option value={secs} key={`${int}-${cnt}`}>
+                    </Option>
-                        {durationHumanize(secs)}
+                  ))}
-                      </Option>
+                </OptGroup>
-                    ))}
+              ))}
-                  </OptGroup>
-                ))}
             </Select>
           </div>
         </div>

client/app/components/queries/SchemaBrowser.jsx

@@ -41,24 +41,19 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
     return null;
   }
 
-  const tableDisplayName = item.displayName || item.name;
-
   return (
     <div {...props}>
       <div className="table-name" onClick={onToggle}>
         <i className="fa fa-table m-r-5" />
         <strong>
-          <span title={item.name}>{tableDisplayName}</span>
+          <span title={item.name}>{item.name}</span>
           {!isNil(item.size) && <span> ({item.size})</span>}
         </strong>
-
+        <i
-        <Tooltip title="Insert table name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
+          className="fa fa-angle-double-right copy-to-editor"
-          <i
+          aria-hidden="true"
-            className="fa fa-angle-double-right copy-to-editor"
+          onClick={e => handleSelect(e, item.name)}
-            aria-hidden="true"
+        />
-            onClick={e => handleSelect(e, item.name)}
-          />
-        </Tooltip>
       </div>
       {expanded && (
         <div>
@@ -71,13 +66,11 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
               return (
                 <div key={columnName} className="table-open">
                   {columnName} {columnType && <span className="column-type">{columnType}</span>}
-                  <Tooltip title="Insert column name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
+                  <i
-                    <i
+                    className="fa fa-angle-double-right copy-to-editor"
-                      className="fa fa-angle-double-right copy-to-editor"
+                    aria-hidden="true"
-                      aria-hidden="true"
+                    onClick={e => handleSelect(e, columnName)}
-                      onClick={e => handleSelect(e, columnName)}
+                  />
-                    />
-                  </Tooltip>
                 </div>
               );
             })

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

@@ -84,6 +84,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "1 Day 22:15" Set
                       "groupOption": false,
                       "key": "never",
                     },
+                    Object {
+                      "data": Object {
+                        "key": "__RC_SELECT_GRP__Never__",
+                        "label": "Nevers",
+                        "options": Array [],
+                      },
+                      "group": true,
+                      "key": "__RC_SELECT_GRP__Never__",
+                    },
                     Object {
                       "data": Object {
                         "key": "__RC_SELECT_GRP__minute__",
@@ -300,6 +309,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "1 Day 22:15" Set
                       "key": "never",
                       "value": null,
                     },
+                    Object {
+                      "key": "__RC_SELECT_GRP__Never__",
+                      "label": "Nevers",
+                      "options": Array [],
+                    },
                     Object {
                       "key": "__RC_SELECT_GRP__minute__",
                       "label": "Minutes",
@@ -488,6 +502,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "1 Day 22:15" Set
                           "groupOption": false,
                           "key": "never",
                         },
+                        Object {
+                          "data": Object {
+                            "key": "__RC_SELECT_GRP__Never__",
+                            "label": "Nevers",
+                            "options": Array [],
+                          },
+                          "group": true,
+                          "key": "__RC_SELECT_GRP__Never__",
+                        },
                         Object {
                           "data": Object {
                             "key": "__RC_SELECT_GRP__minute__",
@@ -704,6 +727,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "1 Day 22:15" Set
                           "key": "never",
                           "value": null,
                         },
+                        Object {
+                          "key": "__RC_SELECT_GRP__Never__",
+                          "label": "Nevers",
+                          "options": Array [],
+                        },
                         Object {
                           "key": "__RC_SELECT_GRP__minute__",
                           "label": "Minutes",
@@ -2029,6 +2057,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Hours" 1`] = `
                       "groupOption": false,
                       "key": "never",
                     },
+                    Object {
+                      "data": Object {
+                        "key": "__RC_SELECT_GRP__Never__",
+                        "label": "Nevers",
+                        "options": Array [],
+                      },
+                      "group": true,
+                      "key": "__RC_SELECT_GRP__Never__",
+                    },
                     Object {
                       "data": Object {
                         "key": "__RC_SELECT_GRP__minute__",
@@ -2245,6 +2282,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Hours" 1`] = `
                       "key": "never",
                       "value": null,
                     },
+                    Object {
+                      "key": "__RC_SELECT_GRP__Never__",
+                      "label": "Nevers",
+                      "options": Array [],
+                    },
                     Object {
                       "key": "__RC_SELECT_GRP__minute__",
                       "label": "Minutes",
@@ -2433,6 +2475,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Hours" 1`] = `
                           "groupOption": false,
                           "key": "never",
                         },
+                        Object {
+                          "data": Object {
+                            "key": "__RC_SELECT_GRP__Never__",
+                            "label": "Nevers",
+                            "options": Array [],
+                          },
+                          "group": true,
+                          "key": "__RC_SELECT_GRP__Never__",
+                        },
                         Object {
                           "data": Object {
                             "key": "__RC_SELECT_GRP__minute__",
@@ -2649,6 +2700,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Hours" 1`] = `
                           "key": "never",
                           "value": null,
                         },
+                        Object {
+                          "key": "__RC_SELECT_GRP__Never__",
+                          "label": "Nevers",
+                          "options": Array [],
+                        },
                         Object {
                           "key": "__RC_SELECT_GRP__minute__",
                           "label": "Minutes",
@@ -3178,6 +3234,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Weeks 22:15 Tu
                       "groupOption": false,
                       "key": "never",
                     },
+                    Object {
+                      "data": Object {
+                        "key": "__RC_SELECT_GRP__Never__",
+                        "label": "Nevers",
+                        "options": Array [],
+                      },
+                      "group": true,
+                      "key": "__RC_SELECT_GRP__Never__",
+                    },
                     Object {
                       "data": Object {
                         "key": "__RC_SELECT_GRP__minute__",
@@ -3394,6 +3459,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Weeks 22:15 Tu
                       "key": "never",
                       "value": null,
                     },
+                    Object {
+                      "key": "__RC_SELECT_GRP__Never__",
+                      "label": "Nevers",
+                      "options": Array [],
+                    },
                     Object {
                       "key": "__RC_SELECT_GRP__minute__",
                       "label": "Minutes",
@@ -3582,6 +3652,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Weeks 22:15 Tu
                           "groupOption": false,
                           "key": "never",
                         },
+                        Object {
+                          "data": Object {
+                            "key": "__RC_SELECT_GRP__Never__",
+                            "label": "Nevers",
+                            "options": Array [],
+                          },
+                          "group": true,
+                          "key": "__RC_SELECT_GRP__Never__",
+                        },
                         Object {
                           "data": Object {
                             "key": "__RC_SELECT_GRP__minute__",
@@ -3798,6 +3877,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Weeks 22:15 Tu
                           "key": "never",
                           "value": null,
                         },
+                        Object {
+                          "key": "__RC_SELECT_GRP__Never__",
+                          "label": "Nevers",
+                          "options": Array [],
+                        },
                         Object {
                           "key": "__RC_SELECT_GRP__minute__",
                           "label": "Minutes",
@@ -5497,6 +5581,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "5 Minutes" 1`] =
                       "groupOption": false,
                       "key": "never",
                     },
+                    Object {
+                      "data": Object {
+                        "key": "__RC_SELECT_GRP__Never__",
+                        "label": "Nevers",
+                        "options": Array [],
+                      },
+                      "group": true,
+                      "key": "__RC_SELECT_GRP__Never__",
+                    },
                     Object {
                       "data": Object {
                         "key": "__RC_SELECT_GRP__minute__",
@@ -5713,6 +5806,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "5 Minutes" 1`] =
                       "key": "never",
                       "value": null,
                     },
+                    Object {
+                      "key": "__RC_SELECT_GRP__Never__",
+                      "label": "Nevers",
+                      "options": Array [],
+                    },
                     Object {
                       "key": "__RC_SELECT_GRP__minute__",
                       "label": "Minutes",
@@ -5901,6 +5999,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "5 Minutes" 1`] =
                           "groupOption": false,
                           "key": "never",
                         },
+                        Object {
+                          "data": Object {
+                            "key": "__RC_SELECT_GRP__Never__",
+                            "label": "Nevers",
+                            "options": Array [],
+                          },
+                          "group": true,
+                          "key": "__RC_SELECT_GRP__Never__",
+                        },
                         Object {
                           "data": Object {
                             "key": "__RC_SELECT_GRP__minute__",
@@ -6117,6 +6224,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "5 Minutes" 1`] =
                           "key": "never",
                           "value": null,
                         },
+                        Object {
+                          "key": "__RC_SELECT_GRP__Never__",
+                          "label": "Nevers",
+                          "options": Array [],
+                        },
                         Object {
                           "key": "__RC_SELECT_GRP__minute__",
                           "label": "Minutes",
@@ -6643,6 +6755,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "Never" 1`] = `
                       "groupOption": false,
                       "key": "never",
                     },
+                    Object {
+                      "data": Object {
+                        "key": "__RC_SELECT_GRP__Never__",
+                        "label": "Nevers",
+                        "options": Array [],
+                      },
+                      "group": true,
+                      "key": "__RC_SELECT_GRP__Never__",
+                    },
                     Object {
                       "data": Object {
                         "key": "__RC_SELECT_GRP__minute__",
@@ -6859,6 +6980,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "Never" 1`] = `
                       "key": "never",
                       "value": null,
                     },
+                    Object {
+                      "key": "__RC_SELECT_GRP__Never__",
+                      "label": "Nevers",
+                      "options": Array [],
+                    },
                     Object {
                       "key": "__RC_SELECT_GRP__minute__",
                       "label": "Minutes",
@@ -7043,6 +7169,15 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "Never" 1`] = `
                           "groupOption": false,
                           "key": "never",
                         },
+                        Object {
+                          "data": Object {
+                            "key": "__RC_SELECT_GRP__Never__",
+                            "label": "Nevers",
+                            "options": Array [],
+                          },
+                          "group": true,
+                          "key": "__RC_SELECT_GRP__Never__",
+                        },
                         Object {
                           "data": Object {
                             "key": "__RC_SELECT_GRP__minute__",
@@ -7259,6 +7394,11 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "Never" 1`] = `
                           "key": "never",
                           "value": null,
                         },
+                        Object {
+                          "key": "__RC_SELECT_GRP__Never__",
+                          "label": "Nevers",
+                          "options": Array [],
+                        },
                         Object {
                           "key": "__RC_SELECT_GRP__minute__",
                           "label": "Minutes",

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

@@ -67,6 +67,10 @@ export default function DatabricksSchemaBrowser({
     setExpandedFlags({});
   }, [currentDatabaseName]);
 
+  if (schema.length === 0 && databases.length === 0 && !(loadingDatabases || loadingSchema)) {
+    return null;
+  }
+
   function toggleTable(tableName) {
     const table = find(schema, { name: tableName });
     if (!expandedFlags[tableName] && get(table, "loading", false)) {

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

@@ -1,4 +1,4 @@
-import { includes, has, get, map, first, isFunction, isEmpty, startsWith } from "lodash";
+import { has, get, map, first, isFunction, isEmpty } from "lodash";
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import notification from "@/services/notification";
 import DatabricksDataSource from "@/services/databricks-data-source";
@@ -9,7 +9,7 @@ function getDatabases(dataSource, refresh = false) {
   }
 
   return DatabricksDataSource.getDatabases(dataSource, refresh).catch(() => {
-    notification.error("Failed to load Database list.", "Please try again later.");
+    notification.error("Failed to load Database list", "Please try again later.");
     return Promise.reject();
   });
 }
@@ -20,26 +20,11 @@ function getSchema(dataSource, databaseName, refresh = false) {
   }
 
   return DatabricksDataSource.getDatabaseTables(dataSource, databaseName, refresh).catch(() => {
-    notification.error(`Failed to load tables for ${databaseName}.`, "Please try again later.");
+    notification.error("Failed to load Schema", "Please try again later.");
     return Promise.reject();
   });
 }
 
-function addDisplayNameWithoutDatabaseName(schema, databaseName) {
-  if (!databaseName) {
-    return schema;
-  }
-  // add display name without {databaseName} + "."
-  return map(schema, table => {
-    const databaseNamePrefix = databaseName + ".";
-    let displayName = table.name;
-    if (startsWith(table.name, databaseNamePrefix)) {
-      displayName = table.name.slice(databaseNamePrefix.length);
-    }
-    return { ...table, displayName };
-  });
-}
-
 export default function useDatabricksSchema(dataSource, options = null, onOptionsUpdate = null) {
   const [databases, setDatabases] = useState([]);
   const [loadingDatabases, setLoadingDatabases] = useState(true);
@@ -87,10 +72,7 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
     [dataSource, currentDatabaseName]
   );
 
-  const schema = useMemo(() => {
+  const schema = useMemo(() => get(schemas, currentDatabaseName, []), [schemas, currentDatabaseName]);
-    const currentSchema = get(schemas, currentDatabaseName, []);
-    return addDisplayNameWithoutDatabaseName(currentSchema, currentDatabaseName);
-  }, [schemas, currentDatabaseName]);
 
   const refreshAll = useCallback(() => {
     if (!refreshing) {
@@ -150,20 +132,12 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
       .then(data => {
         if (!isCancelled) {
           setDatabases(data);
-
+          setCurrentDatabaseName(
-          // We set the database using this order:
+            defaultDatabaseNameRef.current ||
-          // 1. Currently selected value.
+              localStorage.getItem(`lastSelectedDatabricksDatabase_${dataSource.id}`) ||
-          // 2. Last used stored in localStorage.
+              first(data) ||
-          // 3. default database.
+              null
-          // 4. first database in the list.
+          );
-          let lastUsedDatabase =
-            defaultDatabaseNameRef.current || localStorage.getItem(`lastSelectedDatabricksDatabase_${dataSource.id}`);
-
-          if (!lastUsedDatabase) {
-            lastUsedDatabase = includes(data, "default") ? "default" : first(data) || null;
-          }
-
-          setCurrentDatabaseName(lastUsedDatabase);
         }
       })
       .finally(() => {

client/app/components/visualizations/VisualizationRenderer.jsx

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

client/app/components/visualizations/visualizationComponents.jsx

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

client/app/index.html

@@ -3,28 +3,13 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
-    <base href="<%= htmlWebpackPlugin.options.baseHref %>" />
+    <base href="/" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Redash</title>
-    <script src="<%= htmlWebpackPlugin.options.staticPath %>unsupportedRedirect.js" async></script>
+    <script src="/static/unsupportedRedirect.js" async></script>
 
-    <link
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png" />
-      rel="icon"
+    <link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicon-96x96.png" />
-      type="image/png"
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png" />
-      sizes="32x32"
-      href="<%= htmlWebpackPlugin.options.staticPath %>images/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="96x96"
-      href="<%= htmlWebpackPlugin.options.staticPath %>images/favicon-96x96.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="<%= htmlWebpackPlugin.options.staticPath %>images/favicon-16x16.png"
-    />
   </head>
 
   <body>

client/app/lib/calculateTextWidth.ts

@@ -1,20 +0,0 @@
-const canvas = document.createElement("canvas");
-canvas.style.display = "none";
-document.body.appendChild(canvas);
-
-export function calculateTextWidth(text: string, container = document.body) {
-  const ctx = canvas.getContext("2d");
-  if (ctx) {
-    const containerStyle = window.getComputedStyle(container);
-    ctx.font = `${containerStyle.fontSize} ${containerStyle.fontFamily}`;
-    const textMetrics = ctx.measureText(text);
-    let actualWidth = textMetrics.width;
-    if ("actualBoundingBoxLeft" in textMetrics) {
-      // only available on evergreen browsers
-      actualWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
-    }
-    return actualWidth;
-  }
-
-  return null;
-}

client/app/lib/queryFormat.test.js

@@ -1,56 +0,0 @@
-import { Query } from "@/services/query";
-import * as queryFormat from "./queryFormat";
-
-describe("QueryFormat.formatQuery", () => {
-  test("returns same query text when syntax is not supported", () => {
-    const unsupportedSyntax = "unsupported-syntax";
-    const queryText = "select * from example";
-    const isFormatQueryAvailable = queryFormat.isFormatQueryAvailable(unsupportedSyntax);
-    const formattedQuery = queryFormat.formatQuery(queryText, unsupportedSyntax);
-
-    expect(isFormatQueryAvailable).toBeFalsy();
-    expect(formattedQuery).toBe(queryText);
-  });
-
-  describe("sql", () => {
-    const syntax = "sql";
-
-    test("returns the formatted query text", () => {
-      const queryText = "select column1, column2 from example where column1 = 2";
-      const expectedFormattedQueryText = [
-        "select",
-        "  column1,",
-        "  column2",
-        "from",
-        "  example",
-        "where",
-        "  column1 = 2",
-      ].join("\n");
-      const isFormatQueryAvailable = queryFormat.isFormatQueryAvailable(syntax);
-      const formattedQueryText = queryFormat.formatQuery(queryText, syntax);
-      expect(isFormatQueryAvailable).toBeTruthy();
-      expect(formattedQueryText).toBe(expectedFormattedQueryText);
-    });
-
-    test("still recognizes parameters after formatting", () => {
-      const queryText = "select {{param1}}, {{ param2 }}, {{ date-range.start }} from example";
-      const formattedQueryText = queryFormat.formatQuery(queryText, syntax);
-      const queryParameters = new Query({ query: queryText }).getParameters().parseQuery();
-      const formattedQueryParameters = new Query({ query: formattedQueryText }).getParameters().parseQuery();
-      expect(formattedQueryParameters.sort()).toEqual(queryParameters.sort());
-    });
-  });
-
-  describe("json", () => {
-    const syntax = "json";
-
-    test("returns the formatted query text", () => {
-      const queryText = '{"collection": "example","limit": 10}';
-      const expectedFormattedQueryText = '{\n    "collection": "example",\n    "limit": 10\n}';
-      const isFormatQueryAvailable = queryFormat.isFormatQueryAvailable(syntax);
-      const formattedQueryText = queryFormat.formatQuery(queryText, syntax);
-      expect(isFormatQueryAvailable).toBeTruthy();
-      expect(formattedQueryText).toBe(expectedFormattedQueryText);
-    });
-  });
-});

client/app/lib/queryFormat.ts

@@ -1,23 +0,0 @@
-import { trim } from "lodash";
-import sqlFormatter from "sql-formatter";
-
-interface QueryFormatterMap {
-  [syntax: string]: (queryText: string) => string;
-}
-
-const QueryFormatters: QueryFormatterMap = {
-  sql: queryText => sqlFormatter.format(trim(queryText)),
-  json: queryText => JSON.stringify(JSON.parse(queryText), null, 4),
-};
-
-export function isFormatQueryAvailable(syntax: string) {
-  return syntax in QueryFormatters;
-}
-
-export function formatQuery(queryText: string, syntax: string) {
-  if (!isFormatQueryAvailable(syntax)) {
-    return queryText;
-  }
-  const formatter = QueryFormatters[syntax];
-  return formatter(queryText);
-}

client/app/lib/utils.js

@@ -11,16 +11,7 @@ export const IntervalEnum = {
   MILLISECONDS: "millisecond",
 };
 
-export const AbbreviatedTimeUnits = {
+export function formatDateTime(value) {
-  SECONDS: "s",
-  MINUTES: "m",
-  HOURS: "h",
-  DAYS: "d",
-  WEEKS: "w",
-  MILLISECONDS: "ms",
-};
-
-function formatDateTimeValue(value, format) {
   if (!value) {
     return "";
   }
@@ -30,19 +21,20 @@ function formatDateTimeValue(value, format) {
     return "-";
   }
 
-  return parsed.format(format);
+  return parsed.format(clientConfig.dateTimeFormat);
-}
-
-export function formatDateTime(value) {
-  return formatDateTimeValue(value, clientConfig.dateTimeFormat);
-}
-
-export function formatDateTimePrecise(value, withMilliseconds = false) {
-  return formatDateTimeValue(value, clientConfig.dateFormat + (withMilliseconds ? " HH:mm:ss.SSS" : " HH:mm:ss"));
 }
 
 export function formatDate(value) {
-  return formatDateTimeValue(value, clientConfig.dateFormat);
+  if (!value) {
+    return "";
+  }
+
+  const parsed = moment(value);
+  if (!parsed.isValid()) {
+    return "-";
+  }
+
+  return parsed.format(clientConfig.dateFormat);
 }
 
 export function localizeTime(time) {
@@ -127,59 +119,21 @@ export function remove(items, item) {
   return filtered;
 }
 
-/**
+const units = ["bytes", "KB", "MB", "GB", "TB", "PB"];
- * Formats number to string
- * @param value {number}
- * @param [fractionDigits] {number}
- * @return {string}
- */
-export function formatNumber(value, fractionDigits = 3) {
-  return Math.round(value) !== value ? value.toFixed(fractionDigits) : value.toString();
-}
 
-/**
+export function prettySize(bytes) {
- * Formats any number using predefined units
+  if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) {
- * @param value {string|number}
+    return "?";
- * @param divisor {number}
- * @param [units] {Array<string>}
- * @param [fractionDigits] {number}
- * @return {{unit: string, value: string, divisor: number}}
- */
-export function prettyNumberWithUnit(value, divisor, units = [], fractionDigits) {
-  if (isNaN(parseFloat(value)) || !isFinite(value)) {
-    return {
-      value: "",
-      unit: "",
-      divisor: 1,
-    };
   }
 
   let unit = 0;
-  let greatestDivisor = 1;
 
-  while (value >= divisor && unit < units.length - 1) {
+  while (bytes >= 1024) {
-    value /= divisor;
+    bytes /= 1024;
-    greatestDivisor *= divisor;
     unit += 1;
   }
 
-  return {
+  return bytes.toFixed(3) + " " + units[unit];
-    value: formatNumber(value, fractionDigits),
-    unit: units[unit],
-    divisor: greatestDivisor,
-  };
-}
-
-export function prettySizeWithUnit(bytes, fractionDigits) {
-  return prettyNumberWithUnit(bytes, 1024, ["bytes", "KB", "MB", "GB", "TB", "PB"], fractionDigits);
-}
-
-export function prettySize(bytes) {
-  const { value, unit } = prettySizeWithUnit(bytes);
-  if (!value) {
-    return "?";
-  }
-  return value + " " + unit;
 }
 
 export function join(arr) {

client/app/multi_org.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
     <base href="{{base_href}}" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Redash</title>
     <script src="/static/unsupportedRedirect.js" async></script>
 
     <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png" />

client/app/pages/alert/AlertEdit.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import HelpTrigger from "@/components/HelpTrigger";
-import DynamicComponent from "@/components/DynamicComponent";
 import { Alert as AlertType } from "@/components/proptypes";
 
 import Form from "antd/lib/form";
@@ -53,7 +52,6 @@ export default class AlertEdit extends React.Component {
     return (
       <>
         <Title name={name} alert={alert} onChange={onNameChange} editMode>
-          <DynamicComponent name="AlertEdit.HeaderExtra" alert={alert} />
           <Button className="m-r-5" onClick={() => this.cancel()}>
             <i className="fa fa-times m-r-5" />
             Cancel

client/app/pages/alert/AlertView.jsx

@@ -19,7 +19,6 @@ import Query from "./components/Query";
 import AlertDestinations from "./components/AlertDestinations";
 import HorizontalFormItem from "./components/HorizontalFormItem";
 import { STATE_CLASS } from "../alerts/AlertsList";
-import DynamicComponent from "@/components/DynamicComponent";
 
 function AlertState({ state, lastTriggered }) {
   return (
@@ -67,7 +66,6 @@ export default class AlertView extends React.Component {
     return (
       <>
         <Title name={name} alert={alert}>
-          <DynamicComponent name="AlertView.HeaderExtra" alert={alert} />
           <Tooltip title={canEdit ? "" : "You do not have sufficient permissions to edit this alert"}>
             <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
               <i className="fa fa-edit m-r-5" />

client/app/pages/alerts/AlertsList.jsx

@@ -4,11 +4,10 @@ import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSess
 import Link from "@/components/Link";
 import PageHeader from "@/components/PageHeader";
 import Paginator from "@/components/Paginator";
-import EmptyState, { EmptyStateHelpMessage } from "@/components/empty-state/EmptyState";
+import EmptyState from "@/components/empty-state/EmptyState";
 import { wrap as itemsList, ControllerType } from "@/components/items-list/ItemsList";
 import { ResourceItemsSource } from "@/components/items-list/classes/ItemsSource";
 import { StateStorage } from "@/components/items-list/classes/StateStorage";
-import DynamicComponent from "@/components/DynamicComponent";
 
 import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTable";
 
@@ -86,15 +85,13 @@ class AlertsList extends React.Component {
           />
           <div>
             {controller.isLoaded && controller.isEmpty ? (
-              <DynamicComponent name="AlertsList.EmptyState">
+              <EmptyState
-                <EmptyState
+                icon="fa fa-bell-o"
-                  icon="fa fa-bell-o"
+                illustration="alert"
-                  illustration="alert"
+                description="Get notified on certain events"
-                  description="Get notified on certain events"
+                helpLink="https://redash.io/help/user-guide/alerts/"
-                  helpMessage={<EmptyStateHelpMessage helpTriggerType="ALERTS" />}
+                showAlertStep
-                  showAlertStep
+              />
-                />
-              </DynamicComponent>
             ) : (
               <div className="table-responsive bg-white tiled">
                 <ItemsTable

client/app/pages/dashboards/DashboardList.jsx

@@ -1,19 +1,16 @@
 import React from "react";
-import cx from "classnames";
 
 import Button from "antd/lib/button";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import Link from "@/components/Link";
 import PageHeader from "@/components/PageHeader";
 import Paginator from "@/components/Paginator";
-import DynamicComponent from "@/components/DynamicComponent";
 import { DashboardTagsControl } from "@/components/tags-control/TagsControl";
 import { wrap as itemsList, ControllerType } from "@/components/items-list/ItemsList";
 import { ResourceItemsSource } from "@/components/items-list/classes/ItemsSource";
 import { UrlStateStorage } from "@/components/items-list/classes/StateStorage";
 import * as Sidebar from "@/components/items-list/components/Sidebar";
 import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTable";
-import useItemsListExtraActions from "@/components/items-list/hooks/useItemsListExtraActions";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import Layout from "@/components/layouts/ContentWithSidebar";
 
@@ -25,104 +22,95 @@ import DashboardListEmptyState from "./components/DashboardListEmptyState";
 
 import "./dashboard-list.css";
 
-const sidebarMenu = [
+class DashboardList extends React.Component {
-  {
+  static propTypes = {
-    key: "all",
+    controller: ControllerType.isRequired,
-    href: "dashboards",
+  };
-    title: "All Dashboards",
-  },
-  {
-    key: "favorites",
-    href: "dashboards/favorites",
-    title: "Favorites",
-    icon: () => <Sidebar.MenuIcon icon="fa fa-star" />,
-  },
-];
 
-const listColumns = [
+  sidebarMenu = [
-  Columns.favorites({ className: "p-r-0" }),
-  Columns.custom.sortable(
-    (text, item) => (
-      <React.Fragment>
-        <Link className="table-main-title" href={item.url} data-test={`DashboardId${item.id}`}>
-          {item.name}
-        </Link>
-        <DashboardTagsControl
-          className="d-block"
-          tags={item.tags}
-          isDraft={item.is_draft}
-          isArchived={item.is_archived}
-        />
-      </React.Fragment>
-    ),
     {
-      title: "Name",
+      key: "all",
-      field: "name",
+      href: "dashboards",
-      width: null,
+      title: "All Dashboards",
-    }
+    },
-  ),
+    {
-  Columns.custom((text, item) => item.user.name, { title: "Created By", width: "1%" }),
+      key: "favorites",
-  Columns.dateTime.sortable({
+      href: "dashboards/favorites",
-    title: "Created At",
+      title: "Favorites",
-    field: "created_at",
+      icon: () => <Sidebar.MenuIcon icon="fa fa-star" />,
-    width: "1%",
+    },
-  }),
+  ];
-];
 
-function DashboardListExtraActions(props) {
+  listColumns = [
-  return <DynamicComponent name="DashboardList.Actions" {...props} />;
+    Columns.favorites({ className: "p-r-0" }),
-}
+    Columns.custom.sortable(
+      (text, item) => (
+        <React.Fragment>
+          <Link className="table-main-title" href={item.url} data-test={`DashboardId${item.id}`}>
+            {item.name}
+          </Link>
+          <DashboardTagsControl
+            className="d-block"
+            tags={item.tags}
+            isDraft={item.is_draft}
+            isArchived={item.is_archived}
+          />
+        </React.Fragment>
+      ),
+      {
+        title: "Name",
+        field: "name",
+        width: null,
+      }
+    ),
+    Columns.custom((text, item) => item.user.name, { title: "Created By", width: "1%" }),
+    Columns.dateTime.sortable({
+      title: "Created At",
+      field: "created_at",
+      width: "1%",
+    }),
+  ];
 
-function DashboardList({ controller }) {
+  render() {
-  const {
+    const { controller } = this.props;
-    areExtraActionsAvailable,
+    return (
-    listColumns: tableColumns,
+      <div className="page-dashboard-list">
-    Component: ExtraActionsComponent,
+        <div className="container">
-    selectedItems,
+          <PageHeader
-  } = useItemsListExtraActions(controller, listColumns, DashboardListExtraActions);
+            title={controller.params.pageTitle}
-
+            actions={
-  return (
+              currentUser.hasPermission("create_dashboard") ? (
-    <div className="page-dashboard-list">
+                <Button block type="primary" onClick={() => CreateDashboardDialog.showModal()}>
-      <div className="container">
+                  <i className="fa fa-plus m-r-5" />
-        <PageHeader
+                  New Dashboard
-          title={controller.params.pageTitle}
+                </Button>
-          actions={
+              ) : null
-            currentUser.hasPermission("create_dashboard") ? (
+            }
-              <Button block type="primary" onClick={() => CreateDashboardDialog.showModal()}>
+          />
-                <i className="fa fa-plus m-r-5" />
+          <Layout>
-                New Dashboard
+            <Layout.Sidebar className="m-b-0">
-              </Button>
+              <Sidebar.SearchInput
-            ) : null
+                placeholder="Search Dashboards..."
-          }
+                value={controller.searchTerm}
-        />
+                onChange={controller.updateSearch}
-        <Layout>
+              />
-          <Layout.Sidebar className="m-b-0">
+              <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-            <Sidebar.SearchInput
+              <Sidebar.Tags url="api/dashboards/tags" onChange={controller.updateSelectedTags} />
-              placeholder="Search Dashboards..."
+            </Layout.Sidebar>
-              value={controller.searchTerm}
+            <Layout.Content>
-              onChange={controller.updateSearch}
+              <div data-test="DashboardLayoutContent">
-            />
+                {controller.isLoaded && controller.isEmpty ? (
-            <Sidebar.Menu items={sidebarMenu} selected={controller.params.currentPage} />
+                  <DashboardListEmptyState
-            <Sidebar.Tags url="api/dashboards/tags" onChange={controller.updateSelectedTags} showUnselectAll />
+                    page={controller.params.currentPage}
-          </Layout.Sidebar>
+                    searchTerm={controller.searchTerm}
-          <Layout.Content>
+                    selectedTags={controller.selectedTags}
-            <div data-test="DashboardLayoutContent">
+                  />
-              {controller.isLoaded && controller.isEmpty ? (
+                ) : (
-                <DashboardListEmptyState
-                  page={controller.params.currentPage}
-                  searchTerm={controller.searchTerm}
-                  selectedTags={controller.selectedTags}
-                />
-              ) : (
-                <React.Fragment>
-                  <div className={cx({ "m-b-10": areExtraActionsAvailable })}>
-                    <ExtraActionsComponent selectedItems={selectedItems} />
-                  </div>
                   <div className="bg-white tiled table-responsive">
                     <ItemsTable
                       items={controller.pageItems}
                       loading={!controller.isLoaded}
-                      columns={tableColumns}
+                      columns={this.listColumns}
                       orderByField={controller.orderByField}
                       orderByReverse={controller.orderByReverse}
                       toggleSorting={controller.toggleSorting}
@@ -136,20 +124,16 @@ function DashboardList({ controller }) {
                       onChange={page => controller.updatePagination({ page })}
                     />
                   </div>
-                </React.Fragment>
+                )}
-              )}
+              </div>
-            </div>
+            </Layout.Content>
-          </Layout.Content>
+          </Layout>
-        </Layout>
+        </div>
       </div>
-    </div>
+    );
-  );
+  }
 }
 
-DashboardList.propTypes = {
-  controller: ControllerType.isRequired,
-};
-
 const DashboardListPage = itemsList(
   DashboardList,
   () =>

client/app/pages/dashboards/DashboardPage.jsx

@@ -6,7 +6,6 @@ import cx from "classnames";
 import Button from "antd/lib/button";
 import Checkbox from "antd/lib/checkbox";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
-import DynamicComponent from "@/components/DynamicComponent";
 import DashboardGrid from "@/components/dashboards/DashboardGrid";
 import Parameters from "@/components/Parameters";
 import Filters from "@/components/Filters";
@@ -113,12 +112,7 @@ function DashboardComponent(props) {
 
   return (
     <div className="container" ref={setPageContainer} data-test={`DashboardId${dashboard.id}Container`}>
-      <DashboardHeader
+      <DashboardHeader dashboardOptions={dashboardOptions} />
-        dashboardOptions={dashboardOptions}
-        headerExtra={
-          <DynamicComponent name="Dashboard.HeaderExtra" dashboard={dashboard} dashboardOptions={dashboardOptions} />
-        }
-      />
       {!isEmpty(globalParameters) && (
         <div className="dashboard-parameters m-b-10 p-15 bg-white tiled" data-test="DashboardParameters">
           <Parameters parameters={globalParameters} onValuesChange={refreshDashboard} />

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

@@ -145,7 +145,7 @@ function DashboardMoreOptionsButton({ dashboardOptions }) {
               <a onClick={managePermissions}>Manage Permissions</a>
             </Menu.Item>
           )}
-          {!clientConfig.disablePublish && !dashboard.is_draft && (
+          {!dashboard.is_draft && (
             <Menu.Item>
               <a onClick={togglePublished}>Unpublish</a>
             </Menu.Item>
@@ -166,7 +166,7 @@ DashboardMoreOptionsButton.propTypes = {
   dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-function DashboardControl({ dashboardOptions, headerExtra }) {
+function DashboardControl({ dashboardOptions }) {
   const {
     dashboard,
     togglePublished,
@@ -178,8 +178,7 @@ function DashboardControl({ dashboardOptions, headerExtra }) {
   const showPublishButton = dashboard.is_draft;
   const showRefreshButton = true;
   const showFullscreenButton = !dashboard.is_draft;
-  const canShareDashboard = canEditDashboard && !dashboard.is_draft;
+  const showShareButton = dashboard.publicAccessEnabled || (canEditDashboard && !dashboard.is_draft);
-  const showShareButton = !clientConfig.disablePublicUrls && (dashboard.publicAccessEnabled || canShareDashboard);
   const showMoreOptionsButton = canEditDashboard;
   return (
     <div className="dashboard-control">
@@ -198,7 +197,6 @@ function DashboardControl({ dashboardOptions, headerExtra }) {
               </Button>
             </Tooltip>
           )}
-          {headerExtra}
           {showShareButton && (
             <Tooltip title="Dashboard Sharing Options">
               <Button
@@ -219,10 +217,9 @@ function DashboardControl({ dashboardOptions, headerExtra }) {
 
 DashboardControl.propTypes = {
   dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  headerExtra: PropTypes.node,
 };
 
-function DashboardEditControl({ dashboardOptions, headerExtra }) {
+function DashboardEditControl({ dashboardOptions }) {
   const { setEditingLayout, doneBtnClickedWhileSaving, dashboardStatus, retrySaveDashboardLayout } = dashboardOptions;
   let status;
   if (dashboardStatus === DashboardStatusEnum.SAVED) {
@@ -252,29 +249,26 @@ function DashboardEditControl({ dashboardOptions, headerExtra }) {
           {!doneBtnClickedWhileSaving && <i className="fa fa-check m-r-5" />} Done Editing
         </Button>
       )}
-      {headerExtra}
     </div>
   );
 }
 
 DashboardEditControl.propTypes = {
   dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  headerExtra: PropTypes.node,
 };
 
-export default function DashboardHeader({ dashboardOptions, headerExtra }) {
+export default function DashboardHeader({ dashboardOptions }) {
   const { editingLayout } = dashboardOptions;
   const DashboardControlComponent = editingLayout ? DashboardEditControl : DashboardControl;
 
   return (
     <div className="dashboard-header">
       <DashboardPageTitle dashboardOptions={dashboardOptions} />
-      <DashboardControlComponent dashboardOptions={dashboardOptions} headerExtra={headerExtra} />
+      <DashboardControlComponent dashboardOptions={dashboardOptions} />
     </div>
   );
 }
 
 DashboardHeader.propTypes = {
   dashboardOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  headerExtra: PropTypes.node,
 };

client/app/pages/dashboards/components/DashboardListEmptyState.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 import * as PropTypes from "prop-types";
 import BigMessage from "@/components/BigMessage";
 import NoTaggedObjectsFound from "@/components/NoTaggedObjectsFound";
-import EmptyState, { EmptyStateHelpMessage } from "@/components/empty-state/EmptyState";
+import EmptyState from "@/components/empty-state/EmptyState";
-import DynamicComponent from "@/components/DynamicComponent";
 
 export interface DashboardListEmptyStateProps {
   page: string;
@@ -23,15 +22,13 @@ export default function DashboardListEmptyState({ page, searchTerm, selectedTags
       return <BigMessage message="Mark dashboards as Favorite to list them here." icon="fa-star" />;
     default:
       return (
-        <DynamicComponent name="DashboardList.EmptyState">
+        <EmptyState
-          <EmptyState
+          icon="zmdi zmdi-view-quilt"
-            icon="zmdi zmdi-view-quilt"
+          description="See the big picture"
-            description="See the big picture"
+          illustration="dashboard"
-            illustration="dashboard"
+          helpLink="https://help.redash.io/category/22-dashboards"
-            helpMessage={<EmptyStateHelpMessage helpTriggerType="DASHBOARDS" />}
+          showDashboardStep
-            showDashboardStep
+        />
-          />
-        </DynamicComponent>
       );
   }
 }

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

@@ -15,7 +15,6 @@ import ShareDashboardDialog from "../components/ShareDashboardDialog";
 import useFullscreenHandler from "../../../lib/hooks/useFullscreenHandler";
 import useRefreshRateHandler from "./useRefreshRateHandler";
 import useEditModeHandler from "./useEditModeHandler";
-import { policy } from "@/services/policy";
 
 export { DashboardStatusEnum } from "./useEditModeHandler";
 
@@ -40,12 +39,12 @@ function useDashboard(dashboardData) {
   const [refreshing, setRefreshing] = useState(false);
   const [gridDisabled, setGridDisabled] = useState(false);
   const globalParameters = useMemo(() => dashboard.getParametersDefs(), [dashboard]);
-  const canEditDashboard = !dashboard.is_archived && policy.canEdit(dashboard);
+  const canEditDashboard = !dashboard.is_archived && dashboard.can_edit;
   const isDashboardOwnerOrAdmin = useMemo(
     () =>
       !dashboard.is_archived &&
       has(dashboard, "user.id") &&
-      (currentUser.id === dashboard.user.id || currentUser.isAdmin),
+      (currentUser.id === dashboard.user.id || currentUser.hasPermission("admin")),
     [dashboard]
   );
   const hasOnlySafeQueries = useMemo(

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

@@ -1,28 +0,0 @@
-import { filter } from "lodash";
-import { useState, useEffect } from "react";
-import DataSource from "@/services/data-source";
-
-/**
- * Provides a list of all data sources, as well as a boolean to say whether they've been loaded
- */
-export default function useDataSources() {
-  const [allDataSources, setAllDataSources] = useState([]);
-  const [dataSourcesLoaded, setDataSourcesLoaded] = useState(false);
-  const dataSources = filter(allDataSources, ds => !ds.view_only);
-
-  useEffect(() => {
-    let cancelDataSourceLoading = false;
-    DataSource.query().then(data => {
-      if (!cancelDataSourceLoading) {
-        setDataSourcesLoaded(true);
-        setAllDataSources(data);
-      }
-    });
-
-    return () => {
-      cancelDataSourceLoading = true;
-    };
-  }, []);
-
-  return { dataSourcesLoaded, dataSources };
-}

client/app/pages/home/Home.jsx

@@ -1,10 +1,12 @@
-import { includes } from "lodash";
+import { includes, isEmpty } from "lodash";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
 
 import Alert from "antd/lib/alert";
 import Link from "@/components/Link";
+import LoadingOutlinedIcon from "@ant-design/icons/LoadingOutlined";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
-import EmptyState, { EmptyStateHelpMessage } from "@/components/empty-state/EmptyState";
+import EmptyState from "@/components/empty-state/EmptyState";
 import DynamicComponent from "@/components/DynamicComponent";
 import BeaconConsent from "@/components/BeaconConsent";
 
@@ -12,10 +14,10 @@ import { axios } from "@/services/axios";
 import recordEvent from "@/services/recordEvent";
 import { messages } from "@/services/auth";
 import notification from "@/services/notification";
+import { Dashboard } from "@/services/dashboard";
+import { Query } from "@/services/query";
 import routes from "@/services/routes";
 
-import { DashboardAndQueryFavoritesList } from "./components/FavoritesList";
-
 import "./Home.less";
 
 function DeprecatedEmbedFeatureAlert() {
@@ -65,7 +67,92 @@ function EmailNotVerifiedAlert() {
   );
 }
 
-export default function Home() {
+function FavoriteList({ title, resource, itemUrl, emptyState }) {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    resource
+      .favorites()
+      .then(({ results }) => setItems(results))
+      .finally(() => setLoading(false));
+  }, [resource]);
+
+  return (
+    <>
+      <div className="d-flex align-items-center m-b-20">
+        <p className="flex-fill f-500 c-black m-0">{title}</p>
+        {loading && <LoadingOutlinedIcon />}
+      </div>
+      {!isEmpty(items) && (
+        <div className="list-group">
+          {items.map(item => (
+            <Link key={itemUrl(item)} className="list-group-item" href={itemUrl(item)}>
+              <span className="btn-favourite m-r-5">
+                <i className="fa fa-star" aria-hidden="true" />
+              </span>
+              {item.name}
+              {item.is_draft && <span className="label label-default m-l-5">Unpublished</span>}
+            </Link>
+          ))}
+        </div>
+      )}
+      {isEmpty(items) && !loading && emptyState}
+    </>
+  );
+}
+
+FavoriteList.propTypes = {
+  title: PropTypes.string.isRequired,
+  resource: PropTypes.func.isRequired, // eslint-disable-line react/forbid-prop-types
+  itemUrl: PropTypes.func.isRequired,
+  emptyState: PropTypes.node,
+};
+FavoriteList.defaultProps = { emptyState: null };
+
+function DashboardAndQueryFavoritesList() {
+  return (
+    <div className="tile">
+      <div className="t-body tb-padding">
+        <div className="row home-favorites-list">
+          <div className="col-sm-6 m-t-20">
+            <FavoriteList
+              title="Favorite Dashboards"
+              resource={Dashboard}
+              itemUrl={dashboard => dashboard.url}
+              emptyState={
+                <p>
+                  <span className="btn-favourite m-r-5">
+                    <i className="fa fa-star" aria-hidden="true" />
+                  </span>
+                  Favorite <Link href="dashboards">Dashboards</Link> will appear here
+                </p>
+              }
+            />
+          </div>
+          <div className="col-sm-6 m-t-20">
+            <FavoriteList
+              title="Favorite Queries"
+              resource={Query}
+              itemUrl={query => `queries/${query.id}`}
+              emptyState={
+                <p>
+                  <span className="btn-favourite m-r-5">
+                    <i className="fa fa-star" aria-hidden="true" />
+                  </span>
+                  Favorite <Link href="queries">Queries</Link> will appear here
+                </p>
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Home() {
   useEffect(() => {
     recordEvent("view", "page", "personal_homepage");
   }, []);
@@ -75,17 +162,15 @@ export default function Home() {
       <div className="container">
         {includes(messages, "using-deprecated-embed-feature") && <DeprecatedEmbedFeatureAlert />}
         {includes(messages, "email-not-verified") && <EmailNotVerifiedAlert />}
-        <DynamicComponent name="Home.EmptyState">
+        <EmptyState
-          <EmptyState
+          header="Welcome to Redash 👋"
-            header="Welcome to Redash 👋"
+          description="Connect to any data source, easily visualize and share your data"
-            description="Connect to any data source, easily visualize and share your data"
+          illustration="dashboard"
-            illustration="dashboard"
+          helpLink="https://redash.io/help/user-guide/getting-started"
-            helpMessage={<EmptyStateHelpMessage helpTriggerType="GETTING_STARTED" />}
+          showDashboardStep
-            showDashboardStep
+          showInviteStep
-            showInviteStep
+          onboardingMode
-            onboardingMode
+        />
-          />
-        </DynamicComponent>
         <DynamicComponent name="HomeExtra" />
         <DashboardAndQueryFavoritesList />
         <BeaconConsent />

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

@@ -1,94 +0,0 @@
-import { isEmpty } from "lodash";
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-
-import Link from "@/components/Link";
-import LoadingOutlinedIcon from "@ant-design/icons/LoadingOutlined";
-
-import { Dashboard } from "@/services/dashboard";
-import { Query } from "@/services/query";
-
-export function FavoriteList({ title, resource, itemUrl, emptyState }) {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setLoading(true);
-    resource
-      .favorites()
-      .then(({ results }) => setItems(results))
-      .finally(() => setLoading(false));
-  }, [resource]);
-
-  return (
-    <>
-      <div className="d-flex align-items-center m-b-20">
-        <p className="flex-fill f-500 c-black m-0">{title}</p>
-        {loading && <LoadingOutlinedIcon />}
-      </div>
-      {!isEmpty(items) && (
-        <div className="list-group">
-          {items.map(item => (
-            <Link key={itemUrl(item)} className="list-group-item" href={itemUrl(item)}>
-              <span className="btn-favourite m-r-5">
-                <i className="fa fa-star" aria-hidden="true" />
-              </span>
-              {item.name}
-              {item.is_draft && <span className="label label-default m-l-5">Unpublished</span>}
-            </Link>
-          ))}
-        </div>
-      )}
-      {isEmpty(items) && !loading && emptyState}
-    </>
-  );
-}
-
-FavoriteList.propTypes = {
-  title: PropTypes.string.isRequired,
-  resource: PropTypes.func.isRequired, // eslint-disable-line react/forbid-prop-types
-  itemUrl: PropTypes.func.isRequired,
-  emptyState: PropTypes.node,
-};
-FavoriteList.defaultProps = { emptyState: null };
-
-export function DashboardAndQueryFavoritesList() {
-  return (
-    <div className="tile">
-      <div className="t-body tb-padding">
-        <div className="row home-favorites-list">
-          <div className="col-sm-6 m-t-20">
-            <FavoriteList
-              title="Favorite Dashboards"
-              resource={Dashboard}
-              itemUrl={dashboard => dashboard.url}
-              emptyState={
-                <p>
-                  <span className="btn-favourite m-r-5">
-                    <i className="fa fa-star" aria-hidden="true" />
-                  </span>
-                  Favorite <Link href="dashboards">Dashboards</Link> will appear here
-                </p>
-              }
-            />
-          </div>
-          <div className="col-sm-6 m-t-20">
-            <FavoriteList
-              title="Favorite Queries"
-              resource={Query}
-              itemUrl={query => `queries/${query.id}`}
-              emptyState={
-                <p>
-                  <span className="btn-favourite m-r-5">
-                    <i className="fa fa-star" aria-hidden="true" />
-                  </span>
-                  Favorite <Link href="queries">Queries</Link> will appear here
-                </p>
-              }
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,16 +1,13 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
-import cx from "classnames";
 
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import Link from "@/components/Link";
 import PageHeader from "@/components/PageHeader";
 import Paginator from "@/components/Paginator";
-import DynamicComponent from "@/components/DynamicComponent";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
 import SchedulePhrase from "@/components/queries/SchedulePhrase";
 
 import { wrap as itemsList, ControllerType } from "@/components/items-list/ItemsList";
-import useItemsListExtraActions from "@/components/items-list/hooks/useItemsListExtraActions";
 import { ResourceItemsSource } from "@/components/items-list/classes/ItemsSource";
 import { UrlStateStorage } from "@/components/items-list/classes/StateStorage";
 
@@ -28,134 +25,130 @@ import QueriesListEmptyState from "./QueriesListEmptyState";
 
 import "./queries-list.css";
 
-const sidebarMenu = [
+class QueriesList extends React.Component {
-  {
+  static propTypes = {
-    key: "all",
+    controller: ControllerType.isRequired,
-    href: "queries",
+  };
-    title: "All Queries",
-  },
-  {
-    key: "favorites",
-    href: "queries/favorites",
-    title: "Favorites",
-    icon: () => <Sidebar.MenuIcon icon="fa fa-star" />,
-  },
-  {
-    key: "my",
-    href: "queries/my",
-    title: "My Queries",
-    icon: () => <Sidebar.ProfileImage user={currentUser} />,
-    isAvailable: () => currentUser.hasPermission("create_query"),
-  },
-  {
-    key: "archive",
-    href: "queries/archive",
-    title: "Archived",
-    icon: () => <Sidebar.MenuIcon icon="fa fa-archive" />,
-  },
-];
 
-const listColumns = [
+  sidebarMenu = [
-  Columns.favorites({ className: "p-r-0" }),
-  Columns.custom.sortable(
-    (text, item) => (
-      <React.Fragment>
-        <Link className="table-main-title" href={"queries/" + item.id}>
-          {item.name}
-        </Link>
-        <QueryTagsControl className="d-block" tags={item.tags} isDraft={item.is_draft} isArchived={item.is_archived} />
-      </React.Fragment>
-    ),
     {
-      title: "Name",
+      key: "all",
-      field: "name",
+      href: "queries",
-      width: null,
+      title: "All Queries",
-    }
+    },
-  ),
+    {
-  Columns.custom((text, item) => item.user.name, { title: "Created By", width: "1%" }),
+      key: "favorites",
-  Columns.dateTime.sortable({ title: "Created At", field: "created_at", width: "1%" }),
+      href: "queries/favorites",
-  Columns.dateTime.sortable({
+      title: "Favorites",
-    title: "Last Executed At",
+      icon: () => <Sidebar.MenuIcon icon="fa fa-star" />,
-    field: "retrieved_at",
+    },
-    orderByField: "executed_at",
+    {
-    width: "1%",
+      key: "my",
-  }),
+      href: "queries/my",
-  Columns.custom.sortable((text, item) => <SchedulePhrase schedule={item.schedule} isNew={item.isNew()} />, {
+      title: "My Queries",
-    title: "Refresh Schedule",
+      icon: () => <Sidebar.ProfileImage user={currentUser} />,
-    field: "schedule",
+      isAvailable: () => currentUser.hasPermission("create_query"),
-    width: "1%",
+    },
-  }),
+    {
-];
+      key: "archive",
+      href: "queries/archive",
+      title: "Archived",
+      icon: () => <Sidebar.MenuIcon icon="fa fa-archive" />,
+    },
+  ];
 
-function QueriesListExtraActions(props) {
+  listColumns = [
-  return <DynamicComponent name="QueriesList.Actions" {...props} />;
+    Columns.favorites({ className: "p-r-0" }),
-}
+    Columns.custom.sortable(
+      (text, item) => (
+        <React.Fragment>
+          <Link className="table-main-title" href={"queries/" + item.id}>
+            {item.name}
+          </Link>
+          <QueryTagsControl
+            className="d-block"
+            tags={item.tags}
+            isDraft={item.is_draft}
+            isArchived={item.is_archived}
+          />
+        </React.Fragment>
+      ),
+      {
+        title: "Name",
+        field: "name",
+        width: null,
+      }
+    ),
+    Columns.custom((text, item) => item.user.name, { title: "Created By", width: "1%" }),
+    Columns.dateTime.sortable({ title: "Created At", field: "created_at", width: "1%" }),
+    Columns.dateTime.sortable({
+      title: "Last Executed At",
+      field: "retrieved_at",
+      orderByField: "executed_at",
+      width: "1%",
+    }),
+    Columns.custom.sortable((text, item) => <SchedulePhrase schedule={item.schedule} isNew={item.isNew()} />, {
+      title: "Refresh Schedule",
+      field: "schedule",
+      width: "1%",
+    }),
+  ];
 
-function QueriesList({ controller }) {
+  componentDidMount() {
-  const controllerRef = useRef();
+    this.unlistenLocationChanges = location.listen((unused, action) => {
-  controllerRef.current = controller;
-
-  useEffect(() => {
-    const unlistenLocationChanges = location.listen((unused, action) => {
       const searchTerm = location.search.q || "";
-      if (action === "PUSH" && searchTerm !== controllerRef.current.searchTerm) {
+      if (action === "PUSH" && searchTerm !== this.props.controller.searchTerm) {
-        controllerRef.current.updateSearch(searchTerm);
+        this.props.controller.updateSearch(searchTerm);
       }
     });
+  }
 
-    return () => {
+  componentWillUnmount() {
-      unlistenLocationChanges();
+    if (this.unlistenLocationChanges) {
-    };
+      this.unlistenLocationChanges();
-  }, []);
+      this.unlistenLocationChanges = null;
+    }
+  }
 
-  const {
+  render() {
-    areExtraActionsAvailable,
+    const { controller } = this.props;
-    listColumns: tableColumns,
+    return (
-    Component: ExtraActionsComponent,
+      <div className="page-queries-list">
-    selectedItems,
+        <div className="container">
-  } = useItemsListExtraActions(controller, listColumns, QueriesListExtraActions);
+          <PageHeader
-
+            title={controller.params.pageTitle}
-  return (
+            actions={
-    <div className="page-queries-list">
+              currentUser.hasPermission("create_query") ? (
-      <div className="container">
+                <Link.Button block type="primary" href="queries/new">
-        <PageHeader
+                  <i className="fa fa-plus m-r-5" />
-          title={controller.params.pageTitle}
+                  New Query
-          actions={
+                </Link.Button>
-            currentUser.hasPermission("create_query") ? (
+              ) : null
-              <Link.Button block type="primary" href="queries/new">
+            }
-                <i className="fa fa-plus m-r-5" />
+          />
-                New Query
+          <Layout>
-              </Link.Button>
+            <Layout.Sidebar className="m-b-0">
-            ) : null
+              <Sidebar.SearchInput
-          }
+                placeholder="Search Queries..."
-        />
+                value={controller.searchTerm}
-        <Layout>
+                onChange={controller.updateSearch}
-          <Layout.Sidebar className="m-b-0">
-            <Sidebar.SearchInput
-              placeholder="Search Queries..."
-              value={controller.searchTerm}
-              onChange={controller.updateSearch}
-            />
-            <Sidebar.Menu items={sidebarMenu} selected={controller.params.currentPage} />
-            <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} showUnselectAll />
-          </Layout.Sidebar>
-          <Layout.Content>
-            {controller.isLoaded && controller.isEmpty ? (
-              <QueriesListEmptyState
-                page={controller.params.currentPage}
-                searchTerm={controller.searchTerm}
-                selectedTags={controller.selectedTags}
               />
-            ) : (
+              <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-              <React.Fragment>
+              <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} />
-                <div className={cx({ "m-b-10": areExtraActionsAvailable })}>
+            </Layout.Sidebar>
-                  <ExtraActionsComponent selectedItems={selectedItems} />
+            <Layout.Content>
-                </div>
+              {controller.isLoaded && controller.isEmpty ? (
+                <QueriesListEmptyState
+                  page={controller.params.currentPage}
+                  searchTerm={controller.searchTerm}
+                  selectedTags={controller.selectedTags}
+                />
+              ) : (
                 <div className="bg-white tiled table-responsive">
                   <ItemsTable
                     items={controller.pageItems}
                     loading={!controller.isLoaded}
-                    columns={tableColumns}
+                    columns={this.listColumns}
                     orderByField={controller.orderByField}
                     orderByReverse={controller.orderByReverse}
                     toggleSorting={controller.toggleSorting}
@@ -169,19 +162,15 @@ function QueriesList({ controller }) {
                     onChange={page => controller.updatePagination({ page })}
                   />
                 </div>
-              </React.Fragment>
+              )}
-            )}
+            </Layout.Content>
-          </Layout.Content>
+          </Layout>
-        </Layout>
+        </div>
       </div>
-    </div>
+    );
-  );
+  }
 }
 
-QueriesList.propTypes = {
-  controller: ControllerType.isRequired,
-};
-
 const QueriesListPage = itemsList(
   QueriesList,
   () =>

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

@@ -3,8 +3,7 @@ import PropTypes from "prop-types";
 import Link from "@/components/Link";
 import BigMessage from "@/components/BigMessage";
 import NoTaggedObjectsFound from "@/components/NoTaggedObjectsFound";
-import EmptyState, { EmptyStateHelpMessage } from "@/components/empty-state/EmptyState";
+import EmptyState from "@/components/empty-state/EmptyState";
-import DynamicComponent from "@/components/DynamicComponent";
 
 export default function QueriesListEmptyState({ page, searchTerm, selectedTags }) {
   if (searchTerm !== "") {
@@ -30,14 +29,12 @@ export default function QueriesListEmptyState({ page, searchTerm, selectedTags }
       );
     default:
       return (
-        <DynamicComponent name="QueriesList.EmptyState">
+        <EmptyState
-          <EmptyState
+          icon="fa fa-code"
-            icon="fa fa-code"
+          illustration="query"
-            illustration="query"
+          description="Getting the data from your datasources."
-            description="Getting the data from your datasources."
+          helpLink="https://help.redash.io/category/21-querying"
-            helpMessage={<EmptyStateHelpMessage helpTriggerType="QUERIES" />}
+        />
-          />
-        </DynamicComponent>
       );
   }
 }

client/app/pages/queries/QuerySource.jsx

@@ -1,20 +1,18 @@
-import { extend, find, includes, isEmpty, map } from "lodash";
+import { isEmpty, find, map, extend, includes } from "lodash";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import { useDebouncedCallback } from "use-debounce";
 import useMedia from "use-media";
 import Button from "antd/lib/button";
+import Select from "antd/lib/select";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import Resizable from "@/components/Resizable";
 import Parameters from "@/components/Parameters";
 import EditInPlace from "@/components/EditInPlace";
-import DynamicComponent from "@/components/DynamicComponent";
 import recordEvent from "@/services/recordEvent";
 import { ExecutionStatus } from "@/services/query-result";
 import routes from "@/services/routes";
-import notification from "@/services/notification";
-import * as queryFormat from "@/lib/queryFormat";
 
 import QueryPageHeader from "./components/QueryPageHeader";
 import QueryMetadata from "./components/QueryMetadata";
@@ -39,14 +37,15 @@ import useEditScheduleDialog from "./hooks/useEditScheduleDialog";
 import useAddVisualizationDialog from "./hooks/useAddVisualizationDialog";
 import useEditVisualizationDialog from "./hooks/useEditVisualizationDialog";
 import useDeleteVisualization from "./hooks/useDeleteVisualization";
+import useFormatQuery from "./hooks/useFormatQuery";
 import useUpdateQuery from "./hooks/useUpdateQuery";
 import useUpdateQueryDescription from "./hooks/useUpdateQueryDescription";
 import useUnsavedChangesAlert from "./hooks/useUnsavedChangesAlert";
 
-import "./components/QuerySourceDropdown"; // register QuerySourceDropdown
 import "./QuerySource.less";
 
 function chooseDataSourceId(dataSourceIds, availableDataSources) {
+  dataSourceIds = map(dataSourceIds, v => parseInt(v, 10));
   availableDataSources = map(availableDataSources, ds => ds.id);
   return find(dataSourceIds, id => includes(availableDataSources, id)) || null;
 }
@@ -96,16 +95,7 @@ function QuerySource(props) {
 
   const updateQuery = useUpdateQuery(query, setQuery);
   const updateQueryDescription = useUpdateQueryDescription(query, setQuery);
-  const querySyntax = dataSource ? dataSource.syntax || "sql" : null;
+  const formatQuery = useFormatQuery(query, dataSource ? dataSource.syntax : null, setQuery);
-  const isFormatQueryAvailable = queryFormat.isFormatQueryAvailable(querySyntax);
-  const formatQuery = () => {
-    try {
-      const formattedQueryText = queryFormat.formatQuery(query.query, querySyntax);
-      setQuery(extend(query.clone(), { query: formattedQueryText }));
-    } catch (err) {
-      notification.error(String(err));
-    }
-  };
 
   const handleDataSourceChange = useCallback(
     dataSourceId => {
@@ -201,7 +191,6 @@ function QuerySource(props) {
           dataSource={dataSource}
           sourceMode
           selectedVisualization={selectedVisualization}
-          headerExtra={<DynamicComponent name="QuerySource.HeaderExtra" query={query} />}
           onChange={setQuery}
         />
       </div>
@@ -210,14 +199,27 @@ function QuerySource(props) {
           <nav>
             {dataSourcesLoaded && (
               <div className="editor__left__data-source">
-                <DynamicComponent
+                <Select
-                  name={"QuerySourceDropdown"}
+                  className="w-100"
-                  dataSources={dataSources}
+                  data-test="SelectDataSource"
+                  placeholder="Choose data source..."
                   value={dataSource ? dataSource.id : undefined}
                   disabled={!queryFlags.canEdit || !dataSourcesLoaded || dataSources.length === 0}
                   loading={!dataSourcesLoaded}
-                  onChange={handleDataSourceChange}
+                  optionFilterProp="data-name"
-                />
+                  showSearch
+                  onChange={handleDataSourceChange}>
+                  {map(dataSources, ds => (
+                    <Select.Option
+                      key={`ds-${ds.id}`}
+                      value={ds.id}
+                      data-name={ds.name}
+                      data-test={`SelectDataSource${ds.id}`}>
+                      <img src={`static/images/db-logos/${ds.type}.png`} width="20" alt={ds.name} />
+                      <span>{ds.name}</span>
+                    </Select.Option>
+                  ))}
+                </Select>
               </div>
             )}
             <div className="editor__left__schema">
@@ -276,11 +278,8 @@ function QuerySource(props) {
                         onClick: openAddNewParameterDialog,
                       }}
                       formatButtonProps={{
-                        title: isFormatQueryAvailable
+                        title: "Format Query",
-                          ? "Format Query"
+                        shortcut: "mod+shift+f",
-                          : "Query formatting is not supported for your Data Source syntax",
-                        disabled: !dataSource || !isFormatQueryAvailable,
-                        shortcut: isFormatQueryAvailable ? "mod+shift+f" : null,
                         onClick: formatQuery,
                       }}
                       saveButtonProps={

client/app/pages/queries/QueryView.jsx

@@ -10,12 +10,10 @@ import FullscreenExitOutlinedIcon from "@ant-design/icons/FullscreenExitOutlined
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import EditInPlace from "@/components/EditInPlace";
 import Parameters from "@/components/Parameters";
-import DynamicComponent from "@/components/DynamicComponent";
 
 import DataSource from "@/services/data-source";
 import { ExecutionStatus } from "@/services/query-result";
 import routes from "@/services/routes";
-import { policy } from "@/services/policy";
 
 import useQueryResultData from "@/lib/useQueryResultData";
 
@@ -104,18 +102,14 @@ function QueryView(props) {
           onChange={setQuery}
           selectedVisualization={selectedVisualization}
           headerExtra={
-            <DynamicComponent name="QueryView.HeaderExtra" query={query}>
+            <QueryViewButton
-              {policy.canRun(query) && (
+              className="m-r-5"
-                <QueryViewButton
+              type="primary"
-                  className="m-r-5"
+              shortcut="mod+enter, alt+enter, ctrl+enter"
-                  type="primary"
+              disabled={!queryFlags.canExecute || isExecuting || areParametersDirty}
-                  shortcut="mod+enter, alt+enter, ctrl+enter"
+              onClick={doExecuteQuery}>
-                  disabled={!queryFlags.canExecute || isExecuting || areParametersDirty}
+              Refresh
-                  onClick={doExecuteQuery}>
+            </QueryViewButton>
-                  Refresh
-                </QueryViewButton>
-              )}
-            </DynamicComponent>
           }
           tagsExtra={
             !query.description &&
@@ -171,18 +165,15 @@ function QueryView(props) {
               onAddVisualization={addVisualization}
               onDeleteVisualization={deleteVisualization}
               refreshButton={
-                policy.canRun(query) && (
+                <Button
-                  <Button
+                  type="primary"
-                    type="primary"
+                  disabled={!queryFlags.canExecute || areParametersDirty}
-                    disabled={!queryFlags.canExecute || areParametersDirty}
+                  loading={isExecuting}
-                    loading={isExecuting}
+                  onClick={doExecuteQuery}>
-                    onClick={doExecuteQuery}>
+                  {!isExecuting && <i className="zmdi zmdi-refresh m-r-5" aria-hidden="true" />}
-                    {!isExecuting && <i className="zmdi zmdi-refresh m-r-5" aria-hidden="true" />}
+                  Refresh Now
-                    Refresh Now
+                </Button>
-                  </Button>
-                )
               }
-              canRefresh={policy.canRun(query)}
             />
           )}
           <div className="query-results-footer">

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

@@ -116,14 +116,14 @@ export default function QueryPageHeader({
             onClick: publishQuery,
           },
           unpublish: {
-            isAvailable: !clientConfig.disablePublish && !queryFlags.isNew && queryFlags.canEdit && !queryFlags.isDraft,
+            isAvailable: !queryFlags.isNew && queryFlags.canEdit && !queryFlags.isDraft,
             title: "Unpublish",
             onClick: unpublishQuery,
           },
         },
         {
           showAPIKey: {
-            isAvailable: !clientConfig.disablePublicUrls && !queryFlags.isNew,
+            isAvailable: !queryFlags.isNew,
             title: "Show API Key",
             onClick: openApiKeyDialog,
           },
@@ -179,7 +179,7 @@ export default function QueryPageHeader({
 
         {!queryFlags.isNew && queryFlags.canViewSource && (
           <span>
-            {!sourceMode && queryFlags.canEdit && (
+            {!sourceMode && (
               <Link.Button className="m-r-5" href={query.getUrl(true, selectedVisualization)}>
                 <i className="fa fa-pencil-square-o" aria-hidden="true" />
                 <span className="m-l-5">Edit Source</span>
@@ -189,9 +189,9 @@ export default function QueryPageHeader({
               <Link.Button
                 className="m-r-5"
                 href={query.getUrl(false, selectedVisualization)}
-                data-test="QueryPageShowResultOnly">
+                data-test="QueryPageShowDataOnly">
                 <i className="fa fa-table" aria-hidden="true" />
-                <span className="m-l-5">Show Results Only</span>
+                <span className="m-l-5">Show Data Only</span>
               </Link.Button>
             )}
           </span>
@@ -199,7 +199,7 @@ export default function QueryPageHeader({
 
         {!queryFlags.isNew && (
           <Dropdown overlay={moreActionsMenu} trigger={["click"]}>
-            <Button data-test="QueryPageHeaderMoreButton">
+            <Button>
               <EllipsisOutlinedIcon rotate={90} />
             </Button>
           </Dropdown>
@@ -211,7 +211,7 @@ export default function QueryPageHeader({
 
 QueryPageHeader.propTypes = {
   query: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    id: PropTypes.number,
     name: PropTypes.string,
     tags: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,

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

@@ -4,7 +4,6 @@ import Card from "antd/lib/card";
 import WarningFilledIcon from "@ant-design/icons/WarningFilled";
 import Typography from "antd/lib/typography";
 import Link from "@/components/Link";
-import DynamicComponent from "@/components/DynamicComponent";
 import { currentUser } from "@/services/auth";
 
 import useQueryFlags from "../hooks/useQueryFlags";
@@ -70,12 +69,10 @@ export default function QuerySourceAlerts({ query, dataSourcesAvailable }) {
   return (
     <div className="query-source-alerts">
       <Card>
-        <DynamicComponent name="QuerySource.Alerts" query={query} dataSourcesAvailable={dataSourcesAvailable}>
+        <div className="query-source-alerts-icon">
-          <div className="query-source-alerts-icon">
+          <WarningFilledIcon />
-            <WarningFilledIcon />
+        </div>
-          </div>
+        {message}
-          {message}
-        </DynamicComponent>
       </Card>
     </div>
   );

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

@@ -1,38 +0,0 @@
-import Select from "antd/lib/select";
-import { map } from "lodash";
-import DynamicComponent, { registerComponent } from "@/components/DynamicComponent";
-import PropTypes from "prop-types";
-import React from "react";
-
-import "./QuerySourceDropdownItem"; // register QuerySourceDropdownItem
-
-export function QuerySourceDropdown(props) {
-  return (
-    <Select
-      className="w-100"
-      data-test="SelectDataSource"
-      placeholder="Choose data source..."
-      value={props.value}
-      disabled={props.disabled}
-      loading={props.loading}
-      optionFilterProp="data-name"
-      showSearch
-      onChange={props.onChange}>
-      {map(props.dataSources, ds => (
-        <Select.Option key={`ds-${ds.id}`} value={ds.id} data-name={ds.name} data-test={`SelectDataSource${ds.id}`}>
-          <DynamicComponent name={"QuerySourceDropdownItem"} dataSource={ds} />
-        </Select.Option>
-      ))}
-    </Select>
-  );
-}
-
-QuerySourceDropdown.propTypes = {
-  dataSources: PropTypes.any,
-  value: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  onChange: PropTypes.func,
-};
-
-registerComponent("QuerySourceDropdown", QuerySourceDropdown);

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

@@ -1,24 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { registerComponent } from "@/components/DynamicComponent";
-import { QuerySourceTypeIcon } from "@/pages/queries/components/QuerySourceTypeIcon";
-
-export function QuerySourceDropdownItem({ dataSource, children }) {
-  return (
-    <React.Fragment>
-      <QuerySourceTypeIcon type={dataSource.type} alt={dataSource.name} />
-      {children ? children : <span>{dataSource.name}</span>}
-    </React.Fragment>
-  );
-}
-
-QuerySourceDropdownItem.propTypes = {
-  dataSource: PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.string,
-    type: PropTypes.string,
-  }).isRequired,
-  children: PropTypes.element,
-};
-
-registerComponent("QuerySourceDropdownItem", QuerySourceDropdownItem);

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

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

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from "react";
+import React, { useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import { find, orderBy } from "lodash";
@@ -91,7 +91,6 @@ export default function QueryVisualizationTabs({
   onAddVisualization,
   onDeleteVisualization,
   refreshButton,
-  canRefresh,
   ...props
 }) {
   const visualizations = useMemo(
@@ -121,8 +120,6 @@ export default function QueryVisualizationTabs({
   const isFirstVisualization = useCallback(visId => visId === orderedVisualizations[0].id, [orderedVisualizations]);
   const isMobile = useMedia({ maxWidth: 768 });
 
-  const [filters, setFilters] = useState([]);
-
   return (
     <Tabs
       {...tabsProps}
@@ -145,21 +142,11 @@ export default function QueryVisualizationTabs({
             />
           }>
           {queryResult ? (
-            <VisualizationRenderer
+            <VisualizationRenderer visualization={visualization} queryResult={queryResult} context="query" />
-              visualization={visualization}
-              queryResult={queryResult}
-              context="query"
-              filters={filters}
-              onFiltersChange={setFilters}
-            />
           ) : (
             <EmptyState
-              title="Query has no result"
+              title="Query Has no Result"
-              message={
+              message="Execute/Refresh the query to show results."
-                canRefresh
-                  ? "Execute/Refresh the query to show results."
-                  : "You do not have a permission to execute/refresh this query."
-              }
               refreshButton={refreshButton}
             />
           )}
@@ -179,7 +166,6 @@ QueryVisualizationTabs.propTypes = {
   onAddVisualization: PropTypes.func,
   onDeleteVisualization: PropTypes.func,
   refreshButton: PropTypes.node,
-  canRefresh: PropTypes.bool,
 };
 
 QueryVisualizationTabs.defaultProps = {
@@ -192,5 +178,4 @@ QueryVisualizationTabs.defaultProps = {
   onAddVisualization: () => {},
   onDeleteVisualization: () => {},
   refreshButton: null,
-  canRefresh: true,
 };

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

@@ -8,16 +8,16 @@ function isAutoLimitAvailable(dataSource) {
 
 export default function useAutoLimitFlags(dataSource, query, setQuery) {
   const isAvailable = isAutoLimitAvailable(dataSource);
-  const [isChecked, setIsChecked] = useState(query.options.apply_auto_limit);
+  const [isChecked, setIsChecked] = useState(localOptions.get("applyAutoLimit", true));
-  query.options.apply_auto_limit = isChecked;
+  query.options.apply_auto_limit = isAvailable && isChecked;
 
   const setAutoLimit = useCallback(
     state => {
       setIsChecked(state);
       localOptions.set("applyAutoLimit", state);
-      setQuery(extend(query.clone(), { options: { ...query.options, apply_auto_limit: state } }));
+      setQuery(extend(query.clone(), { options: { ...query.options, apply_auto_limit: isAvailable && state } }));
     },
-    [query, setQuery]
+    [query, setQuery, isAvailable]
   );
 
   return [isAvailable, isChecked, setAutoLimit];

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

@@ -1,20 +1,7 @@
-import { noop, extend, pick } from "lodash";
+import { noop } from "lodash";
 import { useCallback, useState } from "react";
-import url from "url";
-import qs from "query-string";
 import { Query } from "@/services/query";
 
-function keepCurrentUrlParams(targetUrl) {
-  const currentUrlParams = qs.parse(window.location.search);
-  targetUrl = url.parse(targetUrl);
-  const targetUrlParams = qs.parse(targetUrl.search);
-  return url.format(
-    extend(pick(targetUrl, ["protocol", "auth", "host", "pathname", "hash"]), {
-      search: qs.stringify(extend(currentUrlParams, targetUrlParams)),
-    })
-  );
-}
-
 export default function useDuplicateQuery(query) {
   const [isDuplicating, setIsDuplicating] = useState(false);
 
@@ -29,7 +16,7 @@ export default function useDuplicateQuery(query) {
     setIsDuplicating(true);
     Query.fork({ id: query.id })
       .then(newQuery => {
-        tab.location = keepCurrentUrlParams(newQuery.getUrl(true));
+        tab.location = newQuery.getUrl(true);
       })
       .finally(() => {
         setIsDuplicating(false);

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

@@ -0,0 +1,19 @@
+import { extend, get } from "lodash";
+import { useCallback } from "react";
+import { Query } from "@/services/query";
+import notification from "@/services/notification";
+import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
+
+export default function useFormatQuery(query, syntax, onChange) {
+  const handleChange = useImmutableCallback(onChange);
+
+  return useCallback(() => {
+    Query.format(syntax || "sql", query.query)
+      .then(queryText => {
+        handleChange(extend(query.clone(), { query: queryText }));
+      })
+      .catch(error =>
+        notification.error(get(error, "response.data.message", "Failed to format query: unknown error."))
+      );
+  }, [query, syntax, handleChange]);
+}

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

@@ -1,4 +1,3 @@
-import { isEmpty } from "lodash";
 import { useState, useMemo } from "react";
 import useUpdateQuery from "./useUpdateQuery";
 import navigateTo from "@/components/ApplicationArea/navigateTo";
@@ -6,7 +5,6 @@ import navigateTo from "@/components/ApplicationArea/navigateTo";
 export default function useQuery(originalQuery) {
   const [query, setQuery] = useState(originalQuery);
   const [originalQuerySource, setOriginalQuerySource] = useState(originalQuery.query);
-  const [originalAutoLimit, setOriginalAutoLimit] = useState(query.options.apply_auto_limit);
 
   const updateQuery = useUpdateQuery(query, updatedQuery => {
     // It's important to update URL first, and only then update state
@@ -16,18 +14,15 @@ export default function useQuery(originalQuery) {
     }
     setQuery(updatedQuery);
     setOriginalQuerySource(updatedQuery.query);
-    setOriginalAutoLimit(updatedQuery.options.apply_auto_limit);
   });
 
   return useMemo(
     () => ({
       query,
       setQuery,
-      isDirty:
+      isDirty: query.query !== originalQuerySource,
-        query.query !== originalQuerySource ||
-        (!isEmpty(query.query) && query.options.apply_auto_limit !== originalAutoLimit),
       saveQuery: () => updateQuery(),
     }),
-    [query, originalQuerySource, updateQuery, originalAutoLimit]
+    [query, originalQuerySource, updateQuery]
   );
 }

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

@@ -1,7 +1,6 @@
 import { isNil, isEmpty } from "lodash";
 import { useMemo } from "react";
 import { currentUser } from "@/services/auth";
-import { policy } from "@/services/policy";
 
 export default function useQueryFlags(query, dataSource = null) {
   dataSource = dataSource || { view_only: true };
@@ -16,11 +15,10 @@ export default function useQueryFlags(query, dataSource = null) {
       // permissions flags
       canCreate: currentUser.hasPermission("create_query"),
       canView: currentUser.hasPermission("view_query"),
-      canEdit: currentUser.hasPermission("edit_query") && policy.canEdit(query),
+      canEdit: currentUser.hasPermission("edit_query") && query.can_edit,
       canViewSource: currentUser.hasPermission("view_source"),
       canExecute:
         !isEmpty(query.query) &&
-        policy.canRun(query) &&
         (query.is_safe || (currentUser.hasPermission("execute_query") && !dataSource.view_only)),
       canFork: currentUser.hasPermission("edit_query") && !dataSource.view_only,
       canSchedule: currentUser.hasPermission("schedule_query"),

client/app/pages/queries/hooks/useUpdateQuery.jsx

@@ -4,7 +4,6 @@ import Modal from "antd/lib/modal";
 import { Query } from "@/services/query";
 import notification from "@/services/notification";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
-import { policy } from "@/services/policy";
 
 class SaveQueryError extends Error {
   constructor(message, detailedMessage = null) {
@@ -95,11 +94,10 @@ export default function useUpdateQuery(query, onChange) {
           "options",
           "latest_query_data_id",
           "is_draft",
-          "tags",
         ]);
       }
 
-      return doSaveQuery(data, { canOverwrite: policy.canEdit(query) })
+      return doSaveQuery(data, { canOverwrite: query.can_edit })
         .then(updatedQuery => {
           if (!isNil(successMessage)) {
             notification.success(successMessage);