@perses-dev/dashboards 0.16.0 → 0.18.0

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -23,7 +23,15 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
 const _useImmer = require("use-immer");
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
+const _variableModel = require("../variable-model");
 const _variableEditorFormModel = require("./variable-editor-form-model");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -67,6 +75,7 @@ const VARIABLE_TYPES = [
     'ListVariable',
     'TextVariable'
 ];
+const DEFAULT_MAX_PREVIEW_VALUES = 50;
 // TODO: Replace with proper validation library
 function getValidation(state) {
     /** Name validation */ let name = null;
@@ -87,209 +96,351 @@ const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_mater
         variant: "subtitle1",
         children: children
     });
-function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
-    const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
-    const validation = (0, _react.useMemo)(()=>getValidation(state), [
-        state
-    ]);
+function VariableListPreview({ definition  }) {
+    const { data , isFetching , error  } = (0, _variableModel.useListVariablePluginValues)(definition);
+    const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
+    const showAll = ()=>{
+        setMaxValues(undefined);
+    };
+    let notShown = 0;
+    if (data && (data === null || data === void 0 ? void 0 : data.length) > 0 && maxValues) {
+        notShown = data.length - maxValues;
+    }
+    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
-                children: "General"
+            errorMessage && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                severity: "error",
+                children: errorMessage
+            }),
+            isFetching && 'Loading...',
+            (data === null || data === void 0 ? void 0 : data.length) === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                severity: "info",
+                children: "No results"
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                container: true,
-                spacing: 2,
-                mb: 2,
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                        item: true,
-                        xs: 6,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            required: true,
-                            error: !!validation.name,
-                            fullWidth: true,
-                            label: "Name",
-                            value: state.name,
-                            helperText: validation.name,
-                            onChange: (v)=>{
-                                setState((draft)=>{
-                                    draft.name = v.target.value;
-                                });
-                            }
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                        item: true,
-                        xs: 6,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                            fullWidth: true,
-                            children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                    id: "variable-type-select-label",
-                                    children: "Type"
-                                }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
-                                    labelId: "variable-type-select-label",
-                                    id: "variable-type-select",
-                                    label: "Type",
-                                    value: state.kind,
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.kind = v.target.value;
-                                        });
-                                    },
-                                    children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                            value: v,
-                                            children: v
-                                        }, v))
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                        item: true,
-                        xs: 6,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            fullWidth: true,
-                            label: "Label",
-                            value: state.title,
-                            onChange: (v)=>{
-                                setState((draft)=>{
-                                    draft.title = v.target.value;
-                                });
-                            }
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                        item: true,
-                        xs: 12,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            fullWidth: true,
-                            label: "Description",
-                            value: state.description,
-                            onChange: (v)=>{
-                                setState((draft)=>{
-                                    draft.description = v.target.value;
-                                });
-                            }
-                        })
+                    data === null || data === void 0 ? void 0 : data.slice(0, maxValues).map((val)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
+                            sx: {
+                                mr: 1,
+                                mb: 1
+                            },
+                            size: "small",
+                            label: val.label
+                        }, val.value)),
+                    notShown > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
+                        onClick: showAll,
+                        variant: "outlined",
+                        sx: {
+                            mr: 1,
+                            mb: 1
+                        },
+                        size: "small",
+                        label: `+${notShown} more`
                     })
                 ]
-            }),
-            state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            })
+        ]
+    });
+}
+function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
+    const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
+    const validation = (0, _react.useMemo)(()=>getValidation(state), [
+        state
+    ]);
+    const [previewKey, setPreviewKey] = _react.default.useState(0);
+    const refreshPreview = ()=>{
+        setPreviewKey((prev)=>prev + 1);
+    };
+    /** We use the `previewKey` that we increment to know when to explicity update the
+   * spec that will be used for preview. The reason why we do this is to avoid
+   * having to re-fetch the values when the user is still editing the spec.
+   */ const previewSpec = (0, _react.useMemo)(()=>{
+        return (0, _variableEditorFormModel.getVariableDefinitionFromState)(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        previewKey
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
+                },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
-                        children: "Text Options"
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h2",
+                        children: "Template Variables / Edit Variable"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                        container: true,
-                        spacing: 2,
-                        mb: 2,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                            item: true,
-                            xs: 12,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                label: "Value",
-                                value: state.textVariableFields.value,
-                                onChange: (v)=>{
-                                    setState((draft)=>{
-                                        draft.textVariableFields.value = v.target.value;
-                                    });
-                                }
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                disabled: !validation.isValid,
+                                variant: "contained",
+                                onClick: ()=>{
+                                    onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
+                                },
+                                children: "Update"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "outlined",
+                                onClick: ()=>{
+                                    onCancel();
+                                },
+                                children: "Cancel"
                             })
