@perses-dev/dashboards 0.52.0-beta.5 → 0.52.0-rc.1

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

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "PanelDrawer", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _PanelEditorForm = require("./PanelEditorForm");
 const PanelDrawer = ()=>{
@@ -30,42 +31,78 @@ const PanelDrawer = ()=>{
     // 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);
     // Drawer is open if we have a model and we're not transitioning out
-    const isOpen = panelEditor !== undefined && isClosing === false;
-    function handleSave(values) {
+    const isOpen = panelEditor !== undefined && !isClosing;
+    const handleSave = (0, _react.useCallback)((values)=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
         if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
         setIsClosing(true);
-    }
+    }, [
+        panelEditor
+    ]);
     const handleClose = ()=>{
         setIsClosing(true);
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
-    const handleExited = ()=>{
+    const handleExited = (0, _react.useCallback)(()=>{
         panelEditor?.close();
         setIsClosing(false);
-    };
+    }, [
+        panelEditor
+    ]);
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
     // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
     const handleClickOut = ()=>{
     /* do nothing */ };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
-        isOpen: isOpen,
-        onClose: handleClickOut,
-        SlideProps: {
-            onExited: handleExited
-        },
-        "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-            FallbackComponent: _components.ErrorAlert,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
-                initialAction: panelEditor.mode,
-                initialValues: panelEditor.initialValues,
-                onSave: handleSave,
-                onClose: handleClose
+    const drawer = (0, _react.useMemo)(()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
+            isOpen: isOpen,
+            onClose: handleClickOut,
+            SlideProps: {
+                onExited: handleExited
+            },
+            "data-testid": "panel-editor",
+            children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                FallbackComponent: _components.ErrorAlert,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
+                    initialAction: panelEditor.mode,
+                    initialValues: panelEditor.initialValues,
+                    onSave: handleSave,
+                    onClose: handleClose
+                })
             })
-        })
-    });
+        });
+    }, [
+        handleExited,
+        handleSave,
+        isOpen,
+        panelEditor
+    ]);
+    // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider
+    if (panelEditor?.panelGroupItemId?.repeatVariable) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(RepeatVariableWrapper, {
+            repeatVariable: panelEditor.panelGroupItemId.repeatVariable,
+            children: drawer
+        });
+    }
+    return drawer;
 };
+// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value
+// This is necessary for previewing panels that use repeat variables and query editor
+function RepeatVariableWrapper({ repeatVariable, children }) {
+    const variables = (0, _pluginsystem.useVariableValues)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
+        value: {
+            state: {
+                ...variables,
+                [repeatVariable[0]]: {
+                    value: repeatVariable[1],
+                    loading: false
+                }
+            }
+        },
+        children: children
+    });
+}

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

@@ -31,6 +31,7 @@ _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");
@@ -40,6 +41,7 @@ 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 +52,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 +93,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 +130,211 @@ 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}`
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                        variant: "h2",
-                        children: [
-                            titleAction,
-                            " Panel"
-                        ]
-                    }),
-                    /*#__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: form.handleSubmit(processForm),
-                                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,
+    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.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}`
+                    },
                     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: 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.jsxs)(_material.Typography, {
+                            variant: "h2",
+                            children: [
+                                titleAction,
+                                " Panel"
+                            ]
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                            item: true,
-                            xs: 12,
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
                             children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "h4",
-                                    marginBottom: 1,
-                                    children: "Preview"
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    variant: "contained",
+                                    disabled: !form.formState.isValid,
+                                    onClick: handleSubmit,
+                                    children: submitText
                                 }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                    FallbackComponent: _components.ErrorAlert,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
-                                        panelDefinition: panelDefinition
-                                    })
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
                                 })
                             ]
-                        }),
-                        /*#__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, {
+                        })
+                    ]
+                }),
+                /*#__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: 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,
-                                    panelDefinition: panelDefinition,
-                                    onJSONChange: handlePanelDefinitionChange,
-                                    onQueriesChange: (queries)=>{
-                                        setQueries(queries);
-                                    },
-                                    onPluginSpecChange: (spec)=>{
-                                        pluginEditor.onSpecChange(spec);
-                                    }
+                                    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.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)(_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/PanelGroupDialog/PanelGroupDialog.js

@@ -24,6 +24,7 @@ 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 _context = require("../../context");
 const _PanelGroupEditorForm = require("./PanelGroupEditorForm");
 function _interop_require_default(obj) {
@@ -33,6 +34,7 @@ function _interop_require_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);
@@ -81,6 +83,7 @@ function PanelGroupDialog() {
                     },
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelGroupEditorForm.PanelGroupEditorForm, {
                         initialValues: panelGroupEditor.initialValues,
+                        variables: Object.keys(variables),
                         onSubmit: handleSubmit
                     })
                 }),

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))
+                            ]
+                        })
                     })
                 ]
             })