@perses-dev/dashboards 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -31,15 +31,18 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _context = require("../../context");
+const _PanelEditorProvider = require("../../context/PanelEditorProvider/PanelEditorProvider");
 const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
 function PanelEditorForm(props) {
     const { initialValues, initialAction, onSave, onClose } = props;
+    const pluginEditorRef = (0, _react.useRef)(null);
     const panelGroups = (0, _context.useListPanelGroups)();
     const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
@@ -50,6 +53,9 @@ function PanelEditorForm(props) {
         mode: 'onBlur',
         defaultValues: initialValues
     });
+    const { dashboard } = (0, _context.useDashboard)();
+    const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : _core.DEFAULT_DASHBOARD_DURATION;
+    const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
         pluginTypes: [
@@ -88,9 +94,11 @@ function PanelEditorForm(props) {
         setLinks,
         links
     ]);
-    const processForm = (data)=>{
+    const processForm = (0, _react.useCallback)((data)=>{
         onSave(data);
-    };
+    }, [
+        onSave
+    ]);
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
@@ -123,199 +131,213 @@ function PanelEditorForm(props) {
         control: form.control,
         name: 'panelDefinition.spec.plugin.kind'
     });
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
-        ...form,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: (theme)=>theme.spacing(1, 2),
-                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                },
+    const { timeRange } = (0, _pluginsystem.useTimeRangeParams)(initialTimeRange);
+    const handleSubmit = (0, _react.useCallback)(()=>{
+        pluginEditorRef.current?.flushChanges?.();
+        form.handleSubmit(processForm)();
+    }, [
+        form,
+        processForm
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
+        timeRange: timeRange,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.FormProvider, {
+            ...form,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PanelEditorProvider.PanelEditorProvider, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                        variant: "h2",
-                        children: [
-                            titleAction,
-                            " Panel"
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        marginLeft: "auto",
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: (theme)=>theme.spacing(1, 2),
+                            borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                        },
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                variant: "contained",
-                                disabled: !form.formState.isValid,
-                                onClick: form.handleSubmit(processForm),
-                                children: submitText
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                variant: "h2",
+                                children: [
+                                    titleAction,
+                                    " Panel"
+                                ]
                             }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                color: "secondary",
-                                variant: "outlined",
-                                onClick: handleCancel,
-                                children: "Cancel"
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                marginLeft: "auto",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                        variant: "contained",
+                                        disabled: !form.formState.isValid,
+                                        onClick: handleSubmit,
+                                        children: submitText
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                        color: "secondary",
+                                        variant: "outlined",
+                                        onClick: handleCancel,
+                                        children: "Cancel"
+                                    })
+                                ]
                             })
                         ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                id: panelEditorFormId,
-                sx: {
-                    flex: 1,
-                    overflowY: 'scroll',
-                    padding: (theme)=>theme.spacing(2)
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                    container: true,
-                    spacing: 2,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                            item: true,
-                            xs: 8,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                control: form.control,
-                                name: "panelDefinition.spec.display.name",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                        ...field,
-                                        required: true,
-                                        fullWidth: true,
-                                        label: "Name",
-                                        error: !!fieldState.error,
-                                        helperText: fieldState.error?.message,
-                                        value: watchedName ?? '',
-                                        onChange: (event)=>{
-                                            field.onChange(event);
-                                            setName(event.target.value);
-                                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        id: panelEditorFormId,
+                        sx: {
+                            flex: 1,
+                            overflowY: 'scroll',
+                            padding: (theme)=>theme.spacing(2)
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                            container: true,
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                        control: form.control,
+                                        name: "panelDefinition.spec.display.name",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                ...field,
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Name",
+                                                error: !!fieldState.error,
+                                                helperText: fieldState.error?.message,
+                                                value: watchedName ?? '',
+                                                onChange: (event)=>{
+                                                    field.onChange(event);
+                                                    setName(event.target.value);
+                                                }
+                                            })
                                     })
-                            })
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                            item: true,
-                            xs: 4,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                control: form.control,
-                                name: "groupId",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                        select: true,
-                                        ...field,
-                                        required: true,
-                                        fullWidth: true,
-                                        label: "Group",
-                                        error: !!fieldState.error,
-                                        helperText: fieldState.error?.message,
-                                        onChange: (event)=>{
-                                            field.onChange(event);
-                                        },
-                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                value: panelGroup.id,
-                                                children: panelGroup.title ?? `Group ${index + 1}`
-                                            }, panelGroup.id))
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 4,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                        control: form.control,
+                                        name: "groupId",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                select: true,
+                                                ...field,
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Group",
+                                                error: !!fieldState.error,
+                                                helperText: fieldState.error?.message,
+                                                onChange: (event)=>{
+                                                    field.onChange(event);
+                                                },
+                                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                        value: panelGroup.id,
+                                                        children: panelGroup.title ?? `Group ${index + 1}`
+                                                    }, panelGroup.id))
+                                            })
                                     })
