@perses-dev/dashboards 0.10.0 → 0.12.0

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 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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"}
+{"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/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { useEditMode, PanelGroupItemId, usePanelActions } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  panelGroupItemId: PanelGroupItemId;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, panelGroupItemId, ...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 { openEditPanel, openDeletePanelDialog } = usePanelActions(panelGroupItemId);\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: '32px',\n            }}\n          >\n            <Typography variant=\"subtitle1\" whiteSpace=\"nowrap\" overflow=\"hidden\" textOverflow=\"ellipsis\">\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                    sx={{ cursor: 'pointer', color: (theme) => theme.palette.grey[700] }}\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={openEditPanel}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"delete panel\" size=\"small\" onClick={openDeletePanelDialog}>\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          paddingX: (theme) => theme.spacing(panelPadding),\n          paddingY: '4px',\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","useEditMode","usePanelActions","PanelContent","Panel","props","definition","panelGroupItemId","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","openEditPanel","openDeletePanelDialog","sx","display","flexFlow","variant","onMouseEnter","onMouseLeave","title","alignItems","minHeight","whiteSpace","overflow","textOverflow","spec","name","marginLeft","description","id","placement","Bottom","aria-describedby","aria-hidden","cursor","color","theme","palette","grey","direction","spacing","aria-label","size","onClick","className","paddingX","paddingY","borderBottom","divider","position","flexGrow","padding","FallbackComponent","panelPluginKind","plugin","kind","borderRadius","shape"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import 'intersection-observer';
+export {};
 //# sourceMappingURL=Panel.test.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":"AAcA,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":""}

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

@@ -12,7 +12,6 @@
 // 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 userEvent from '@testing-library/user-event';
 import { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';
@@ -35,8 +34,11 @@ describe('Panel', ()=>{
                     }
                 }
             },
-            groupIndex: 0,
-            itemIndex: 0
+            // TODO: This is coupled to ID generation which is not good and the tests will probably fail
+            panelGroupItemId: {
+                panelGroupId: 0,
+                panelGroupItemLayoutId: ''
+            }
         };
     };
     // Helper to render the panel with some context set

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 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"}
+{"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 { 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      // TODO: This is coupled to ID generation which is not good and the tests will probably fail\n      panelGroupItemId: { panelGroupId: 0, panelGroupItemLayoutId: '' },\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","panelGroupItemId","panelGroupId","panelGroupItemLayoutId","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,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;YACD,4FAA4F;YAC5FK,gBAAgB,EAAE;gBAAEC,YAAY,EAAE,CAAC;gBAAEC,sBAAsB,EAAE,EAAE;aAAE;SAClE,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGpB,uBAAuB,EAAE,AAAC;QACzEmB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAElB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACH,cAAc;YAAE,GAAGwB,mBAAmB;sBACrC,cAAA,KAACjB,iBAAiB;gBAACkB,YAAY,EAAE;oBAAEC,aAAa,EAAEpB,gBAAgB,EAAE,CAACO,IAAI;oBAAES,UAAU;iBAAE;0BACrF,cAAA,KAACd,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFiB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMpB,MAAM,CAAC2B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC3B,MAAM,CAAC4B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG7B,MAAM,CAAC8B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD7B,SAAS,CAAC8B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B7B,MAAM,CAACgC,cAAc,CAAC,aAAa,CAAC,CAAC;QACrChC,MAAM,CAACgC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpChC,MAAM,CAACgC,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

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

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

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

package/dist/components/Panel/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './Panel';
+export * from './DeletePanelDialog';
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"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';\nexport * from './DeletePanelDialog';\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;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -14,12 +14,12 @@ 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 { usePanels } from '../../context';
+import { usePanelEditor } from '../../context';
 import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
 /**
  * The Add/Edit panel drawer for editing a panel's options.
  */ export const PanelDrawer = ()=>{
-    const { panelEditor  } = usePanels();
+    const panelEditor = usePanelEditor();
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
     const handleClose = ()=>setIsClosing(true);

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 { 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":"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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 { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              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","usePanelEditor","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":"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"}

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

@@ -44,8 +44,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().addPanel(0));
+        // Open the drawer for a new panel
+        act(()=>storeApi.getState().openAddPanel());
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.type(nameInput, 'New Panel');
         userEvent.click(screen.getByText('Add'));
@@ -70,9 +70,17 @@ describe('Panel Drawer', ()=>{
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel
-        act(()=>storeApi.getState().editPanel({
-                groupIndex: 0,
-                itemIndex: 0
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Test group not found');
+        }
+        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
+        if (layout === undefined) {
+            throw new Error('Test panel not found');
+        }
+        act(()=>storeApi.getState().openEditPanel({
+                panelGroupId: group.id,
+                panelGroupItemLayoutId: layout[0]
             }));
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.clear(nameInput);

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', '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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"}
+{"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\n    act(() => storeApi.getState().openAddPanel());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Test group not found');\n    }\n    const layout = Object.entries(group.itemPanelKeys).find(([, panelKey]) => panelKey === 'cpu');\n    if (layout === undefined) {\n      throw new Error('Test panel not found');\n    }\n    act(() => storeApi.getState().openEditPanel({ panelGroupId: group.id, panelGroupItemLayoutId: layout[0] }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["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","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","plugin","group","Object","values","panelGroups","find","title","layout","entries","itemPanelKeys","panelKey","openEditPanel","panelGroupId","id","panelGroupItemLayoutId","clear","cpu"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';
+import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
     onSubmit: (values: PanelEditorValues) => void;

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":";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"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA4BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAqG1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -15,15 +15,15 @@ import { useState } from 'react';
 import { FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
-import { useLayouts } from '../../context';
+import { useListPanelGroups } from '../../context';
 import { PanelPreview } from './PanelPreview';
 export function PanelEditorForm(props) {
     var ref;
     const { initialValues , onSubmit  } = props;
-    const { layouts  } = useLayouts();
+    const panelGroups = useListPanelGroups();
     const [name, setName] = useState(initialValues.name);
     const [description, setDescription] = useState(initialValues.description);
-    const [groupIndex, setGroupIndex] = useState(initialValues.groupIndex);
+    const [groupId, setGroupId] = useState(initialValues.groupId);
     const [kind, setKind] = useState(initialValues.kind);
     const [spec, setSpec] = useState(initialValues.spec);
     // Use common plugin editor logic even though we've split the inputs up in this form
@@ -44,35 +44,38 @@ export function PanelEditorForm(props) {
         if (typeof value === 'string') {
             return;
         }
-        setGroupIndex(value);
+        setGroupId(value);
     };
     const handleSubmit = (e)=>{
         e.preventDefault();
-        if (spec === undefined) {
-            throw new Error('Cannot submit without a plugin spec');
-        }
         const values = {
             name,
             description,
-            groupIndex,
+            groupId,
             kind,
             spec
         };
         onSubmit(values);
     };
     var _title, ref1;
-    return /*#__PURE__*/ _jsx("form", {
+    return(// Grid maxHeight allows user to scroll inside Drawer to see all content
+    /*#__PURE__*/ _jsx("form", {
         id: panelEditorFormId,
         onSubmit: handleSubmit,
         children: /*#__PURE__*/ _jsxs(Grid, {
             container: true,
             spacing: 2,
+            sx: {
+                overflowY: 'scroll',
+                maxHeight: '90vh'
+            },
             children: [
                 /*#__PURE__*/ _jsx(Grid, {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ _jsx(TextField, {
                         required: true,
+                        fullWidth: true,
                         label: "Name",
                         value: name,
                         variant: "outlined",
@@ -83,6 +86,7 @@ export function PanelEditorForm(props) {
                     item: true,
                     xs: 4,
                     children: /*#__PURE__*/ _jsxs(FormControl, {
+                        fullWidth: true,
                         children: [
                             /*#__PURE__*/ _jsx(InputLabel, {
                                 id: "select-group",
@@ -92,12 +96,12 @@ export function PanelEditorForm(props) {
                                 required: true,
                                 labelId: "select-group",
                                 label: "Group",
-                                value: groupIndex !== null && groupIndex !== void 0 ? groupIndex : 0,
+                                value: groupId,
                                 onChange: handleGroupChange,
-                                children: layouts.map((layout, index)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                        value: index,
-                                        children: (_title = layout.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
-                                    }, index))
+                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: panelGroup.id,
+                                        children: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, panelGroup.id))
                             })
                         ]
                     })
@@ -106,6 +110,7 @@ export function PanelEditorForm(props) {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ _jsx(TextField, {
+                        fullWidth: true,
                         label: "Description",
                         value: description,
                         variant: "outlined",
@@ -117,6 +122,7 @@ export function PanelEditorForm(props) {
                     xs: 4,
                     children: [
                         /*#__PURE__*/ _jsxs(FormControl, {
+                            fullWidth: true,
                             disabled: pluginEditor.isLoading,
                             error: pluginEditor.error !== null,
                             children: [
@@ -155,7 +161,7 @@ export function PanelEditorForm(props) {
                                 name: name,
                                 description: description,
                                 spec: spec,
-                                groupIndex: groupIndex
+                                groupId: groupId
                             })
                         })
                     ]
@@ -175,7 +181,7 @@ export function PanelEditorForm(props) {
                 })
             ]
         })
-    });
+    }));
 }
 /**
  * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 { FormEventHandler, useState } from 'react';\nimport {\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useLayouts } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const { layouts } = useLayouts();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupIndex, setGroupIndex] = useState(initialValues.groupIndex);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupIndex(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    if (spec === undefined) {\n      throw new Error('Cannot submit without a plugin spec');\n    }\n    const values: PanelEditorValues = { name, description, groupIndex, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    <form id={panelEditorFormId} onSubmit={handleSubmit}>\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField required label=\"Name\" value={name} variant=\"outlined\" onChange={(e) => setName(e.target.value)} />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupIndex ?? 0} onChange={handleGroupChange}>\n              {layouts.map((layout, index) => (\n                <MenuItem key={index} value={index}>\n                  {layout.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupIndex={groupIndex} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useLayouts","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","layouts","name","setName","description","setDescription","groupIndex","setGroupIndex","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","undefined","Error","values","layout","form","id","panelEditorFormId","container","spacing","item","xs","required","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 { FormEventHandler, useState } from 'react';\nimport {\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <form id={panelEditorFormId} onSubmit={handleSubmit}>\n      <Grid container spacing={2} sx={{ overflowY: 'scroll', maxHeight: '90vh' }}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupId={groupId} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","values","panelGroup","form","id","panelEditorFormId","container","spacing","sx","overflowY","maxHeight","item","xs","required","fullWidth","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';
-export declare function PanelPreview({ name, description, kind, spec, groupIndex }: PanelEditorValues): JSX.Element;
+import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
+export declare function PanelPreview({ name, description, kind, spec, groupId }: PanelEditorValues): JSX.Element | null;
 //# sourceMappingURL=PanelPreview.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAGxF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,iBAAiB,eAwB5F"}
+{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,iBAAiB,sBA4BzF"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { Panel } from '../Panel';
-export function PanelPreview({ name , description , kind , spec , groupIndex  }) {
+export function PanelPreview({ name , description , kind , spec , groupId  }) {
     const previewValues = {
         definition: {
             kind: 'Panel',
@@ -28,9 +28,15 @@ export function PanelPreview({ name , description , kind , spec , groupIndex  })
                 }
             }
         },
-        groupIndex,
-        itemIndex: 0
+        // TODO: this shouldn't be necessary for preview
+        panelGroupItemId: {
+            panelGroupId: groupId,
+            panelGroupItemLayoutId: ''
+        }
     };
+    if (!kind) {
+        return null;
+    }
     return /*#__PURE__*/ _jsx(Box, {
         height: 300,
         children: /*#__PURE__*/ _jsx(Panel, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { Box } from '@mui/material';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec, groupIndex }: PanelEditorValues) {\n  const previewValues: PanelProps = {\n    definition: {\n      kind: 'Panel',\n      spec: {\n        display: {\n          name,\n          description,\n        },\n        plugin: {\n          kind,\n          spec,\n        },\n      },\n    },\n    groupIndex,\n    itemIndex: 0, // TODO: what should itemIndex be?\n  };\n\n  return (\n    <Box height={300}>\n      <Panel {...previewValues} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","groupIndex","previewValues","definition","display","plugin","itemIndex","height"],"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,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,KAAK,QAAoB,UAAU,CAAC;AAE7C,OAAO,SAASC,YAAY,CAAC,EAAEC,IAAI,CAAA,EAAEC,WAAW,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAEC,UAAU,CAAA,EAAqB,EAAE;IAC7F,MAAMC,aAAa,GAAe;QAChCC,UAAU,EAAE;YACVJ,IAAI,EAAE,OAAO;YACbC,IAAI,EAAE;gBACJI,OAAO,EAAE;oBACPP,IAAI;oBACJC,WAAW;iBACZ;gBACDO,MAAM,EAAE;oBACNN,IAAI;oBACJC,IAAI;iBACL;aACF;SACF;QACDC,UAAU;QACVK,SAAS,EAAE,CAAC;KACb,AAAC;IAEF,qBACE,KAACZ,GAAG;QAACa,MAAM,EAAE,GAAG;kBACd,cAAA,KAACZ,KAAK;YAAE,GAAGO,aAAa;UAAI;MACxB,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { Box } from '@mui/material';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec, groupId }: PanelEditorValues) {\n  const previewValues: PanelProps = {\n    definition: {\n      kind: 'Panel',\n      spec: {\n        display: {\n          name,\n          description,\n        },\n        plugin: {\n          kind,\n          spec,\n        },\n      },\n    },\n    // TODO: this shouldn't be necessary for preview\n    panelGroupItemId: { panelGroupId: groupId, panelGroupItemLayoutId: '' },\n  };\n\n  if (!kind) {\n    return null;\n  }\n\n  return (\n    <Box height={300}>\n      <Panel {...previewValues} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","groupId","previewValues","definition","display","plugin","panelGroupItemId","panelGroupId","panelGroupItemLayoutId","height"],"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,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,KAAK,QAAoB,UAAU,CAAC;AAE7C,OAAO,SAASC,YAAY,CAAC,EAAEC,IAAI,CAAA,EAAEC,WAAW,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAEC,OAAO,CAAA,EAAqB,EAAE;IAC1F,MAAMC,aAAa,GAAe;QAChCC,UAAU,EAAE;YACVJ,IAAI,EAAE,OAAO;YACbC,IAAI,EAAE;gBACJI,OAAO,EAAE;oBACPP,IAAI;oBACJC,WAAW;iBACZ;gBACDO,MAAM,EAAE;oBACNN,IAAI;oBACJC,IAAI;iBACL;aACF;SACF;QACD,gDAAgD;QAChDM,gBAAgB,EAAE;YAAEC,YAAY,EAAEN,OAAO;YAAEO,sBAAsB,EAAE,EAAE;SAAE;KACxE,AAAC;IAEF,IAAI,CAACT,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACe,MAAM,EAAE,GAAG;kBACd,cAAA,KAACd,KAAK;YAAE,GAAGO,aAAa;UAAI;MACxB,CACN;AACJ,CAAC"}

package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-declare const DeletePanelGroupDialog: () => JSX.Element;
-export default DeletePanelGroupDialog;
+export declare const DeletePanelGroupDialog: () => JSX.Element;
 //# sourceMappingURL=DeletePanelGroupDialog.d.ts.map

package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":";AAkBA,QAAA,MAAM,sBAAsB,mBA4C3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":";AAkBA,eAAO,MAAM,sBAAsB,mBA0ClC,CAAC"}

package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js

@@ -13,20 +13,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
-import { usePanelGroupDialog, useLayouts } from '../../context';
-const DeletePanelGroupDialog = ()=>{
-    var ref;
-    const { layouts , deletePanelGroup  } = useLayouts();
-    const { deletePanelGroupDialog , closeDeletePanelGroupDialog  } = usePanelGroupDialog();
-    const groupIndex = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.groupIndex;
+import { useDeletePanelGroupDialog } from '../../context';
+export const DeletePanelGroupDialog = ()=>{
+    const { deletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = useDeletePanelGroupDialog();
+    const panelGroupId = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupId;
     const handleDelete = (e)=>{
         e.preventDefault();
-        if (groupIndex == undefined) {
+        if (panelGroupId == undefined) {
             throw new Error('group index is undefined');
         }
-        deletePanelGroup(groupIndex);
+        deletePanelGroup(panelGroupId);
         closeDeletePanelGroupDialog();
     };
+    var ref;
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
@@ -46,11 +45,15 @@ const DeletePanelGroupDialog = ()=>{
             /*#__PURE__*/ _jsxs("form", {
                 onSubmit: handleDelete,
                 children: [
-                    /*#__PURE__*/ _jsx(DialogContent, {
+                    /*#__PURE__*/ _jsxs(DialogContent, {
                         sx: {
                             width: '500px'
                         },
-                        children: `Are you sure you want to delete ${groupIndex !== undefined && layouts[groupIndex] !== undefined ? (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.title : 'panel group'}? This will delete all the panels within the group.`
+                        children: [
+                            "Are you sure you want to delete ",
+                            (ref = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupName) !== null && ref !== void 0 ? ref : 'panel group',
+                            "? This will delete all the panels within the group."
+                        ]
                     }),
                     /*#__PURE__*/ _jsxs(DialogActions, {
                         children: [
@@ -70,6 +73,5 @@ const DeletePanelGroupDialog = ()=>{
         ]
     });
 };
-export default DeletePanelGroupDialog;
 
 //# sourceMappingURL=DeletePanelGroupDialog.js.map