@perses-dev/dashboards 0.8.1 → 0.10.0

package/dist/cjs/components/Dashboard.js

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dashboard = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -14,14 +10,29 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const GridLayout_1 = require("./GridLayout");
-/**
- * Renders a Dashboard for the provided Dashboard spec.
- */
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Dashboard", {
+    enumerable: true,
+    get: ()=>Dashboard
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _context = require("../context");
+const _gridLayout = require("./GridLayout");
 function Dashboard(props) {
-    const { spec, ...others } = props;
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ...others, children: (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: spec.layouts.map((layout, idx) => ((0, jsx_runtime_1.jsx)(GridLayout_1.GridLayout, { groupIndex: idx, definition: layout, renderGridItemContent: (definition, groupIndex) => ((0, jsx_runtime_1.jsx)(GridLayout_1.GridItemContent, { content: definition.content, spec: spec, groupIndex: groupIndex })) }, `${JSON.stringify(spec.layouts)} ${idx}`))) }) }));
+    const { layouts  } = (0, _context.useLayouts)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+            FallbackComponent: _components.ErrorAlert,
+            children: layouts.map((layout, groupIndex)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridLayout.GridLayout, {
+                    groupIndex: groupIndex,
+                    groupDefinition: layout
+                }, layout.id))
+        })
+    });
 }
-exports.Dashboard = Dashboard;

package/dist/cjs/components/DashboardToolbar.js

@@ -1,10 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardToolbar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -17,21 +10,156 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const material_1 = require("@mui/material");
-const PencilOutline_1 = __importDefault(require("mdi-material-ui/PencilOutline"));
-const Plus_1 = __importDefault(require("mdi-material-ui/Plus"));
-const context_1 = require("../context");
-const components_1 = require("../components");
-const DashboardToolbar = (props) => {
-    const { dashboardName } = props;
-    const { isEditMode, setEditMode } = (0, context_1.useEditMode)();
-    const { openPanelDrawer, openPanelGroupDialog } = (0, context_1.useDashboardApp)();
-    const onEditButtonClick = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DashboardToolbar", {
+    enumerable: true,
+    get: ()=>DashboardToolbar
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
+const _plusBoxOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PlusBoxOutline"));
+const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
+const _components = require("@perses-dev/components");
+const _context = require("../context");
+const _components1 = require("../components");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DashboardToolbar = (props)=>{
+    const { dashboardName  } = props;
+    const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
+    const { openPanelGroupDialog  } = (0, _context.usePanelGroupDialog)();
+    const { addPanel  } = (0, _context.usePanels)();
+    const onEditButtonClick = ()=>{
         setEditMode(true);
     };
-    const onCancelButtonClick = () => {
+    const onCancelButtonClick = ()=>{
         setEditMode(false);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Toolbar, { disableGutters: true, sx: { display: 'block', padding: (theme) => theme.spacing(2, 0) }, children: isEditMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h2", children: ["Edit ", dashboardName] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(components_1.TimeRangeControls, {}), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onCancelButtonClick, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", children: "Save" })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: 'row', spacing: 1, sx: { display: 'flex', justifyContent: 'flex-end', width: '100%', padding: (theme) => theme.spacing(2, 0) }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(Plus_1.default, {}), onClick: () => openPanelGroupDialog(), children: "Add Group" }), (0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(Plus_1.default, {}), onClick: () => openPanelDrawer({ groupIndex: 0 }), children: "Add Panel" })] })] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", children: dashboardName }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(components_1.TimeRangeControls, {}), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(PencilOutline_1.default, {}), onClick: onEditButtonClick, sx: { marginLeft: 'auto' }, children: "Edit" })] })] })) }));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    sx: {
+                        backgroundColor: (theme)=>theme.palette.primary.light + '20'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                        padding: 2,
+                        display: "flex",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
+                                variant: "h2",
+                                children: [
+                                    "Edit ",
+                                    dashboardName
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    marginLeft: 'auto'
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                        variant: "contained",
+                                        children: "Save"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                        variant: "outlined",
+                                        onClick: onCancelButtonClick,
+                                        children: "Cancel"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'flex-start',
+                        padding: (theme)=>theme.spacing(2)
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                            FallbackComponent: _components.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TemplateVariableList, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            direction: 'row',
+                            spacing: 1,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plusBoxOutline.default, {}),
+                                    onClick: ()=>openPanelGroupDialog(),
+                                    children: "Add Panel Group"
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {}),
+                                    onClick: ()=>addPanel(0),
+                                    children: "Add Panel"
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TimeRangeControls, {})
+                            ]
+                        })
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            padding: 2,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h2",
+                            children: dashboardName
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 2,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TimeRangeControls, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    variant: "outlined",
+                                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
+                                    onClick: onEditButtonClick,
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    children: "Edit"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    paddingY: 2,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.TemplateVariableList, {})
+                    })
+                })
+            ]
+        })
+    });
 };
