Frontend updates from internal fork (#5259)

* DynamicComponent for QuerySourceAlerts * General Settings updates * Dynamic Date[Range] updates * EmptyState updates * Query and SchemaBrowser updates * Adjust page headers and add disablePublish * Policy updates * Separate Home FavoritesList component * Update FormatQuery * Autolimit frontend fixes * Misc updates * Keep registering of QuerySourceDropdown * Undo changes in DynamicComponent * Change sql-formatter package.json syntax * Allow opening help trigger in new tab * Don't run npm commands as root in Dockerfile * Cypress: Remove extra execute query
2025-12-19 17:37:19 -05:00 · 2020-11-10 09:59:15 -03:00
parent 8f484706b1
commit fa7ecca485
58 changed files with 746 additions and 424 deletions
--- a/11
+++ b/11
@@ -6,9 +6,12 @@ ARG skip_frontend_build
 ENV CYPRESS_INSTALL_BINARY=0
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

+RUN useradd -m -d /frontend redash
+USER redash
+
 WORKDIR /frontend
-COPY package.json package-lock.json /frontend/
-COPY viz-lib /frontend/viz-lib
+COPY --chown=redash package.json package-lock.json /frontend/
+COPY --chown=redash viz-lib /frontend/viz-lib

 # Controls whether to instrument code for coverage information
 ARG code_coverage
@@ -16,8 +19,8 @@ ENV BABEL_ENV=${code_coverage:+test}

 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi

-COPY client /frontend/client
-COPY webpack.config.js /frontend/
+COPY --chown=redash client /frontend/client
+COPY --chown=redash webpack.config.js /frontend/
 RUN if [ "x$skip_frontend_build" = "x" ] ; then npm run build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
 FROM python:3.7-slim

--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -23,8 +23,16 @@ module.exports = {
    "no-restricted-imports": [
      "error",
      {
-        name: "antd",
-        message: "Please use antd/lib instead.",
+        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.",
+          },
+        ],
      },
    ],
  },
--- a/client/app/assets/images/db-logos/databricks.png
+++ b/client/app/assets/images/db-logos/databricks.png
--- a/client/app/assets/less/redash/query.less
+++ b/client/app/assets/less/redash/query.less
@@ -141,6 +141,7 @@ a.label-tag {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
+  position: relative;
 }

 .query-fullscreen {
--- a/client/app/components/ApplicationArea/ApplicationLayout/index.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/index.jsx
@@ -13,19 +13,21 @@ export default function ApplicationLayout({ children }) {

  return (
    <React.Fragment>
-      <div className="application-layout-side-menu">
-        <DynamicComponent name="ApplicationDesktopNavbar">
-          <DesktopNavbar />
-        </DynamicComponent>
-      </div>
-      <div className="application-layout-content">
-        <nav className="application-layout-top-menu" ref={mobileNavbarContainerRef}>
-          <DynamicComponent name="ApplicationMobileNavbar" getPopupContainer={getMobileNavbarPopupContainer}>
-            <MobileNavbar getPopupContainer={getMobileNavbarPopupContainer} />
+      <DynamicComponent name="ApplicationWrapper">
+        <div className="application-layout-side-menu">
+          <DynamicComponent name="ApplicationDesktopNavbar">
+            <DesktopNavbar />
          </DynamicComponent>
-        </nav>
-        {children}
-      </div>
+        </div>
+        <div className="application-layout-content">
+          <nav className="application-layout-top-menu" ref={mobileNavbarContainerRef}>
+            <DynamicComponent name="ApplicationMobileNavbar" getPopupContainer={getMobileNavbarPopupContainer}>
+              <MobileNavbar getPopupContainer={getMobileNavbarPopupContainer} />
+            </DynamicComponent>
+          </nav>
+          {children}
+        </div>
+      </DynamicComponent>
    </React.Fragment>
  );
 }
--- a/client/app/components/ApplicationArea/ErrorMessage.jsx
+++ b/client/app/components/ApplicationArea/ErrorMessage.jsx
@@ -46,7 +46,7 @@ export default function ErrorMessage({ error, message }) {
  };

  return (
-    <div className="error-message-container" data-test="ErrorMessage">
+    <div className="error-message-container" data-test="ErrorMessage" role="alert">
      <div className="error-state bg-white tiled">
        <div className="error-state__icon">
          <i className="zmdi zmdi-alert-circle-o" />
--- a/client/app/components/HelpTrigger.jsx
+++ b/client/app/components/HelpTrigger.jsx
@@ -133,10 +133,14 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
      return helpTriggerType ? helpTriggerType[0] : this.props.href;
    };

-    openDrawer = () => {
-      this.setState({ visible: true });
-      // wait for drawer animation to complete so there's no animation jank
-      setTimeout(() => this.loadIframe(this.getUrl()), 300);
+    openDrawer = e => {
+      // keep "open in new tab" behavior
+      if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        this.setState({ visible: true });
+        // wait for drawer animation to complete so there's no animation jank
+        setTimeout(() => this.loadIframe(this.getUrl()), 300);
+      }
    };

    closeDrawer = event => {
@@ -170,15 +174,14 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                </>
              ) : null
            }>
-            {shouldRenderAsLink ? (
-              <Link href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
-                {this.props.children}
-              </Link>
-            ) : (
-              <a onClick={this.openDrawer} className={className}>
-                {this.props.children}
-              </a>
-            )}
+            <Link
+              href={url || this.getUrl()}
+              className={className}
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={shouldRenderAsLink ? () => {} : this.openDrawer}>
+              {this.props.children}
+            </Link>
          </Tooltip>
          <Drawer
            placement="right"
--- a/client/app/components/Link.jsx
+++ b/client/app/components/Link.jsx
@@ -12,7 +12,7 @@ function Link(props) {
 Link.Component = DefaultLinkComponent;

 function DefaultButtonLinkComponent(props) {
-  return <Button {...props} />;
+  return <Button role="button" {...props} />;
 }

 function ButtonLink(props) {
--- a/client/app/pages/users/components/UserGroups.jsx
+++ b/client/app/pages/users/components/UserGroups.jsx
@@ -4,13 +4,13 @@ import PropTypes from "prop-types";
 import Tag from "antd/lib/tag";
 import Link from "@/components/Link";

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

 UserGroups.defaultProps = {
  groups: [],
+  linkGroups: true,
 };
--- a/client/app/components/UserGroups.less
+++ b/client/app/components/UserGroups.less
@@ -0,0 +1,7 @@
+.user-groups {
+  margin: -5px 0 0 -5px;
+
+  .ant-tag {
+    margin: 5px 0 0 5px;
+  }
+}
--- a/client/app/components/dynamic-parameters/DynamicButton.less
+++ b/client/app/components/dynamic-parameters/DynamicButton.less
@@ -34,3 +34,9 @@
    font-size: 11px;
  }
 }
