@perses-dev/plugin-system 0.53.0-rc.1 → 0.53.0-rc.3

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

@@ -0,0 +1,1175 @@
+// 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"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}