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

package/dist/components/ItemSelectionActionsOptionsEditor/ItemSelectionActionsOptionsEditor.js

@@ -0,0 +1,1154 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, FormLabel, IconButton, InputLabel, MenuItem, Radio, RadioGroup, Select, Stack, Switch, TextField, Typography } from '@mui/material';
+import { DragAndDropElement, DragButton, handleMoveDown, handleMoveUp, InfoTooltip, JSONEditor, OptionsEditorControl, OptionsEditorGroup, useDragAndDropMonitor } from '@perses-dev/components';
+import AlertIcon from 'mdi-material-ui/Alert';
+import CheckIcon from 'mdi-material-ui/Check';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+import ChevronRight from 'mdi-material-ui/ChevronRight';
+import CloseIcon from 'mdi-material-ui/Close';
+import SettingsIcon from 'mdi-material-ui/Cog';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import DownloadIcon from 'mdi-material-ui/Download';
+import InfoIcon from 'mdi-material-ui/InformationOutline';
+import LinkIcon from 'mdi-material-ui/Link';
+import MagnifyScan from 'mdi-material-ui/MagnifyScan';
+import PauseIcon from 'mdi-material-ui/Pause';
+import PlayIcon from 'mdi-material-ui/Play';
+import PlusIcon from 'mdi-material-ui/Plus';
+import RefreshIcon from 'mdi-material-ui/Refresh';
+import RobotOutline from 'mdi-material-ui/RobotOutline';
+import SendIcon from 'mdi-material-ui/Send';
+import StopIcon from 'mdi-material-ui/Stop';
+import SyncIcon from 'mdi-material-ui/Sync';
+import UploadIcon from 'mdi-material-ui/Upload';
+import { useCallback, useMemo, useState } from 'react';
+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?';
+/** Available action icons with their display components */ export const ACTION_ICONS = [
+    {
+        value: 'play',
+        label: 'Play',
+        icon: /*#__PURE__*/ _jsx(PlayIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'pause',
+        label: 'Pause',
+        icon: /*#__PURE__*/ _jsx(PauseIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'stop',
+        label: 'Stop',
+        icon: /*#__PURE__*/ _jsx(StopIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'delete',
+        label: 'Delete',
+        icon: /*#__PURE__*/ _jsx(DeleteIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'refresh',
+        label: 'Refresh',
+        icon: /*#__PURE__*/ _jsx(RefreshIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'send',
+        label: 'Send',
+        icon: /*#__PURE__*/ _jsx(SendIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'download',
+        label: 'Download',
+        icon: /*#__PURE__*/ _jsx(DownloadIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'upload',
+        label: 'Upload',
+        icon: /*#__PURE__*/ _jsx(UploadIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'check',
+        label: 'Check',
+        icon: /*#__PURE__*/ _jsx(CheckIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'close',
+        label: 'Close',
+        icon: /*#__PURE__*/ _jsx(CloseIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'alert',
+        label: 'Alert',
+        icon: /*#__PURE__*/ _jsx(AlertIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'info',
+        label: 'Info',
+        icon: /*#__PURE__*/ _jsx(InfoIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'settings',
+        label: 'Settings',
+        icon: /*#__PURE__*/ _jsx(SettingsIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'link',
+        label: 'Link',
+        icon: /*#__PURE__*/ _jsx(LinkIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'sync',
+        label: 'Sync',
+        icon: /*#__PURE__*/ _jsx(SyncIcon, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'troubleshoot',
+        label: 'Troubleshoot',
+        icon: /*#__PURE__*/ _jsx(MagnifyScan, {
+            fontSize: "inherit"
+        })
+    },
+    {
+        value: 'ask-ai',
+        label: 'Ask AI',
+        icon: /*#__PURE__*/ _jsx(RobotOutline, {
+            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__*/ _jsxs("div", {
+        children: [
+            "Individual mode patterns: ",
+            /*#__PURE__*/ _jsx("code", {
+                children: '${__data.fields["field"]}'
+            }),
+            ", ",
+            /*#__PURE__*/ _jsx("code", {
+                children: '${__data.index}'
+            }),
+            ",",
+            ' ',
+            /*#__PURE__*/ _jsx("code", {
+                children: '${__data.count}'
+            })
+        ]
+    });
+    if (batchMode === 'batch') {
+        content = /*#__PURE__*/ _jsxs("div", {
+            children: [
+                "Batch mode patterns: ",
+                /*#__PURE__*/ _jsx("code", {
+                    children: '${__data}'
+                }),
+                ", ",
+                /*#__PURE__*/ _jsx("code", {
+                    children: "${__data[0].fields['field']}"
+                }),
+                ",",
+                ' ',
+                /*#__PURE__*/ _jsx("code", {
+                    children: "${__data.fields['field']:csv}"
+                }),
+                ", ",
+                /*#__PURE__*/ _jsx("code", {
+                    children: '${__data.count}'
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsx(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] = useState(true);
+    const hasBodyTemplate = (eventAction.bodyTemplate ?? '').trim().length > 0;
+    const handleIncludesTemplateChange = useCallback((event)=>{
+        const nextContentType = event.target.value;
+        const bodyTemplate = nextContentType === 'custom' ? JSON.stringify({}) : undefined;
+        onChange(index, {
+            ...eventAction,
+            bodyTemplate: bodyTemplate
+        });
+    }, [
+        index,
+        onChange,
+        eventAction
+    ]);
+    const handleBodyTemplateChange = useCallback((template)=>{
+        onChange(index, {
+            ...eventAction,
+            bodyTemplate: template || undefined
+        });
+    }, [
+        index,
+        onChange,
+        eventAction
+    ]);
+    const jsonDataTemplate = useMemo(()=>{
+        if (eventAction.bodyTemplate) {
+            try {
+                return JSON.parse(eventAction.bodyTemplate);
+            } catch  {
+                return {};
+            }
+        }
+    }, [
+        eventAction.bodyTemplate
+    ]);
+    return /*#__PURE__*/ _jsxs(DragAndDropElement, {
+        data: eventAction,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 4,
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                "data-testid": `event-action-toggle#${eventAction.name}`,
+                                size: "small",
+                                onClick: ()=>setIsCollapsed(!isCollapsed),
+                                children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
+                            }),
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "overline",
+                                component: "h4",
+                                sx: {
+                                    textTransform: 'none'
+                                },
+                                children: [
+                                    "EVENT ACTION:",
+                                    ' ',
+                                    eventAction.name ? /*#__PURE__*/ _jsx("span", {
+                                        children: /*#__PURE__*/ _jsx("strong", {
+                                            children: eventAction.name
+                                        })
+                                    }) : /*#__PURE__*/ _jsx("strong", {
+                                        children: eventAction.name
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(InfoTooltip, {
+                                description: "Remove action settings",
+                                placement: "top",
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    onClick: ()=>onRemove(index),
+                                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                }, "delete-action-button")
+                            }),
+                            /*#__PURE__*/ _jsx(InfoTooltip, {
+                                description: "Reorder action settings",
+                                placement: "top",
+                                children: /*#__PURE__*/ _jsx(DragButton, {
+                                    onMoveUp: onMoveUp,
+                                    onMoveDown: onMoveDown,
+                                    menuSx: {
+                                        '.MuiPaper-root': {
+                                            backgroundColor: (theme)=>theme.palette.background.lighter
+                                        }
+                                    }
+                                }, "reorder-action-button")
+                            })
+                        ]
+                    })
+                ]
+            }),
+            !isCollapsed && /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: "Enabled",
+                        control: /*#__PURE__*/ _jsx(Switch, {
+                            checked: eventAction?.enabled ?? false,
+                            onChange: (e)=>onChange(index, {
+                                    ...eventAction,
+                                    enabled: e.target.checked
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Action Name",
+                                size: "small",
+                                value: eventAction.name,
+                                onChange: (e)=>onChange(index, {
+                                        ...eventAction,
+                                        name: e.target.value
+                                    }),
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs(FormControl, {
+                                size: "small",
+                                sx: {
+                                    minWidth: 120
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(InputLabel, {
+                                        children: "Icon"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Select, {
+                                        value: eventAction.icon || '',
+                                        label: "Icon",
+                                        onChange: (e)=>onChange(index, {
+                                                ...eventAction,
+                                                icon: e.target.value || undefined
+                                            }),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                value: "",
+                                                children: /*#__PURE__*/ _jsx("em", {
+                                                    children: "None"
+                                                })
+                                            }),
+                                            ACTION_ICONS.map((iconOption)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: iconOption.value,
+                                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                                        direction: "row",
+                                                        alignItems: "center",
+                                                        spacing: 1,
+                                                        children: [
+                                                            iconOption.icon,
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: iconOption.label
+                                                            })
+                                                        ]
+                                                    })
+                                                }, iconOption.value))
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(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__*/ _jsxs(FormControl, {
+                                size: "small",
+                                sx: {
+                                    flexGrow: 1,
+                                    minWidth: 280
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(InputLabel, {
+                                        children: "Batch Mode"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Select, {
+                                        value: eventAction.batchMode ?? 'individual',
+                                        label: "Batch Mode",
+                                        onChange: (e)=>onChange(index, {
+                                                ...eventAction,
+                                                batchMode: e.target.value
+                                            }),
+                                        children: BATCH_MODES.map((mode)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                value: mode.value,
+                                                children: mode.label
+                                            }, mode.value))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(FormControl, {
+                        component: "fieldset",
+                        size: "small",
+                        children: [
+                            /*#__PURE__*/ _jsx(FormLabel, {
+                                component: "legend",
+                                children: "Template"
+                            }),
+                            /*#__PURE__*/ _jsxs(RadioGroup, {
+                                row: true,
+                                value: hasBodyTemplate ? 'custom' : 'none',
+                                onChange: handleIncludesTemplateChange,
+                                children: [
+                                    /*#__PURE__*/ _jsx(FormControlLabel, {
+                                        value: "none",
+                                        control: /*#__PURE__*/ _jsx(Radio, {
+                                            size: "small"
+                                        }),
+                                        label: "None"
+                                    }),
+                                    /*#__PURE__*/ _jsx(FormControlLabel, {
+                                        value: "custom",
+                                        control: /*#__PURE__*/ _jsx(Radio, {
+                                            size: "small"
+                                        }),
+                                        label: "JSON template"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    hasBodyTemplate && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(InterpolationHelper, {
+                                batchMode: eventAction.batchMode
+                            }),
+                            /*#__PURE__*/ _jsx(JSONEditor, {
+                                value: jsonDataTemplate || '',
+                                onChange: handleBodyTemplateChange,
+                                minHeight: "100px",
+                                maxHeight: "200px"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(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] = useState(null);
+    const contentTypeValue = webhookAction.contentType ?? 'none';
+    const hasBodyTemplate = (webhookAction.bodyTemplate ?? '').trim().length > 0;
+    const supportsBody = BODY_METHODS.includes(webhookAction.method);
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const handleBodyTemplateChange = useCallback((template)=>{
+        onChange(index, {
+            ...webhookAction,
+            bodyTemplate: template || undefined
+        });
+    }, [
+        index,
+        onChange,
+        webhookAction
+    ]);
+    const handleTextTemplateChange = useCallback((event)=>{
+        onChange(index, {
+            ...webhookAction,
+            bodyTemplate: event.target.value || undefined
+        });
+    }, [
+        index,
+        onChange,
+        webhookAction
+    ]);
+    const handleContentTypeChange = 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 = 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 = useCallback(()=>{
+        setPendingChange(null);
+    }, []);
+    const handleConfirmApply = 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 = useMemo(()=>{
+        if (webhookAction.contentType === 'json' && webhookAction.bodyTemplate) {
+            try {
+                return JSON.parse(webhookAction.bodyTemplate);
+            } catch  {
+                return {};
+            }
+        }
+    }, [
+        webhookAction.bodyTemplate,
+        webhookAction.contentType
+    ]);
+    return /*#__PURE__*/ _jsxs(DragAndDropElement, {
+        data: webhookAction,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 4,
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                "data-testid": `column-toggle#${webhookAction.name}`,
+                                size: "small",
+                                onClick: ()=>setIsCollapsed(!isCollapsed),
+                                children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
+                            }),
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "overline",
+                                component: "h4",
+                                sx: {
+                                    textTransform: 'none'
+                                },
+                                children: [
+                                    "WEBHOOK ACTION: ",
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: webhookAction.name
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(InfoTooltip, {
+                                description: "Remove action settings",
+                                placement: "top",
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    onClick: ()=>onRemove(index),
+                                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                }, "delete-action-button")
+                            }),
+                            /*#__PURE__*/ _jsx(InfoTooltip, {
+                                description: "Reorder action settings",
+                                placement: "top",
+                                children: /*#__PURE__*/ _jsx(DragButton, {
+                                    onMoveUp: onMoveUp,
+                                    onMoveDown: onMoveDown,
+                                    menuSx: {
+                                        '.MuiPaper-root': {
+                                            backgroundColor: (theme)=>theme.palette.background.lighter
+                                        }
+                                    }
+                                }, "reorder-action-button")
+                            })
+                        ]
+                    })
+                ]
+            }),
+            !isCollapsed && /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: "Enabled",
+                        control: /*#__PURE__*/ _jsx(Switch, {
+                            checked: action?.enabled ?? false,
+                            onChange: (e)=>onChange(index, {
+                                    ...webhookAction,
+                                    enabled: e.target.checked
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Action Name",
+                                size: "small",
+                                value: webhookAction.name,
+                                onChange: (e)=>onChange(index, {
+                                        ...webhookAction,
+                                        name: e.target.value
+                                    }),
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs(FormControl, {
+                                size: "small",
+                                sx: {
+                                    minWidth: 120
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(InputLabel, {
+                                        children: "Icon"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Select, {
+                                        value: webhookAction.icon || '',
+                                        label: "Icon",
+                                        onChange: (e)=>onChange(index, {
+                                                ...webhookAction,
+                                                icon: e.target.value || undefined
+                                            }),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                value: "",
+                                                children: /*#__PURE__*/ _jsx("em", {
+                                                    children: "None"
+                                                })
+                                            }),
+                                            ACTION_ICONS.map((iconOption)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: iconOption.value,
+                                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                                        direction: "row",
+                                                        alignItems: "center",
+                                                        spacing: 1,
+                                                        children: [
+                                                            iconOption.icon,
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: iconOption.label
+                                                            })
+                                                        ]
+                                                    })
+                                                }, iconOption.value))
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "URL",
+                        size: "small",
+                        value: webhookAction.url,
+                        onChange: (e)=>onChange(index, {
+                                ...webhookAction,
+                                url: e.target.value
+                            }),
+                        helperText: URL_HELPER_TEXT,
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsxs(FormControl, {
+                                size: "small",
+                                sx: {
+                                    minWidth: 120
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(InputLabel, {
+                                        children: "Method"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Select, {
+                                        value: webhookAction.method,
+                                        label: "Method",
+                                        onChange: handleMethodChange,
+                                        children: HTTP_METHODS.map((method)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                value: method,
+                                                children: method
+                                            }, method))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(FormControl, {
+                                size: "small",
+                                sx: {
+                                    flexGrow: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(InputLabel, {
+                                        children: "Batch Mode"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Select, {
+                                        value: webhookAction.batchMode,
+                                        label: "Batch Mode",
+                                        onChange: (e)=>onChange(index, {
+                                                ...webhookAction,
+                                                batchMode: e.target.value
+                                            }),
+                                        children: BATCH_MODES.map((mode)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                value: mode.value,
+                                                children: mode.label
+                                            }, mode.value))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(FormControl, {
+                        component: "fieldset",
+                        size: "small",
+                        children: [
+                            /*#__PURE__*/ _jsx(FormLabel, {
+                                component: "legend",
+                                children: "Content Type"
+                            }),
+                            /*#__PURE__*/ _jsx(RadioGroup, {
+                                row: true,
+                                value: contentTypeValue,
+                                onChange: handleContentTypeChange,
+                                children: CONTENT_TYPES.map((option)=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                        value: option.value,
+                                        control: /*#__PURE__*/ _jsx(Radio, {
+                                            size: "small"
+                                        }),
+                                        label: option.label
+                                    }, option.value))
+                            })
+                        ]
+                    }),
+                    supportsBody && contentTypeValue !== 'none' && /*#__PURE__*/ _jsxs(Box, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                sx: {
+                                    mb: 1
+                                },
+                                children: contentTypeValue === 'json' ? 'Body Template (JSON)' : 'Body Template (Text)'
+                            }),
+                            /*#__PURE__*/ _jsx(InterpolationHelper, {
+                                batchMode: webhookAction.batchMode
+                            }),
+                            contentTypeValue === 'json' ? /*#__PURE__*/ _jsx(JSONEditor, {
+                                value: jsonBodyTemplate || '',
+                                onChange: handleBodyTemplateChange,
+                                minHeight: "100px",
+                                maxHeight: "200px"
+                            }) : /*#__PURE__*/ _jsx(TextField, {
+                                value: webhookAction.bodyTemplate || '',
+                                onChange: handleTextTemplateChange,
+                                fullWidth: true,
+                                multiline: true,
+                                rows: 5
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(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__*/ _jsxs(Dialog, {
+                open: Boolean(pendingChange),
+                onClose: handleConfirmClose,
+                "aria-labelledby": "selection-body-clear-title",
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        id: "selection-body-clear-title",
+                        children: "Remove Body Template?"
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: /*#__PURE__*/ _jsx(DialogContentText, {
+                            children: BODY_CLEAR_CONFIRM_MESSAGE
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: handleConfirmClose,
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: handleConfirmApply,
+                                variant: "contained",
+                                color: "primary",
+                                children: "Continue"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function ItemSelectionActionsEditor({ actionOptions, selectionOptions, onChangeActions, onChangeSelection }) {
+    const actions = 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 = useCallback(()=>{
+        onChangeActions({
+            ...actions,
+            actionsList: [
+                ...actions.actionsList ?? [],
+                createDefaultEventAction()
+            ]
+        });
+    }, [
+        actions,
+        onChangeActions
+    ]);
+    const handleAddWebhookAction = useCallback(()=>{
+        onChangeActions({
+            ...actions,
+            actionsList: [
+                ...actions.actionsList ?? [],
+                createDefaultWebhookAction()
+            ]
+        });
+    }, [
+        actions,
+        onChangeActions
+    ]);
+    const handleActionChange = useCallback((index, updatedAction)=>{
+        const newActions = actions.actionsList ? [
+            ...actions.actionsList
+        ] : [];
+        newActions[index] = updatedAction;
+        onChangeActions({
+            ...actions,
+            actionsList: newActions
+        });
+    }, [
+        actions,
+        onChangeActions
+    ]);
+    const handleRemoveAction = useCallback((index)=>{
+        const newActions = actions.actionsList ? actions.actionsList.filter((_, i)=>i !== index) : [];
+        onChangeActions(newActions.length > 0 ? {
+            ...actions,
+            actionsList: newActions
+        } : undefined);
+    }, [
+        actions,
+        onChangeActions
+    ]);
+    useDragAndDropMonitor({
+        elements: actions.actionsList,
+        accessKey: 'name',
+        onChange: (newElements)=>{
+            onChangeActions({
+                ...actions,
+                actionsList: newElements
+            });
+        }
+    });
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Enable Item Selection",
+                description: "Allow selecting items",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: selectionOptions?.enabled ?? false,
+                    onChange: handleEnableSelectionChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Enable Item Actions",
+                description: "Allow executing actions on selected items",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: actionOptions?.enabled ?? false,
+                    onChange: handleEnableActionsChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Display Actions in Panel Header",
+                description: "Show action buttons in the panel header when items are selected",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: actionOptions?.displayInHeader ?? false,
+                    onChange: handleDisplayInHeaderChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Display Actions with Each Item",
+                description: "Show action buttons alongside each item when selected",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: actionOptions?.displayWithItem ?? false,
+                    onChange: handleDisplayWithItemChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                title: "Actions",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 3,
+                    children: [
+                        !actions.actionsList || actions.actionsList.length === 0 ? /*#__PURE__*/ _jsx(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__*/ _jsx(Stack, {
+                            spacing: 1,
+                            border: "none",
+                            children: actions.actionsList && actions.actionsList.map((action, index)=>/*#__PURE__*/ _jsx(Box, {
+                                    borderBottom: 1,
+                                    borderColor: (theme)=>theme.palette.divider,
+                                    pb: 1,
+                                    children: action.type === 'event' ? /*#__PURE__*/ _jsx(EventActionEditor, {
+                                        action: action,
+                                        index: index,
+                                        onChange: handleActionChange,
+                                        onRemove: handleRemoveAction,
+                                        onMoveDown: ()=>onChangeActions({
+                                                ...actions,
+                                                actionsList: handleMoveDown(action, actions.actionsList)
+                                            }),
+                                        onMoveUp: ()=>onChangeActions({
+                                                ...actions,
+                                                actionsList: handleMoveUp(action, actions.actionsList)
+                                            })
+                                    }) : /*#__PURE__*/ _jsx(WebhookActionEditor, {
+                                        action: action,
+                                        index: index,
+                                        onChange: handleActionChange,
+                                        onRemove: handleRemoveAction,
+                                        onMoveDown: ()=>onChangeActions({
+                                                ...actions,
+                                                actionsList: handleMoveDown(action, actions.actionsList)
+                                            }),
+                                        onMoveUp: ()=>onChangeActions({
+                                                ...actions,
+                                                actionsList: handleMoveUp(action, actions.actionsList)
+                                            })
+                                    })
+                                }, index))
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    startIcon: /*#__PURE__*/ _jsx(PlusIcon, {}),
+                                    onClick: handleAddEventAction,
+                                    children: "Add Event Action"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    startIcon: /*#__PURE__*/ _jsx(PlusIcon, {}),
+                                    onClick: handleAddWebhookAction,
+                                    children: "Add Webhook Action"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ItemSelectionActionsOptionsEditor.js.map