-exports.DashboardToolbar = DashboardToolbar;

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

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridItemContent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -14,20 +10,30 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const components_1 = require("@perses-dev/components");
-const core_1 = require("@perses-dev/core");
-const Panel_1 = require("../Panel/Panel");
-/**
- * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
- */
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "GridItemContent", {
+    enumerable: true,
+    get: ()=>GridItemContent
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _core = require("@perses-dev/core");
+const _context = require("../../context");
+const _panel = require("../Panel/Panel");
 function GridItemContent(props) {
-    const { content, spec, groupIndex } = props;
-    try {
-        const { panelDefinition, panelsKey } = (0, core_1.resolvePanelRef)(spec, content);
-        return (0, jsx_runtime_1.jsx)(Panel_1.Panel, { definition: panelDefinition, groupIndex: groupIndex, panelKey: panelsKey });
-    }
-    catch (err) {
-        return (0, jsx_runtime_1.jsx)(components_1.ErrorAlert, { error: err });
+    const { content , groupIndex , itemIndex  } = props;
+    // Find the panel referenced in content in the store
+    const { panels  } = (0, _context.usePanels)();
+    const panelKey = (0, _core.getPanelKeyFromRef)(content);
+    const panelDefinition = panels[panelKey];
+    if (panelDefinition === undefined) {
+        throw new Error(`Panel with key '${panelKey}' was not found`);
     }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+        definition: panelDefinition,
+        groupIndex: groupIndex,
+        itemIndex: itemIndex
+    });
 }
-exports.GridItemContent = GridItemContent;

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

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridLayout = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -14,28 +10,97 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("react");
-const react_grid_layout_1 = require("react-grid-layout");
-const material_1 = require("@mui/material");
-const styles_1 = require("../../css/styles");
-const context_1 = require("../../context");
-const GridTitle_1 = require("./GridTitle");
-const ResponsiveGridLayout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.Responsive);
-/**
- * Layout component that arranges children in a Grid based on the definition.
- */
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "GridLayout", {
+    enumerable: true,
+    get: ()=>GridLayout
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _reactGridLayout = require("react-grid-layout");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _styles = require("../../css/styles");
+const _context = require("../../context");
+const _gridTitle = require("./GridTitle");
+const _gridItemContent = require("./GridItemContent");
+const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
 function GridLayout(props) {
-    var _a, _b, _c;
-    const { groupIndex, definition: { spec }, renderGridItemContent, ...others } = props;
-    const [isOpen, setIsOpen] = (0, react_1.useState)((_c = (_b = (_a = spec.display) === null || _a === void 0 ? void 0 : _a.collapse) === null || _b === void 0 ? void 0 : _b.open) !== null && _c !== void 0 ? _c : true);
-    const { isEditMode } = (0, context_1.useEditMode)();
-    const gridItems = [];
-    spec.items.forEach((item, idx) => {
-        const { x, y, width: w, height: h } = item;
-        gridItems.push((0, jsx_runtime_1.jsx)("div", { "data-grid": { x, y, w, h }, children: renderGridItemContent(item, groupIndex) }, idx));
+    const { groupIndex , groupDefinition , ...others } = props;
+    var ref;
+    const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
+    const { isEditMode  } = (0, _context.useEditMode)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.GlobalStyles, {
+                styles: _styles.styles
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                ...others,
+                component: "section",
+                sx: {
+                    '& + &': {
+                        marginTop: (theme)=>theme.spacing(1)
+                    }
+                },
+                children: [
+                    groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
+                        groupIndex: groupIndex,
+                        title: groupDefinition.title,
+                        collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                            isOpen,
+                            onToggleOpen: ()=>setIsOpen((current)=>!current)
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
+                        in: isOpen,
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
+                            className: "layout",
+                            breakpoints: {
+                                lg: 1200,
+                                md: 996,
+                                sm: 768,
+                                xs: 480,
+                                xxs: 0
+                            },
+                            cols: {
+                                lg: 24,
+                                md: 24,
+                                sm: 24,
+                                xs: 24,
+                                xxs: 2
+                            },
+                            rowHeight: 30,
+                            draggableHandle: '.drag-handle',
+                            resizeHandles: [
+                                'se'
+                            ],
+                            isDraggable: isEditMode,
+                            isResizable: isEditMode,
+                            children: groupDefinition.items.map(({ x , y , width , height , content  }, itemIndex)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                                    "data-grid": {
+                                        x,
+                                        y,
+                                        w: width,
+                                        h: height
+                                    },
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                                        FallbackComponent: _components.ErrorAlert,
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
+                                            groupIndex: groupIndex,
+                                            itemIndex: itemIndex,
+                                            content: content
+                                        })
+                                    })
+                                }, itemIndex))
+                        })
+                    })
+                ]
+            })
+        ]
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.GlobalStyles, { styles: styles_1.styles }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [spec.display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { groupIndex: groupIndex, title: spec.display.title, collapse: spec.display.collapse === undefined
-                            ? undefined
-                            : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) } })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(ResponsiveGridLayout, { className: "layout", breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, cols: { lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }, rowHeight: 30, draggableHandle: '.drag-handle', resizeHandles: ['se'], isDraggable: isEditMode, isResizable: isEditMode, children: gridItems }) })] })] }));
 }
