@perses-dev/dashboards 0.20.0 → 0.21.0

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

@@ -26,12 +26,18 @@ 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 _context = require("../../context");
 const _variableEditorForm = require("./VariableEditorForm");
+const _variableModel = require("./variable-model");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function getVariableLabelByKind(kind) {
+    var ref;
+    return (ref = _variableModel.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || ref === void 0 ? void 0 : ref.label;
+}
 function getValidation(variableDefinitions) {
     const errors = [];
     /**  Variable names must be unique */ const variableNames = variableDefinitions.map((variableDefinition)=>variableDefinition.spec.name);
@@ -51,6 +57,23 @@ function VariableEditor(props) {
         variableDefinitions
     ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const handleCancel = ()=>{
+        if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    props.onCancel();
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            props.onCancel();
+        }
+    };
     const removeVariable = (index)=>{
         setVariableDefinitions((draft)=>{
             draft.splice(index, 1);
@@ -66,6 +89,7 @@ function VariableEditor(props) {
                 }
             });
         });
+        setVariableEditIdx(variableDefinitions.length);
     };
     const toggleVariableVisibility = (index, visible)=>{
         setVariableDefinitions((draft)=>{
@@ -103,6 +127,7 @@ function VariableEditor(props) {
             }
         });
     };
+    var ref;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
@@ -127,7 +152,7 @@ function VariableEditor(props) {
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                                 variant: "h2",
-                                children: "Template Variables"
+                                children: "Variables"
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
@@ -145,126 +170,117 @@ function VariableEditor(props) {
                                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                         color: "secondary",
                                         variant: "outlined",
-                                        onClick: ()=>{
-                                            props.onCancel();
-                                        },
+                                        onClick: handleCancel,
                                         children: "Cancel"
                                     })
                                 ]
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                         padding: 2,
                         sx: {
                             overflowY: 'scroll'
                         },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                                variant: "h3",
-                                mb: 2,
-                                children: "Variable List"
-                            }),
-                            /*#__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": "simple table",
-                                            children: [
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
-                                                    children: /*#__PURE__*/ (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": "simple table",
+                                        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",
+                                                            children: "Action"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__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, {
-                                                                children: "Visibility"
+                                                                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, {
-                                                                children: "Variable Name"
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: v.spec.name
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                children: "Variable Type"
+                                                                children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
                                                             }),
-                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
                                                                 align: "right",
-                                                                children: "Action"
+                                                                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: ()=>setVariableEditIdx(idx),
+                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>removeVariable(idx),
+                                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                                                                    })
+                                                                ]
                                                             })
                                                         ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
