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

package/dist/cjs/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.js

@@ -21,15 +21,15 @@ Object.defineProperty(exports, "AnnotationEditorForm", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
+const _zod = require("@hookform/resolvers/zod");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _reacthookform = require("react-hook-form");
-const _zod = require("@hookform/resolvers/zod");
 const _reactquery = require("@tanstack/react-query");
 const _InvertColors = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InvertColors"));
-const _PluginEditor = require("../../PluginEditor");
+const _react = require("react");
+const _reacthookform = require("react-hook-form");
 const _context = require("../../../context");
+const _PluginEditor = require("../../PluginEditor");
 const _constants = require("../constants");
 const _AnnotationPreview = require("./AnnotationPreview");
 function _interop_require_default(obj) {

package/dist/cjs/components/Annotations/AnnotationEditorForm/AnnotationPreview.js

@@ -21,10 +21,10 @@ Object.defineProperty(exports, "AnnotationPreview", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _Alert = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Alert"));
+const _react = require("react");
 const _runtime = require("../../../runtime");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {

package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -29,7 +29,7 @@ const _reacthookform = require("react-hook-form");
 const _context = require("../../context");
 const _PluginEditor = require("../PluginEditor");
 function DatasourceEditorForm(props) {
-    const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;
+    const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete, testConnection } = props;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     const titleAction = (0, _components.getTitleAction)(action, isDraft);
     const submitText = (0, _components.getSubmitText)(action, isDraft);
@@ -251,7 +251,8 @@ function DatasourceEditorForm(props) {
                                         kind: v.selection.kind,
                                         spec: v.spec
                                     });
-                                }
+                                },
+                                testConnection: testConnection
                             })
                     })
                 ]

package/dist/cjs/components/DatasourceSelect/DatasourceSelect.js

@@ -45,8 +45,8 @@ _export(exports, {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _OpenInNew = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/OpenInNew"));
 const _material = require("@mui/material");
+const _OpenInNew = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/OpenInNew"));
 const _runtime = require("../../runtime");
 const _utils = require("../../utils");
 function _interop_require_default(obj) {

package/dist/cjs/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.js

@@ -0,0 +1,53 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DatasourceTestConnectionButton", {
+    enumerable: true,
+    get: function() {
+        return DatasourceTestConnectionButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _react = require("react");
+const DatasourceTestConnectionButton = ({ testConnection, disabled, ...buttonProps })=>{
+    const { successSnackbar, exceptionSnackbar } = (0, _components.useSnackbar)();
+    const [isTesting, setIsTesting] = (0, _react.useState)(false);
+    const handleClick = (0, _react.useCallback)(async ()=>{
+        setIsTesting(true);
+        try {
+            await testConnection();
+            successSnackbar('Datasource is healthy');
+        } catch (e) {
+            exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));
+        } finally{
+            setIsTesting(false);
+        }
+    }, [
+        testConnection,
+        successSnackbar,
+        exceptionSnackbar
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+        onClick: handleClick,
+        color: "info",
+        variant: "outlined",
+        disabled: disabled || isTesting,
+        ...buttonProps,
+        children: "Test Connection"
+    });
+};

package/dist/cjs/components/DatasourceTestConnectionButton/index.js

@@ -0,0 +1,30 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./DatasourceTestConnectionButton"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -22,11 +22,13 @@ Object.defineProperty(exports, "HTTPSettingsEditor", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _immer = require("immer");
-const _reacthookform = require("react-hook-form");
 const _Minus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Minus"));
 const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reacthookform = require("react-hook-form");
+const _zod = require("zod");
+const _DatasourceTestConnectionButton = require("../DatasourceTestConnectionButton");
 const _OptionsEditorRadios = require("../OptionsEditorRadios");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -74,8 +76,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const urlSchema = _zod.z.string().url();
 function HTTPSettingsEditor(props) {
-    const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;
+    const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy, testConnection } = props;
     const strDirect = 'Direct access';
     const strProxy = 'Proxy';
     // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.
@@ -160,6 +163,15 @@ function HTTPSettingsEditor(props) {
                                 }
                             })
                     }),
+                    testConnection && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        mb: 2,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DatasourceTestConnectionButton.DatasourceTestConnectionButton, {
+                            testConnection: testConnection,
+                            disabled: !urlSchema.safeParse(value.proxy?.spec.url).success
+                        })
+                    }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                         variant: "h5",
                         mb: 2,
