From 5e85f5c81f66b2da6fa11d9112216004f35170c8 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Thu, 21 Dec 2023 08:53:23 +0100 Subject: [PATCH] chore: Add downloadAsImage types, change filter selector (#26297) --- superset-frontend/package-lock.json | 25 ++++++++++++++----- superset-frontend/package.json | 1 + .../src/types/dom-to-image-more.d.ts | 18 ++----------- .../src/utils/downloadAsImage.ts | 7 +++--- 4 files changed, 25 insertions(+), 26 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 4794218b369fe..6536250d71924 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -186,6 +186,7 @@ "@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.7", "@types/enzyme": "^3.10.5", "@types/enzyme-adapter-react-16": "^1.0.6", "@types/fetch-mock": "^7.3.2", @@ -19257,6 +19258,12 @@ "@types/ms": "*" } }, + "node_modules/@types/dom-to-image": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.7.tgz", + "integrity": "sha512-me5VbCv+fcXozblWwG13krNBvuEOm6kA5xoa4RrjDJCNFOZSWR3/QLtOXimBHk1Fisq69Gx3JtOoXtg1N1tijg==", + "dev": true + }, "node_modules/@types/enzyme": { "version": "3.10.10", "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.10.tgz", @@ -29531,9 +29538,9 @@ "license": "MIT" }, "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==" + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-2.16.0.tgz", + "integrity": "sha512-RyjtkaM/zVy90uJ20lT+/G7MwBZx6l/ePliq5CQOeAnPeew7aUGS6IqRWBkHpstU+POmhaKA8A9H9qf476gisQ==" }, "node_modules/dom-to-pdf": { "version": "0.3.2", @@ -79240,6 +79247,12 @@ "@types/ms": "*" } }, + "@types/dom-to-image": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.7.tgz", + "integrity": "sha512-me5VbCv+fcXozblWwG13krNBvuEOm6kA5xoa4RrjDJCNFOZSWR3/QLtOXimBHk1Fisq69Gx3JtOoXtg1N1tijg==", + "dev": true + }, "@types/enzyme": { "version": "3.10.10", "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.10.tgz", @@ -87371,9 +87384,9 @@ "from": "dom-to-image@git+https://github.com/dmapper/dom-to-image.git" }, "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==" + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-2.16.0.tgz", + "integrity": "sha512-RyjtkaM/zVy90uJ20lT+/G7MwBZx6l/ePliq5CQOeAnPeew7aUGS6IqRWBkHpstU+POmhaKA8A9H9qf476gisQ==" }, "dom-to-pdf": { "version": "0.3.2", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index f12989cd389dc..a2bb57fe4c1c9 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -252,6 +252,7 @@ "@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.7", "@types/enzyme": "^3.10.5", "@types/enzyme-adapter-react-16": "^1.0.6", "@types/fetch-mock": "^7.3.2", diff --git a/superset-frontend/src/types/dom-to-image-more.d.ts b/superset-frontend/src/types/dom-to-image-more.d.ts index c5a93de757438..374a41bb04570 100644 --- a/superset-frontend/src/types/dom-to-image-more.d.ts +++ b/superset-frontend/src/types/dom-to-image-more.d.ts @@ -18,20 +18,6 @@ */ 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; - } - - export default DomToImageMore; + import domToImage = require('dom-to-image-more'); + export = domToImage; } diff --git a/superset-frontend/src/utils/downloadAsImage.ts b/superset-frontend/src/utils/downloadAsImage.ts index 79373cc76aade..a6f50926bcb72 100644 --- a/superset-frontend/src/utils/downloadAsImage.ts +++ b/superset-frontend/src/utils/downloadAsImage.ts @@ -62,7 +62,7 @@ export default function downloadAsImage( if (typeof node.className === 'string') { return ( node.className !== 'mapboxgl-control-container' && - !node.className.includes('ant-dropdown') + !node.className.includes('header-controls') ); } return true; @@ -70,17 +70,16 @@ export default function downloadAsImage( return domToImage .toJpeg(elementToPrint, { - quality: 1, bgcolor: supersetTheme.colors.grayscale.light4, filter, }) - .then(dataUrl => { + .then((dataUrl: string) => { const link = document.createElement('a'); link.download = `${generateFileStem(description)}.jpg`; link.href = dataUrl; link.click(); }) - .catch(e => { + .catch((e: Error) => { console.error('Creating image failed', e); }); };