fix: Unable to download the Dashboard as image in case there's an image added through Markdown (#20362)

* fix: Unable to download the Dashboard as image in case there's an image added through Markdown

* licence
This commit is contained in:
Diego Medina 2022-06-29 13:22:49 -03:00 committed by GitHub
parent cb3cd41dcd
commit c5d3678a31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 34 deletions

View File

@ -66,7 +66,7 @@
"d3-array": "^1.2.4",
"d3-color": "^1.2.0",
"d3-scale": "^2.1.2",
"dom-to-image": "^2.6.0",
"dom-to-image-more": "^2.10.1",
"emotion-rgba": "0.0.9",
"fast-glob": "^3.2.7",
"fontsource-fira-code": "^4.0.0",
@ -177,7 +177,6 @@
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.7.0",
"@types/classnames": "^2.2.10",
"@types/dom-to-image": "^2.6.0",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/fetch-mock": "^7.3.2",
@ -16736,15 +16735,6 @@
"resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.1.tgz",
"integrity": "sha512-fck0Z9RGfIQn3GJIEKVrp15h9m6Vlg0d5XXeiE/6+CQiBmMDZxfR21XtjEPuDeg7gC3bBM0SdieA5XF3GW1wKA=="
},
"node_modules/@types/dom-to-image": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.0.tgz",
"integrity": "sha512-X7qEh5AI1s/fb/Ijb1WU/tl7nZjD/A3b0PZiq3QjD31EZkgPooPdpte9MCJWQgqjxA0F8AJFuPd53YDrFJFE7w==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/enzyme": {
"version": "3.10.10",
"resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.10.tgz",
@ -26331,10 +26321,10 @@
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs="
},
"node_modules/dom-to-image": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
"integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
"node_modules/dom-to-image-more": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-2.10.1.tgz",
"integrity": "sha512-gMG28V47WGj5/xvrsbSPJAWSaV7CBh4teLErn1iGD1sa29HsFsHxvnoLj8VxVvfqnjPgsiUGs2IV2VAxLJGb+A=="
},
"node_modules/dom-walk": {
"version": "0.1.1",
@ -68804,15 +68794,6 @@
"resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.1.tgz",
"integrity": "sha512-fck0Z9RGfIQn3GJIEKVrp15h9m6Vlg0d5XXeiE/6+CQiBmMDZxfR21XtjEPuDeg7gC3bBM0SdieA5XF3GW1wKA=="
},
"@types/dom-to-image": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.0.tgz",
"integrity": "sha512-X7qEh5AI1s/fb/Ijb1WU/tl7nZjD/A3b0PZiq3QjD31EZkgPooPdpte9MCJWQgqjxA0F8AJFuPd53YDrFJFE7w==",
"dev": true,
"requires": {
"@types/node": "*"
}
},
"@types/enzyme": {
"version": "3.10.10",
"resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.10.tgz",
@ -76396,10 +76377,10 @@
}
}
},
"dom-to-image": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
"integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
"dom-to-image-more": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-2.10.1.tgz",
"integrity": "sha512-gMG28V47WGj5/xvrsbSPJAWSaV7CBh4teLErn1iGD1sa29HsFsHxvnoLj8VxVvfqnjPgsiUGs2IV2VAxLJGb+A=="
},
"dom-walk": {
"version": "0.1.1",

View File

@ -126,7 +126,7 @@
"d3-array": "^1.2.4",
"d3-color": "^1.2.0",
"d3-scale": "^2.1.2",
"dom-to-image": "^2.6.0",
"dom-to-image-more": "^2.10.1",
"emotion-rgba": "0.0.9",
"fast-glob": "^3.2.7",
"fontsource-fira-code": "^4.0.0",
@ -237,7 +237,6 @@
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.7.0",
"@types/classnames": "^2.2.10",
"@types/dom-to-image": "^2.6.0",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/fetch-mock": "^7.3.2",

View File

@ -174,7 +174,6 @@ class HeaderActionsDropdown extends React.PureComponent {
downloadAsImage(
SCREENSHOT_NODE_SELECTOR,
this.props.dashboardTitle,
{},
true,
)(domEvent).then(() => {
menu.style.visibility = 'visible';

View File

@ -195,7 +195,6 @@ export const useExploreAdditionalActionsMenu = (
'.panel-body .chart-container',
// eslint-disable-next-line camelcase
slice?.slice_name ?? t('New chart'),
{},
true,
)(domEvent);
setIsDropdownVisible(false);

View File

@ -0,0 +1,37 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
declare module 'dom-to-image-more' {
export interface Options {
filter?: ((node: Node) => boolean) | undefined;
bgcolor?: string | undefined;
width?: number | undefined;
height?: number | undefined;
style?: {} | undefined;
quality?: number | undefined;
imagePlaceholder?: string | undefined;
cacheBust?: boolean | undefined;
}
class DomToImageMore {
static toJpeg(node: Node, options?: Options): Promise<string>;
}
export default DomToImageMore;
}

View File

@ -17,7 +17,7 @@
* under the License.
*/
import { SyntheticEvent } from 'react';
import domToImage from 'dom-to-image';
import domToImage from 'dom-to-image-more';
import kebabCase from 'lodash/kebabCase';
import { t } from '@superset-ui/core';
import { addWarningToast } from 'src/components/MessageToasts/actions';
@ -43,7 +43,6 @@ const generateFileStem = (description: string, date = new Date()) =>
* @param selector css selector of the parent element which should be turned into image
* @param description name or a short description of what is being printed.
* Value will be normalized, and a date as well as a file extension will be added.
* @param domToImageOptions dom-to-image Options object.
* @param isExactSelector if false, searches for the closest ancestor that matches selector.
* @returns event handler
*/