@@ -493,28 +505,41 @@ function HTTPSettingsEditor(props) {
         },
         {
             label: strDirect,
-            content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                name: "URL",
-                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...field,
-                        fullWidth: true,
-                        label: "URL",
-                        value: value.directUrl || '',
-                        error: !!fieldState.error,
-                        helperText: fieldState.error?.message,
-                        InputProps: {
-                            readOnly: isReadonly
-                        },
-                        InputLabelProps: {
-                            shrink: isReadonly ? true : undefined
-                        },
-                        onChange: (e)=>{
-                            field.onChange(e);
-                            onChange((0, _immer.produce)(value, (draft)=>{
-                                draft.directUrl = e.target.value;
-                            }));
-                        }
+            content: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        name: "URL",
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...field,
+                                fullWidth: true,
+                                label: "URL",
+                                value: value.directUrl || '',
+                                error: !!fieldState.error,
+                                helperText: fieldState.error?.message,
+                                InputProps: {
+                                    readOnly: isReadonly
+                                },
+                                InputLabelProps: {
+                                    shrink: isReadonly ? true : undefined
+                                },
+                                onChange: (e)=>{
+                                    field.onChange(e);
+                                    onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.directUrl = e.target.value;
+                                    }));
+                                }
+                            })
+                    }),
+                    testConnection && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        my: 2,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DatasourceTestConnectionButton.DatasourceTestConnectionButton, {
+                            testConnection: testConnection,
+                            disabled: !urlSchema.safeParse(value.directUrl).success
+                        })
                     })
+                ]
             })
         }
     ];

package/dist/cjs/components/LayoutEditor/LayoutEditor.js

