@perses-dev/dashboards 0.38.0 → 0.40.0

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

@@ -14,29 +14,45 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "VariableEditor", {
-    enumerable: true,
-    get: ()=>VariableEditor
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    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 _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");
-function _interopRequireDefault(obj) {
+const _hydrationUtils = require("../../context/TemplateVariableProvider/hydrationUtils");
+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 = [];
@@ -51,12 +67,22 @@ 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
     ]);
+    const [variableState] = (0, _react.useMemo)(()=>{
+        return [
+            (0, _hydrationUtils.hydrateTemplateVariableStates)(variableDefinitions, {}, externalVariableDefinitions)
+        ];
+    }, [
+        externalVariableDefinitions,
+        variableDefinitions
+    ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
     const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleCancel = ()=>{
@@ -124,37 +150,43 @@ 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;
             }
         });
     };
-    var ref;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    const overrideVariable = (v)=>{
+        setVariableDefinitions((draft)=>{
+            draft.push(v);
+        });
+    };
+    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',
@@ -162,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: "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: ()=>{
@@ -179,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,
@@ -189,110 +221,291 @@ function VariableEditor(props) {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         padding: 2,
                         sx: {
                             overflowY: 'scroll'
                         },
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        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.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, {
+                                                                    children: "Description"
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                    align: "right",
+                                                                    children: "Actions"
                                                                 })
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                component: "th",
-                                                                scope: "row",
-                                                                sx: {
-                                                                    fontWeight: 'bold'
-                                                                },
-                                                                children: 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",
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__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)(_material.IconButton, {
-                                                                        onClick: ()=>changeVariableOrder(idx, 'up'),
-                                                                        disabled: idx === 0,
-                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                                                                    /*#__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,
+                                                                            onChange: (e)=>{
+                                                                                toggleVariableVisibility(idx, e.target.checked);
+                                                                            }
+                                                                        })
                                                                     }),
-                                                                    /*#__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)(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)(_material.IconButton, {
-                                                                        onClick: ()=>editVariable(idx),
-                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                        children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
                                                                     }),
-                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                        onClick: ()=>removeVariable(idx),
-                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                                                                    /*#__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, {
+                                                                        align: "right",
+                                                                        sx: {
+                                                                            display: 'flex',
+                                                                            flexDirection: 'row',
+                                                                            flexGrow: 1
+                                                                        },
+                                                                        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 && !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);
+                                                                })
                                                             })
                                                         ]
-                                                    }, 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"
-                                    })
+                                builtinVariableDefinitions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BuiltinVariableAccordions.BuiltinVariableAccordions, {
+                                    builtinVariableDefinitions: builtinVariableDefinitions
                                 })
                             ]
                         })
@@ -305,3 +518,29 @@ function VariableEditor(props) {
 const TableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
         borderBottom: `solid 1px ${theme.palette.divider}`
     }));
+function VariableName(props) {
+    const { name , state  } = props;
+    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, {
+                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, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        color: (theme)=>theme.palette.grey[500],
+                        children: name
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        fontWeight: "normal",
+                        color: (theme)=>theme.palette.grey[500],
+                        children: "(overridden)"
+                    })
+                ]
+            })
+        ]
+    });
+}