@perses-dev/dashboards 0.0.0-snapshot-time-chart-rewrite-4667058 → 0.0.0-snapshot-panel-extra-content-3-17f9c42

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

@@ -14,9 +14,15 @@
 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: ()=>VariableEditor,
+    VariableName: ()=>VariableName
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
@@ -27,9 +33,10 @@ const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pe
 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 _context = require("../../context");
-const _variableEditorForm = require("./VariableEditorForm");
-const _variableModel = require("./variable-model");
+const _hydrationUtils = require("../../context/TemplateVariableProvider/hydrationUtils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -37,7 +44,7 @@ function _interopRequireDefault(obj) {
 }
 function getVariableLabelByKind(kind) {
     var ref;
-    return (ref = _variableModel.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || ref === void 0 ? void 0 : ref.label;
+    return (ref = _pluginSystem.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || ref === void 0 ? void 0 : ref.label;
 }
 function getValidation(variableDefinitions) {
     const errors = [];
@@ -54,9 +61,19 @@ function getValidation(variableDefinitions) {
 function VariableEditor(props) {
     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 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 = ()=>{
@@ -81,6 +98,7 @@ function VariableEditor(props) {
         });
     };
     const addVariable = ()=>{
+        setVariableFormAction('create');
         setVariableDefinitions((draft)=>{
             draft.push({
                 kind: 'TextVariable',
@@ -92,6 +110,10 @@ function VariableEditor(props) {
         });
         setVariableEditIdx(variableDefinitions.length);
     };
+    const editVariable = (index)=>{
+        setVariableFormAction('update');
+        setVariableEditIdx(index);
+    };
     const toggleVariableVisibility = (index, visible)=>{
         setVariableDefinitions((draft)=>{
             const v = draft[index];
@@ -128,10 +150,15 @@ function VariableEditor(props) {
             }
         });
     };
-    var ref;
+    const overrideVariable = (v)=>{
+        setVariableDefinitions((draft)=>{
+            draft.push(v);
+        });
+    };
+    var ref, ref1;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
+            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.VariableEditForm, {
                 initialVariableDefinition: currentEditingVariableDefinition,
                 onChange: (definition)=>{
                     setVariableDefinitions((draft)=>{
@@ -139,7 +166,13 @@ function VariableEditor(props) {
                         setVariableEditIdx(null);
                     });
                 },
-                onCancel: ()=>setVariableEditIdx(null)
+                onCancel: ()=>{
+                    if (variableFormAction === 'create') {
+                        removeVariable(variableEditIdx);
+                    }
+                    setVariableEditIdx(null);
+                },
+                action: variableFormAction
             }),
             !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                 children: [
@@ -153,7 +186,7 @@ function VariableEditor(props) {
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                                 variant: "h2",
-                                children: "Variables"
+                                children: "Dashboard Variables"
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
@@ -178,113 +211,226 @@ function VariableEditor(props) {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_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.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, {
-                                                                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);
-                                                                    }
-                                                                })
+                                                                children: "Visibility"
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                component: "th",
-                                                                scope: "row",
-                                                                sx: {
-                                                                    fontWeight: 'bold'
-                                                                },
-                                                                children: v.spec.name
+                                                                children: "Name"
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
+                                                                children: "Type"
                                                             }),
-                                                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
-                                                                align: "right",
+                                                            /*#__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.Typography, {
+                                            variant: "h2",
+                                            children: [
+                                                (0, _material.capitalize)(extVar.source),
+                                                " Variables"
+                                            ]
+                                        }),
+                                        /*#__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: extVar.definitions.map((v)=>{
+                                                            var ref;
+                                                            /*#__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: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
+                                                                            disabled: true
+                                                                        })
                                                                     }),
-                                                                    /*#__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,
+                                                                                source: extVar.source
+                                                                            })
+                                                                        })
                                                                     }),
-                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                        onClick: ()=>setVariableEditIdx(idx),
-                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                        children: (ref1 = getVariableLabelByKind(v.kind)) !== null && ref1 !== void 0 ? ref1 : v.kind
                                                                     }),
-                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                        onClick: ()=>removeVariable(idx),
-                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                                                                    /*#__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"
-                                    })
-                                })
-                            ]
-                        })
+                                        })
+                                    ]
+                                }, extVar.source);
+                            })
+                        ]
                     })
                 ]
             })
@@ -294,3 +440,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)"
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -14,9 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TemplateVariableList", {
-    enumerable: true,
-    get: ()=>TemplateVariableList
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TemplateVariableList: ()=>TemplateVariableList,
+    TemplateVariableListItem: ()=>TemplateVariableListItem
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
@@ -26,20 +32,34 @@ const VARIABLE_INPUT_MIN_WIDTH = '120px';
 const VARIABLE_INPUT_MAX_WIDTH = '240px';
 function TemplateVariableList() {
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: variableDefinitions.map((v)=>{
-            var ref;
-            /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
-                display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                minWidth: VARIABLE_INPUT_MIN_WIDTH,
-                maxWidth: VARIABLE_INPUT_MAX_WIDTH,
-                marginBottom: 1,
-                marginRight: 1,
-                "data-testid": "template-variable",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_templateVariable.TemplateVariable, {
-                    name: v.spec.name
-                }, v.spec.name)
-            }, v.spec.name);
-        })
+    const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            externalVariableDefinitions.slice().reverse() // We reverse to have the most prioritized on top
+            .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableListItem, {
+                        spec: v.spec,
+                        source: def.source
+                    }, v.spec.name + def.source))),
+            variableDefinitions.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableListItem, {
+                    spec: v.spec
+                }, v.spec.name))
+        ]
     });
 }
+function TemplateVariableListItem({ spec , source  }) {
+    var ref, ref1;
+    const ctx = (0, _context.useTemplateVariable)(spec.name, source);
+    var ref2, ref3;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        display: ((ref = ctx.state) === null || ref === void 0 ? void 0 : ref.overridden) || ((ref1 = spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) ? 'none' : undefined,
+        minWidth: VARIABLE_INPUT_MIN_WIDTH,
+        maxWidth: VARIABLE_INPUT_MAX_WIDTH,
+        marginBottom: 1,
+        marginRight: 1,
+        "data-testid": "template-variable",
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_templateVariable.TemplateVariable, {
+            name: spec.name,
+            source: source
+        }, (ref2 = spec.name + source) !== null && ref2 !== void 0 ? ref2 : '')
+    }, (ref3 = spec.name + source) !== null && ref3 !== void 0 ? ref3 : '');
+}

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

@@ -17,9 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _exportStar(require("./EditVariablesButton"), exports);
 _exportStar(require("./TemplateVariable"), exports);
 _exportStar(require("./VariableEditor"), exports);
-_exportStar(require("./VariableEditorForm"), exports);
 _exportStar(require("./VariableList"), exports);
-_exportStar(require("./variable-model"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -31,6 +31,7 @@ const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
 const _shallow = require("zustand/shallow");
 const _react = require("react");
+const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _panelGroupEditorSlice = require("./panel-group-editor-slice");
 const _panelGroupSlice = require("./panel-group-slice");
@@ -82,7 +83,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource , isEditMode  } ,  } = props;
-    const { spec: { display , duration , refreshInterval  } , metadata ,  } = dashboardResource;
+    const { spec: { display , duration , refreshInterval =_core.DEFAULT_REFRESH_INTERVAL  } , metadata ,  } = dashboardResource;
     let { spec: { layouts , panels  } ,  } = dashboardResource;
     // Set fallbacks in case the frontend is used with a non-Perses backend
     layouts = layouts !== null && layouts !== void 0 ? layouts : [];
@@ -117,7 +118,7 @@ function initStore(props) {
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
-                    state.refreshInterval = refreshInterval;
+                    state.refreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
                 });
             }
         };