-exports.GridLayout = GridLayout;

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

@@ -1,11 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridTitle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -17,31 +10,98 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const material_1 = require("@mui/material");
-const ChevronUp_1 = __importDefault(require("mdi-material-ui/ChevronUp"));
-const ChevronDown_1 = __importDefault(require("mdi-material-ui/ChevronDown"));
-const Plus_1 = __importDefault(require("mdi-material-ui/Plus"));
-const PencilOutline_1 = __importDefault(require("mdi-material-ui/PencilOutline"));
-const react_1 = require("react");
-const context_1 = require("../../context");
-/**
- * Renders the title for a Grid section, optionally also supporting expanding
- * and collapsing
- */
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "GridTitle", {
+    enumerable: true,
+    get: ()=>GridTitle
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _chevronUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronUp"));
+const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
+const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
+const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
+const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
+const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
+const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function GridTitle(props) {
-    const { groupIndex, title, collapse } = props;
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const { openPanelDrawer, openPanelGroupDialog } = (0, context_1.useDashboardApp)();
-    const { isEditMode } = (0, context_1.useEditMode)();
-    const text = ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", sx: { marginLeft: collapse !== undefined ? 1 : undefined }, children: title }));
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    const { groupIndex , title , collapse  } = props;
+    const [isHovered, setIsHovered] = (0, _react.useState)(false);
+    const { openPanelGroupDialog , openDeletePanelGroupDialog  } = (0, _context.usePanelGroupDialog)();
+    const { addPanel  } = (0, _context.usePanels)();
+    const { isEditMode  } = (0, _context.useEditMode)();
+    const { layouts , swapPanelGroups  } = (0, _context.useLayouts)();
+    const text = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h2",
+        sx: {
+            marginLeft: collapse !== undefined ? 1 : undefined
+        },
+        children: title
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
-            padding: (theme) => theme.spacing(1),
-            backgroundColor: (theme) => theme.palette.background.default,
-        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: collapse ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: collapse.onToggleOpen, children: collapse.isOpen ? (0, jsx_runtime_1.jsx)(ChevronUp_1.default, {}) : (0, jsx_runtime_1.jsx)(ChevronDown_1.default, {}) }), text, isEditMode && isHovered && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => openPanelDrawer({ groupIndex }), children: (0, jsx_runtime_1.jsx)(Plus_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => openPanelGroupDialog(groupIndex), children: (0, jsx_runtime_1.jsx)(PencilOutline_1.default, {}) })] }))] })) : (
-        // If we don't need expand/collapse, just render the title text
-        text) }));
+            padding: (theme)=>theme.spacing(1),
+            backgroundColor: (theme)=>theme.palette.background.default
+        },
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                    onClick: collapse.onToggleOpen,
+                    children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronUp.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {})
+                }),
+                text,
+                isEditMode && isHovered && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    sx: {
+                        marginLeft: 'auto'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": "add panel to group",
+                            onClick: ()=>addPanel(groupIndex),
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": "edit group",
+                            onClick: ()=>openPanelGroupDialog(groupIndex),
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": "delete group",
+                            onClick: ()=>openDeletePanelGroupDialog(groupIndex),
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": "move group down",
+                            disabled: groupIndex === layouts.length - 1,
+                            onClick: ()=>swapPanelGroups(groupIndex, groupIndex + 1),
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": "move group up",
+                            disabled: groupIndex === 0,
+                            onClick: ()=>swapPanelGroups(groupIndex, groupIndex - 1),
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                        })
+                    ]
+                })
+            ]
+        }) : // If we don't need expand/collapse, just render the title text
+        text
+    });
 }
-exports.GridTitle = GridTitle;

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

@@ -1,5 +1,4 @@
-"use strict";
-// Copyright 2021 The Perses Authors
+// 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
@@ -11,20 +10,20 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./GridLayout"), exports);
-__exportStar(require("./GridItemContent"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./GridLayout"), exports);
+_exportStar(require("./GridItemContent"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}