@perses-dev/dashboards 0.13.0 → 0.14.0

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -33,10 +33,14 @@ function _interopRequireDefault(obj) {
     };
 }
 const DashboardToolbar = (props)=>{
-    const { dashboardName , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
     const { openAddPanelGroup , openAddPanel  } = (0, _context.useDashboardActions)();
     const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
+    const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h2",
+        children: dashboardName
+    });
     const onSave = ()=>{
         setEditMode(false);
     };
@@ -52,13 +56,7 @@ const DashboardToolbar = (props)=>{
                         padding: 2,
                         display: "flex",
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
-                                variant: "h2",
-                                children: [
-                                    "Edit ",
-                                    dashboardName
-                                ]
-                            }),
+                            dashboardTitle,
                             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 spacing: 1,
@@ -126,10 +124,7 @@ const DashboardToolbar = (props)=>{
                         width: '100%'
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                            variant: "h2",
-                            children: dashboardName
-                        }),
+                        dashboardTitle,
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 2,

package/dist/cjs/components/PanelDrawer/PanelDrawer.js

@@ -56,8 +56,7 @@ const PanelDrawer = ()=>{
                     sx: {
                         display: 'flex',
                         alignItems: 'center',
-                        marginBottom: (theme)=>theme.spacing(2),
-                        paddingBottom: (theme)=>theme.spacing(2),
+                        padding: (theme)=>theme.spacing(1, 2),
                         borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
                     },
                     children: [

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -73,16 +73,18 @@ function PanelEditorForm(props) {
     };
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
-    /*#__PURE__*/ (0, _jsxRuntime.jsx)("form", {
+    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        component: "form",
         id: panelEditorFormId,
         onSubmit: handleSubmit,
+        sx: {
+            flex: 1,
+            overflowY: 'scroll',
+            padding: (theme)=>theme.spacing(2)
+        },
         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
             container: true,
             spacing: 2,
-            sx: {
-                overflowY: 'scroll',
-                maxHeight: '90vh'
-            },
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                     item: true,

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

@@ -20,9 +20,9 @@ Object.defineProperty(exports, "generateId", {
     enumerable: true,
     get: ()=>generateId
 });
-if (globalThis.dashboardStoreId === undefined) {
-    globalThis.dashboardStoreId = 0;
-}
 function generateId() {
+    if (globalThis.dashboardStoreId === undefined) {
+        globalThis.dashboardStoreId = 0;
+    }
     return globalThis.dashboardStoreId++;
 }

package/dist/cjs/test/render.js

@@ -48,7 +48,6 @@ function renderWithContext(ui, options, history) {
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
                     adapter: _reactRouter6.ReactRouter6Adapter,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
-                        themeName: "perses",
                         chartsTheme: _components.testChartsTheme,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
                             ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),

package/dist/cjs/utils/component-ids.js

@@ -19,10 +19,10 @@ Object.defineProperty(exports, "useId", {
     get: ()=>useId
 });
 const _react = require("react");
-if (globalThis.useIdValue === undefined) {
-    globalThis.useIdValue = 0;
-}
 function useId(prefix) {
+    if (globalThis.useIdValue === undefined) {
+        globalThis.useIdValue = 0;
+    }
     const id = (0, _react.useRef)(undefined);
     if (id.current === undefined) {
         id.current = `${prefix}-${globalThis.useIdValue++}`;

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

@@ -25,7 +25,7 @@ const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource  } = props;
+    const { dashboardResource , dashboardTitleComponent  } = props;
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -65,6 +65,7 @@ const DashboardApp = (props)=>{
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
+                dashboardTitleComponent: dashboardTitleComponent,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),

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

@@ -25,7 +25,7 @@ const _context = require("../../context");
 const _utils = require("../../utils");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
@@ -55,7 +55,8 @@ function ViewDashboard(props) {
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
-                                dashboardResource: dashboardResource
+                                dashboardResource: dashboardResource,
+                                dashboardTitleComponent: dashboardTitleComponent
                             })
                         })
                     })

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface DashboardToolbarProps {
     dashboardName: string;
+    dashboardTitleComponent?: JSX.Element;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6E5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAkF5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -20,10 +20,14 @@ import { useDashboardActions, useEditMode } from '../../context';
 import { TemplateVariableList } from '../Variables';
 import { TimeRangeControls } from '../TimeRangeControls';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
     const { openAddPanelGroup , openAddPanel  } = useDashboardActions();
     const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
+    const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
+        variant: "h2",
+        children: dashboardName
+    });
     const onSave = ()=>{
         setEditMode(false);
     };