-                            })
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                            item: true,
-                            xs: 8,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                control: form.control,
-                                name: "panelDefinition.spec.display.description",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                        ...field,
-                                        fullWidth: true,
-                                        label: "Description",
-                                        error: !!fieldState.error,
-                                        helperText: fieldState.error?.message,
-                                        value: watchedDescription ?? '',
-                                        onChange: (event)=>{
-                                            field.onChange(event);
-                                            setDescription(event.target.value);
-                                        }
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                        control: form.control,
+                                        name: "panelDefinition.spec.display.description",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                ...field,
+                                                fullWidth: true,
+                                                label: "Description",
+                                                error: !!fieldState.error,
+                                                helperText: fieldState.error?.message,
+                                                value: watchedDescription ?? '',
+                                                onChange: (event)=>{
+                                                    field.onChange(event);
+                                                    setDescription(event.target.value);
+                                                }
+                                            })
                                     })
-                            })
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                            item: true,
-                            xs: 4,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                control: form.control,
-                                name: "panelDefinition.spec.plugin.kind",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
-                                        ...field,
-                                        pluginTypes: [
-                                            'Panel'
-                                        ],
-                                        required: true,
-                                        fullWidth: true,
-                                        label: "Type",
-                                        disabled: pluginEditor.isLoading,
-                                        error: !!pluginEditor.error || !!fieldState.error,
-                                        helperText: pluginEditor.error?.message ?? fieldState.error?.message,
-                                        value: {
-                                            type: 'Panel',
-                                            kind: watchedPluginKind
-                                        },
-                                        onChange: (event)=>{
-                                            field.onChange(event.kind);
-                                            pluginEditor.onSelectionChange(event);
-                                        }
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 4,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                        control: form.control,
+                                        name: "panelDefinition.spec.plugin.kind",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                                ...field,
+                                                pluginTypes: [
+                                                    'Panel'
+                                                ],
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Type",
+                                                disabled: pluginEditor.isLoading,
+                                                error: !!pluginEditor.error || !!fieldState.error,
+                                                helperText: pluginEditor.error?.message ?? fieldState.error?.message,
+                                                value: {
+                                                    type: 'Panel',
+                                                    kind: watchedPluginKind
+                                                },
+                                                onChange: (event)=>{
+                                                    field.onChange(event.kind);
+                                                    pluginEditor.onSelectionChange(event);
+                                                }
+                                            })
                                     })
-                            })
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                            item: true,
-                            xs: 12,
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "h4",
-                                    marginBottom: 1,
-                                    children: "Preview"
                                 }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                    FallbackComponent: _components.ErrorAlert,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
-                                        panelDefinition: panelDefinition
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                            variant: "h4",
+                                            marginBottom: 1,
+                                            children: "Preview"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                            FallbackComponent: _components.ErrorAlert,
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
+                                                panelDefinition: panelDefinition
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                        FallbackComponent: _components.ErrorAlert,
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
+                                            ref: pluginEditorRef,
+                                            control: form.control,
+                                            panelDefinition: panelDefinition,
+                                            onJSONChange: handlePanelDefinitionChange,
+                                            onQueriesChange: (queries)=>{
+                                                setQueries(queries);
+                                            },
+                                            onPluginSpecChange: (spec)=>{
+                                                pluginEditor.onSpecChange(spec);
+                                            }
+                                        })
                                     })
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                            item: true,
-                            xs: 12,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                FallbackComponent: _components.ErrorAlert,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
-                                    control: form.control,
-                                    panelDefinition: panelDefinition,
-                                    onJSONChange: handlePanelDefinitionChange,
-                                    onQueriesChange: (queries)=>{
-                                        setQueries(queries);
-                                    },
-                                    onPluginSpecChange: (spec)=>{
-                                        pluginEditor.onSpecChange(spec);
-                                    }
-                                })
-                            })
                         })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
-                description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
-                isOpen: isDiscardDialogOpened,
-                onCancel: ()=>{
-                    setDiscardDialogOpened(false);
-                },
-                onDiscardChanges: ()=>{
-                    setDiscardDialogOpened(false);
-                    onClose();
-                }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+                        description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
+                        isOpen: isDiscardDialogOpened,
+                        onCancel: ()=>{
+                            setDiscardDialogOpened(false);
+                        },
+                        onDiscardChanges: ()=>{
+                            setDiscardDialogOpened(false);
+                            onClose();
+                        }
+                    })
+                ]
             })