-                        })
+                        ]
                     })
                 ]
             }),
-            state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
-                        children: "List Options"
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                        container: true,
-                        spacing: 2,
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
                         mb: 2,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                            item: true,
-                            xs: 6,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
-                                width: 500,
-                                pluginType: "Variable",
-                                pluginKindLabel: "Source",
-                                value: state.listVariableFields.plugin,
-                                onChange: (val)=>{
-                                    setState((draft)=>{
-                                        draft.listVariableFields.plugin = val;
-                                    });
-                                }
-                            })
-                        })
+                        children: "Edit Variable"
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
-                        children: "Dropdown Options"
+                        children: "General"
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
                         container: true,
-                        spacing: 1,
-                        mb: 1,
+                        spacing: 2,
+                        mb: 2,
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 6,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    required: true,
+                                    error: !!validation.name,
+                                    fullWidth: true,
+                                    label: "Name",
+                                    value: state.name,
+                                    helperText: validation.name,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.name = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 6,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                                    fullWidth: true,
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                            id: "variable-type-select-label",
+                                            children: "Type"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+                                            labelId: "variable-type-select-label",
+                                            id: "variable-type-select",
+                                            label: "Type",
+                                            value: state.kind,
+                                            onChange: (v)=>{
+                                                setState((draft)=>{
+                                                    draft.kind = v.target.value;
+                                                });
+                                            },
+                                            children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                                    value: v,
+                                                    children: v
+                                                }, v))
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 6,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    fullWidth: true,
+                                    label: "Label",
+                                    value: state.title,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.title = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                                 item: true,
                                 xs: 12,
-                                children: [
-                                    "Allow Multiple",
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                        checked: state.listVariableFields.allowMultiple,
-                                        onChange: (e)=>{
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    fullWidth: true,
+                                    label: "Description",
+                                    value: state.description,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.description = v.target.value;
+                                        });
+                                    }
+                                })
+                            })
+                        ]
+                    }),
+                    state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                                children: "Text Options"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                container: true,
+                                spacing: 2,
+                                mb: 2,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                        label: "Value",
+                                        value: state.textVariableFields.value,
+                                        onChange: (v)=>{
                                             setState((draft)=>{
-                                                draft.listVariableFields.allowMultiple = e.target.checked;
+                                                draft.textVariableFields.value = v.target.value;
                                             });
                                         }
                                     })
+                                })
+                            })
+                        ]
+                    }),
+                    state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                                children: "List Options"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                container: true,
+                                spacing: 2,
+                                mb: 2,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                        item: true,
+                                        xs: 6,
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                                sx: {
+                                                    mb: 1
+                                                },
+                                                label: "Capturing Regexp",
+                                                value: state.listVariableFields.capturing_regexp,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.capturing_regexp = e.target.value;
+                                                    });
+                                                }
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+                                                onClickAway: ()=>refreshPreview(),
+                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {})
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
+                                                width: 500,
+                                                pluginType: "Variable",
+                                                pluginKindLabel: "Source",
+                                                value: state.listVariableFields.plugin,
+                                                onChange: (val)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.plugin = val;
+                                                    });
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                        item: true,
+                                        xs: 12,
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.ErrorBoundary, {
+                                            FallbackComponent: ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                                                    children: "Error previewing values"
+                                                }),
+                                            resetKeys: [
+                                                previewSpec
+                                            ],
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                                    direction: 'row',
+                                                    spacing: 1,
+                                                    alignItems: "center",
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                                            variant: "caption",
+                                                            children: "Preview Values"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                            onClick: refreshPreview,
+                                                            size: "small",
+                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableListPreview, {
+                                                    definition: previewSpec
+                                                })
+                                            ]
+                                        })
+                                    })
                                 ]
                             }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                                children: "Dropdown Options"
