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

feat: Expose message event details for Iframe Widget (#14730)

Browse Source 
* Expose message event details for Iframe Widget

* Change meta property name from messageEventProps to messageMetadata

* Cypress test for Iframe Message event details

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
This commit is contained in:
Souma Ghosh 2022-07-22 10:42:57 +05:30 committed by GitHub
parent 06e7d3cc63
commit 27e91f8524
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 161 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
app/client/cypress/fixtures/IframeDsl.json Normal file
View File

@ -0,0 +1,114 @@
{
"dsl": {
"widgetName": "MainContainer",
"backgroundColor": "none",
"rightColumn": 4896,
"snapColumns": 64,
"detachFromLayout": true,
"widgetId": "0",
"topRow": 0,
"bottomRow": 1290,
"containerStyle": "none",
"snapRows": 125,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"version": 59,
"minHeight": 1292,
"dynamicTriggerPathList": [],
"parentColumnSpace": 1,
"dynamicBindingPathList": [],
"leftColumn": 0,
"children": [
{
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"widgetName": "Iframe1",
"srcDoc": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document</title>\n</head>\n<body>\n <button onclick=\"handleClick()\">Click me</button>\n</body>\n<script>\n const handleClick = () => {\n // console.log(\"handle click fired\");\n // window.postMessage(\"Test message self\")\n window.parent.postMessage(\"Test message test-app\", \"*\");\n }\n</script>\n</html>",
"displayName": "Iframe",
"iconSVG": "/static/media/icon.34169b6acebc8ace125dd1f638974aae.svg",
"searchTags": [
"embed"
],
"topRow": 4,
"bottomRow": 36,
"parentRowSpace": 10,
"source": "https://www.example.com",
"type": "IFRAME_WIDGET",
"hideCard": false,
"borderOpacity": 100,
"animateLoading": true,
"parentColumnSpace": 17.34375,
"dynamicTriggerPathList": [],
"leftColumn": 5,
"dynamicBindingPathList": [
{
"key": "borderRadius"
},
{
"key": "boxShadow"
}
],
"borderWidth": 1,
"key": "whutp42h3u",
"isDeprecated": false,
"rightColumn": 29,
"widgetId": "sh7n1r7qnb",
"isVisible": true,
"version": 1,
"parentId": "0",
"renderMode": "CANVAS",
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}"
},
{
"widgetName": "Text1",
"displayName": "Text",
"iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg",
"searchTags": [
"typography",
"paragraph"
],
"topRow": 4,
"bottomRow": 13,
"parentRowSpace": 10,
"type": "TEXT_WIDGET",
"hideCard": false,
"animateLoading": true,
"overflow": "NONE",
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
"parentColumnSpace": 17.34375,
"dynamicTriggerPathList": [],
"leftColumn": 32,
"dynamicBindingPathList": [
{
"key": "fontFamily"
},
{
"key": "borderRadius"
},
{
"key": "text"
}
],
"shouldTruncate": false,
"truncateButtonColor": "#FFC13D",
"text": "{{JSON.stringify(Iframe1.messageMetadata)}}",
"key": "lal01fm2pe",
"isDeprecated": false,
"rightColumn": 54,
"textAlign": "LEFT",
"widgetId": "vmttmnt61v",
"isVisible": true,
"fontStyle": "BOLD",
"textColor": "#231F20",
"version": 1,
"parentId": "0",
"renderMode": "CANVAS",
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"fontSize": "1rem"
}
]
}
}

33
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Iframe_spec.js Normal file
View File

@ -0,0 +1,33 @@
const dsl = require("../../../../fixtures/IframeDsl.json");
describe("Iframe Widget functionality", function() {
before(() => {
cy.addDsl(dsl);
});
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return (
cy
.get(".t--draggable-iframewidget iframe")
.its("0.contentDocument.body")
.should("not.be.empty")
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
);
};
it("Tests Iframe post message props correctly exposed or not", () => {
getIframeBody()
.find("button")
.should("have.text", "Click me")
.click();
cy.get(".t--draggable-textwidget .bp3-ui-text span").should(
"contain.text",
`{"lastEventId":"","origin":"https://dev.appsmith.com","ports":[]}`,
);
});
});

1
app/client/src/utils/autocomplete/EntityDefinitions.ts
View File

@ -398,6 +398,7 @@ export const entityDefinitions = {
source: "string",
title: "string",
message: generateTypeDef(widget.message),
messageMetadata: generateTypeDef(widget.messageMetadata),
}),
DIVIDER_WIDGET: {
"!doc": "Divider is a simple UI widget used as a separator",

15
app/client/src/widgets/IframeWidget/widget/index.tsx
View File

@ -159,6 +159,7 @@ class IframeWidget extends BaseWidget<IframeWidgetProps, WidgetState> {
static getMetaPropertiesMap(): Record<string, any> {
return {
message: undefined,
messageMetadata: undefined,
};
}
@ -186,8 +187,18 @@ class IframeWidget extends BaseWidget<IframeWidgetProps, WidgetState> {
}
};
handleMessageReceive = (event: MessageEvent) => {
this.props.updateWidgetMetaProperty("message", event.data, {
handleMessageReceive = ({
data,
lastEventId,
origin,
ports,
}: MessageEvent) => {
this.props.updateWidgetMetaProperty("messageMetadata", {
lastEventId,
origin,
ports,
});
this.props.updateWidgetMetaProperty("message", data, {
triggerPropertyName: "onMessageReceived",
dynamicString: this.props.onMessageReceived,
event: {