From fa7ecca485b0a69887509711c3997cde5a3fc955 Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Tue, 10 Nov 2020 09:59:15 -0300
Subject: [PATCH] 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
---
 Dockerfile                                    |  11 +-
 client/.eslintrc.js                           |  12 ++-
 .../app/assets/images/db-logos/databricks.png | Bin 2562 -> 2884 bytes
 client/app/assets/less/redash/query.less      |   1 +
 .../ApplicationLayout/index.jsx               |  26 ++---
 .../ApplicationArea/ErrorMessage.jsx          |   2 +-
 client/app/components/HelpTrigger.jsx         |  29 +++---
 client/app/components/Link.jsx                |   2 +-
 .../users => }/components/UserGroups.jsx      |  14 +--
 client/app/components/UserGroups.less         |   7 ++
 .../dynamic-parameters/DynamicButton.less     |   6 ++
 .../DynamicDateRangePicker.jsx                |   4 +-
 .../dynamic-parameters/DynamicParameters.less |   3 +-
 .../components/empty-state/EmptyState.d.ts    |   7 +-
 .../app/components/empty-state/EmptyState.jsx |  66 +++++++-----
 .../components/empty-state/empty-state.less   |  21 ++++
 .../items-list/components/ItemsTable.jsx      |  20 +++-
 .../components/queries/ApiKeyDialog/index.jsx |   3 +-
 .../app/components/queries/SchemaBrowser.jsx  |  29 ++++--
 .../databricks/DatabricksSchemaBrowser.jsx    |   4 -
 .../databricks/useDatabricksSchema.js         |  42 ++++++--
 client/app/lib/queryFormat.test.js            |  56 +++++++++++
 client/app/lib/queryFormat.ts                 |  23 +++++
 client/app/lib/utils.js                       |  52 ++++++++--
 client/app/pages/alert/AlertEdit.jsx          |   2 +
 client/app/pages/alert/AlertView.jsx          |   2 +
 .../dashboards/components/DashboardHeader.jsx |   2 +-
 .../pages/dashboards/hooks/useDashboard.js    |   3 +-
 client/app/pages/home/Home.jsx                |  95 +-----------------
 .../pages/home/components/FavoritesList.jsx   |  94 +++++++++++++++++
 client/app/pages/queries/QuerySource.jsx      |  24 ++++-
 client/app/pages/queries/QueryView.jsx        |  40 ++++----
 .../queries/components/QueryPageHeader.jsx    |   6 +-
 .../queries/components/QuerySourceAlerts.jsx  |  11 +-
 .../components/QueryVisualizationTabs.jsx     |   9 +-
 .../pages/queries/hooks/useAutoLimitFlags.js  |   8 +-
 .../app/pages/queries/hooks/useFormatQuery.js |  19 ----
 client/app/pages/queries/hooks/useQuery.js    |   9 +-
 .../app/pages/queries/hooks/useQueryFlags.js  |   4 +-
 .../pages/queries/hooks/useUpdateQuery.jsx    |   4 +-
 .../pages/settings/OrganizationSettings.jsx   |  80 +++------------
 .../AuthSettings/PasswordLoginSettings.jsx    |  33 +++---
 .../components/AuthSettings/SAMLSettings.jsx  |  21 ++--
 .../GeneralSettings/BeaconConsentSettings.jsx |  21 ++--
 .../GeneralSettings/FeatureFlagsSettings.jsx  |  65 +++++++-----
 .../GeneralSettings/FormatSettings.jsx        |  43 ++++----
 .../GeneralSettings/PlotlySettings.jsx        |  19 ++--
 .../pages/settings/components/prop-types.js   |   2 +
 .../settings/hooks/useOrganizationSettings.js |  59 +++++++++++
 .../users/components/ReadOnlyUserProfile.jsx  |   2 +-
 .../pages/users/components/UserInfoForm.jsx   |   2 +-
 client/app/services/dashboard.js              |   4 +-
 client/app/services/policy/DefaultPolicy.js   |  10 +-
 client/app/services/query.js                  |  19 +---
 .../integration/embed/share_embed_spec.js     |   1 -
 package-lock.json                             |  13 +++
 package.json                                  |   2 +
 .../chart/Renderer/initChart.js               |   2 +
 58 files changed, 746 insertions(+), 424 deletions(-)
 rename client/app/{pages/users => }/components/UserGroups.jsx (50%)
 create mode 100644 client/app/components/UserGroups.less
 create mode 100644 client/app/lib/queryFormat.test.js
 create mode 100644 client/app/lib/queryFormat.ts
 create mode 100644 client/app/pages/home/components/FavoritesList.jsx
 delete mode 100644 client/app/pages/queries/hooks/useFormatQuery.js
 create mode 100644 client/app/pages/settings/hooks/useOrganizationSettings.js