-        ]
+        })
     });
 }
 const panelEditorFormId = 'panel-editor-form';

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -25,13 +25,16 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _Panel = require("../Panel");
+const _context = require("../../context");
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
 function PanelPreview({ panelDefinition }) {
     const boxRef = (0, _react.useRef)(null);
     let width = PANEL_PREVIEW_DEFAULT_WIDTH;
+    const panelEditorContext = (0, _react.useContext)(_context.PanelEditorContext);
     if (boxRef.current !== null) {
         width = boxRef.current.getBoundingClientRect().width;
+        panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
     }
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -21,18 +21,15 @@ Object.defineProperty(exports, "PanelGroupDialog", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _react = require("react");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
 const _context = require("../../context");
 const _PanelGroupEditorForm = require("./PanelGroupEditorForm");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function PanelGroupDialog() {
     const panelGroupEditor = (0, _context.usePanelGroupEditor)();
+    const variables = (0, _pluginsystem.useVariableValues)();
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = (0, _react.useState)(false);
     const handleClose = ()=>setIsClosing(true);
@@ -51,40 +48,31 @@ function PanelGroupDialog() {
         panelGroupEditor.applyChanges(values);
         handleClose();
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Dialog, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
         open: isOpen,
         TransitionProps: {
             onExited: handleExited
         },
         children: panelGroupEditor !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogTitle, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Header, {
                     children: [
                         panelGroupEditor.mode,
                         " Panel Group"
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                    "aria-label": "Close",
-                    onClick: panelGroupEditor.close,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Content, {
                     dividers: true,
                     sx: {
                         width: '500px'
                     },
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelGroupEditorForm.PanelGroupEditorForm, {
                         initialValues: panelGroupEditor.initialValues,
+                        variables: Object.keys(variables),
                         onSubmit: handleSubmit
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogActions, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Actions, {
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                             variant: "contained",

package/dist/cjs/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -32,18 +32,16 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 function PanelGroupEditorForm(props) {
-    const { initialValues, onSubmit } = props;
+    const { initialValues, variables, onSubmit } = props;
     const [title, setTitle] = (0, _react.useState)(initialValues.title);
     const [isCollapsed, setIsCollapsed] = (0, _react.useState)(initialValues.isCollapsed);
-    const handleCollapsedChange = (e)=>{
-        const next = e.target.value;
-        setIsCollapsed(next === 'Closed');
-    };
+    const [repeatVariable, setRepeatVariable] = (0, _react.useState)(initialValues.repeatVariable);
     const handleSubmit = (e)=>{
         e.preventDefault();
         onSubmit({
             title,
-            isCollapsed
+            isCollapsed,
+            repeatVariable
         });
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("form", {
@@ -58,25 +56,21 @@ function PanelGroupEditorForm(props) {
                     label: "Name",
                     variant: "outlined",
                     value: title,
-                    onChange: (e)=>setTitle(e.target.value)
+                    onChange: (e)=>setTitle(e.target.value),
+                    "data-testid": "panel-group-editor-name"
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
                 fullWidth: true,
                 margin: "normal",
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                        id: "select-collapse-state",
-                        children: "Collapse State"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                        select: true,
                         required: true,
-                        displayEmpty: true,
-                        labelId: "select-collapse-state",
                         label: "Collapse State",
                         size: "small",
                         value: isCollapsed ? 'Closed' : 'Open',
-                        onChange: handleCollapsedChange,
+                        onChange: (e)=>setIsCollapsed(e.target.value === 'Closed'),
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                 value: "Open",
@@ -87,6 +81,32 @@ function PanelGroupEditorForm(props) {
                                 children: "Closed"
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
+                        fullWidth: true,
+                        margin: "normal",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                            select: true,
+                            label: "Repeat Variable",
+                            variant: "outlined",
+                            value: repeatVariable ?? '',
+                            onChange: (e)=>setRepeatVariable(e.target.value === '' ? undefined : e.target.value),
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        sx: {
+                                            fontStyle: 'italic'
+                                        },
+                                        children: "None"
+                                    })
+                                }),
+                                variables?.sort((a, b)=>a.localeCompare(b)).map((variable)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: variable,
+                                        children: variable
+                                    }, variable))
+                            ]
+                        })
                     })
                 ]
             })