@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc

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

@@ -0,0 +1,100 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "GridTitle", {
+    enumerable: true,
+    get: ()=>GridTitle
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
+const _chevronRight = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronRight"));
+const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
+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 { panelGroupId , title , collapse  } = props;
+    const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
+    const { isEditMode  } = (0, _context.useEditMode)();
+    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: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
+        },
+        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)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
+                }),
+                text,
+                isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    marginLeft: "auto",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": `add panel to group ${title}`,
+                            onClick: openAddPanel,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": `edit group ${title}`,
+                            onClick: openEditPanelGroup,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": `delete group ${title}`,
+                            onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": `move group ${title} down`,
+                            disabled: moveDown === undefined,
+                            onClick: moveDown,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            "aria-label": `move group ${title} up`,
+                            disabled: moveUp === undefined,
+                            onClick: moveUp,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                        })
+                    ]
+                })
+            ]
+        }) : // If we don't need expand/collapse, just render the title text
+        text
+    });
+}

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

@@ -0,0 +1,29 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_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;
+}

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

@@ -0,0 +1,123 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Panel", {
+    enumerable: true,
+    get: ()=>Panel
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
+const _reactIntersectionObserver = require("react-intersection-observer");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+const _panelHeader = require("./PanelHeader");
+const _panelContent = require("./PanelContent");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function Panel(props) {
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    // Make sure we have an ID we can use for aria attributes
+    const generatedPanelId = (0, _components.useId)('Panel');
+    const headerId = `${generatedPanelId}-header`;
+    const [contentElement, setContentElement] = (0, _react.useState)(null);
+    const [isHovered, setIsHovered] = (0, _react.useState)(false);
+    const { width , height  } = (0, _useResizeObserver.default)({
+        ref: contentElement
+    });
+    const contentDimensions = (0, _react.useMemo)(()=>{
+        if (width === undefined || height === undefined) return undefined;
+        return {
+            width,
+            height
+        };
+    }, [
+        width,
+        height
+    ]);
+    const { ref , inView  } = (0, _reactIntersectionObserver.useInView)({
+        threshold: 0.3,
+        initialInView: false,
+        triggerOnce: true
+    });
+    // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
+    const panelPadding = 1.5;
+    const handleMouseEnter = (e)=>{
+        setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    };
+    const handleMouseLeave = (e)=>{
+        setIsHovered(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Card, {
+        ref: ref,
+        component: "section",
+        sx: (0, _components.combineSx)({
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexFlow: 'column nowrap'
+        }, sx),
+        variant: "outlined",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "aria-labelledby": headerId,
+        "aria-describedby": headerId,
+        ...others,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {
+                id: headerId,
+                title: definition.spec.display.name,
+                description: definition.spec.display.description,
+                editHandlers: editHandlers,
+                isHovered: isHovered,
+                sx: {
+                    paddingX: (theme)=>theme.spacing(panelPadding)
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardContent, {
+                component: "figure",
+                sx: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    flexGrow: 1,
+                    margin: 0,
+                    padding: (theme)=>theme.spacing(panelPadding),
+                    // Override MUI default style for last-child
+                    ':last-child': {
+                        padding: (theme)=>theme.spacing(panelPadding)
+                    }
+                },
+                ref: setContentElement,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                    FallbackComponent: _components.ErrorAlert,
+                    resetKeys: [
+                        definition.spec.plugin.spec
+                    ],
+                    children: inView === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelContent.PanelContent, {
+                        panelPluginKind: definition.spec.plugin.kind,
+                        spec: definition.spec.plugin.spec,
+                        contentDimensions: contentDimensions
+                    })
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,129 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _test = require("../../test");
+const _panel = require("./Panel");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('Panel', ()=>{
+    const createTestPanel = ()=>({
+            kind: 'Panel',
+            spec: {
+                display: {
+                    name: 'Fake Panel Title',
+                    description: 'This is a fake panel'
+                },
+                plugin: {
+                    kind: 'TimeSeriesChart',
+                    spec: {}
+                }
+            }
+        });
+    // Helper to render the panel with some context set
+    const renderPanel = (definition, editHandlers)=>{
+        definition !== null && definition !== void 0 ? definition : definition = createTestPanel();
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+            definition: definition,
+            editHandlers: editHandlers
+        }));
+    };
+    // Helper to get the panel once rendered
+    const getPanel = ()=>_react.screen.getByRole('region', {
+            name: 'Fake Panel Title'
+        });
+    it('should render panel', async ()=>{
+        renderPanel();
+        const panel = getPanel();
+        expect(panel).toBeInTheDocument();
+        // Should diplay header with panel's title
+        const header = _react.screen.getByRole('banner');
+        expect(header).toHaveTextContent('Fake Panel Title');
+        // Should display chart's content from the fake panel plugin
+        const content = _react.screen.getByRole('figure');
+        await (0, _react.waitFor)(()=>{
+            expect(content).toHaveTextContent('TimeSeriesChart panel');
+        });
+        expect(content);
+    });
+    it('shows panel description', async ()=>{
+        renderPanel();
+        const panel = getPanel();
+        // Description button should not be visible until hover on panel
+        const missingButton = _react.screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(missingButton).not.toBeInTheDocument();
+        _userEvent.default.hover(panel);
+        const descriptionButton = _react.screen.getByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).toBeInTheDocument();
+        // Can hover to see panel description in tooltip
+        _userEvent.default.hover(descriptionButton);
+        const tooltip = await _react.screen.findByRole('tooltip');
+        expect(tooltip).toHaveTextContent('This is a fake panel');
+    });
+    it('does not show description when panel does not have one', ()=>{
+        // Render a panel without a description set
+        const withoutDescription = createTestPanel();
+        withoutDescription.spec.display.description = undefined;
+        renderPanel(withoutDescription);
+        const panel = getPanel();
+        _userEvent.default.hover(panel);
+        const descriptionButton = _react.screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
+    });
+    it('does not show description in edit mode', ()=>{
+        renderPanel(undefined, {
+            onEditPanelClick: jest.fn(),
+            onDeletePanelClick: jest.fn()
+        });
+        const panel = getPanel();
+        _userEvent.default.hover(panel);
+        const descriptionButton = _react.screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
+    });
+    it('can trigger panel actions in edit mode', ()=>{
+        const onEditPanelClick = jest.fn();
+        const onDeletePanelClick = jest.fn();
+        renderPanel(undefined, {
+            onEditPanelClick,
+            onDeletePanelClick
+        });
+        const panel = getPanel();
+        _userEvent.default.hover(panel);
+        const editButton = _react.screen.getByRole('button', {
+            name: /edit/i
+        });
+        _userEvent.default.click(editButton);
+        const deleteButton = _react.screen.getByRole('button', {
+            name: /delete/i
+        });
+        _userEvent.default.click(deleteButton);
+        expect(onEditPanelClick).toHaveBeenCalledTimes(1);
+        expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -0,0 +1,44 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelContent", {
+    enumerable: true,
+    get: ()=>PanelContent
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _material = require("@mui/material");
+function PanelContent(props) {
+    const { panelPluginKind , contentDimensions , ...others } = props;
+    const { data: plugin , isLoading  } = (0, _pluginSystem.usePlugin)('Panel', panelPluginKind, {
+        useErrorBoundary: true
+    });
+    const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
+    if (isLoading) {
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "rectangular",
+            width: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.width,
+            height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height
+        });
+    }
+    if (PanelComponent === undefined) {
+        throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PanelComponent, {
+        ...others,
+        contentDimensions: contentDimensions
+    });
+}

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

@@ -0,0 +1,120 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelHeader", {
+    enumerable: true,
+    get: ()=>PanelHeader
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
+const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
+const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
+const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
+    const titleElementId = `${id}-title`;
+    const descriptionTooltipId = `${id}-description`;
+    let action = undefined;
+    if (editHandlers !== undefined) {
+        // If there are edit handlers, always just show the edit buttons
+        action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 0.5,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `edit panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onEditPanelClick,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `delete panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onDeletePanelClick,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `move panel ${title}`,
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                        className: "drag-handle",
+                        sx: {
+                            cursor: 'grab'
+                        }
+                    })
+                })
+            ]
+        });
+    } else if (description !== undefined && isHovered) {
+        // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
+        action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            id: descriptionTooltipId,
+            description: description,
+            placement: _components.TooltipPlacement.Bottom,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                "aria-label": "Panel Description",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                    "aria-describedby": "info-tooltip",
+                    "aria-hidden": false,
+                    sx: {
+                        color: (theme)=>theme.palette.grey[700]
+                    }
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
+        id: id,
+        component: "header",
+        "aria-labelledby": titleElementId,
+        "aria-describedby": descriptionTooltipId,
+        disableTypography: true,
+        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            id: titleElementId,
+            variant: "subtitle1",
+            sx: {
+                // `minHeight` guarantees that the header has the correct height
+                // when there is no title (i.e. in the preview)
+                lineHeight: '24px',
+                minHeight: '24px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: title
+        }),
+        action: action,
+        sx: (0, _components.combineSx)((theme)=>({
+                padding: theme.spacing(1),
+                borderBottom: `solid 1px ${theme.palette.divider}`,
+                '.MuiCardHeader-content': {
+                    overflow: 'hidden'
+                }
+            }), sx),
+        ...rest
+    });
+}
+const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));

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

