@perses-dev/dashboards 0.39.0 → 0.40.1

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

@@ -1 +1 @@
-{"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 ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\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.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\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  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\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          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\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.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {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","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","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 ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\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.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\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  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\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          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\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.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {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","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

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

@@ -1 +1 @@
-{"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"}
+{"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,UAAU"}

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

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

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -10,105 +10,51 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { Stack, Box, Button, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Drawer } from '@perses-dev/components';
-import { useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';
+import { 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 = ()=>{
-        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();
-        setIsClosing(false);
-    };
     // Drawer is open if we have a model and we're not transitioning out
     const isOpen = panelEditor !== undefined && isClosing === false;
-    const handleSubmit = ()=>{
+    function handleSave(values) {
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
         if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
         setIsClosing(true);
+    }
+    const handleClose = ()=>{
+        setIsClosing(true);
+    };
+    // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
+    const handleExited = ()=>{
+        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        setIsClosing(false);
     };
-    const handleChange = useCallback((values)=>{
-        setValues(values);
-    }, []);
+    // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
+    // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
+    const handleClickOut = ()=>{
+    /* do nothing */ };
     return /*#__PURE__*/ _jsx(Drawer, {
         isOpen: isOpen,
-        onClose: handleClose,
+        onClose: handleClickOut,
         SlideProps: {
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: (theme)=>theme.spacing(1, 2),
-                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsxs(Typography, {
-                            variant: "h2",
-                            children: [
-                                panelEditor.mode,
-                                " Panel"
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    type: "submit",
-                                    variant: "contained",
-                                    onClick: handleSubmit,
-                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleClose,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(PanelEditorForm, {
-                    initialValues: panelEditor.initialValues,
-                    onChange: handleChange
-                })
-            ]
+        children: panelEditor && /*#__PURE__*/ _jsx(PanelEditorForm, {
+            initialAction: panelEditor.mode,
+            initialValues: panelEditor.initialValues,
+            onSave: handleSave,
+            onClose: handleClose
         })
     });
 };

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 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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"}
+{"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 { useState } from 'react';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues, usePanelEditor } from '../../context';\nimport { PanelEditorForm } 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\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  function handleSave(values: PanelEditorValues) {\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 handleClose = () => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = () => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} 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 && (\n        <PanelEditorForm\n          initialAction={panelEditor.mode}\n          initialValues={panelEditor.initialValues}\n          onSave={handleSave}\n          onClose={handleClose}\n        />\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAA4BC,cAAc,QAAQ,gBAAgB;AAClE,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGP,SAAS;IAE3C,oEAAoE;IACpE,MAAMQ,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,aAAaF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAaW;QACbT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAChB;QAAOO,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACF;YACCmB,eAAejB,YAAYkB;YAC3BC,eAAenB,YAAYmB;YAC3BC,QAAQf;YACRQ,SAASJ;;;AAKnB,EAAE"}

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

@@ -1,8 +1,11 @@
 /// <reference types="react" />
+import { Action } from '@perses-dev/plugin-system';
 import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
-    onChange: (values: PanelEditorValues) => void;
+    initialAction: Action;
+    onSave: (values: PanelEditorValues) => void;
+    onClose: () => 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":";AA8BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAIvF,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,eAqI1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAIL,MAAM,EAGP,MAAM,2BAA2B,CAAC;AAInC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAKvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuN1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}