@perses-dev/dashboards 0.9.0 → 0.10.0

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -12,40 +12,55 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Grid, FormControl, InputLabel, Select, MenuItem, TextField } from '@mui/material';
+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 { usePanelSpecState } from './panel-editor-model';
-import { PanelTypeSelect } from './PanelTypeSelect';
-import { PanelSpecEditor } from './PanelSpecEditor';
+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 [group, setGroup] = useState(initialValues.group);
+    const [groupIndex, setGroupIndex] = useState(initialValues.groupIndex);
     const [kind, setKind] = useState(initialValues.kind);
-    const { spec , onSpecChange  } = usePanelSpecState(kind, initialValues.spec);
+    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;
         }
-        setGroup(value);
+        setGroupIndex(value);
     };
     const handleSubmit = (e)=>{
         e.preventDefault();
+        if (spec === undefined) {
+            throw new Error('Cannot submit without a plugin spec');
+        }
         const values = {
             name,
             description,
-            group,
+            groupIndex,
             kind,
             spec
         };
         onSubmit(values);
     };
-    var ref;
+    var _title, ref1;
     return /*#__PURE__*/ _jsx("form", {
         id: panelEditorFormId,
         onSubmit: handleSubmit,
@@ -58,7 +73,7 @@ export function PanelEditorForm(props) {
                     xs: 8,
                     children: /*#__PURE__*/ _jsx(TextField, {
                         required: true,
-                        label: "Panel Name",
+                        label: "Name",
                         value: name,
                         variant: "outlined",
                         onChange: (e)=>setName(e.target.value)
@@ -77,15 +92,12 @@ export function PanelEditorForm(props) {
                                 required: true,
                                 labelId: "select-group",
                                 label: "Group",
-                                value: group !== null && group !== void 0 ? group : 0,
+                                value: groupIndex !== null && groupIndex !== void 0 ? groupIndex : 0,
                                 onChange: handleGroupChange,
-                                children: layouts.map((layout, index)=>{
-                                    var ref1;
-                                    /*#__PURE__*/ return _jsx(MenuItem, {
+                                children: layouts.map((layout, index)=>/*#__PURE__*/ _jsx(MenuItem, {
                                         value: index,
-                                        children: (ref = (ref1 = layout.spec.display) === null || ref1 === void 0 ? void 0 : ref1.title) !== null && ref !== void 0 ? ref : `Group ${index + 1}`
-                                    }, index);
-                                })
+                                        children: (_title = layout.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, index))
                             })
                         ]
                     })
@@ -94,40 +106,70 @@ export function PanelEditorForm(props) {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ _jsx(TextField, {
-                        label: "Panel Description",
+                        label: "Description",
                         value: description,
                         variant: "outlined",
                         onChange: (e)=>setDescription(e.target.value)
                     })
                 }),
-                /*#__PURE__*/ _jsx(Grid, {
+                /*#__PURE__*/ _jsxs(Grid, {
                     item: true,
                     xs: 4,
-                    children: /*#__PURE__*/ _jsxs(FormControl, {
-                        children: [
-                            /*#__PURE__*/ _jsx(InputLabel, {
-                                id: "panel-type-label",
-                                children: "Panel Type"
-                            }),
-                            /*#__PURE__*/ _jsx(PanelTypeSelect, {
-                                required: true,
-                                labelId: "panel-type-label",
-                                label: "Panel Type",
-                                value: kind,
-                                onChange: (e)=>setKind(e.target.value)
+                    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: spec !== undefined && /*#__PURE__*/ _jsx(PanelSpecEditor, {
-                            panelPluginKind: kind,
+                        children: /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                            pluginType: "Panel",
+                            pluginKind: kind,
                             value: spec,
-                            onChange: onSpecChange
+                            onChange: pluginEditor.onSpecChange
                         })
                     })
                 })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEventHandler, useState } from 'react';\nimport { Grid, FormControl, InputLabel, Select, MenuItem, TextField, SelectProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useLayouts } from '../../context';\nimport { PanelEditorFormValues, usePanelSpecState } from './panel-editor-model';\nimport { PanelTypeSelect } from './PanelTypeSelect';\nimport { PanelSpecEditor } from './PanelSpecEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorFormValues;\n  onSubmit: (values: PanelEditorFormValues) => 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 [group, setGroup] = useState(initialValues.group);\n  const [kind, setKind] = useState(initialValues.kind);\n  const { spec, onSpecChange } = usePanelSpecState(kind, initialValues.spec);\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    setGroup(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorFormValues = { name, description, group, 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\n            required\n            label=\"Panel Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\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={group ?? 0} onChange={handleGroupChange}>\n              {layouts.map((layout, index) => (\n                <MenuItem key={index} value={index}>\n                  {layout.spec.display?.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            label=\"Panel Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl>\n            <InputLabel id=\"panel-type-label\">Panel Type</InputLabel>\n            <PanelTypeSelect\n              required\n              labelId=\"panel-type-label\"\n              label=\"Panel Type\"\n              value={kind}\n              onChange={(e) => setKind(e.target.value)}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            {/* Wait until we have some proper initial spec values before rendering the editor */}\n            {spec !== undefined && <PanelSpecEditor panelPluginKind={kind} value={spec} onChange={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","Grid","FormControl","InputLabel","Select","MenuItem","TextField","ErrorAlert","ErrorBoundary","useLayouts","usePanelSpecState","PanelTypeSelect","PanelSpecEditor","PanelEditorForm","props","initialValues","onSubmit","layouts","name","setName","description","setDescription","group","setGroup","kind","setKind","spec","onSpecChange","handleGroupChange","e","value","target","handleSubmit","preventDefault","values","layout","form","id","panelEditorFormId","container","spacing","item","xs","required","label","variant","onChange","labelId","map","index","display","title","FallbackComponent","undefined","panelPluginKind"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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":"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,SACEC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,MAAM,EAENC,SAAS,EACTC,UAAU,QACL,eAAe,CAAC;AACvB,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,2BAA2B,CAAC;AAChG,SAASC,UAAU,QAAQ,eAAe,CAAC;AAE3C,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;QA6ElCC,GAAkB;IA5E3C,MAAM,EAAEC,aAAa,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGH,KAAK,AAAC;IAE1C,MAAM,EAAEI,OAAO,CAAA,EAAE,GAAGP,UAAU,EAAE,AAAC;IAEjC,MAAM,CAACQ,IAAI,EAAEC,OAAO,CAAC,GAAGvB,QAAQ,CAACmB,aAAa,CAACG,IAAI,CAAC,AAAC;IACrD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGzB,QAAQ,CAACmB,aAAa,CAACK,WAAW,CAAC,AAAC;IAC1E,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAG3B,QAAQ,CAACmB,aAAa,CAACO,UAAU,CAAC,AAAC;IACvE,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAG7B,QAAQ,CAACmB,aAAa,CAACS,IAAI,CAAC,AAAC;IACrD,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAG/B,QAAQ,CAACmB,aAAa,CAACW,IAAI,CAAC,AAAC;IAErD,oFAAoF;IACpF,MAAMZ,YAAY,GAAGL,eAAe,CAAC;QACnCmB,UAAU,EAAE,OAAO;QACnBC,KAAK,EAAE;YAAEL,IAAI;YAAEE,IAAI;SAAE;QACrBI,QAAQ,EAAE,CAACC,MAAM,GAAK;YACpBN,OAAO,CAACM,MAAM,CAACP,IAAI,CAAC,CAAC;YACrBG,OAAO,CAACI,MAAM,CAACL,IAAI,CAAC,CAAC;QACvB,CAAC;KACF,CAAC,AAAC;IAEH,+GAA+G;IAC/G,MAAMM,iBAAiB,GAAoC,CAACC,CAAC,GAAK;QAChE,MAAM,EAAEJ,KAAK,CAAA,EAAE,GAAGI,CAAC,CAACC,MAAM,AAAC;QAC3B,IAAI,OAAOL,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO;QACT,CAAC;QACDN,aAAa,CAACM,KAAK,CAAC,CAAC;IACvB,CAAC,AAAC;IAEF,MAAMM,YAAY,GAAqB,CAACF,CAAC,GAAK;QAC5CA,CAAC,CAACG,cAAc,EAAE,CAAC;QACnB,IAAIV,IAAI,KAAKW,SAAS,EAAE;YACtB,MAAM,IAAIC,KAAK,CAAC,qCAAqC,CAAC,CAAC;QACzD,CAAC;QACD,MAAMC,MAAM,GAAsB;YAAErB,IAAI;YAAEE,WAAW;YAAEE,UAAU;YAAEE,IAAI;YAAEE,IAAI;SAAE,AAAC;QAChFV,QAAQ,CAACuB,MAAM,CAAC,CAAC;IACnB,CAAC,AAAC;QAceC,MAAY,EA0BJ1B,IAA2B;IAtCpD,qBACE,KAAC2B,MAAI;QAACC,EAAE,EAAEC,iBAAiB;QAAE3B,QAAQ,EAAEmB,YAAY;kBACjD,cAAA,MAACpC,IAAI;YAAC6C,SAAS;YAACC,OAAO,EAAE,CAAC;;8BACxB,KAAC9C,IAAI;oBAAC+C,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAAC5C,SAAS;wBAAC6C,QAAQ;wBAACC,KAAK,EAAC,MAAM;wBAACpB,KAAK,EAAEX,IAAI;wBAAEgC,OAAO,EAAC,UAAU;wBAACpB,QAAQ,EAAE,CAACG,CAAC,GAAKd,OAAO,CAACc,CAAC,CAACC,MAAM,CAACL,KAAK,CAAC;sBAAI;kBACxG;8BACP,KAAC9B,IAAI;oBAAC+C,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,MAAClD,WAAW;;0CACV,KAACG,UAAU;gCAAC0C,EAAE,EAAC,cAAc;0CAAC,OAAK;8BAAa;0CAChD,KAACxC,MAAM;gCAAC8C,QAAQ;gCAACG,OAAO,EAAC,cAAc;gCAACF,KAAK,EAAC,OAAO;gCAACpB,KAAK,EAAEP,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC;gCAAEQ,QAAQ,EAAEE,iBAAiB;0CACtGf,OAAO,CAACmC,GAAG,CAAC,CAACZ,MAAM,EAAEa,KAAK,iBACzB,KAACpD,QAAQ;wCAAa4B,KAAK,EAAEwB,KAAK;kDAC/Bb,CAAAA,MAAY,GAAZA,MAAM,CAACc,KAAK,cAAZd,MAAY,cAAZA,MAAY,GAAI,CAAC,MAAM,EAAEa,KAAK,GAAG,CAAC,CAAC,CAAC;uCADxBA,KAAK,CAET,AACZ,CAAC;8BACK;;sBACG;kBACT;8BACP,KAACtD,IAAI;oBAAC+C,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAAC5C,SAAS;wBACR8C,KAAK,EAAC,aAAa;wBACnBpB,KAAK,EAAET,WAAW;wBAClB8B,OAAO,EAAC,UAAU;wBAClBpB,QAAQ,EAAE,CAACG,CAAC,GAAKZ,cAAc,CAACY,CAAC,CAACC,MAAM,CAACL,KAAK,CAAC;sBAC/C;kBACG;8BACP,MAAC9B,IAAI;oBAAC+C,IAAI;oBAACC,EAAE,EAAE,CAAC;;sCACd,MAAClD,WAAW;4BAAC0D,QAAQ,EAAEzC,YAAY,CAAC0C,SAAS;4BAAEC,KAAK,EAAE3C,YAAY,CAAC2C,KAAK,KAAK,IAAI;;8CAC/E,KAACzD,UAAU;oCAAC0C,EAAE,EAAC,kBAAkB;8CAAC,MAAI;kCAAa;8CACnD,KAACnC,gBAAgB;oCACfqB,UAAU,EAAC,OAAO;oCAClBoB,QAAQ;oCACRG,OAAO,EAAC,kBAAkB;oCAC1BF,KAAK,EAAC,MAAM;oCACZpB,KAAK,EAAEf,YAAY,CAAC4C,WAAW,GAAG5C,YAAY,CAAC4C,WAAW,GAAGlC,IAAI;oCACjEM,QAAQ,EAAEhB,YAAY,CAAC6C,YAAY;kCACnC;;0BACU;sCACd,KAAC7D,cAAc;sCAAEgB,CAAAA,IAA2B,GAA3BA,CAAAA,GAAkB,GAAlBA,YAAY,CAAC2C,KAAK,cAAlB3C,GAAkB,WAAS,GAA3BA,KAAAA,CAA2B,GAA3BA,GAAkB,CAAE8C,OAAO,cAA3B9C,IAA2B,cAA3BA,IAA2B,GAAI,EAAE;0BAAkB;;kBAC/D;8BACP,MAACf,IAAI;oBAAC+C,IAAI;oBAACC,EAAE,EAAE,EAAE;;sCACf,KAAC3C,UAAU;4BAAC8C,OAAO,EAAC,IAAI;4BAACW,YAAY,EAAE,CAAC;sCAAE,SAE1C;0BAAa;sCACb,KAACvD,aAAa;4BAACwD,iBAAiB,EAAEzD,UAAU;sCAC1C,cAAA,KAACM,YAAY;gCAACa,IAAI,EAAEA,IAAI;gCAAEN,IAAI,EAAEA,IAAI;gCAAEE,WAAW,EAAEA,WAAW;gCAAEM,IAAI,EAAEA,IAAI;gCAAEJ,UAAU,EAAEA,UAAU;8BAAI;0BACxF;;kBACX;8BACP,KAACvB,IAAI;oBAAC+C,IAAI;oBAACC,EAAE,EAAE,EAAE;8BACf,cAAA,KAACzC,aAAa;wBAACwD,iBAAiB,EAAEzD,UAAU;kCAC1C,cAAA,KAACG,gBAAgB;4BAACoB,UAAU,EAAC,OAAO;4BAACmC,UAAU,EAAEvC,IAAI;4BAAEK,KAAK,EAAEH,IAAI;4BAAEI,QAAQ,EAAEhB,YAAY,CAACkD,YAAY;0BAAI;sBAC7F;kBACX;;UACF;MACF,CACP;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAMrB,iBAAiB,GAAG,mBAAmB,CAAC"}

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/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,mBA2FrB,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

@@ -14,32 +14,25 @@ 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';
+import { usePanelGroupDialog, useLayouts } from '../../context';
 const PanelGroupDialog = ()=>{
-    var ref, ref1, ref2, ref3, ref4;
-    const { layouts , updateLayout  } = useLayouts();
-    const { panelGroupDialog , closePanelGroupDialog  } = useDashboardApp();
+    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 && !((ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.display) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.collapse) === null || ref2 === void 0 ? void 0 : ref2.open));
-    const [name, setName] = useState(isEditingPanelGroup ? (ref4 = (ref3 = layouts[groupIndex]) === null || ref3 === void 0 ? void 0 : ref3.spec.display) === null || ref4 === void 0 ? void 0 : ref4.title : '');
+    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 _items;
-        const newLayout = {
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: name !== null && name !== void 0 ? name : '',
-                    collapse: {
-                        open: !isCollapsed
-                    }
-                },
-                items: groupIndex === undefined ? [] : (_items = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.items) !== null && _items !== void 0 ? _items : []
-            }
+        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 : []
         };
-        updateLayout(newLayout, groupIndex);
+        updatePanelGroup(newGroup, groupIndex);
         closePanelGroupDialog();
     };
     const handleSelectCollapsedStateChange = (e)=>{
@@ -47,7 +40,7 @@ const PanelGroupDialog = ()=>{
         setIsCollapsed(isCollapsed);
     };
     return /*#__PURE__*/ _jsxs(Dialog, {
-        open: true,
+        open: panelGroupDialog !== undefined,
         children: [
             /*#__PURE__*/ _jsx(DialogTitle, {
                 children: "Panel Group"

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 { LayoutDefinition } from '@perses-dev/core';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDashboardApp, useLayouts } from '../../context';\n\nconst PanelGroupDialog = () => {\n  const { layouts, updateLayout } = useLayouts();\n  const { panelGroupDialog, closePanelGroupDialog } = useDashboardApp();\n\n  const groupIndex = panelGroupDialog?.groupIndex;\n\n  const isEditingPanelGroup = groupIndex !== undefined;\n\n  const [isCollapsed, setIsCollapsed] = useState(\n    isEditingPanelGroup && !layouts[groupIndex]?.spec.display?.collapse?.open\n  );\n  const [name, setName] = useState(isEditingPanelGroup ? layouts[groupIndex]?.spec.display?.title : '');\n\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    const newLayout: LayoutDefinition = {\n      kind: 'Grid',\n      spec: {\n        display: {\n          title: name ?? '',\n          collapse: {\n            open: !isCollapsed,\n          },\n        },\n        items: groupIndex === undefined ? [] : layouts[groupIndex]?.spec.items ?? [],\n      },\n    };\n    updateLayout(newLayout, 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>\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","useDashboardApp","useLayouts","PanelGroupDialog","layouts","updateLayout","panelGroupDialog","closePanelGroupDialog","groupIndex","isEditingPanelGroup","undefined","isCollapsed","setIsCollapsed","spec","display","collapse","open","name","setName","title","handleSubmit","e","preventDefault","newLayout","kind","items","handleSelectCollapsedStateChange","target","value","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","width","required","label","variant","onChange","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 { 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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"}

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

@@ -16,6 +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';
 describe('Add Panel Group', ()=>{
     const renderDialog = ()=>{
@@ -37,7 +38,6 @@ describe('Add Panel Group', ()=>{
         return storeApi;
     };
     it('should add new panel group', async ()=>{
-        // jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
         const storeApi = renderDialog();
         // Open the dialog for a new panel group
         act(()=>storeApi.getState().openPanelGroupDialog());
@@ -46,19 +46,14 @@ describe('Add Panel Group', ()=>{
         userEvent.click(screen.getByText('Add'));
         const layouts = storeApi.getState().layouts;
         expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Panel Group',
-                    collapse: {
-                        open: true
-                    }
-                },
-                items: []
-            }
+            id: 3,
+            title: 'New Panel Group',
+            isCollapsed: false,
+            items: []
         });
     });
     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));
@@ -68,26 +63,10 @@ describe('Add Panel Group', ()=>{
         userEvent.click(screen.getByText('Apply'));
         const layouts = storeApi.getState().layouts;
         expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Name',
-                    collapse: {
-                        open: true
-                    }
-                },
-                items: [
-                    {
-                        content: {
-                            $ref: '#/spec/panels/cpu'
-                        },
-                        height: 4,
-                        width: 12,
-                        x: 0,
-                        y: 0
-                    }
-                ]
-            }
+            id: 0,
+            title: 'New Name',
+            isCollapsed: false,
+            items: (ref = testDashboard.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
         });
     });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport PanelGroupDialog from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n  const renderDialog = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ 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    // jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);\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      kind: 'Grid',\n      spec: {\n        display: {\n          title: 'New Panel Group',\n          collapse: {\n            open: true,\n          },\n        },\n        items: [],\n      },\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      kind: 'Grid',\n      spec: {\n        display: {\n          title: 'New Name',\n          collapse: {\n            open: true,\n          },\n        },\n        items: [{ content: { $ref: '#/spec/panels/cpu' }, height: 4, width: 12, x: 0, y: 0 }],\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","openPanelGroupDialog","nameInput","findByLabelText","type","click","getByText","layouts","expect","toContainEqual","kind","display","title","collapse","open","items","clear","content","$ref","height","width","x","y"],"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 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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"}