@perses-dev/dashboards 0.9.0 → 0.10.0

package/dist/components/Panel/Panel.js

@@ -18,13 +18,14 @@ import { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perse
 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 DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
-import { useDashboardApp, useEditMode } from '../../context';
+import { usePanels, 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 { definition , groupIndex , itemIndex , ...others } = props;
     const [contentElement, setContentElement] = useState(null);
     const [isHovered, setIsHovered] = useState(false);
     const { width , height  } = useResizeObserver({
@@ -48,11 +49,11 @@ import { PanelContent } from './PanelContent';
     // 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 { editPanel , openDeletePanelDialog  } = usePanels();
     const handleEditButtonClick = ()=>{
-        openPanelDrawer({
+        editPanel({
             groupIndex,
-            panelKey
+            itemIndex
         });
     };
     return /*#__PURE__*/ _jsxs(Card, {
@@ -117,6 +118,15 @@ import { PanelContent } from './PanelContent';
                                             onClick: handleEditButtonClick,
                                             children: /*#__PURE__*/ _jsx(PencilIcon, {})
                                         }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "delete panel",
+                                            size: "small",
+                                            onClick: ()=>openDeletePanelDialog({
+                                                    groupIndex,
+                                                    itemIndex
+                                                }),
+                                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                        }),
                                         /*#__PURE__*/ _jsx(IconButton, {
                                             "aria-label": "drag handle",
                                             size: "small",
@@ -154,7 +164,8 @@ import { PanelContent } from './PanelContent';
                 children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                     FallbackComponent: ErrorAlert,
                     children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
-                        definition: definition,
+                        panelPluginKind: definition.spec.plugin.kind,
+                        spec: definition.spec.plugin.spec,
                         contentDimensions: contentDimensions
                     })
                 })

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

@@ -1 +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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"}
+{"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 DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { usePanels, useEditMode } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  groupIndex: number;\n  itemIndex: number;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, groupIndex, itemIndex, ...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 { editPanel, openDeletePanelDialog } = usePanels();\n\n  const handleEditButtonClick = () => {\n    editPanel({ groupIndex, itemIndex });\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\n                    aria-label=\"delete panel\"\n                    size=\"small\"\n                    onClick={() => openDeletePanelDialog({ groupIndex, itemIndex })}\n                  >\n                    <DeleteIcon />\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 && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\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","DeleteIcon","DragIcon","usePanels","useEditMode","PanelContent","Panel","props","definition","groupIndex","itemIndex","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","editPanel","openDeletePanelDialog","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","panelPluginKind","plugin","kind","borderRadius","shape"],"mappings":"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"}

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

@@ -14,6 +14,7 @@ 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 userEvent from '@testing-library/user-event';
 import { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';
 import { DashboardProvider } from '../../context';
 import { Panel } from './Panel';
@@ -35,7 +36,7 @@ describe('Panel', ()=>{
                 }
             },
             groupIndex: 0,
-            panelKey: 'panelRef'
+            itemIndex: 0
         };
     };
     // Helper to render the panel with some context set
@@ -62,9 +63,11 @@ describe('Panel', ()=>{
     });
     it('should render edit icons when in edit mode', ()=>{
         renderPanel(true);
-        screen.queryByLabelText('drag handle');
-        screen.queryByLabelText('edit panel');
-        screen.queryByLabelText('more');
+        const panelTitle = screen.getByText('Fake Panel');
+        userEvent.hover(panelTitle);
+        screen.getByLabelText('drag handle');
+        screen.getByLabelText('edit panel');
+        screen.getByLabelText('delete panel');
     });
 });
 

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

