@perses-dev/dashboards 0.21.1 → 0.23.0

package/dist/cjs/utils/panelUtils.test.js

@@ -0,0 +1,195 @@
+// Copyright 2023 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
+});
+const _panelUtils = require("./panelUtils");
+describe('insertPanelInLayout', ()=>{
+    describe('inserts the panel to the right when space is available', ()=>{
+        test('with a single panel in that row', ()=>{
+            const newLayout = {
+                i: 'abc',
+                w: 10,
+                h: 8
+            };
+            const referenceLayout = {
+                i: 'one',
+                x: 0,
+                y: 0,
+                w: 6,
+                h: 6
+            };
+            const layouts = [
+                referenceLayout
+            ];
+            expect((0, _panelUtils.insertPanelInLayout)(newLayout, referenceLayout, layouts)).toEqual([
+                referenceLayout,
+                {
+                    x: 6,
+                    y: 0,
+                    ...newLayout
+                }
+            ]);
+        });
+        test('with multiple panels in that row with space between them', ()=>{
+            const newLayout = {
+                i: 'abc',
+                w: 10,
+                h: 8
+            };
+            const referenceLayout = {
+                i: 'one',
+                x: 0,
+                y: 0,
+                w: 3,
+                h: 4
+            };
+            const otherPanelInRow = {
+                i: 'two',
+                x: 20,
+                y: 0,
+                w: 4,
+                h: 4
+            };
+            const layouts = [
+                referenceLayout,
+                otherPanelInRow
+            ];
+            expect((0, _panelUtils.insertPanelInLayout)(newLayout, referenceLayout, layouts)).toEqual([
+                referenceLayout,
+                {
+                    x: 3,
+                    y: 0,
+                    ...newLayout
+                },
+                otherPanelInRow
+            ]);
+        });
+    });
+    describe('inserts the panel below when space is not available to the right', ()=>{
+        test('with a single panel in the initial layout', ()=>{
+            const newLayout = {
+                i: 'abc',
+                w: 10,
+                h: 8
+            };
+            const referenceLayout = {
+                i: 'one',
+                x: 1,
+                y: 0,
+                w: 18,
+                h: 4
+            };
+            const layouts = [
+                referenceLayout
+            ];
+            expect((0, _panelUtils.insertPanelInLayout)(newLayout, referenceLayout, layouts)).toEqual([
+                referenceLayout,
+                {
+                    x: 1,
+                    y: 4,
+                    ...newLayout
+                }
+            ]);
+        });
+        test('with a single panel in the same row and additional panels below', ()=>{
+            const newLayout = {
+                i: 'abc',
+                w: 10,
+                h: 8
+            };
+            const referenceLayout = {
+                i: 'one',
+                x: 0,
+                y: 0,
+                w: 18,
+                h: 4
+            };
+            const nextRowItem = {
+                i: 'two',
+                x: 0,
+                y: 4,
+                w: 6,
+                h: 6
+            };
+            const layouts = [
+                referenceLayout,
+                nextRowItem
+            ];
+            expect((0, _panelUtils.insertPanelInLayout)(newLayout, referenceLayout, layouts)).toEqual([
+                referenceLayout,
+                {
+                    x: 0,
+                    y: 4,
+                    ...newLayout
+                },
+                {
+                    ...nextRowItem,
+                    y: nextRowItem.y + newLayout.h
+                }
+            ]);
+        });
+    });
+});
+describe('getValidPanelKey', ()=>{
+    test('removes whitespace', ()=>{
+        expect((0, _panelUtils.getValidPanelKey)('my panel name', {})).toBe('mypanelname');
+    });
+    test('does not include a counter if the key is not in use', ()=>{
+        const mockPanelDefs = {
+            alreadyInUse: {
+                kind: 'Panel',
+                spec: {}
+            }
+        };
+        expect((0, _panelUtils.getValidPanelKey)('newPanelName', mockPanelDefs)).toBe('newPanelName');
+    });
+    test('includes a counter if the key is already in use', ()=>{
+        const mockPanelDefs = {
+            alreadyInUse: {
+                kind: 'Panel',
+                spec: {}
+            }
+        };
+        expect((0, _panelUtils.getValidPanelKey)('alreadyInUse', mockPanelDefs)).toBe('alreadyInUse-1');
+    });
+    test('includes an incremented counter if the key is already in use multiple times', ()=>{
+        const mockPanelDefs = {
+            popularKey: {
+                kind: 'Panel',
+                spec: {}
+            },
+            'popularKey-1': {
+                kind: 'Panel',
+                spec: {}
+            }
+        };
+        expect((0, _panelUtils.getValidPanelKey)('popularKey', mockPanelDefs)).toBe('popularKey-2');
+        expect((0, _panelUtils.getValidPanelKey)('popularKey-1', mockPanelDefs)).toBe('popularKey-2');
+    });
+    test('does not duplicate counters when they are out of order', ()=>{
+        const mockPanelDefs = {
+            outoforder: {
+                kind: 'Panel',
+                spec: {}
+            },
+            'outoforder-2': {
+                kind: 'Panel',
+                spec: {}
+            }
+        };
+        expect((0, _panelUtils.getValidPanelKey)('outoforder', mockPanelDefs)).toBe('outoforder-3');
+        expect((0, _panelUtils.getValidPanelKey)('outoforder-2', mockPanelDefs)).toBe('outoforder-3');
+    });
+});

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -25,7 +25,7 @@ const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource , dashboardTitleComponent , onSave , initialVariableIsSticky , isReadonly  } = props;
+    const { dashboardResource , dashboardTitleComponent , onSave , onDiscard , initialVariableIsSticky , isReadonly  } = props;
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -37,6 +37,9 @@ const DashboardApp = (props)=>{
         }
         setEditMode(false);
         closeDiscardChangesConfirmationDialog();
