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

fix: comma-separated splitting of image url in table col of type image (#4427)

Browse Source 
* fix for comma separated splitting of image url in table col of type image
This commit is contained in:
Bhavin K 2021-06-29 18:59:19 +05:30 committed by GitHub
parent 1112c20f7c
commit 140d6c8dda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 115 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.test.tsx Normal file
View File

@ -0,0 +1,113 @@
import { renderCell } from "./TableUtilities";
import { ColumnTypes } from "components/designSystems/appsmith/TableComponent/Constants";
describe("Test table columnType Image render", () => {
it("columnType Image accepts single image url and renders image correctly", () => {
const value =
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg";
const expected = [
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg",
];
const ImageCellComponent = renderCell(
value,
ColumnTypes.IMAGE,
false,
{},
930,
);
const result = ImageCellComponent.props.children.map((imageDiv: any) => {
return imageDiv.props.href;
});
expect(expected).toEqual(result);
});
it("columnType Image accepts single base64 url and renders image correctly", () => {
const value =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
const expected = [
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
];
const ImageCellComponent = renderCell(
value,
ColumnTypes.IMAGE,
false,
{},
930,
);
const result = ImageCellComponent.props.children.map((imageDiv: any) => {
return imageDiv.props.href;
});
expect(expected).toEqual(result);
});
it("columnType Image accepts comma separeted image urls and renders all images correctly", () => {
const value =
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg,http://commondatastorage.googleapis.com/codeskulptor-assets/gutenberg.jpg,http://commondatastorage.googleapis.com/codeskulptor-assets/gutenberg.jpg";
const expected = [
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg",
"http://commondatastorage.googleapis.com/codeskulptor-assets/gutenberg.jpg",
"http://commondatastorage.googleapis.com/codeskulptor-assets/gutenberg.jpg",
];
const ImageCellComponent = renderCell(
value,
ColumnTypes.IMAGE,
false,
{},
930,
);
const result = ImageCellComponent.props.children.map((imageDiv: any) => {
return imageDiv.props.href;
});
expect(expected).toEqual(result);
});
it("columnType Image accepts comma separeted image urls that has base64 image and renders images correctly", () => {
const value =
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
const expected = [
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg",
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
];
const ImageCellComponent = renderCell(
value,
ColumnTypes.IMAGE,
false,
{},
930,
);
const result = ImageCellComponent.props.children.map((imageDiv: any) => {
return imageDiv.props.href;
});
expect(expected).toEqual(result);
});
it("columnType Image accepts image url that may have incorrect use of comma and renders image correctly", () => {
const value =
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg, ";
const expected = [
"http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg",
undefined,
];
const ImageCellComponent = renderCell(
value,
ColumnTypes.IMAGE,
false,
{},
930,
);
const result = ImageCellComponent.props.children.map((imageDiv: any) => {
return imageDiv.props.href;
});
expect(expected).toEqual(result);
});
});

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

@ -49,7 +49,7 @@ export const renderCell = (
</CellWrapper>
);
}
const imageSplitRegex = /[^(base64)],/;
const imageSplitRegex = /(?<!base64),/g;
const imageUrlRegex = /(http(s?):)([/|.|\w|\s|-])*\.(?:jpeg|jpg|gif|png)??(?:&?[^=&]*=[^=&]*)*/;
const base64ImageRegex = /^data:image\/.*;base64/;
return (
@ -75,7 +75,7 @@ export const renderCell = (
</a>
);
} else {
return <div>Invalid Image</div>;
return <div key={index}>Invalid Image</div>;
}
})}
</CellWrapper>