Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: changed download flow for image control (#11391)

Browse Source 
* fix: changed download flow for image control

* test: cypress test added

* fix cypress test case
This commit is contained in:
Bhavin K 2022-03-02 19:13:24 +05:30 committed by GitHub
parent 4c1a6674fa
commit 12954d4e3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Image_spec.js
View File

@ -64,10 +64,21 @@ describe("Image Widget Functionality", function() {
cy.togglebar(commonlocators.visibleCheckbox);
cy.PublishtheApp();
cy.get(publish.imageWidget).should("be.visible");
cy.get(publish.backToEditor).click();
});
it("Image Widget Functionality To check download option and validate image link", function() {
cy.openPropertyPane("imagewidget");
cy.togglebar(".t--property-control-enabledownload input[type='checkbox']");
cy.get(publish.imageWidget).trigger("mouseover");
cy.get(`${publish.imageWidget} a[data-cy=t--image-download]`).should(
"have.attr",
"href",
this.data.NewImage,
);
});
it("In case of an image loading error, show off the error message", () => {
cy.get(publish.backToEditor).click();
cy.openPropertyPane("imagewidget");
// Invalid image url
const invalidImageUrl = "https://www.example.com/does-not-exist.jpg";

47
app/client/src/widgets/ImageWidget/component/index.tsx
View File

@ -57,7 +57,7 @@ const ControlBtnWrapper = styled.div`
background: white;
`;
const ControlBtn = styled.div`
const ControlBtn = styled.a`
height: 25px;
width: 45px;
color: white;
@ -242,6 +242,7 @@ class ImageComponent extends React.Component<
} = this.props;
const { showImageControl } = this.state;
const showDownloadBtn = enableDownload && (!!imageUrl || !!defaultImageUrl);
const hrefUrl = imageUrl || defaultImageUrl;
if (showImageControl && (enableRotation || showDownloadBtn)) {
return (
@ -290,7 +291,12 @@ class ImageComponent extends React.Component<
</>
)}
{showDownloadBtn && (
<ControlBtn onClick={this.handleImageDownload}>
<ControlBtn
data-cy="t--image-download"
download
href={hrefUrl}
target="_blank"
>
<div>
<svg fill="none" height="20" viewBox="0 0 20 20" width="20">
<path
@ -321,43 +327,6 @@ class ImageComponent extends React.Component<
}
};
handleImageDownload = (e: any) => {
const { defaultImageUrl, imageUrl, widgetId } = this.props;
const fileName = `${widgetId}-download`;
const downloadUrl = imageUrl || defaultImageUrl;
const xhr = new XMLHttpRequest();
xhr.open("GET", downloadUrl, true);
xhr.responseType = "blob";
xhr.onload = function() {
const urlCreator = window.URL || window.webkitURL;
const imageUrlObj = urlCreator.createObjectURL(this.response);
const tag = document.createElement("a");
tag.href = imageUrlObj;
tag.download = fileName;
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
window.URL.revokeObjectURL(imageUrlObj);
};
// if download fails open image in new tab
xhr.onerror = function() {
const tag = document.createElement("a");
tag.href = downloadUrl;
tag.target = "_blank";
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
};
xhr.send();
if (!!e) {
e.preventDefault();
e.stopPropagation();
}
};
onMouseEnter = () => {
const { defaultImageUrl, imageUrl } = this.props;
if (defaultImageUrl || imageUrl) {