@perses-dev/dashboards 0.7.1 → 0.8.0

package/dist/cjs/components/Dashboard.js

@@ -22,6 +22,6 @@ const GridLayout_1 = 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, { definition: layout, renderGridItemContent: (definition) => (0, jsx_runtime_1.jsx)(GridLayout_1.GridItemContent, { content: definition.content, spec: spec }) }, idx))) }) }));
+    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}`))) }) }));
 }
 exports.Dashboard = Dashboard;

package/dist/cjs/components/DashboardToolbar.js

@@ -23,30 +23,15 @@ const Plus_1 = __importDefault(require("mdi-material-ui/Plus"));
 const context_1 = require("../context");
 const components_1 = require("../components");
 const DashboardToolbar = (props) => {
-    const { dashboardName, onAddPanel } = props;
+    const { dashboardName } = props;
     const { isEditMode, setEditMode } = (0, context_1.useEditMode)();
+    const { openPanelDrawer, openPanelGroupDialog } = (0, context_1.useDashboardApp)();
     const onEditButtonClick = () => {
         setEditMode(true);
     };
     const onCancelButtonClick = () => {
         setEditMode(false);
     };
-    const { addLayout } = (0, context_1.useLayouts)();
-    const onAddGroup = () => {
-        const newLayout = {
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Group',
-                    collapse: {
-                        open: true,
-                    },
-                },
-                items: [],
-            },
-        };
-        addLayout(newLayout);
-    };
-    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: onAddGroup, children: "Add Group" }), (0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(Plus_1.default, {}), onClick: onAddPanel, 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 ((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" })] })] })) }));
 };
 exports.DashboardToolbar = DashboardToolbar;

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

@@ -21,10 +21,10 @@ const Panel_1 = require("../Panel/Panel");
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */
 function GridItemContent(props) {
-    const { content, spec } = props;
+    const { content, spec, groupIndex } = props;
     try {
-        const definition = (0, core_1.resolvePanelRef)(spec, content);
-        return (0, jsx_runtime_1.jsx)(Panel_1.Panel, { definition: definition });
+        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 });

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

@@ -1,7 +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.GridLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -20,7 +17,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_grid_layout_1 = require("react-grid-layout");
 const material_1 = require("@mui/material");
-const styles_1 = __importDefault(require("../../css/styles"));
+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);
@@ -28,16 +25,16 @@ const ResponsiveGridLayout = (0, react_grid_layout_1.WidthProvider)(react_grid_l
  * Layout component that arranges children in a Grid based on the definition.
  */
 function GridLayout(props) {
-    var _a, _b, _c;
-    const { 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);
+    var _a, _b;
+    const { groupIndex, definition: { spec }, renderGridItemContent, ...others } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(!!((_b = (_a = spec.display) === null || _a === void 0 ? void 0 : _a.collapse) === null || _b === void 0 ? void 0 : _b.open));
     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) }, idx));
+        gridItems.push((0, jsx_runtime_1.jsx)("div", { "data-grid": { x, y, w, h }, children: renderGridItemContent(item, groupIndex) }, idx));
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.GlobalStyles, { styles: styles_1.default }), (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, { title: spec.display.title, collapse: spec.display.collapse === undefined
+    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 }) })] })] }));
 }

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

@@ -20,22 +20,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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
  */
 function GridTitle(props) {
-    const { title, collapse } = props;
-    const text = ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", sx: { marginLeft: collapse !== undefined ? 1 : undefined }, children: title }));
-    // If we don't need expand/collapse, just render the title text
-    if (collapse === undefined) {
-        return text;
-    }
-    // Otherwise render something clickable
-    return ((0, jsx_runtime_1.jsxs)(material_1.ButtonBase, { component: "header", sx: {
+    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: {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
-        }, onClick: collapse.onToggleOpen, children: [collapse.isOpen ? (0, jsx_runtime_1.jsx)(ChevronUp_1.default, {}) : (0, jsx_runtime_1.jsx)(ChevronDown_1.default, {}), text] }));
+            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) }));
 }
 exports.GridTitle = GridTitle;

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

@@ -25,15 +25,16 @@ const components_1 = require("@perses-dev/components");
 const material_1 = require("@mui/material");
 const InformationOutline_1 = __importDefault(require("mdi-material-ui/InformationOutline"));
 const Pencil_1 = __importDefault(require("mdi-material-ui/Pencil"));
-const DotsVertical_1 = __importDefault(require("mdi-material-ui/DotsVertical"));
-const Drag_1 = __importDefault(require("mdi-material-ui/Drag"));
+const DragVertical_1 = __importDefault(require("mdi-material-ui/DragVertical"));
 const context_1 = require("../../context");
+const PanelContent_1 = require("./PanelContent");
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */
 function Panel(props) {
-    const { definition, ...others } = props;
+    const { definition, groupIndex, panelKey, ...others } = props;
     const [contentElement, setContentElement] = (0, react_1.useState)(null);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const { width, height } = (0, use_resize_observer_1.default)({ ref: contentElement });
     const contentDimensions = (0, react_1.useMemo)(() => {
         if (width === undefined || height === undefined)
@@ -48,13 +49,17 @@ function Panel(props) {
     // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
     const panelPadding = 1.5;
     const { isEditMode } = (0, context_1.useEditMode)();
+    const { openPanelDrawer } = (0, context_1.useDashboardApp)();
+    const handleEditButtonClick = () => {
+        openPanelDrawer({ groupIndex, panelKey });
+    };
     return ((0, jsx_runtime_1.jsxs)(material_1.Card, { ref: ref, sx: {
             ...others.sx,
             width: '100%',
             height: '100%',
             display: 'flex',
             flexFlow: 'column nowrap',
-        }, variant: "outlined", ...others, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+        }, variant: "outlined", ...others, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',
                         minHeight: '24px',
@@ -62,7 +67,7 @@ function Panel(props) {
                                 display: 'flex',
                                 alignItems: 'center',
                                 marginLeft: 'auto',
-                            }, children: [!isEditMode && definition.display.description && ((0, jsx_runtime_1.jsx)(components_1.InfoTooltip, { id: "info-tooltip", description: definition.display.description, placement: components_1.TooltipPlacement.Bottom, children: (0, jsx_runtime_1.jsx)(InformationOutline_1.default, { "aria-describedby": "info-tooltip", "aria-hidden": false, fontSize: "small", sx: { cursor: 'pointer' } }) })), isEditMode && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "drag handle", size: "small", children: (0, jsx_runtime_1.jsx)(Drag_1.default, { className: "drag-handle", sx: { cursor: 'grab' } }) }), (0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "edit panel", size: "small", children: (0, jsx_runtime_1.jsx)(Pencil_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "more", size: "small", children: (0, jsx_runtime_1.jsx)(DotsVertical_1.default, {}) })] }))] })] }), sx: {
+                            }, children: [!isEditMode && isHovered && definition.display.description && ((0, jsx_runtime_1.jsx)(components_1.InfoTooltip, { id: "info-tooltip", description: definition.display.description, placement: components_1.TooltipPlacement.Bottom, children: (0, jsx_runtime_1.jsx)(InformationOutline_1.default, { "aria-describedby": "info-tooltip", "aria-hidden": false, fontSize: "small", sx: { cursor: 'pointer' } }) })), isEditMode && isHovered && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "edit panel", size: "small", onClick: handleEditButtonClick, children: (0, jsx_runtime_1.jsx)(Pencil_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "drag handle", size: "small", children: (0, jsx_runtime_1.jsx)(DragVertical_1.default, { className: "drag-handle", sx: { cursor: 'grab' } }) })] }))] })] }), sx: {
                     display: 'block',
                     padding: (theme) => theme.spacing(1, panelPadding),
                     borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,
@@ -75,7 +80,7 @@ function Panel(props) {
                     ':last-child': {
                         padding: (theme) => theme.spacing(panelPadding),
                     },
-                }, ref: setContentElement, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: inView === true && (0, jsx_runtime_1.jsx)(plugin_system_1.PanelComponent, { definition: definition, contentDimensions: contentDimensions }) }) })] }));
+                }, ref: setContentElement, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: inView === true && (0, jsx_runtime_1.jsx)(PanelContent_1.PanelContent, { definition: definition, contentDimensions: contentDimensions }) }) })] }));
 }
 exports.Panel = Panel;
 const IconButton = (0, material_1.styled)(material_1.IconButton)(({ theme }) => ({

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

@@ -4,22 +4,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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.
+// 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.
 const plugin_system_1 = require("@perses-dev/plugin-system");
 require("intersection-observer");
 const react_1 = require("@testing-library/react");
 const test_1 = require("../../test");
 const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
-const context_1 = require("../../context");
 const Panel_1 = require("./Panel");
-const FAKE_PANEL_PLUGIN = {
-    pluginType: 'Panel',
-    kind: 'FakePanel',
-    plugin: {
-        PanelComponent: () => {
-            return (0, jsx_runtime_1.jsx)("div", { role: "figure", children: "FakePanel chart" });
-        },
-    },
-};
 describe('Panel', () => {
     let props;
     let initialState;
@@ -33,6 +35,8 @@ describe('Panel', () => {
                 kind: 'FakePanel',
                 options: {},
             },
+            groupIndex: 0,
+            panelKey: 'panelRef',
         };
         initialState = {
             isEditMode: false,
@@ -42,11 +46,11 @@ describe('Panel', () => {
     // Helper to render the panel with some context set
     const renderPanel = (initialState) => {
         const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
-        addMockPlugin(FAKE_PANEL_PLUGIN);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: initialState, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(Panel_1.Panel, { ...props }) }) }));
+        addMockPlugin('Panel', 'FakePanel', test_1.FAKE_PANEL_PLUGIN);
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(Panel_1.Panel, { ...props }) }), initialState);
     };
     it('should render name and info icon', async () => {
-        renderPanel(initialState);
+        renderPanel();
         await react_1.screen.findByText('Fake Panel');
         react_1.screen.queryByLabelText('info-tooltip');
     });

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+/**
+ * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
+ * definition's kind. Used so that a PluginLoadingBoundary can be wrapped around this for fallback UI while
+ * the plugin is loading.
+ */
+function PanelContent(props) {
+    const { PanelComponent } = (0, plugin_system_1.usePanelPlugin)(props.definition.kind);
+    return (0, jsx_runtime_1.jsx)(PanelComponent, { ...props });
+}
+exports.PanelContent = PanelContent;

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

@@ -0,0 +1,29 @@
+"use strict";
+// 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.
+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("./Panel"), exports);

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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.
+// 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.
+const material_1 = require("@mui/material");
+const components_1 = require("@perses-dev/components");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const react_1 = require("react");
+const context_1 = require("../../context");
+const functions_1 = require("../../utils/functions");
+const PanelOptionsEditor_1 = require("./PanelOptionsEditor");
+const PanelDrawer = () => {
+    var _a, _b, _c, _d;
+    const { layouts } = (0, context_1.useLayouts)();
+    const { panels, updatePanel } = (0, context_1.usePanels)();
+    const { panelDrawer, closePanelDrawer } = (0, context_1.useDashboardApp)();
+    let defaultPanelName = '';
+    let defaultDescription = '';
+    if (panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) {
+        // editing an existing panel
+        defaultPanelName = (_b = (_a = panels[panelDrawer.panelKey]) === null || _a === void 0 ? void 0 : _a.display.name) !== null && _b !== void 0 ? _b : '';
+        defaultDescription = (_d = (_c = panels[panelDrawer.panelKey]) === null || _c === void 0 ? void 0 : _c.display.description) !== null && _d !== void 0 ? _d : '';
+    }
+    const [group, setGroup] = (0, react_1.useState)(panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex);
+    const [panelName, setPanelName] = (0, react_1.useState)(defaultPanelName);
+    const [panelDescription, setPanelDescription] = (0, react_1.useState)(defaultDescription);
+    const [kind, setKind] = (0, react_1.useState)('');
+    const [options, setOptions] = (0, react_1.useState)({});
+    // TO DO: we might want to make the form a sub component we don't need this useEffect
+    // currently, we need to reset the states whenever panelDrawer is reopened
+    // since this component does not get remounted when it open/closes (otherwise we lose the animation of sliding in/out)
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        setGroup(panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex);
+        if (panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) {
+            // display panel name and description in text fields when editing an existing panel
+            setPanelName((_b = (_a = panels[panelDrawer.panelKey]) === null || _a === void 0 ? void 0 : _a.display.name) !== null && _b !== void 0 ? _b : '');
+            setPanelDescription((_d = (_c = panels[panelDrawer.panelKey]) === null || _c === void 0 ? void 0 : _c.display.description) !== null && _d !== void 0 ? _d : '');
+        }
+        else {
+            setPanelName('');
+            setPanelDescription('');
+        }
+    }, [panelDrawer, panels]);
+    const handleGroupChange = (e) => {
+        const { value } = e.target;
+        // Handle string (which would be empty string but shouldn't happen since we don't allow a "None" option) by
+        // just ignoring it
+        if (typeof value === 'string')
+            return;
+        setGroup(value);
+    };
+    const handlePanelNameChange = (e) => {
+        setPanelName(e.target.value);
+    };
+    const handlePanelDescriptionChange = (e) => {
+        setPanelDescription(e.target.value);
+    };
+    const handleKindChange = (e) => {
+        setKind(e.target.value);
+    };
+    const handleOptionsChange = (next) => {
+        setOptions(next);
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if ((panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex) !== undefined && !(panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey)) {
+            addNewPanel();
+        }
+        else if (panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) {
+            editPanel();
+        }
+        closePanelDrawer();
+    };
+    const addNewPanel = () => {
+        if ((panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex) === undefined) {
+            return;
+        }
+        const panelKey = (0, functions_1.removeWhiteSpacesAndSpecialCharacters)(panelName);
+        updatePanel(panelKey, {
+            kind,
+            options,
+            display: { name: panelName, description: panelDescription },
+        }, panelDrawer.groupIndex);
+    };
+    const editPanel = () => {
+        if ((panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) === undefined) {
+            return;
+        }
+        updatePanel(panelDrawer.panelKey, {
+            ...panels[panelDrawer.panelKey],
+            kind,
+            options,
+            display: { name: panelName !== null && panelName !== void 0 ? panelName : '', description: panelDescription },
+        });
+        // TO DO: need to move panel if panel group changes
+    };
+    return ((0, jsx_runtime_1.jsx)(components_1.Drawer, { isOpen: !!panelDrawer, onClose: () => closePanelDrawer(), children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(PanelDrawerHeader, { panelKey: panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey, onClose: () => closePanelDrawer() }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "select-group", children: "Group" }), (0, jsx_runtime_1.jsx)(material_1.Select, { required: true, labelId: "select-group", label: "Group", value: group !== null && group !== void 0 ? group : 0, onChange: handleGroupChange, children: layouts.map((layout, index) => {
+                                            var _a;
+                                            return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: index, children: ((_a = layout.spec.display) === null || _a === void 0 ? void 0 : _a.title) || `Group ${index + 1}` }, index));
+                                        }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 8, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, sx: { flexGrow: '1' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, label: "Panel Name", value: panelName, variant: "outlined", onChange: handlePanelNameChange }), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Description", value: panelDescription, variant: "outlined", onChange: handlePanelDescriptionChange })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "panel-type-label", children: "Panel Type" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { required: true, labelId: "panel-type-label", label: "Panel Type", value: kind, onChange: handleKindChange, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "LineChart", children: "Line Chart" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "GaugeChart", children: "Gauge Chart" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "StatChart", children: "Stat Chart" })] })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 8, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: kind !== '' && (0, jsx_runtime_1.jsx)(PanelOptionsEditor_1.PanelOptionsEditor, { kind: kind, value: options, onChange: handleOptionsChange }) }) })] })] }) }));
+};
+const PanelDrawerHeader = ({ panelKey, onClose }) => {
+    const action = panelKey ? 'Edit' : 'Add';
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: (theme) => theme.spacing(2),
+            paddingBottom: (theme) => theme.spacing(2),
+            borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", children: `${action} Panel` }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", variant: "contained", children: panelKey ? 'Apply' : 'Add' }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onClose, children: "Cancel" })] })] }));
+};
+exports.default = PanelDrawer;

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

@@ -0,0 +1,111 @@
+"use strict";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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.
+// 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.
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const dashboardAppSlice = __importStar(require("../../context/DashboardAppSlice"));
+const layoutsSlice = __importStar(require("../../context/LayoutsSlice"));
+const context = __importStar(require("../../context/DashboardProvider"));
+const test_1 = require("../../test");
+const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
+const PanelDrawer_1 = __importDefault(require("./PanelDrawer"));
+const updatePanel = jest.fn();
+jest.spyOn(context, 'usePanels').mockReturnValue({
+    updatePanel,
+    panels: {},
+});
+const addItemToLayout = jest.fn();
+jest.spyOn(layoutsSlice, 'useLayouts').mockReturnValue({
+    addItemToLayout,
+    updateLayout: jest.fn(),
+    layouts: testDashboard_1.default.spec.layouts,
+});
+const dashboardApp = {
+    panelDrawer: {
+        groupIndex: 0,
+    },
+    openPanelDrawer: jest.fn(),
+    closePanelDrawer: jest.fn(),
+    panelGroupDialog: undefined,
+    openPanelGroupDialog: jest.fn(),
+    closePanelGroupDialog: jest.fn(),
+};
+describe('Panel Drawer', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    const renderPanelDrawer = () => {
+        const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
+        addMockPlugin('Panel', 'FakePanel', test_1.FAKE_PANEL_PLUGIN);
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsxs)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: [(0, jsx_runtime_1.jsx)(PanelDrawer_1.default, {}), ","] }));
+    };
+    it('should add new panel', () => {
+        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
+        renderPanelDrawer();
+        const nameInput = react_1.screen.getByLabelText(/Panel Name/);
+        user_event_1.default.type(nameInput, 'New Panel');
+        user_event_1.default.click(react_1.screen.getByText('Add'));
+        expect(updatePanel).toHaveBeenCalledWith('NewPanel', {
+            kind: '',
+            display: { name: 'New Panel', description: '' },
+            options: {},
+        }, 0);
+    });
+    it('should edit an existing panel', () => {
+        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue({
+            ...dashboardApp,
+            panelDrawer: {
+                groupIndex: 0,
+                panelKey: 'cpu',
+            },
+        });
+        renderPanelDrawer();
+        const nameInput = react_1.screen.getByLabelText(/Panel Name/);
+        user_event_1.default.type(nameInput, 'cpu usage');
+        user_event_1.default.click(react_1.screen.getByText('Apply'));
+        expect(updatePanel).toHaveBeenCalledWith('cpu', {
+            display: { name: 'cpu usage', description: '' },
+            kind: '',
+            options: {},
+        });
+    });
+});

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelOptionsEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const react_1 = require("react");
+function PanelOptionsEditor(props) {
+    const { kind, value, onChange } = props;
+    const { OptionsEditorComponent, createInitialOptions } = (0, plugin_system_1.usePanelPlugin)(kind);
+    // When the kind changes, re-init options
+    (0, react_1.useEffect)(() => {
+        onChange(createInitialOptions());
+        // TODO: See if we can switch up plugin loading so this happens as part of selecting the plugin kind so we don't
+        // need this effect at all
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [kind]);
+    return (0, jsx_runtime_1.jsx)(OptionsEditorComponent, { value: value, onChange: onChange });
+}
+exports.PanelOptionsEditor = PanelOptionsEditor;