@perses-dev/plugin-system 0.55.0-beta.3 → 0.55.0-beta.7

package/dist/cjs/components/ItemSelectionActionsOptionsEditor/ItemSelectionActionsOptionsEditor.js

@@ -1,1175 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get ACTION_ICONS () {
-        return ACTION_ICONS;
-    },
-    get ItemSelectionActionsEditor () {
-        return ItemSelectionActionsEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
-const _Alert = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Alert"));
-const _Check = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Check"));
-const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
-const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
-const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
-const _Cog = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Cog"));
-const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
-const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
-const _Link = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Link"));
-const _MagnifyScan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/MagnifyScan"));
-const _Pause = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pause"));
-const _Play = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Play"));
-const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
-const _Refresh = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Refresh"));
-const _RobotOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/RobotOutline"));
-const _Send = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Send"));
-const _Stop = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Stop"));
-const _Sync = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Sync"));
-const _Upload = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Upload"));
-const _react = require("react");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const HTTP_METHODS = [
-    'GET',
-    'POST',
-    'PUT',
-    'PATCH',
-    'DELETE'
-];
-const BATCH_MODES = [
-    {
-        value: 'individual',
-        label: 'Individual (one request per selection)'
-    },
-    {
-        value: 'batch',
-        label: 'Batch (single request with all selections)'
-    }
-];
-const CONTENT_TYPES = [
-    {
-        value: 'none',
-        label: 'None'
-    },
-    {
-        value: 'json',
-        label: 'JSON'
-    },
-    {
-        value: 'text',
-        label: 'Text'
-    }
-];
-const BODY_METHODS = [
-    'POST',
-    'PUT',
-    'PATCH'
-];
-const BODY_CLEAR_CONFIRM_MESSAGE = 'Changing this option will remove the current body template. Continue?';
-const ACTION_ICONS = [
-    {
-        value: 'play',
-        label: 'Play',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Play.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'pause',
-        label: 'Pause',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pause.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'stop',
-        label: 'Stop',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stop.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'delete',
-        label: 'Delete',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'refresh',
-        label: 'Refresh',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Refresh.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'send',
-        label: 'Send',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Send.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'download',
-        label: 'Download',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Download.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'upload',
-        label: 'Upload',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Upload.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'check',
-        label: 'Check',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Check.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'close',
-        label: 'Close',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'alert',
-        label: 'Alert',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'info',
-        label: 'Info',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'settings',
-        label: 'Settings',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Cog.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'link',
-        label: 'Link',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'sync',
-        label: 'Sync',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Sync.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'troubleshoot',
-        label: 'Troubleshoot',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_MagnifyScan.default, {
-            fontSize: "inherit"
-        })
-    },
-    {
-        value: 'ask-ai',
-        label: 'Ask AI',
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RobotOutline.default, {
-            fontSize: "inherit"
-        })
-    }
-];
-const URL_HELPER_TEXT = 'Supports interpolation: ${__data.fields["fieldName"]}, ${__data.index}, ${__data.count}';
-function createDefaultEventAction() {
-    return {
-        type: 'event',
-        name: 'New Event Action',
-        eventName: 'selection-action',
-        batchMode: 'individual',
-        enabled: true
-    };
-}
-function createDefaultWebhookAction() {
-    return {
-        type: 'webhook',
-        name: 'New Webhook Action',
-        url: '',
-        method: 'POST',
-        contentType: 'none',
-        batchMode: 'individual',
-        enabled: true
-    };
-}
-function InterpolationHelper({ batchMode }) {
-    let content = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        children: [
-            "Individual mode patterns: ",
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                children: '${__data.fields["field"]}'
-            }),
-            ", ",
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                children: '${__data.index}'
-            }),
-            ",",
-            ' ',
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                children: '${__data.count}'
-            })
-        ]
-    });
-    if (batchMode === 'batch') {
-        content = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            children: [
-                "Batch mode patterns: ",
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                    children: '${__data}'
-                }),
-                ", ",
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                    children: "${__data[0].fields['field']}"
-                }),
-                ",",
-                ' ',
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                    children: "${__data.fields['field']:csv}"
-                }),
-                ", ",
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                    children: '${__data.count}'
-                })
-            ]
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-        variant: "caption",
-        color: "text.secondary",
-        sx: {
-            mb: 1,
-            display: 'block'
-        },
-        children: content
-    });
-}
-function EventActionEditor({ action, index, onChange, onRemove, onMoveDown, onMoveUp }) {
-    const eventAction = action;
-    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(true);
-    const hasBodyTemplate = (eventAction.bodyTemplate ?? '').trim().length > 0;
-    const handleIncludesTemplateChange = (0, _react.useCallback)((event)=>{
-        const nextContentType = event.target.value;
-        const bodyTemplate = nextContentType === 'custom' ? JSON.stringify({}) : undefined;
-        onChange(index, {
-            ...eventAction,
-            bodyTemplate: bodyTemplate
-        });
-    }, [
-        index,
-        onChange,
-        eventAction
-    ]);
-    const handleBodyTemplateChange = (0, _react.useCallback)((template)=>{
-        onChange(index, {
-            ...eventAction,
-            bodyTemplate: template || undefined
-        });
-    }, [
-        index,
-        onChange,
-        eventAction
-    ]);
-    const jsonDataTemplate = (0, _react.useMemo)(()=>{
-        if (eventAction.bodyTemplate) {
-            try {
-                return JSON.parse(eventAction.bodyTemplate);
-            } catch  {
-                return {};
-            }
-        }
-    }, [
-        eventAction.bodyTemplate
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.DragAndDropElement, {
-        data: eventAction,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: 4,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                "data-testid": `event-action-toggle#${eventAction.name}`,
-                                size: "small",
-                                onClick: ()=>setIsCollapsed(!isCollapsed),
-                                children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                                variant: "overline",
-                                component: "h4",
-                                sx: {
-                                    textTransform: 'none'
-                                },
-                                children: [
-                                    "EVENT ACTION:",
-                                    ' ',
-                                    eventAction.name ? /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
-                                            children: eventAction.name
-                                        })
-                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
-                                        children: eventAction.name
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                                description: "Remove action settings",
-                                placement: "top",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                    size: "small",
-                                    sx: {
-                                        marginLeft: 'auto'
-                                    },
-                                    onClick: ()=>onRemove(index),
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
-                                }, "delete-action-button")
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                                description: "Reorder action settings",
-                                placement: "top",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DragButton, {
-                                    onMoveUp: onMoveUp,
-                                    onMoveDown: onMoveDown,
-                                    menuSx: {
-                                        '.MuiPaper-root': {
-                                            backgroundColor: (theme)=>theme.palette.background.lighter
-                                        }
-                                    }
-                                }, "reorder-action-button")
-                            })
-                        ]
-                    })
-                ]
-            }),
-            !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                spacing: 2,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                        label: "Enabled",
-                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                            checked: eventAction?.enabled ?? false,
-                            onChange: (e)=>onChange(index, {
-                                    ...eventAction,
-                                    enabled: e.target.checked
-                                })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                label: "Action Name",
-                                size: "small",
-                                value: eventAction.name,
-                                onChange: (e)=>onChange(index, {
-                                        ...eventAction,
-                                        name: e.target.value
-                                    }),
-                                sx: {
-                                    flexGrow: 1
-                                }
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-                                size: "small",
-                                sx: {
-                                    minWidth: 120
-                                },
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                                        children: "Icon"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
-                                        value: eventAction.icon || '',
-                                        label: "Icon",
-                                        onChange: (e)=>onChange(index, {
-                                                ...eventAction,
-                                                icon: e.target.value || undefined
-                                            }),
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                value: "",
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("em", {
-                                                    children: "None"
-                                                })
-                                            }),
-                                            ACTION_ICONS.map((iconOption)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                    value: iconOption.value,
-                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                                        direction: "row",
-                                                        alignItems: "center",
-                                                        spacing: 1,
-                                                        children: [
-                                                            iconOption.icon,
-                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                                                children: iconOption.label
-                                                            })
-                                                        ]
-                                                    })
-                                                }, iconOption.value))
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                label: "Event Name",
-                                size: "small",
-                                value: eventAction.eventName,
-                                onChange: (e)=>onChange(index, {
-                                        ...eventAction,
-                                        eventName: e.target.value
-                                    }),
-                                helperText: "Name of the CustomEvent to dispatch (e.g., 'selection-action')",
-                                fullWidth: true
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-                                size: "small",
-                                sx: {
-                                    flexGrow: 1,
-                                    minWidth: 280
-                                },
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                                        children: "Batch Mode"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
-                                        value: eventAction.batchMode ?? 'individual',
-                                        label: "Batch Mode",
-                                        onChange: (e)=>onChange(index, {
-                                                ...eventAction,
-                                                batchMode: e.target.value
-                                            }),
-                                        children: BATCH_MODES.map((mode)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                value: mode.value,
-                                                children: mode.label
-                                            }, mode.value))
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-                        component: "fieldset",
-                        size: "small",
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormLabel, {
-                                component: "legend",
-                                children: "Template"
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.RadioGroup, {
-                                row: true,
-                                value: hasBodyTemplate ? 'custom' : 'none',
-                                onChange: handleIncludesTemplateChange,
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                        value: "none",
-                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Radio, {
-                                            size: "small"
-                                        }),
-                                        label: "None"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                        value: "custom",
-                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Radio, {
-                                            size: "small"
-                                        }),
-                                        label: "JSON template"
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    hasBodyTemplate && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(InterpolationHelper, {
-                                batchMode: eventAction.batchMode
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
-                                value: jsonDataTemplate || '',
-                                onChange: handleBodyTemplateChange,
-                                minHeight: "100px",
-                                maxHeight: "200px"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        label: "Confirmation Message (optional)",
-                        size: "small",
-                        value: eventAction.confirmMessage || '',
-                        onChange: (e)=>onChange(index, {
-                                ...eventAction,
-                                confirmMessage: e.target.value || undefined
-                            }),
-                        helperText: "If set, shows a confirmation dialog before executing the action",
-                        fullWidth: true,
-                        multiline: true,
-                        rows: 2
-                    })
-                ]
-            })
-        ]
-    });
-}
-function WebhookActionEditor({ action, index, onChange, onRemove, onMoveUp, onMoveDown }) {
-    const webhookAction = action;
-    const [pendingChange, setPendingChange] = (0, _react.useState)(null);
-    const contentTypeValue = webhookAction.contentType ?? 'none';
-    const hasBodyTemplate = (webhookAction.bodyTemplate ?? '').trim().length > 0;
-    const supportsBody = BODY_METHODS.includes(webhookAction.method);
-    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(true);
-    const handleBodyTemplateChange = (0, _react.useCallback)((template)=>{
-        onChange(index, {
-            ...webhookAction,
-            bodyTemplate: template || undefined
-        });
-    }, [
-        index,
-        onChange,
-        webhookAction
-    ]);
-    const handleTextTemplateChange = (0, _react.useCallback)((event)=>{
-        onChange(index, {
-            ...webhookAction,
-            bodyTemplate: event.target.value || undefined
-        });
-    }, [
-        index,
-        onChange,
-        webhookAction
-    ]);
-    const handleContentTypeChange = (0, _react.useCallback)((event)=>{
-        const nextContentType = event.target.value;
-        if (nextContentType === contentTypeValue) {
-            return;
-        }
-        if (hasBodyTemplate) {
-            setPendingChange({
-                kind: 'contentType',
-                value: nextContentType
-            });
-            return;
-        }
-        onChange(index, {
-            ...webhookAction,
-            contentType: nextContentType
-        });
-    }, [
-        contentTypeValue,
-        hasBodyTemplate,
-        index,
-        onChange,
-        webhookAction
-    ]);
-    const handleMethodChange = (0, _react.useCallback)((event)=>{
-        const nextMethod = event.target.value;
-        if (nextMethod === webhookAction.method) {
-            return;
-        }
-        const nextSupportsBody = BODY_METHODS.includes(nextMethod);
-        if (!nextSupportsBody && hasBodyTemplate) {
-            setPendingChange({
-                kind: 'method',
-                value: nextMethod
-            });
-            return;
-        }
-        onChange(index, {
-            ...webhookAction,
-            method: nextMethod
-        });
-    }, [
-        hasBodyTemplate,
-        index,
-        onChange,
-        webhookAction
-    ]);
-    const handleConfirmClose = (0, _react.useCallback)(()=>{
-        setPendingChange(null);
-    }, []);
-    const handleConfirmApply = (0, _react.useCallback)(()=>{
-        if (!pendingChange) {
-            return;
-        }
-        if (pendingChange.kind === 'contentType') {
-            onChange(index, {
-                ...webhookAction,
-                contentType: pendingChange.value,
-                bodyTemplate: undefined
-            });
-        } else {
-            onChange(index, {
-                ...webhookAction,
-                method: pendingChange.value,
-                bodyTemplate: undefined
-            });
-        }
-        setPendingChange(null);
-    }, [
-        index,
-        onChange,
-        pendingChange,
-        webhookAction
-    ]);
-    const jsonBodyTemplate = (0, _react.useMemo)(()=>{
-        if (webhookAction.contentType === 'json' && webhookAction.bodyTemplate) {
-            try {
-                return JSON.parse(webhookAction.bodyTemplate);
-            } catch  {
-                return {};
-            }
-        }
-    }, [
-        webhookAction.bodyTemplate,
-        webhookAction.contentType
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.DragAndDropElement, {
-        data: webhookAction,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: 4,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                "data-testid": `column-toggle#${webhookAction.name}`,
-                                size: "small",
-                                onClick: ()=>setIsCollapsed(!isCollapsed),
-                                children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                                variant: "overline",
-                                component: "h4",
-                                sx: {
-                                    textTransform: 'none'
-                                },
-                                children: [
-                                    "WEBHOOK ACTION: ",
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
-                                        children: webhookAction.name
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                                description: "Remove action settings",
-                                placement: "top",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                    size: "small",
-                                    sx: {
-                                        marginLeft: 'auto'
-                                    },
-                                    onClick: ()=>onRemove(index),
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
-                                }, "delete-action-button")
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                                description: "Reorder action settings",
-                                placement: "top",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DragButton, {
-                                    onMoveUp: onMoveUp,
-                                    onMoveDown: onMoveDown,
-                                    menuSx: {
-                                        '.MuiPaper-root': {
-                                            backgroundColor: (theme)=>theme.palette.background.lighter
-                                        }
-                                    }
-                                }, "reorder-action-button")
-                            })
-                        ]
-                    })
-                ]
-            }),
-            !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                spacing: 2,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                        label: "Enabled",
-                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                            checked: action?.enabled ?? false,
-                            onChange: (e)=>onChange(index, {
-                                    ...webhookAction,
-                                    enabled: e.target.checked
-                                })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                label: "Action Name",
-                                size: "small",
-                                value: webhookAction.name,
-                                onChange: (e)=>onChange(index, {
-                                        ...webhookAction,
-                                        name: e.target.value
-                                    }),
-                                sx: {
-                                    flexGrow: 1
-                                }
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-                                size: "small",
-                                sx: {
-                                    minWidth: 120
-                                },
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                                        children: "Icon"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
-                                        value: webhookAction.icon || '',
-                                        label: "Icon",
-                                        onChange: (e)=>onChange(index, {
-                                                ...webhookAction,
-                                                icon: e.target.value || undefined
-                                            }),
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                value: "",
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("em", {
-                                                    children: "None"
-                                                })
-                                            }),
-                                            ACTION_ICONS.map((iconOption)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                    value: iconOption.value,
-                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                                        direction: "row",
-                                                        alignItems: "center",
-                                                        spacing: 1,
-                                                        children: [
-                                                            iconOption.icon,
-                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                                                children: iconOption.label
-                                                            })
-                                                        ]
-                                                    })
-                                                }, iconOption.value))
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        label: "URL",
-                        size: "small",
-                        value: webhookAction.url,
-                        onChange: (e)=>onChange(index, {
-                                ...webhookAction,
-                                url: e.target.value
-                            }),
-                        helperText: URL_HELPER_TEXT,
-                        fullWidth: true
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        spacing: 2,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-                                size: "small",
-                                sx: {
-                                    minWidth: 120
-                                },
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                                        children: "Method"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
-                                        value: webhookAction.method,
-                                        label: "Method",
-                                        onChange: handleMethodChange,
-                                        children: HTTP_METHODS.map((method)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                value: method,
-                                                children: method
-                                            }, method))
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-                                size: "small",
-                                sx: {
-                                    flexGrow: 1
-                                },
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                                        children: "Batch Mode"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
-                                        value: webhookAction.batchMode,
-                                        label: "Batch Mode",
-                                        onChange: (e)=>onChange(index, {
-                                                ...webhookAction,
-                                                batchMode: e.target.value
-                                            }),
-                                        children: BATCH_MODES.map((mode)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                value: mode.value,
-                                                children: mode.label
-                                            }, mode.value))
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-                        component: "fieldset",
-                        size: "small",
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormLabel, {
-                                component: "legend",
-                                children: "Content Type"
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.RadioGroup, {
-                                row: true,
-                                value: contentTypeValue,
-                                onChange: handleContentTypeChange,
-                                children: CONTENT_TYPES.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                        value: option.value,
-                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Radio, {
-                                            size: "small"
-                                        }),
-                                        label: option.label
-                                    }, option.value))
-                            })
-                        ]
-                    }),
-                    supportsBody && contentTypeValue !== 'none' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                variant: "body2",
-                                color: "text.secondary",
-                                sx: {
-                                    mb: 1
-                                },
-                                children: contentTypeValue === 'json' ? 'Body Template (JSON)' : 'Body Template (Text)'
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(InterpolationHelper, {
-                                batchMode: webhookAction.batchMode
-                            }),
-                            contentTypeValue === 'json' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
-                                value: jsonBodyTemplate || '',
-                                onChange: handleBodyTemplateChange,
-                                minHeight: "100px",
-                                maxHeight: "200px"
-                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                value: webhookAction.bodyTemplate || '',
-                                onChange: handleTextTemplateChange,
-                                fullWidth: true,
-                                multiline: true,
-                                rows: 5
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        label: "Confirmation Message (optional)",
-                        size: "small",
-                        value: webhookAction.confirmMessage || '',
-                        onChange: (e)=>onChange(index, {
-                                ...webhookAction,
-                                confirmMessage: e.target.value || undefined
-                            }),
-                        helperText: "If set, shows a confirmation dialog before executing the action",
-                        fullWidth: true,
-                        multiline: true,
-                        rows: 2
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
-                open: Boolean(pendingChange),
-                onClose: handleConfirmClose,
-                "aria-labelledby": "selection-body-clear-title",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
-                        id: "selection-body-clear-title",
-                        children: "Remove Body Template?"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContentText, {
-                            children: BODY_CLEAR_CONFIRM_MESSAGE
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogActions, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                onClick: handleConfirmClose,
-                                children: "Cancel"
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                onClick: handleConfirmApply,
-                                variant: "contained",
-                                color: "primary",
-                                children: "Continue"
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
-function ItemSelectionActionsEditor({ actionOptions, selectionOptions, onChangeActions, onChangeSelection }) {
-    const actions = (0, _react.useMemo)(()=>actionOptions || {
-            enabled: true,
-            displayInHeader: true,
-            displayWithItem: false
-        }, [
-        actionOptions
-    ]);
-    const handleEnableActionsChange = (_, checked)=>{
-        onChangeActions({
-            ...actions,
-            enabled: checked ? true : undefined
-        });
-    };
-    const handleEnableSelectionChange = (_, checked)=>{
-        onChangeSelection({
-            ...selectionOptions,
-            enabled: checked ? true : undefined
-        });
-    };
-    const handleDisplayInHeaderChange = (_, checked)=>{
-        onChangeActions({
-            ...actions,
-            displayInHeader: checked ? true : undefined
-        });
-    };
-    const handleDisplayWithItemChange = (_, checked)=>{
-        onChangeActions({
-            ...actions,
-            displayWithItem: checked ? true : undefined
-        });
-    };
-    const handleAddEventAction = (0, _react.useCallback)(()=>{
-        onChangeActions({
-            ...actions,
-            actionsList: [
-                ...actions.actionsList ?? [],
-                createDefaultEventAction()
-            ]
-        });
-    }, [
-        actions,
-        onChangeActions
-    ]);
-    const handleAddWebhookAction = (0, _react.useCallback)(()=>{
-        onChangeActions({
-            ...actions,
-            actionsList: [
-                ...actions.actionsList ?? [],
-                createDefaultWebhookAction()
-            ]
-        });
-    }, [
-        actions,
-        onChangeActions
-    ]);
-    const handleActionChange = (0, _react.useCallback)((index, updatedAction)=>{
-        const newActions = actions.actionsList ? [
-            ...actions.actionsList
-        ] : [];
-        newActions[index] = updatedAction;
-        onChangeActions({
-            ...actions,
-            actionsList: newActions
-        });
-    }, [
-        actions,
-        onChangeActions
-    ]);
-    const handleRemoveAction = (0, _react.useCallback)((index)=>{
-        const newActions = actions.actionsList ? actions.actionsList.filter((_, i)=>i !== index) : [];
-        onChangeActions(newActions.length > 0 ? {
-            ...actions,
-            actionsList: newActions
-        } : undefined);
-    }, [
-        actions,
-        onChangeActions
-    ]);
-    (0, _components.useDragAndDropMonitor)({
-        elements: actions.actionsList,
-        accessKey: 'name',
-        onChange: (newElements)=>{
-            onChangeActions({
-                ...actions,
-                actionsList: newElements
-            });
-        }
-    });
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        spacing: 1,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Enable Item Selection",
-                description: "Allow selecting items",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: selectionOptions?.enabled ?? false,
-                    onChange: handleEnableSelectionChange
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Enable Item Actions",
-                description: "Allow executing actions on selected items",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: actionOptions?.enabled ?? false,
-                    onChange: handleEnableActionsChange
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Display Actions in Panel Header",
-                description: "Show action buttons in the panel header when items are selected",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: actionOptions?.displayInHeader ?? false,
-                    onChange: handleDisplayInHeaderChange
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Display Actions with Each Item",
-                description: "Show action buttons alongside each item when selected",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: actionOptions?.displayWithItem ?? false,
-                    onChange: handleDisplayWithItemChange
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
-                title: "Actions",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                    spacing: 3,
-                    children: [
-                        !actions.actionsList || actions.actionsList.length === 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                            variant: "body2",
-                            color: "text.secondary",
-                            fontStyle: "italic",
-                            children: "No actions defined. Add an action to enable triggering events or webhooks on selected data."
-                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                            spacing: 1,
-                            border: "none",
-                            children: actions.actionsList && actions.actionsList.map((action, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                                    borderBottom: 1,
-                                    borderColor: (theme)=>theme.palette.divider,
-                                    pb: 1,
-                                    children: action.type === 'event' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(EventActionEditor, {
-                                        action: action,
-                                        index: index,
-                                        onChange: handleActionChange,
-                                        onRemove: handleRemoveAction,
-                                        onMoveDown: ()=>onChangeActions({
-                                                ...actions,
-                                                actionsList: (0, _components.handleMoveDown)(action, actions.actionsList)
-                                            }),
-                                        onMoveUp: ()=>onChangeActions({
-                                                ...actions,
-                                                actionsList: (0, _components.handleMoveUp)(action, actions.actionsList)
-                                            })
-                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(WebhookActionEditor, {
-                                        action: action,
-                                        index: index,
-                                        onChange: handleActionChange,
-                                        onRemove: handleRemoveAction,
-                                        onMoveDown: ()=>onChangeActions({
-                                                ...actions,
-                                                actionsList: (0, _components.handleMoveDown)(action, actions.actionsList)
-                                            }),
-                                        onMoveUp: ()=>onChangeActions({
-                                                ...actions,
-                                                actionsList: (0, _components.handleMoveUp)(action, actions.actionsList)
-                                            })
-                                    })
-                                }, index))
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    variant: "contained",
-                                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
-                                    onClick: handleAddEventAction,
-                                    children: "Add Event Action"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    variant: "contained",
-                                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
-                                    onClick: handleAddWebhookAction,
-                                    children: "Add Webhook Action"
-                                })
-                            ]
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}