@perses-dev/dashboards 0.21.1 → 0.22.0

package/dist/components/Panel/PanelHeader.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -17,6 +17,7 @@ import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
+import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
 export function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
@@ -26,9 +27,9 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
         actions = /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: "Edit",
+                    description: TOOLTIP_TEXT.editPanel,
                     children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": `edit panel ${title}`,
+                        "aria-label": ARIA_LABEL_TEXT.editPanel(title),
                         size: "small",
                         onClick: editHandlers.onEditPanelClick,
                         children: /*#__PURE__*/ _jsx(PencilIcon, {
@@ -37,9 +38,9 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
                     })
                 }),
                 /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: "Delete",
+                    description: TOOLTIP_TEXT.deletePanel,
                     children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": `delete panel ${title}`,
+                        "aria-label": ARIA_LABEL_TEXT.deletePanel(title),
                         size: "small",
                         onClick: editHandlers.onDeletePanelClick,
                         children: /*#__PURE__*/ _jsx(DeleteIcon, {
@@ -48,9 +49,9 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
                     })
                 }),
                 /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: "Drag and drop panel to reorganize",
+                    description: TOOLTIP_TEXT.movePanel,
                     children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": `move panel ${title}`,
+                        "aria-label": ARIA_LABEL_TEXT.movePanel(title),
                         size: "small",
                         children: /*#__PURE__*/ _jsx(DragIcon, {
                             className: "drag-handle",
@@ -70,7 +71,7 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
             description: description,
             enterDelay: 100,
             children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                "aria-label": "Panel Description",
+                "aria-label": "panel description",
                 size: "small",
                 children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
                     "aria-describedby": "info-tooltip",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description=\"Edit\">\n          <HeaderIconButton aria-label={`edit panel ${title}`} size=\"small\" onClick={editHandlers.onEditPanelClick}>\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description=\"Delete\">\n          <HeaderIconButton aria-label={`delete panel ${title}`} size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description=\"Drag and drop panel to reorganize\">\n          <HeaderIconButton aria-label={`move panel ${title}`} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\n      <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n        <HeaderIconButton aria-label=\"Panel Description\" size=\"small\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","onDeletePanelClick","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\n      <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n        <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","deletePanel","onDeletePanelClick","movePanel","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

package/dist/components/Panel/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-empty-function */ // Copyright 2022 The Perses Authors
+/* eslint-disable @typescript-eslint/no-empty-function */ // Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -65,6 +65,7 @@ import { PanelEditorForm } from './PanelEditorForm';
         SlideProps: {
             onExited: handleExited
         },
+        "data-testid": "panel-editor",
         children: panelEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsxs(Box, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// 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 { useCallback, useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues, useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';\nimport { PanelEditorForm, 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  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const [values, setValues] = useState<PanelEditorValues | undefined>(undefined);\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 = () => {\n    const isModified = JSON.stringify(panelEditor?.initialValues) !== JSON.stringify(values);\n    if (isModified) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          setIsClosing(true);\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      setIsClosing(true);\n    }\n  };\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 = () => {\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 || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  };\n\n  const handleChange: PanelEditorFormProps['onChange'] = useCallback((values) => {\n    setValues(values);\n  }, []);\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" onClick={handleSubmit}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm initialValues={panelEditor.initialValues} onChange={handleChange} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useCallback","useState","Stack","Box","Button","Typography","Drawer","useDiscardChangesConfirmationDialog","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","values","setValues","undefined","isClosing","setIsClosing","handleClose","isModified","JSON","stringify","initialValues","onDiscardChanges","onCancel","description","handleExited","close","isOpen","handleSubmit","Error","applyChanges","handleChange","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","mode","direction","marginLeft","type","onClick","color","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 2023 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 { useCallback, useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues, useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';\nimport { PanelEditorForm, 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  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const [values, setValues] = useState<PanelEditorValues | undefined>(undefined);\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 = () => {\n    const isModified = JSON.stringify(panelEditor?.initialValues) !== JSON.stringify(values);\n    if (isModified) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          setIsClosing(true);\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      setIsClosing(true);\n    }\n  };\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 = () => {\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 || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  };\n\n  const handleChange: PanelEditorFormProps['onChange'] = useCallback((values) => {\n    setValues(values);\n  }, []);\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" onClick={handleSubmit}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm initialValues={panelEditor.initialValues} onChange={handleChange} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useCallback","useState","Stack","Box","Button","Typography","Drawer","useDiscardChangesConfirmationDialog","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","values","setValues","undefined","isClosing","setIsClosing","handleClose","isModified","JSON","stringify","initialValues","onDiscardChanges","onCancel","description","handleExited","close","isOpen","handleSubmit","Error","applyChanges","handleChange","onClose","SlideProps","onExited","data-testid","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","mode","direction","marginLeft","type","onClick","color","onChange"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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 { useEffect, useState } from 'react';\nimport {\n  Box,\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  onChange: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onChange } = 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  useEffect(() => {\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onChange(values);\n  }, [name, description, groupId, kind, spec, onChange]);\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}\n    >\n      <Grid container spacing={2}>\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    </Box>\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":["useEffect","useState","Box","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onChange","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","plugin","handleGroupChange","e","target","values","panelGroup","component","id","panelEditorFormId","sx","flex","overflowY","padding","theme","spacing","container","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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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2023 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 { useEffect, useState } from 'react';\nimport {\n  Box,\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  onChange: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onChange } = 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  useEffect(() => {\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onChange(values);\n  }, [name, description, groupId, kind, spec, onChange]);\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}\n    >\n      <Grid container spacing={2}>\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    </Box>\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":["useEffect","useState","Box","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onChange","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","plugin","handleGroupChange","e","target","values","panelGroup","component","id","panelEditorFormId","sx","flex","overflowY","padding","theme","spacing","container","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.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec }: PanelEditorValues) {\n  const definition: PanelProps['definition'] = {\n    kind: 'Panel',\n    spec: {\n      display: {\n        name,\n        description: description === '' ? undefined : description,\n      },\n      plugin: {\n        kind,\n        spec,\n      },\n    },\n  };\n\n  if (kind === '') {\n    return null;\n  }\n\n  return (\n    <Box height={300}>\n      <Panel definition={definition} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","definition","display","undefined","plugin","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,EAAqB,EAAE;IACjF,MAAMC,UAAU,GAA6B;QAC3CF,IAAI,EAAE,OAAO;QACbC,IAAI,EAAE;YACJE,OAAO,EAAE;gBACPL,IAAI;gBACJC,WAAW,EAAEA,WAAW,KAAK,EAAE,GAAGK,SAAS,GAAGL,WAAW;aAC1D;YACDM,MAAM,EAAE;gBACNL,IAAI;gBACJC,IAAI;aACL;SACF;KACF,AAAC;IAEF,IAAID,IAAI,KAAK,EAAE,EAAE;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACW,MAAM,EAAE,GAAG;kBACd,cAAA,KAACV,KAAK;YAACM,UAAU,EAAEA,UAAU;UAAI;MAC7B,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 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';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec }: PanelEditorValues) {\n  const definition: PanelProps['definition'] = {\n    kind: 'Panel',\n    spec: {\n      display: {\n        name,\n        description: description === '' ? undefined : description,\n      },\n      plugin: {\n        kind,\n        spec,\n      },\n    },\n  };\n\n  if (kind === '') {\n    return null;\n  }\n\n  return (\n    <Box height={300}>\n      <Panel definition={definition} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","definition","display","undefined","plugin","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,EAAqB,EAAE;IACjF,MAAMC,UAAU,GAA6B;QAC3CF,IAAI,EAAE,OAAO;QACbC,IAAI,EAAE;YACJE,OAAO,EAAE;gBACPL,IAAI;gBACJC,WAAW,EAAEA,WAAW,KAAK,EAAE,GAAGK,SAAS,GAAGL,WAAW;aAC1D;YACDM,MAAM,EAAE;gBACNL,IAAI;gBACJC,IAAI;aACL;SACF;KACF,AAAC;IAEF,IAAID,IAAI,KAAK,EAAE,EAAE;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACW,MAAM,EAAE,GAAG;kBACd,cAAA,KAACV,KAAK;YAACM,UAAU,EAAEA,UAAU;UAAI;MAC7B,CACN;AACJ,CAAC"}

package/dist/components/PanelDrawer/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/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 './PanelDrawer';\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,eAAe,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/index.ts"],"sourcesContent":["// Copyright 2023 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 './PanelDrawer';\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,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,wBAAgB,gBAAgB,gBAsD/B"}
+{"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,wBAAgB,gBAAgB,gBAwD/B"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -62,6 +62,7 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
                     children: /*#__PURE__*/ _jsx(CloseIcon, {})
                 }),
                 /*#__PURE__*/ _jsx(DialogContent, {
+                    dividers: true,
                     sx: {
                         width: '500px'
                     },
@@ -79,6 +80,7 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
                             children: panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'
                         }),
                         /*#__PURE__*/ _jsx(Button, {
+                            variant: "outlined",
                             onClick: panelGroupEditor.close,
                             children: "Cancel"
                         })

package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\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 close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['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 (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button onClick={panelGroupEditor.close}>Cancel</Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","width","initialValues","onSubmit","variant","type","form"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\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 close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['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 (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form"],"mappings":"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"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { PanelGroupDialog } from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n  const renderDialog = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardResource: getTestDashboard(), isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelGroupDialog />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for a new panel group\n    act(() => storeApi.getState().openAddPanelGroup());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel Group');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = Object.values(storeApi.getState().panelGroups);\n    expect(panelGroups).toContainEqual({\n      id: expect.any(Number),\n      title: 'New Panel Group',\n      isCollapsed: false,\n      itemLayouts: expect.any(Array),\n      itemPanelKeys: expect.any(Object),\n    });\n  });\n\n  it('should edit existing panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for an existing panel group\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Missing test group');\n    }\n    act(() => storeApi.getState().openEditPanelGroup(group.id));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'New Name');\n    userEvent.click(screen.getByText('Apply'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = storeApi.getState().panelGroups;\n    expect(panelGroups).toMatchObject({\n      [group.id]: {\n        id: group.id,\n        title: 'New Name',\n        isCollapsed: false,\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","DashboardProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","PanelGroupDialog","describe","renderDialog","store","DashboardProviderSpy","initialState","dashboardResource","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanelGroup","nameInput","findByLabelText","type","click","getByText","panelGroups","Object","values","expect","toContainEqual","id","any","Number","title","isCollapsed","itemLayouts","Array","itemPanelKeys","group","find","openEditPanelGroup","clear","toMatchObject"],"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,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,GAAG,QAAQ,sBAAsB,CAAC;AAC3C,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,0BAA0B,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,YAAY,CAAC;AAC7F,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAEtDC,QAAQ,CAAC,iBAAiB,EAAE,IAAM;IAChC,MAAMC,YAAY,GAAG,IAAM;QACzB,MAAM,EAAEC,KAAK,CAAA,EAAEC,oBAAoB,CAAA,EAAE,GAAGP,0BAA0B,EAAE,AAAC;QAErEE,iBAAiB,eACf,MAACH,iBAAiB;YAACS,YAAY,EAAE;gBAAEC,iBAAiB,EAAER,gBAAgB,EAAE;gBAAES,UAAU,EAAE,IAAI;aAAE;;8BAC1F,KAACH,oBAAoB,KAAG;8BACxB,KAACJ,gBAAgB,KAAG;;UACF,CACrB,CAAC;QAEF,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,CAAA,EAAE,GAAGN,KAAK,AAAC;QAClC,IAAIM,QAAQ,KAAKC,SAAS,EAAE;YAC1B,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC,CAAC;QAC7E,CAAC;QAED,OAAOF,QAAQ,CAAC;IAClB,CAAC,AAAC;IAEFG,EAAE,CAAC,4BAA4B,EAAE,UAAY;QAC3C,MAAMH,QAAQ,GAAGP,YAAY,EAAE,AAAC;QAEhC,wCAAwC;QACxCP,GAAG,CAAC,IAAMc,QAAQ,CAACI,QAAQ,EAAE,CAACC,iBAAiB,EAAE,CAAC,CAAC;QAEnD,MAAMC,SAAS,GAAG,MAAMtB,MAAM,CAACuB,eAAe,QAAQ,AAAC;QACvDtB,SAAS,CAACuB,IAAI,CAACF,SAAS,EAAE,iBAAiB,CAAC,CAAC;QAC7CrB,SAAS,CAACwB,KAAK,CAACzB,MAAM,CAAC0B,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QAEzC,wEAAwE;QACxE,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACI,QAAQ,EAAE,CAACO,WAAW,CAAC,AAAC;QACnEG,MAAM,CAACH,WAAW,CAAC,CAACI,cAAc,CAAC;YACjCC,EAAE,EAAEF,MAAM,CAACG,GAAG,CAACC,MAAM,CAAC;YACtBC,KAAK,EAAE,iBAAiB;YACxBC,WAAW,EAAE,KAAK;YAClBC,WAAW,EAAEP,MAAM,CAACG,GAAG,CAACK,KAAK,CAAC;YAC9BC,aAAa,EAAET,MAAM,CAACG,GAAG,CAACL,MAAM,CAAC;SAClC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHT,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjD,MAAMH,QAAQ,GAAGP,YAAY,EAAE,AAAC;QAEhC,8CAA8C;QAC9C,MAAM+B,KAAK,GAAGZ,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACI,QAAQ,EAAE,CAACO,WAAW,CAAC,CAACc,IAAI,CAAC,CAACD,KAAK,GAAKA,KAAK,CAACL,KAAK,KAAK,WAAW,CAAC,AAAC;QAC1G,IAAIK,KAAK,KAAKvB,SAAS,EAAE;YACvB,MAAM,IAAIC,KAAK,CAAC,oBAAoB,CAAC,CAAC;QACxC,CAAC;QACDhB,GAAG,CAAC,IAAMc,QAAQ,CAACI,QAAQ,EAAE,CAACsB,kBAAkB,CAACF,KAAK,CAACR,EAAE,CAAC,CAAC,CAAC;QAE5D,MAAMV,SAAS,GAAG,MAAMtB,MAAM,CAACuB,eAAe,QAAQ,AAAC;QACvDtB,SAAS,CAAC0C,KAAK,CAACrB,SAAS,CAAC,CAAC;QAC3BrB,SAAS,CAACuB,IAAI,CAACF,SAAS,EAAE,UAAU,CAAC,CAAC;QACtCrB,SAAS,CAACwB,KAAK,CAACzB,MAAM,CAAC0B,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAE3C,wEAAwE;QACxE,MAAMC,WAAW,GAAGX,QAAQ,CAACI,QAAQ,EAAE,CAACO,WAAW,AAAC;QACpDG,MAAM,CAACH,WAAW,CAAC,CAACiB,aAAa,CAAC;YAChC,CAACJ,KAAK,CAACR,EAAE,CAAC,EAAE;gBACVA,EAAE,EAAEQ,KAAK,CAACR,EAAE;gBACZG,KAAK,EAAE,UAAU;gBACjBC,WAAW,EAAE,KAAK;aACnB;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { PanelGroupDialog } from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n  const renderDialog = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardResource: getTestDashboard(), isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelGroupDialog />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for a new panel group\n    act(() => storeApi.getState().openAddPanelGroup());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel Group');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = Object.values(storeApi.getState().panelGroups);\n    expect(panelGroups).toContainEqual({\n      id: expect.any(Number),\n      title: 'New Panel Group',\n      isCollapsed: false,\n      itemLayouts: expect.any(Array),\n      itemPanelKeys: expect.any(Object),\n    });\n  });\n\n  it('should edit existing panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for an existing panel group\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Missing test group');\n    }\n    act(() => storeApi.getState().openEditPanelGroup(group.id));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'New Name');\n    userEvent.click(screen.getByText('Apply'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = storeApi.getState().panelGroups;\n    expect(panelGroups).toMatchObject({\n      [group.id]: {\n        id: group.id,\n        title: 'New Name',\n        isCollapsed: false,\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","DashboardProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","PanelGroupDialog","describe","renderDialog","store","DashboardProviderSpy","initialState","dashboardResource","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanelGroup","nameInput","findByLabelText","type","click","getByText","panelGroups","Object","values","expect","toContainEqual","id","any","Number","title","isCollapsed","itemLayouts","Array","itemPanelKeys","group","find","openEditPanelGroup","clear","toMatchObject"],"mappings":"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"}

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.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 { FormControl, InputLabel, TextField, Select, SelectProps, MenuItem } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\ntype CollapsedState = 'Open' | 'Closed';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n\n  const handleCollapsedChange: SelectProps<CollapsedState>['onChange'] = (e) => {\n    const next = e.target.value;\n    setIsCollapsed(next === 'Closed');\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField required label=\"Name\" variant=\"outlined\" value={title} onChange={(e) => setTitle(e.target.value)} />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <InputLabel id=\"select-collapse-state\">Collapse State</InputLabel>\n        <Select<CollapsedState>\n          required\n          displayEmpty\n          labelId=\"select-collapse-state\"\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={handleCollapsedChange}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </Select>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","InputLabel","TextField","Select","MenuItem","PanelGroupEditorForm","props","initialValues","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","handleCollapsedChange","e","next","target","value","handleSubmit","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","onChange","displayEmpty","labelId","size"],"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,SAA2BA,QAAQ,QAAQ,OAAO,CAAC;AACnD,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAeC,QAAQ,QAAQ,eAAe,CAAC;AAUlG,OAAO,SAASC,oBAAoB,CAACC,KAAgC,EAAE;IACrE,MAAM,EAAEC,aAAa,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGF,KAAK,AAAC;IAE1C,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAACQ,aAAa,CAACE,KAAK,CAAC,AAAC;IACxD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGb,QAAQ,CAACQ,aAAa,CAACI,WAAW,CAAC,AAAC;IAE1E,MAAME,qBAAqB,GAA4C,CAACC,CAAC,GAAK;QAC5E,MAAMC,IAAI,GAAGD,CAAC,CAACE,MAAM,CAACC,KAAK,AAAC;QAC5BL,cAAc,CAACG,IAAI,KAAK,QAAQ,CAAC,CAAC;IACpC,CAAC,AAAC;IAEF,MAAMG,YAAY,GAAqB,CAACJ,CAAC,GAAK;QAC5CA,CAAC,CAACK,cAAc,EAAE,CAAC;QACnBX,QAAQ,CAAC;YAAEC,KAAK;YAAEE,WAAW;SAAE,CAAC,CAAC;IACnC,CAAC,AAAC;IAEF,qBACE,MAACS,MAAI;QAACC,EAAE,EAAEC,sBAAsB;QAAEd,QAAQ,EAAEU,YAAY;;0BACtD,KAAClB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;0BACpC,cAAA,KAACtB,SAAS;oBAACuB,QAAQ;oBAACC,KAAK,EAAC,MAAM;oBAACC,OAAO,EAAC,UAAU;oBAACV,KAAK,EAAER,KAAK;oBAAEmB,QAAQ,EAAE,CAACd,CAAC,GAAKJ,QAAQ,CAACI,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;kBAAI;cACnG;0BACd,MAACjB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;;kCACpC,KAACvB,UAAU;wBAACoB,EAAE,EAAC,uBAAuB;kCAAC,gBAAc;sBAAa;kCAClE,MAAClB,MAAM;wBACLsB,QAAQ;wBACRI,YAAY;wBACZC,OAAO,EAAC,uBAAuB;wBAC/BJ,KAAK,EAAC,gBAAgB;wBACtBK,IAAI,EAAC,OAAO;wBACZd,KAAK,EAAEN,WAAW,GAAG,QAAQ,GAAG,MAAM;wBACtCiB,QAAQ,EAAEf,qBAAqB;;0CAE/B,KAACT,QAAQ;gCAACa,KAAK,EAAC,MAAM;0CAAC,MAAI;8BAAW;0CACtC,KAACb,QAAQ;gCAACa,KAAK,EAAC,QAAQ;0CAAC,QAAM;8BAAW;;sBACnC;;cACG;;MACT,CACP;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAMK,sBAAsB,GAAG,yBAAyB,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"sourcesContent":["// Copyright 2023 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 { FormControl, InputLabel, TextField, Select, SelectProps, MenuItem } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\ntype CollapsedState = 'Open' | 'Closed';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n\n  const handleCollapsedChange: SelectProps<CollapsedState>['onChange'] = (e) => {\n    const next = e.target.value;\n    setIsCollapsed(next === 'Closed');\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField required label=\"Name\" variant=\"outlined\" value={title} onChange={(e) => setTitle(e.target.value)} />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <InputLabel id=\"select-collapse-state\">Collapse State</InputLabel>\n        <Select<CollapsedState>\n          required\n          displayEmpty\n          labelId=\"select-collapse-state\"\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={handleCollapsedChange}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </Select>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","InputLabel","TextField","Select","MenuItem","PanelGroupEditorForm","props","initialValues","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","handleCollapsedChange","e","next","target","value","handleSubmit","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","onChange","displayEmpty","labelId","size"],"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,SAA2BA,QAAQ,QAAQ,OAAO,CAAC;AACnD,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAeC,QAAQ,QAAQ,eAAe,CAAC;AAUlG,OAAO,SAASC,oBAAoB,CAACC,KAAgC,EAAE;IACrE,MAAM,EAAEC,aAAa,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGF,KAAK,AAAC;IAE1C,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAACQ,aAAa,CAACE,KAAK,CAAC,AAAC;IACxD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGb,QAAQ,CAACQ,aAAa,CAACI,WAAW,CAAC,AAAC;IAE1E,MAAME,qBAAqB,GAA4C,CAACC,CAAC,GAAK;QAC5E,MAAMC,IAAI,GAAGD,CAAC,CAACE,MAAM,CAACC,KAAK,AAAC;QAC5BL,cAAc,CAACG,IAAI,KAAK,QAAQ,CAAC,CAAC;IACpC,CAAC,AAAC;IAEF,MAAMG,YAAY,GAAqB,CAACJ,CAAC,GAAK;QAC5CA,CAAC,CAACK,cAAc,EAAE,CAAC;QACnBX,QAAQ,CAAC;YAAEC,KAAK;YAAEE,WAAW;SAAE,CAAC,CAAC;IACnC,CAAC,AAAC;IAEF,qBACE,MAACS,MAAI;QAACC,EAAE,EAAEC,sBAAsB;QAAEd,QAAQ,EAAEU,YAAY;;0BACtD,KAAClB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;0BACpC,cAAA,KAACtB,SAAS;oBAACuB,QAAQ;oBAACC,KAAK,EAAC,MAAM;oBAACC,OAAO,EAAC,UAAU;oBAACV,KAAK,EAAER,KAAK;oBAAEmB,QAAQ,EAAE,CAACd,CAAC,GAAKJ,QAAQ,CAACI,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;kBAAI;cACnG;0BACd,MAACjB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;;kCACpC,KAACvB,UAAU;wBAACoB,EAAE,EAAC,uBAAuB;kCAAC,gBAAc;sBAAa;kCAClE,MAAClB,MAAM;wBACLsB,QAAQ;wBACRI,YAAY;wBACZC,OAAO,EAAC,uBAAuB;wBAC/BJ,KAAK,EAAC,gBAAgB;wBACtBK,IAAI,EAAC,OAAO;wBACZd,KAAK,EAAEN,WAAW,GAAG,QAAQ,GAAG,MAAM;wBACtCiB,QAAQ,EAAEf,qBAAqB;;0CAE/B,KAACT,QAAQ;gCAACa,KAAK,EAAC,MAAM;0CAAC,MAAI;8BAAW;0CACtC,KAACb,QAAQ;gCAACa,KAAK,EAAC,QAAQ;0CAAC,QAAM;8BAAW;;sBACnC;;cACG;;MACT,CACP;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAMK,sBAAsB,GAAG,yBAAyB,CAAC"}

package/dist/components/PanelGroupDialog/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/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 './PanelGroupDialog';\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,oBAAoB,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/index.ts"],"sourcesContent":["// Copyright 2023 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 './PanelGroupDialog';\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,oBAAoB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAuB,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzE,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAIF,UAAU,sBAAsB;IAI9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,eAyBrE"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAoC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOtF,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,eA2BrE"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -12,11 +12,12 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import RefreshIcon from 'mdi-material-ui/Refresh';
-import { IconButton, styled } from '@mui/material';
-import { DateTimeRangePicker } from '@perses-dev/components';
+import { DateTimeRangePicker, InfoTooltip } from '@perses-dev/components';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { isDurationString } from '@perses-dev/core';
+import { TOOLTIP_TEXT } from '../../constants';
 import { useDefaultTimeRange } from '../../context';
+import { ToolbarIconButton } from '../ToolbarIconButton';
 export const TIME_OPTIONS = [
     {
         value: {
@@ -77,7 +78,7 @@ const DEFAULT_HEIGHT = '34px';
 export function TimeRangeControls({ heightPx  }) {
     const { timeRange , setTimeRange , refresh  } = useTimeRange();
     const defaultTimeRange = useDefaultTimeRange();
-    // Convert height as a number to height as a string, then use this value for styling
+    // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time shortcut if one does not match duration from dashboard JSON
     if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
@@ -98,22 +99,19 @@ export function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ _jsx(RefreshIconButton, {
-                "aria-label": "Refresh Dashboard",
-                onClick: refresh,
-                sx: {
-                    height
-                },
-                children: /*#__PURE__*/ _jsx(RefreshIcon, {})
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.refreshDashboard,
+                children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                    "aria-label": TOOLTIP_TEXT.refreshDashboard,
+                    onClick: refresh,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ _jsx(RefreshIcon, {})
+                })
             })
         ]
     });
 }
-const RefreshIconButton = styled(IconButton)(({ theme  })=>({
-        border: `1px solid ${theme.palette.grey[300]}`,
-        borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(0.5),
-        color: theme.palette.grey[900]
-    }));
 
 //# sourceMappingURL=TimeRangeControls.js.map