-                                                    children: variableDefinitions.map((v, idx)=>{
-                                                        var ref;
-                                                        /*#__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: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
-                                                                        onChange: (e)=>{
-                                                                            toggleVariableVisibility(idx, e.target.checked);
-                                                                        }
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                    component: "th",
-                                                                    scope: "row",
-                                                                    sx: {
-                                                                        fontWeight: 'bold'
-                                                                    },
-                                                                    children: v.spec.name
-                                                                }),
-                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                                    children: 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: ()=>setVariableEditIdx(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);
-                                                    })
+                                                    }, v.spec.name);
                                                 })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                        display: "flex",
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                            onClick: addVariable,
-                                            variant: "contained",
-                                            children: "Add New Variable"
-                                        })
+                                            })
+                                        ]
                                     })
-                                ]
-                            })
-                        ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                    display: "flex",
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                        onClick: addVariable,
+                                        variant: "contained",
+                                        children: "Add New"
+                                    })
+                                })
+                            ]
+                        })
                     })
                 ]
             })

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

@@ -25,6 +25,7 @@ const _useImmer = require("use-immer");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
+const _clipboardOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ClipboardOutline"));
 const _variableModel = require("../variable-model");
 const _variableEditorFormModel = require("./variable-editor-form-model");
 function _interopRequireDefault(obj) {
@@ -71,10 +72,6 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const VARIABLE_TYPES = [
-    'ListVariable',
-    'TextVariable'
-];
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
 // TODO: Replace with proper validation library
 function getValidation(state) {
@@ -96,7 +93,7 @@ const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_mater
         variant: "subtitle1",
         children: children
     });
-function VariableListPreview({ definition  }) {
+function VariableListPreview({ definition , onRefresh  }) {
     const { data , isFetching , error  } = (0, _variableModel.useListVariablePluginValues)(definition);
     const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
     const showAll = ()=>{
@@ -109,6 +106,40 @@ function VariableListPreview({ definition  }) {
     const errorMessage = error === null || error === void 0 ? void 0 : error.message;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: 'row',
+                spacing: 1,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "caption",
+                        children: "Preview Values"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
+                        title: "Refresh Values",
+                        placement: "right",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: onRefresh,
+                            size: "small",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
+                        title: "Copy Values to Clipboard",
+                        placement: "right",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: async ()=>{
+                                if (data === null || data === void 0 ? void 0 : data.length) {
+                                    await navigator.clipboard.writeText(data.map((d)=>d.label).join(','));
+                                    alert('Copied to clipboard!');
+                                }
+                            },
+                            size: "small",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_clipboardOutline.default, {})
+                        })
+                    })
+                ]
+            }),
             errorMessage && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
                 severity: "error",
                 children: errorMessage
@@ -173,7 +204,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                         variant: "h2",
-                        children: "Template Variables / Edit Variable"
+                        children: "Edit Variable"
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                         direction: "row",
@@ -208,11 +239,6 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                     overflowY: 'scroll'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                        variant: "h3",
-                        mb: 2,
-                        children: "Edit Variable"
-                    }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
                         children: "General"
                     }),
@@ -258,10 +284,10 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                                     draft.kind = v.target.value;
                                                 });
                                             },
-                                            children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                                    value: v,
-                                                    children: v
-                                                }, v))
+                                            children: _variableModel.VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                                    value: v.kind,
+                                                    children: v.label
+                                                }, v.kind))
                                         })
                                     ]
                                 })
@@ -271,7 +297,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                 xs: 6,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                                     fullWidth: true,
-                                    label: "Label",
+                                    label: "Display Label",
                                     value: state.title,
                                     onChange: (v)=>{
                                         setState((draft)=>{
@@ -335,18 +361,6 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                         item: true,
                                         xs: 6,
                                         children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                                sx: {
-                                                    mb: 1
-                                                },
-                                                label: "Capturing Regexp",
-                                                value: state.listVariableFields.capturing_regexp,
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.capturing_regexp = e.target.value;
-                                                    });
-                                                }
-                                            }),
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
                                                 onClickAway: ()=>refreshPreview(),
                                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {})
@@ -364,38 +378,35 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                             })
                                         ]
                                     }),
-                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
                                         item: true,
                                         xs: 12,
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.ErrorBoundary, {
-                                            FallbackComponent: ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                                                    children: "Error previewing values"
-                                                }),
-                                            resetKeys: [
-                                                previewSpec
-                                            ],
-                                            children: [
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                                    direction: 'row',
-                                                    spacing: 1,
-                                                    alignItems: "center",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                                                            variant: "caption",
-                                                            children: "Preview Values"
-                                                        }),
-                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                            onClick: refreshPreview,
-                                                            size: "small",
-                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
-                                                        })
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableListPreview, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                                sx: {
+                                                    mb: 1
+                                                },
+                                                label: "Capturing Regexp Filter",
+                                                value: state.listVariableFields.capturing_regexp,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.capturing_regexp = e.target.value;
+                                                    });
+                                                }
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                                                FallbackComponent: ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                                                        children: "Error previewing values"
+                                                    }),
+                                                resetKeys: [
+                                                    previewSpec
+                                                ],
+                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableListPreview, {
+                                                    onRefresh: refreshPreview,
                                                     definition: previewSpec
                                                 })
-                                            ]
-                                        })
+                                            })
+                                        ]
                                     })
                                 ]
                             }),

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

@@ -21,7 +21,6 @@ Object.defineProperty(exports, "TemplateVariableList", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
-const _eye = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Eye"));
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
 const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
@@ -78,8 +77,6 @@ function TemplateVariableList(props) {
     const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
     const { isEditMode  } = (0, _context.useEditMode)();
-    const [showVariablesInEditMode, setShowVariablesInEditMode] = (0, _react.useState)(true);
-    const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
     const scrollTrigger = (0, _material.useScrollTrigger)({
         disableHysteresis: true
@@ -107,23 +104,13 @@ function TemplateVariableList(props) {
                     }
                 })
             }),
-            isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                 pb: 2,
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Button, {
-                        onClick: ()=>setShowVariablesInEditMode(!showVariablesInEditMode),
-                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_eye.default, {}),
-                        children: [
-                            showVariablesInEditMode ? 'Hide' : 'Show',
-                            " Variables"
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        onClick: ()=>setIsEditing(true),
-                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {}),
-                        children: "Edit Variables"
-                    })
-                ]
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                    onClick: ()=>setIsEditing(true),
+                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {}),
+                    children: "Edit Variables"
+                })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
                 color: 'inherit',
@@ -141,7 +128,7 @@ function TemplateVariableList(props) {
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
                             direction: "row",
                             spacing: 1,
-                            children: showVariables && variableDefinitions.map((v)=>{
+                            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,

package/dist/cjs/components/Variables/variable-model.js

@@ -23,7 +23,8 @@ function _export(target, all) {
 _export(exports, {
     filterVariableList: ()=>filterVariableList,
     useListVariablePluginValues: ()=>useListVariablePluginValues,
-    getVariableValuesKey: ()=>getVariableValuesKey
+    getVariableValuesKey: ()=>getVariableValuesKey,
+    VARIABLE_TYPES: ()=>VARIABLE_TYPES
 });
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _reactQuery = require("@tanstack/react-query");
@@ -104,3 +105,13 @@ function useListVariablePluginValues(definition) {
 function getVariableValuesKey(v) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }
+const VARIABLE_TYPES = [
+    {
+        label: 'List',
+        kind: 'ListVariable'
+    },
+    {
+        label: 'Text',
+        kind: 'TextVariable'
+    }
+];

package/dist/cjs/components/index.js

@@ -24,7 +24,7 @@ _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
 _exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
-_exportStar(require("./UnsavedChangesConfirmationDialog"), exports);
+_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
 _exportStar(require("./Variables"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -37,6 +37,7 @@ const _panelEditorSlice = require("./panel-editor-slice");
 const _panelSlice = require("./panel-slice");
 const _deletePanelGroupSlice = require("./delete-panel-group-slice");
 const _deletePanelSlice = require("./delete-panel-slice");
+const _discardChangesDialogSlice = require("./discard-changes-dialog-slice");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -72,6 +73,7 @@ function initStore(props) {
             ...(0, _deletePanelGroupSlice.createDeletePanelGroupSlice)(...args),
             ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
             ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
+            ...(0, _discardChangesDialogSlice.createDiscardChangesDialogSlice)(...args),
             metadata,
             defaultTimeRange: {
                 pastDuration: duration

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -33,7 +33,8 @@ _export(exports, {
     usePanelActions: ()=>usePanelActions,
     usePanelEditor: ()=>usePanelEditor,
     useDeletePanelDialog: ()=>useDeletePanelDialog,
-    useDefaultTimeRange: ()=>useDefaultTimeRange
+    useDefaultTimeRange: ()=>useDefaultTimeRange,
+    useDiscardChangesConfirmationDialog: ()=>useDiscardChangesConfirmationDialog
 });
 const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
@@ -189,3 +190,11 @@ const selectDefaultTimeRange = (state)=>state.defaultTimeRange;
 function useDefaultTimeRange() {
     return (0, _dashboardProvider.useDashboardStore)(selectDefaultTimeRange);
 }
+const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog , openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  })=>({
+        discardChangesConfirmationDialog,
+        openDiscardChangesConfirmationDialog,
+        closeDiscardChangesConfirmationDialog
+    });
+function useDiscardChangesConfirmationDialog() {
+    return (0, _dashboardProvider.useDashboardStore)(selectDiscardChangesConfirmationDialog);
+}