@@ -0,0 +1,123 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LayoutEditor", {
+    enumerable: true,
+    get: function() {
+        return LayoutEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _reacthookform = require("react-hook-form");
+const _constants = require("../../constants");
+const _runtime = require("../../runtime");
+const _RepeatLayoutPreview = require("./RepeatLayoutPreview");
+const _RepeatVariableEditor = require("./RepeatVariableEditor");
+const DEFAULT_LAYOUT_WIDTH = 24;
+function LayoutEditor({ control, variableDefinitionGroups, panelGroups }) {
+    const { formState, setValue } = (0, _reacthookform.useFormContext)();
+    const variableValues = (0, _runtime.useVariableValues)();
+    const watchedRepeatVariableValue = (0, _reacthookform.useWatch)({
+        control,
+        name: 'layoutDefinition.repeatVariable.value'
+    });
+    const watchedAlignment = (0, _reacthookform.useWatch)({
+        control,
+        name: 'layoutDefinition.repeatVariable.alignment'
+    });
+    const watchedMaxPer = (0, _reacthookform.useWatch)({
+        control,
+        name: 'layoutDefinition.repeatVariable.maxPer'
+    });
+    const optionCount = (0, _react.useMemo)(()=>{
+        if (!watchedRepeatVariableValue) return 0;
+        return variableValues[watchedRepeatVariableValue]?.options?.length ?? 0;
+    }, [
+        watchedRepeatVariableValue,
+        variableValues
+    ]);
+    const isVertical = (watchedAlignment ?? _constants.DEFAULT_REPEAT_ALIGNMENT) === 'vertical';
+    const perRow = isVertical ? 1 : watchedMaxPer ?? _constants.DEFAULT_MAX_PER_ROW;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid2, {
+        container: true,
+        spacing: 2,
+        width: "100%",
+        children: [
+            panelGroups && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                        size: 12,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "h4",
+                            children: "Panel Group"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                        size: 4,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                            control: 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,
+                                    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.Grid2, {
+                        size: 8
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: 12,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                    variant: "h4",
+                    children: "Repeat Options"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                control: control,
+                name: "layoutDefinition.repeatVariable",
+                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_RepeatVariableEditor.RepeatVariableEditor, {
+                        value: field.value,
+                        onChange: field.onChange,
+                        errors: formState.errors.layoutDefinition?.repeatVariable ?? {},
+                        variableDefinitionGroups: variableDefinitionGroups,
+                        isVertical: isVertical,
+                        onRepeatVariableSet: ()=>setValue('layoutDefinition.width', DEFAULT_LAYOUT_WIDTH)
+                    })
+            }),
+            watchedRepeatVariableValue && optionCount > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: 12,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RepeatLayoutPreview.RepeatLayoutPreview, {
+                    optionCount: optionCount,
+                    maxPer: perRow
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/LayoutEditor/RepeatLayoutPreview.js

@@ -0,0 +1,105 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RepeatLayoutPreview", {
+    enumerable: true,
+    get: function() {
+        return RepeatLayoutPreview;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
+const _react = require("react");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const PREVIEW_GAP = 4;
+function RepeatLayoutPreview({ optionCount, maxPer }) {
+    const repeatItems = (0, _react.useMemo)(()=>Array.from({
+            length: optionCount
+        }, (_, i)=>i), [
+        optionCount
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    mb: 0.5
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                        variant: "subtitle2",
+                        color: "text.secondary",
+                        children: [
+                            "Layout preview (",
+                            optionCount,
+                            " panel",
+                            optionCount !== 1 ? 's' : '',
+                            ")"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: "Preview of the layout when all available options of the selected variable are selected.",
+                        enterDelay: 100,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                            size: "small",
+                            sx: (theme)=>({
+                                    borderRadius: theme.shape.borderRadius,
+                                    padding: '2px'
+                                }),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
+                                "aria-hidden": false,
+                                "aria-label": "Show layout preview information",
+                                fontSize: "inherit",
+                                sx: {
+                                    color: (theme)=>theme.palette.grey[700]
+                                }
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    height: 315,
+                    overflow: 'auto'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.RepeatGrid, {
+                    repeatItems: repeatItems,
+                    maxPer: maxPer,
+                    gap: PREVIEW_GAP,
+                    renderItem: ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: {
+                                width: `100%`,
+                                height: 150,
+                                borderRadius: 1,
+                                bgcolor: 'action.selected',
+                                border: '1px solid',
+                                borderColor: 'divider'
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/LayoutEditor/RepeatVariableEditor.js

@@ -0,0 +1,176 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RepeatVariableEditor", {
+    enumerable: true,
+    get: function() {
+        return RepeatVariableEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _constants = require("../../constants");
+function RepeatVariableEditor({ value: current, onChange, errors, variableDefinitionGroups, isVertical, onRepeatVariableSet }) {
+    const handleVariableChange = (0, _react.useCallback)((selected)=>{
+        if (!selected) {
+            onChange(undefined);
+        } else {
+            onChange(current ? {
+                ...current,
+                value: selected
+            } : {
+                value: selected,
+                alignment: _constants.DEFAULT_REPEAT_ALIGNMENT
+            });
+            if (!current) {
+                onRepeatVariableSet();
+            }
+        }
+    }, [
+        current,
+        onChange,
+        onRepeatVariableSet
+    ]);
+    const handleAlignmentChange = (0, _react.useCallback)((selected)=>{
+        if (!current) return;
+        onChange(selected === 'vertical' ? {
+            ...current,
+            alignment: selected,
+            maxPer: undefined
+        } : {
+            ...current,
+            alignment: selected
+        });
+    }, [
+        current,
+        onChange
+    ]);
+    const handleMaxPerChange = (0, _react.useCallback)((value)=>{
+        if (!current) return;
+        onChange({
+            ...current,
+            maxPer: value === '' ? undefined : Number(value)
+        });
+    }, [
+        current,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: 4,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                    select: true,
+                    fullWidth: true,
+                    label: "Repeat Variable",
+                    value: current?.value ?? '',
+                    error: !!errors.value,
+                    helperText: errors.value?.message,
+                    onChange: (event)=>handleVariableChange(event.target.value),
+                    slotProps: {
+                        select: {
+                            MenuProps: {
+                                PaperProps: {
+                                    sx: {
+                                        maxHeight: 240
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                sx: {
+                                    fontStyle: 'italic'
+                                },
+                                children: "None"
+                            })
+                        }),
+                        variableDefinitionGroups.flatMap(({ source, definitions })=>{
+                            const listDefs = definitions.filter((def)=>def.kind === 'ListVariable' && def.spec.allowMultiple);
+                            if (listDefs.length === 0) return [];
+                            return [
+                                source && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListSubheader, {
+                                    children: source
+                                }, `group-${source}`),
+                                ...listDefs.map((def)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: def.spec.name,
+                                        children: def.spec.display?.name ?? def.spec.name
+                                    }, `${source ?? 'dashboard'}-${def.spec.name}`))
+                            ];
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: 4,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                    select: true,
+                    fullWidth: true,
+                    label: "Alignment",
+                    value: current?.alignment ?? _constants.DEFAULT_REPEAT_ALIGNMENT,
+                    disabled: !current,
+                    error: !!errors.alignment,
+                    helperText: errors.alignment?.message,
+                    onChange: (event)=>handleAlignmentChange(event.target.value),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "horizontal",
+                            children: "Horizontal"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "vertical",
+                            children: "Vertical"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: 4,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    select: true,
+                    fullWidth: true,
+                    label: "Max Per Row",
+                    value: current?.maxPer ?? _constants.DEFAULT_MAX_PER_ROW,
+                    disabled: !current || isVertical,
+                    error: !!errors.maxPer,
+                    helperText: errors.maxPer?.message,
+                    onChange: (event)=>handleMaxPerChange(event.target.value),
+                    slotProps: {
+                        select: {
+                            MenuProps: {
+                                PaperProps: {
+                                    sx: {
+                                        maxHeight: 240
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    children: Array.from({
+                        length: 12
+                    }, (_, i)=>i + 1).map((n)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: n,
+                            children: n
+                        }, n))
+                })
+            })
+        ]
+    });
+}