@perses-dev/dashboards 0.8.0 → 0.9.0

package/dist/components/Panel/Panel.js

@@ -1 +1,170 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import useResizeObserver from"use-resize-observer";import{useInView}from"react-intersection-observer";import{PluginBoundary}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography,IconButton as MuiIconButton,Stack,styled}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";import PencilIcon from"mdi-material-ui/Pencil";import DragIcon from"mdi-material-ui/DragVertical";import{useDashboardApp,useEditMode}from"../../context";import{PanelContent}from"./PanelContent";export function Panel(e){const{definition:i,groupIndex:o,panelKey:n,...r}=e,[t,a]=useState(null),[s,l]=useState(!1),{width:d,height:p}=useResizeObserver({ref:t}),c=useMemo((()=>{if(void 0!==d&&void 0!==p)return{width:d,height:p}}),[d,p]),{ref:m,inView:u}=useInView({threshold:.3,initialInView:!1,triggerOnce:!0}),{isEditMode:x}=useEditMode(),{openPanelDrawer:f}=useDashboardApp();return _jsxs(Card,{ref:m,sx:{...r.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...r,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center",minHeight:"24px"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginLeft:"auto"},children:[!x&&s&&i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Bottom,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,fontSize:"small",sx:{cursor:"pointer"}})}),x&&s&&_jsxs(Stack,{direction:"row",alignItems:"center",spacing:.5,children:[_jsx(IconButton,{"aria-label":"edit panel",size:"small",onClick:()=>{f({groupIndex:o,panelKey:n})},children:_jsx(PencilIcon,{})}),_jsx(IconButton,{"aria-label":"drag handle",size:"small",children:_jsx(DragIcon,{className:"drag-handle",sx:{cursor:"grab"}})})]})]})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:a,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:!0===u&&_jsx(PanelContent,{definition:i,contentDimensions:c})})})]})}const IconButton=styled(MuiIconButton)((({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"4px"})));
+// 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, useMemo } from 'react';
+import useResizeObserver from 'use-resize-observer';
+import { useInView } from 'react-intersection-observer';
+import { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';
+import { Box, Card, CardHeader, CardContent, Typography, IconButton as MuiIconButton, Stack, styled } from '@mui/material';
+import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
+import PencilIcon from 'mdi-material-ui/Pencil';
+import DragIcon from 'mdi-material-ui/DragVertical';
+import { useDashboardApp, useEditMode } from '../../context';
+import { PanelContent } from './PanelContent';
+/**
+ * Renders a PanelDefinition's content inside of a Card.
+ */ export function Panel(props) {
+    const { definition , groupIndex , panelKey , ...others } = props;
+    const [contentElement, setContentElement] = useState(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const { width , height  } = useResizeObserver({
+        ref: contentElement
+    });
+    const contentDimensions = useMemo(()=>{
+        if (width === undefined || height === undefined) return undefined;
+        return {
+            width,
+            height
+        };
+    }, [
+        width,
+        height
+    ]);
+    const { ref , inView  } = 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 { isEditMode  } = useEditMode();
+    const { openPanelDrawer  } = useDashboardApp();
+    const handleEditButtonClick = ()=>{
+        openPanelDrawer({
+            groupIndex,
+            panelKey
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Card, {
+        ref: ref,
+        sx: {
+            ...others.sx,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexFlow: 'column nowrap'
+        },
+        variant: "outlined",
+        ...others,
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        children: [
+            /*#__PURE__*/ _jsx(CardHeader, {
+                title: /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        minHeight: '24px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            component: "h2",
+                            variant: "body2",
+                            fontWeight: (theme)=>theme.typography.fontWeightMedium,
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            children: definition.spec.display.name
+                        }),
+                        /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                !isEditMode && isHovered && definition.spec.display.description && /*#__PURE__*/ _jsx(InfoTooltip, {
+                                    id: "info-tooltip",
+                                    description: definition.spec.display.description,
+                                    placement: TooltipPlacement.Bottom,
+                                    children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                                        "aria-describedby": "info-tooltip",
+                                        "aria-hidden": false,
+                                        fontSize: "small",
+                                        sx: {
+                                            cursor: 'pointer'
+                                        }
+                                    })
+                                }),
+                                isEditMode && isHovered && /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    alignItems: "center",
+                                    spacing: 0.5,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "edit panel",
+                                            size: "small",
+                                            onClick: handleEditButtonClick,
+                                            children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "drag handle",
+                                            size: "small",
+                                            children: /*#__PURE__*/ _jsx(DragIcon, {
+                                                className: "drag-handle",
+                                                sx: {
+                                                    cursor: 'grab'
+                                                }
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                sx: {
+                    display: 'block',
+                    padding: (theme)=>theme.spacing(1, panelPadding),
+                    borderBottom: (theme)=>`solid 1px ${theme.palette.divider}`
+                }
+            }),
+            /*#__PURE__*/ _jsx(CardContent, {
+                sx: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    flexGrow: 1,
+                    padding: (theme)=>theme.spacing(panelPadding),
+                    // Override MUI default style for last-child
+                    ':last-child': {
+                        padding: (theme)=>theme.spacing(panelPadding)
+                    }
+                },
+                ref: setContentElement,
+                children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                    FallbackComponent: ErrorAlert,
+                    children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
+                        definition: definition,
+                        contentDimensions: contentDimensions
+                    })
+                })
+            })
+        ]
+    });
+}
+const IconButton = styled(MuiIconButton)(({ theme  })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));
+
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/Panel.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, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport {\n  Box,\n  Card,\n  CardProps,\n  CardHeader,\n  CardContent,\n  Typography,\n  IconButton as MuiIconButton,\n  Stack,\n  styled,\n} from '@mui/material';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { useDashboardApp, useEditMode } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  groupIndex: number;\n  panelKey: string;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, groupIndex, panelKey, ...others } = props;\n\n  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const { isEditMode } = useEditMode();\n\n  const { openPanelDrawer } = useDashboardApp();\n\n  const handleEditButtonClick = () => {\n    openPanelDrawer({ groupIndex, panelKey });\n  };\n\n  return (\n    <Card\n      ref={ref}\n      sx={{\n        ...others.sx,\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexFlow: 'column nowrap',\n      }}\n      variant=\"outlined\"\n      {...others}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <CardHeader\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              minHeight: '24px',\n            }}\n          >\n            <Typography\n              component=\"h2\"\n              variant=\"body2\"\n              fontWeight={(theme) => theme.typography.fontWeightMedium}\n              whiteSpace=\"nowrap\"\n              overflow=\"hidden\"\n              textOverflow=\"ellipsis\"\n            >\n              {definition.spec.display.name}\n            </Typography>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                marginLeft: 'auto',\n              }}\n            >\n              {!isEditMode && isHovered && definition.spec.display.description && (\n                <InfoTooltip\n                  id=\"info-tooltip\"\n                  description={definition.spec.display.description}\n                  placement={TooltipPlacement.Bottom}\n                >\n                  <InformationOutlineIcon\n                    aria-describedby=\"info-tooltip\"\n                    aria-hidden={false}\n                    fontSize=\"small\"\n                    sx={{ cursor: 'pointer' }}\n                  />\n                </InfoTooltip>\n              )}\n              {isEditMode && isHovered && (\n                <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n                  <IconButton aria-label=\"edit panel\" size=\"small\" onClick={handleEditButtonClick}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"drag handle\" size=\"small\">\n                    <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n                  </IconButton>\n                </Stack>\n              )}\n            </Box>\n          </Box>\n        }\n        sx={{\n          display: 'block',\n          padding: (theme) => theme.spacing(1, panelPadding),\n          borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,\n        }}\n      />\n      <CardContent\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && <PanelContent definition={definition} contentDimensions={contentDimensions} />}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n\nconst IconButton = styled(MuiIconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","InfoTooltip","TooltipPlacement","Box","Card","CardHeader","CardContent","Typography","IconButton","MuiIconButton","Stack","styled","InformationOutlineIcon","PencilIcon","DragIcon","useDashboardApp","useEditMode","PanelContent","Panel","props","definition","groupIndex","panelKey","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","openPanelDrawer","handleEditButtonClick","sx","display","flexFlow","variant","onMouseEnter","onMouseLeave","title","alignItems","minHeight","component","fontWeight","theme","typography","fontWeightMedium","whiteSpace","overflow","textOverflow","spec","name","marginLeft","description","id","placement","Bottom","aria-describedby","aria-hidden","fontSize","cursor","direction","spacing","aria-label","size","onClick","className","padding","borderBottom","palette","divider","position","flexGrow","FallbackComponent","borderRadius","shape"],"mappings":"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"}

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

