@perses-dev/dashboards 0.8.1 → 0.10.0

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -0,0 +1,184 @@
+// 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, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
+import { useLayouts } from '../../context';
+import { PanelPreview } from './PanelPreview';
+export function PanelEditorForm(props) {
+    var ref;
+    const { initialValues , onSubmit  } = props;
+    const { layouts  } = useLayouts();
+    const [name, setName] = useState(initialValues.name);
+    const [description, setDescription] = useState(initialValues.description);
+    const [groupIndex, setGroupIndex] = useState(initialValues.groupIndex);
+    const [kind, setKind] = useState(initialValues.kind);
+    const [spec, setSpec] = useState(initialValues.spec);
+    // Use common plugin editor logic even though we've split the inputs up in this form
+    const pluginEditor = usePluginEditor({
+        pluginType: 'Panel',
+        value: {
+            kind,
+            spec
+        },
+        onChange: (plugin)=>{
+            setKind(plugin.kind);
+            setSpec(plugin.spec);
+        }
+    });
+    // Ignore string values (which would be an "empty" value from the Select) since we don't allow them to unset it
+    const handleGroupChange = (e)=>{
+        const { value  } = e.target;
+        if (typeof value === 'string') {
+            return;
+        }
+        setGroupIndex(value);
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        if (spec === undefined) {
+            throw new Error('Cannot submit without a plugin spec');
+        }
+        const values = {
+            name,
+            description,
+            groupIndex,
+            kind,
+            spec
+        };
+        onSubmit(values);
+    };
+    var _title, ref1;
+    return /*#__PURE__*/ _jsx("form", {
+        id: panelEditorFormId,
+        onSubmit: handleSubmit,
+        children: /*#__PURE__*/ _jsxs(Grid, {
+            container: true,
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ _jsx(TextField, {
+                        required: true,
+                        label: "Name",
+                        value: name,
+                        variant: "outlined",
+                        onChange: (e)=>setName(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 4,
+                    children: /*#__PURE__*/ _jsxs(FormControl, {
+                        children: [
+                            /*#__PURE__*/ _jsx(InputLabel, {
+                                id: "select-group",
+                                children: "Group"
+                            }),
+                            /*#__PURE__*/ _jsx(Select, {
+                                required: true,
+                                labelId: "select-group",
+                                label: "Group",
+                                value: groupIndex !== null && groupIndex !== void 0 ? groupIndex : 0,
+                                onChange: handleGroupChange,
+                                children: layouts.map((layout, index)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: index,
+                                        children: (_title = layout.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, index))
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ _jsx(TextField, {
+                        label: "Description",
+                        value: description,
+                        variant: "outlined",
+                        onChange: (e)=>setDescription(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Grid, {
+                    item: true,
+                    xs: 4,
+                    children: [
+                        /*#__PURE__*/ _jsxs(FormControl, {
+                            disabled: pluginEditor.isLoading,
+                            error: pluginEditor.error !== null,
+                            children: [
+                                /*#__PURE__*/ _jsx(InputLabel, {
+                                    id: "panel-type-label",
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ _jsx(PluginKindSelect, {
+                                    pluginType: "Panel",
+                                    required: true,
+                                    labelId: "panel-type-label",
+                                    label: "Type",
+                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : kind,
+                                    onChange: pluginEditor.onKindChange
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(FormHelperText, {
+                            children: (ref1 = (ref = pluginEditor.error) === null || ref === void 0 ? void 0 : ref.message) !== null && ref1 !== void 0 ? ref1 : ''
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h4",
+                            marginBottom: 1,
+                            children: "Preview"
+                        }),
+                        /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: ErrorAlert,
+                            children: /*#__PURE__*/ _jsx(PanelPreview, {
+                                kind: kind,
+                                name: name,
+                                description: description,
+                                spec: spec,
+                                groupIndex: groupIndex
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                            pluginType: "Panel",
+                            pluginKind: kind,
+                            value: spec,
+                            onChange: pluginEditor.onSpecChange
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+/**
+ * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.
+ */ export const panelEditorFormId = 'panel-editor-form';
+
+//# sourceMappingURL=PanelEditorForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEventHandler, useState } from 'react';\nimport {\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useLayouts } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const { layouts } = useLayouts();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupIndex, setGroupIndex] = useState(initialValues.groupIndex);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupIndex(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    if (spec === undefined) {\n      throw new Error('Cannot submit without a plugin spec');\n    }\n    const values: PanelEditorValues = { name, description, groupIndex, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    <form id={panelEditorFormId} onSubmit={handleSubmit}>\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField required label=\"Name\" value={name} variant=\"outlined\" onChange={(e) => setName(e.target.value)} />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupIndex ?? 0} onChange={handleGroupChange}>\n              {layouts.map((layout, index) => (\n                <MenuItem key={index} value={index}>\n                  {layout.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupIndex={groupIndex} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useLayouts","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","layouts","name","setName","description","setDescription","groupIndex","setGroupIndex","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","undefined","Error","values","layout","form","id","panelEditorFormId","container","spacing","item","xs","required","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}

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

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

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

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

package/dist/components/PanelDrawer/PanelPreview.js

@@ -0,0 +1,42 @@
+// 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 } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Panel } from '../Panel';
+export function PanelPreview({ name , description , kind , spec , groupIndex  }) {
+    const previewValues = {
+        definition: {
+            kind: 'Panel',
+            spec: {
+                display: {
+                    name,
+                    description
+                },
+                plugin: {
+                    kind,
+                    spec
+                }
+            }
+        },
+        groupIndex,
+        itemIndex: 0
+    };
+    return /*#__PURE__*/ _jsx(Box, {
+        height: 300,
+        children: /*#__PURE__*/ _jsx(Panel, {
+            ...previewValues
+        })
+    });
+}
+
+//# sourceMappingURL=PanelPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec, groupIndex }: PanelEditorValues) {\n  const previewValues: PanelProps = {\n    definition: {\n      kind: 'Panel',\n      spec: {\n        display: {\n          name,\n          description,\n        },\n        plugin: {\n          kind,\n          spec,\n        },\n      },\n    },\n    groupIndex,\n    itemIndex: 0, // TODO: what should itemIndex be?\n  };\n\n  return (\n    <Box height={300}>\n      <Panel {...previewValues} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","groupIndex","previewValues","definition","display","plugin","itemIndex","height"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,KAAK,QAAoB,UAAU,CAAC;AAE7C,OAAO,SAASC,YAAY,CAAC,EAAEC,IAAI,CAAA,EAAEC,WAAW,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAEC,UAAU,CAAA,EAAqB,EAAE;IAC7F,MAAMC,aAAa,GAAe;QAChCC,UAAU,EAAE;YACVJ,IAAI,EAAE,OAAO;YACbC,IAAI,EAAE;gBACJI,OAAO,EAAE;oBACPP,IAAI;oBACJC,WAAW;iBACZ;gBACDO,MAAM,EAAE;oBACNN,IAAI;oBACJC,IAAI;iBACL;aACF;SACF;QACDC,UAAU;QACVK,SAAS,EAAE,CAAC;KACb,AAAC;IAEF,qBACE,KAACZ,GAAG;QAACa,MAAM,EAAE,GAAG;kBACd,cAAA,KAACZ,KAAK;YAAE,GAAGO,aAAa;UAAI;MACxB,CACN;AACJ,CAAC"}

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

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

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

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

package/dist/components/PanelDrawer/index.js

@@ -0,0 +1,15 @@
+// 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 './PanelDrawer';
+
+//# sourceMappingURL=index.js.map

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

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

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

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

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

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

package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js

@@ -0,0 +1,75 @@
+// 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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+import CloseIcon from 'mdi-material-ui/Close';
+import { usePanelGroupDialog, useLayouts } from '../../context';
+const DeletePanelGroupDialog = ()=>{
+    var ref;
+    const { layouts , deletePanelGroup  } = useLayouts();
+    const { deletePanelGroupDialog , closeDeletePanelGroupDialog  } = usePanelGroupDialog();
+    const groupIndex = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.groupIndex;
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        if (groupIndex == undefined) {
+            throw new Error('group index is undefined');
+        }
+        deletePanelGroup(groupIndex);
+        closeDeletePanelGroupDialog();
+    };
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: deletePanelGroupDialog !== undefined,
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: "Delete Panel Group"
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closeDeletePanelGroupDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ _jsx(CloseIcon, {})
+            }),
+            /*#__PURE__*/ _jsxs("form", {
+                onSubmit: handleDelete,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: `Are you sure you want to delete ${groupIndex !== undefined && layouts[groupIndex] !== undefined ? (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.title : 'panel group'}? This will delete all the panels within the group.`
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                type: "submit",
+                                children: "Delete"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>closeDeletePanelGroupDialog(),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default DeletePanelGroupDialog;
+
+//# sourceMappingURL=DeletePanelGroupDialog.js.map

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

@@ -0,0 +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"}

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,mBA4FrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"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"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -1 +1,131 @@
-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 CloseIcon from"mdi-material-ui/Close";import{useDashboardApp,useLayouts}from"../../context";const PanelGroupDialog=()=>{var e,l,o,t,i;const{layouts:s,updateLayout:n}=useLayouts(),{panelGroupDialog:a,closePanelGroupDialog:r}=useDashboardApp(),{groupIndex:u}=a,d=void 0!==u,[p,c]=useState(d&&!(null===(o=null===(l=null===(e=s[u])||void 0===e?void 0:e.spec.display)||void 0===l?void 0:l.collapse)||void 0===o?void 0:o.open)),[x,m]=useState(d?null===(i=null===(t=s[u])||void 0===t?void 0:t.spec.display)||void 0===i?void 0:i.title:"");return _jsxs(Dialog,{open:!0,children:[_jsx(DialogTitle,{children:"Panel Group"}),_jsx(IconButton,{"aria-label":"Close",onClick:()=>r(),sx:e=>({position:"absolute",top:e.spacing(.5),right:e.spacing(.5)}),children:_jsx(CloseIcon,{})}),_jsxs("form",{onSubmit:e=>{var l,o;e.preventDefault();const t={kind:"Grid",spec:{display:{title:null!=x?x:"",collapse:{open:!p}},items:void 0===u?[]:null!==(o=null===(l=s[u])||void 0===l?void 0:l.spec.items)&&void 0!==o?o:[]}};n(t,u),r()},children:[_jsx(DialogContent,{sx:{width:"500px"},children:_jsxs(Stack,{spacing:2,children:[_jsx(FormControl,{children:_jsx(TextField,{required:!0,label:"Name",variant:"outlined",value:x,onChange:e=>m(e.target.value)})}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",width:"100%",justifyContent:"space-between"},children:[_jsx(InputLabel,{children:"Collapse State"}),_jsxs(Select,{required:!0,displayEmpty:!0,labelId:"select-collapse-state",size:"small",value:p?"Close":"Open",onChange:e=>{const l="Close"===e.target.value;c(l)},children:[_jsx(MenuItem,{value:"Open",children:"Open"},"open"),_jsx(MenuItem,{value:"Close",children:"Close"},"close")]})]})]})}),_jsxs(DialogActions,{children:[_jsx(Button,{variant:"contained",type:"submit",children:d?"Apply":"Add"}),_jsx(Button,{onClick:()=>r(),children:"Cancel"})]})]})]})};export default PanelGroupDialog;
+// 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 { IconButton, Dialog, DialogTitle, DialogContent, FormControl, InputLabel, TextField, Stack, Box, DialogActions, Button, Select, MenuItem } 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();
+    };
+    const handleSelectCollapsedStateChange = (e)=>{
+        const isCollapsed = e.target.value === 'Close';
+        setIsCollapsed(isCollapsed);
+    };
+    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"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default PanelGroupDialog;
+
+//# sourceMappingURL=PanelGroupDialog.js.map

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

@@ -0,0 +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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"}