@perses-dev/dashboards 0.0.0-snapshot-core-types-move-units-c7c5d31 → 0.0.0-snapshot-panel-extra-content-2-2767e21

package/dist/cjs/components/Dashboard/Dashboard.js

@@ -24,7 +24,7 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _gridLayout = require("../GridLayout");
 const _emptyDashboard = require("../EmptyDashboard");
-function Dashboard({ emptyDashboardProps , ...boxProps }) {
+function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
     const panelGroupIds = (0, _context.usePanelGroupIds)();
     const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
@@ -46,7 +46,8 @@ function Dashboard({ emptyDashboardProps , ...boxProps }) {
                     })
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridLayout.GridLayout, {
-                        panelGroupId: panelGroupId
+                        panelGroupId: panelGroupId,
+                        panelOptions: panelOptions
                     }, panelGroupId))
             ]
         })

package/dist/cjs/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js

@@ -14,62 +14,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "DiscardChangesConfirmationDialog", {
+Object.defineProperty(exports, "DashboardDiscardChangesConfirmationDialog", {
     enumerable: true,
-    get: ()=>DiscardChangesConfirmationDialog
+    get: ()=>DashboardDiscardChangesConfirmationDialog
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _components = require("@perses-dev/components");
 const _context = require("../../context");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const DiscardChangesConfirmationDialog = ()=>{
+const DashboardDiscardChangesConfirmationDialog = ()=>{
     const { discardChangesConfirmationDialog: dialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
-    const isOpen = dialog !== undefined;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Dialog, {
-        open: isOpen,
-        children: dialog !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
-                    children: "Discard Changes"
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                    "aria-label": "Close",
-                    onClick: dialog.onCancel,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
-                    dividers: true,
-                    sx: {
-                        width: '500px'
-                    },
-                    children: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                            variant: "contained",
-                            onClick: dialog.onDiscardChanges,
-                            children: "Discard Changes"
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                            variant: "outlined",
-                            color: "secondary",
-                            onClick: dialog.onCancel,
-                            children: "Cancel"
-                        })
-                    ]
-                })
-            ]
-        })
+    if (dialog === undefined) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+        description: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.',
+        isOpen: true,
+        onCancel: dialog.onCancel,
+        onDiscardChanges: dialog.onDiscardChanges
     });
 };

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -52,7 +52,8 @@ const EditJsonDialogForm = ()=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
-        setRefreshInterval(draftDashboard.spec.refreshInterval);
+        var _refreshInterval;
+        setRefreshInterval((_refreshInterval = draftDashboard.spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : '0s');
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Form, {

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -54,7 +54,8 @@ function GridItemContent(props) {
         },
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
             definition: panelDefinition,
-            editHandlers: editHandlers
+            editHandlers: editHandlers,
+            panelOptions: props.panelOptions
         })
     });
 }

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -105,6 +105,7 @@ function GridLayout(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
+                                    panelOptions: props.panelOptions,
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i

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

@@ -14,8 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./GridLayout"), exports);
+_exportStar(require("./GridContainer"), exports);
 _exportStar(require("./GridItemContent"), exports);
+_exportStar(require("./GridLayout"), exports);
+_exportStar(require("./GridTitle"), 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/components/Panel/Panel.js

@@ -32,7 +32,8 @@ function _interopRequireDefault(obj) {
     };
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    var ref;
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -50,7 +51,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         width,
         height
     ]);
