@perses-dev/dashboards 0.39.0 → 0.40.0

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

@@ -21,30 +21,38 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    VariableEditor: ()=>VariableEditor,
-    VariableName: ()=>VariableName
+    VariableEditor: function() {
+        return VariableEditor;
+    },
+    VariableName: function() {
+        return VariableName;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
-const _useImmer = require("use-immer");
-const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
-const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
-const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
-const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
-const _contentDuplicate = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentDuplicate"));
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _useimmer = require("use-immer");
+const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
+const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
+const _ArrowUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowUp"));
+const _ArrowDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowDown"));
+const _ContentDuplicate = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentDuplicate"));
+const _OpenInNew = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/OpenInNew"));
+const _ChevronUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronUp"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _hydrationUtils = require("../../context/TemplateVariableProvider/hydrationUtils");
-function _interopRequireDefault(obj) {
+const _BuiltinVariableAccordions = require("./BuiltinVariableAccordions");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 function getVariableLabelByKind(kind) {
-    var ref;
-    return (ref = _pluginSystem.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || ref === void 0 ? void 0 : ref.label;
+    var _VARIABLE_TYPES_find;
+    return (_VARIABLE_TYPES_find = _pluginsystem.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || _VARIABLE_TYPES_find === void 0 ? void 0 : _VARIABLE_TYPES_find.label;
 }
 function getValidation(variableDefinitions) {
     const errors = [];
@@ -59,10 +67,11 @@ function getValidation(variableDefinitions) {
     };
 }
 function VariableEditor(props) {
-    const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
+    const [variableDefinitions, setVariableDefinitions] = (0, _useimmer.useImmer)(props.variableDefinitions);
     const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
     const [variableFormAction, setVariableFormAction] = (0, _react.useState)('update');
     const externalVariableDefinitions = props.externalVariableDefinitions;
+    const builtinVariableDefinitions = props.builtinVariableDefinitions;
     const validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
         variableDefinitions
     ]);
@@ -141,11 +150,11 @@ function VariableEditor(props) {
                 draft[index] = prevElement;
             } else {
                 const nextElement = draft[index + 1];
-                const currentElement1 = draft[index];
-                if (index === draft.length - 1 || !nextElement || !currentElement1) {
+                const currentElement = draft[index];
+                if (index === draft.length - 1 || !nextElement || !currentElement) {
                     return;
                 }
-                draft[index + 1] = currentElement1;
+                draft[index + 1] = currentElement;
                 draft[index] = nextElement;
             }
         });
@@ -155,28 +164,29 @@ function VariableEditor(props) {
             draft.push(v);
         });
     };
-    var ref, ref1;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    var _getVariableLabelByKind, _v_spec_display_description, _getVariableLabelByKind1, _v_spec_display_description1;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.VariableEditForm, {
+            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
                 initialVariableDefinition: currentEditingVariableDefinition,
-                onChange: (definition)=>{
+                initialAction: variableFormAction,
+                isDraft: true,
+                onSave: (definition)=>{
                     setVariableDefinitions((draft)=>{
                         draft[variableEditIdx] = definition;
                         setVariableEditIdx(null);
                     });
                 },
-                onCancel: ()=>{
+                onClose: ()=>{
                     if (variableFormAction === 'create') {
                         removeVariable(variableEditIdx);
                     }
                     setVariableEditIdx(null);
-                },
-                action: variableFormAction
+                }
             }),
