@perses-dev/dashboards 0.11.0 → 0.13.0

package/dist/cjs/test/plugin-registry.js

@@ -14,69 +14,29 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    mockPluginRegistryProps: ()=>mockPluginRegistryProps,
-    FAKE_PANEL_PLUGIN: ()=>FAKE_PANEL_PLUGIN
+Object.defineProperty(exports, "MOCK_PLUGINS", {
+    enumerable: true,
+    get: ()=>MOCK_PLUGINS
 });
 const _jsxRuntime = require("react/jsx-runtime");
-function mockPluginRegistryProps() {
-    const mockPluginResource = {
-        kind: 'PluginModule',
-        metadata: {
-            name: 'Fake Plugin Module for Tests',
-            created_at: '',
-            updated_at: '',
-            version: 0
-        },
-        spec: {
-            plugins: []
-        }
-    };
-    const mockPluginModule = {};
-    // Allow adding mock plugins in tests
-    const addMockPlugin = (pluginType, kind, plugin)=>{
-        mockPluginResource.spec.plugins.push({
-            pluginType,
-            kind,
-            display: {
-                name: `Fake ${pluginType} Plugin for ${kind}`
-            }
-        });
-        // "Export" on the module under the same name as the kind the plugin handles
-        mockPluginModule[kind] = plugin;
-    };
-    const pluginRegistryProps = {
-        getInstalledPlugins () {
-            return Promise.resolve([
-                mockPluginResource
-            ]);
-        },
-        importPluginModule () {
-            return Promise.resolve(mockPluginModule);
-        }
-    };
-    return {
-        pluginRegistryProps,
-        addMockPlugin
-    };
-}
-const FAKE_PANEL_PLUGIN = {
+const FakeTimeSeriesPlugin = {
     PanelComponent: ()=>{
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            role: "figure",
-            children: "FakePanel chart"
+            children: "TimeSeriesChart panel"
         });
     },
     OptionsEditorComponent: ()=>{
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            children: "Edit options here"
+            children: "TimeSeriesChart options"
         });
     },
     createInitialOptions: ()=>({})
 };
+const MOCK_TIME_SERIES_PANEL = {
+    pluginType: 'Panel',
+    kind: 'TimeSeriesChart',
+    plugin: FakeTimeSeriesPlugin
+};
+const MOCK_PLUGINS = [
+    MOCK_TIME_SERIES_PANEL
+];

package/dist/cjs/test/render.js

@@ -26,6 +26,8 @@ const _useQueryParams = require("use-query-params");
 const _reactRouter6 = require("use-query-params/adapters/react-router-6");
 const _reactQuery = require("@tanstack/react-query");
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginRegistry = require("./plugin-registry");
 function renderWithContext(ui, options, history) {
     // Create a new QueryClient for each test to avoid caching issues
     const queryClient = new _reactQuery.QueryClient({
@@ -48,7 +50,10 @@ function renderWithContext(ui, options, history) {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
                         themeName: "perses",
                         chartsTheme: _components.testChartsTheme,
-                        children: ui
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
+                            ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),
+                            children: ui
+                        })
                     })
                 })
             })

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

@@ -0,0 +1,31 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useId", {
+    enumerable: true,
+    get: ()=>useId
+});
+const _react = require("react");
+if (globalThis.useIdValue === undefined) {
+    globalThis.useIdValue = 0;
+}
+function useId(prefix) {
+    const id = (0, _react.useRef)(undefined);
+    if (id.current === undefined) {
+        id.current = `${prefix}-${globalThis.useIdValue++}`;
+    }
+    return id.current;
+}

package/dist/cjs/utils/time-range-params.js

@@ -111,15 +111,21 @@ function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
     // fallback when app does not want query string as source of truth
     const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
     const { start  } = query;