@@ -1 +1,71 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import"intersection-observer";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps,FAKE_PANEL_PLUGIN}from"../../test";import testDashboard from"../../test/testDashboard";import{Panel}from"./Panel";describe("Panel",(()=>{let e,r;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}},groupIndex:0,panelKey:"panelRef"},r={isEditMode:!1,dashboardSpec:testDashboard.spec}}));const n=r=>{const{addMockPlugin:n,pluginRegistryProps:t}=mockPluginRegistryProps();n("Panel","FakePanel",FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...t,children:_jsx(Panel,{...e})}),r)};it("should render name and info icon",(async()=>{n(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")})),it("should render edit icons when in edit mode",(async()=>{r.isEditMode=!0,n(r),await screen.queryByLabelText("drag handle"),screen.queryByLabelText("edit panel"),screen.queryByLabelText("more")}))}));
+// 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 } from "react/jsx-runtime";
+import { PluginRegistry } from '@perses-dev/plugin-system';
+import 'intersection-observer'; // TODO: Why do we need this side-effect? Should it be in test setup somewhere?
+import { screen } from '@testing-library/react';
+import { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';
+import { DashboardProvider } from '../../context';
+import { Panel } from './Panel';
+describe('Panel', ()=>{
+    // Helper to create panel props for rendering tests
+    const createPanelProps = ()=>{
+        return {
+            definition: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'Fake Panel',
+                        description: 'This is a fake panel'
+                    },
+                    plugin: {
+                        kind: 'FakePanel',
+                        spec: {}
+                    }
+                }
+            },
+            groupIndex: 0,
+            panelKey: 'panelRef'
+        };
+    };
+    // Helper to render the panel with some context set
+    const renderPanel = (isEditMode = false)=>{
+        const { addMockPlugin , pluginRegistryProps  } = mockPluginRegistryProps();
+        addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);
+        renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
+            ...pluginRegistryProps,
+            children: /*#__PURE__*/ _jsx(DashboardProvider, {
+                initialState: {
+                    dashboardSpec: getTestDashboard().spec,
+                    isEditMode
+                },
+                children: /*#__PURE__*/ _jsx(Panel, {
+                    ...createPanelProps()
+                })
+            })
+        }));
+    };
+    it('should render name and info icon', async ()=>{
+        renderPanel();
+        await screen.findByText('Fake Panel');
+        screen.queryByLabelText('info-tooltip');
+    });
+    it('should render edit icons when in edit mode', ()=>{
+        renderPanel(true);
+        screen.queryByLabelText('drag handle');
+        screen.queryByLabelText('edit panel');
+        screen.queryByLabelText('more');
+    });
+});
+
+//# sourceMappingURL=Panel.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/Panel.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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport 'intersection-observer'; // TODO: Why do we need this side-effect? Should it be in test setup somewhere?\nimport { screen } from '@testing-library/react';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  // Helper to create panel props for rendering tests\n  const createPanelProps = (): PanelProps => {\n    return {\n      definition: {\n        kind: 'Panel',\n        spec: {\n          display: {\n            name: 'Fake Panel',\n            description: 'This is a fake panel',\n          },\n          plugin: {\n            kind: 'FakePanel',\n            spec: {},\n          },\n        },\n      },\n      groupIndex: 0,\n      panelKey: 'panelRef',\n    };\n  };\n\n  // Helper to render the panel with some context set\n  const renderPanel = (isEditMode = false) => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n          <Panel {...createPanelProps()} />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n  };\n\n  it('should render name and info icon', async () => {\n    renderPanel();\n    await screen.findByText('Fake Panel');\n    screen.queryByLabelText('info-tooltip');\n  });\n\n  it('should render edit icons when in edit mode', () => {\n    renderPanel(true);\n    screen.queryByLabelText('drag handle');\n    screen.queryByLabelText('edit panel');\n    screen.queryByLabelText('more');\n  });\n});\n"],"names":["PluginRegistry","screen","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","groupIndex","panelKey","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,OAAO,uBAAuB,CAAC,CAAC,+EAA+E;AAC/G,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACDK,UAAU,EAAE,CAAC;YACbC,QAAQ,EAAE,UAAU;SACrB,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGnB,uBAAuB,EAAE,AAAC;QACzEkB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAEjB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACF,cAAc;YAAE,GAAGsB,mBAAmB;sBACrC,cAAA,KAAChB,iBAAiB;gBAACiB,YAAY,EAAE;oBAAEC,aAAa,EAAEnB,gBAAgB,EAAE,CAACO,IAAI;oBAAEQ,UAAU;iBAAE;0BACrF,cAAA,KAACb,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFgB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMlB,MAAM,CAACyB,UAAU,CAAC,YAAY,CAAC,CAAC;QACtCzB,MAAM,CAAC0B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClBlB,MAAM,CAAC0B,gBAAgB,CAAC,aAAa,CAAC,CAAC;QACvC1B,MAAM,CAAC0B,gBAAgB,CAAC,YAAY,CAAC,CAAC;QACtC1B,MAAM,CAAC0B,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import { JsonObject } from '@perses-dev/core';
 import { PanelProps } from '@perses-dev/plugin-system';