-            !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                         sx: {
                             display: 'flex',
                             alignItems: 'center',
@@ -184,16 +194,16 @@ function VariableEditor(props) {
                             borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                         },
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                 variant: "h2",
-                                children: "Dashboard Variables"
+                                children: "Edit Dashboard Variables"
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 spacing: 1,
                                 marginLeft: "auto",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                                         disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
                                         variant: "contained",
                                         onClick: ()=>{
@@ -201,7 +211,7 @@ function VariableEditor(props) {
                                         },
                                         children: "Apply"
                                     }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                                         color: "secondary",
                                         variant: "outlined",
                                         onClick: handleCancel,
@@ -211,212 +221,109 @@ function VariableEditor(props) {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         padding: 2,
                         sx: {
                             overflowY: 'scroll'
                         },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                spacing: 2,
-                                children: [
-                                    !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
-                                            severity: "error",
-                                            children: error
-                                        }, error)),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
-                                            sx: {
-                                                minWidth: 650
-                                            },
-                                            "aria-label": "table of variables",
-                                            children: [
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
-                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
-                                                        children: [
-                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                children: "Visibility"
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                children: "Name"
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                children: "Type"
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                align: "right"
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
-                                                    children: variableDefinitions.map((v, idx)=>{
-                                                        var ref1;
-                                                        /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
-                                                            children: [
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                    component: "th",
-                                                                    scope: "row",
-                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                                        checked: ((ref1 = v.spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) !== true,
-                                                                        onChange: (e)=>{
-                                                                            toggleVariableVisibility(idx, e.target.checked);
-                                                                        }
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                    component: "th",
-                                                                    scope: "row",
-                                                                    sx: {
-                                                                        fontWeight: 'bold'
-                                                                    },
-                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableName, {
-                                                                        name: v.spec.name,
-                                                                        state: variableState.get({
-                                                                            name: v.spec.name
-                                                                        })
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                    children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
-                                                                }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
-                                                                    align: "right",
-                                                                    children: [
-                                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                            onClick: ()=>changeVariableOrder(idx, 'up'),
-                                                                            disabled: idx === 0,
-                                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
-                                                                        }),
-                                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                            onClick: ()=>changeVariableOrder(idx, 'down'),
-                                                                            disabled: idx === variableDefinitions.length - 1,
-                                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
-                                                                        }),
-                                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                            onClick: ()=>editVariable(idx),
-                                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
-                                                                        }),
-                                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                            onClick: ()=>removeVariable(idx),
-                                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
-                                                                        })
-                                                                    ]
-                                                                })
-                                                            ]
-                                                        }, v.spec.name);
-                                                    })
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                        display: "flex",
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                            variant: "contained",
-                                            startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
-                                            sx: {
-                                                marginLeft: 'auto'
-                                            },
-                                            onClick: addVariable,
-                                            children: "Add Variable"
-                                        })
-                                    })
-                                ]
-                            }),
-                            externalVariableDefinitions.map((extVar)=>{
-                                /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                    spacing: 2,
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
-                                            variant: "h2",
-                                            children: [
-                                                (0, _material.capitalize)(extVar.source),
-                                                " Variables"
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
-                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
+                                        !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                                                severity: "error",
+                                                children: error
+                                            }, error)),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
                                                 sx: {
                                                     minWidth: 650
                                                 },
                                                 "aria-label": "table of variables",
                                                 children: [
-                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
-                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                             children: [
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                     children: "Visibility"
                                                                 }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                     children: "Name"
                                                                 }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                     children: "Type"
                                                                 }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                    align: "right"
+                                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                    children: "Description"
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                    align: "right",
+                                                                    children: "Actions"
                                                                 })
                                                             ]
                                                         })
                                                     }),
-                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
-                                                        children: extVar.definitions.map((v)=>{
-                                                            var ref;
-                                                            /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                                                        children: variableDefinitions.map((v, idx)=>{
+                                                            var _v_spec_display, _v_spec_display1;
+                                                            /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                                 children: [
-                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                         component: "th",
                                                                         scope: "row",
-                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                                            checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
-                                                                            disabled: true
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                                                            checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                            onChange: (e)=>{
+                                                                                toggleVariableVisibility(idx, e.target.checked);
+                                                                            }
                                                                         })
                                                                     }),
-                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                         component: "th",
                                                                         scope: "row",
                                                                         sx: {
                                                                             fontWeight: 'bold'
                                                                         },
-                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableName, {
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableName, {
                                                                             name: v.spec.name,
                                                                             state: variableState.get({
-                                                                                name: v.spec.name,
-                                                                                source: extVar.source
+                                                                                name: v.spec.name
                                                                             })
                                                                         })
                                                                     }),
-                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                        children: (ref1 = getVariableLabelByKind(v.kind)) !== null && ref1 !== void 0 ? ref1 : v.kind
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                        children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                        children: (_v_spec_display_description = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
                                                                     }),
-                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
                                                                         align: "right",
+                                                                        sx: {
+                                                                            display: 'flex',
+                                                                            flexDirection: 'row',
+                                                                            flexGrow: 1
+                                                                        },
                                                                         children: [
-                                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
-                                                                                title: "Override",
-                                                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                                    onClick: ()=>overrideVariable(v),
-                                                                                    disabled: !!variableState.get({
-                                                                                        name: v.spec.name
-                                                                                    }),
-                                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_contentDuplicate.default, {})
-                                                                                })
-                                                                            }),
-                                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                                disabled: true,
-                                                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                onClick: ()=>changeVariableOrder(idx, 'up'),
+                                                                                disabled: idx === 0,
+                                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
                                                                             }),
-                                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                                disabled: true,
-                                                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                onClick: ()=>changeVariableOrder(idx, 'down'),
+                                                                                disabled: idx === variableDefinitions.length - 1,
+                                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
                                                                             }),
-                                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                                disabled: true,
-                                                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                onClick: ()=>editVariable(idx),
+                                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {})
                                                                             }),
-                                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                                disabled: true,
-                                                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                onClick: ()=>removeVariable(idx),
+                                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TrashCan.default, {})
                                                                             })
                                                                         ]
                                                                     })
