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

package/dist/components/Panel/PanelHeader.js

@@ -0,0 +1,109 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardHeader, Typography, Stack, IconButton, styled } from '@mui/material';
+import { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';
+import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import DragIcon from 'mdi-material-ui/DragVertical';
+export 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__*/ _jsxs(Stack, {
+            direction: "row",
+            spacing: 0.5,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": `edit panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onEditPanelClick,
+                    children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": `delete panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onDeletePanelClick,
+                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": `move panel ${title}`,
+                    size: "small",
+                    children: /*#__PURE__*/ _jsx(DragIcon, {
+                        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__*/ _jsx(InfoTooltip, {
+            id: descriptionTooltipId,
+            description: description,
+            placement: TooltipPlacement.Bottom,
+            children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                "aria-label": "Panel Description",
+                children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                    "aria-describedby": "info-tooltip",
+                    "aria-hidden": false,
+                    sx: {
+                        color: (theme)=>theme.palette.grey[700]
+                    }
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(CardHeader, {
+        id: id,
+        component: "header",
+        "aria-labelledby": titleElementId,
+        "aria-describedby": descriptionTooltipId,
+        disableTypography: true,
+        title: /*#__PURE__*/ _jsx(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: combineSx((theme)=>({
+                padding: theme.spacing(1),
+                borderBottom: `solid 1px ${theme.palette.divider}`,
+                '.MuiCardHeader-content': {
+                    overflow: 'hidden'
+                }
+            }), sx),
+        ...rest
+    });
+}
+const HeaderIconButton = styled(IconButton)(({ theme  })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));
+
+//# sourceMappingURL=PanelHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let action: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    action = (\n      <Stack direction=\"row\" spacing={0.5} alignItems=\"center\">\n        <HeaderIconButton aria-label={`edit panel ${title}`} size=\"small\" onClick={editHandlers.onEditPanelClick}>\n          <PencilIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`delete panel ${title}`} size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n          <DeleteIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`move panel ${title}`} size=\"small\">\n          <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n        </HeaderIconButton>\n      </Stack>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    action = (\n      <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n        <HeaderIconButton aria-label=\"Panel Description\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={action}\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","spacing","alignItems","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","padding","borderBottom","divider","borderRadius","shape"],"mappings":"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"}

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

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

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

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

package/dist/components/Panel/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Panel';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,SAAS,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * The Add/Edit panel drawer for editing a panel's options.
+ */
+export declare const PanelDrawer: () => JSX.Element;
+//# sourceMappingURL=PanelDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAsDvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -0,0 +1,94 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Stack, Box, Button, Typography } from '@mui/material';
+import { Drawer } from '@perses-dev/components';
+import { usePanelEditor } from '../../context';
+import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
+/**
+ * The Add/Edit panel drawer for editing a panel's options.
+ */ export const PanelDrawer = ()=>{
+    const panelEditor = usePanelEditor();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = 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__*/ _jsx(Drawer, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        SlideProps: {
+            onExited: handleExited
+        },
+        children: panelEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "h2",
+                            children: [
+                                panelEditor.mode,
+                                " Panel"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    form: panelEditorFormId,
+                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleClose,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(PanelEditorForm, {
+                    onSubmit: handleSubmit,
+                    initialValues: panelEditor.initialValues
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=PanelDrawer.js.map

package/dist/components/PanelDrawer/PanelDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","mode","direction","marginLeft","type","form","color","onClick","onSubmit","initialValues"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelDrawer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PanelDrawer.test.d.ts.map

package/dist/components/PanelDrawer/PanelDrawer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDrawer.test.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,124 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+import { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';
+import { DashboardProvider } from '../../context/DashboardProvider';
+import { PanelDrawer } from './PanelDrawer';
+describe('Panel Drawer', ()=>{
+    const renderPanelDrawer = ()=>{
+        const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
+        renderWithContext(/*#__PURE__*/ _jsxs(DashboardProvider, {
+            initialState: {
+                dashboardResource: getTestDashboard(),
+                isEditMode: true
+            },
+            children: [
+                /*#__PURE__*/ _jsx(DashboardProviderSpy, {}),
+                /*#__PURE__*/ _jsx(PanelDrawer, {})
+            ]
+        }));
+        const { value: storeApi  } = store;
+        if (storeApi === undefined) {
+            throw new Error('Expected dashboard store to be set after initial render');
+        }
+        return storeApi;
+    };
+    it('should add new panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for a new panel
+        act(()=>storeApi.getState().openAddPanel());
+        const nameInput = await screen.findByLabelText(/Name/);
+        userEvent.type(nameInput, 'New Panel');
+        userEvent.click(screen.getByText('Add'));
+        // TODO: Assert drawer is closed?
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // Should have the new panel in the store
+            NewPanel: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'New Panel'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+    it('should add panel with duplicate panel name', async ()=>{
+        const storeApi = renderPanelDrawer();
+        act(()=>storeApi.getState().openAddPanel());
+        const nameInput = await screen.findByLabelText(/Name/);
+        userEvent.type(nameInput, 'cpu');
+        userEvent.click(screen.getByText('Add'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // make sure we don't have duplicate panel key by appending "-1"
+            'cpu-1': {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+    it('should edit an existing panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for an existing panel
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Test group not found');
+        }
+        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
+        if (layout === undefined) {
+            throw new Error('Test panel not found');
+        }
+        act(()=>storeApi.getState().openEditPanel({
+                panelGroupId: group.id,
+                panelGroupItemLayoutId: layout[0]
+            }));
+        const nameInput = await screen.findByLabelText(/Name/);
+        userEvent.clear(nameInput);
+        userEvent.type(nameInput, 'cpu usage');
+        userEvent.click(screen.getByText('Apply'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            cpu: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu usage'
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+});
+
+//# sourceMappingURL=PanelDrawer.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardResource: getTestDashboard(), isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelDrawer />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel\n    act(() => storeApi.getState().openAddPanel());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should add panel with duplicate panel name', async () => {\n    const storeApi = renderPanelDrawer();\n\n    act(() => storeApi.getState().openAddPanel());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'cpu');\n    userEvent.click(screen.getByText('Add'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // make sure we don't have duplicate panel key by appending \"-1\"\n      'cpu-1': {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Test group not found');\n    }\n    const layout = Object.entries(group.itemPanelKeys).find(([, panelKey]) => panelKey === 'cpu');\n    if (layout === undefined) {\n      throw new Error('Test panel not found');\n    }\n    act(() => storeApi.getState().openEditPanel({ panelGroupId: group.id, panelGroupItemLayoutId: layout[0] }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","createDashboardProviderSpy","getTestDashboard","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","store","DashboardProviderSpy","initialState","dashboardResource","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","spec","display","name","plugin","group","Object","values","panelGroups","find","title","layout","entries","itemPanelKeys","panelKey","openEditPanel","panelGroupId","id","panelGroupItemLayoutId","clear","cpu"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelEditorForm.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
+export interface PanelEditorFormProps {
+    initialValues: PanelEditorValues;
+    onSubmit: (values: PanelEditorValues) => void;
+}
+export declare function PanelEditorForm(props: PanelEditorFormProps): JSX.Element;
+/**
+ * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.
+ */
+export declare const panelEditorFormId = "panel-editor-form";
+//# sourceMappingURL=PanelEditorForm.d.ts.map

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA0G1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -0,0 +1,192 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
+import { useListPanelGroups } from '../../context';
+import { PanelPreview } from './PanelPreview';
+export function PanelEditorForm(props) {
+    var ref;
+    const { initialValues , onSubmit  } = props;
+    const panelGroups = useListPanelGroups();
+    const [name, setName] = useState(initialValues.name);
+    const [description, setDescription] = useState(initialValues.description);
+    const [groupId, setGroupId] = useState(initialValues.groupId);
+    const [kind, setKind] = useState(initialValues.kind);
+    const [spec, setSpec] = useState(initialValues.spec);
+    // Use common plugin editor logic even though we've split the inputs up in this form
+    const pluginEditor = usePluginEditor({
+        pluginType: 'Panel',
+        value: {
+            kind,
+            spec
+        },
+        onChange: (plugin)=>{
+            setKind(plugin.kind);
+            setSpec(plugin.spec);
+        }
+    });
+    // Ignore string values (which would be an "empty" value from the Select) since we don't allow them to unset it
+    const handleGroupChange = (e)=>{
+        const { value  } = e.target;
+        if (typeof value === 'string') {
+            return;
+        }
+        setGroupId(value);
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        const values = {
+            name,
+            description,
+            groupId,
+            kind,
+            spec
+        };
+        onSubmit(values);
+    };
+    var _title, ref1;
+    return(// Grid maxHeight allows user to scroll inside Drawer to see all content
+    /*#__PURE__*/ _jsx(Box, {
+        component: "form",
+        id: panelEditorFormId,
+        onSubmit: handleSubmit,
+        sx: {
+            flex: 1,
+            overflowY: 'scroll',
+            padding: (theme)=>theme.spacing(2)
+        },
+        children: /*#__PURE__*/ _jsxs(Grid, {
+            container: true,
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ _jsx(TextField, {
+                        required: true,
+                        fullWidth: true,
+                        label: "Name",
+                        value: name,
+                        variant: "outlined",
+                        onChange: (e)=>setName(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 4,
+                    children: /*#__PURE__*/ _jsxs(FormControl, {
+                        fullWidth: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(InputLabel, {
+                                id: "select-group",
+                                children: "Group"
+                            }),
+                            /*#__PURE__*/ _jsx(Select, {
+                                required: true,
+                                labelId: "select-group",
+                                label: "Group",
+                                value: groupId,
+                                onChange: handleGroupChange,
+                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: panelGroup.id,
+                                        children: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, panelGroup.id))
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ _jsx(TextField, {
+                        fullWidth: true,
+                        label: "Description",
+                        value: description,
+                        variant: "outlined",
+                        onChange: (e)=>setDescription(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Grid, {
+                    item: true,
+                    xs: 4,
+                    children: [
+                        /*#__PURE__*/ _jsxs(FormControl, {
+                            fullWidth: true,
+                            disabled: pluginEditor.isLoading,
+                            error: pluginEditor.error !== null,
+                            children: [
+                                /*#__PURE__*/ _jsx(InputLabel, {
+                                    id: "panel-type-label",
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ _jsx(PluginKindSelect, {
+                                    pluginType: "Panel",
+                                    required: true,
+                                    labelId: "panel-type-label",
+                                    label: "Type",
+                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : kind,
+                                    onChange: pluginEditor.onKindChange
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(FormHelperText, {
+                            children: (ref1 = (ref = pluginEditor.error) === null || ref === void 0 ? void 0 : ref.message) !== null && ref1 !== void 0 ? ref1 : ''
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h4",
+                            marginBottom: 1,
+                            children: "Preview"
+                        }),
+                        /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: ErrorAlert,
+                            children: /*#__PURE__*/ _jsx(PanelPreview, {
+                                kind: kind,
+                                name: name,
+                                description: description,
+                                spec: spec,
+                                groupId: groupId
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                            pluginType: "Panel",
+                            pluginKind: kind,
+                            value: spec,
+                            onChange: pluginEditor.onSpecChange
+                        })
+                    })
+                })
+            ]
+        })
+    }));
+}
+/**
+ * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.
+ */ export const panelEditorFormId = 'panel-editor-form';
+
+//# sourceMappingURL=PanelEditorForm.js.map