You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by er...@apache.org on 2020/11/30 17:17:12 UTC
[incubator-superset] branch master updated: fix: Download as image
not working on Dashboard view (#11778)
This is an automated email from the ASF dual-hosted git repository.
erikrit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 5ebc09b fix: Download as image not working on Dashboard view (#11778)
5ebc09b is described below
commit 5ebc09b33923eb16bcaf4f4c6663e768fa2c970f
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Mon Nov 30 18:16:38 2020 +0100
fix: Download as image not working on Dashboard view (#11778)
* Fix download as image not working on Dashboard view
* Fix menu not closing before making a screenshot
* Move hardcoded selectors to variables
* Fix linting issue
* Add comments
* Close menu before taking a screenshot on Explore view
* Use style.visibility instead of timeout to hide menu for screenshot
* Change const name to uppercase
* Move variable declarations to case
---
superset-frontend/src/common/components/index.tsx | 1 +
.../dashboard/components/HeaderActionsDropdown.jsx | 26 +++++++++++++++++++---
.../dashboard/components/SliceHeaderControls.jsx | 20 ++++++++++++++---
.../src/explore/components/DisplayQueryButton.jsx | 4 ++++
4 files changed, 45 insertions(+), 6 deletions(-)
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
index a9bad8e..cb11a6f 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/common/components/index.tsx
@@ -61,6 +61,7 @@ export const MenuItem = styled(AntdMenu.Item)`
display: inline-block;
width: 100%;
}
+ transition-duration: 0s;
}
`;
diff --git a/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx b/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx
index ac592af..b18056d 100644
--- a/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx
+++ b/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx
@@ -87,6 +87,8 @@ const DropdownButton = styled.div`
margin-left: ${({ theme }) => theme.gridUnit * 2.5}px;
`;
+const SCREENSHOT_NODE_SELECTOR = '.dashboard';
+
class HeaderActionsDropdown extends React.PureComponent {
static discardChanges() {
window.location.reload();
@@ -144,9 +146,21 @@ class HeaderActionsDropdown extends React.PureComponent {
case MENU_KEYS.EDIT_PROPERTIES:
this.props.showPropertiesModal();
break;
- case MENU_KEYS.DOWNLOAD_AS_IMAGE:
- downloadAsImage('.dashboard', this.props.dashboardTitle)(domEvent);
+ case MENU_KEYS.DOWNLOAD_AS_IMAGE: {
+ // menu closes with a delay, we need to hide it manually,
+ // so that we don't capture it on the screenshot
+ const menu = document.querySelector(
+ '.ant-dropdown:not(.ant-dropdown-hidden)',
+ );
+ menu.style.visibility = 'hidden';
+ downloadAsImage(
+ SCREENSHOT_NODE_SELECTOR,
+ this.props.dashboardTitle,
+ )(domEvent).then(() => {
+ menu.style.visibility = 'visible';
+ });
break;
+ }
case MENU_KEYS.TOGGLE_FULLSCREEN: {
const hasStandalone = window.location.search.includes(
'standalone=true',
@@ -294,7 +308,13 @@ class HeaderActionsDropdown extends React.PureComponent {
</Menu>
);
return (
- <NoAnimationDropdown overlay={menu} trigger={['click']}>
+ <NoAnimationDropdown
+ overlay={menu}
+ trigger={['click']}
+ getPopupContainer={triggerNode =>
+ triggerNode.closest(SCREENSHOT_NODE_SELECTOR)
+ }
+ >
<DropdownButton id="save-dash-split-button" role="button">
<Icon name="more-horiz" />
</DropdownButton>
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx b/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx
index ec94ab3..673f2ba 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx
@@ -87,6 +87,8 @@ const RefreshTooltip = styled.div`
color: ${({ theme }) => theme.colors.grayscale.base};
`;
+const SCREENSHOT_NODE_SELECTOR = '.dashboard-component-chart-holder';
+
const VerticalDotsTrigger = () => (
<VerticalDotsContainer>
<span className="dot" />
@@ -139,12 +141,21 @@ class SliceHeaderControls extends React.PureComponent {
case MENU_KEYS.RESIZE_LABEL:
this.props.handleToggleFullSize();
break;
- case MENU_KEYS.DOWNLOAD_AS_IMAGE:
+ case MENU_KEYS.DOWNLOAD_AS_IMAGE: {
+ // menu closes with a delay, we need to hide it manually,
+ // so that we don't capture it on the screenshot
+ const menu = document.querySelector(
+ '.ant-dropdown:not(.ant-dropdown-hidden)',
+ );
+ menu.style.visibility = 'hidden';
downloadAsImage(
- '.dashboard-component-chart-holder',
+ SCREENSHOT_NODE_SELECTOR,
this.props.slice.slice_name,
- )(domEvent);
+ )(domEvent).then(() => {
+ menu.style.visibility = 'visible';
+ });
break;
+ }
default:
break;
}
@@ -232,6 +243,9 @@ class SliceHeaderControls extends React.PureComponent {
dropdownAlign={{
offset: [-40, 4],
}}
+ getPopupContainer={triggerNode =>
+ triggerNode.closest(SCREENSHOT_NODE_SELECTOR)
+ }
>
<a id={`slice_${slice.slice_id}-controls`} role="button">
<VerticalDotsTrigger />
diff --git a/superset-frontend/src/explore/components/DisplayQueryButton.jsx b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
index 285d8ac..ab19c5f 100644
--- a/superset-frontend/src/explore/components/DisplayQueryButton.jsx
+++ b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
@@ -90,6 +90,7 @@ export const DisplayQueryButton = props => {
datasource && datasource.split('__')[1] === 'table',
);
const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
+ const [menuVisible, setMenuVisible] = useState(false);
const tableData = useMemo(() => {
if (!data?.length) {
@@ -150,6 +151,7 @@ export const DisplayQueryButton = props => {
const handleMenuClick = ({ key, domEvent }) => {
const { chartHeight, slice, onOpenInEditor, latestQueryFormData } = props;
+ setMenuVisible(false);
switch (key) {
case MENU_KEYS.EDIT_PROPERTIES:
openPropertiesModal();
@@ -273,6 +275,7 @@ export const DisplayQueryButton = props => {
const { slice } = props;
return (
<DropdownButton
+ open={menuVisible}
noCaret
data-test="query-dropdown"
title={
@@ -284,6 +287,7 @@ export const DisplayQueryButton = props => {
bsSize="sm"
pullRight
id="query"
+ onToggle={setMenuVisible}
>
<Menu onClick={handleMenuClick} selectable={false}>
{slice && [