diff --git a/Dockerfile b/Dockerfile
index af53138cc..f213d86e5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -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
 
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 5ace51067..c0e54dcb7 100644
--- 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.",
+          },
+        ],
       },
     ],
   },
diff --git a/client/app/assets/images/db-logos/databricks.png b/client/app/assets/images/db-logos/databricks.png
index 7624f2adcff64f262f72c71a4fe8cbecbf29ba05..e28eb9212fc417d78926ada2ab8053f8d9586092 100644
GIT binary patch
literal 2884
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
GE%tv<)o)z@

literal 2562
zcmcgu`9IT*1OKEP%_Ax+kIYd?Bt$t{EJxw#aU{n)jC43MN2X__ZF)pPBII$*9J$7t
zTa+z26pw4n&C0zE<FV1kwy*C$@w{H|<EQuQ_5R`g!~2=DqpciB83X`;oV}fm%dQju
zPZ^0_ty8q7@7kS*uJA|~KeT#yM3{dN@~(PhbogEMpzz4s01!29-rg-2ds#;E1Jn)P
zu~${r>wxG`nCdd@lxluD8*A)o;WKk(cJ9DmKbb>v#)q8iN-_p6O?FJyb$rRegL56_
zyUpCcNzF-?zfwHoqTjj&0Q)`dZ7f}*d{*#YfhulFvEnI*P5<O<<;tXr(@8WJ#fHGj
zq)kiLisnH3KqM*X7OgD4$%XMq5osChLL0Wb;F?+3B%gE>Tns0lZZCDIR802?T++NS
zHnkkO`7@l>GoE7>;2+_?@XwBT>+hDdxe2q4l`(vd((PYlsz2R5qi{WeTk@Yls!{Y?
z=$w_uMEskk-$HGgLeD?@@xIoJH@CjC3Mq{vj9_1SZ^Hi!aoQPY$4^|5ixiA~it-B+
z&uOXE(dIOhZ+&xRF~K=*_}cCTI1+NffT^FIB%J`-i$U)Aw*OIUhB69n9qi64I;Rak
zt9*07SFmuiNZeD26TKptI?N;-Gr}Lskk`#1DTNl3sV|Rx<4pSSg(kDbaKo(7P|4Vt
zev8=_08l<M{a`GC^lXB2UN1@N`f%9tyN4{VK2h$$6S)FOjFxFxd8$f56#GHd{o^m)
zl+1+lF6$qh*V_>Ejl~q%mHYw8ECuRJ7grW?o!DW=^zaWICKuHx92EMbOsw{*|2WPS
zw7oGVZ>i~O4ELS-k{lPa6Ww=86+!DEF|$@2ZI41^%CTRP)NtR$EuPay`Wi0l`ZraU
zJ#oVE`@<<)a*~+E1D;_2k&vMGV$1ro4^I9rXj_7!6RT?0S7YiCd9HZ$B~29pZ&{xo
zMsL)fj(pB^ap*@-8#r}{Jmn+0h7&_tuL;^q-to%p0OY?Poc#(%7AdHwZ$U=E!=<lG
zg5mMGtfO2!h0rNWbqeQ0)q>!A$C-qS5vEjB41a`>lKf~DiiW#sFteQ@=6FU6qM3rS
z#el!Otc+wQ=Va*znRo{k6C6^G!X8rJau6Zgy^yR)yP%)lTvW*TCazy#O-K9eMj_Nz
z?Ft=a8tJ=6(K7Tw4JrV{S<zb+8{8ixjWwD-{s$}-%_SgO`{&A^MYTqkE?`W&x=LsI
zDIMPn1Y0s5nC*Ar$DCyTT{6)e98UKXMmWb6EgHBB1j&!YdGs4vcd7)IX-A_!zto<U
zm*sGjy@be<<W}O`RlUfD6zXQusnxxzJ7X<Id_<T7_C8QX{8IW&I{WT$q*f?}jvP$8
zZXSJ!(M&r3$hpQ*Jr0*9FuT#2y0G1ph1==9<9WOQ8*ybJzOnYqVverd-bRWM=GjP`
zE3ABHV~bA-xq%Y~c`N1_nbg;rPfaS<q4)S>JWky24q4u5VdV^rJ2|tZEu`1@qK<-Q
zwpjbZ%m%sp&(Pm3b^>LH&ZFq{Xos9lUS(&2%5H06H>3^g*y5`6s53%pEmd-?fON4B
zaE~~_hmbu)Uw=J{Fx-YVv3{k6r8a=-r}B8Y;(+RhtS5IFnlqKQ*#X1VRRp1?@KA?K
z{0t@7`~As@wy~c_61WpqY@JLVqA3P7Yrd5eVlP-J@dJ;uq3vWF0bYaeJ=&?0xrq?)
zjhO*QMtM#U=pRZ;w?F^ItQ<&UEipSThdH~Q&ZQc$p?gMo1We#SgVj^<+snj$1jF+>
z#2izEkz@rCu34-#!jQvjm7stD^wnxdzfm4)*=F#Uls&Oe-Avh(ZMBYAO`%c6#n+~*
zL}z;jJx$*AY*kOw#t{b|$~)g#c5hn-0duc)C={Hu$N^klz)GXbMs0(I-($c!9B6x<
zVtLGl1cJLUFdY#Ud2!UxT{JHp;I?#)abI~Ao)*NZrJ8X1?Zopjuvh=AYCDi}boQ;0
zI4Yc;+vf-6)y*R_)e?d4z6|Z?6T|}$9_kZhk^4z|I`1G^kb2G`H71oJFq^?u&FVBz
zunh@=F{mX5S|W0!@1Pt}FJa00BYz5-5_4@bBCn(>WT@b^gocV>zCOk=Bgxn6Z8L#$
z)`F~EPaJHAC|S|b5?00H<M-rEDJDR;an#p@<F+Fa+46GMw`n3y^{X`IVg<=++s^vr
zL~Xlh2Z2dEujgZk_M#$Xc}vB<(MTxC>fF8UUhe!gHU3+c>6r6!VA$37rc-~f%Hc(|
zue63HLER+^H{N;uc&=-}I?4cbGv!?9s%13G&p`~&sjtOS7D6C=-5vh9$Z}(l$jLCE
zy$+v3-%4XGCh9-lEC&UMX_dBu`M9q1k32QQqT#;uNp-qkr@i#r`1DYLDRR2vmu(YF
zk6$%+#e?6>FcANw$LZ_?Z~{FGaqF_+?6=YvYi;S+;78R~H-<Lx%;#NpRD~~aY)7+B
zzGVo*lTnevo#>$Ia0@y6eDySi2i96a<}7HvL%D_!NU<zMZtbufz!I@&j27??D{7QA
zJ{P(nzVQ6#nU(`p3SF8&&9(qFjh3iklf_><djmaR)U{ZN7AK<STiDPuIxXqz9wQ?!
z)GBrt=9Bob@$;>FRsEoMm;g?2zB|>3DIFejQv1CUS(Tan34*wITD7*H=@F%x<(<TC
z0IhKGC9+SmdT(i;v=ajASQU2Ul?hyaT(M5(dp(E`sc56bH*Q!SAgT?U<mtFhqjO<1
zPO?H3zV*2fi>_~OU?K;qiA(Mbd`&3Xv~2s6r~qVc;pwv&x`jJ-Gq9X68vvHL+_3E!
zTPENmQwl*4*xWUEe6~U@<#1t@DEagoE9OV=oo2B?F^;jn9|5xsvG;T<iZinX=BaM#
zPpo0Ko?t_%S~v#W%f+|V$a^sM%Vc0vcXZh`pgkXg7}{rE7ValtWqKcXc@(HVxdDsq
zJ5f`&k?Q{h4(nu#{(UHJKlD(jqMzyrv&}9{OvI+vp-`7Ye!$Xc^2Yu?r3?GW8l4+G
z<A=?Jz?;qx{a*Fl!wy1~ZMr|MC-LB2p$aqq5>O%dT_e)Q7iJrN)#S6IrVXGguyl{V
zP&|T`Fknh6c=)+)I|3JlD!18J-g5S-)BAq7$p8bZ&^;Br!}rHPHklg2ivIw7d0M{Q
W*UnH)#O|pB?5{Z5ys^6Z*Z%+pZck+Z

diff --git a/client/app/assets/less/redash/query.less b/client/app/assets/less/redash/query.less
index f65d3bbc7..03f740040 100644
--- 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 {
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/index.jsx b/client/app/components/ApplicationArea/ApplicationLayout/index.jsx
index c89806d3d..78f5663c0 100644
--- 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>
   );
 }
diff --git a/client/app/components/ApplicationArea/ErrorMessage.jsx b/client/app/components/ApplicationArea/ErrorMessage.jsx
index f31cb2f93..733444f4b 100644
--- 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" />
diff --git a/client/app/components/HelpTrigger.jsx b/client/app/components/HelpTrigger.jsx
index a991b1a3d..c2d4c642c 100644
--- 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"
diff --git a/client/app/components/Link.jsx b/client/app/components/Link.jsx
index 2cd700976..1b5ea3dcc 100644
--- 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) {
diff --git a/client/app/pages/users/components/UserGroups.jsx b/client/app/components/UserGroups.jsx
similarity index 50%
rename from client/app/pages/users/components/UserGroups.jsx
rename to client/app/components/UserGroups.jsx
index 5f0c6d28d..4cefe8087 100644
--- a/client/app/pages/users/components/UserGroups.jsx
+++ b/client/app/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,
 };
diff --git a/client/app/components/UserGroups.less b/client/app/components/UserGroups.less
new file mode 100644
index 000000000..03e432c36
--- /dev/null
+++ b/client/app/components/UserGroups.less
@@ -0,0 +1,7 @@
+.user-groups {
+  margin: -5px 0 0 -5px;
+
+  .ant-tag {
+    margin: 5px 0 0 5px;
+  }
+}
diff --git a/client/app/components/dynamic-parameters/DynamicButton.less b/client/app/components/dynamic-parameters/DynamicButton.less
index 4bff173af..8ffa8aa58 100644
--- 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;
+}
diff --git a/client/app/components/dynamic-parameters/DynamicDateRangePicker.jsx b/client/app/components/dynamic-parameters/DynamicDateRangePicker.jsx
index b15a7b65b..cea63bb02 100644
--- 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}
diff --git a/client/app/components/dynamic-parameters/DynamicParameters.less b/client/app/components/dynamic-parameters/DynamicParameters.less
index 5ef4c1d92..641c11b16 100644
--- 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;
       }
 
diff --git a/client/app/components/empty-state/EmptyState.d.ts b/client/app/components/empty-state/EmptyState.d.ts
index e94463cf4..12e1e1751 100644
--- 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;
 }
 
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index 9d86bd961..ff911e4a4 100644
--- 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,
diff --git a/client/app/components/empty-state/empty-state.less b/client/app/components/empty-state/empty-state.less
index 9aa03201a..4be63f8e1 100644
--- 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;
+    }
+  }
+}
diff --git a/client/app/components/items-list/components/ItemsTable.jsx b/client/app/components/items-list/components/ItemsTable.jsx
index 870aabf37..87e41ed18 100644
--- 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}
       />
     );
diff --git a/client/app/components/queries/ApiKeyDialog/index.jsx b/client/app/components/queries/ApiKeyDialog/index.jsx
index 2d52056ba..b666833bf 100644
--- 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>
diff --git a/client/app/components/queries/SchemaBrowser.jsx b/client/app/components/queries/SchemaBrowser.jsx
index 6fcf623c5..062947b92 100644
--- 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>
               );
             })
diff --git a/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx b/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx
index 5c4db2874..741b2455f 100644
--- 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)) {
diff --git a/client/app/components/queries/editor-components/databricks/useDatabricksSchema.js b/client/app/components/queries/editor-components/databricks/useDatabricksSchema.js
index 157e28255..872e147db 100644
--- 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(() => {
diff --git a/client/app/lib/queryFormat.test.js b/client/app/lib/queryFormat.test.js
new file mode 100644
index 000000000..646469a08
--- /dev/null
+++ 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);
+    });
+  });
+});
diff --git a/client/app/lib/queryFormat.ts b/client/app/lib/queryFormat.ts
new file mode 100644
index 000000000..f890f58ca
--- /dev/null
+++ 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);
+}
diff --git a/client/app/lib/utils.js b/client/app/lib/utils.js
index 4e345a332..51b15fda7 100644
--- 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) {
diff --git a/client/app/pages/alert/AlertEdit.jsx b/client/app/pages/alert/AlertEdit.jsx
index 662c47cc2..b440ab448 100644
--- 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
diff --git a/client/app/pages/alert/AlertView.jsx b/client/app/pages/alert/AlertView.jsx
index b63682977..2742da8af 100644
--- 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" />
diff --git a/client/app/pages/dashboards/components/DashboardHeader.jsx b/client/app/pages/dashboards/components/DashboardHeader.jsx
index 555b8255f..c28051a85 100644
--- 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>
diff --git a/client/app/pages/dashboards/hooks/useDashboard.js b/client/app/pages/dashboards/hooks/useDashboard.js
index 95f12b94e..b8ee116eb 100644
--- 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 &&
diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index 727d583f3..2446f8e17 100644
--- 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");
diff --git a/client/app/pages/home/components/FavoritesList.jsx b/client/app/pages/home/components/FavoritesList.jsx
new file mode 100644
index 000000000..4ef40f791
--- /dev/null
+++ 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>
+  );
+}
diff --git a/client/app/pages/queries/QuerySource.jsx b/client/app/pages/queries/QuerySource.jsx
index 00bf2f02c..1486c0278 100644
--- 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={
diff --git a/client/app/pages/queries/QueryView.jsx b/client/app/pages/queries/QueryView.jsx
index fe6927281..6c6913be5 100644
--- 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">
diff --git a/client/app/pages/queries/components/QueryPageHeader.jsx b/client/app/pages/queries/components/QueryPageHeader.jsx
index bfee83984..6058936ac 100644
--- 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,
diff --git a/client/app/pages/queries/components/QuerySourceAlerts.jsx b/client/app/pages/queries/components/QuerySourceAlerts.jsx
index f4128a8c3..eb00df4b7 100644
--- 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>
   );
diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.jsx b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
index 076b61ec9..13b29de98 100644
--- 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,
 };
diff --git a/client/app/pages/queries/hooks/useAutoLimitFlags.js b/client/app/pages/queries/hooks/useAutoLimitFlags.js
index 37b3b5014..203ffbbc1 100644
--- 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];
diff --git a/client/app/pages/queries/hooks/useFormatQuery.js b/client/app/pages/queries/hooks/useFormatQuery.js
deleted file mode 100644
index a7b53be5c..000000000
--- a/client/app/pages/queries/hooks/useFormatQuery.js
+++ /dev/null
@@ -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]);
-}
diff --git a/client/app/pages/queries/hooks/useQuery.js b/client/app/pages/queries/hooks/useQuery.js
index 362e1c277..1bfaee8b7 100644
--- 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]
   );
 }
diff --git a/client/app/pages/queries/hooks/useQueryFlags.js b/client/app/pages/queries/hooks/useQueryFlags.js
index cb4318ddc..bea969cb2 100644
--- 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"),
diff --git a/client/app/pages/queries/hooks/useUpdateQuery.jsx b/client/app/pages/queries/hooks/useUpdateQuery.jsx
index 779b265c0..8c70f0564 100644
--- 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);
diff --git a/client/app/pages/settings/OrganizationSettings.jsx b/client/app/pages/settings/OrganizationSettings.jsx
index 45e31337c..bc1e5c82b 100644
--- 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>
   );
diff --git a/client/app/pages/settings/components/AuthSettings/PasswordLoginSettings.jsx b/client/app/pages/settings/components/AuthSettings/PasswordLoginSettings.jsx
index 74d731413..01c9979d8 100644
--- 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>
   );
diff --git a/client/app/pages/settings/components/AuthSettings/SAMLSettings.jsx b/client/app/pages/settings/components/AuthSettings/SAMLSettings.jsx
index 7530d8436..dd8f8af01 100644
--- 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 && (
         <>
diff --git a/client/app/pages/settings/components/GeneralSettings/BeaconConsentSettings.jsx b/client/app/pages/settings/components/GeneralSettings/BeaconConsentSettings.jsx
index a52d181d0..9dd998f4f 100644
--- 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>
   );
diff --git a/client/app/pages/settings/components/GeneralSettings/FeatureFlagsSettings.jsx b/client/app/pages/settings/components/GeneralSettings/FeatureFlagsSettings.jsx
index 1b5f78b01..72568d87b 100644
--- 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>
   );
diff --git a/client/app/pages/settings/components/GeneralSettings/FormatSettings.jsx b/client/app/pages/settings/components/GeneralSettings/FormatSettings.jsx
index 10a34dcc4..80c8b3083 100644
--- 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>
   );
diff --git a/client/app/pages/settings/components/GeneralSettings/PlotlySettings.jsx b/client/app/pages/settings/components/GeneralSettings/PlotlySettings.jsx
index 11ffb02cd..aef22e966 100644
--- 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>
   );
diff --git a/client/app/pages/settings/components/prop-types.js b/client/app/pages/settings/components/prop-types.js
index 98f01291b..f5d13c4bf 100644
--- 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,
 };
diff --git a/client/app/pages/settings/hooks/useOrganizationSettings.js b/client/app/pages/settings/hooks/useOrganizationSettings.js
new file mode 100644
index 000000000..6ad3d038c
--- /dev/null
+++ 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 };
+}
diff --git a/client/app/pages/users/components/ReadOnlyUserProfile.jsx b/client/app/pages/users/components/ReadOnlyUserProfile.jsx
index 27aa468db..d2474814e 100644
--- 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 }) {
diff --git a/client/app/pages/users/components/UserInfoForm.jsx b/client/app/pages/users/components/UserInfoForm.jsx
index 01e57ea37..1bdbcc677 100644
--- 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) {
diff --git a/client/app/services/dashboard.js b/client/app/services/dashboard.js
index d2f1806fa..261be9085 100644
--- 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() {
diff --git a/client/app/services/policy/DefaultPolicy.js b/client/app/services/policy/DefaultPolicy.js
index 58a594013..368be23f7 100644
--- 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;
+  }
 }
diff --git a/client/app/services/query.js b/client/app/services/query.js
index 368152a7d..a8cf624cb 100644
--- 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);
diff --git a/client/cypress/integration/embed/share_embed_spec.js b/client/cypress/integration/embed/share_embed_spec.js
index 91a1858a3..7928aa5b1 100644
--- 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")
diff --git a/package-lock.json b/package-lock.json
index ba65138a4..d0e50aacf 100644
--- 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",
diff --git a/package.json b/package.json
index 8f256629d..4e06bebac 100644
--- 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",
diff --git a/viz-lib/src/visualizations/chart/Renderer/initChart.js b/viz-lib/src/visualizations/chart/Renderer/initChart.js
index e88d5fd99..29795b48d 100644
--- 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,