@perses-dev/dashboards 0.20.0 → 0.21.1

package/dist/components/Panel/PanelHeader.js

@@ -10,9 +10,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CardHeader, Typography, Stack, IconButton, styled } from '@mui/material';
-import { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';
+import { InfoTooltip, combineSx } from '@perses-dev/components';
 import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
@@ -20,49 +20,62 @@ import DragIcon from 'mdi-material-ui/DragVertical';
 export function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    let action = undefined;
+    let actions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons
-        action = /*#__PURE__*/ _jsxs(Stack, {
-            direction: "row",
-            spacing: 0.5,
-            alignItems: "center",
+        actions = /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                /*#__PURE__*/ _jsx(HeaderIconButton, {
-                    "aria-label": `edit panel ${title}`,
-                    size: "small",
-                    onClick: editHandlers.onEditPanelClick,
-                    children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                /*#__PURE__*/ _jsx(InfoTooltip, {
+                    description: "Edit",
+                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                        "aria-label": `edit panel ${title}`,
+                        size: "small",
+                        onClick: editHandlers.onEditPanelClick,
+                        children: /*#__PURE__*/ _jsx(PencilIcon, {
+                            fontSize: "inherit"
+                        })
+                    })
                 }),
-                /*#__PURE__*/ _jsx(HeaderIconButton, {
-                    "aria-label": `delete panel ${title}`,
-                    size: "small",
-                    onClick: editHandlers.onDeletePanelClick,
-                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                /*#__PURE__*/ _jsx(InfoTooltip, {
+                    description: "Delete",
+                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                        "aria-label": `delete panel ${title}`,
+                        size: "small",
+                        onClick: editHandlers.onDeletePanelClick,
+                        children: /*#__PURE__*/ _jsx(DeleteIcon, {
+                            fontSize: "inherit"
+                        })
+                    })
                 }),
-                /*#__PURE__*/ _jsx(HeaderIconButton, {
-                    "aria-label": `move panel ${title}`,
-                    size: "small",
-                    children: /*#__PURE__*/ _jsx(DragIcon, {
-                        className: "drag-handle",
-                        sx: {
-                            cursor: 'grab'
-                        }
+                /*#__PURE__*/ _jsx(InfoTooltip, {
+                    description: "Drag and drop panel to reorganize",
+                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                        "aria-label": `move panel ${title}`,
+                        size: "small",
+                        children: /*#__PURE__*/ _jsx(DragIcon, {
+                            className: "drag-handle",
+                            sx: {
+                                cursor: 'grab'
+                            },
+                            fontSize: "inherit"
+                        })
                     })
                 })
             ]
         });
     } else if (description !== undefined && isHovered) {
         // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-        action = /*#__PURE__*/ _jsx(InfoTooltip, {
+        actions = /*#__PURE__*/ _jsx(InfoTooltip, {
             id: descriptionTooltipId,
             description: description,
-            placement: TooltipPlacement.Bottom,
+            enterDelay: 100,
             children: /*#__PURE__*/ _jsx(HeaderIconButton, {
                 "aria-label": "Panel Description",
+                size: "small",
                 children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
                     "aria-describedby": "info-tooltip",
                     "aria-hidden": false,
+                    fontSize: "inherit",
                     sx: {
                         color: (theme)=>theme.palette.grey[700]
                     }
@@ -90,12 +103,24 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
             },
             children: title
         }),
-        action: action,
+        action: /*#__PURE__*/ _jsx(HeaderActionWrapper, {
+            direction: "row",
+            spacing: 0.25,
+            alignItems: "center",
+            children: actions
+        }),
         sx: combineSx((theme)=>({
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
                     overflow: 'hidden'
+                },
+                '.MuiCardHeader-action': {
+                    // Overriding the negative margins from MUI's defaults, so we
+                    // can vertically center the icons. Moving these values to a wrapper
+                    // inside the action in `HeaderActionWrapper` below.
+                    // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
+                    margin: 'auto'
                 }
             }), sx),
         ...rest
@@ -105,5 +130,13 @@ const HeaderIconButton = styled(IconButton)(({ theme  })=>({
         borderRadius: theme.shape.borderRadius,
         padding: '4px'
     }));
+const HeaderActionWrapper = styled(Stack)(()=>({
+        // Adding back the negative margins from MUI's defaults for actions, so we
+        // avoid increasing the header size when actions are present while also being
+        // able to vertically center the actions.
+        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
+        marginTop: -4,
+        marginBottom: -4
+    }));
 
 //# sourceMappingURL=PanelHeader.js.map

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, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let action: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    action = (\n      <Stack direction=\"row\" spacing={0.5} alignItems=\"center\">\n        <HeaderIconButton aria-label={`edit panel ${title}`} size=\"small\" onClick={editHandlers.onEditPanelClick}>\n          <PencilIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`delete panel ${title}`} size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n          <DeleteIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`move panel ${title}`} size=\"small\">\n          <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n        </HeaderIconButton>\n      </Stack>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    action = (\n      <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n        <HeaderIconButton aria-label=\"Panel Description\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={action}\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","spacing","alignItems","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","padding","borderBottom","divider","borderRadius","shape"],"mappings":"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"}
+{"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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"}

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

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

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+/* eslint-disable @typescript-eslint/no-empty-function */ // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -11,18 +11,36 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Stack, Box, Button, Typography } from '@mui/material';
 import { Drawer } from '@perses-dev/components';
-import { usePanelEditor } from '../../context';
-import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
+import { useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';
+import { PanelEditorForm } from './PanelEditorForm';
 /**
  * The Add/Edit panel drawer for editing a panel's options.
  */ export const PanelDrawer = ()=>{
     const panelEditor = usePanelEditor();
+    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = useDiscardChangesConfirmationDialog();
+    const [values, setValues] = useState(undefined);
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
-    const handleClose = ()=>setIsClosing(true);
+    const handleClose = ()=>{
+        const isModified = JSON.stringify(panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.initialValues) !== JSON.stringify(values);
+        if (isModified) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    setIsClosing(true);
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            setIsClosing(true);
+        }
+    };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out
     const handleExited = ()=>{
         panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
@@ -30,14 +48,17 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
     };
     // Drawer is open if we have a model and we're not transitioning out
     const isOpen = panelEditor !== undefined && isClosing === false;
-    const handleSubmit = (values)=>{
+    const handleSubmit = ()=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
-        if (panelEditor === undefined) {
+        if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
-        handleClose();
+        setIsClosing(true);
     };
+    const handleChange = useCallback((values)=>{
+        setValues(values);
+    }, []);
     return /*#__PURE__*/ _jsx(Drawer, {
         isOpen: isOpen,
         onClose: handleClose,
@@ -69,7 +90,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                                 /*#__PURE__*/ _jsx(Button, {
                                     type: "submit",
                                     variant: "contained",
-                                    form: panelEditorFormId,
+                                    onClick: handleSubmit,
                                     children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
@@ -83,8 +104,8 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                     ]
                 }),
                 /*#__PURE__*/ _jsx(PanelEditorForm, {
-                    onSubmit: handleSubmit,
-                    initialValues: panelEditor.initialValues
+                    initialValues: panelEditor.initialValues,
+                    onChange: handleChange
                 })
             ]
         })

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

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

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

@@ -2,7 +2,7 @@
 import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
-    onSubmit: (values: PanelEditorValues) => void;
+    onChange: (values: PanelEditorValues) => void;
 }
 export declare function PanelEditorForm(props: PanelEditorFormProps): JSX.Element;
 /**

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

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

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
@@ -19,7 +19,7 @@ import { useListPanelGroups } from '../../context';
 import { PanelPreview } from './PanelPreview';
 export function PanelEditorForm(props) {
     var ref;
-    const { initialValues , onSubmit  } = props;
+    const { initialValues , onChange  } = props;
     const panelGroups = useListPanelGroups();
     const [name, setName] = useState(initialValues.name);
     const [description, setDescription] = useState(initialValues.description);
@@ -46,8 +46,7 @@ export function PanelEditorForm(props) {
         }
         setGroupId(value);
     };
-    const handleSubmit = (e)=>{
-        e.preventDefault();
+    useEffect(()=>{
         const values = {
             name,
             description,
@@ -55,14 +54,20 @@ export function PanelEditorForm(props) {
             kind,
             spec
         };
-        onSubmit(values);
-    };
+        onChange(values);
+    }, [
+        name,
+        description,
+        groupId,
+        kind,
+        spec,
+        onChange
+    ]);
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
     /*#__PURE__*/ _jsx(Box, {
         component: "form",
         id: panelEditorFormId,
-        onSubmit: handleSubmit,
         sx: {
             flex: 1,
             overflowY: 'scroll',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEventHandler, useState } from 'react';\nimport {\n  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  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      onSubmit={handleSubmit}\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":["useState","Box","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","values","panelGroup","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 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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"}

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { TimeOption } from '@perses-dev/components';
 export declare const TIME_OPTIONS: TimeOption[];
-export declare function TimeRangeControls(): JSX.Element;
+interface TimeRangeControlsProps {
+    heightPx?: number;
+}
+export declare function TimeRangeControls({ heightPx }: TimeRangeControlsProps): JSX.Element;
+export {};
 //# sourceMappingURL=TimeRangeControls.d.ts.map

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;AAEF,wBAAgB,iBAAiB,gBAsBhC"}
+{"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"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -73,9 +73,12 @@ export const TIME_OPTIONS = [
         display: 'Last 14 days'
     }
 ];
-export function TimeRangeControls() {
+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
+    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)) {
         if (isDurationString(defaultTimeRange.pastDuration)) {
@@ -92,11 +95,15 @@ export function TimeRangeControls() {
             /*#__PURE__*/ _jsx(DateTimeRangePicker, {
                 timeOptions: TIME_OPTIONS,
                 value: timeRange,
-                onChange: setTimeRange
+                onChange: setTimeRange,
+                height: height
             }),
             /*#__PURE__*/ _jsx(RefreshIconButton, {
                 "aria-label": "Refresh Dashboard",
                 onClick: refresh,
+                sx: {
+                    height
+                },
                 children: /*#__PURE__*/ _jsx(RefreshIcon, {})
             })
         ]

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { IconButton, styled } from '@mui/material';\nimport { DateTimeRangePicker, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { useDefaultTimeRange } from '../../context';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} />\n      <RefreshIconButton aria-label=\"Refresh Dashboard\" onClick={refresh}>\n        <RefreshIcon />\n      </RefreshIconButton>\n    </>\n  );\n}\n\nconst RefreshIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  color: theme.palette.grey[900],\n}));\n"],"names":["RefreshIcon","IconButton","styled","DateTimeRangePicker","useTimeRange","isDurationString","useDefaultTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","refresh","defaultTimeRange","some","option","push","timeOptions","onChange","RefreshIconButton","aria-label","onClick","theme","border","palette","grey","borderRadius","shape","padding","spacing","color"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { IconButton, styled } from '@mui/material';\nimport { DateTimeRangePicker, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { useDefaultTimeRange } from '../../context';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // Height of the controls in pixels.\n  // The controls look best at heights >= 28 pixels.\n  // You can use values less than 28, but it won't look great.\n  heightPx?: number;\n}\n\nexport function TimeRangeControls({ heightPx }: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // Convert height as a number to height as a string, then use this value for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} height={height} />\n      <RefreshIconButton aria-label=\"Refresh Dashboard\" onClick={refresh} sx={{ height }}>\n        <RefreshIcon />\n      </RefreshIconButton>\n    </>\n  );\n}\n\nconst RefreshIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  color: theme.palette.grey[900],\n}));\n"],"names":["RefreshIcon","IconButton","styled","DateTimeRangePicker","useTimeRange","isDurationString","useDefaultTimeRange","TIME_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","timeRange","setTimeRange","refresh","defaultTimeRange","height","undefined","some","option","push","timeOptions","onChange","RefreshIconButton","aria-label","onClick","sx","theme","border","palette","grey","borderRadius","shape","padding","spacing","color"],"mappings":"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"}

package/dist/components/Variables/Variable.js

@@ -164,9 +164,10 @@ function ListVariable({ name  }) {
     });
 }
 function TextVariable({ name  }) {
-    const { state  } = useTemplateVariable(name);
     var ref;
-    const [tempValue, setTempValue] = useState((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    const { state , definition  } = useTemplateVariable(name);
+    var ref1;
+    const [tempValue, setTempValue] = useState((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
     const { setVariableValue  } = useTemplateVariableActions();
     useEffect(()=>{
         var ref;
@@ -174,12 +175,13 @@ function TextVariable({ name  }) {
     }, [
         state === null || state === void 0 ? void 0 : state.value
     ]);
+    var ref2;
     return /*#__PURE__*/ _jsx(TextField, {
         value: tempValue,
         onChange: (e)=>setTempValue(e.target.value),
         onBlur: ()=>setVariableValue(name, tempValue),
         placeholder: name,
-        label: name
+        label: (ref2 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : name
     });
 }