@@ -0,0 +1,28 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./Panel"), 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;
+}

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

@@ -0,0 +1,98 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelDrawer", {
+    enumerable: true,
+    get: ()=>PanelDrawer
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+const _panelEditorForm = require("./PanelEditorForm");
+const PanelDrawer = ()=>{
+    const panelEditor = (0, _context.usePanelEditor)();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = (0, _react.useState)(false);
+    const handleClose = ()=>setIsClosing(true);
+    // Don't call closeDrawer on the store until the Drawer has completely transitioned out
+    const handleExited = ()=>{
+        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        setIsClosing(false);
+    };
+    // Drawer is open if we have a model and we're not transitioning out
+    const isOpen = panelEditor !== undefined && isClosing === false;
+    const handleSubmit = (values)=>{
+        // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
+        if (panelEditor === undefined) {
+            throw new Error('Cannot apply changes');
+        }
+        panelEditor.applyChanges(values);
+        handleClose();
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        SlideProps: {
+            onExited: handleExited
+        },
+        children: panelEditor !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
+                            variant: "h2",
+                            children: [
+                                panelEditor.mode,
+                                " Panel"
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    form: _panelEditorForm.panelEditorFormId,
+                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleClose,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelEditorForm.PanelEditorForm, {
+                    onSubmit: handleSubmit,
+                    initialValues: panelEditor.initialValues
+                })
+            ]
+        })
+    });
+};