@perses-dev/dashboards 0.10.0 → 0.12.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/DeletePanelGroupDialog.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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { usePanelGroupDialog, useLayouts } from '../../context';\n\nconst DeletePanelGroupDialog = () => {\n  const { layouts, deletePanelGroup } = useLayouts();\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog } = usePanelGroupDialog();\n\n  const groupIndex = deletePanelGroupDialog?.groupIndex;\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    if (groupIndex == undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(groupIndex);\n    closeDeletePanelGroupDialog();\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      <form onSubmit={handleDelete}>\n        <DialogContent sx={{ width: '500px' }}>\n          {`Are you sure you want to delete ${\n            groupIndex !== undefined && layouts[groupIndex] !== undefined ? layouts[groupIndex]?.title : 'panel group'\n          }? This will delete all the panels within the group.`}\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button onClick={() => closeDeletePanelGroupDialog()}>Cancel</Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n\nexport default DeletePanelGroupDialog;\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","usePanelGroupDialog","useLayouts","DeletePanelGroupDialog","layouts","deletePanelGroup","deletePanelGroupDialog","closeDeletePanelGroupDialog","groupIndex","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","width","title","variant","type"],"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;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,mBAAmB,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAEhE,MAAMC,sBAAsB,GAAG,IAAM;QAgCuCC,GAAmB;IA/B7F,MAAM,EAAEA,OAAO,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGH,UAAU,EAAE,AAAC;IACnD,MAAM,EAAEI,sBAAsB,CAAA,EAAEC,2BAA2B,CAAA,EAAE,GAAGN,mBAAmB,EAAE,AAAC;IAEtF,MAAMO,UAAU,GAAGF,sBAAsB,aAAtBA,sBAAsB,WAAY,GAAlCA,KAAAA,CAAkC,GAAlCA,sBAAsB,CAAEE,UAAU,AAAC;IAEtD,MAAMC,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,IAAIH,UAAU,IAAII,SAAS,EAAE;YAC3B,MAAM,IAAIC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QACDR,gBAAgB,CAACG,UAAU,CAAC,CAAC;QAC7BD,2BAA2B,EAAE,CAAC;IAChC,CAAC,AAAC;IAEF,qBACE,MAACZ,MAAM;QAACmB,IAAI,EAAER,sBAAsB,KAAKM,SAAS;;0BAChD,KAAChB,WAAW;0BAAC,oBAAkB;cAAc;0BAC7C,KAACF,UAAU;gBACTqB,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMT,2BAA2B,EAAE;gBAC5CU,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACrB,SAAS,KAAG;cACF;0BACb,MAACuB,MAAI;gBAACC,QAAQ,EAAEf,YAAY;;kCAC1B,KAACZ,aAAa;wBAACoB,EAAE,EAAE;4BAAEQ,KAAK,EAAE,OAAO;yBAAE;kCAClC,CAAC,gCAAgC,EAChCjB,UAAU,KAAKI,SAAS,IAAIR,OAAO,CAACI,UAAU,CAAC,KAAKI,SAAS,GAAGR,CAAAA,GAAmB,GAAnBA,OAAO,CAACI,UAAU,CAAC,cAAnBJ,GAAmB,WAAO,GAA1BA,KAAAA,CAA0B,GAA1BA,GAAmB,CAAEsB,KAAK,GAAG,aAAa,CAC3G,mDAAmD,CAAC;sBACvC;kCAChB,MAAC5B,aAAa;;0CACZ,KAACC,MAAM;gCAAC4B,OAAO,EAAC,WAAW;gCAACC,IAAI,EAAC,QAAQ;0CAAC,QAE1C;8BAAS;0CACT,KAAC7B,MAAM;gCAACiB,OAAO,EAAE,IAAMT,2BAA2B,EAAE;0CAAE,QAAM;8BAAS;;sBACvD;;cACX;;MACA,CACT;AACJ,CAAC,AAAC;AAEF,eAAeJ,sBAAsB,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/DeletePanelGroupDialog.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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelGroupDialog } from '../../context';\n\nexport const DeletePanelGroupDialog = () => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    if (panelGroupId == undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      <form onSubmit={handleDelete}>\n        <DialogContent sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button onClick={() => closeDeletePanelGroupDialog()}>Cancel</Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelGroupDialog","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","width","panelGroupName","variant","type"],"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;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,yBAAyB,QAAQ,eAAe,CAAC;AAE1D,OAAO,MAAMC,sBAAsB,GAAG,IAAM;IAC1C,MAAM,EAAEC,sBAAsB,CAAA,EAAEC,2BAA2B,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGJ,yBAAyB,EAAE,AAAC;IAE9G,MAAMK,YAAY,GAAGH,sBAAsB,aAAtBA,sBAAsB,WAAc,GAApCA,KAAAA,CAAoC,GAApCA,sBAAsB,CAAEG,YAAY,AAAC;IAE1D,MAAMC,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,IAAIH,YAAY,IAAII,SAAS,EAAE;YAC7B,MAAM,IAAIC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QACDN,gBAAgB,CAACC,YAAY,CAAC,CAAC;QAC/BF,2BAA2B,EAAE,CAAC;IAChC,CAAC,AAAC;QAkBuCD,GAAsC;IAhB/E,qBACE,MAACR,MAAM;QAACiB,IAAI,EAAET,sBAAsB,KAAKO,SAAS;;0BAChD,KAACd,WAAW;0BAAC,oBAAkB;cAAc;0BAC7C,KAACF,UAAU;gBACTmB,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMV,2BAA2B,EAAE;gBAC5CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACnB,SAAS,KAAG;cACF;0BACb,MAACqB,MAAI;gBAACC,QAAQ,EAAEf,YAAY;;kCAC1B,MAACV,aAAa;wBAACkB,EAAE,EAAE;4BAAEQ,KAAK,EAAE,OAAO;yBAAE;;4BAAE,kCACL;4BAACpB,CAAAA,GAAsC,GAAtCA,sBAAsB,aAAtBA,sBAAsB,WAAgB,GAAtCA,KAAAA,CAAsC,GAAtCA,sBAAsB,CAAEqB,cAAc,cAAtCrB,GAAsC,cAAtCA,GAAsC,GAAI,aAAa;4BAAC,qDAE3F;;sBAAgB;kCAChB,MAACL,aAAa;;0CACZ,KAACC,MAAM;gCAAC0B,OAAO,EAAC,WAAW;gCAACC,IAAI,EAAC,QAAQ;0CAAC,QAE1C;8BAAS;0CACT,KAAC3B,MAAM;gCAACe,OAAO,EAAE,IAAMV,2BAA2B,EAAE;0CAAE,QAAM;8BAAS;;sBACvD;;cACX;;MACA,CACT;AACJ,CAAC,CAAC"}

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-declare const PanelGroupDialog: () => JSX.Element;
-export default PanelGroupDialog;
+/**
+ * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.
+ */
+export declare function PanelGroupDialog(): JSX.Element;
 //# sourceMappingURL=PanelGroupDialog.d.ts.map

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

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

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -10,122 +10,83 @@
 // 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 { useState } from 'react';
-import { IconButton, Dialog, DialogTitle, DialogContent, FormControl, InputLabel, TextField, Stack, Box, DialogActions, Button, Select, MenuItem } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
-import { usePanelGroupDialog, useLayouts } from '../../context';
-const PanelGroupDialog = ()=>{
-    var ref, ref1;
-    const { layouts , updatePanelGroup  } = useLayouts();
-    const { panelGroupDialog , closePanelGroupDialog  } = usePanelGroupDialog();
-    const groupIndex = panelGroupDialog === null || panelGroupDialog === void 0 ? void 0 : panelGroupDialog.groupIndex;
-    const isEditingPanelGroup = groupIndex !== undefined;
-    const [isCollapsed, setIsCollapsed] = useState(isEditingPanelGroup && ((ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.isCollapsed));
-    const [name, setName] = useState(isEditingPanelGroup ? (ref1 = layouts[groupIndex]) === null || ref1 === void 0 ? void 0 : ref1.title : '');
-    const handleSubmit = (e)=>{
-        var ref;
-        e.preventDefault();
-        var ref1;
-        const newGroup = {
-            isCollapsed,
-            title: name !== null && name !== void 0 ? name : '',
-            items: groupIndex === undefined ? [] : (ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items) !== null && ref1 !== void 0 ? ref1 : []
-        };
-        updatePanelGroup(newGroup, groupIndex);
-        closePanelGroupDialog();
+import { useState } from 'react';
+import { usePanelGroupEditor } from '../../context';
+import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditorForm';
+/**
+ * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.
+ */ export function PanelGroupDialog() {
+    const panelGroupEditor = usePanelGroupEditor();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = useState(false);
+    const handleClose = ()=>setIsClosing(true);
+    // Don't call close on the store until the Dialog has completely transitioned out
+    const handleExited = ()=>{
+        panelGroupEditor === null || panelGroupEditor === void 0 ? void 0 : panelGroupEditor.close();
+        setIsClosing(false);
     };
-    const handleSelectCollapsedStateChange = (e)=>{
-        const isCollapsed = e.target.value === 'Close';
-        setIsCollapsed(isCollapsed);
+    // Dialog is open if we have a model and we're not transitioning out
+    const isOpen = panelGroupEditor !== undefined && isClosing === false;
+    const handleSubmit = (values)=>{
+        // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
+        if (panelGroupEditor === undefined) {
+            throw new Error('Cannot apply changes');
+        }
+        panelGroupEditor.applyChanges(values);
+        handleClose();
     };
-    return /*#__PURE__*/ _jsxs(Dialog, {
-        open: panelGroupDialog !== undefined,
-        children: [
-            /*#__PURE__*/ _jsx(DialogTitle, {
-                children: "Panel Group"
-            }),
-            /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ _jsx(CloseIcon, {})
-            }),
-            /*#__PURE__*/ _jsxs("form", {
-                onSubmit: handleSubmit,
-                children: [
-                    /*#__PURE__*/ _jsx(DialogContent, {
-                        sx: {
-                            width: '500px'
-                        },
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 2,
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(TextField, {
-                                        required: true,
-                                        label: "Name",
-                                        variant: "outlined",
-                                        value: name,
-                                        onChange: (e)=>setName(e.target.value)
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsxs(Box, {
-                                    sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        width: '100%',
-                                        justifyContent: 'space-between'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(InputLabel, {
-                                            children: "Collapse State"
-                                        }),
-                                        /*#__PURE__*/ _jsxs(Select, {
-                                            required: true,
-                                            displayEmpty: true,
-                                            labelId: "select-collapse-state",
-                                            size: "small",
-                                            value: isCollapsed ? 'Close' : 'Open',
-                                            onChange: handleSelectCollapsedStateChange,
-                                            children: [
-                                                /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: 'Open',
-                                                    children: "Open"
-                                                }, 'open'),
-                                                /*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: 'Close',
-                                                    children: "Close"
-                                                }, 'close')
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "contained",
-                                type: "submit",
-                                children: isEditingPanelGroup ? 'Apply' : 'Add'
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                onClick: ()=>closePanelGroupDialog(),
-                                children: "Cancel"
-                            })
-                        ]
+    return /*#__PURE__*/ _jsx(Dialog, {
+        open: isOpen,
+        TransitionProps: {
+            onExited: handleExited
+        },
+        children: panelGroupEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(DialogTitle, {
+                    children: [
+                        panelGroupEditor.mode,
+                        " Panel Group"
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(IconButton, {
+                    "aria-label": "Close",
+                    onClick: panelGroupEditor.close,
+                    sx: (theme)=>({
+                            position: 'absolute',
+                            top: theme.spacing(0.5),
+                            right: theme.spacing(0.5)
+                        }),
+                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(DialogContent, {
+                    sx: {
+                        width: '500px'
+                    },
+                    children: /*#__PURE__*/ _jsx(PanelGroupEditorForm, {
+                        initialValues: panelGroupEditor.initialValues,
+                        onSubmit: handleSubmit
                     })
-                ]
-            })
-        ]
+                }),
+                /*#__PURE__*/ _jsxs(DialogActions, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "contained",
+                            type: "submit",
+                            form: panelGroupEditorFormId,
+                            children: panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            onClick: panelGroupEditor.close,
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
     });
-};
-export default PanelGroupDialog;
+}
 
 //# sourceMappingURL=PanelGroupDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport {\n  IconButton,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  FormControl,\n  InputLabel,\n  TextField,\n  Stack,\n  Box,\n  DialogActions,\n  Button,\n  Select,\n  SelectChangeEvent,\n  MenuItem,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { usePanelGroupDialog, useLayouts } from '../../context';\nimport { PanelGroupDefinition } from '../../context/DashboardProvider/layout-slice';\n\nconst PanelGroupDialog = () => {\n  const { layouts, updatePanelGroup } = useLayouts();\n  const { panelGroupDialog, closePanelGroupDialog } = usePanelGroupDialog();\n\n  const groupIndex = panelGroupDialog?.groupIndex;\n\n  const isEditingPanelGroup = groupIndex !== undefined;\n\n  const [isCollapsed, setIsCollapsed] = useState(isEditingPanelGroup && layouts[groupIndex]?.isCollapsed);\n  const [name, setName] = useState(isEditingPanelGroup ? layouts[groupIndex]?.title : '');\n\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    const newGroup: Omit<PanelGroupDefinition, 'id'> = {\n      isCollapsed,\n      title: name ?? '',\n      items: groupIndex === undefined ? [] : layouts[groupIndex]?.items ?? [],\n    };\n    updatePanelGroup(newGroup, groupIndex);\n    closePanelGroupDialog();\n  };\n\n  const handleSelectCollapsedStateChange = (e: SelectChangeEvent<string>) => {\n    const isCollapsed = e.target.value === 'Close';\n    setIsCollapsed(isCollapsed);\n  };\n\n  return (\n    <Dialog open={panelGroupDialog !== undefined}>\n      <DialogTitle>Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closePanelGroupDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      <form onSubmit={handleSubmit}>\n        <DialogContent sx={{ width: '500px' }}>\n          <Stack spacing={2}>\n            <FormControl>\n              <TextField\n                required\n                label=\"Name\"\n                variant=\"outlined\"\n                value={name}\n                onChange={(e) => setName(e.target.value)}\n              />\n            </FormControl>\n            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n              <InputLabel>Collapse State</InputLabel>\n              <Select\n                required\n                displayEmpty\n                labelId=\"select-collapse-state\"\n                size=\"small\"\n                value={isCollapsed ? 'Close' : 'Open'}\n                onChange={handleSelectCollapsedStateChange}\n              >\n                <MenuItem key={'open'} value={'Open'}>\n                  Open\n                </MenuItem>\n                <MenuItem key={'close'} value={'Close'}>\n                  Close\n                </MenuItem>\n              </Select>\n            </Box>\n          </Stack>\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            {isEditingPanelGroup ? 'Apply' : 'Add'}\n          </Button>\n          <Button onClick={() => closePanelGroupDialog()}>Cancel</Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n\nexport default PanelGroupDialog;\n"],"names":["useState","IconButton","Dialog","DialogTitle","DialogContent","FormControl","InputLabel","TextField","Stack","Box","DialogActions","Button","Select","MenuItem","CloseIcon","usePanelGroupDialog","useLayouts","PanelGroupDialog","layouts","updatePanelGroup","panelGroupDialog","closePanelGroupDialog","groupIndex","isEditingPanelGroup","undefined","isCollapsed","setIsCollapsed","name","setName","title","handleSubmit","e","preventDefault","newGroup","items","handleSelectCollapsedStateChange","target","value","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","width","required","label","variant","onChange","display","alignItems","justifyContent","displayEmpty","labelId","size","type"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button onClick={panelGroupEditor.close}>Cancel</Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","width","initialValues","onSubmit","variant","type","form"],"mappings":"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"}

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

@@ -16,8 +16,7 @@ import userEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
 import { DashboardProvider } from '../../context';
 import { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';
-import testDashboard from '../../test/testDashboard';
-import PanelGroupDialog from './PanelGroupDialog';
+import { PanelGroupDialog } from './PanelGroupDialog';
 describe('Add Panel Group', ()=>{
     const renderDialog = ()=>{
         const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
@@ -40,33 +39,40 @@ describe('Add Panel Group', ()=>{
     it('should add new panel group', async ()=>{
         const storeApi = renderDialog();
         // Open the dialog for a new panel group
-        act(()=>storeApi.getState().openPanelGroupDialog());
+        act(()=>storeApi.getState().openAddPanelGroup());
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.type(nameInput, 'New Panel Group');
         userEvent.click(screen.getByText('Add'));
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toContainEqual({
-            id: 3,
+        // TODO: Figure out how to test this without coupling to the store state
+        const panelGroups = Object.values(storeApi.getState().panelGroups);
+        expect(panelGroups).toContainEqual({
+            id: expect.any(Number),
             title: 'New Panel Group',
             isCollapsed: false,
-            items: []
+            itemLayouts: expect.any(Array),
+            itemPanelKeys: expect.any(Object)
         });
     });
     it('should edit existing panel group', async ()=>{
-        var ref;
         const storeApi = renderDialog();
         // Open the dialog for an existing panel group
-        act(()=>storeApi.getState().openPanelGroupDialog(0));
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Missing test group');
+        }
+        act(()=>storeApi.getState().openEditPanelGroup(group.id));
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.clear(nameInput);
         userEvent.type(nameInput, 'New Name');
         userEvent.click(screen.getByText('Apply'));
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toContainEqual({
-            id: 0,
-            title: 'New Name',
-            isCollapsed: false,
-            items: (ref = testDashboard.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
+        // TODO: Figure out how to test this without coupling to the store state
+        const panelGroups = storeApi.getState().panelGroups;
+        expect(panelGroups).toMatchObject({
+            [group.id]: {
+                id: group.id,
+                title: 'New Name',
+                isCollapsed: false
+            }
         });
     });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport PanelGroupDialog from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n  const renderDialog = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelGroupDialog />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for a new panel group\n    act(() => storeApi.getState().openPanelGroupDialog());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel Group');\n    userEvent.click(screen.getByText('Add'));\n\n    const layouts = storeApi.getState().layouts;\n    expect(layouts).toContainEqual({\n      id: 3,\n      title: 'New Panel Group',\n      isCollapsed: false,\n      items: [],\n    });\n  });\n\n  it('should edit existing panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for an existing panel group\n    act(() => storeApi.getState().openPanelGroupDialog(0));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'New Name');\n    userEvent.click(screen.getByText('Apply'));\n\n    const layouts = storeApi.getState().layouts;\n    expect(layouts).toContainEqual({\n      id: 0,\n      title: 'New Name',\n      isCollapsed: false,\n      items: testDashboard.spec.layouts[0]?.spec.items,\n    });\n  });\n});\n"],"names":["screen","userEvent","act","DashboardProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","testDashboard","PanelGroupDialog","describe","renderDialog","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openPanelGroupDialog","nameInput","findByLabelText","type","click","getByText","layouts","expect","toContainEqual","id","title","isCollapsed","items","clear"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { PanelGroupDialog } from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n  const renderDialog = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelGroupDialog />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for a new panel group\n    act(() => storeApi.getState().openAddPanelGroup());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel Group');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = Object.values(storeApi.getState().panelGroups);\n    expect(panelGroups).toContainEqual({\n      id: expect.any(Number),\n      title: 'New Panel Group',\n      isCollapsed: false,\n      itemLayouts: expect.any(Array),\n      itemPanelKeys: expect.any(Object),\n    });\n  });\n\n  it('should edit existing panel group', async () => {\n    const storeApi = renderDialog();\n\n    // Open the dialog for an existing panel group\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Missing test group');\n    }\n    act(() => storeApi.getState().openEditPanelGroup(group.id));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'New Name');\n    userEvent.click(screen.getByText('Apply'));\n\n    // TODO: Figure out how to test this without coupling to the store state\n    const panelGroups = storeApi.getState().panelGroups;\n    expect(panelGroups).toMatchObject({\n      [group.id]: {\n        id: group.id,\n        title: 'New Name',\n        isCollapsed: false,\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","DashboardProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","PanelGroupDialog","describe","renderDialog","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanelGroup","nameInput","findByLabelText","type","click","getByText","panelGroups","Object","values","expect","toContainEqual","id","any","Number","title","isCollapsed","itemLayouts","Array","itemPanelKeys","group","find","openEditPanelGroup","clear","toMatchObject"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PanelGroupEditorValues } from '../../context';
+export interface PanelGroupEditorFormProps {
+    initialValues: PanelGroupEditorValues;
+    onSubmit: (next: PanelGroupEditorValues) => void;
+}
+export declare function PanelGroupEditorForm(props: PanelGroupEditorFormProps): JSX.Element;
+/**
+ * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.
+ */
+export declare const panelGroupEditorFormId = "panel-group-editor-form";
+//# sourceMappingURL=PanelGroupEditorForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGroupEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,sBAAsB,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsCpE;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,4BAA4B,CAAC"}

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -0,0 +1,82 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useState } from 'react';
+import { FormControl, InputLabel, TextField, Select, MenuItem } from '@mui/material';
+export function PanelGroupEditorForm(props) {
+    const { initialValues , onSubmit  } = props;
+    const [title, setTitle] = useState(initialValues.title);
+    const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);
+    const handleCollapsedChange = (e)=>{
+        const next = e.target.value;
+        setIsCollapsed(next === 'Closed');
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        onSubmit({
+            title,
+            isCollapsed
+        });
+    };
+    return /*#__PURE__*/ _jsxs("form", {
+        id: panelGroupEditorFormId,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ _jsx(FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    required: true,
+                    label: "Name",
+                    variant: "outlined",
+                    value: title,
+                    onChange: (e)=>setTitle(e.target.value)
+                })
+            }),
+            /*#__PURE__*/ _jsxs(FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "select-collapse-state",
+                        children: "Collapse State"
+                    }),
+                    /*#__PURE__*/ _jsxs(Select, {
+                        required: true,
+                        displayEmpty: true,
+                        labelId: "select-collapse-state",
+                        label: "Collapse State",
+                        size: "small",
+                        value: isCollapsed ? 'Closed' : 'Open',
+                        onChange: handleCollapsedChange,
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "Open",
+                                children: "Open"
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "Closed",
+                                children: "Closed"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.
+ */ export const panelGroupEditorFormId = 'panel-group-editor-form';
+
+//# sourceMappingURL=PanelGroupEditorForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEventHandler, useState } from 'react';\nimport { FormControl, InputLabel, TextField, Select, SelectProps, MenuItem } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\ntype CollapsedState = 'Open' | 'Closed';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n\n  const handleCollapsedChange: SelectProps<CollapsedState>['onChange'] = (e) => {\n    const next = e.target.value;\n    setIsCollapsed(next === 'Closed');\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField required label=\"Name\" variant=\"outlined\" value={title} onChange={(e) => setTitle(e.target.value)} />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <InputLabel id=\"select-collapse-state\">Collapse State</InputLabel>\n        <Select<CollapsedState>\n          required\n          displayEmpty\n          labelId=\"select-collapse-state\"\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={handleCollapsedChange}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </Select>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","InputLabel","TextField","Select","MenuItem","PanelGroupEditorForm","props","initialValues","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","handleCollapsedChange","e","next","target","value","handleSubmit","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","onChange","displayEmpty","labelId","size"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAA2BA,QAAQ,QAAQ,OAAO,CAAC;AACnD,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAeC,QAAQ,QAAQ,eAAe,CAAC;AAUlG,OAAO,SAASC,oBAAoB,CAACC,KAAgC,EAAE;IACrE,MAAM,EAAEC,aAAa,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGF,KAAK,AAAC;IAE1C,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAACQ,aAAa,CAACE,KAAK,CAAC,AAAC;IACxD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGb,QAAQ,CAACQ,aAAa,CAACI,WAAW,CAAC,AAAC;IAE1E,MAAME,qBAAqB,GAA4C,CAACC,CAAC,GAAK;QAC5E,MAAMC,IAAI,GAAGD,CAAC,CAACE,MAAM,CAACC,KAAK,AAAC;QAC5BL,cAAc,CAACG,IAAI,KAAK,QAAQ,CAAC,CAAC;IACpC,CAAC,AAAC;IAEF,MAAMG,YAAY,GAAqB,CAACJ,CAAC,GAAK;QAC5CA,CAAC,CAACK,cAAc,EAAE,CAAC;QACnBX,QAAQ,CAAC;YAAEC,KAAK;YAAEE,WAAW;SAAE,CAAC,CAAC;IACnC,CAAC,AAAC;IAEF,qBACE,MAACS,MAAI;QAACC,EAAE,EAAEC,sBAAsB;QAAEd,QAAQ,EAAEU,YAAY;;0BACtD,KAAClB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;0BACpC,cAAA,KAACtB,SAAS;oBAACuB,QAAQ;oBAACC,KAAK,EAAC,MAAM;oBAACC,OAAO,EAAC,UAAU;oBAACV,KAAK,EAAER,KAAK;oBAAEmB,QAAQ,EAAE,CAACd,CAAC,GAAKJ,QAAQ,CAACI,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;kBAAI;cACnG;0BACd,MAACjB,WAAW;gBAACuB,SAAS;gBAACC,MAAM,EAAC,QAAQ;;kCACpC,KAACvB,UAAU;wBAACoB,EAAE,EAAC,uBAAuB;kCAAC,gBAAc;sBAAa;kCAClE,MAAClB,MAAM;wBACLsB,QAAQ;wBACRI,YAAY;wBACZC,OAAO,EAAC,uBAAuB;wBAC/BJ,KAAK,EAAC,gBAAgB;wBACtBK,IAAI,EAAC,OAAO;wBACZd,KAAK,EAAEN,WAAW,GAAG,QAAQ,GAAG,MAAM;wBACtCiB,QAAQ,EAAEf,qBAAqB;;0CAE/B,KAACT,QAAQ;gCAACa,KAAK,EAAC,MAAM;0CAAC,MAAI;8BAAW;0CACtC,KAACb,QAAQ;gCAACa,KAAK,EAAC,QAAQ;0CAAC,QAAM;8BAAW;;sBACnC;;cACG;;MACT,CACP;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAMK,sBAAsB,GAAG,yBAAyB,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './PanelGroupDialog';
+export * from './DeletePanelGroupDialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

package/dist/components/PanelGroupDialog/index.js

@@ -0,0 +1,16 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+export * from './PanelGroupDialog';
+export * from './DeletePanelGroupDialog';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './PanelGroupDialog';\nexport * from './DeletePanelGroupDialog';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAyC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAY3F,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBA2DhC"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAyC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAW3F,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBAsDhC"}