-    const { ref , inView  } = (0, _reactIntersectionObserver.useInView)({
+    const { ref: ref1 , inView  } = (0, _reactIntersectionObserver.useInView)({
         threshold: 0.3,
         initialInView: false,
         triggerOnce: true
@@ -63,7 +64,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Card, {
-        ref: ref,
+        ref: ref1,
         component: "section",
         sx: (0, _components.combineSx)({
             width: '100%',
@@ -80,6 +81,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         ...others,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {
+                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (ref = panelOptions.extra) === null || ref === void 0 ? void 0 : ref.call(panelOptions),
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,

package/dist/cjs/components/Panel/PanelHeader.js

@@ -33,7 +33,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
+function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , extra , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
@@ -140,11 +140,15 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
                 })
             ]
         }),
-        action: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderActionWrapper, {
+        action: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(HeaderActionWrapper, {
             direction: "row",
             spacing: 0.25,
             alignItems: "center",
-            children: actions
+            children: [
+                editHandlers === undefined && extra,
+                " ",
+                actions
+            ]
         }),
         sx: (0, _components.combineSx)((theme)=>({
                 padding: theme.spacing(1),

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

@@ -22,8 +22,8 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _variableModel = require("./variable-model");
 function TemplateVariable({ name  }) {
     var ref;
     const ctx = (0, _context.useTemplateVariable)(name);
@@ -49,7 +49,7 @@ function ListVariable({ name  }) {
     var ref, ref1, ref2, ref3;
     const ctx = (0, _context.useTemplateVariable)(name);
     const definition = ctx.definition;
-    const variablesOptionsQuery = (0, _variableModel.useListVariablePluginValues)(definition);
+    const variablesOptionsQuery = (0, _pluginSystem.useListVariablePluginValues)(definition);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;

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

@@ -27,9 +27,8 @@ 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 _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _variableEditorForm = require("./VariableEditorForm");
-const _variableModel = require("./variable-model");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -37,7 +36,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,6 +53,7 @@ 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 validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
         variableDefinitions
     ]);
@@ -81,6 +81,7 @@ function VariableEditor(props) {
         });
     };
     const addVariable = ()=>{
+        setVariableFormAction('create');
         setVariableDefinitions((draft)=>{
             draft.push({
                 kind: 'TextVariable',
@@ -92,6 +93,10 @@ function VariableEditor(props) {
         });
         setVariableEditIdx(variableDefinitions.length);
     };
+    const editVariable = (index)=>{
+        setVariableFormAction('update');
+        setVariableEditIdx(index);
+    };
     const toggleVariableVisibility = (index, visible)=>{
         setVariableDefinitions((draft)=>{
             const v = draft[index];
@@ -131,7 +136,7 @@ function VariableEditor(props) {
     var ref;
     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 +144,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: [
@@ -255,7 +266,7 @@ function VariableEditor(props) {
                                                                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
                                                                     }),
                                                                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                                                                        onClick: ()=>setVariableEditIdx(idx),
+                                                                        onClick: ()=>editVariable(idx),
                                                                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
                                                                     }),
                                                                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {

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;
                 });
             }
         };

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -23,26 +23,30 @@ const _react = require("react");
 const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
-    const { dashboardResource , datasourceApi , onCreate , children  } = props;
-    const { project  } = dashboardResource.metadata;
+    const { dashboardResource , projectName , datasourceApi , onCreate , children  } = props;
+    const project = projectName !== null && projectName !== void 0 ? projectName : dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.metadata.project;
     const { getPlugin , listPluginMetadata  } = (0, _pluginSystem.usePluginRegistry)();
     const findDatasource = (0, _core.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
-        const { datasources  } = dashboardResource.spec;
-        const dashboardDatasource = findDashboardDatasource(datasources, selector);
-        if (dashboardDatasource !== undefined) {
-            return {
-                spec: dashboardDatasource,
-                proxyUrl: undefined
-            };
+        if (dashboardResource) {
+            const { datasources  } = dashboardResource.spec;
+            const dashboardDatasource = findDashboardDatasource(datasources, selector);
+            if (dashboardDatasource !== undefined) {
+                return {
+                    spec: dashboardDatasource,
+                    proxyUrl: undefined
+                };
+            }
         }
-        // Try to find it at the project level as a Datasource resource
-        const datasource = await datasourceApi.getDatasource(project, selector);
-        if (datasource !== undefined) {
-            return {
-                spec: datasource.resource.spec,
-                proxyUrl: datasource.proxyUrl
-            };
+        if (project) {
+            // Try to find it at the project level as a Datasource resource
+            const datasource = await datasourceApi.getDatasource(project, selector);
+            if (datasource !== undefined) {
+                return {
+                    spec: datasource.resource.spec,
+                    proxyUrl: datasource.proxyUrl
+                };
+            }
         }
         // Try to find it at the global level as a GlobalDatasource resource
         const globalDatasource = await datasourceApi.getGlobalDatasource(selector);
@@ -84,7 +88,7 @@ function DatasourceStoreProvider(props) {
     const listDatasourceMetadata = (0, _core.useEvent)(async (datasourcePluginKind)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
             listPluginMetadata('Datasource'),
-            datasourceApi.listDatasources(project, datasourcePluginKind),
+            project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],
             datasourceApi.listGlobalDatasources(datasourcePluginKind)
         ]);
         // Find the metadata for the plugin type they asked for so we can use it for the name of the default datasource
@@ -95,7 +99,7 @@ function DatasourceStoreProvider(props) {
         // Get helper for de-duping results properly
         const { results , addResult  } = buildListDatasourceMetadataResults(datasourcePluginMetadata.display.name);
         // Start with dashboard datasources that have highest precedence
-        if (dashboardResource.spec.datasources !== undefined) {
+        if (dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) {
             for(const selectorName in dashboardResource.spec.datasources){
                 const spec = dashboardResource.spec.datasources[selectorName];
                 if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -97,7 +97,7 @@ const DashboardApp = (props)=>{
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DiscardChangesConfirmationDialog, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
                 ]

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "ViewDashboard", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
@@ -28,9 +29,9 @@ function ViewDashboard(props) {
     const { dashboardResource , datasourceApi , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
-    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
+    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : _core.DEFAULT_DASHBOARD_DURATION;
     var _refreshInterval;
-    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : '0s';
+    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
     const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashhboardRefreshInterval);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {

package/dist/components/Dashboard/Dashboard.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
 import { EmptyDashboardProps } from '../EmptyDashboard';
+import { PanelOptions } from '../Panel';
 export declare type DashboardProps = BoxProps & {
     /**
      * Props for `EmptyDashboard` component that will be rendered when the dashboard
@@ -8,9 +9,10 @@ export declare type DashboardProps = BoxProps & {
      * be used.
      */
     emptyDashboardProps?: EmptyDashboardProps;
+    panelOptions?: PanelOptions;
 };
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */
-export declare function Dashboard({ emptyDashboardProps, ...boxProps }: DashboardProps): JSX.Element;
+export declare function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): JSX.Element;
 //# sourceMappingURL=Dashboard.d.ts.map

package/dist/components/Dashboard/Dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExE,oBAAY,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,eAgB7E"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,oBAAY,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,eAmB3F"}

package/dist/components/Dashboard/Dashboard.js

@@ -18,7 +18,7 @@ import { GridLayout } from '../GridLayout';
 import { EmptyDashboard } from '../EmptyDashboard';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
- */ export function Dashboard({ emptyDashboardProps , ...boxProps }) {
+ */ export function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
     const panelGroupIds = usePanelGroupIds();
     const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ _jsx(Box, {
@@ -40,7 +40,8 @@ import { EmptyDashboard } from '../EmptyDashboard';
                     })
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
-                        panelGroupId: panelGroupId
+                        panelGroupId: panelGroupId,
+                        panelOptions: panelOptions
                     }, panelGroupId))
             ]
         })

package/dist/components/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\n\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty && panelGroupIds.map((panelGroupId) => <GridLayout key={panelGroupId} panelGroupId={panelGroupId} />)}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","map","panelGroupId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAA6B,mBAAmB,CAAC;AAWxE;;CAEC,GACD,OAAO,SAASC,SAAS,CAAC,EAAEC,mBAAmB,CAAA,EAAE,GAAGC,QAAQ,EAAkB,EAAE;IAC9E,MAAMC,aAAa,GAAGN,gBAAgB,EAAE,AAAC;IACzC,MAAMO,OAAO,GAAG,CAACD,aAAa,CAACE,MAAM,AAAC;IAEtC,qBACE,KAACX,GAAG;QAAE,GAAGQ,QAAQ;QAAEI,EAAE,EAAE;YAAEC,MAAM,EAAE,MAAM;SAAE;kBACvC,cAAA,MAACZ,aAAa;YAACa,iBAAiB,EAAEZ,UAAU;;gBACzCQ,OAAO,kBACN,KAACV,GAAG;oBAACY,EAAE,EAAE;wBAAEC,MAAM,EAAE,MAAM;wBAAEE,OAAO,EAAE,MAAM;wBAAEC,UAAU,EAAE,QAAQ;qBAAE;8BAChE,cAAA,KAACX,cAAc;wBAAE,GAAGE,mBAAmB;sBAAI;kBACvC,AACP;gBACA,CAACG,OAAO,IAAID,aAAa,CAACQ,GAAG,CAAC,CAACC,YAAY,iBAAK,KAACd,UAAU;wBAAoBc,YAAY,EAAEA,YAAY;uBAAxCA,YAAY,CAAgC,CAAC;;UACjG;MACZ,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout key={panelGroupId} panelGroupId={panelGroupId} panelOptions={panelOptions} />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","map","panelGroupId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAA6B,mBAAmB,CAAC;AAYxE;;CAEC,GACD,OAAO,SAASC,SAAS,CAAC,EAAEC,mBAAmB,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGC,QAAQ,EAAkB,EAAE;IAC5F,MAAMC,aAAa,GAAGP,gBAAgB,EAAE,AAAC;IACzC,MAAMQ,OAAO,GAAG,CAACD,aAAa,CAACE,MAAM,AAAC;IAEtC,qBACE,KAACZ,GAAG;QAAE,GAAGS,QAAQ;QAAEI,EAAE,EAAE;YAAEC,MAAM,EAAE,MAAM;SAAE;kBACvC,cAAA,MAACb,aAAa;YAACc,iBAAiB,EAAEb,UAAU;;gBACzCS,OAAO,kBACN,KAACX,GAAG;oBAACa,EAAE,EAAE;wBAAEC,MAAM,EAAE,MAAM;wBAAEE,OAAO,EAAE,MAAM;wBAAEC,UAAU,EAAE,QAAQ;qBAAE;8BAChE,cAAA,KAACZ,cAAc;wBAAE,GAAGE,mBAAmB;sBAAI;kBACvC,AACP;gBACA,CAACI,OAAO,IACPD,aAAa,CAACQ,GAAG,CAAC,CAACC,YAAY,iBAC7B,KAACf,UAAU;wBAAoBe,YAAY,EAAEA,YAAY;wBAAEX,YAAY,EAAEA,YAAY;uBAApEW,YAAY,CAA4D,AAC1F,CAAC;;UACU;MACZ,CACN;AACJ,CAAC"}

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const DiscardChangesConfirmationDialog: () => JSX.Element;
+export declare const DashboardDiscardChangesConfirmationDialog: () => JSX.Element | null;
 //# sourceMappingURL=DiscardChangesConfirmationDialog.d.ts.map

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAiBA,eAAO,MAAM,gCAAgC,mBAoC5C,CAAC"}
+{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAgBA,eAAO,MAAM,yCAAyC,0BAgBrD,CAAC"}

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js

@@ -10,54 +10,19 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DiscardChangesConfirmationDialog } from '@perses-dev/components';
 import { useDiscardChangesConfirmationDialog } from '../../context';
-export const DiscardChangesConfirmationDialog = ()=>{
+export const DashboardDiscardChangesConfirmationDialog = ()=>{
     const { discardChangesConfirmationDialog: dialog  } = useDiscardChangesConfirmationDialog();
-    const isOpen = dialog !== undefined;
-    return /*#__PURE__*/ _jsx(Dialog, {
-        open: isOpen,
-        children: dialog !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(DialogTitle, {
-                    children: "Discard Changes"
-                }),
-                /*#__PURE__*/ _jsx(IconButton, {
-                    "aria-label": "Close",
-                    onClick: dialog.onCancel,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
-                }),
-                /*#__PURE__*/ _jsx(DialogContent, {
-                    dividers: true,
-                    sx: {
-                        width: '500px'
-                    },
-                    children: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'
-                }),
-                /*#__PURE__*/ _jsxs(DialogActions, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "contained",
-                            onClick: dialog.onDiscardChanges,
-                            children: "Discard Changes"
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "outlined",
-                            color: "secondary",
-                            onClick: dialog.onCancel,
-                            children: "Cancel"
-                        })
-                    ]
-                })
-            ]
-        })
+    if (dialog === undefined) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
+        description: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.',
+        isOpen: true,
+        onCancel: dialog.onCancel,
+        onDiscardChanges: dialog.onDiscardChanges
     });
 };
 

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport const DiscardChangesConfirmationDialog = () => {\n  const { discardChangesConfirmationDialog: dialog } = useDiscardChangesConfirmationDialog();\n  const isOpen = dialog !== undefined;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <DialogTitle>Discard Changes</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={dialog.onCancel}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            {dialog.description ||\n              'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'}\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" onClick={dialog.onDiscardChanges}>\n              Discard Changes\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={dialog.onCancel}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDiscardChangesConfirmationDialog","DiscardChangesConfirmationDialog","discardChangesConfirmationDialog","dialog","isOpen","undefined","open","aria-label","onClick","onCancel","sx","theme","position","top","spacing","right","dividers","width","description","variant","onDiscardChanges","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,mCAAmC,QAAQ,eAAe,CAAC;AAEpE,OAAO,MAAMC,gCAAgC,GAAG,IAAM;IACpD,MAAM,EAAEC,gCAAgC,EAAEC,MAAM,CAAA,EAAE,GAAGH,mCAAmC,EAAE,AAAC;IAC3F,MAAMI,MAAM,GAAGD,MAAM,KAAKE,SAAS,AAAC;IAEpC,qBACE,KAACX,MAAM;QAACY,IAAI,EAAEF,MAAM;kBACjBD,MAAM,KAAKE,SAAS,kBACnB;;8BACE,KAACV,WAAW;8BAAC,iBAAe;kBAAc;8BAC1C,KAACF,UAAU;oBACTc,YAAU,EAAC,OAAO;oBAClBC,OAAO,EAAEL,MAAM,CAACM,QAAQ;oBACxBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;4BACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;yBAC1B,CAAA,AAAC;8BAEF,cAAA,KAACf,SAAS,KAAG;kBACF;8BACb,KAACH,aAAa;oBAACoB,QAAQ;oBAACN,EAAE,EAAE;wBAAEO,KAAK,EAAE,OAAO;qBAAE;8BAC3Cd,MAAM,CAACe,WAAW,IACjB,0HAA0H;kBAC9G;8BAChB,MAACrB,aAAa;;sCACZ,KAACC,MAAM;4BAACqB,OAAO,EAAC,WAAW;4BAACX,OAAO,EAAEL,MAAM,CAACiB,gBAAgB;sCAAE,iBAE9D;0BAAS;sCACT,KAACtB,MAAM;4BAACqB,OAAO,EAAC,UAAU;4BAACE,KAAK,EAAC,WAAW;4BAACb,OAAO,EAAEL,MAAM,CAACM,QAAQ;sCAAE,QAEvE;0BAAS;;kBACK;;UACf,AACJ;MACM,CACT;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport const DashboardDiscardChangesConfirmationDialog = () => {\n  const { discardChangesConfirmationDialog: dialog } = useDiscardChangesConfirmationDialog();\n  if (dialog === undefined) {\n    return null;\n  }\n  return (\n    <DiscardChangesConfirmationDialog\n      description={\n        dialog.description ||\n        'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'\n      }\n      isOpen={true}\n      onCancel={dialog.onCancel}\n      onDiscardChanges={dialog.onDiscardChanges}\n    />\n  );\n};\n"],"names":["DiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","DashboardDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","dialog","undefined","description","isOpen","onCancel","onDiscardChanges"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,gCAAgC,QAAQ,wBAAwB,CAAC;AAC1E,SAASC,mCAAmC,QAAQ,eAAe,CAAC;AAEpE,OAAO,MAAMC,yCAAyC,GAAG,IAAM;IAC7D,MAAM,EAAEC,gCAAgC,EAAEC,MAAM,CAAA,EAAE,GAAGH,mCAAmC,EAAE,AAAC;IAC3F,IAAIG,MAAM,KAAKC,SAAS,EAAE;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,qBACE,KAACL,gCAAgC;QAC/BM,WAAW,EACTF,MAAM,CAACE,WAAW,IAClB,0HAA0H;QAE5HC,MAAM,EAAE,IAAI;QACZC,QAAQ,EAAEJ,MAAM,CAACI,QAAQ;QACzBC,gBAAgB,EAAEL,MAAM,CAACK,gBAAgB;MACzC,CACF;AACJ,CAAC,CAAC"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -44,7 +44,8 @@ const EditJsonDialogForm = ()=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
-        setRefreshInterval(draftDashboard.spec.refreshInterval);
+        var _refreshInterval;
+        setRefreshInterval((_refreshInterval = draftDashboard.spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : '0s');
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ _jsxs(Dialog.Form, {