@perses-dev/dashboards 0.9.0 → 0.11.0

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

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

package/dist/components/PanelDrawer/PanelDrawer.test.js

@@ -21,7 +21,7 @@ import { PanelDrawer } from './PanelDrawer';
 describe('Panel Drawer', ()=>{
     const renderPanelDrawer = ()=>{
         const { addMockPlugin , pluginRegistryProps  } = mockPluginRegistryProps();
-        addMockPlugin('Panel', 'LineChart', FAKE_PANEL_PLUGIN);
+        addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);
         const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
         renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
             ...pluginRegistryProps,
@@ -45,10 +45,8 @@ describe('Panel Drawer', ()=>{
     it('should add new panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for a new panel (i.e. no panel key)
-        act(()=>storeApi.getState().openPanelDrawer({
-                groupIndex: 0
-            }));
-        const nameInput = await screen.findByLabelText(/Panel Name/);
+        act(()=>storeApi.getState().openAddPanel(0));
+        const nameInput = await screen.findByLabelText(/Name/);
         userEvent.type(nameInput, 'New Panel');
         userEvent.click(screen.getByText('Add'));
         // TODO: Assert drawer is closed?
@@ -59,8 +57,7 @@ describe('Panel Drawer', ()=>{
                 kind: 'Panel',
                 spec: {
                     display: {
-                        name: 'New Panel',
-                        description: ''
+                        name: 'New Panel'
                     },
                     plugin: {
                         kind: '',
@@ -73,11 +70,11 @@ describe('Panel Drawer', ()=>{
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel
-        act(()=>storeApi.getState().openPanelDrawer({
-                groupIndex: 0,
-                panelKey: 'cpu'
+        act(()=>storeApi.getState().openEditPanel({
+                panelGroupId: 0,
+                itemIndex: 0
             }));
-        const nameInput = await screen.findByLabelText(/Panel Name/);
+        const nameInput = await screen.findByLabelText(/Name/);
         userEvent.clear(nameInput);
         userEvent.type(nameInput, 'cpu usage');
         userEvent.click(screen.getByText('Apply'));
@@ -87,8 +84,7 @@ describe('Panel Drawer', ()=>{
                 kind: 'Panel',
                 spec: {
                     display: {
-                        name: 'cpu usage',
-                        description: ''
+                        name: 'cpu usage'
                     },
                     plugin: {
                         kind: 'TimeSeriesChart',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport {\n  createDashboardProviderSpy,\n  FAKE_PANEL_PLUGIN,\n  getTestDashboard,\n  mockPluginRegistryProps,\n  renderWithContext,\n} from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'LineChart', FAKE_PANEL_PLUGIN);\n\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n          <DashboardProviderSpy />\n          <PanelDrawer />\n        </DashboardProvider>\n      </PluginRegistry>\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', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel (i.e. no panel key)\n    act(() => storeApi.getState().openPanelDrawer({ groupIndex: 0 }));\n\n    const nameInput = await screen.findByLabelText(/Panel Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel', description: '' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    act(() => storeApi.getState().openPanelDrawer({ groupIndex: 0, panelKey: 'cpu' }));\n\n    const nameInput = await screen.findByLabelText(/Panel Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage', description: '' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openPanelDrawer","groupIndex","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","description","plugin","panelKey","clear","cpu"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport {\n  createDashboardProviderSpy,\n  FAKE_PANEL_PLUGIN,\n  getTestDashboard,\n  mockPluginRegistryProps,\n  renderWithContext,\n} from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);\n\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n          <DashboardProviderSpy />\n          <PanelDrawer />\n        </DashboardProvider>\n      </PluginRegistry>\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', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel (i.e. no panel key)\n    act(() => storeApi.getState().openAddPanel(0));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    act(() => storeApi.getState().openEditPanel({ panelGroupId: 0, itemIndex: 0 }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","plugin","openEditPanel","panelGroupId","itemIndex","clear","cpu"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { PanelEditorFormValues } from './panel-editor-model';
+import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
 export interface PanelEditorFormProps {
-    initialValues: PanelEditorFormValues;
-    onSubmit: (values: PanelEditorFormValues) => void;
+    initialValues: PanelEditorValues;
+    onSubmit: (values: PanelEditorValues) => void;
 }
 export declare function PanelEditorForm(props: PanelEditorFormProps): JSX.Element;
 /**

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

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

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -12,53 +12,71 @@
 // 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 { useLayouts } from '../../context';
-import { usePanelSpecState } from './panel-editor-model';
-import { PanelTypeSelect } from './PanelTypeSelect';
-import { PanelSpecEditor } from './PanelSpecEditor';
+import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
+import { useListPanelGroups } from '../../context';
+import { PanelPreview } from './PanelPreview';
 export function PanelEditorForm(props) {
+    var ref;
     const { initialValues , onSubmit  } = props;
-    const { layouts  } = useLayouts();
+    const panelGroups = useListPanelGroups();
     const [name, setName] = useState(initialValues.name);
     const [description, setDescription] = useState(initialValues.description);
-    const [group, setGroup] = useState(initialValues.group);
+    const [groupId, setGroupId] = useState(initialValues.groupId);
     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);
+        setGroupId(value);
     };
     const handleSubmit = (e)=>{
         e.preventDefault();
         const values = {
             name,
             description,
-            group,
+            groupId,
             kind,
             spec
         };
         onSubmit(values);
     };
-    var ref;
-    return /*#__PURE__*/ _jsx("form", {
+    var _title, ref1;
+    return(// Grid maxHeight allows user to scroll inside Drawer to see all content
+    /*#__PURE__*/ _jsx("form", {
         id: panelEditorFormId,
         onSubmit: handleSubmit,
         children: /*#__PURE__*/ _jsxs(Grid, {
             container: true,
             spacing: 2,
+            sx: {
+                overflowY: 'scroll',
+                maxHeight: '90vh'
+            },
             children: [
                 /*#__PURE__*/ _jsx(Grid, {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ _jsx(TextField, {
                         required: true,
-                        label: "Panel Name",
+                        fullWidth: true,
+                        label: "Name",
                         value: name,
                         variant: "outlined",
                         onChange: (e)=>setName(e.target.value)
@@ -68,6 +86,7 @@ export function PanelEditorForm(props) {
                     item: true,
                     xs: 4,
                     children: /*#__PURE__*/ _jsxs(FormControl, {
+                        fullWidth: true,
                         children: [
                             /*#__PURE__*/ _jsx(InputLabel, {
                                 id: "select-group",
@@ -77,15 +96,12 @@ export function PanelEditorForm(props) {
                                 required: true,
                                 labelId: "select-group",
                                 label: "Group",
-                                value: group !== null && group !== void 0 ? group : 0,
+                                value: groupId,
                                 onChange: handleGroupChange,
-                                children: layouts.map((layout, index)=>{
-                                    var ref1;
-                                    /*#__PURE__*/ return _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: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: panelGroup.id,
+                                        children: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, panelGroup.id))
                             })
                         ]
                     })
@@ -94,46 +110,78 @@ export function PanelEditorForm(props) {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ _jsx(TextField, {
-                        label: "Panel Description",
+                        fullWidth: true,
+                        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, {
+                            fullWidth: true,
+                            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,
+                                groupId: groupId
                             })
-                        ]
-                    })
+                        })
+                    ]
                 }),
                 /*#__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
                         })
                     })
                 })
             ]
         })
-    });
+    }));
 }
 /**
  * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.

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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAA2BA,QAAQ,QAAQ,OAAO,CAAC;AACnD,SAASC,IAAI,EAAEC,WAAW,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,QAAqB,eAAe,CAAC;AACxG,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AACnE,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAAgCC,iBAAiB,QAAQ,sBAAsB,CAAC;AAChF,SAASC,eAAe,QAAQ,mBAAmB,CAAC;AACpD,SAASC,eAAe,QAAQ,mBAAmB,CAAC;AAOpD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,aAAa,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGF,KAAK,AAAC;IAE1C,MAAM,EAAEG,OAAO,CAAA,EAAE,GAAGR,UAAU,EAAE,AAAC;IAEjC,MAAM,CAACS,IAAI,EAAEC,OAAO,CAAC,GAAGnB,QAAQ,CAACe,aAAa,CAACG,IAAI,CAAC,AAAC;IACrD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGrB,QAAQ,CAACe,aAAa,CAACK,WAAW,CAAC,AAAC;IAC1E,MAAM,CAACE,KAAK,EAAEC,QAAQ,CAAC,GAAGvB,QAAQ,CAACe,aAAa,CAACO,KAAK,CAAC,AAAC;IACxD,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAGzB,QAAQ,CAACe,aAAa,CAACS,IAAI,CAAC,AAAC;IACrD,MAAM,EAAEE,IAAI,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGjB,iBAAiB,CAACc,IAAI,EAAET,aAAa,CAACW,IAAI,CAAC,AAAC;IAE3E,+GAA+G;IAC/G,MAAME,iBAAiB,GAAoC,CAACC,CAAC,GAAK;QAChE,MAAM,EAAEC,KAAK,CAAA,EAAE,GAAGD,CAAC,CAACE,MAAM,AAAC;QAC3B,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO;QACT,CAAC;QACDP,QAAQ,CAACO,KAAK,CAAC,CAAC;IAClB,CAAC,AAAC;IAEF,MAAME,YAAY,GAAqB,CAACH,CAAC,GAAK;QAC5CA,CAAC,CAACI,cAAc,EAAE,CAAC;QACnB,MAAMC,MAAM,GAA0B;YAAEhB,IAAI;YAAEE,WAAW;YAAEE,KAAK;YAAEE,IAAI;YAAEE,IAAI;SAAE,AAAC;QAC/EV,QAAQ,CAACkB,MAAM,CAAC,CAAC;IACnB,CAAC,AAAC;QAoBeC,GAA0B;IAlB3C,qBACE,KAACC,MAAI;QAACC,EAAE,EAAEC,iBAAiB;QAAEtB,QAAQ,EAAEgB,YAAY;kBACjD,cAAA,MAAC/B,IAAI;YAACsC,SAAS;YAACC,OAAO,EAAE,CAAC;;8BACxB,KAACvC,IAAI;oBAACwC,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAACpC,SAAS;wBACRqC,QAAQ;wBACRC,KAAK,EAAC,YAAY;wBAClBd,KAAK,EAAEZ,IAAI;wBACX2B,OAAO,EAAC,UAAU;wBAClBC,QAAQ,EAAE,CAACjB,CAAC,GAAKV,OAAO,CAACU,CAAC,CAACE,MAAM,CAACD,KAAK,CAAC;sBACxC;kBACG;8BACP,KAAC7B,IAAI;oBAACwC,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,MAACxC,WAAW;;0CACV,KAACC,UAAU;gCAACkC,EAAE,EAAC,cAAc;0CAAC,OAAK;8BAAa;0CAChD,KAACjC,MAAM;gCAACuC,QAAQ;gCAACI,OAAO,EAAC,cAAc;gCAACH,KAAK,EAAC,OAAO;gCAACd,KAAK,EAAER,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC;gCAAEwB,QAAQ,EAAElB,iBAAiB;0CACjGX,OAAO,CAAC+B,GAAG,CAAC,CAACb,MAAM,EAAEc,KAAK;wCAEtBd,IAAmB;kDADtB,OAAA,KAAC9B,QAAQ;wCAAayB,KAAK,EAAEmB,KAAK;kDAC/Bd,CAAAA,GAA0B,GAA1BA,CAAAA,IAAmB,GAAnBA,MAAM,CAACT,IAAI,CAACwB,OAAO,cAAnBf,IAAmB,WAAO,GAA1BA,KAAAA,CAA0B,GAA1BA,IAAmB,CAAEgB,KAAK,cAA1BhB,GAA0B,cAA1BA,GAA0B,GAAI,CAAC,MAAM,EAAEc,KAAK,GAAG,CAAC,CAAC,CAAC;uCADtCA,KAAK,CAET,CAAA;iCACZ,CAAC;8BACK;;sBACG;kBACT;8BACP,KAAChD,IAAI;oBAACwC,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,KAACpC,SAAS;wBACRsC,KAAK,EAAC,mBAAmB;wBACzBd,KAAK,EAAEV,WAAW;wBAClByB,OAAO,EAAC,UAAU;wBAClBC,QAAQ,EAAE,CAACjB,CAAC,GAAKR,cAAc,CAACQ,CAAC,CAACE,MAAM,CAACD,KAAK,CAAC;sBAC/C;kBACG;8BACP,KAAC7B,IAAI;oBAACwC,IAAI;oBAACC,EAAE,EAAE,CAAC;8BACd,cAAA,MAACxC,WAAW;;0CACV,KAACC,UAAU;gCAACkC,EAAE,EAAC,kBAAkB;0CAAC,YAAU;8BAAa;0CACzD,KAAC1B,eAAe;gCACdgC,QAAQ;gCACRI,OAAO,EAAC,kBAAkB;gCAC1BH,KAAK,EAAC,YAAY;gCAClBd,KAAK,EAAEN,IAAI;gCACXsB,QAAQ,EAAE,CAACjB,CAAC,GAAKJ,OAAO,CAACI,CAAC,CAACE,MAAM,CAACD,KAAK,CAAC;8BACxC;;sBACU;kBACT;8BACP,KAAC7B,IAAI;oBAACwC,IAAI;oBAACC,EAAE,EAAE,EAAE;8BACf,cAAA,KAAClC,aAAa;wBAAC4C,iBAAiB,EAAE7C,UAAU;kCAEzCmB,IAAI,KAAK2B,SAAS,kBAAI,KAACzC,eAAe;4BAAC0C,eAAe,EAAE9B,IAAI;4BAAEM,KAAK,EAAEJ,IAAI;4BAAEoB,QAAQ,EAAEnB,YAAY;0BAAI;sBACxF;kBACX;;UACF;MACF,CACP;AACJ,CAAC;AAED;;CAEC,GACD,OAAO,MAAMW,iBAAiB,GAAG,mBAAmB,CAAC"}
+{"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 { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <form id={panelEditorFormId} onSubmit={handleSubmit}>\n      <Grid container spacing={2} sx={{ overflowY: 'scroll', maxHeight: '90vh' }}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupId={groupId} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </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","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","values","panelGroup","form","id","panelEditorFormId","container","spacing","sx","overflowY","maxHeight","item","xs","required","fullWidth","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
+export declare function PanelPreview({ name, description, kind, spec, groupId }: PanelEditorValues): JSX.Element | null;
+//# 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,oDAAoD,CAAC;AAGvF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,iBAAiB,sBA4BzF"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -0,0 +1,48 @@
+// 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 , groupId  }) {
+    const previewValues = {
+        definition: {
+            kind: 'Panel',
+            spec: {
+                display: {
+                    name,
+                    description
+                },
+                plugin: {
+                    kind,
+                    spec
+                }
+            }
+        },
+        // TODO: what should itemIndex be?
+        panelGroupItemId: {
+            panelGroupId: groupId,
+            itemIndex: 0
+        }
+    };
+    if (!kind) {
+        return null;
+    }
+    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-editor-slice';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec, groupId }: 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    // TODO: what should itemIndex be?\n    panelGroupItemId: { panelGroupId: groupId, itemIndex: 0 },\n  };\n\n  if (!kind) {\n    return null;\n  }\n\n  return (\n    <Box height={300}>\n      <Panel {...previewValues} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","groupId","previewValues","definition","display","plugin","panelGroupItemId","panelGroupId","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,OAAO,CAAA,EAAqB,EAAE;IAC1F,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;QACD,kCAAkC;QAClCM,gBAAgB,EAAE;YAAEC,YAAY,EAAEN,OAAO;YAAEO,SAAS,EAAE,CAAC;SAAE;KAC1D,AAAC;IAEF,IAAI,CAACT,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACe,MAAM,EAAE,GAAG;kBACd,cAAA,KAACd,KAAK;YAAE,GAAGO,aAAa;UAAI;MACxB,CACN;AACJ,CAAC"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DeletePanelGroupDialog: () => JSX.Element;
+//# 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,eAAO,MAAM,sBAAsB,mBA0ClC,CAAC"}

package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js

@@ -0,0 +1,77 @@
+// 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 { useDeletePanelGroupDialog } from '../../context';
+export const DeletePanelGroupDialog = ()=>{
+    const { deletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = useDeletePanelGroupDialog();
+    const panelGroupId = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupId;
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        if (panelGroupId == undefined) {
+            throw new Error('group index is undefined');
+        }
+        deletePanelGroup(panelGroupId);
+        closeDeletePanelGroupDialog();
+    };
+    var ref;
+    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__*/ _jsxs(DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: [
+                            "Are you sure you want to delete ",
+                            (ref = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupName) !== null && ref !== void 0 ? ref : '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"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# 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 { useDeletePanelGroupDialog } from '../../context';\n\nexport const DeletePanelGroupDialog = () => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    if (panelGroupId == undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      <form onSubmit={handleDelete}>\n        <DialogContent sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button onClick={() => closeDeletePanelGroupDialog()}>Cancel</Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelGroupDialog","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","width","panelGroupName","variant","type"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,yBAAyB,QAAQ,eAAe,CAAC;AAE1D,OAAO,MAAMC,sBAAsB,GAAG,IAAM;IAC1C,MAAM,EAAEC,sBAAsB,CAAA,EAAEC,2BAA2B,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGJ,yBAAyB,EAAE,AAAC;IAE9G,MAAMK,YAAY,GAAGH,sBAAsB,aAAtBA,sBAAsB,WAAc,GAApCA,KAAAA,CAAoC,GAApCA,sBAAsB,CAAEG,YAAY,AAAC;IAE1D,MAAMC,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,IAAIH,YAAY,IAAII,SAAS,EAAE;YAC7B,MAAM,IAAIC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QACDN,gBAAgB,CAACC,YAAY,CAAC,CAAC;QAC/BF,2BAA2B,EAAE,CAAC;IAChC,CAAC,AAAC;QAkBuCD,GAAsC;IAhB/E,qBACE,MAACR,MAAM;QAACiB,IAAI,EAAET,sBAAsB,KAAKO,SAAS;;0BAChD,KAACd,WAAW;0BAAC,oBAAkB;cAAc;0BAC7C,KAACF,UAAU;gBACTmB,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMV,2BAA2B,EAAE;gBAC5CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACnB,SAAS,KAAG;cACF;0BACb,MAACqB,MAAI;gBAACC,QAAQ,EAAEf,YAAY;;kCAC1B,MAACV,aAAa;wBAACkB,EAAE,EAAE;4BAAEQ,KAAK,EAAE,OAAO;yBAAE;;4BAAE,kCACL;4BAACpB,CAAAA,GAAsC,GAAtCA,sBAAsB,aAAtBA,sBAAsB,WAAgB,GAAtCA,KAAAA,CAAsC,GAAtCA,sBAAsB,CAAEqB,cAAc,cAAtCrB,GAAsC,cAAtCA,GAAsC,GAAI,aAAa;4BAAC,qDAE3F;;sBAAgB;kCAChB,MAACL,aAAa;;0CACZ,KAACC,MAAM;gCAAC0B,OAAO,EAAC,WAAW;gCAACC,IAAI,EAAC,QAAQ;0CAAC,QAE1C;8BAAS;0CACT,KAAC3B,MAAM;gCAACe,OAAO,EAAE,IAAMV,2BAA2B,EAAE;0CAAE,QAAM;8BAAS;;sBACvD;;cACX;;MACA,CACT;AACJ,CAAC,CAAC"}

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

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

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

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