@@ -1 +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"}
+{"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 userEvent from '@testing-library/user-event';\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      itemIndex: 0,\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    const panelTitle = screen.getByText('Fake Panel');\n    userEvent.hover(panelTitle);\n    screen.getByLabelText('drag handle');\n    screen.getByLabelText('edit panel');\n    screen.getByLabelText('delete panel');\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","groupIndex","itemIndex","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText","panelTitle","getByText","hover","getByLabelText"],"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,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,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,SAAS,EAAE,CAAC;SACb,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,KAACH,cAAc;YAAE,GAAGuB,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,MAAMnB,MAAM,CAAC0B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC1B,MAAM,CAAC2B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG5B,MAAM,CAAC6B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD5B,SAAS,CAAC6B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B5B,MAAM,CAAC+B,cAAc,CAAC,aAAa,CAAC,CAAC;QACrC/B,MAAM,CAAC+B,cAAc,CAAC,YAAY,CAAC,CAAC;QACpC/B,MAAM,CAAC+B,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { PanelProps } from '@perses-dev/plugin-system';
-export declare type PanelContentProps = PanelProps<unknown>;
+import { UnknownSpec } from '@perses-dev/core';
+export interface PanelContentProps extends PanelProps<UnknownSpec> {
+    panelPluginKind: string;
+}
 /**
  * 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.

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,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"}
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,WAAW,CAAC;IAChE,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAcpD"}

package/dist/components/Panel/PanelContent.js

@@ -17,7 +17,7 @@ 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 { panelPluginKind , contentDimensions , ...others } = props;
     const { data: plugin , isLoading  } = usePlugin('Panel', panelPluginKind, {
         useErrorBoundary: true
     });
@@ -33,7 +33,8 @@ import { Skeleton } from '@mui/material';
         throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
     }
     return /*#__PURE__*/ _jsx(PanelComponent, {
-        ...props
+        ...others,
+        contentDimensions: contentDimensions
     });
 }
 

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

@@ -1 +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"}
+{"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';\nimport { UnknownSpec } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n}\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 { panelPluginKind, contentDimensions, ...others } = 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 {...others} contentDimensions={contentDimensions} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","others","data","plugin","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;AAOzC;;;CAGC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,eAAe,CAAA,EAAEC,iBAAiB,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IAChE,MAAM,EAAEI,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGT,SAAS,CAAC,OAAO,EAAEI,eAAe,EAAE;QAAEM,gBAAgB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpG,MAAMC,cAAc,GAAGH,MAAM,aAANA,MAAM,WAAgB,GAAtBA,KAAAA,CAAsB,GAAtBA,MAAM,CAAEG,cAAc,AAAC;IAE9C,IAAIF,SAAS,EAAE;QACb,qBAAO,KAACR,QAAQ;YAACW,OAAO,EAAC,aAAa;YAACC,KAAK,EAAER,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEQ,KAAK;YAAEC,MAAM,EAAET,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAES,MAAM;UAAI,CAAC;IAChH,CAAC;IAED,IAAIH,cAAc,KAAKI,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEZ,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACO,cAAc;QAAE,GAAGL,MAAM;QAAED,iBAAiB,EAAEA,iBAAiB;MAAI,CAAC;AAC9E,CAAC"}

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":";AAoBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAwDvB,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAuDvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -14,30 +14,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { usePanels } from '../../context';
 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();
+    const { panelEditor  } = usePanels();
     // 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();
