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

Adds support for base64 image strings to image cells (#2769)

Browse Source
This commit is contained in:
Dwayne Forde 2021-03-05 14:37:49 -05:00 committed by GitHub
parent 800d305dab
commit 2dfc8ebf8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/cypress/fixtures/example.json
View File

@ -120,6 +120,7 @@
"TableInput": [ "TableInput": [
{ {
"id": 2381224, "id": 2381224,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "michael.lawson@reqres.in", "email": "michael.lawson@reqres.in",
"userName": "Michael Lawson", "userName": "Michael Lawson",
"productName": "Chicken Sandwich", "productName": "Chicken Sandwich",
@ -127,6 +128,7 @@
}, },
{ {
"id": 2736212, "id": 2736212,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "lindsay.ferguson@reqres.in", "email": "lindsay.ferguson@reqres.in",
"userName": "Lindsay Ferguson", "userName": "Lindsay Ferguson",
"productName": "Tuna Salad", "productName": "Tuna Salad",
@ -134,6 +136,7 @@
}, },
{ {
"id": 6788734, "id": 6788734,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "tobias.funke@reqres.in", "email": "tobias.funke@reqres.in",
"userName": "Tobias Funke", "userName": "Tobias Funke",
"productName": "Beef steak", "productName": "Beef steak",
@ -141,6 +144,7 @@
}, },
{ {
"id": 7434532, "id": 7434532,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "byron.fields@reqres.in", "email": "byron.fields@reqres.in",
"userName": "Byron Fields", "userName": "Byron Fields",
"productName": "Chicken Sandwich", "productName": "Chicken Sandwich",
@ -148,6 +152,7 @@
}, },
{ {
"id": 7434532, "id": 7434532,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "ryan.holmes@reqres.in", "email": "ryan.holmes@reqres.in",
"userName": "Ryan Holmes", "userName": "Ryan Holmes",
"productName": "Avocado Panini", "productName": "Avocado Panini",

59
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_spec.js
View File

@ -39,18 +39,33 @@ describe("Table Widget Functionality", function() {
cy.get(commonlocators.editPropCrossButton).click(); cy.get(commonlocators.editPropCrossButton).click();
cy.PublishtheApp(); cy.PublishtheApp();
}); });
it("Table Widget Functionality To Verify The Data", function() { it("Table Widget Functionality To Verify The Data", function() {
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
}); });
}); });
it("Table Widget Functionality To Show a Base64 Image", function() {
cy.get(publish.backToEditor).click();
cy.openPropertyPane("tablewidget");
cy.editColumn("image");
cy.changeColumnType("Image");
cy.isSelectRow(1);
const index = 1;
const imageVal = this.data.TableInput[index].image;
cy.readTableLinkPublish(index, "1").then((hrefVal) => {
expect(hrefVal).to.be.equal(imageVal);
});
});
it("Table Widget Functionality To Search The Data", function() { it("Table Widget Functionality To Search The Data", function() {
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
@ -58,7 +73,7 @@ describe("Table Widget Functionality", function() {
.first() .first()
.type(tabData); .type(tabData);
cy.wait(500); cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
}); });
@ -69,7 +84,7 @@ describe("Table Widget Functionality", function() {
.clear() .clear()
.type("7434532"); .type("7434532");
cy.wait(1000); cy.wait(1000);
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("3", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Byron Fields"); expect(tabValue).to.be.equal("Byron Fields");
}); });
@ -82,7 +97,7 @@ describe("Table Widget Functionality", function() {
.clear(); .clear();
cy.wait(1000); cy.wait(1000);
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
@ -100,14 +115,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas) cy.get(publish.canvas)
.first() .first()
.click(); .click();
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
}); });
cy.get(publish.filterBtn).click(); cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click(); cy.get(publish.removeFilter).click();
cy.wait(500); cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson"); expect(tabValue).to.be.equal("Michael Lawson");
}); });
@ -119,7 +134,7 @@ describe("Table Widget Functionality", function() {
it("Table Widget Functionality To Filter The Data using contains", function() { it("Table Widget Functionality To Filter The Data using contains", function() {
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
@ -137,14 +152,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas) cy.get(publish.canvas)
.first() .first()
.click(); .click();
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
}); });
cy.get(publish.filterBtn).click(); cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click(); cy.get(publish.removeFilter).click();
cy.wait(500); cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson"); expect(tabValue).to.be.equal("Michael Lawson");
}); });
@ -156,7 +171,7 @@ describe("Table Widget Functionality", function() {
it("Table Widget Functionality To Filter The Data using starts with ", function() { it("Table Widget Functionality To Filter The Data using starts with ", function() {
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
@ -174,14 +189,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas) cy.get(publish.canvas)
.first() .first()
.click(); .click();
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
}); });
cy.get(publish.filterBtn).click(); cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click(); cy.get(publish.removeFilter).click();
cy.wait(500); cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson"); expect(tabValue).to.be.equal("Michael Lawson");
}); });
@ -193,7 +208,7 @@ describe("Table Widget Functionality", function() {
it("Table Widget Functionality To Filter The Data using ends with ", function() { it("Table Widget Functionality To Filter The Data using ends with ", function() {
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
@ -211,14 +226,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas) cy.get(publish.canvas)
.first() .first()
.click(); .click();
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
}); });
cy.get(publish.filterBtn).click(); cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click(); cy.get(publish.removeFilter).click();
cy.wait(500); cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => { cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson"); expect(tabValue).to.be.equal("Michael Lawson");
}); });
@ -230,7 +245,7 @@ describe("Table Widget Functionality", function() {
it("Table Widget Functionality To Check Compact Mode", function() { it("Table Widget Functionality To Check Compact Mode", function() {
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => { cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
@ -238,7 +253,7 @@ describe("Table Widget Functionality", function() {
cy.get(publish.compactOpt) cy.get(publish.compactOpt)
.contains("Tall") .contains("Tall")
.click(); .click();
cy.scrollTabledataPublish("3", "2").then((tabData) => { cy.scrollTabledataPublish("3", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Byron Fields"); expect(tabValue).to.be.equal("Byron Fields");
}); });
@ -246,7 +261,7 @@ describe("Table Widget Functionality", function() {
cy.get(publish.compactOpt) cy.get(publish.compactOpt)
.contains("Short") .contains("Short")
.click(); .click();
cy.readTabledataPublish("4", "2").then((tabData) => { cy.readTabledataPublish("4", "3").then((tabData) => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Ryan Holmes"); expect(tabValue).to.be.equal("Ryan Holmes");
}); });
@ -261,7 +276,7 @@ describe("Table Widget Functionality", function() {
.first() .first()
.click(); .click();
cy.isSelectRow(1); cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then(tabData => { cy.readTabledataPublish("1", "3").then(tabData => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue); cy.log("the value is" + tabValue);
@ -270,7 +285,7 @@ describe("Table Widget Functionality", function() {
.contains("userName") .contains("userName")
.click(); .click();
cy.get(publish.containerWidget).click(); cy.get(publish.containerWidget).click();
cy.readTabledataPublish("1", "2").then(tabData => { cy.readTabledataPublish("1", "3").then(tabData => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.not.equal("Lindsay Ferguson"); expect(tabValue).to.not.equal("Lindsay Ferguson");
}); });
@ -279,7 +294,7 @@ describe("Table Widget Functionality", function() {
.contains("userName") .contains("userName")
.click(); .click();
cy.get(publish.containerWidget).click(); cy.get(publish.containerWidget).click();
cy.readTabledataPublish("1", "2").then(tabData => { cy.readTabledataPublish("1", "3").then(tabData => {
const tabValue = tabData; const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson"); expect(tabValue).to.be.equal("Lindsay Ferguson");
}); });

6
app/client/cypress/support/commands.js
View File

@ -2098,6 +2098,12 @@ Cypress.Commands.add("scrollTabledataPublish", (rowNum, colNum) => {
return tabVal; return tabVal;
}); });
Cypress.Commands.add("readTableLinkPublish", (rowNum, colNum) => {
const selector = `.t--widget-tablewidget .tbody .td[data-rowindex=${rowNum}][data-colindex=${colNum}] a`;
const hrefVal = cy.get(selector).invoke("attr", "href");
return hrefVal;
});
Cypress.Commands.add("assertEvaluatedValuePopup", (expectedType) => { Cypress.Commands.add("assertEvaluatedValuePopup", (expectedType) => {
cy.get(dynamicInputLocators.evaluatedValue) cy.get(dynamicInputLocators.evaluatedValue)
.should("be.visible") .should("be.visible")

8
app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
View File

@ -63,14 +63,16 @@ export const renderCell = (
</CellWrapper> </CellWrapper>
); );
} }
const imageRegex = /(http(s?):)([/|.|\w|\s|-])*\.(?:jpeg|jpg|gif|png)??(?:&?[^=&]*=[^=&]*)*/; const imageSplitRegex = /[^(base64)],/;
const imageUrlRegex = /(http(s?):)([/|.|\w|\s|-])*\.(?:jpeg|jpg|gif|png)??(?:&?[^=&]*=[^=&]*)*/;
const base64ImageRegex = /^data:image\/.*;base64/;
return ( return (
<CellWrapper cellProperties={cellProperties} isHidden={isHidden}> <CellWrapper cellProperties={cellProperties} isHidden={isHidden}>
{value {value
.toString() .toString()
.split(",") .split(imageSplitRegex)
.map((item: string, index: number) => { .map((item: string, index: number) => {
if (imageRegex.test(item)) { if (imageUrlRegex.test(item) || base64ImageRegex.test(item)) {
return ( return (
<a <a
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}