@@ -426,11 +333,182 @@ function VariableEditor(props) {
                                                     })
                                                 ]
                                             })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                            display: "flex",
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                                variant: "contained",
+                                                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                                                sx: {
+                                                    marginLeft: 'auto'
+                                                },
+                                                onClick: addVariable,
+                                                children: "Add Variable"
+                                            })
                                         })
                                     ]
-                                }, extVar.source);
-                            })
-                        ]
+                                }),
+                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar)=>{
+                                    return extVar.definitions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
+                                        sx: (theme)=>({
+                                                '.MuiAccordionSummary-root': {
+                                                    backgroundColor: theme.palette.background.lighter
+                                                },
+                                                '.MuiAccordionDetails-root': {
+                                                    backgroundColor: theme.palette.background.lighter
+                                                }
+                                            }),
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.AccordionSummary, {
+                                                expandIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronUp.default, {}),
+                                                "aria-controls": extVar.source,
+                                                id: extVar.source,
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                                    flexDirection: "row",
+                                                    alignItems: "center",
+                                                    justifyContent: "start",
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                                        children: [
+                                                            extVar.tooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                                variant: "h2",
+                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                                                                    title: extVar.tooltip.title || '',
+                                                                    description: extVar.tooltip.description || '',
+                                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                                                                        children: [
+                                                                            (0, _material.capitalize)(extVar.source),
+                                                                            " Variables"
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                                                variant: "h2",
+                                                                children: [
+                                                                    (0, _material.capitalize)(extVar.source),
+                                                                    " Variables"
+                                                                ]
+                                                            }),
+                                                            extVar.editLink && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                href: extVar.editLink,
+                                                                target: "_blank",
+                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_OpenInNew.default, {
+                                                                    fontSize: "small"
+                                                                })
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.AccordionDetails, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
+                                                        sx: {
+                                                            minWidth: 650
+                                                        },
+                                                        "aria-label": "table of external variables",
+                                                        children: [
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                            children: "Visibility"
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                            children: "Name"
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                            children: "Type"
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                            children: "Description"
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                            align: "right",
+                                                                            children: "Actions"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                                                                children: extVar.definitions.map((v)=>{
+                                                                    var _v_spec_display, _v_spec_display1;
+                                                                    /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                                        children: [
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                                component: "th",
+                                                                                scope: "row",
+                                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                                                                    checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                                    disabled: true
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                                component: "th",
+                                                                                scope: "row",
+                                                                                sx: {
+                                                                                    fontWeight: 'bold'
+                                                                                },
+                                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableName, {
+                                                                                    name: v.spec.name,
+                                                                                    state: variableState.get({
+                                                                                        name: v.spec.name,
+                                                                                        source: extVar.source
+                                                                                    })
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                                children: (_getVariableLabelByKind1 = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind1 !== void 0 ? _getVariableLabelByKind1 : v.kind
+                                                                            }),
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                                children: (_v_spec_display_description1 = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description1 !== void 0 ? _v_spec_display_description1 : ''
+                                                                            }),
+                                                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
+                                                                                align: "right",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                                                                        title: "Override",
+                                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                            onClick: ()=>overrideVariable(v),
+                                                                                            disabled: !!variableState.get({
+                                                                                                name: v.spec.name
+                                                                                            }),
+                                                                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContentDuplicate.default, {})
+                                                                                        })
+                                                                                    }),
+                                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
+                                                                                    }),
+                                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
+                                                                                    }),
+                                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {})
+                                                                                    }),
+                                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TrashCan.default, {})
+                                                                                    })
+                                                                                ]
+                                                                            })
+                                                                        ]
+                                                                    }, v.spec.name);
+                                                                })
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    });
+                                }),
+                                builtinVariableDefinitions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BuiltinVariableAccordions.BuiltinVariableAccordions, {
+                                    builtinVariableDefinitions: builtinVariableDefinitions
+                                })
+                            ]
+                        })
                     })
                 ]
             })
@@ -442,21 +520,21 @@ const TableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
     }));
 function VariableName(props) {
     const { name , state  } = props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,
-            !(state === null || state === void 0 ? void 0 : state.overridden) && (state === null || state === void 0 ? void 0 : state.overriding) && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            !(state === null || state === void 0 ? void 0 : state.overridden) && (state === null || state === void 0 ? void 0 : state.overriding) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 fontWeight: "normal",
                 color: (theme)=>theme.palette.primary.main,
                 children: "(overriding)"
             }),
-            (state === null || state === void 0 ? void 0 : state.overridden) && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            (state === null || state === void 0 ? void 0 : state.overridden) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         color: (theme)=>theme.palette.grey[500],
                         children: name
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         fontWeight: "normal",
                         color: (theme)=>theme.palette.grey[500],
                         children: "(overridden)"