+        if (onDiscard) {
+            onDiscard(dashboard);
+        }
     };
     const onEditButtonClick = ()=>{
         setEditMode(true);

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -25,7 +25,7 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , onSave , initialVariableIsSticky , isReadonly , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
@@ -35,7 +35,8 @@ function ViewDashboard(props) {
         datasourceApi: datasourceApi,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
             initialState: {
-                dashboardResource
+                dashboardResource,
+                isEditMode: !!isEditing
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
                 initialTimeRange: initialTimeRange,
@@ -57,6 +58,7 @@ function ViewDashboard(props) {
                                 dashboardResource: dashboardResource,
                                 dashboardTitleComponent: dashboardTitleComponent,
                                 onSave: onSave,
+                                onDiscard: onDiscard,
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 isReadonly: isReadonly
                             })

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/views/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/components/AddGroupButton/AddGroupButton.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAU1B,CAAC"}

package/dist/components/AddGroupButton/AddGroupButton.js

@@ -0,0 +1,32 @@
+// Copyright 2023 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+import AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';
+import { InfoTooltip } from '@perses-dev/components';
+import { TOOLTIP_TEXT } from '../../constants';
+import { useDashboardActions } from '../../context';
+export const AddGroupButton = ()=>{
+    const { openAddPanelGroup  } = useDashboardActions();
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: TOOLTIP_TEXT.addGroup,
+        children: /*#__PURE__*/ _jsx(Button, {
+            startIcon: /*#__PURE__*/ _jsx(AddGroupIcon, {}),
+            onClick: openAddPanelGroup,
+            "aria-label": TOOLTIP_TEXT.addGroup,
+            children: "Panel Group"
+        })
+    });
+};
+
+//# sourceMappingURL=AddGroupButton.js.map

package/dist/components/AddGroupButton/AddGroupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = () => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button startIcon={<AddGroupIcon />} onClick={openAddPanelGroup} aria-label={TOOLTIP_TEXT.addGroup}>\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label"],"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,QAAQ,eAAe,CAAC;AACvC,OAAOC,YAAY,MAAM,gCAAgC,CAAC;AAC1D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAEpD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGF,mBAAmB,EAAE,AAAC;IAEpD,qBACE,KAACF,WAAW;QAACK,WAAW,EAAEJ,YAAY,CAACK,QAAQ;kBAC7C,cAAA,KAACR,MAAM;YAACS,SAAS,gBAAE,KAACR,YAAY,KAAG;YAAES,OAAO,EAAEJ,iBAAiB;YAAEK,YAAU,EAAER,YAAY,CAACK,QAAQ;sBAAE,aAEpG;UAAS;MACG,CACd;AACJ,CAAC,CAAC"}

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

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

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

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

package/dist/{utils/functions.js → components/AddGroupButton/index.js}

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -10,8 +10,6 @@
 // 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 const removeWhiteSpacesAndSpecialCharacters = (str)=>{
-    return str.replace(/\s+/g, '');
-};
+export * from './AddGroupButton';
 
-//# sourceMappingURL=functions.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AddGroupButton/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './AddGroupButton';\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,kBAAkB,CAAC"}

package/dist/components/AddPanelButton/AddPanelButton.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddPanelButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAU1B,CAAC"}

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -0,0 +1,32 @@
+// Copyright 2023 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
+import { InfoTooltip } from '@perses-dev/components';
+import { TOOLTIP_TEXT } from '../../constants';
+import { useDashboardActions } from '../../context';
+export const AddPanelButton = ()=>{
+    const { openAddPanel  } = useDashboardActions();
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: TOOLTIP_TEXT.addPanel,
+        children: /*#__PURE__*/ _jsx(Button, {
+            startIcon: /*#__PURE__*/ _jsx(AddPanelIcon, {}),
+            onClick: openAddPanel,
+            "aria-label": TOOLTIP_TEXT.addPanel,
+            children: "Panel"
+        })
+    });
+};
+
+//# sourceMappingURL=AddPanelButton.js.map

