From aa3cd64f6d9f7c60bbb2ab59c6c2cb10f631a5f0 Mon Sep 17 00:00:00 2001 From: avey Date: Thu, 8 Jun 2023 19:06:12 +0800 Subject: [PATCH 1/8] Hide filter components when sharing --- client/app/components/Parameters.jsx | 41 ++++++++++++--- .../components/ShareDashboardDialog.jsx | 52 +++++++++++++------ client/app/services/notifications.js | 9 +++- 3 files changed, 78 insertions(+), 24 deletions(-) diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx index e7379c04ba..40a9da399a 100644 --- a/client/app/components/Parameters.jsx +++ b/client/app/components/Parameters.jsx @@ -43,12 +43,34 @@ export default class Parameters extends React.Component { appendSortableToParent: true, }; + toCamelCase = str => { + if (!str || str.length === 0) { + return ""; + } + return str.replace(/\s+/g, "").toLowerCase(); + }; + constructor(props) { super(props); - const { parameters } = props; - this.state = { parameters }; + + this.parameters = props.parameters; if (!props.disableUrlUpdate) { - updateUrl(parameters); + updateUrl(this.parameters); + } + + const hideRegex = /hide_filter=([^&]+)/g; + const matches = window.location.search.matchAll(hideRegex); + const hideValues = Array.from(matches, match => match[1]); + + if (hideValues.length > 0) { + this.parameters = this.parameters.map(param => { + for (let i = 0; i <= hideValues.length; i++) { + if (this.toCamelCase(hideValues[i]) === this.toCamelCase(param.name)) { + return { ...param, hidden: true }; + } + } + return param; + }); } } @@ -123,6 +145,10 @@ export default class Parameters extends React.Component { renderParameter(param, index) { const { editable } = this.props; + if (param.hidden) { + // 如果该参数被隐藏，则不进行渲染 + return null; + } return (
@@ -138,6 +164,7 @@ export default class Parameters extends React.Component { )}
+ (appendSortableToParent ? containerEl : document.body)} + helperContainer={containerEl => + appendSortableToParent ? containerEl : document.body} updateBeforeSortStart={this.onBeforeSortStart} onSortEnd={this.moveParameter} containerProps={{ className: "parameter-container", onKeyDown: dirtyParamCount ? this.handleKeyDown : null, }}> - {parameters.map((param, index) => ( + {this.parameters.map((param, index) => (
+
- {!this.props.hasOnlySafeQueries && ( + {!hasOnlySafeQueries && ( )} - - - - {dashboard.public_url && ( - - + + {this.enabled && ( + + )} + + {dashboard.public_url && ( + <> + + + Custom rule for hiding filter components when sharing links: +
+ You can hide filter components by appending `&hide_filter={"{{"} component_name{"}}"}` to thesharing URL. +
+ Example: http://{"{{"}ip{"}}"}:{"{{"}port{"}}"}/public/dashboards/{"{{"}id{"}}"}?p_country=ghana&p_site=10&hide_filter=country +
+ } + type="warning" + /> + + + + + + + )} ); diff --git a/client/app/services/notifications.js b/client/app/services/notifications.js index 6999471e7f..392923d0de 100644 --- a/client/app/services/notifications.js +++ b/client/app/services/notifications.js @@ -5,7 +5,14 @@ import redashIconUrl from "@/assets/images/redash_icon_small.png"; const logger = debug("redash:notifications"); -const Notification = window.Notification || null; +const Notification = null; +if ("Notification" in window) { + + Notification = window.Notification || null; +} else { + +} + if (!Notification) { logger("HTML5 notifications are not supported."); } From 6e667d99a35f342c0c1c9ec413ca59844caed5ca Mon Sep 17 00:00:00 2001 From: laijinquan Date: Fri, 9 Jun 2023 11:26:21 +0800 Subject: [PATCH 2/8] code review, optimization --- client/app/components/Parameters.jsx | 24 +++++++++--------------- client/app/services/notifications.js | 9 +-------- 2 files changed, 10 insertions(+), 23 deletions(-) diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx index 40a9da399a..321c6d9901 100644 --- a/client/app/components/Parameters.jsx +++ b/client/app/components/Parameters.jsx @@ -1,4 +1,4 @@ -import { size, filter, forEach, extend } from "lodash"; +import { size, filter, forEach, extend,isEmpty } from "lodash"; import React from "react"; import PropTypes from "prop-types"; import { SortableContainer, SortableElement, DragHandle } from "@redash/viz/lib/components/sortable"; @@ -44,36 +44,31 @@ export default class Parameters extends React.Component { }; toCamelCase = str => { - if (!str || str.length === 0) { + if (isEmpty(str)) { return ""; } return str.replace(/\s+/g, "").toLowerCase(); }; - constructor(props) { - super(props); - - this.parameters = props.parameters; - if (!props.disableUrlUpdate) { + constructor({ parameters, disableUrlUpdate }) { + super(); + this.parameters = parameters; + if (!disableUrlUpdate) { updateUrl(this.parameters); } - const hideRegex = /hide_filter=([^&]+)/g; const matches = window.location.search.matchAll(hideRegex); const hideValues = Array.from(matches, match => match[1]); - if (hideValues.length > 0) { this.parameters = this.parameters.map(param => { - for (let i = 0; i <= hideValues.length; i++) { - if (this.toCamelCase(hideValues[i]) === this.toCamelCase(param.name)) { - return { ...param, hidden: true }; - } + if (hideValues.some(value => this.toCamelCase(value) === this.toCamelCase(param.name))) { + return { ...param, hidden: true }; } return param; }); } } - + componentDidUpdate = prevProps => { const { parameters, disableUrlUpdate } = this.props; const parametersChanged = prevProps.parameters !== parameters; @@ -146,7 +141,6 @@ export default class Parameters extends React.Component { renderParameter(param, index) { const { editable } = this.props; if (param.hidden) { - // 如果该参数被隐藏，则不进行渲染 return null; } return ( diff --git a/client/app/services/notifications.js b/client/app/services/notifications.js index 392923d0de..6999471e7f 100644 --- a/client/app/services/notifications.js +++ b/client/app/services/notifications.js @@ -5,14 +5,7 @@ import redashIconUrl from "@/assets/images/redash_icon_small.png"; const logger = debug("redash:notifications"); -const Notification = null; -if ("Notification" in window) { - - Notification = window.Notification || null; -} else { - -} - +const Notification = window.Notification || null; if (!Notification) { logger("HTML5 notifications are not supported."); } From ae65a397b18d923fd94e2d79b9424a4d84dc4012 Mon Sep 17 00:00:00 2001 From: ljl Date: Mon, 12 Jun 2023 09:53:33 +0800 Subject: [PATCH 3/8] Code optimization --- client/app/components/Parameters.jsx | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx index 321c6d9901..86978e2edf 100644 --- a/client/app/components/Parameters.jsx +++ b/client/app/components/Parameters.jsx @@ -50,24 +50,18 @@ export default class Parameters extends React.Component { return str.replace(/\s+/g, "").toLowerCase(); }; - constructor({ parameters, disableUrlUpdate }) { - super(); - this.parameters = parameters; + constructor(props) { + super(props); + const { parameters, disableUrlUpdate } = props; + this.state = { parameters }; if (!disableUrlUpdate) { - updateUrl(this.parameters); + updateUrl(parameters); } const hideRegex = /hide_filter=([^&]+)/g; const matches = window.location.search.matchAll(hideRegex); - const hideValues = Array.from(matches, match => match[1]); - if (hideValues.length > 0) { - this.parameters = this.parameters.map(param => { - if (hideValues.some(value => this.toCamelCase(value) === this.toCamelCase(param.name))) { - return { ...param, hidden: true }; - } - return param; - }); - } + this.hideValues = Array.from(matches, match => match[1]); } + componentDidUpdate = prevProps => { const { parameters, disableUrlUpdate } = this.props; @@ -139,10 +133,10 @@ export default class Parameters extends React.Component { }; renderParameter(param, index) { - const { editable } = this.props; - if (param.hidden) { + if (this.hideValues.some(value => this.toCamelCase(value) === this.toCamelCase(param.name))) { return null; } + const { editable } = this.props; return (
From 07ed663916a72121d1416d15afe164f10c930d8f Mon Sep 17 00:00:00 2001 From: ljl Date: Mon, 12 Jun 2023 11:18:07 +0800 Subject: [PATCH 4/8] Code optimization --- client/app/components/Parameters.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx index 86978e2edf..12d97ae35e 100644 --- a/client/app/components/Parameters.jsx +++ b/client/app/components/Parameters.jsx @@ -63,7 +63,7 @@ export default class Parameters extends React.Component { } - componentDidUpdate = prevProps => { + componentDidUpdate(prevProps) { const { parameters, disableUrlUpdate } = this.props; const parametersChanged = prevProps.parameters !== parameters; const disableUrlUpdateChanged = prevProps.disableUrlUpdate !== disableUrlUpdate; @@ -166,8 +166,9 @@ export default class Parameters extends React.Component { } render() { + const { parameters } = this.state; const { sortable, appendSortableToParent } = this.props; - const dirtyParamCount = size(filter(this.parameters, "hasPendingValue")); + const dirtyParamCount = size(filter(parameters, "hasPendingValue")); return ( - {this.parameters.map((param, index) => ( + {parameters && parameters.map((param, index) => (
Date: Mon, 12 Jun 2023 11:49:58 +0800 Subject: [PATCH 5/8] Code optimization --- client/app/components/Parameters.jsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx index 6321d4b37f..f384f3f953 100644 --- a/client/app/components/Parameters.jsx +++ b/client/app/components/Parameters.jsx @@ -46,7 +46,6 @@ export default class Parameters extends React.Component { toCamelCase = str => { if (isEmpty(str)) { return ""; - } return str.replace(/\s+/g, "").toLowerCase(); }; @@ -63,9 +62,7 @@ export default class Parameters extends React.Component { this.hideValues = Array.from(matches, match => match[1]); } - - componentDidUpdate(prevProps) { - + componentDidUpdate = prevProps => { const { parameters, disableUrlUpdate } = this.props; const parametersChanged = prevProps.parameters !== parameters; const disableUrlUpdateChanged = prevProps.disableUrlUpdate !== disableUrlUpdate; @@ -171,9 +168,9 @@ export default class Parameters extends React.Component { } render() { + const { parameters } = this.state; const { sortable, appendSortableToParent } = this.props; - const dirtyParamCount = size(filter(this.parameters, "hasPendingValue")); - + const dirtyParamCount = size(filter(parameters, "hasPendingValue")); return ( - {parameters && parameters.map((param, index) => ( -
Date: Tue, 13 Jun 2023 13:38:31 +0800 Subject: [PATCH 6/8] Code optimization --- client/app/components/Parameters.jsx | 11 ++-- .../components/ShareDashboardDialog.jsx | 52 ++++++------------- 2 files changed, 19 insertions(+), 44 deletions(-) diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx index 6321d4b37f..f384f3f953 100644 --- a/client/app/components/Parameters.jsx +++ b/client/app/components/Parameters.jsx @@ -46,7 +46,6 @@ export default class Parameters extends React.Component { toCamelCase = str => { if (isEmpty(str)) { return ""; - } return str.replace(/\s+/g, "").toLowerCase(); }; @@ -63,9 +62,7 @@ export default class Parameters extends React.Component { this.hideValues = Array.from(matches, match => match[1]); } - - componentDidUpdate(prevProps) { - + componentDidUpdate = prevProps => { const { parameters, disableUrlUpdate } = this.props; const parametersChanged = prevProps.parameters !== parameters; const disableUrlUpdateChanged = prevProps.disableUrlUpdate !== disableUrlUpdate; @@ -171,9 +168,9 @@ export default class Parameters extends React.Component { } render() { + const { parameters } = this.state; const { sortable, appendSortableToParent } = this.props; - const dirtyParamCount = size(filter(this.parameters, "hasPendingValue")); - + const dirtyParamCount = size(filter(parameters, "hasPendingValue")); return ( - {parameters && parameters.map((param, index) => ( -
+
- {!hasOnlySafeQueries && ( + {!this.props.hasOnlySafeQueries && ( )} - - {this.enabled && ( - - - - )} - + + + {dashboard.public_url && ( - <> - - - Custom rule for hiding filter components when sharing links: -
- You can hide filter components by appending `&hide_filter={"{{"} component_name{"}}"}` to thesharing URL. -
- Example: http://{"{{"}ip{"}}"}:{"{{"}port{"}}"}/public/dashboards/{"{{"}id{"}}"}?p_country=ghana&p_site=10&hide_filter=country -
- } - type="warning" - /> - - - - - - + + + )} From 6496cc079f7db0c828e59e66fbcb3c2d772fa1d0 Mon Sep 17 00:00:00 2001 From: ljl Date: Tue, 13 Jun 2023 14:32:04 +0800 Subject: [PATCH 7/8] Code optimization --- .../components/ShareDashboardDialog.jsx | 55 +++++++++++++------ 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/client/app/pages/dashboards/components/ShareDashboardDialog.jsx b/client/app/pages/dashboards/components/ShareDashboardDialog.jsx index 838e9e30ea..24484c70e5 100644 --- a/client/app/pages/dashboards/components/ShareDashboardDialog.jsx +++ b/client/app/pages/dashboards/components/ShareDashboardDialog.jsx @@ -94,12 +94,12 @@ class ShareDashboardDialog extends React.Component { }; render() { - const { dialog, dashboard } = this.props; - + const { dialog, dashboard, hasOnlySafeQueries } = this.props; + const headerContent = this.constructor.headerContent; return ( - +
- {!this.props.hasOnlySafeQueries && ( + {!hasOnlySafeQueries && ( )} - - - - {dashboard.public_url && ( - - + + {this.enabled && ( + + )} + + {dashboard.public_url && ( + <> + + + Custom rule for hiding filter components when sharing links: +
+ You can hide filter components by appending `&hide_filter={"{{"} component_name{"}}"}` to thesharing URL. +
+ Example: http://{"{{"}ip{"}}"}:{"{{"}port{"}}"}/public/dashboards/{"{{"}id{"}}"}?p_country=ghana&p_site=10&hide_filter=country +
+ } + type="warning" + /> + + + + + + + )} ); } } -export default wrapDialog(ShareDashboardDialog); +export default wrapDialog(ShareDashboardDialog); \ No newline at end of file From e1d118e12c838233ddcc63641f40599e11446914 Mon Sep 17 00:00:00 2001 From: ljl Date: Tue, 13 Jun 2023 15:27:35 +0800 Subject: [PATCH 8/8] Code optimization --- .../components/ShareDashboardDialog.jsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/client/app/pages/dashboards/components/ShareDashboardDialog.jsx b/client/app/pages/dashboards/components/ShareDashboardDialog.jsx index 24484c70e5..7d8e6d5939 100644 --- a/client/app/pages/dashboards/components/ShareDashboardDialog.jsx +++ b/client/app/pages/dashboards/components/ShareDashboardDialog.jsx @@ -108,18 +108,15 @@ class ShareDashboardDialog extends React.Component { )} - {this.enabled && ( - - - - )} - + + + {dashboard.public_url && ( <>