+
+.dynamic-icon {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
--- a/client/app/components/dynamic-parameters/DynamicDateRangePicker.jsx
+++ b/client/app/components/dynamic-parameters/DynamicDateRangePicker.jsx
@@ -67,7 +67,7 @@ class DynamicDateRangePicker extends React.Component {
  };

  render() {
-    const { type, value, onSelect, className, dynamicButtonOptions, dateRangeOptions } = this.props;
+    const { type, value, onSelect, className, dynamicButtonOptions, dateRangeOptions, parameter, ...rest } = this.props;
    const isDateTimeRange = includes(type, "datetime-range");
    const hasDynamicValue = isDynamicDateRange(value);

@@ -91,7 +91,7 @@ class DynamicDateRangePicker extends React.Component {
    }

    return (
-      <div className={classNames("date-range-parameter", className)}>
+      <div {...rest} className={classNames("date-range-parameter", className)}>
        <DateRangeComponent
          {...dateRangeOptions}
          ref={this.dateRangeComponentRef}
--- a/client/app/components/dynamic-parameters/DynamicParameters.less
+++ b/client/app/components/dynamic-parameters/DynamicParameters.less
@@ -40,7 +40,8 @@
        opacity: 0;
      }

-      .ant-picker-separator {
+      .ant-picker-separator,
+      .ant-picker-range-separator {
        display: none;
      }

--- a/client/app/components/empty-state/EmptyState.d.ts
+++ b/client/app/components/empty-state/EmptyState.d.ts
@@ -21,6 +21,8 @@ export interface EmptyStateProps<K = unknown> {
  illustration: string;
  illustrationPath?: string;
  helpMessage?: React.ReactNode;
+  closable?: boolean;
+  onClose?: () => void;

  onboardingMode?: boolean;
  showAlertStep?: boolean;
@@ -39,8 +41,9 @@ export interface StepProps {
  show: boolean;
  completed: boolean;
  url?: string;
-  urlText?: string;
-  text: string;
+  urlTarget?: string;
+  urlText?: React.ReactNode;
+  text?: React.ReactNode;
  onClick?: () => void;
 }

--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/client/app/components/empty-state/EmptyState.jsx
@@ -2,6 +2,7 @@ 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";
@@ -9,14 +10,14 @@ import { currentUser } from "@/services/auth";
 import organizationStatus from "@/services/organizationStatus";
 import "./empty-state.less";

-export function Step({ show, completed, text, url, urlText, onClick }) {
+export function Step({ show, completed, text, url, urlTarget, urlText, onClick }) {
  if (!show) {
    return null;
  }

  return (
    <li className={classNames({ done: completed })}>
-      <Link href={url} onClick={onClick}>
+      <Link href={url} onClick={onClick} target={urlTarget}>
        {urlText}
      </Link>{" "}
      {text}
@@ -27,15 +28,18 @@ export function Step({ show, completed, text, url, urlText, onClick }) {
 Step.propTypes = {
  show: PropTypes.bool.isRequired,
  completed: PropTypes.bool.isRequired,
-  text: PropTypes.string.isRequired,
+  text: PropTypes.node,
  url: PropTypes.string,
-  urlText: PropTypes.string,
+  urlTarget: PropTypes.string,
+  urlText: PropTypes.node,
  onClick: PropTypes.func,
 };

 Step.defaultProps = {
  url: null,
+  urlTarget: null,
  urlText: null,
+  text: null,
  onClick: null,
 };

@@ -60,6 +64,8 @@ function EmptyState({
  description,
  illustration,
  helpMessage,
+  closable,
+  onClose,
  onboardingMode,
  showAlertStep,
  showDashboardStep,
@@ -103,8 +109,7 @@ function EmptyState({
          show={isAvailable.dataSource}
          completed={isCompleted.dataSource}
          url="data_sources/new"
-          urlText="Connect"
-          text="a Data Source"
+          urlText="Connect a Data Source"
        />
      );
    }
@@ -132,8 +137,7 @@ function EmptyState({
          show={isAvailable.query}
          completed={isCompleted.query}
          url="queries/new"
-          urlText="Create"
-          text="your first Query"
+          urlText="Create your first Query"
        />
      ),
    },
@@ -145,8 +149,7 @@ function EmptyState({
          show={isAvailable.alert}
          completed={isCompleted.alert}
          url="alerts/new"
-          urlText="Create"
-          text="your first Alert"
+          urlText="Create your first Alert"
        />
      ),
    },
@@ -158,8 +161,7 @@ function EmptyState({
          show={isAvailable.dashboard}
          completed={isCompleted.dashboard}
          onClick={showCreateDashboardDialog}
-          urlText="Create"
-          text="your first Dashboard"
+          urlText="Create your first Dashboard"
        />
      ),
    },
@@ -171,8 +173,7 @@ function EmptyState({
          show={isAvailable.inviteUsers}
          completed={isCompleted.inviteUsers}
          url="users/new"
-          urlText="Invite"
-          text="your team members"
+          urlText="Invite your team members"
        />
      ),
    },
@@ -182,20 +183,27 @@ function EmptyState({
  const imageSource = illustrationPath ? illustrationPath : "static/images/illustrations/" + illustration + ".svg";

  return (
-    <div className="empty-state bg-white tiled">
-      <div className="empty-state__summary">
-        {header && <h4>{header}</h4>}
-        <h2>
-          <i className={icon} />
-        </h2>
-        <p>{description}</p>
-        <img src={imageSource} alt={illustration + " Illustration"} width="75%" />
-      </div>
-      <div className="empty-state__steps">
-        <h4>Let&apos;s get started</h4>
-        <ol>{stepsItems.map(item => item.node)}</ol>
-        {helpMessage}
+    <div className="empty-state-wrapper">
+      <div className="empty-state bg-white tiled">
+        <div className="empty-state__summary">
+          {header && <h4>{header}</h4>}
+          <h2>
+            <i className={icon} />
+          </h2>
+          <p>{description}</p>
+          <img src={imageSource} alt={illustration + " Illustration"} width="75%" />
+        </div>
+        <div className="empty-state__steps">
+          <h4>Let&apos;s get started</h4>
+          <ol>{stepsItems.map(item => item.node)}</ol>
+          {helpMessage}
+        </div>
      </div>
+      {closable && (
+        <a className="close-button" onClick={onClose}>
+          <CloseOutlinedIcon />
+        </a>
+      )}
    </div>
  );
 }
@@ -207,6 +215,8 @@ EmptyState.propTypes = {
  illustration: PropTypes.string.isRequired,
  illustrationPath: PropTypes.string,
  helpMessage: PropTypes.node,
+  closable: PropTypes.bool,
+  onClose: PropTypes.func,

  onboardingMode: PropTypes.bool,
  showAlertStep: PropTypes.bool,
@@ -221,6 +231,8 @@ EmptyState.defaultProps = {
  icon: null,
  header: null,
  helpMessage: null,
+  closable: false,
+  onClose: () => {},

  onboardingMode: false,
  showAlertStep: false,
--- a/client/app/components/empty-state/empty-state.less
+++ b/client/app/components/empty-state/empty-state.less
@@ -1,3 +1,5 @@
+@import (reference, less) "~@/assets/less/ant";
+
 // Empty states
 .empty-state {
  width: 100%;
@@ -70,3 +72,22 @@
    }
  }
 }
+
+// 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;
+    }
+  }
+}
--- a/client/app/components/items-list/components/ItemsTable.jsx
+++ b/client/app/components/items-list/components/ItemsTable.jsx
@@ -67,10 +67,10 @@ export const Columns = {
      overrides
    );
  },
-  timeAgo(overrides) {
+  timeAgo(overrides, timeAgoCustomProps = undefined) {
    return extend(
      {
-        render: value => <TimeAgo date={value} />,
+        render: value => <TimeAgo date={value} {...timeAgoCustomProps} />,
      },
      overrides
    );
@@ -110,6 +110,8 @@ 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 = {
@@ -151,6 +153,17 @@ 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(),
@@ -184,9 +197,10 @@ export default class ItemsTable extends React.Component {
      <Table
        className={classNames("table-data", { "ant-table-headerless": !showHeader })}
        showHeader={showHeader}
-        rowKey={row => row.key}
+        rowKey={this.getRowKey}
        pagination={false}
        onRow={onTableRow}
+        data-test={this.props["data-test"]}
        {...tableDataProps}
      />
    );
--- a/client/app/components/queries/ApiKeyDialog/index.jsx
+++ b/client/app/components/queries/ApiKeyDialog/index.jsx
@@ -11,6 +11,7 @@ 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);
@@ -45,7 +46,7 @@ function ApiKeyDialog({ dialog, ...props }) {
        <div className="m-b-20">
          <Input.Group compact>
            <Input readOnly value={query.api_key} />
-            {query.can_edit && (
+            {policy.canEdit(query) && (
              <Button disabled={updatingApiKey} loading={updatingApiKey} onClick={regenerateQueryApiKey}>
                Regenerate
              </Button>
--- a/client/app/components/queries/SchemaBrowser.jsx
+++ b/client/app/components/queries/SchemaBrowser.jsx
@@ -41,19 +41,24 @@ 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}>{item.name}</span>
+          <span title={item.name}>{tableDisplayName}</span>
          {!isNil(item.size) && <span> ({item.size})</span>}
        </strong>
-        <i
-          className="fa fa-angle-double-right copy-to-editor"
-          aria-hidden="true"
-          onClick={e => handleSelect(e, item.name)}
-        />
+
+        <Tooltip title="Insert table name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
+          <i
+            className="fa fa-angle-double-right copy-to-editor"
+            aria-hidden="true"
+            onClick={e => handleSelect(e, item.name)}
+          />
+        </Tooltip>
      </div>
      {expanded && (
        <div>
@@ -66,11 +71,13 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
              return (
                <div key={columnName} className="table-open">
                  {columnName} {columnType && <span className="column-type">{columnType}</span>}
-                  <i
-                    className="fa fa-angle-double-right copy-to-editor"
-                    aria-hidden="true"
-                    onClick={e => handleSelect(e, columnName)}
-                  />
+                  <Tooltip title="Insert column name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
+                    <i
+                      className="fa fa-angle-double-right copy-to-editor"
+                      aria-hidden="true"
+                      onClick={e => handleSelect(e, columnName)}
+                    />
+                  </Tooltip>
                </div>
              );
            })
--- a/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx
+++ b/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx
@@ -67,10 +67,6 @@ 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)) {
--- a/client/app/components/queries/editor-components/databricks/useDatabricksSchema.js
+++ b/client/app/components/queries/editor-components/databricks/useDatabricksSchema.js
@@ -1,4 +1,4 @@
-import { has, get, map, first, isFunction, isEmpty } from "lodash";
+import { includes, has, get, map, first, isFunction, isEmpty, startsWith } from "lodash";
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import notification from "@/services/notification";
 import DatabricksDataSource from "@/services/databricks-data-source";
@@ -25,6 +25,21 @@ function getSchema(dataSource, databaseName, refresh = false) {
  });
 }

+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);
@@ -72,7 +87,10 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
    [dataSource, currentDatabaseName]
  );

-  const schema = useMemo(() => get(schemas, currentDatabaseName, []), [schemas, currentDatabaseName]);
+  const schema = useMemo(() => {
+    const currentSchema = get(schemas, currentDatabaseName, []);
+    return addDisplayNameWithoutDatabaseName(currentSchema, currentDatabaseName);
+  }, [schemas, currentDatabaseName]);

  const refreshAll = useCallback(() => {
    if (!refreshing) {
@@ -132,12 +150,20 @@ export default function useDatabricksSchema(dataSource, options = null, onOption
      .then(data => {
        if (!isCancelled) {
          setDatabases(data);
-          setCurrentDatabaseName(
-            defaultDatabaseNameRef.current ||
-              localStorage.getItem(`lastSelectedDatabricksDatabase_${dataSource.id}`) ||
-              first(data) ||
-              null
-          );
+
+          // We set the database using this order:
+          // 1. Currently selected value.
+          // 2. Last used stored in localStorage.
+          // 3. default database.
+          // 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(() => {
--- a/client/app/lib/queryFormat.test.js
+++ b/client/app/lib/queryFormat.test.js
@@ -0,0 +1,56 @@
+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);
+    });
+  });
+});
--- a/client/app/lib/queryFormat.ts
+++ b/client/app/lib/queryFormat.ts
@@ -0,0 +1,23 @@
+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);
+}
--- a/client/app/lib/utils.js
+++ b/client/app/lib/utils.js
@@ -127,21 +127,59 @@ 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) {
-  if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) {
-    return "?";
+/**
+ * Formats any number using predefined units
+ * @param value {string|number}
+ * @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 (bytes >= 1024) {
-    bytes /= 1024;
+  while (value >= divisor && unit < units.length - 1) {
+    value /= divisor;
+    greatestDivisor *= divisor;
    unit += 1;
  }

-  return bytes.toFixed(3) + " " + units[unit];
+  return {
+    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) {
--- a/client/app/pages/alert/AlertEdit.jsx
+++ b/client/app/pages/alert/AlertEdit.jsx
@@ -2,6 +2,7 @@ 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";
@@ -52,6 +53,7 @@ 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
--- a/client/app/pages/alert/AlertView.jsx
+++ b/client/app/pages/alert/AlertView.jsx
@@ -19,6 +19,7 @@ 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 (
@@ -66,6 +67,7 @@ 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" />
--- a/client/app/pages/dashboards/components/DashboardHeader.jsx
+++ b/client/app/pages/dashboards/components/DashboardHeader.jsx
@@ -145,7 +145,7 @@ function DashboardMoreOptionsButton({ dashboardOptions }) {
              <a onClick={managePermissions}>Manage Permissions</a>
            </Menu.Item>
          )}
-          {!dashboard.is_draft && (
+          {!clientConfig.disablePublish && !dashboard.is_draft && (
            <Menu.Item>
              <a onClick={togglePublished}>Unpublish</a>
            </Menu.Item>
--- a/client/app/pages/dashboards/hooks/useDashboard.js
+++ b/client/app/pages/dashboards/hooks/useDashboard.js
@@ -15,6 +15,7 @@ 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";

@@ -39,7 +40,7 @@ function useDashboard(dashboardData) {
  const [refreshing, setRefreshing] = useState(false);
  const [gridDisabled, setGridDisabled] = useState(false);
  const globalParameters = useMemo(() => dashboard.getParametersDefs(), [dashboard]);
-  const canEditDashboard = !dashboard.is_archived && dashboard.can_edit;
+  const canEditDashboard = !dashboard.is_archived && policy.canEdit(dashboard);
  const isDashboardOwnerOrAdmin = useMemo(
    () =>
      !dashboard.is_archived &&
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -1,10 +1,8 @@
-import { includes, isEmpty } from "lodash";
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
+import { includes } from "lodash";
+import React, { useEffect } from "react";

 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 DynamicComponent from "@/components/DynamicComponent";
@@ -14,10 +12,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() {
@@ -67,91 +65,6 @@ function EmailNotVerifiedAlert() {
  );
 }

-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>
-  );
-}
-
 export default function Home() {
  useEffect(() => {
    recordEvent("view", "page", "personal_homepage");
--- a/client/app/pages/home/components/FavoritesList.jsx
+++ b/client/app/pages/home/components/FavoritesList.jsx
@@ -0,0 +1,94 @@
+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>
+  );
+}
--- a/client/app/pages/queries/QuerySource.jsx
+++ b/client/app/pages/queries/QuerySource.jsx
@@ -9,10 +9,12 @@ import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSess
 import Resizable from "@/components/Resizable";
 import Parameters from "@/components/Parameters";
 import EditInPlace from "@/components/EditInPlace";
-import recordEvent from "@/services/recordEvent";
 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";
@@ -37,7 +39,6 @@ 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";
@@ -95,7 +96,16 @@ function QuerySource(props) {

  const updateQuery = useUpdateQuery(query, setQuery);
  const updateQueryDescription = useUpdateQueryDescription(query, setQuery);
-  const formatQuery = useFormatQuery(query, dataSource ? dataSource.syntax : null, setQuery);
+  const querySyntax = dataSource ? dataSource.syntax || "sql" : null;
+  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 => {
@@ -191,6 +201,7 @@ function QuerySource(props) {
          dataSource={dataSource}
          sourceMode
          selectedVisualization={selectedVisualization}
+          headerExtra={<DynamicComponent name="QuerySource.HeaderExtra" query={query} />}
          onChange={setQuery}
        />
      </div>
@@ -265,8 +276,11 @@ function QuerySource(props) {
                        onClick: openAddNewParameterDialog,
                      }}
                      formatButtonProps={{
-                        title: "Format Query",
-                        shortcut: "mod+shift+f",
+                        title: isFormatQueryAvailable
+                          ? "Format Query"
+                          : "Query formatting is not supported for your Data Source syntax",
+                        disabled: !dataSource || !isFormatQueryAvailable,
+                        shortcut: isFormatQueryAvailable ? "mod+shift+f" : null,
                        onClick: formatQuery,
                      }}
                      saveButtonProps={
--- a/client/app/pages/queries/QueryView.jsx
+++ b/client/app/pages/queries/QueryView.jsx
@@ -8,13 +8,14 @@ import FullscreenOutlinedIcon from "@ant-design/icons/FullscreenOutlined";
 import FullscreenExitOutlinedIcon from "@ant-design/icons/FullscreenExitOutlined";

 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
-import DynamicComponent from "@/components/DynamicComponent";
 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,14 +105,16 @@ function QueryView(props) {
          selectedVisualization={selectedVisualization}
          headerExtra={
            <DynamicComponent name="QueryView.HeaderExtra" query={query}>
-              <QueryViewButton
-                className="m-r-5"
-                type="primary"
-                shortcut="mod+enter, alt+enter, ctrl+enter"
-                disabled={!queryFlags.canExecute || isExecuting || areParametersDirty}
-                onClick={doExecuteQuery}>
-                Refresh
-              </QueryViewButton>
+              {policy.canRun(query) && (
+                <QueryViewButton
+                  className="m-r-5"
+                  type="primary"
+                  shortcut="mod+enter, alt+enter, ctrl+enter"
+                  disabled={!queryFlags.canExecute || isExecuting || areParametersDirty}
+                  onClick={doExecuteQuery}>
+                  Refresh
+                </QueryViewButton>
+              )}
            </DynamicComponent>
          }
          tagsExtra={
@@ -168,15 +171,18 @@ function QueryView(props) {
              onAddVisualization={addVisualization}
              onDeleteVisualization={deleteVisualization}
              refreshButton={
-                <Button
-                  type="primary"
-                  disabled={!queryFlags.canExecute || areParametersDirty}
-                  loading={isExecuting}
-                  onClick={doExecuteQuery}>
-                  {!isExecuting && <i className="zmdi zmdi-refresh m-r-5" aria-hidden="true" />}
-                  Refresh Now
-                </Button>
+                policy.canRun(query) && (
+                  <Button
+                    type="primary"
+                    disabled={!queryFlags.canExecute || areParametersDirty}
+                    loading={isExecuting}
+                    onClick={doExecuteQuery}>
+                    {!isExecuting && <i className="zmdi zmdi-refresh m-r-5" aria-hidden="true" />}
+                    Refresh Now
+                  </Button>
+                )
              }
+              canRefresh={policy.canRun(query)}
            />
          )}
          <div className="query-results-footer">
--- a/client/app/pages/queries/components/QueryPageHeader.jsx
+++ b/client/app/pages/queries/components/QueryPageHeader.jsx
@@ -116,7 +116,7 @@ export default function QueryPageHeader({
            onClick: publishQuery,
          },
          unpublish: {
-            isAvailable: !queryFlags.isNew && queryFlags.canEdit && !queryFlags.isDraft,
+            isAvailable: !clientConfig.disablePublish && !queryFlags.isNew && queryFlags.canEdit && !queryFlags.isDraft,
            title: "Unpublish",
            onClick: unpublishQuery,
          },
@@ -179,7 +179,7 @@ export default function QueryPageHeader({

        {!queryFlags.isNew && queryFlags.canViewSource && (
          <span>
-            {!sourceMode && (
+            {!sourceMode && queryFlags.canEdit && (
              <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>
@@ -211,7 +211,7 @@ export default function QueryPageHeader({

 QueryPageHeader.propTypes = {
  query: PropTypes.shape({
-    id: PropTypes.number,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    name: PropTypes.string,
    tags: PropTypes.arrayOf(PropTypes.string),
  }).isRequired,
--- a/client/app/pages/queries/components/QuerySourceAlerts.jsx
+++ b/client/app/pages/queries/components/QuerySourceAlerts.jsx
@@ -4,6 +4,7 @@ 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";
@@ -69,10 +70,12 @@ export default function QuerySourceAlerts({ query, dataSourcesAvailable }) {
  return (
    <div className="query-source-alerts">
      <Card>
-        <div className="query-source-alerts-icon">
-          <WarningFilledIcon />
-        </div>
-        {message}
+        <DynamicComponent name="QuerySource.Alerts" query={query} dataSourcesAvailable={dataSourcesAvailable}>
+          <div className="query-source-alerts-icon">
+            <WarningFilledIcon />
+          </div>
+          {message}
+        </DynamicComponent>
      </Card>
    </div>
  );
--- a/client/app/pages/queries/components/QueryVisualizationTabs.jsx
+++ b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
@@ -91,6 +91,7 @@ export default function QueryVisualizationTabs({
  onAddVisualization,
  onDeleteVisualization,
  refreshButton,
+  canRefresh,
  ...props
 }) {
  const visualizations = useMemo(
@@ -154,7 +155,11 @@ export default function QueryVisualizationTabs({
          ) : (
            <EmptyState
              title="Query has no result"
-              message="Execute/Refresh the query to show results."
+              message={
+                canRefresh
+                  ? "Execute/Refresh the query to show results."
+                  : "You do not have a permission to execute/refresh this query."
+              }
              refreshButton={refreshButton}
            />
          )}
@@ -174,6 +179,7 @@ QueryVisualizationTabs.propTypes = {
  onAddVisualization: PropTypes.func,
  onDeleteVisualization: PropTypes.func,
  refreshButton: PropTypes.node,
+  canRefresh: PropTypes.bool,
 };

 QueryVisualizationTabs.defaultProps = {
@@ -186,4 +192,5 @@ QueryVisualizationTabs.defaultProps = {
  onAddVisualization: () => {},
  onDeleteVisualization: () => {},
  refreshButton: null,
+  canRefresh: true,
 };
--- a/client/app/pages/queries/hooks/useAutoLimitFlags.js
+++ b/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(localOptions.get("applyAutoLimit", true));
-  query.options.apply_auto_limit = isAvailable && isChecked;
+  const [isChecked, setIsChecked] = useState(query.options.apply_auto_limit);
+  query.options.apply_auto_limit = isChecked;

  const setAutoLimit = useCallback(
    state => {
      setIsChecked(state);
      localOptions.set("applyAutoLimit", state);
-      setQuery(extend(query.clone(), { options: { ...query.options, apply_auto_limit: isAvailable && state } }));
+      setQuery(extend(query.clone(), { options: { ...query.options, apply_auto_limit: state } }));
    },
-    [query, setQuery, isAvailable]
+    [query, setQuery]
  );

  return [isAvailable, isChecked, setAutoLimit];
--- a/client/app/pages/queries/hooks/useFormatQuery.js
+++ b/client/app/pages/queries/hooks/useFormatQuery.js
@@ -1,19 +0,0 @@
-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]);
-}
--- a/client/app/pages/queries/hooks/useQuery.js
+++ b/client/app/pages/queries/hooks/useQuery.js
@@ -1,3 +1,4 @@
+import { isEmpty } from "lodash";
 import { useState, useMemo } from "react";
 import useUpdateQuery from "./useUpdateQuery";
 import navigateTo from "@/components/ApplicationArea/navigateTo";
@@ -5,6 +6,7 @@ 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
@@ -14,15 +16,18 @@ export default function useQuery(originalQuery) {
    }
    setQuery(updatedQuery);
    setOriginalQuerySource(updatedQuery.query);
+    setOriginalAutoLimit(updatedQuery.options.apply_auto_limit);
  });

  return useMemo(
    () => ({
      query,
      setQuery,
-      isDirty: query.query !== originalQuerySource,
+      isDirty:
+        query.query !== originalQuerySource ||
+        (!isEmpty(query.query) && query.options.apply_auto_limit !== originalAutoLimit),
      saveQuery: () => updateQuery(),
    }),
-    [query, originalQuerySource, updateQuery]
+    [query, originalQuerySource, updateQuery, originalAutoLimit]
  );
 }
--- a/client/app/pages/queries/hooks/useQueryFlags.js
+++ b/client/app/pages/queries/hooks/useQueryFlags.js
@@ -1,6 +1,7 @@
 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 };
@@ -15,10 +16,11 @@ export default function useQueryFlags(query, dataSource = null) {
      // permissions flags
      canCreate: currentUser.hasPermission("create_query"),
      canView: currentUser.hasPermission("view_query"),
-      canEdit: currentUser.hasPermission("edit_query") && query.can_edit,
+      canEdit: currentUser.hasPermission("edit_query") && policy.canEdit(query),
      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"),
--- a/client/app/pages/queries/hooks/useUpdateQuery.jsx
+++ b/client/app/pages/queries/hooks/useUpdateQuery.jsx
@@ -4,6 +4,7 @@ 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) {
@@ -94,10 +95,11 @@ export default function useUpdateQuery(query, onChange) {
          "options",
          "latest_query_data_id",
          "is_draft",
+          "tags",
        ]);
      }

-      return doSaveQuery(data, { canOverwrite: query.can_edit })
+      return doSaveQuery(data, { canOverwrite: policy.canEdit(query) })
        .then(updatedQuery => {
          if (!isNil(successMessage)) {
            notification.success(successMessage);
--- a/client/app/pages/settings/OrganizationSettings.jsx
+++ b/client/app/pages/settings/OrganizationSettings.jsx
@@ -1,89 +1,37 @@
-import { get } from "lodash";
-import React, { useState, useEffect, useCallback } from "react";
+import React from "react";
 import PropTypes from "prop-types";

 import Button from "antd/lib/button";
 import Form from "antd/lib/form";
+import Skeleton from "antd/lib/skeleton";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
-import LoadingState from "@/components/items-list/components/LoadingState";
 import wrapSettingsTab from "@/components/SettingsWrapper";

-import recordEvent from "@/services/recordEvent";
-import OrgSettings from "@/services/organizationSettings";
 import routes from "@/services/routes";
-import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
 import { getHorizontalFormProps, getHorizontalFormItemWithoutLabelProps } from "@/styles/formStyle";

+import useOrganizationSettings from "./hooks/useOrganizationSettings";
 import GeneralSettings from "./components/GeneralSettings";
 import AuthSettings from "./components/AuthSettings";

 function OrganizationSettings({ onError }) {
-  const [settings, setSettings] = useState({});
-  const [currentValues, setCurrentValues] = useState({});
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleError = useImmutableCallback(onError);
-
-  useEffect(() => {
-    recordEvent("view", "page", "org_settings");
-
-    let isCancelled = false;
-
-    OrgSettings.get()
-      .then(response => {
-        if (!isCancelled) {
-          const settings = get(response, "settings");
-          setSettings(settings);
-          setCurrentValues({ ...settings });
-          setIsLoading(false);
-        }
-      })
-      .catch(error => {
-        if (!isCancelled) {
-          handleError(error);
-        }
-      });
-
-    return () => {
-      isCancelled = true;
-    };
-  }, [handleError]);
-
-  const handleChange = useCallback(changes => {
-    setCurrentValues(currentValues => ({ ...currentValues, ...changes }));
-  }, []);
-
-  const handleSubmit = useCallback(() => {
-    if (!isSaving) {
-      setIsSaving(true);
-      OrgSettings.save(currentValues)
-        .then(response => {
-          const settings = get(response, "settings");
-          setSettings(settings);
-          setCurrentValues({ ...settings });
-        })
-        .catch(handleError)
-        .finally(() => setIsSaving(false));
-    }
-  }, [isSaving, currentValues, handleError]);
-
+  const { settings, currentValues, isLoading, isSaving, handleSubmit, handleChange } = useOrganizationSettings(onError);
  return (
    <div className="row" data-test="OrganizationSettings">
      <div className="m-r-20 m-l-20">
-        {isLoading ? (
-          <LoadingState className="" />
-        ) : (
-          <Form {...getHorizontalFormProps()} onFinish={handleSubmit}>
-            <GeneralSettings settings={settings} values={currentValues} onChange={handleChange} />
-            <AuthSettings settings={settings} values={currentValues} onChange={handleChange} />
-            <Form.Item {...getHorizontalFormItemWithoutLabelProps()}>
+        <Form {...getHorizontalFormProps()} onFinish={handleSubmit}>
+          <GeneralSettings loading={isLoading} settings={settings} values={currentValues} onChange={handleChange} />
+          <AuthSettings loading={isLoading} settings={settings} values={currentValues} onChange={handleChange} />
+          <Form.Item {...getHorizontalFormItemWithoutLabelProps()}>
+            {isLoading ? (
+              <Skeleton.Button active />
+            ) : (
              <Button type="primary" htmlType="submit" loading={isSaving}>
                Save
              </Button>
-            </Form.Item>
-          </Form>
-        )}
+            )}
+          </Form.Item>
+        </Form>
      </div>
    </div>
  );
--- a/client/app/pages/settings/components/AuthSettings/PasswordLoginSettings.jsx
+++ b/client/app/pages/settings/components/AuthSettings/PasswordLoginSettings.jsx
@@ -3,19 +3,20 @@ import Alert from "antd/lib/alert";
 import Form from "antd/lib/form";
 import Checkbox from "antd/lib/checkbox";
 import Tooltip from "antd/lib/tooltip";
+import Skeleton from "antd/lib/skeleton";
 import DynamicComponent from "@/components/DynamicComponent";
 import { clientConfig } from "@/services/auth";
 import { SettingsEditorPropTypes, SettingsEditorDefaultProps } from "../prop-types";

 export default function PasswordLoginSettings(props) {
-  const { settings, values, onChange } = props;
+  const { settings, values, onChange, loading } = props;

  const isTheOnlyAuthMethod =
    !clientConfig.googleLoginEnabled && !clientConfig.ldapLoginEnabled && !values.auth_saml_enabled;

  return (
    <DynamicComponent name="OrganizationSettings.PasswordLoginSettings" {...props}>
-      {!settings.auth_password_login_enabled && (
+      {!loading && !settings.auth_password_login_enabled && (
        <Alert
          message="Password based login is currently disabled and users will
            be able to login only with the enabled SSO options."
@@ -24,18 +25,22 @@ export default function PasswordLoginSettings(props) {
        />
      )}
      <Form.Item label="Password Login">
-        <Checkbox
-          checked={values.auth_password_login_enabled}
-          disabled={isTheOnlyAuthMethod}
-          onChange={e => onChange({ auth_password_login_enabled: e.target.checked })}>
-          <Tooltip
-            title={
-              isTheOnlyAuthMethod ? "Password login can be disabled only if another login method is enabled." : null
-            }
-            placement="right">
-            Password Login Enabled
-          </Tooltip>
-        </Checkbox>
+        {loading ? (
+          <Skeleton title={{ width: 300 }} paragraph={false} active />
+        ) : (
+          <Checkbox
+            checked={values.auth_password_login_enabled}
+            disabled={isTheOnlyAuthMethod}
+            onChange={e => onChange({ auth_password_login_enabled: e.target.checked })}>
+            <Tooltip
+              title={
+                isTheOnlyAuthMethod ? "Password login can be disabled only if another login method is enabled." : null
+              }
+              placement="right">
+              Password Login Enabled
+            </Tooltip>
+          </Checkbox>
+        )}
      </Form.Item>
    </DynamicComponent>
  );
--- a/client/app/pages/settings/components/AuthSettings/SAMLSettings.jsx
+++ b/client/app/pages/settings/components/AuthSettings/SAMLSettings.jsx
@@ -1,12 +1,13 @@
 import React from "react";
 import Form from "antd/lib/form";
 import Input from "antd/lib/input";
+import Skeleton from "antd/lib/skeleton";
 import Radio from "antd/lib/radio";
 import DynamicComponent from "@/components/DynamicComponent";
 import { SettingsEditorPropTypes, SettingsEditorDefaultProps } from "../prop-types";

 export default function SAMLSettings(props) {
-  const { values, onChange } = props;
+  const { values, onChange, loading } = props;

  const onChangeEnabledStatus = e => {
    const updates = { auth_saml_enabled: !!e.target.value };
@@ -20,13 +21,17 @@ export default function SAMLSettings(props) {
    <DynamicComponent name="OrganizationSettings.SAMLSettings" {...props}>
      <h4>SAML</h4>
      <Form.Item label="SAML Enabled">
-        <Radio.Group
-          onChange={onChangeEnabledStatus}
-          value={values.auth_saml_enabled && (values.auth_saml_type || "dynamic")}>
-          <Radio value={false}>Disabled</Radio>
-          <Radio value={"static"}>Enabled (Static)</Radio>
-          <Radio value={"dynamic"}>Enabled (Dynamic)</Radio>
-        </Radio.Group>
+        {loading ? (
+          <Skeleton title={{ width: 300 }} paragraph={false} active />
+        ) : (
+          <Radio.Group
+            onChange={onChangeEnabledStatus}
+            value={values.auth_saml_enabled && (values.auth_saml_type || "dynamic")}>
+            <Radio value={false}>Disabled</Radio>
+            <Radio value={"static"}>Enabled (Static)</Radio>
+            <Radio value={"dynamic"}>Enabled (Dynamic)</Radio>
+          </Radio.Group>
+        )}
      </Form.Item>
      {values.auth_saml_enabled && (
        <>
--- a/client/app/pages/settings/components/GeneralSettings/BeaconConsentSettings.jsx
+++ b/client/app/pages/settings/components/GeneralSettings/BeaconConsentSettings.jsx
@@ -1,12 +1,13 @@
 import React from "react";
 import Form from "antd/lib/form";
-import HelpTrigger from "@/components/HelpTrigger";
 import Checkbox from "antd/lib/checkbox";
+import Skeleton from "antd/lib/skeleton";
+import HelpTrigger from "@/components/HelpTrigger";
 import DynamicComponent from "@/components/DynamicComponent";
 import { SettingsEditorPropTypes, SettingsEditorDefaultProps } from "../prop-types";

 export default function BeaconConsentSettings(props) {
-  const { values, onChange } = props;
+  const { values, onChange, loading } = props;

  return (
    <DynamicComponent name="OrganizationSettings.BeaconConsentSettings" {...props}>
@@ -17,12 +18,16 @@ export default function BeaconConsentSettings(props) {
            <HelpTrigger className="m-l-5 m-r-5" type="USAGE_DATA_SHARING" />
          </span>
        }>
-        <Checkbox
-          name="beacon_consent"
-          checked={values.beacon_consent}
-          onChange={e => onChange({ beacon_consent: e.target.checked })}>
-          Help Redash improve by automatically sending anonymous usage data
-        </Checkbox>
+        {loading ? (
+          <Skeleton title={{ width: 300 }} paragraph={false} active />
+        ) : (
+          <Checkbox
+            name="beacon_consent"
+            checked={values.beacon_consent}
+            onChange={e => onChange({ beacon_consent: e.target.checked })}>
+            Help Redash improve by automatically sending anonymous usage data
+          </Checkbox>
+        )}
      </Form.Item>
    </DynamicComponent>
  );
--- a/client/app/pages/settings/components/GeneralSettings/FeatureFlagsSettings.jsx
+++ b/client/app/pages/settings/components/GeneralSettings/FeatureFlagsSettings.jsx
@@ -2,41 +2,52 @@ import React from "react";
 import Checkbox from "antd/lib/checkbox";
 import Form from "antd/lib/form";
 import Row from "antd/lib/row";
+import Skeleton from "antd/lib/skeleton";
 import DynamicComponent from "@/components/DynamicComponent";
 import { SettingsEditorPropTypes, SettingsEditorDefaultProps } from "../prop-types";

 export default function FeatureFlagsSettings(props) {
-  const { values, onChange } = props;
+  const { values, onChange, loading } = props;

  return (
    <DynamicComponent name="OrganizationSettings.FeatureFlagsSettings" {...props}>
      <Form.Item label="Feature Flags">
-        <DynamicComponent name="OrganizationSettings.FeatureFlagsSettings.PermissionsControl" {...props}>
-          <Row>
-            <Checkbox
-              name="feature_show_permissions_control"
-              checked={values.feature_show_permissions_control}
-              onChange={e => onChange({ feature_show_permissions_control: e.target.checked })}>
-              Enable experimental multiple owners support
-            </Checkbox>
-          </Row>
-        </DynamicComponent>
-        <Row>
-          <Checkbox
-            name="send_email_on_failed_scheduled_queries"
-            checked={values.send_email_on_failed_scheduled_queries}
-            onChange={e => onChange({ send_email_on_failed_scheduled_queries: e.target.checked })}>
-            Email query owners when scheduled queries fail
-          </Checkbox>
-        </Row>
-        <Row>
-          <Checkbox
-            name="multi_byte_search_enabled"
-            checked={values.multi_byte_search_enabled}
-            onChange={e => onChange({ multi_byte_search_enabled: e.target.checked })}>
-            Enable multi-byte (Chinese, Japanese, and Korean) search for query names and descriptions (slower)
-          </Checkbox>
-        </Row>
+        {loading ? (
+          <>
+            <Row>
+              <Skeleton title={false} paragraph={{ width: [300, 300, 300], rows: 3 }} active />
+            </Row>
+          </>
+        ) : (
+          <>
+            <DynamicComponent name="OrganizationSettings.FeatureFlagsSettings.PermissionsControl" {...props}>
+              <Row>
+                <Checkbox
+                  name="feature_show_permissions_control"
+                  checked={values.feature_show_permissions_control}
+                  onChange={e => onChange({ feature_show_permissions_control: e.target.checked })}>
+                  Enable experimental multiple owners support
+                </Checkbox>
+              </Row>
+            </DynamicComponent>
+            <Row>
+              <Checkbox
+                name="send_email_on_failed_scheduled_queries"
+                checked={values.send_email_on_failed_scheduled_queries}
+                onChange={e => onChange({ send_email_on_failed_scheduled_queries: e.target.checked })}>
+                Email query owners when scheduled queries fail
+              </Checkbox>
+            </Row>
+            <Row>
+              <Checkbox
+                name="multi_byte_search_enabled"
+                checked={values.multi_byte_search_enabled}
+                onChange={e => onChange({ multi_byte_search_enabled: e.target.checked })}>
+                Enable multi-byte (Chinese, Japanese, and Korean) search for query names and descriptions (slower)
+              </Checkbox>
+            </Row>
+          </>
+        )}
      </Form.Item>
    </DynamicComponent>
  );
--- a/client/app/pages/settings/components/GeneralSettings/FormatSettings.jsx
+++ b/client/app/pages/settings/components/GeneralSettings/FormatSettings.jsx
@@ -2,33 +2,42 @@ import React from "react";
 import { SettingsEditorPropTypes, SettingsEditorDefaultProps } from "../prop-types";
 import Form from "antd/lib/form";
 import Select from "antd/lib/select";
+import Skeleton from "antd/lib/skeleton";
 import DynamicComponent from "@/components/DynamicComponent";
 import { clientConfig } from "@/services/auth";

 export default function FormatSettings(props) {
-  const { values, onChange } = props;
+  const { values, onChange, loading } = props;

  return (
    <DynamicComponent name="OrganizationSettings.FormatSettings" {...props}>
      <Form.Item label="Date Format">
-        <Select
-          value={values.date_format}
-          onChange={value => onChange({ date_format: value })}
-          data-test="DateFormatSelect">
-          {clientConfig.dateFormatList.map(dateFormat => (
-            <Select.Option key={dateFormat}>{dateFormat}</Select.Option>
-          ))}
-        </Select>
+        {loading ? (
+          <Skeleton.Input style={{ width: 300 }} active />
+        ) : (
+          <Select
+            value={values.date_format}
+            onChange={value => onChange({ date_format: value })}
+            data-test="DateFormatSelect">
+            {clientConfig.dateFormatList.map(dateFormat => (
+              <Select.Option key={dateFormat}>{dateFormat}</Select.Option>
+            ))}
+          </Select>
+        )}
      </Form.Item>
      <Form.Item label="Time Format">
-        <Select
-          value={values.time_format}
-          onChange={value => onChange({ time_format: value })}
-          data-test="TimeFormatSelect">
-          {clientConfig.timeFormatList.map(timeFormat => (
-            <Select.Option key={timeFormat}>{timeFormat}</Select.Option>
-          ))}
-        </Select>
+        {loading ? (
+          <Skeleton.Input style={{ width: 300 }} active />
+        ) : (
+          <Select
+            value={values.time_format}
+            onChange={value => onChange({ time_format: value })}
+            data-test="TimeFormatSelect">
+            {clientConfig.timeFormatList.map(timeFormat => (
+              <Select.Option key={timeFormat}>{timeFormat}</Select.Option>
+            ))}
+          </Select>
+        )}
      </Form.Item>
    </DynamicComponent>
  );
--- a/client/app/pages/settings/components/GeneralSettings/PlotlySettings.jsx
+++ b/client/app/pages/settings/components/GeneralSettings/PlotlySettings.jsx
@@ -1,21 +1,26 @@
 import React from "react";
 import Checkbox from "antd/lib/checkbox";
 import Form from "antd/lib/form";
+import Skeleton from "antd/lib/skeleton";
 import DynamicComponent from "@/components/DynamicComponent";
 import { SettingsEditorPropTypes, SettingsEditorDefaultProps } from "../prop-types";

 export default function PlotlySettings(props) {
-  const { values, onChange } = props;
+  const { values, onChange, loading } = props;

  return (
    <DynamicComponent name="OrganizationSettings.PlotlySettings" {...props}>
      <Form.Item label="Chart Visualization">
-        <Checkbox
-          name="hide_plotly_mode_bar"
-          checked={values.hide_plotly_mode_bar}
-          onChange={e => onChange({ hide_plotly_mode_bar: e.target.checked })}>
-          Hide Plotly mode bar
-        </Checkbox>
+        {loading ? (
+          <Skeleton title={{ width: 300 }} paragraph={false} active />
+        ) : (
+          <Checkbox
+            name="hide_plotly_mode_bar"
+            checked={values.hide_plotly_mode_bar}
+            onChange={e => onChange({ hide_plotly_mode_bar: e.target.checked })}>
+            Hide Plotly mode bar
+          </Checkbox>
+        )}
      </Form.Item>
    </DynamicComponent>
  );
--- a/client/app/pages/settings/components/prop-types.js
+++ b/client/app/pages/settings/components/prop-types.js
@@ -4,10 +4,12 @@ export const SettingsEditorPropTypes = {
  settings: PropTypes.object,
  values: PropTypes.object,
  onChange: PropTypes.func, // (key, value) => void
+  loading: PropTypes.bool,
 };

 export const SettingsEditorDefaultProps = {
  settings: {},
  values: {},
  onChange: () => {},
+  loading: false,
 };
--- a/client/app/pages/settings/hooks/useOrganizationSettings.js
+++ b/client/app/pages/settings/hooks/useOrganizationSettings.js
@@ -0,0 +1,59 @@
+import { get } from "lodash";
+import { useState, useEffect, useCallback } from "react";
+import recordEvent from "@/services/recordEvent";
+import OrgSettings from "@/services/organizationSettings";
+import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
+
+export default function useOrganizationSettings({ onError }) {
+  const [settings, setSettings] = useState({});
+  const [currentValues, setCurrentValues] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleError = useImmutableCallback(onError);
+
+  useEffect(() => {
+    recordEvent("view", "page", "org_settings");
+
+    let isCancelled = false;
+
+    OrgSettings.get()
+      .then(response => {
+        if (!isCancelled) {
+          const settings = get(response, "settings");
+          setSettings(settings);
+          setCurrentValues({ ...settings });
+          setIsLoading(false);
+        }
+      })
+      .catch(error => {
+        if (!isCancelled) {
+          handleError(error);
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [handleError]);
+
+  const handleChange = useCallback(changes => {
+    setCurrentValues(currentValues => ({ ...currentValues, ...changes }));
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (!isSaving) {
+      setIsSaving(true);
+      OrgSettings.save(currentValues)
+        .then(response => {
+          const settings = get(response, "settings");
+          setSettings(settings);
+          setCurrentValues({ ...settings });
+        })
+        .catch(handleError)
+        .finally(() => setIsSaving(false));
+    }
+  }, [isSaving, currentValues, handleError]);
+
+  return { settings, currentValues, isLoading, isSaving, handleSubmit, handleChange };
+}
--- a/client/app/pages/users/components/ReadOnlyUserProfile.jsx
+++ b/client/app/pages/users/components/ReadOnlyUserProfile.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { UserProfile } from "@/components/proptypes";
+import UserGroups from "@/components/UserGroups";

-import UserGroups from "./UserGroups";
 import useUserGroups from "../hooks/useUserGroups";

 export default function ReadOnlyUserProfile({ user }) {
--- a/client/app/pages/users/components/UserInfoForm.jsx
+++ b/client/app/pages/users/components/UserInfoForm.jsx
@@ -4,12 +4,12 @@ import PropTypes from "prop-types";
 import { UserProfile } from "@/components/proptypes";
 import DynamicComponent from "@/components/DynamicComponent";
 import DynamicForm from "@/components/dynamic-form/DynamicForm";
+import UserGroups from "@/components/UserGroups";

 import User from "@/services/user";
 import { currentUser } from "@/services/auth";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";

-import UserGroups from "./UserGroups";
 import useUserGroups from "../hooks/useUserGroups";

 export default function UserInfoForm(props) {
--- a/client/app/services/dashboard.js
+++ b/client/app/services/dashboard.js
@@ -2,9 +2,9 @@ import _ from "lodash";
 import { axios } from "@/services/axios";
 import dashboardGridOptions from "@/config/dashboard-grid-options";
 import Widget from "./widget";
-import { currentUser } from "@/services/auth";
 import location from "@/services/location";
 import { cloneParameter } from "@/services/parameters";
+import { policy } from "@/services/policy";

 export const urlForDashboard = ({ id, slug }) => `dashboards/${id}-${slug}`;

@@ -179,7 +179,7 @@ Dashboard.prepareDashboardWidgets = prepareDashboardWidgets;
 Dashboard.prepareWidgetsForDashboard = prepareWidgetsForDashboard;

 Dashboard.prototype.canEdit = function canEdit() {
-  return currentUser.canEdit(this) || this.can_edit;
+  return policy.canEdit(this);
 };

 Dashboard.prototype.getParametersDefs = function getParametersDefs() {
--- a/client/app/services/policy/DefaultPolicy.js
+++ b/client/app/services/policy/DefaultPolicy.js
@@ -1,4 +1,4 @@
-import { isArray } from "lodash";
+import { get, isArray } from "lodash";
 import { currentUser, clientConfig } from "@/services/auth";

 /* eslint-disable class-methods-use-this */
@@ -57,4 +57,12 @@ export default class DefaultPolicy {
    const result = clientConfig.queryRefreshIntervals;
    return isArray(result) ? result : null;
  }
+
+  canEdit(object) {
+    return get(object, "can_edit", false);
+  }
+
+  canRun() {
+    return true;
+  }
 }
--- a/client/app/services/query.js
+++ b/client/app/services/query.js
@@ -24,6 +24,7 @@ import location from "@/services/location";
 import { Parameter, createParameter } from "./parameters";
 import { currentUser } from "./auth";
 import QueryResult from "./query-result";
+import localOptions from "@/lib/localOptions";

 Mustache.escape = identity; // do not html-escape values

@@ -50,6 +51,7 @@ export class Query {
    if (!has(this, "options")) {
      this.options = {};
    }
+    this.options.apply_auto_limit = !!this.options.apply_auto_limit;

    if (!isArray(this.options.parameters)) {
      this.options.parameters = [];
@@ -400,25 +402,10 @@ QueryService.newQuery = function newQuery() {
    name: "New Query",
    schedule: null,
    user: currentUser,
-    options: {},
+    options: { apply_auto_limit: localOptions.get("applyAutoLimit", true) },
    tags: [],
    can_edit: true,
  });
 };

-QueryService.format = function formatQuery(syntax, query) {
-  if (syntax === "json") {
-    try {
-      const formatted = JSON.stringify(JSON.parse(query), " ", 4);
-      return Promise.resolve(formatted);
-    } catch (err) {
-      return Promise.reject(String(err));
-    }
-  } else if (syntax === "sql") {
-    return axios.post("api/queries/format", { query }).then(data => data.query);
-  } else {
-    return Promise.reject("Query formatting is not supported for your data source syntax.");
-  }
-};
-
 extend(Query, QueryService);
--- a/client/cypress/integration/embed/share_embed_spec.js
+++ b/client/cypress/integration/embed/share_embed_spec.js
@@ -21,7 +21,6 @@ describe("Embedded Queries", () => {

          // check the feature is disabled
          cy.visit(`/queries/${query.id}/source`);
-          cy.getByTestId("ExecuteButton").click();
          cy.getByTestId("QueryPageVisualizationTabs", { timeout: 10000 }).should("exist");
          cy.getByTestId("QueryPageHeaderMoreButton").click();
          cy.get(".ant-dropdown-menu-item")
--- a/package-lock.json
+++ b/package-lock.json
@@ -5070,6 +5070,12 @@
      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
      "dev": true
    },
+    "@types/sql-formatter": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@types/sql-formatter/-/sql-formatter-2.3.0.tgz",
+      "integrity": "sha512-Xh9kEOaKWhm3vYD5lUjYFFiSfpN4y3/iQCJUAVwFaQ1rVvHs4WXTa5C8E7gyF3kxwsMS8KgttW7WBAPtFlsvAg==",
+      "dev": true
+    },
    "@typescript-eslint/eslint-plugin": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.10.0.tgz",
@@ -22960,6 +22966,13 @@
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
    },
+    "sql-formatter": {
+      "version": "git+https://github.com/getredash/sql-formatter.git#b61a6dce3b451e38e87090b0675a43be1638e5b6",
+      "from": "git+https://github.com/getredash/sql-formatter.git",
+      "requires": {
+        "lodash": "^4.16.0"
+      }
+    },
    "sshpk": {
      "version": "1.16.1",
      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
    "react-grid-layout": "^0.18.2",
    "react-resizable": "^1.10.1",
    "react-virtualized": "^9.21.2",
+    "sql-formatter": "git+https://github.com/getredash/sql-formatter.git",
    "universal-router": "^8.3.0",
    "use-debounce": "^3.1.0",
    "use-media": "^1.4.0"
@@ -94,6 +95,7 @@
    "@types/prop-types": "^15.7.3",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.8",
+    "@types/sql-formatter": "^2.3.0",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "atob": "^2.1.2",
--- a/viz-lib/src/visualizations/chart/Renderer/initChart.js
+++ b/viz-lib/src/visualizations/chart/Renderer/initChart.js
@@ -104,6 +104,8 @@ export default function initChart(container, options, data, additionalOptions, o
            }
          })
        );
+        options.onHover && container.on("plotly_hover", options.onHover);
+        options.onUnHover && container.on("plotly_unhover", options.onUnHover);

        unwatchResize = resizeObserver(
          container,