package/dist/components/AddPanelButton/AddPanelButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddPanelButton = () => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button startIcon={<AddPanelIcon />} onClick={openAddPanel} aria-label={TOOLTIP_TEXT.addPanel}>\n        Panel\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddPanelButton","openAddPanel","description","addPanel","startIcon","onClick","aria-label"],"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,QAAQ,eAAe,CAAC;AACvC,OAAOC,YAAY,MAAM,qCAAqC,CAAC;AAC/D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAEpD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,YAAY,CAAA,EAAE,GAAGF,mBAAmB,EAAE,AAAC;IAE/C,qBACE,KAACF,WAAW;QAACK,WAAW,EAAEJ,YAAY,CAACK,QAAQ;kBAC7C,cAAA,KAACR,MAAM;YAACS,SAAS,gBAAE,KAACR,YAAY,KAAG;YAAES,OAAO,EAAEJ,YAAY;YAAEK,YAAU,EAAER,YAAY,CAACK,QAAQ;sBAAE,OAE/F;UAAS;MACG,CACd;AACJ,CAAC,CAAC"}

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

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

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

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

package/dist/components/AddPanelButton/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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 './AddPanelButton';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AddPanelButton/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './AddPanelButton';\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,kBAAkB,CAAC"}

package/dist/components/Dashboard/Dashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1 +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"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\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.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1 +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"}
+{"version":3,"sources":["../../../src/components/Dashboard/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\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/DashboardToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAyH5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQrD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA4I5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -11,23 +11,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
 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 { useState } from 'react';
-import { useDashboard, useDashboardActions, useEditMode } from '../../context';
-import { TemplateVariableList } from '../Variables';
-import { TimeRangeControls } from '../TimeRangeControls';
+import { useDashboard, useEditMode } from '../../context';
+import { AddPanelButton } from '../AddPanelButton';
+import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
+import { TimeRangeControls } from '../TimeRangeControls';
+import { TemplateVariableList, EditVariablesButton } from '../Variables';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
+    const dashboard = useDashboard();
     const { isEditMode , setEditMode  } = useEditMode();
+    const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
+    const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
     const [isSavingDashboard, setSavingDashboard] = useState(false);
-    const dashboard = useDashboard();
-    const { openAddPanelGroup , openAddPanel  } = useDashboardActions();
-    const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         children: dashboardName
@@ -45,9 +45,11 @@ export const DashboardToolbar = (props)=>{
             setEditMode(false);
         }
     };
+    const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
             spacing: 1,
+            "data-testid": testId,
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
                     p: 2,
@@ -89,8 +91,8 @@ export const DashboardToolbar = (props)=>{
                     sx: {
                         display: 'flex',
                         width: '100%',
-                        alignItems: 'flex-start',
-                        padding: (theme)=>theme.spacing(0, 2, 2, 2)
+                        alignItems: 'start',
+                        padding: (theme)=>theme.spacing(1, 2, 2, 2)
                     },
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
@@ -102,6 +104,7 @@ export const DashboardToolbar = (props)=>{
                                 }
                             })
                         }),
+                        isBiggerThanMd ? // On bigger screens, make it one row
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
                             spacing: 1,
@@ -110,19 +113,42 @@ export const DashboardToolbar = (props)=>{
                                 whiteSpace: 'nowrap'
                             },
                             children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    startIcon: /*#__PURE__*/ _jsx(AddPanelGroupIcon, {}),
-                                    onClick: openAddPanelGroup,
-                                    children: "Add Panel Group"
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    startIcon: /*#__PURE__*/ _jsx(AddPanelIcon, {}),
-                                    onClick: openAddPanel,
-                                    children: "Add Panel"
-                                }),
+                                /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                /*#__PURE__*/ _jsx(AddPanelButton, {}),
+                                /*#__PURE__*/ _jsx(AddGroupButton, {}),
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
                                 /*#__PURE__*/ _jsx(DownloadButton, {})
                             ]
+                        }) : // On smaller screens, make it two rows
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    marginLeft: "auto",
+                                    sx: {
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                        /*#__PURE__*/ _jsx(DownloadButton, {})
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    marginLeft: "auto",
+                                    sx: {
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
+                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
+                                    ]
+                                })
+                            ]
                         })
                     ]
                 })
@@ -130,6 +156,7 @@ export const DashboardToolbar = (props)=>{
         }) : /*#__PURE__*/ _jsxs(Stack, {
             spacing: 1,
             padding: 2,
+            "data-testid": testId,
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
                     sx: {
@@ -145,8 +172,9 @@ export const DashboardToolbar = (props)=>{
                             children: [
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
                                 /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                isLaptopSize && /*#__PURE__*/ _jsx(Button, {
+                                isBiggerThanSm && /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
+                                    color: "secondary",
                                     startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
                                     onClick: onEditButtonClick,
                                     sx: {