-export declare type PanelContentProps = PanelProps<JsonObject>;
+export declare type PanelContentProps = PanelProps<unknown>;
 /**
  * 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.
+ * definition's kind. Used so that an ErrorBoundary can be wrapped around this.
  */
 export declare function PanelContent(props: PanelContentProps): JSX.Element;
 //# sourceMappingURL=PanelContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAkB,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,oBAAY,iBAAiB,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;AAEvD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAGpD"}
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGlE,oBAAY,iBAAiB,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;AAEpD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAqBpD"}

package/dist/components/Panel/PanelContent.js

@@ -1 +1,40 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{usePanelPlugin}from"@perses-dev/plugin-system";export function PanelContent(n){const{PanelComponent:e}=usePanelPlugin(n.definition.kind);return _jsx(e,{...n})}
+// 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 } from "react/jsx-runtime";
+import { usePlugin } from '@perses-dev/plugin-system';
+import { Skeleton } from '@mui/material';
+/**
+ * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
+ * definition's kind. Used so that an ErrorBoundary can be wrapped around this.
+ */ export function PanelContent(props) {
+    const { definition: { spec: { plugin: { kind: panelPluginKind  } ,  } ,  } , contentDimensions ,  } = props;
+    const { data: plugin , isLoading  } = usePlugin('Panel', panelPluginKind, {
+        useErrorBoundary: true
+    });
+    const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(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__*/ _jsx(PanelComponent, {
+        ...props
+    });
+}
+
+//# sourceMappingURL=PanelContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\n\nexport type PanelContentProps = PanelProps<unknown>;\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const {\n    definition: {\n      spec: {\n        plugin: { kind: panelPluginKind },\n      },\n    },\n    contentDimensions,\n  } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return <Skeleton variant=\"rectangular\" width={contentDimensions?.width} height={contentDimensions?.height} />;\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...props} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","definition","spec","plugin","kind","panelPluginKind","contentDimensions","data","isLoading","useErrorBoundary","PanelComponent","variant","width","height","undefined","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,QAAoB,2BAA2B,CAAC;AAClE,SAASC,QAAQ,QAAQ,eAAe,CAAC;AAIzC;;;CAGC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EACJC,UAAU,EAAE,EACVC,IAAI,EAAE,EACJC,MAAM,EAAE,EAAEC,IAAI,EAAEC,eAAe,CAAA,EAAE,CAAA,IAClC,CAAA,IACF,CAAA,EACDC,iBAAiB,CAAA,IAClB,GAAGN,KAAK,AAAC;IACV,MAAM,EAAEO,IAAI,EAAEJ,MAAM,CAAA,EAAEK,SAAS,CAAA,EAAE,GAAGX,SAAS,CAAC,OAAO,EAAEQ,eAAe,EAAE;QAAEI,gBAAgB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpG,MAAMC,cAAc,GAAGP,MAAM,aAANA,MAAM,WAAgB,GAAtBA,KAAAA,CAAsB,GAAtBA,MAAM,CAAEO,cAAc,AAAC;IAE9C,IAAIF,SAAS,EAAE;QACb,qBAAO,KAACV,QAAQ;YAACa,OAAO,EAAC,aAAa;YAACC,KAAK,EAAEN,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEM,KAAK;YAAEC,MAAM,EAAEP,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAEO,MAAM;UAAI,CAAC;IAChH,CAAC;IAED,IAAIH,cAAc,KAAKI,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEV,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACK,cAAc;QAAE,GAAGV,KAAK;MAAI,CAAC;AACvC,CAAC"}

package/dist/components/Panel/index.js

@@ -1 +1,15 @@
-export*from"./Panel";
+// 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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-declare const PanelDrawer: () => JSX.Element;
-export default PanelDrawer;
+/**
+ * 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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAuCA,QAAA,MAAM,WAAW,mBA0JhB,CAAC;AA2BF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAoBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAwDvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -1 +1,95 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{MenuItem,Stack,Select,TextField,InputLabel,FormControl,Grid,Box,Button,Typography}from"@mui/material";import{Drawer,ErrorAlert}from"@perses-dev/components";import{PluginBoundary}from"@perses-dev/plugin-system";import{useState,useEffect}from"react";import{useDashboardApp,useLayouts,usePanels}from"../../context";import{removeWhiteSpacesAndSpecialCharacters}from"../../utils/functions";import{PanelOptionsEditor}from"./PanelOptionsEditor";const PanelDrawer=()=>{var e,l,n,a;const{layouts:r}=useLayouts(),{panels:i,updatePanel:t}=usePanels(),{panelDrawer:o,closePanelDrawer:s}=useDashboardApp();let d="",u="";(null==o?void 0:o.panelKey)&&(d=null!==(l=null===(e=i[o.panelKey])||void 0===e?void 0:e.display.name)&&void 0!==l?l:"",u=null!==(a=null===(n=i[o.panelKey])||void 0===n?void 0:n.display.description)&&void 0!==a?a:"");const[p,c]=useState(null==o?void 0:o.groupIndex),[x,v]=useState(d),[m,h]=useState(u),[y,g]=useState(""),[j,_]=useState({});useEffect((()=>{var e,l,n,a;c(null==o?void 0:o.groupIndex),(null==o?void 0:o.panelKey)?(v(null!==(l=null===(e=i[o.panelKey])||void 0===e?void 0:e.display.name)&&void 0!==l?l:""),h(null!==(a=null===(n=i[o.panelKey])||void 0===n?void 0:n.display.description)&&void 0!==a?a:"")):(v(""),h(""))}),[o,i]);return _jsx(Drawer,{isOpen:!!o,onClose:()=>s(),children:_jsxs("form",{onSubmit:e=>{e.preventDefault(),void 0===(null==o?void 0:o.groupIndex)||(null==o?void 0:o.panelKey)?(null==o?void 0:o.panelKey)&&(void 0!==(null==o?void 0:o.panelKey)&&t(o.panelKey,{...i[o.panelKey],kind:y,options:j,display:{name:null!=x?x:"",description:m}})):(()=>{if(void 0===(null==o?void 0:o.groupIndex))return;const e=removeWhiteSpacesAndSpecialCharacters(x);t(e,{kind:y,options:j,display:{name:x,description:m}},o.groupIndex)})(),s()},children:[_jsx(PanelDrawerHeader,{panelKey:null==o?void 0:o.panelKey,onClose:()=>s()}),_jsxs(Grid,{container:!0,spacing:2,children:[_jsx(Grid,{item:!0,xs:4,children:_jsxs(FormControl,{children:[_jsx(InputLabel,{id:"select-group",children:"Group"}),_jsx(Select,{required:!0,labelId:"select-group",label:"Group",value:null!=p?p:0,onChange:e=>{const{value:l}=e.target;"string"!=typeof l&&c(l)},children:r.map(((e,l)=>{var n;return _jsx(MenuItem,{value:l,children:(null===(n=e.spec.display)||void 0===n?void 0:n.title)||`Group ${l+1}`},l)}))})]})}),_jsx(Grid,{item:!0,xs:8,children:_jsxs(Stack,{spacing:2,sx:{flexGrow:"1"},children:[_jsx(TextField,{required:!0,label:"Panel Name",value:x,variant:"outlined",onChange:e=>{v(e.target.value)}}),_jsx(TextField,{label:"Description",value:m,variant:"outlined",onChange:e=>{h(e.target.value)}})]})}),_jsx(Grid,{item:!0,xs:4,children:_jsxs(FormControl,{children:[_jsx(InputLabel,{id:"panel-type-label",children:"Panel Type"}),_jsxs(Select,{required:!0,labelId:"panel-type-label",label:"Panel Type",value:y,onChange:e=>{g(e.target.value)},children:[_jsx(MenuItem,{value:"LineChart",children:"Line Chart"}),_jsx(MenuItem,{value:"GaugeChart",children:"Gauge Chart"}),_jsx(MenuItem,{value:"StatChart",children:"Stat Chart"})]})]})}),_jsx(Grid,{item:!0,xs:8,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:""!==y&&_jsx(PanelOptionsEditor,{kind:y,value:j,onChange:e=>{_(e)}})})})]})]})})},PanelDrawerHeader=({panelKey:e,onClose:l})=>_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginBottom:e=>e.spacing(2),paddingBottom:e=>e.spacing(2),borderBottom:e=>`1px solid ${e.palette.grey[100]}`},children:[_jsx(Typography,{variant:"h2",children:(e?"Edit":"Add")+" Panel"}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(Button,{type:"submit",variant:"contained",children:e?"Apply":"Add"}),_jsx(Button,{variant:"outlined",onClick:l,children:"Cancel"})]})]});export default PanelDrawer;
+// 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 { useDashboardApp } from '../../context';
+import { usePanelDrawerModel } from './panel-editor-model';
+import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
+/**
+ * The Add/Edit panel drawer for editing a panel's options.
+ */ export const PanelDrawer = ()=>{
+    const { closePanelDrawer  } = useDashboardApp();
+    const model = usePanelDrawerModel();
+    // 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 = ()=>{
+        closePanelDrawer();
+        setIsClosing(false);
+    };
+    // Drawer is open if we have a model and we're not transitioning out
+    const isOpen = model !== 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 (model === undefined) {
+            throw new Error('Cannot apply changes');
+        }
+        model.applyChanges(values);
+        handleClose();
+    };
+    return /*#__PURE__*/ _jsx(Drawer, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        SlideProps: {
+            onExited: handleExited
+        },
+        children: model !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(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: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h2",
+                            children: model.drawerTitle
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    form: panelEditorFormId,
+                                    children: model.submitButtonText
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outlined",
+                                    onClick: handleClose,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(PanelEditorForm, {
+                    onSubmit: handleSubmit,
+                    initialValues: model.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 { useDashboardApp } from '../../context';\nimport { usePanelDrawerModel } from './panel-editor-model';\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 { closePanelDrawer } = useDashboardApp();\n  const model = usePanelDrawerModel();\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    closePanelDrawer();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = model !== 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 (model === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    model.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 a model (this also ensures the form state gets reset between opens) */}\n      {model !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              marginBottom: (theme) => theme.spacing(2),\n              paddingBottom: (theme) => theme.spacing(2),\n              borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,\n            }}\n          >\n            <Typography variant=\"h2\">{model.drawerTitle}</Typography>\n            <Stack direction=\"row\" spacing={1} sx={{ 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                {model.submitButtonText}\n              </Button>\n              <Button variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={model.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","useDashboardApp","usePanelDrawerModel","PanelEditorForm","panelEditorFormId","PanelDrawer","closePanelDrawer","model","isClosing","setIsClosing","handleClose","handleExited","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","marginBottom","theme","spacing","paddingBottom","borderBottom","palette","grey","variant","drawerTitle","direction","marginLeft","type","form","submitButtonText","onClick","onSubmit","initialValues"],"mappings":"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"}

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

@@ -1 +1,103 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import*as dashboardAppSlice from"../../context/DashboardAppSlice";import*as layoutsSlice from"../../context/LayoutsSlice";import*as context from"../../context/DashboardProvider";import{FAKE_PANEL_PLUGIN,mockPluginRegistryProps,renderWithContext}from"../../test";import testDashboard from"../../test/testDashboard";import PanelDrawer from"./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.spec.layouts});const dashboardApp={panelDrawer:{groupIndex:0},openPanelDrawer:jest.fn(),closePanelDrawer:jest.fn(),panelGroupDialog:void 0,openPanelGroupDialog:jest.fn(),closePanelGroupDialog:jest.fn()};describe("Panel Drawer",(()=>{beforeEach((()=>{jest.clearAllMocks()}));const e=()=>{const{addMockPlugin:e,pluginRegistryProps:t}=mockPluginRegistryProps();e("Panel","FakePanel",FAKE_PANEL_PLUGIN),renderWithContext(_jsxs(PluginRegistry,{...t,children:[_jsx(PanelDrawer,{}),","]}))};it("should add new panel",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue(dashboardApp),e();const t=screen.getByLabelText(/Panel Name/);userEvent.type(t,"New Panel"),userEvent.click(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"}}),e();const t=screen.getByLabelText(/Panel Name/);userEvent.type(t,"cpu usage"),userEvent.click(screen.getByText("Apply")),expect(updatePanel).toHaveBeenCalledWith("cpu",{display:{name:"cpu usage",description:""},kind:"",options:{}})}))}));
+// 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 { PluginRegistry } from '@perses-dev/plugin-system';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+import { createDashboardProviderSpy, FAKE_PANEL_PLUGIN, getTestDashboard, mockPluginRegistryProps, renderWithContext } from '../../test';
+import { DashboardProvider } from '../../context/DashboardProvider';
+import { PanelDrawer } from './PanelDrawer';
+describe('Panel Drawer', ()=>{
+    const renderPanelDrawer = ()=>{
+        const { addMockPlugin , pluginRegistryProps  } = mockPluginRegistryProps();
+        addMockPlugin('Panel', 'LineChart', FAKE_PANEL_PLUGIN);
+        const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
+        renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
+            ...pluginRegistryProps,
+            children: /*#__PURE__*/ _jsxs(DashboardProvider, {
+                initialState: {
+                    dashboardSpec: getTestDashboard().spec,
+                    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 (i.e. no panel key)
+        act(()=>storeApi.getState().openPanelDrawer({
+                groupIndex: 0
+            }));
+        const nameInput = await screen.findByLabelText(/Panel 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',
+                        description: ''
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+    it('should edit an existing panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for an existing panel
+        act(()=>storeApi.getState().openPanelDrawer({
+                groupIndex: 0,
+                panelKey: 'cpu'
+            }));
+        const nameInput = await screen.findByLabelText(/Panel 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',
+                        description: ''
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+});
+
+//# sourceMappingURL=PanelDrawer.test.js.map