Skip to content

Commit

Permalink
Adds support for base64 image strings to image cells (#2769)
Browse files Browse the repository at this point in the history
  • Loading branch information
@osis
osis committed Mar 5, 2021
1 parent 800d305 commit 2dfc8eb
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 25 deletions.
5 changes: 5 additions & 0 deletions app/client/cypress/fixtures/example.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,34 +120,39 @@
"TableInput": [
{
"id": 2381224,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "[email protected]",
"userName": "Michael Lawson",
"productName": "Chicken Sandwich",
"orderAmount": 4.99
},
{
"id": 2736212,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "[email protected]",
"userName": "Lindsay Ferguson",
"productName": "Tuna Salad",
"orderAmount": 9.99
},
{
"id": 6788734,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "[email protected]",
"userName": "Tobias Funke",
"productName": "Beef steak",
"orderAmount": 19.99
},
{
"id": 7434532,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "[email protected]",
"userName": "Byron Fields",
"productName": "Chicken Sandwich",
"orderAmount": 4.99
},
{
"id": 7434532,
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
"email": "[email protected]",
"userName": "Ryan Holmes",
"productName": "Avocado Panini",
Expand Down
59 changes: 37 additions & 22 deletions app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,26 +39,41 @@ describe("Table Widget Functionality", function() {
cy.get(commonlocators.editPropCrossButton).click();
cy.PublishtheApp();
});

it("Table Widget Functionality To Verify The Data", function() {
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
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() {
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue);
cy.get(publish.searchInput)
.first()
.type(tabData);
cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
});
Expand All @@ -69,7 +84,7 @@ describe("Table Widget Functionality", function() {
.clear()
.type("7434532");
cy.wait(1000);
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("3", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Byron Fields");
});
Expand All @@ -82,7 +97,7 @@ describe("Table Widget Functionality", function() {
.clear();
cy.wait(1000);
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue);
Expand All @@ -100,14 +115,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas)
.first()
.click();
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
});
cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click();
cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson");
});
Expand All @@ -119,7 +134,7 @@ describe("Table Widget Functionality", function() {

it("Table Widget Functionality To Filter The Data using contains", function() {
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue);
Expand All @@ -137,14 +152,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas)
.first()
.click();
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
});
cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click();
cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson");
});
Expand All @@ -156,7 +171,7 @@ describe("Table Widget Functionality", function() {

it("Table Widget Functionality To Filter The Data using starts with ", function() {
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue);
Expand All @@ -174,14 +189,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas)
.first()
.click();
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
});
cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click();
cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson");
});
Expand All @@ -193,7 +208,7 @@ describe("Table Widget Functionality", function() {

it("Table Widget Functionality To Filter The Data using ends with ", function() {
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue);
Expand All @@ -211,14 +226,14 @@ describe("Table Widget Functionality", function() {
cy.get(publish.canvas)
.first()
.click();
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
});
cy.get(publish.filterBtn).click();
cy.get(publish.removeFilter).click();
cy.wait(500);
cy.readTabledataPublish("0", "2").then((tabData) => {
cy.readTabledataPublish("0", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Michael Lawson");
});
Expand All @@ -230,23 +245,23 @@ describe("Table Widget Functionality", function() {

it("Table Widget Functionality To Check Compact Mode", function() {
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then((tabData) => {
cy.readTabledataPublish("1", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue);
cy.get(publish.compactMode).click();
cy.get(publish.compactOpt)
.contains("Tall")
.click();
cy.scrollTabledataPublish("3", "2").then((tabData) => {
cy.scrollTabledataPublish("3", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Byron Fields");
});
cy.get(publish.compactMode).click();
cy.get(publish.compactOpt)
.contains("Short")
.click();
cy.readTabledataPublish("4", "2").then((tabData) => {
cy.readTabledataPublish("4", "3").then((tabData) => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Ryan Holmes");
});
Expand All @@ -261,7 +276,7 @@ describe("Table Widget Functionality", function() {
.first()
.click();
cy.isSelectRow(1);
cy.readTabledataPublish("1", "2").then(tabData => {
cy.readTabledataPublish("1", "3").then(tabData => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
cy.log("the value is" + tabValue);
Expand All @@ -270,7 +285,7 @@ describe("Table Widget Functionality", function() {
.contains("userName")
.click();
cy.get(publish.containerWidget).click();
cy.readTabledataPublish("1", "2").then(tabData => {
cy.readTabledataPublish("1", "3").then(tabData => {
const tabValue = tabData;
expect(tabValue).to.not.equal("Lindsay Ferguson");
});
Expand All @@ -279,7 +294,7 @@ describe("Table Widget Functionality", function() {
.contains("userName")
.click();
cy.get(publish.containerWidget).click();
cy.readTabledataPublish("1", "2").then(tabData => {
cy.readTabledataPublish("1", "3").then(tabData => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Lindsay Ferguson");
});
Expand Down
6 changes: 6 additions & 0 deletions app/client/cypress/support/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2098,6 +2098,12 @@ Cypress.Commands.add("scrollTabledataPublish", (rowNum, colNum) => {
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) => {
cy.get(dynamicInputLocators.evaluatedValue)
.should("be.visible")
Expand Down
8 changes: 5 additions & 3 deletions app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,16 @@ export const renderCell = (
</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 (
<CellWrapper cellProperties={cellProperties} isHidden={isHidden}>
{value
.toString()
.split(",")
.split(imageSplitRegex)
.map((item: string, index: number) => {
if (imageRegex.test(item)) {
if (imageUrlRegex.test(item) || base64ImageRegex.test(item)) {
return (
<a
onClick={(e) => e.stopPropagation()}
Expand Down

0 comments on commit 2dfc8eb

Please sign in to comment.