@@ -39,13 +43,7 @@ export const DashboardToolbar = (props)=>{
                         padding: 2,
                         display: "flex",
                         children: [
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                variant: "h2",
-                                children: [
-                                    "Edit ",
-                                    dashboardName
-                                ]
-                            }),
+                            dashboardTitle,
                             /*#__PURE__*/ _jsxs(Stack, {
                                 direction: "row",
                                 spacing: 1,
@@ -113,10 +111,7 @@ export const DashboardToolbar = (props)=>{
                         width: '100%'
                     },
                     children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "h2",
-                            children: dashboardName
-                        }),
+                        dashboardTitle,
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
                             spacing: 2,

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, onEditButtonClick, onCancelButtonClick } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, onEditButtonClick, onCancelButtonClick } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","dashboardTitleComponent","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAuDvB,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAsDvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -50,8 +50,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                     sx: {
                         display: 'flex',
                         alignItems: 'center',
-                        marginBottom: (theme)=>theme.spacing(2),
-                        paddingBottom: (theme)=>theme.spacing(2),
+                        padding: (theme)=>theme.spacing(1, 2),
                         borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
                     },
                     children: [

package/dist/components/PanelDrawer/PanelDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              marginBottom: (theme) => theme.spacing(2),\n              paddingBottom: (theme) => theme.spacing(2),\n              borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","marginBottom","theme","spacing","paddingBottom","borderBottom","palette","grey","variant","mode","direction","marginLeft","type","form","onClick","onSubmit","initialValues"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","grey","variant","mode","direction","marginLeft","type","form","onClick","onSubmit","initialValues"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA4BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAqG1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA0G1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
+import { Box, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
 import { useListPanelGroups } from '../../context';
@@ -59,16 +59,18 @@ export function PanelEditorForm(props) {
     };
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
-    /*#__PURE__*/ _jsx("form", {
+    /*#__PURE__*/ _jsx(Box, {
+        component: "form",
         id: panelEditorFormId,
         onSubmit: handleSubmit,
+        sx: {
+            flex: 1,
+            overflowY: 'scroll',
+            padding: (theme)=>theme.spacing(2)
+        },
         children: /*#__PURE__*/ _jsxs(Grid, {
             container: true,
             spacing: 2,
-            sx: {
-                overflowY: 'scroll',
-                maxHeight: '90vh'
-            },
             children: [
                 /*#__PURE__*/ _jsx(Grid, {
                     item: true,

package/dist/components/PanelDrawer/PanelEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 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 { FormEventHandler, useState } from 'react';\nimport {\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <form id={panelEditorFormId} onSubmit={handleSubmit}>\n      <Grid container spacing={2} sx={{ overflowY: 'scroll', maxHeight: '90vh' }}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupId={groupId} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","values","panelGroup","form","id","panelEditorFormId","container","spacing","sx","overflowY","maxHeight","item","xs","required","fullWidth","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 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 { FormEventHandler, useState } from 'react';\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      onSubmit={handleSubmit}\n      sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}\n    >\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupId={groupId} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","Box","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","values","panelGroup","component","id","panelEditorFormId","sx","flex","overflowY","padding","theme","spacing","container","item","xs","required","fullWidth","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"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,SAA2BA,QAAQ,QAAQ,OAAO,CAAC;AACnD,SACEC,GAAG,EACHC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,MAAM,EAENC,SAAS,EACTC,UAAU,QACL,eAAe,CAAC;AACvB,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,2BAA2B,CAAC;AAChG,SAASC,kBAAkB,QAAQ,eAAe,CAAC;AAEnD,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;QAwFlCC,GAAkB;IAvF3C,MAAM,EAAEC,aAAa,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGH,KAAK,AAAC;IAE1C,MAAMI,WAAW,GAAGP,kBAAkB,EAAE,AAAC;IAEzC,MAAM,CAACQ,IAAI,EAAEC,OAAO,CAAC,GAAGxB,QAAQ,CAACoB,aAAa,CAACG,IAAI,CAAC,AAAC;IACrD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAG1B,QAAQ,CAACoB,aAAa,CAACK,WAAW,CAAC,AAAC;IAC1E,MAAM,CAACE,OAAO,EAAEC,UAAU,CAAC,GAAG5B,QAAQ,CAACoB,aAAa,CAACO,OAAO,CAAC,AAAC;IAC9D,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAG9B,QAAQ,CAACoB,aAAa,CAACS,IAAI,CAAC,AAAC;IACrD,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAGhC,QAAQ,CAACoB,aAAa,CAACW,IAAI,CAAC,AAAC;IAErD,oFAAoF;IACpF,MAAMZ,YAAY,GAAGL,eAAe,CAAC;QACnCmB,UAAU,EAAE,OAAO;QACnBC,KAAK,EAAE;YAAEL,IAAI;YAAEE,IAAI;SAAE;QACrBI,QAAQ,EAAE,CAACC,MAAM,GAAK;YACpBN,OAAO,CAACM,MAAM,CAACP,IAAI,CAAC,CAAC;YACrBG,OAAO,CAACI,MAAM,CAACL,IAAI,CAAC,CAAC;QACvB,CAAC;KACF,CAAC,AAAC;IAEH,+GAA+G;IAC/G,MAAMM,iBAAiB,GAAoC,CAACC,CAAC,GAAK;QAChE,MAAM,EAAEJ,KAAK,CAAA,EAAE,GAAGI,CAAC,CAACC,MAAM,AAAC;QAC3B,IAAI,OAAOL,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO;QACT,CAAC;QACDN,UAAU,CAACM,KAAK,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,MAAMM,YAAY,GAAqB,CAACF,CAAC,GAAK;QAC5CA,CAAC,CAACG,cAAc,EAAE,CAAC;QACnB,MAAMC,MAAM,GAAsB;YAAEnB,IAAI;YAAEE,WAAW;YAAEE,OAAO;YAAEE,IAAI;YAAEE,IAAI;SAAE,AAAC;QAC7EV,QAAQ,CAACqB,MAAM,CAAC,CAAC;IACnB,CAAC,AAAC;QA2BeC,MAAgB,EA2BRxB,IAA2B;IApDpD,OACE,wEAAwE;kBACxE,KAAClB,GAAG;QACF2C,SAAS,EAAC,MAAM;QAChBC,EAAE,EAAEC,iBAAiB;QACrBzB,QAAQ,EAAEmB,YAAY;QACtBO,EAAE,EAAE;YAAEC,IAAI,EAAE,CAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;SAAE;kBAE1E,cAAA,MAAChD,IAAI;YAACiD,SAAS;YAACD,OAAO,EAAE,CAAC;;8BACxB,KAAChD,IAAI;oBAACkD,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAAC/C,SAAS;wBACRgD,QAAQ;wBACRC,SAAS;wBACTC,KAAK,EAAC,MAAM;wBACZxB,KAAK,EAAEX,IAAI;wBACXoC,OAAO,EAAC,UAAU;wBAClBxB,QAAQ,EAAE,CAACG,CAAC,GAAKd,OAAO,CAACc,CAAC,CAACC,MAAM,CAACL,KAAK,CAAC;sBACxC;kBACG;8BACP,KAAC9B,IAAI;oBAACkD,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,MAACrD,WAAW;wBAACuD,SAAS;;0CACpB,KAACpD,UAAU;gCAACwC,EAAE,EAAC,cAAc;0CAAC,OAAK;8BAAa;0CAChD,KAACtC,MAAM;gCAACiD,QAAQ;gCAACI,OAAO,EAAC,cAAc;gCAACF,KAAK,EAAC,OAAO;gCAACxB,KAAK,EAAEP,OAAO;gCAAEQ,QAAQ,EAAEE,iBAAiB;0CAC9Ff,WAAW,CAACuC,GAAG,CAAC,CAAClB,UAAU,EAAEmB,KAAK,iBACjC,KAACxD,QAAQ;wCAAqB4B,KAAK,EAAES,UAAU,CAACE,EAAE;kDAC/CF,CAAAA,MAAgB,GAAhBA,UAAU,CAACoB,KAAK,cAAhBpB,MAAgB,cAAhBA,MAAgB,GAAI,CAAC,MAAM,EAAEmB,KAAK,GAAG,CAAC,CAAC,CAAC;uCAD5BnB,UAAU,CAACE,EAAE,CAEjB,AACZ,CAAC;8BACK;;sBACG;kBACT;8BACP,KAACzC,IAAI;oBAACkD,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAAC/C,SAAS;wBACRiD,SAAS;wBACTC,KAAK,EAAC,aAAa;wBACnBxB,KAAK,EAAET,WAAW;wBAClBkC,OAAO,EAAC,UAAU;wBAClBxB,QAAQ,EAAE,CAACG,CAAC,GAAKZ,cAAc,CAACY,CAAC,CAACC,MAAM,CAACL,KAAK,CAAC;sBAC/C;kBACG;8BACP,MAAC9B,IAAI;oBAACkD,IAAI;oBAACC,EAAE,EAAE,CAAC;;sCACd,MAACrD,WAAW;4BAACuD,SAAS;4BAACO,QAAQ,EAAE7C,YAAY,CAAC8C,SAAS;4BAAEC,KAAK,EAAE/C,YAAY,CAAC+C,KAAK,KAAK,IAAI;;8CACzF,KAAC7D,UAAU;oCAACwC,EAAE,EAAC,kBAAkB;8CAAC,MAAI;kCAAa;8CACnD,KAACjC,gBAAgB;oCACfqB,UAAU,EAAC,OAAO;oCAClBuB,QAAQ;oCACRI,OAAO,EAAC,kBAAkB;oCAC1BF,KAAK,EAAC,MAAM;oCACZxB,KAAK,EAAEf,YAAY,CAACgD,WAAW,GAAGhD,YAAY,CAACgD,WAAW,GAAGtC,IAAI;oCACjEM,QAAQ,EAAEhB,YAAY,CAACiD,YAAY;kCACnC;;0BACU;sCACd,KAACjE,cAAc;sCAAEgB,CAAAA,IAA2B,GAA3BA,CAAAA,GAAkB,GAAlBA,YAAY,CAAC+C,KAAK,cAAlB/C,GAAkB,WAAS,GAA3BA,KAAAA,CAA2B,GAA3BA,GAAkB,CAAEkD,OAAO,cAA3BlD,IAA2B,cAA3BA,IAA2B,GAAI,EAAE;0BAAkB;;kBAC/D;8BACP,MAACf,IAAI;oBAACkD,IAAI;oBAACC,EAAE,EAAE,EAAE;;sCACf,KAAC9C,UAAU;4BAACkD,OAAO,EAAC,IAAI;4BAACW,YAAY,EAAE,CAAC;sCAAE,SAE1C;0BAAa;sCACb,KAAC3D,aAAa;4BAAC4D,iBAAiB,EAAE7D,UAAU;sCAC1C,cAAA,KAACM,YAAY;gCAACa,IAAI,EAAEA,IAAI;gCAAEN,IAAI,EAAEA,IAAI;gCAAEE,WAAW,EAAEA,WAAW;gCAAEM,IAAI,EAAEA,IAAI;gCAAEJ,OAAO,EAAEA,OAAO;8BAAI;0BAClF;;kBACX;8BACP,KAACvB,IAAI;oBAACkD,IAAI;oBAACC,EAAE,EAAE,EAAE;8BACf,cAAA,KAAC5C,aAAa;wBAAC4D,iBAAiB,EAAE7D,UAAU;kCAC1C,cAAA,KAACG,gBAAgB;4BAACoB,UAAU,EAAC,OAAO;4BAACuC,UAAU,EAAE3C,IAAI;4BAAEK,KAAK,EAAEH,IAAI;4BAAEI,QAAQ,EAAEhB,YAAY,CAACsD,YAAY;0BAAI;sBAC7F;kBACX;;UACF;MACH,EACN;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAM3B,iBAAiB,GAAG,mBAAmB,CAAC"}

package/dist/context/DashboardProvider/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/common.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,oBAAY,UAAU,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;AAEjF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,gBAAgB,EAAE,MAAM,CAAC;CAC9B;AAMD;;GAEG;AACH,wBAAgB,UAAU,WAEzB"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/common.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,oBAAY,UAAU,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;AAEjF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,gBAAgB,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,UAAU,WAKzB"}

package/dist/context/DashboardProvider/common.js

@@ -12,12 +12,12 @@
 // limitations under the License.
 /**
  * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).
- */ if (globalThis.dashboardStoreId === undefined) {
-    globalThis.dashboardStoreId = 0;
-}
-/**
+ */ /**
  * Helper function to generate unique IDs for things in the dashboard store that don't have a "natural" ID.
  */ export function generateId() {
+    if (globalThis.dashboardStoreId === undefined) {
+        globalThis.dashboardStoreId = 0;
+    }
     return globalThis.dashboardStoreId++;
 }
 

package/dist/context/DashboardProvider/common.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/common.ts"],"sourcesContent":["// Copyright 2022 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\n/**\n * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).\n */\nexport type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var dashboardStoreId: number;\n}\n\nif (globalThis.dashboardStoreId === undefined) {\n  globalThis.dashboardStoreId = 0;\n}\n\n/**\n * Helper function to generate unique IDs for things in the dashboard store that don't have a \"natural\" ID.\n */\nexport function generateId() {\n  return globalThis.dashboardStoreId++;\n}\n"],"names":["globalThis","dashboardStoreId","undefined","generateId"],"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;;CAEC,GACD,AAOA,IAAIA,UAAU,CAACC,gBAAgB,KAAKC,SAAS,EAAE;IAC7CF,UAAU,CAACC,gBAAgB,GAAG,CAAC,CAAC;AAClC,CAAC;AAED;;CAEC,GACD,OAAO,SAASE,UAAU,GAAG;IAC3B,OAAOH,UAAU,CAACC,gBAAgB,EAAE,CAAC;AACvC,CAAC"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/common.ts"],"sourcesContent":["// Copyright 2022 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\n/**\n * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).\n */\nexport type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var dashboardStoreId: number;\n}\n\n/**\n * Helper function to generate unique IDs for things in the dashboard store that don't have a \"natural\" ID.\n */\nexport function generateId() {\n  if (globalThis.dashboardStoreId === undefined) {\n    globalThis.dashboardStoreId = 0;\n  }\n  return globalThis.dashboardStoreId++;\n}\n"],"names":["generateId","globalThis","dashboardStoreId","undefined"],"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;;CAEC,GACD,AAOA;;CAEC,GACD,OAAO,SAASA,UAAU,GAAG;IAC3B,IAAIC,UAAU,CAACC,gBAAgB,KAAKC,SAAS,EAAE;QAC7CF,UAAU,CAACC,gBAAgB,GAAG,CAAC,CAAC;IAClC,CAAC;IACD,OAAOD,UAAU,CAACC,gBAAgB,EAAE,CAAC;AACvC,CAAC"}

package/dist/test/render.js

@@ -42,7 +42,6 @@ import { MOCK_PLUGINS } from './plugin-registry';
                 children: /*#__PURE__*/ _jsx(QueryParamProvider, {
                     adapter: ReactRouter6Adapter,
                     children: /*#__PURE__*/ _jsx(ChartsThemeProvider, {
-                        themeName: "perses",
                         chartsTheme: testChartsTheme,
                         children: /*#__PURE__*/ _jsx(PluginRegistry, {
                             ...mockPluginRegistry(...MOCK_PLUGINS),

package/dist/test/render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/render.tsx"],"sourcesContent":["// Copyright 2022 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 { render, RenderOptions } from '@testing-library/react';\nimport { unstable_HistoryRouter } from 'react-router-dom';\nimport { createMemoryHistory, MemoryHistory } from 'history';\nimport { QueryParamProvider } from 'use-query-params';\nimport { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { ChartsThemeProvider, testChartsTheme } from '@perses-dev/components';\nimport { mockPluginRegistry, PluginRegistry } from '@perses-dev/plugin-system';\nimport { MOCK_PLUGINS } from './plugin-registry';\n\n/**\n * Test helper to render a React component with some common app-level providers wrapped around it.\n */\nexport function renderWithContext(\n  ui: React.ReactElement,\n  options?: Omit<RenderOptions, 'queries'>,\n  history?: MemoryHistory\n) {\n  // Create a new QueryClient for each test to avoid caching issues\n  const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });\n\n  const BaseRender = () => {\n    const HistoryRouter = unstable_HistoryRouter;\n    history = history ?? createMemoryHistory();\n    return (\n      <HistoryRouter history={history}>\n        <QueryClientProvider client={queryClient}>\n          <QueryParamProvider adapter={ReactRouter6Adapter}>\n            <ChartsThemeProvider themeName=\"perses\" chartsTheme={testChartsTheme}>\n              <PluginRegistry {...mockPluginRegistry(...MOCK_PLUGINS)}>{ui}</PluginRegistry>\n            </ChartsThemeProvider>\n          </QueryParamProvider>\n        </QueryClientProvider>\n      </HistoryRouter>\n    );\n  };\n\n  return render(<BaseRender />, options);\n}\n"],"names":["render","unstable_HistoryRouter","createMemoryHistory","QueryParamProvider","ReactRouter6Adapter","QueryClient","QueryClientProvider","ChartsThemeProvider","testChartsTheme","mockPluginRegistry","PluginRegistry","MOCK_PLUGINS","renderWithContext","ui","options","history","queryClient","defaultOptions","queries","refetchOnWindowFocus","retry","BaseRender","HistoryRouter","client","adapter","themeName","chartsTheme"],"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,MAAM,QAAuB,wBAAwB,CAAC;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB,CAAC;AAC1D,SAASC,mBAAmB,QAAuB,SAAS,CAAC;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB,CAAC;AACtD,SAASC,mBAAmB,QAAQ,0CAA0C,CAAC;AAC/E,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB,CAAC;AACzE,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB,CAAC;AAC9E,SAASC,kBAAkB,EAAEC,cAAc,QAAQ,2BAA2B,CAAC;AAC/E,SAASC,YAAY,QAAQ,mBAAmB,CAAC;AAEjD;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,EAAsB,EACtBC,OAAwC,EACxCC,OAAuB,EACvB;IACA,iEAAiE;IACjE,MAAMC,WAAW,GAAG,IAAIX,WAAW,CAAC;QAAEY,cAAc,EAAE;YAAEC,OAAO,EAAE;gBAAEC,oBAAoB,EAAE,KAAK;gBAAEC,KAAK,EAAE,KAAK;aAAE;SAAE;KAAE,CAAC,AAAC;IAEpH,MAAMC,UAAU,GAAG,IAAM;QACvB,MAAMC,aAAa,GAAGrB,sBAAsB,AAAC;QAC7Cc,OAAO,GAAGA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,mBAAmB,EAAE,CAAC;QAC3C,qBACE,KAACoB,aAAa;YAACP,OAAO,EAAEA,OAAO;sBAC7B,cAAA,KAACT,mBAAmB;gBAACiB,MAAM,EAAEP,WAAW;0BACtC,cAAA,KAACb,kBAAkB;oBAACqB,OAAO,EAAEpB,mBAAmB;8BAC9C,cAAA,KAACG,mBAAmB;wBAACkB,SAAS,EAAC,QAAQ;wBAACC,WAAW,EAAElB,eAAe;kCAClE,cAAA,KAACE,cAAc;4BAAE,GAAGD,kBAAkB,IAAIE,YAAY,CAAC;sCAAGE,EAAE;0BAAkB;sBAC1D;kBACH;cACD;UACR,CAChB;IACJ,CAAC,AAAC;IAEF,OAAOb,MAAM,eAAC,KAACqB,UAAU,KAAG,EAAEP,OAAO,CAAC,CAAC;AACzC,CAAC"}
+{"version":3,"sources":["../../src/test/render.tsx"],"sourcesContent":["// Copyright 2022 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 { render, RenderOptions } from '@testing-library/react';\nimport { unstable_HistoryRouter } from 'react-router-dom';\nimport { createMemoryHistory, MemoryHistory } from 'history';\nimport { QueryParamProvider } from 'use-query-params';\nimport { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { ChartsThemeProvider, testChartsTheme } from '@perses-dev/components';\nimport { mockPluginRegistry, PluginRegistry } from '@perses-dev/plugin-system';\nimport { MOCK_PLUGINS } from './plugin-registry';\n\n/**\n * Test helper to render a React component with some common app-level providers wrapped around it.\n */\nexport function renderWithContext(\n  ui: React.ReactElement,\n  options?: Omit<RenderOptions, 'queries'>,\n  history?: MemoryHistory\n) {\n  // Create a new QueryClient for each test to avoid caching issues\n  const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });\n\n  const BaseRender = () => {\n    const HistoryRouter = unstable_HistoryRouter;\n    history = history ?? createMemoryHistory();\n    return (\n      <HistoryRouter history={history}>\n        <QueryClientProvider client={queryClient}>\n          <QueryParamProvider adapter={ReactRouter6Adapter}>\n            <ChartsThemeProvider chartsTheme={testChartsTheme}>\n              <PluginRegistry {...mockPluginRegistry(...MOCK_PLUGINS)}>{ui}</PluginRegistry>\n            </ChartsThemeProvider>\n          </QueryParamProvider>\n        </QueryClientProvider>\n      </HistoryRouter>\n    );\n  };\n\n  return render(<BaseRender />, options);\n}\n"],"names":["render","unstable_HistoryRouter","createMemoryHistory","QueryParamProvider","ReactRouter6Adapter","QueryClient","QueryClientProvider","ChartsThemeProvider","testChartsTheme","mockPluginRegistry","PluginRegistry","MOCK_PLUGINS","renderWithContext","ui","options","history","queryClient","defaultOptions","queries","refetchOnWindowFocus","retry","BaseRender","HistoryRouter","client","adapter","chartsTheme"],"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,MAAM,QAAuB,wBAAwB,CAAC;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB,CAAC;AAC1D,SAASC,mBAAmB,QAAuB,SAAS,CAAC;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB,CAAC;AACtD,SAASC,mBAAmB,QAAQ,0CAA0C,CAAC;AAC/E,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB,CAAC;AACzE,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB,CAAC;AAC9E,SAASC,kBAAkB,EAAEC,cAAc,QAAQ,2BAA2B,CAAC;AAC/E,SAASC,YAAY,QAAQ,mBAAmB,CAAC;AAEjD;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,EAAsB,EACtBC,OAAwC,EACxCC,OAAuB,EACvB;IACA,iEAAiE;IACjE,MAAMC,WAAW,GAAG,IAAIX,WAAW,CAAC;QAAEY,cAAc,EAAE;YAAEC,OAAO,EAAE;gBAAEC,oBAAoB,EAAE,KAAK;gBAAEC,KAAK,EAAE,KAAK;aAAE;SAAE;KAAE,CAAC,AAAC;IAEpH,MAAMC,UAAU,GAAG,IAAM;QACvB,MAAMC,aAAa,GAAGrB,sBAAsB,AAAC;QAC7Cc,OAAO,GAAGA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,mBAAmB,EAAE,CAAC;QAC3C,qBACE,KAACoB,aAAa;YAACP,OAAO,EAAEA,OAAO;sBAC7B,cAAA,KAACT,mBAAmB;gBAACiB,MAAM,EAAEP,WAAW;0BACtC,cAAA,KAACb,kBAAkB;oBAACqB,OAAO,EAAEpB,mBAAmB;8BAC9C,cAAA,KAACG,mBAAmB;wBAACkB,WAAW,EAAEjB,eAAe;kCAC/C,cAAA,KAACE,cAAc;4BAAE,GAAGD,kBAAkB,IAAIE,YAAY,CAAC;sCAAGE,EAAE;0BAAkB;sBAC1D;kBACH;cACD;UACR,CAChB;IACJ,CAAC,AAAC;IAEF,OAAOb,MAAM,eAAC,KAACqB,UAAU,KAAG,EAAEP,OAAO,CAAC,CAAC;AACzC,CAAC"}

package/dist/utils/component-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-ids.d.ts","sourceRoot":"","sources":["../../src/utils/component-ids.ts"],"names":[],"mappings":"AAeA,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,UAAU,EAAE,MAAM,CAAC;CACxB;AAMD;;GAEG;AACH,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,UAMnC"}
+{"version":3,"file":"component-ids.d.ts","sourceRoot":"","sources":["../../src/utils/component-ids.ts"],"names":[],"mappings":"AAeA,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,UAAU,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,UAUnC"}

package/dist/utils/component-ids.js

@@ -11,12 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useRef } from 'react';
-if (globalThis.useIdValue === undefined) {
-    globalThis.useIdValue = 0;
-}
 /**
  * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.
  */ export function useId(prefix) {
+    if (globalThis.useIdValue === undefined) {
+        globalThis.useIdValue = 0;
+    }
     const id = useRef(undefined);
     if (id.current === undefined) {
         id.current = `${prefix}-${globalThis.useIdValue++}`;

package/dist/utils/component-ids.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/component-ids.ts"],"sourcesContent":["// Copyright 2022 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 { useRef } from 'react';\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var useIdValue: number;\n}\n\nif (globalThis.useIdValue === undefined) {\n  globalThis.useIdValue = 0;\n}\n\n/**\n * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.\n */\nexport function useId(prefix: string) {\n  const id = useRef<string | undefined>(undefined);\n  if (id.current === undefined) {\n    id.current = `${prefix}-${globalThis.useIdValue++}`;\n  }\n  return id.current;\n}\n"],"names":["useRef","globalThis","useIdValue","undefined","useId","prefix","id","current"],"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,SAASA,MAAM,QAAQ,OAAO,CAAC;AAO/B,IAAIC,UAAU,CAACC,UAAU,KAAKC,SAAS,EAAE;IACvCF,UAAU,CAACC,UAAU,GAAG,CAAC,CAAC;AAC5B,CAAC;AAED;;CAEC,GACD,OAAO,SAASE,KAAK,CAACC,MAAc,EAAE;IACpC,MAAMC,EAAE,GAAGN,MAAM,CAAqBG,SAAS,CAAC,AAAC;IACjD,IAAIG,EAAE,CAACC,OAAO,KAAKJ,SAAS,EAAE;QAC5BG,EAAE,CAACC,OAAO,GAAG,CAAC,EAAEF,MAAM,CAAC,CAAC,EAAEJ,UAAU,CAACC,UAAU,EAAE,CAAC,CAAC,CAAC;IACtD,CAAC;IACD,OAAOI,EAAE,CAACC,OAAO,CAAC;AACpB,CAAC"}
+{"version":3,"sources":["../../src/utils/component-ids.ts"],"sourcesContent":["// Copyright 2022 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 { useRef } from 'react';\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var useIdValue: number;\n}\n\n/**\n * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.\n */\nexport function useId(prefix: string) {\n  if (globalThis.useIdValue === undefined) {\n    globalThis.useIdValue = 0;\n  }\n\n  const id = useRef<string | undefined>(undefined);\n  if (id.current === undefined) {\n    id.current = `${prefix}-${globalThis.useIdValue++}`;\n  }\n  return id.current;\n}\n"],"names":["useRef","useId","prefix","globalThis","useIdValue","undefined","id","current"],"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,SAASA,MAAM,QAAQ,OAAO,CAAC;AAO/B;;CAEC,GACD,OAAO,SAASC,KAAK,CAACC,MAAc,EAAE;IACpC,IAAIC,UAAU,CAACC,UAAU,KAAKC,SAAS,EAAE;QACvCF,UAAU,CAACC,UAAU,GAAG,CAAC,CAAC;IAC5B,CAAC;IAED,MAAME,EAAE,GAAGN,MAAM,CAAqBK,SAAS,CAAC,AAAC;IACjD,IAAIC,EAAE,CAACC,OAAO,KAAKF,SAAS,EAAE;QAC5BC,EAAE,CAACC,OAAO,GAAG,CAAC,EAAEL,MAAM,CAAC,CAAC,EAAEC,UAAU,CAACC,UAAU,EAAE,CAAC,CAAC,CAAC;IACtD,CAAC;IACD,OAAOE,EAAE,CAACC,OAAO,CAAC;AACpB,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.d.ts

@@ -2,6 +2,7 @@
 import { DashboardResource } from '@perses-dev/core';
 export interface DashboardAppProps {
     dashboardResource: DashboardResource;
+    dashboardTitleComponent?: JSX.Element;
 }
 export declare const DashboardApp: (props: DashboardAppProps) => JSX.Element;
 //# sourceMappingURL=DashboardApp.d.ts.map

package/dist/views/ViewDashboard/DashboardApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAkEpD,CAAC"}
+{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAmEpD,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -17,7 +17,7 @@ import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog, UnsavedChangesConfirmationDialog, DashboardToolbar, DeletePanelDialog } from '../../components';
 import { useDashboard, useEditMode } from '../../context';
 export const DashboardApp = (props)=>{
-    const { dashboardResource  } = props;
+    const { dashboardResource , dashboardTitleComponent  } = props;
     const { setEditMode  } = useEditMode();
     const { dashboard , setDashboard  } = useDashboard();
     const [originalDashboard, setOriginalDashboard] = useState(undefined);
@@ -57,6 +57,7 @@ export const DashboardApp = (props)=>{
         children: [
             /*#__PURE__*/ _jsx(DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
+                dashboardTitleComponent: dashboardTitleComponent,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  UnsavedChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n} from '../../components';\nimport { useDashboard, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource } = props;\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n  const [isUnsavedDashboardDialogOpen, setUnsavedDashboardDialogIsOpen] = useState(false);\n\n  const saveDashboard = async () => {\n    setEditMode(false);\n    setUnsavedDashboardDialogIsOpen(false);\n  };\n\n  const cancelDashboard = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setUnsavedDashboardDialogIsOpen(false);\n    setEditMode(false);\n  };\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n  };\n\n  const onCancelButtonClick = () => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      setUnsavedDashboardDialogIsOpen(true);\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <UnsavedChangesConfirmationDialog\n          isOpen={isUnsavedDashboardDialogOpen}\n          onSave={saveDashboard}\n          onClose={cancelDashboard}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","UnsavedChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","useDashboard","useEditMode","DashboardApp","props","dashboardResource","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","isUnsavedDashboardDialogOpen","setUnsavedDashboardDialogIsOpen","saveDashboard","cancelDashboard","onEditButtonClick","onCancelButtonClick","JSON","stringify","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","FallbackComponent","isOpen","onSave","onClose"],"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,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AAEnE,SACEC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,sBAAsB,EACtBC,gCAAgC,EAChCC,gBAAgB,EAChBC,iBAAiB,QACZ,kBAAkB,CAAC;AAC1B,SAASC,YAAY,EAAEC,WAAW,QAAQ,eAAe,CAAC;AAM1D,OAAO,MAAMC,YAAY,GAAG,CAACC,KAAwB,GAAK;IACxD,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACpC,MAAM,EAAEE,WAAW,CAAA,EAAE,GAAGJ,WAAW,EAAE,AAAC;IACtC,MAAM,EAAEK,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGP,YAAY,EAAE,AAAC;IACnD,MAAM,CAACQ,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGpB,QAAQ,CAAgCqB,SAAS,CAAC,AAAC;IACrG,MAAM,CAACC,4BAA4B,EAAEC,+BAA+B,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAExF,MAAMwB,aAAa,GAAG,UAAY;QAChCR,WAAW,CAAC,KAAK,CAAC,CAAC;QACnBO,+BAA+B,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,AAAC;IAEF,MAAME,eAAe,GAAG,IAAM;QAC5B,gDAAgD;QAChD,IAAIN,iBAAiB,EAAE;YACrBD,YAAY,CAACC,iBAAiB,CAAC,CAAC;QAClC,CAAC;QACDI,+BAA+B,CAAC,KAAK,CAAC,CAAC;QACvCP,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,AAAC;IAEF,MAAMU,iBAAiB,GAAG,IAAM;QAC9BV,WAAW,CAAC,IAAI,CAAC,CAAC;QAClBI,oBAAoB,CAACH,SAAS,CAAC,CAAC;IAClC,CAAC,AAAC;IAEF,MAAMU,mBAAmB,GAAG,IAAM;QAChC,uCAAuC;QACvC,IAAIC,IAAI,CAACC,SAAS,CAACZ,SAAS,CAAC,KAAKW,IAAI,CAACC,SAAS,CAACV,iBAAiB,CAAC,EAAE;YACnEH,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,OAAO;YACLO,+BAA+B,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,AAAC;IAEF,qBACE,MAACtB,GAAG;QACF6B,EAAE,EAAE;YACFC,QAAQ,EAAE,CAAC;YACXC,SAAS,EAAE,QAAQ;YACnBC,SAAS,EAAE,MAAM;YACjBC,OAAO,EAAE,MAAM;YACfC,aAAa,EAAE,QAAQ;SACxB;;0BAED,KAAC1B,gBAAgB;gBACf2B,aAAa,EAAErB,iBAAiB,CAACsB,QAAQ,CAACC,IAAI;gBAC9CZ,iBAAiB,EAAEA,iBAAiB;gBACpCC,mBAAmB,EAAEA,mBAAmB;cACxC;0BACF,MAAC1B,GAAG;gBAAC6B,EAAE,EAAE;oBAAES,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;iBAAE;;kCAC/C,KAACtC,aAAa;wBAACuC,iBAAiB,EAAExC,UAAU;kCAC1C,cAAA,KAACG,SAAS,KAAG;sBACC;kCAChB,KAACD,WAAW,KAAG;kCACf,KAACE,gBAAgB,KAAG;kCACpB,KAACC,sBAAsB,KAAG;kCAC1B,KAACG,iBAAiB,KAAG;kCACrB,KAACF,gCAAgC;wBAC/BmC,MAAM,EAAErB,4BAA4B;wBACpCsB,MAAM,EAAEpB,aAAa;wBACrBqB,OAAO,EAAEpB,eAAe;sBACxB;;cACE;;MACF,CACN;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  UnsavedChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n} from '../../components';\nimport { useDashboard, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n  dashboardTitleComponent?: JSX.Element;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource, dashboardTitleComponent } = props;\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n  const [isUnsavedDashboardDialogOpen, setUnsavedDashboardDialogIsOpen] = useState(false);\n\n  const saveDashboard = async () => {\n    setEditMode(false);\n    setUnsavedDashboardDialogIsOpen(false);\n  };\n\n  const cancelDashboard = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setUnsavedDashboardDialogIsOpen(false);\n    setEditMode(false);\n  };\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n  };\n\n  const onCancelButtonClick = () => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      setUnsavedDashboardDialogIsOpen(true);\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        dashboardTitleComponent={dashboardTitleComponent}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <UnsavedChangesConfirmationDialog\n          isOpen={isUnsavedDashboardDialogOpen}\n          onSave={saveDashboard}\n          onClose={cancelDashboard}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","UnsavedChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","useDashboard","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","isUnsavedDashboardDialogOpen","setUnsavedDashboardDialogIsOpen","saveDashboard","cancelDashboard","onEditButtonClick","onCancelButtonClick","JSON","stringify","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","FallbackComponent","isOpen","onSave","onClose"],"mappings":"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"}

package/dist/views/ViewDashboard/ViewDashboard.d.ts

@@ -5,6 +5,7 @@ import { DatasourceStoreProviderProps } from '../../context';
 export interface ViewDashboardProps extends Omit<BoxProps, 'children'> {
     dashboardResource: DashboardResource;
     datasourceApi: DatasourceStoreProviderProps['datasourceApi'];
+    dashboardTitleComponent?: JSX.Element;
 }
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.

package/dist/views/ViewDashboard/ViewDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAIL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAkCtD"}
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAIL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAkCtD"}

package/dist/views/ViewDashboard/ViewDashboard.js

@@ -19,7 +19,7 @@ import { DashboardApp } from './DashboardApp';
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */ export function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
@@ -49,7 +49,8 @@ import { DashboardApp } from './DashboardApp';
                         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(DashboardApp, {
-                                dashboardResource: dashboardResource
+                                dashboardResource: dashboardResource,
+                                dashboardTitleComponent: dashboardTitleComponent
                             })
                         })
                     })

package/dist/views/ViewDashboard/ViewDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"sourcesContent":["// Copyright 2022 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 { DashboardResource } from '@perses-dev/core';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, sx, ...others } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? '1h';\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  const { timeRange, setTimeRange } = useSetTimeRangeParams(initialTimeRange, true);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardResource }}>\n        <TimeRangeProvider timeRange={timeRange} setTimeRange={setTimeRange}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp dashboardResource={dashboardResource} />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","useInitialTimeRange","useSetTimeRangeParams","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","sx","others","spec","dashboardDuration","duration","initialTimeRange","timeRange","setTimeRange","initialState","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"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;AAE9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,mBAAmB,EAAEC,qBAAqB,QAAQ,aAAa,CAAC;AACzE,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGJ,KAAK,AAAC;IAClE,MAAM,EAAEK,IAAI,CAAA,EAAE,GAAGJ,iBAAiB,AAAC;QACTI,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMG,gBAAgB,GAAGZ,mBAAmB,CAACU,iBAAiB,CAAC,AAAC;IAChE,MAAM,EAAEG,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,qBAAqB,CAACW,gBAAgB,EAAE,IAAI,CAAC,AAAC;IAElF,qBACE,KAACb,uBAAuB;QAACM,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACR,iBAAiB;YAACiB,YAAY,EAAE;gBAAEV,iBAAiB;aAAE;sBACpD,cAAA,KAACT,iBAAiB;gBAACiB,SAAS,EAAEA,SAAS;gBAAEC,YAAY,EAAEA,YAAY;0BACjE,cAAA,KAACjB,wBAAwB;oBAACmB,0BAA0B,EAAEP,IAAI,CAACQ,SAAS;8BAClE,cAAA,KAACzB,GAAG;wBACFe,EAAE,EAAEZ,SAAS,CACX;4BACEuB,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDf,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAACf,aAAa;4BAAC8B,iBAAiB,EAAE7B,UAAU;sCAC1C,cAAA,KAACQ,YAAY;gCAACG,iBAAiB,EAAEA,iBAAiB;8BAAI;0BACxC;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"sourcesContent":["// Copyright 2022 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 { DashboardResource } from '@perses-dev/core';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n  dashboardTitleComponent?: JSX.Element;\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, dashboardTitleComponent, sx, ...others } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? '1h';\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  const { timeRange, setTimeRange } = useSetTimeRangeParams(initialTimeRange, true);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardResource }}>\n        <TimeRangeProvider timeRange={timeRange} setTimeRange={setTimeRange}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp dashboardResource={dashboardResource} dashboardTitleComponent={dashboardTitleComponent} />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","useInitialTimeRange","useSetTimeRangeParams","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","dashboardTitleComponent","sx","others","spec","dashboardDuration","duration","initialTimeRange","timeRange","setTimeRange","initialState","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"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;AAE9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,mBAAmB,EAAEC,qBAAqB,QAAQ,aAAa,CAAC;AACzE,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAQ9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,uBAAuB,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGL,KAAK,AAAC;IAC3F,MAAM,EAAEM,IAAI,CAAA,EAAE,GAAGL,iBAAiB,AAAC;QACTK,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMG,gBAAgB,GAAGb,mBAAmB,CAACW,iBAAiB,CAAC,AAAC;IAChE,MAAM,EAAEG,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGd,qBAAqB,CAACY,gBAAgB,EAAE,IAAI,CAAC,AAAC;IAElF,qBACE,KAACd,uBAAuB;QAACM,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACR,iBAAiB;YAACkB,YAAY,EAAE;gBAAEX,iBAAiB;aAAE;sBACpD,cAAA,KAACT,iBAAiB;gBAACkB,SAAS,EAAEA,SAAS;gBAAEC,YAAY,EAAEA,YAAY;0BACjE,cAAA,KAAClB,wBAAwB;oBAACoB,0BAA0B,EAAEP,IAAI,CAACQ,SAAS;8BAClE,cAAA,KAAC1B,GAAG;wBACFgB,EAAE,EAAEb,SAAS,CACX;4BACEwB,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDf,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAAChB,aAAa;4BAAC+B,iBAAiB,EAAE9B,UAAU;sCAC1C,cAAA,KAACQ,YAAY;gCAACG,iBAAiB,EAAEA,iBAAiB;gCAAEE,uBAAuB,EAAEA,uBAAuB;8BAAI;0BAC1F;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -14,6 +14,7 @@
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "scripts": {
     "clean": "rimraf dist/",
     "build": "concurrently \"npm:build:*\"",
@@ -27,9 +28,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.13.0",
-    "@perses-dev/core": "^0.13.0",
-    "@perses-dev/plugin-system": "^0.13.0",
+    "@perses-dev/components": "^0.14.0",
+    "@perses-dev/core": "^0.14.0",
+    "@perses-dev/plugin-system": "^0.14.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",