-    // set start param on page load if empty
-    if (paramsEnabled && !start) {
-        if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
-            setQuery({
-                start: initialTimeRange.pastDuration,
-                end: undefined
-            });
+    (0, _react.useEffect)(()=>{
+        if (paramsEnabled && !start) {
+            if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
+                setQuery({
+                    start: initialTimeRange.pastDuration,
+                    end: undefined
+                });
+            }
         }
-    }
+    }, [
+        initialTimeRange,
+        paramsEnabled,
+        start,
+        setQuery
+    ]);
     const setTimeRange = (0, _react.useCallback)((value)=>{
         if ((0, _core.isRelativeTimeRange)(value)) {
             setQuery({

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

@@ -19,21 +19,43 @@ Object.defineProperty(exports, "DashboardApp", {
     get: ()=>DashboardApp
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
-const _dashboardToolbar = require("../../components/DashboardToolbar");
-const _deletePanelDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/Panel/DeletePanelDialog"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+const _context = require("../../context");
 const DashboardApp = (props)=>{
     const { dashboardResource  } = props;
+    const { setEditMode  } = (0, _context.useEditMode)();
+    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
+    const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
+    const [isUnsavedDashboardDialogOpen, setUnsavedDashboardDialogIsOpen] = (0, _react.useState)(false);
+    const saveDashboard = async ()=>{
+        setEditMode(false);
+        setUnsavedDashboardDialogIsOpen(false);
+    };
+    const cancelDashboard = ()=>{
+        // Reset to the original spec and exit edit mode
+        if (originalDashboard) {
+            setDashboard(originalDashboard);
+        }
+        setUnsavedDashboardDialogIsOpen(false);
+        setEditMode(false);
+    };
+    const onEditButtonClick = ()=>{
+        setEditMode(true);
+        setOriginalDashboard(dashboard);
+    };
+    const onCancelButtonClick = ()=>{
+        // check if dashboard has been modified
+        if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {
+            setEditMode(false);
+        } else {
+            setUnsavedDashboardDialogIsOpen(true);
+        }
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
-            padding: (theme)=>theme.spacing(1, 0),
             flexGrow: 1,
             overflowX: 'hidden',
             overflowY: 'auto',
@@ -41,8 +63,10 @@ const DashboardApp = (props)=>{
             flexDirection: 'column'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardToolbar.DashboardToolbar, {
-                dashboardName: dashboardResource.metadata.name
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardToolbar, {
+                dashboardName: dashboardResource.metadata.name,
+                onEditButtonClick: onEditButtonClick,
+                onCancelButtonClick: onCancelButtonClick
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                 sx: {
@@ -56,7 +80,12 @@ const DashboardApp = (props)=>{
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelDialog.default, {})
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.UnsavedChangesConfirmationDialog, {
+                        isOpen: isUnsavedDashboardDialogOpen,
+                        onSave: saveDashboard,
+                        onClose: cancelDashboard
+                    })
                 ]
             })
         ]

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

@@ -36,7 +36,7 @@ function ViewDashboard(props) {
         datasourceApi: datasourceApi,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
             initialState: {
-                dashboardSpec: spec
+                dashboardResource
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
                 timeRange: timeRange,

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -34,7 +34,7 @@ describe('Panel Groups', ()=>{
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
                     initialState: {
-                        dashboardSpec: (0, _test.getTestDashboard)().spec,
+                        dashboardResource: (0, _test.getTestDashboard)(),
                         isEditMode: true
                     },
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK9C,oBAAY,cAAc,GAAG,QAAQ,CAAC;AAEtC;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAW9C"}

package/dist/components/{Dashboard.js → Dashboard/Dashboard.js}

@@ -13,8 +13,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { usePanelGroupIds } from '../context';
-import { GridLayout } from './GridLayout';
+import { usePanelGroupIds } from '../../context';
+import { GridLayout } from '../GridLayout';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */ export function Dashboard(props) {

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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 { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\n\nexport type DashboardProps = BoxProps;\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  return (\n    <Box {...props}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {panelGroupIds.map((panelGroupId) => (\n          <GridLayout key={panelGroupId} panelGroupId={panelGroupId} />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","Dashboard","props","panelGroupIds","FallbackComponent","map","panelGroupId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAI3C;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAMC,aAAa,GAAGJ,gBAAgB,EAAE,AAAC;IACzC,qBACE,KAACH,GAAG;QAAE,GAAGM,KAAK;kBACZ,cAAA,KAACL,aAAa;YAACO,iBAAiB,EAAEN,UAAU;sBACzCK,aAAa,CAACE,GAAG,CAAC,CAACC,YAAY,iBAC9B,KAACN,UAAU;oBAAoBM,YAAY,EAAEA,YAAY;mBAAxCA,YAAY,CAAgC,AAC9D,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './Dashboard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC"}

package/dist/components/Dashboard/index.js

@@ -0,0 +1,15 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './Dashboard';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Dashboard/index.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\nexport * from './Dashboard';\n"],"names":[],"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,cAAc,aAAa,CAAC"}

package/dist/components/{DashboardToolbar.d.ts → DashboardToolbar/DashboardToolbar.d.ts}

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export interface DashboardToolbarProps {
     dashboardName: string;
+    onEditButtonClick: () => void;
+    onCancelButtonClick: () => void;
 }
 export declare const DashboardToolbar: (props: DashboardToolbarProps) => JSX.Element;
 //# sourceMappingURL=DashboardToolbar.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/{DashboardToolbar.js → DashboardToolbar/DashboardToolbar.js}

@@ -16,22 +16,15 @@ import PencilIcon from 'mdi-material-ui/PencilOutline';
 import AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { useDashboardActions, useEditMode } from '../context';
-import { TemplateVariableList, TimeRangeControls } from '../components';
+import { useDashboardActions, useEditMode } from '../../context';
+import { TemplateVariableList } from '../Variables';
+import { TimeRangeControls } from '../TimeRangeControls';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName  } = props;
+    const { dashboardName , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
-    const { openAddPanelGroup , openAddPanel , reset , save  } = useDashboardActions();
+    const { openAddPanelGroup , openAddPanel  } = useDashboardActions();
     const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
-    const onEditButtonClick = ()=>{
-        setEditMode(true);
-    };
-    const onCancelButtonClick = ()=>{
-        reset();
-        setEditMode(false);
-    };
     const onSave = ()=>{
-        save();
         setEditMode(false);
     };
     return /*#__PURE__*/ _jsx(_Fragment, {

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,2 @@
+export * from './DashboardToolbar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}

package/dist/components/DashboardToolbar/index.js

@@ -0,0 +1,15 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './DashboardToolbar';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DashboardToolbar/index.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\nexport * from './DashboardToolbar';\n"],"names":[],"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,cAAc,oBAAoB,CAAC"}

package/dist/components/DeletePanelDialog/DeletePanelDialog.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeletePanelDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelDialog/DeletePanelDialog.tsx"],"names":[],"mappings":";AAkBA,eAAO,MAAM,iBAAiB,mBAoB7B,CAAC"}

package/dist/components/{Panel → DeletePanelDialog}/DeletePanelDialog.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
 import { useDeletePanelDialog } from '../../context';
-const DeletePanelDialog = ()=>{
+export const DeletePanelDialog = ()=>{
     const { deletePanelDialog , closeDeletePanelDialog  } = useDeletePanelDialog();
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: deletePanelDialog !== undefined,
@@ -39,13 +39,11 @@ const DeletePanelDialog = ()=>{
     });
 };
 const DeletePanelForm = ({ deletePanelDialog  })=>{
-    const { deletePanels , closeDeletePanelDialog  } = useDeletePanelDialog();
+    const { deletePanel , closeDeletePanelDialog  } = useDeletePanelDialog();
     const handleDelete = (e)=>{
         e.preventDefault();
         const { panelGroupItemId  } = deletePanelDialog;
-        deletePanels([
-            panelGroupItemId
-        ]);
+        deletePanel(panelGroupItemId);
         closeDeletePanelDialog();
     };
     return /*#__PURE__*/ _jsxs("form", {
@@ -79,6 +77,5 @@ const DeletePanelForm = ({ deletePanelDialog  })=>{
         ]
     });
 };
-export default DeletePanelDialog;
 
 //# sourceMappingURL=DeletePanelDialog.js.map

package/dist/components/DeletePanelDialog/DeletePanelDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DeletePanelDialog/DeletePanelDialog.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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelDialog, DeletePanelDialogState } from '../../context';\n\nexport const DeletePanelDialog = () => {\n  const { deletePanelDialog, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  return (\n    <Dialog open={deletePanelDialog !== undefined}>\n      <DialogTitle>Delete Panel</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      {deletePanelDialog && <DeletePanelForm deletePanelDialog={deletePanelDialog} />}\n    </Dialog>\n  );\n};\n\ninterface DeletePanelFormProps {\n  deletePanelDialog: DeletePanelDialogState;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps) => {\n  const { deletePanel, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    const { panelGroupItemId } = deletePanelDialog;\n    deletePanel(panelGroupItemId);\n    closeDeletePanelDialog();\n  };\n  return (\n    <form onSubmit={handleDelete}>\n      <DialogContent sx={{ width: '500px' }}>\n        Are you sure you want to delete {deletePanelDialog.panelName} from {deletePanelDialog.panelGroupName}? This\n        action cannot be undone.\n      </DialogContent>\n      <DialogActions>\n        <Button variant=\"contained\" type=\"submit\">\n          Delete\n        </Button>\n        <Button onClick={() => closeDeletePanelDialog()}>Cancel</Button>\n      </DialogActions>\n    </form>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelDialog","DeletePanelDialog","deletePanelDialog","closeDeletePanelDialog","open","undefined","aria-label","onClick","sx","theme","position","top","spacing","right","DeletePanelForm","deletePanel","handleDelete","e","preventDefault","panelGroupItemId","form","onSubmit","width","panelName","panelGroupName","variant","type"],"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;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,oBAAoB,QAAgC,eAAe,CAAC;AAE7E,OAAO,MAAMC,iBAAiB,GAAG,IAAM;IACrC,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,sBAAsB,CAAA,EAAE,GAAGH,oBAAoB,EAAE,AAAC;IAE7E,qBACE,MAACN,MAAM;QAACU,IAAI,EAAEF,iBAAiB,KAAKG,SAAS;;0BAC3C,KAACV,WAAW;0BAAC,cAAY;cAAc;0BACvC,KAACF,UAAU;gBACTa,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;gBACvCK,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,SAAS,KAAG;cACF;YACZG,iBAAiB,kBAAI,KAACY,eAAe;gBAACZ,iBAAiB,EAAEA,iBAAiB;cAAI;;MACxE,CACT;AACJ,CAAC,CAAC;AAMF,MAAMY,eAAe,GAAG,CAAC,EAAEZ,iBAAiB,CAAA,EAAwB,GAAK;IACvE,MAAM,EAAEa,WAAW,CAAA,EAAEZ,sBAAsB,CAAA,EAAE,GAAGH,oBAAoB,EAAE,AAAC;IAEvE,MAAMgB,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGjB,iBAAiB,AAAC;QAC/Ca,WAAW,CAACI,gBAAgB,CAAC,CAAC;QAC9BhB,sBAAsB,EAAE,CAAC;IAC3B,CAAC,AAAC;IACF,qBACE,MAACiB,MAAI;QAACC,QAAQ,EAAEL,YAAY;;0BAC1B,MAACpB,aAAa;gBAACY,EAAE,EAAE;oBAAEc,KAAK,EAAE,OAAO;iBAAE;;oBAAE,kCACL;oBAACpB,iBAAiB,CAACqB,SAAS;oBAAC,QAAM;oBAACrB,iBAAiB,CAACsB,cAAc;oBAAC,iCAEvG;;cAAgB;0BAChB,MAAC3B,aAAa;;kCACZ,KAACC,MAAM;wBAAC2B,OAAO,EAAC,WAAW;wBAACC,IAAI,EAAC,QAAQ;kCAAC,QAE1C;sBAAS;kCACT,KAAC5B,MAAM;wBAACS,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;kCAAE,QAAM;sBAAS;;cAClD;;MACX,CACP;AACJ,CAAC,AAAC"}

package/dist/components/DeletePanelDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DeletePanelDialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DeletePanelDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC"}

package/dist/components/DeletePanelDialog/index.js

@@ -0,0 +1,15 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './DeletePanelDialog';
+
+//# sourceMappingURL=index.js.map

package/dist/components/DeletePanelDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DeletePanelDialog/index.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\nexport * from './DeletePanelDialog';\n"],"names":[],"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,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":";AAkBA,eAAO,MAAM,sBAAsB,mBA0ClC,CAAC"}

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelGroupDialog } from '../../context';\n\nexport const DeletePanelGroupDialog = () => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    if (panelGroupId == undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      <form onSubmit={handleDelete}>\n        <DialogContent sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button onClick={() => closeDeletePanelGroupDialog()}>Cancel</Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelGroupDialog","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","width","panelGroupName","variant","type"],"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;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,yBAAyB,QAAQ,eAAe,CAAC;AAE1D,OAAO,MAAMC,sBAAsB,GAAG,IAAM;IAC1C,MAAM,EAAEC,sBAAsB,CAAA,EAAEC,2BAA2B,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGJ,yBAAyB,EAAE,AAAC;IAE9G,MAAMK,YAAY,GAAGH,sBAAsB,aAAtBA,sBAAsB,WAAc,GAApCA,KAAAA,CAAoC,GAApCA,sBAAsB,CAAEG,YAAY,AAAC;IAE1D,MAAMC,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,IAAIH,YAAY,IAAII,SAAS,EAAE;YAC7B,MAAM,IAAIC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QACDN,gBAAgB,CAACC,YAAY,CAAC,CAAC;QAC/BF,2BAA2B,EAAE,CAAC;IAChC,CAAC,AAAC;QAkBuCD,GAAsC;IAhB/E,qBACE,MAACR,MAAM;QAACiB,IAAI,EAAET,sBAAsB,KAAKO,SAAS;;0BAChD,KAACd,WAAW;0BAAC,oBAAkB;cAAc;0BAC7C,KAACF,UAAU;gBACTmB,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMV,2BAA2B,EAAE;gBAC5CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACnB,SAAS,KAAG;cACF;0BACb,MAACqB,MAAI;gBAACC,QAAQ,EAAEf,YAAY;;kCAC1B,MAACV,aAAa;wBAACkB,EAAE,EAAE;4BAAEQ,KAAK,EAAE,OAAO;yBAAE;;4BAAE,kCACL;4BAACpB,CAAAA,GAAsC,GAAtCA,sBAAsB,aAAtBA,sBAAsB,WAAgB,GAAtCA,KAAAA,CAAsC,GAAtCA,sBAAsB,CAAEqB,cAAc,cAAtCrB,GAAsC,cAAtCA,GAAsC,GAAI,aAAa;4BAAC,qDAE3F;;sBAAgB;kCAChB,MAACL,aAAa;;0CACZ,KAACC,MAAM;gCAAC0B,OAAO,EAAC,WAAW;gCAACC,IAAI,EAAC,QAAQ;0CAAC,QAE1C;8BAAS;0CACT,KAAC3B,MAAM;gCAACe,OAAO,EAAE,IAAMV,2BAA2B,EAAE;0CAAE,QAAM;8BAAS;;sBACvD;;cACX;;MACA,CACT;AACJ,CAAC,CAAC"}

package/dist/components/DeletePanelGroupDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DeletePanelGroupDialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DeletePanelGroupDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,0BAA0B,CAAC"}

package/dist/components/DeletePanelGroupDialog/index.js

@@ -0,0 +1,15 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './DeletePanelGroupDialog';
+
+//# sourceMappingURL=index.js.map

package/dist/components/DeletePanelGroupDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/index.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\nexport * from './DeletePanelGroupDialog';\n"],"names":[],"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,cAAc,0BAA0B,CAAC"}

package/dist/components/GridLayout/GridItemContent.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { LayoutItem } from '../../context';
+import { PanelGroupItemId } from '../../context';
 export interface GridItemContentProps {
-    panelGroupItemId: LayoutItem;
+    panelGroupItemId: PanelGroupItemId;
 }
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

package/dist/components/GridLayout/GridItemContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAY,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,UAAU,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAI1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAgB1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -11,16 +11,26 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { usePanel } from '../../context';
+import { useEditMode, usePanel, usePanelActions } from '../../context';
 import { Panel } from '../Panel/Panel';
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */ export function GridItemContent(props) {
     const { panelGroupItemId  } = props;
     const panelDefinition = usePanel(panelGroupItemId);
+    const { isEditMode  } = useEditMode();
+    const { openEditPanel , openDeletePanelDialog  } = usePanelActions(panelGroupItemId);
+    // Provide actions to the panel when in edit mode
+    let editHandlers = undefined;
+    if (isEditMode) {
+        editHandlers = {
+            onEditPanelClick: openEditPanel,
+            onDeletePanelClick: openDeletePanelDialog
+        };
+    }
     return /*#__PURE__*/ _jsx(Panel, {
         definition: panelDefinition,
-        panelGroupItemId: panelGroupItemId
+        editHandlers: editHandlers
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { LayoutItem, usePanel } from '../../context';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: LayoutItem;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  return <Panel definition={panelDefinition} panelGroupItemId={panelGroupItemId} />;\n}\n"],"names":["usePanel","Panel","GridItemContent","props","panelGroupItemId","panelDefinition","definition"],"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,SAAqBA,QAAQ,QAAQ,eAAe,CAAC;AACrD,SAASC,KAAK,QAAQ,gBAAgB,CAAC;AAMvC;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACnC,MAAME,eAAe,GAAGL,QAAQ,CAACI,gBAAgB,CAAC,AAAC;IACnD,qBAAO,KAACH,KAAK;QAACK,UAAU,EAAED,eAAe;QAAED,gBAAgB,EAAEA,gBAAgB;MAAI,CAAC;AACpF,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  return <Panel definition={panelDefinition} editHandlers={editHandlers} />;\n}\n"],"names":["useEditMode","usePanel","usePanelActions","Panel","GridItemContent","props","panelGroupItemId","panelDefinition","isEditMode","openEditPanel","openDeletePanelDialog","editHandlers","undefined","onEditPanelClick","onDeletePanelClick","definition"],"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,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAMnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACnC,MAAME,eAAe,GAAGN,QAAQ,CAACK,gBAAgB,CAAC,AAAC;IACnD,MAAM,EAAEE,UAAU,CAAA,EAAE,GAAGR,WAAW,EAAE,AAAC;IACrC,MAAM,EAAES,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAE,GAAGR,eAAe,CAACI,gBAAgB,CAAC,AAAC;IAEnF,iDAAiD;IACjD,IAAIK,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIJ,UAAU,EAAE;QACdG,YAAY,GAAG;YACbE,gBAAgB,EAAEJ,aAAa;YAC/BK,kBAAkB,EAAEJ,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,qBAAO,KAACP,KAAK;QAACY,UAAU,EAAER,eAAe;QAAEI,YAAY,EAAEA,YAAY;MAAI,CAAC;AAC5E,CAAC"}