+        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 = model !== undefined && isClosing === false;
+    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 (model === undefined) {
+        if (panelEditor === undefined) {
             throw new Error('Cannot apply changes');
         }
-        model.applyChanges(values);
+        panelEditor.applyChanges(values);
         handleClose();
     };
     return /*#__PURE__*/ _jsx(Drawer, {
@@ -46,7 +44,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
         SlideProps: {
             onExited: handleExited
         },
-        children: model !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+        children: panelEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
                     sx: {
@@ -57,9 +55,12 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                         borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
                     },
                     children: [
-                        /*#__PURE__*/ _jsx(Typography, {
+                        /*#__PURE__*/ _jsxs(Typography, {
                             variant: "h2",
-                            children: model.drawerTitle
+                            children: [
+                                panelEditor.mode,
+                                " Panel"
+                            ]
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
@@ -72,7 +73,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                                     type: "submit",
                                     variant: "contained",
                                     form: panelEditorFormId,
-                                    children: model.submitButtonText
+                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
@@ -85,7 +86,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                 }),
                 /*#__PURE__*/ _jsx(PanelEditorForm, {
                     onSubmit: handleSubmit,
-                    initialValues: model.initialValues
+                    initialValues: panelEditor.initialValues
                 })
             ]
         })

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

@@ -1 +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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"}
+{"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 { usePanels } 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 } = usePanels();\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              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\">{panelEditor.mode} Panel</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                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button 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","usePanels","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","marginBottom","theme","spacing","paddingBottom","borderBottom","palette","grey","variant","mode","direction","marginLeft","type","form","onClick","onSubmit","initialValues"],"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,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,KAAK,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC/D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,SAAS,QAAQ,eAAe,CAAC;AAC1C,SAASC,eAAe,EAAEC,iBAAiB,QAA8B,mBAAmB,CAAC;AAE7F;;CAEC,GACD,OAAO,MAAMC,WAAW,GAAG,IAAM;IAC/B,MAAM,EAAEC,WAAW,CAAA,EAAE,GAAGJ,SAAS,EAAE,AAAC;IAEpC,iHAAiH;IACjH,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC,AAAC;IAClD,MAAMa,WAAW,GAAG,IAAMD,YAAY,CAAC,IAAI,CAAC,AAAC;IAE7C,uFAAuF;IACvF,MAAME,YAAY,GAAG,IAAM;QACzBJ,WAAW,aAAXA,WAAW,WAAO,GAAlBA,KAAAA,CAAkB,GAAlBA,WAAW,CAAEK,KAAK,EAAE,CAAC;QACrBH,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,AAAC;IAEF,oEAAoE;IACpE,MAAMI,MAAM,GAAGN,WAAW,KAAKO,SAAS,IAAIN,SAAS,KAAK,KAAK,AAAC;IAEhE,MAAMO,YAAY,GAAqC,CAACC,MAAM,GAAK;QACjE,kHAAkH;QAClH,IAAIT,WAAW,KAAKO,SAAS,EAAE;YAC7B,MAAM,IAAIG,KAAK,CAAC,sBAAsB,CAAC,CAAC;QAC1C,CAAC;QACDV,WAAW,CAACW,YAAY,CAACF,MAAM,CAAC,CAAC;QACjCN,WAAW,EAAE,CAAC;IAChB,CAAC,AAAC;IAEF,qBACE,KAACR,MAAM;QAACW,MAAM,EAAEA,MAAM;QAAEM,OAAO,EAAET,WAAW;QAAEU,UAAU,EAAE;YAAEC,QAAQ,EAAEV,YAAY;SAAE;kBAEjFJ,WAAW,KAAKO,SAAS,kBACxB;;8BACE,MAACf,GAAG;oBACFuB,EAAE,EAAE;wBACFC,OAAO,EAAE,MAAM;wBACfC,UAAU,EAAE,QAAQ;wBACpBC,YAAY,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;wBACzCC,aAAa,EAAE,CAACF,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;wBAC1CE,YAAY,EAAE,CAACH,KAAK,GAAK,CAAC,UAAU,EAAEA,KAAK,CAACI,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;qBAChE;;sCAED,MAAC9B,UAAU;4BAAC+B,OAAO,EAAC,IAAI;;gCAAEzB,WAAW,CAAC0B,IAAI;gCAAC,QAAM;;0BAAa;sCAC9D,MAACnC,KAAK;4BAACoC,SAAS,EAAC,KAAK;4BAACP,OAAO,EAAE,CAAC;4BAAEL,EAAE,EAAE;gCAAEa,UAAU,EAAE,MAAM;6BAAE;;8CAE3D,KAACnC,MAAM;oCAACoC,IAAI,EAAC,QAAQ;oCAACJ,OAAO,EAAC,WAAW;oCAACK,IAAI,EAAEhC,iBAAiB;8CAC9DE,WAAW,CAAC0B,IAAI,KAAK,KAAK,GAAG,KAAK,GAAG,OAAO;kCACtC;8CACT,KAACjC,MAAM;oCAACgC,OAAO,EAAC,UAAU;oCAACM,OAAO,EAAE5B,WAAW;8CAAE,QAEjD;kCAAS;;0BACH;;kBACJ;8BACN,KAACN,eAAe;oBAACmC,QAAQ,EAAExB,YAAY;oBAAEyB,aAAa,EAAEjC,WAAW,CAACiC,aAAa;kBAAI;;UACpF,AACJ;MACM,CACT;AACJ,CAAC,CAAC"}

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

@@ -21,7 +21,7 @@ import { PanelDrawer } from './PanelDrawer';
 describe('Panel Drawer', ()=>{
     const renderPanelDrawer = ()=>{
         const { addMockPlugin , pluginRegistryProps  } = mockPluginRegistryProps();
-        addMockPlugin('Panel', 'LineChart', FAKE_PANEL_PLUGIN);
+        addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);
         const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
         renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
             ...pluginRegistryProps,
@@ -45,10 +45,8 @@ describe('Panel Drawer', ()=>{
     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/);
+        act(()=>storeApi.getState().addPanel(0));
+        const nameInput = await screen.findByLabelText(/Name/);
         userEvent.type(nameInput, 'New Panel');
         userEvent.click(screen.getByText('Add'));
         // TODO: Assert drawer is closed?
@@ -59,8 +57,7 @@ describe('Panel Drawer', ()=>{
                 kind: 'Panel',
                 spec: {
                     display: {
-                        name: 'New Panel',
-                        description: ''
+                        name: 'New Panel'
                     },
                     plugin: {
                         kind: '',
@@ -73,11 +70,11 @@ describe('Panel Drawer', ()=>{
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel
-        act(()=>storeApi.getState().openPanelDrawer({
+        act(()=>storeApi.getState().editPanel({
                 groupIndex: 0,
-                panelKey: 'cpu'
+                itemIndex: 0
             }));
-        const nameInput = await screen.findByLabelText(/Panel Name/);
+        const nameInput = await screen.findByLabelText(/Name/);
         userEvent.clear(nameInput);
         userEvent.type(nameInput, 'cpu usage');
         userEvent.click(screen.getByText('Apply'));
@@ -87,8 +84,7 @@ describe('Panel Drawer', ()=>{
                 kind: 'Panel',
                 spec: {
                     display: {
-                        name: 'cpu usage',
-                        description: ''
+                        name: 'cpu usage'
                     },
                     plugin: {
                         kind: 'TimeSeriesChart',

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

@@ -1 +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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport {\n  createDashboardProviderSpy,\n  FAKE_PANEL_PLUGIN,\n  getTestDashboard,\n  mockPluginRegistryProps,\n  renderWithContext,\n} from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'LineChart', FAKE_PANEL_PLUGIN);\n\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n          <DashboardProviderSpy />\n          <PanelDrawer />\n        </DashboardProvider>\n      </PluginRegistry>\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 (i.e. no panel key)\n    act(() => storeApi.getState().openPanelDrawer({ groupIndex: 0 }));\n\n    const nameInput = await screen.findByLabelText(/Panel 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', description: '' },\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    act(() => storeApi.getState().openPanelDrawer({ groupIndex: 0, panelKey: 'cpu' }));\n\n    const nameInput = await screen.findByLabelText(/Panel 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', description: '' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openPanelDrawer","groupIndex","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","description","plugin","panelKey","clear","cpu"],"mappings":"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"}
+{"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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport {\n  createDashboardProviderSpy,\n  FAKE_PANEL_PLUGIN,\n  getTestDashboard,\n  mockPluginRegistryProps,\n  renderWithContext,\n} from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);\n\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n          <DashboardProviderSpy />\n          <PanelDrawer />\n        </DashboardProvider>\n      </PluginRegistry>\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 (i.e. no panel key)\n    act(() => storeApi.getState().addPanel(0));\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 edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    act(() => storeApi.getState().editPanel({ groupIndex: 0, itemIndex: 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":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","addPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","plugin","editPanel","groupIndex","itemIndex","clear","cpu"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { PanelEditorFormValues } from './panel-editor-model';
+import { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';
 export interface PanelEditorFormProps {
-    initialValues: PanelEditorFormValues;
-    onSubmit: (values: PanelEditorFormValues) => void;
+    initialValues: PanelEditorValues;
+    onSubmit: (values: PanelEditorValues) => void;
 }
 export declare function PanelEditorForm(props: PanelEditorFormProps): JSX.Element;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,qBAAqB,EAAqB,MAAM,sBAAsB,CAAC;AAIhF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA+E1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA4BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAGxF,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,eA+F1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}