diff --git a/app/client/src/components/editorComponents/ActionCreator/Fields.tsx b/app/client/src/components/editorComponents/ActionCreator/Fields.tsx index 1e48a6435d..44bf8a534b 100644 --- a/app/client/src/components/editorComponents/ActionCreator/Fields.tsx +++ b/app/client/src/components/editorComponents/ActionCreator/Fields.tsx @@ -356,7 +356,9 @@ export enum FieldType { DELAY_FIELD = "DELAY_FIELD", ID_FIELD = "ID_FIELD", CLEAR_INTERVAL_ID_FIELD = "CLEAR_INTERVAL_ID_FIELD", - // TODO - see if post message needs to accept any arguments and add them here + MESSAGE_FIELD = "MESSAGE_FIELD", + TARGET_ORIGIN_FIELD = "TARGET_ORIGIN_FIELD", + TRANSFER_ARRAY_FIELD = "TRANSFER_ARRAY_FIELD", } type FieldConfig = { @@ -411,7 +413,7 @@ const fieldConfigs: FieldConfigs = { defaultParams = `"",true`; break; case ActionType.postMessage: - defaultParams = "() => { \n\t // add code here \n}"; + defaultParams = `"",*,undefined`; break; default: break; @@ -627,6 +629,33 @@ const fieldConfigs: FieldConfigs = { }, view: ViewTypes.TEXT_VIEW, }, + [FieldType.MESSAGE_FIELD]: { + getter: (value: string) => { + return textGetter(value, 0); + }, + setter: (value: string, currentValue: string) => { + return textSetter(value, currentValue, 0); + }, + view: ViewTypes.TEXT_VIEW, + }, + [FieldType.TARGET_ORIGIN_FIELD]: { + getter: (value: string) => { + return textGetter(value, 1); + }, + setter: (value: string, currentValue: string) => { + return textSetter(value, currentValue, 1); + }, + view: ViewTypes.TEXT_VIEW, + }, + [FieldType.TRANSFER_ARRAY_FIELD]: { + getter: (value: string) => { + return textGetter(value, 2); + }, + setter: (value: string, currentValue: string) => { + return textSetter(value, currentValue, 2); + }, + view: ViewTypes.TEXT_VIEW, + }, }; function renderField(props: { @@ -798,6 +827,9 @@ function renderField(props: { case FieldType.DELAY_FIELD: case FieldType.ID_FIELD: case FieldType.CLEAR_INTERVAL_ID_FIELD: + case FieldType.MESSAGE_FIELD: + case FieldType.TARGET_ORIGIN_FIELD: + case FieldType.TRANSFER_ARRAY_FIELD: let fieldLabel = ""; if (fieldType === FieldType.ALERT_TEXT_FIELD) { fieldLabel = "Message"; @@ -823,6 +855,12 @@ function renderField(props: { fieldLabel = "Id"; } else if (fieldType === FieldType.CLEAR_INTERVAL_ID_FIELD) { fieldLabel = "Id"; + } else if (fieldType === FieldType.MESSAGE_FIELD) { + fieldLabel = "Message"; + } else if (fieldType === FieldType.TARGET_ORIGIN_FIELD) { + fieldLabel = "Target origin"; + } else if (fieldType === FieldType.TRANSFER_ARRAY_FIELD) { + fieldLabel = "Transfer array (optional)"; } viewElement = (view as (props: TextViewProps) => JSX.Element)({ label: fieldLabel, diff --git a/app/client/src/components/editorComponents/ActionCreator/index.tsx b/app/client/src/components/editorComponents/ActionCreator/index.tsx index 58749416c0..0175321bd5 100644 --- a/app/client/src/components/editorComponents/ActionCreator/index.tsx +++ b/app/client/src/components/editorComponents/ActionCreator/index.tsx @@ -380,9 +380,17 @@ function getFieldFromValue( } if (value.indexOf("postMessage") !== -1) { - fields.push({ - field: FieldType.CALLBACK_FUNCTION_FIELD, - }); + fields.push( + { + field: FieldType.MESSAGE_FIELD, + }, + { + field: FieldType.TARGET_ORIGIN_FIELD, + }, + { + field: FieldType.TRANSFER_ARRAY_FIELD, + }, + ); } return fields; diff --git a/app/client/src/entities/DataTree/actionTriggers.ts b/app/client/src/entities/DataTree/actionTriggers.ts index 8601bc162f..0c345c1eac 100644 --- a/app/client/src/entities/DataTree/actionTriggers.ts +++ b/app/client/src/entities/DataTree/actionTriggers.ts @@ -171,7 +171,9 @@ export type ConfirmationModal = { export type PostMessageDescription = { type: ActionTriggerType.POST_MESSAGE; payload: { - callback: string; + message: any; + targetOrigin: any; + transfer?: any; }; }; diff --git a/app/client/src/sagas/ActionExecution/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecution/ActionExecutionSagas.ts index 9d3991d2d7..5b3729e6c4 100644 --- a/app/client/src/sagas/ActionExecution/ActionExecutionSagas.ts +++ b/app/client/src/sagas/ActionExecution/ActionExecutionSagas.ts @@ -10,8 +10,8 @@ import { import * as log from "loglevel"; import { all, call, put, takeEvery, takeLatest } from "redux-saga/effects"; import { - evaluateArgumentSaga, evaluateAndExecuteDynamicTrigger, + evaluateArgumentSaga, evaluateSnippetSaga, setAppVersionOnWorkerSaga, } from "sagas/EvaluationsSaga"; @@ -36,12 +36,12 @@ import { logActionExecutionError, TriggerFailureError, UncaughtPromiseError, + UserCancelledActionExecutionError, } from "sagas/ActionExecution/errorUtils"; import { clearIntervalSaga, setIntervalSaga, } from "sagas/ActionExecution/SetIntervalSaga"; -import { UserCancelledActionExecutionError } from "sagas/ActionExecution/errorUtils"; import { getCurrentLocationSaga, stopWatchCurrentLocation, @@ -49,6 +49,7 @@ import { } from "sagas/ActionExecution/GetCurrentLocationSaga"; import { requestModalConfirmationSaga } from "sagas/UtilSagas"; import { ModalType } from "reducers/uiReducers/modalActionReducer"; +import { postMessageSaga } from "./PostMessageSaga"; export type TriggerMeta = { source?: TriggerSource; @@ -142,6 +143,9 @@ export function* executeActionTriggers( throw new UserCancelledActionExecutionError(); } break; + case ActionTriggerType.POST_MESSAGE: + yield call(postMessageSaga, trigger.payload); + break; default: log.error("Trigger type unknown", trigger); throw Error("Trigger type unknown"); diff --git a/app/client/src/sagas/ActionExecution/PostMessageSaga.ts b/app/client/src/sagas/ActionExecution/PostMessageSaga.ts new file mode 100644 index 0000000000..5b71a81516 --- /dev/null +++ b/app/client/src/sagas/ActionExecution/PostMessageSaga.ts @@ -0,0 +1,16 @@ +import { spawn } from "redux-saga/effects"; +import { PostMessageDescription } from "../../entities/DataTree/actionTriggers"; +import { TriggerFailureError } from "sagas/ActionExecution/errorUtils"; + +export function* postMessageSaga(payload: PostMessageDescription["payload"]) { + yield spawn(executePostMessage, payload); +} + +function* executePostMessage(payload: PostMessageDescription["payload"]) { + const { message, targetOrigin, transfer } = payload; + try { + postMessage(message, targetOrigin || "*", transfer || undefined); + } catch (error) { + throw new TriggerFailureError(error.message); + } +} diff --git a/app/client/src/workers/Actions.ts b/app/client/src/workers/Actions.ts index bea21349b3..5ace1af966 100644 --- a/app/client/src/workers/Actions.ts +++ b/app/client/src/workers/Actions.ts @@ -261,11 +261,13 @@ const DATA_TREE_FUNCTIONS: Record< }; }, }, - postMessage: function(callback) { + postMessage: function(message: any, targetOrigin: any, transfer?: any) { return { type: ActionTriggerType.POST_MESSAGE, payload: { - callback: callback.toString(), + message, + targetOrigin, + transfer, }, executionType: ExecutionType.TRIGGER, };