mirror of
https://github.com/apache/superset.git
synced 2024-09-14 09:39:47 -04:00
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
This commit is contained in:
parent
9dd33d5566
commit
5ebc09b339
@ -61,6 +61,7 @@ export const MenuItem = styled(AntdMenu.Item)`
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
transition-duration: 0s;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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 />
|
||||
|
@ -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 && [
|
||||
|
Loading…
Reference in New Issue
Block a user