+                            }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                                item: true,
-                                xs: 12,
+                                container: true,
+                                spacing: 1,
+                                mb: 1,
                                 children: [
-                                    "Allow All",
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                        checked: state.listVariableFields.allowAll,
-                                        onChange: (e)=>{
-                                            setState((draft)=>{
-                                                draft.listVariableFields.allowAll = e.target.checked;
-                                            });
-                                        }
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                        item: true,
+                                        xs: 12,
+                                        children: [
+                                            "Allow Multiple",
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                checked: state.listVariableFields.allowMultiple,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.allowMultiple = e.target.checked;
+                                                    });
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                        item: true,
+                                        xs: 12,
+                                        children: [
+                                            "Allow All",
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                checked: state.listVariableFields.allowAll,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.allowAll = e.target.checked;
+                                                    });
+                                                }
+                                            })
+                                        ]
                                     })
                                 ]
                             })
                         ]
                     })
                 ]
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: 'row',
-                spacing: 2,
-                justifyContent: "end",
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        disabled: !validation.isValid,
-                        variant: "contained",
-                        onClick: ()=>{
-                            onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
-                        },
-                        children: "Update"
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        variant: "outlined",
-                        onClick: ()=>{
-                            onCancel();
-                        },
-                        children: "Cancel"
-                    })
-                ]
             })
         ]
     });

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -33,6 +33,7 @@ function getInitialState(initialVariableDefinition) {
     const listVariableFields = {
         allowMultiple: false,
         allowAll: false,
+        capturing_regexp: undefined,
         plugin: {
             kind: '',
             spec: {}
@@ -43,6 +44,7 @@ function getInitialState(initialVariableDefinition) {
         listVariableFields.allowMultiple = (_allow_all_value = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value !== void 0 ? _allow_all_value : false;
         var _allow_all_value1;
         listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
+        listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
     }
     return {
@@ -63,26 +65,25 @@ function getVariableDefinitionFromState(state) {
         }
     };
     if (kind === 'TextVariable') {
-        const textVariableDefinition = {
+        return {
             kind,
             spec: {
                 ...commonSpec,
                 ...state.textVariableFields
             }
         };
-        return textVariableDefinition;
     }
     if (kind === 'ListVariable') {
-        const listVariableDefinition = {
+        return {
             kind,
             spec: {
                 ...commonSpec,
                 allow_multiple: state.listVariableFields.allowMultiple,
                 allow_all_value: state.listVariableFields.allowAll,
+                capturing_regexp: state.listVariableFields.capturing_regexp,
                 plugin: state.listVariableFields.plugin
             }
         };
-        return listVariableDefinition;
     }
     throw new Error(`Unknown variable kind: ${kind}`);
 }

package/dist/cjs/components/Variables/VariableList.js

@@ -25,6 +25,7 @@ const _eye = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Eye")
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
 const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
+const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _variable = require("./Variable");
 const _variableEditor = require("./VariableEditor");
@@ -84,21 +85,22 @@ function TemplateVariableList(props) {
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    const onClose = ()=>{
+        setIsEditing(false);
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
-                anchor: 'right',
-                open: isEditing,
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
+                isOpen: isEditing,
+                onClose: onClose,
                 PaperProps: {
                     sx: {
                         width: '50%'
                     }
                 },
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
-                    onCancel: ()=>{
-                        setIsEditing(false);
-                    },
                     variableDefinitions: variableDefinitions,
+                    onCancel: onClose,
                     onChange: (v)=>{
                         setVariableDefinitions(v);
                         setIsEditing(false);
@@ -127,6 +129,9 @@ function TemplateVariableList(props) {
                 color: 'inherit',
                 position: isSticky ? 'fixed' : 'static',
                 elevation: isSticky ? 4 : 0,
+                sx: {
+                    ...props.sx
+                },
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     display: 'flex',
                     justifyContent: "space-between",
@@ -134,8 +139,8 @@ function TemplateVariableList(props) {
                     ml: isSticky ? 2 : 0,
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-                            direction: 'row',
-                            spacing: 2,
+                            direction: "row",
+                            spacing: 1,
                             children: showVariables && variableDefinitions.map((v)=>{
                                 var ref;
                                 /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {