@perses-dev/dashboards 0.8.0 → 0.9.0

package/dist/cjs/components/PanelDrawer/PanelDrawer.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -13,112 +10,90 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const plugin_system_1 = require("@perses-dev/plugin-system");
-const react_1 = require("react");
-const context_1 = require("../../context");
-const functions_1 = require("../../utils/functions");
-const PanelOptionsEditor_1 = require("./PanelOptionsEditor");
-const PanelDrawer = () => {
-    var _a, _b, _c, _d;
-    const { layouts } = (0, context_1.useLayouts)();
-    const { panels, updatePanel } = (0, context_1.usePanels)();
-    const { panelDrawer, closePanelDrawer } = (0, context_1.useDashboardApp)();
-    let defaultPanelName = '';
-    let defaultDescription = '';
-    if (panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) {
-        // editing an existing panel
-        defaultPanelName = (_b = (_a = panels[panelDrawer.panelKey]) === null || _a === void 0 ? void 0 : _a.display.name) !== null && _b !== void 0 ? _b : '';
-        defaultDescription = (_d = (_c = panels[panelDrawer.panelKey]) === null || _c === void 0 ? void 0 : _c.display.description) !== null && _d !== void 0 ? _d : '';
-    }
-    const [group, setGroup] = (0, react_1.useState)(panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex);
-    const [panelName, setPanelName] = (0, react_1.useState)(defaultPanelName);
-    const [panelDescription, setPanelDescription] = (0, react_1.useState)(defaultDescription);
-    const [kind, setKind] = (0, react_1.useState)('');
-    const [options, setOptions] = (0, react_1.useState)({});
-    // TO DO: we might want to make the form a sub component we don't need this useEffect
-    // currently, we need to reset the states whenever panelDrawer is reopened
-    // since this component does not get remounted when it open/closes (otherwise we lose the animation of sliding in/out)
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d;
-        setGroup(panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex);
-        if (panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) {
-            // display panel name and description in text fields when editing an existing panel
-            setPanelName((_b = (_a = panels[panelDrawer.panelKey]) === null || _a === void 0 ? void 0 : _a.display.name) !== null && _b !== void 0 ? _b : '');
-            setPanelDescription((_d = (_c = panels[panelDrawer.panelKey]) === null || _c === void 0 ? void 0 : _c.display.description) !== null && _d !== void 0 ? _d : '');
-        }
-        else {
-            setPanelName('');
-            setPanelDescription('');
-        }
-    }, [panelDrawer, panels]);
-    const handleGroupChange = (e) => {
-        const { value } = e.target;
-        // Handle string (which would be empty string but shouldn't happen since we don't allow a "None" option) by
-        // just ignoring it
-        if (typeof value === 'string')
-            return;
-        setGroup(value);
-    };
-    const handlePanelNameChange = (e) => {
-        setPanelName(e.target.value);
-    };
-    const handlePanelDescriptionChange = (e) => {
-        setPanelDescription(e.target.value);
-    };
-    const handleKindChange = (e) => {
-        setKind(e.target.value);
-    };
-    const handleOptionsChange = (next) => {
-        setOptions(next);
-    };
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        if ((panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex) !== undefined && !(panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey)) {
-            addNewPanel();
-        }
-        else if (panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) {
-            editPanel();
-        }
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelDrawer", {
+    enumerable: true,
+    get: ()=>PanelDrawer
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+const _panelEditorModel = require("./panel-editor-model");
+const _panelEditorForm = require("./PanelEditorForm");
+const PanelDrawer = ()=>{
+    const { closePanelDrawer  } = (0, _context.useDashboardApp)();
+    const model = (0, _panelEditorModel.usePanelDrawerModel)();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = (0, _react.useState)(false);
+    const handleClose = ()=>setIsClosing(true);
+    // Don't call closeDrawer on the store until the Drawer has completely transitioned out
+    const handleExited = ()=>{
         closePanelDrawer();
+        setIsClosing(false);
     };
-    const addNewPanel = () => {
-        if ((panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.groupIndex) === undefined) {
-            return;
+    // Drawer is open if we have a model and we're not transitioning out
+    const isOpen = model !== undefined && isClosing === false;
+    const handleSubmit = (values)=>{
+        // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
+        if (model === undefined) {
+            throw new Error('Cannot apply changes');
         }
-        const panelKey = (0, functions_1.removeWhiteSpacesAndSpecialCharacters)(panelName);
-        updatePanel(panelKey, {
-            kind,
-            options,
-            display: { name: panelName, description: panelDescription },
-        }, panelDrawer.groupIndex);
+        model.applyChanges(values);
+        handleClose();
     };
-    const editPanel = () => {
-        if ((panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey) === undefined) {
-            return;
-        }
-        updatePanel(panelDrawer.panelKey, {
-            ...panels[panelDrawer.panelKey],
-            kind,
-            options,
-            display: { name: panelName !== null && panelName !== void 0 ? panelName : '', description: panelDescription },
-        });
-        // TO DO: need to move panel if panel group changes
-    };
-    return ((0, jsx_runtime_1.jsx)(components_1.Drawer, { isOpen: !!panelDrawer, onClose: () => closePanelDrawer(), children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(PanelDrawerHeader, { panelKey: panelDrawer === null || panelDrawer === void 0 ? void 0 : panelDrawer.panelKey, onClose: () => closePanelDrawer() }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "select-group", children: "Group" }), (0, jsx_runtime_1.jsx)(material_1.Select, { required: true, labelId: "select-group", label: "Group", value: group !== null && group !== void 0 ? group : 0, onChange: handleGroupChange, children: layouts.map((layout, index) => {
-                                            var _a;
-                                            return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: index, children: ((_a = layout.spec.display) === null || _a === void 0 ? void 0 : _a.title) || `Group ${index + 1}` }, index));
-                                        }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 8, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, sx: { flexGrow: '1' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, label: "Panel Name", value: panelName, variant: "outlined", onChange: handlePanelNameChange }), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Description", value: panelDescription, variant: "outlined", onChange: handlePanelDescriptionChange })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "panel-type-label", children: "Panel Type" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { required: true, labelId: "panel-type-label", label: "Panel Type", value: kind, onChange: handleKindChange, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "LineChart", children: "Line Chart" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "GaugeChart", children: "Gauge Chart" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "StatChart", children: "Stat Chart" })] })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 8, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: kind !== '' && (0, jsx_runtime_1.jsx)(PanelOptionsEditor_1.PanelOptionsEditor, { kind: kind, value: options, onChange: handleOptionsChange }) }) })] })] }) }));
-};
-const PanelDrawerHeader = ({ panelKey, onClose }) => {
-    const action = panelKey ? 'Edit' : 'Add';
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            marginBottom: (theme) => theme.spacing(2),
-            paddingBottom: (theme) => theme.spacing(2),
-            borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", children: `${action} Panel` }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", variant: "contained", children: panelKey ? 'Apply' : 'Add' }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onClose, children: "Cancel" })] })] }));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        SlideProps: {
+            onExited: handleExited
+        },
+        children: model !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginBottom: (theme)=>theme.spacing(2),
+                        paddingBottom: (theme)=>theme.spacing(2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h2",
+                            children: model.drawerTitle
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    form: _panelEditorForm.panelEditorFormId,
+                                    children: model.submitButtonText
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    variant: "outlined",
+                                    onClick: handleClose,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelEditorForm.PanelEditorForm, {
+                    onSubmit: handleSubmit,
+                    initialValues: model.initialValues
+                })
+            ]
+        })
+    });
 };
-exports.default = PanelDrawer;

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

@@ -1,32 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -39,73 +10,101 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const plugin_system_1 = require("@perses-dev/plugin-system");
-const react_1 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const dashboardAppSlice = __importStar(require("../../context/DashboardAppSlice"));
-const layoutsSlice = __importStar(require("../../context/LayoutsSlice"));
-const context = __importStar(require("../../context/DashboardProvider"));
-const test_1 = require("../../test");
-const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
-const PanelDrawer_1 = __importDefault(require("./PanelDrawer"));
-const updatePanel = jest.fn();
-jest.spyOn(context, 'usePanels').mockReturnValue({
-    updatePanel,
-    panels: {},
-});
-const addItemToLayout = jest.fn();
-jest.spyOn(layoutsSlice, 'useLayouts').mockReturnValue({
-    addItemToLayout,
-    updateLayout: jest.fn(),
-    layouts: testDashboard_1.default.spec.layouts,
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-const dashboardApp = {
-    panelDrawer: {
-        groupIndex: 0,
-    },
-    openPanelDrawer: jest.fn(),
-    closePanelDrawer: jest.fn(),
-    panelGroupDialog: undefined,
-    openPanelGroupDialog: jest.fn(),
-    closePanelGroupDialog: jest.fn(),
-};
-describe('Panel Drawer', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-    const renderPanelDrawer = () => {
-        const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
-        addMockPlugin('Panel', 'FakePanel', test_1.FAKE_PANEL_PLUGIN);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsxs)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: [(0, jsx_runtime_1.jsx)(PanelDrawer_1.default, {}), ","] }));
+const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _testUtils = require("react-dom/test-utils");
+const _test = require("../../test");
+const _dashboardProvider = require("../../context/DashboardProvider");
+const _panelDrawer = require("./PanelDrawer");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('Panel Drawer', ()=>{
+    const renderPanelDrawer = ()=>{
+        const { addMockPlugin , pluginRegistryProps  } = (0, _test.mockPluginRegistryProps)();
+        addMockPlugin('Panel', 'LineChart', _test.FAKE_PANEL_PLUGIN);
+        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
+            ...pluginRegistryProps,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
+                initialState: {
+                    dashboardSpec: (0, _test.getTestDashboard)().spec,
+                    isEditMode: true
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.PanelDrawer, {})
+                ]
+            })
+        }));
+        const { value: storeApi  } = store;
+        if (storeApi === undefined) {
+            throw new Error('Expected dashboard store to be set after initial render');
+        }
+        return storeApi;
     };
-    it('should add new panel', () => {
-        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
-        renderPanelDrawer();
-        const nameInput = react_1.screen.getByLabelText(/Panel Name/);
-        user_event_1.default.type(nameInput, 'New Panel');
-        user_event_1.default.click(react_1.screen.getByText('Add'));
-        expect(updatePanel).toHaveBeenCalledWith('NewPanel', {
-            kind: '',
-            display: { name: 'New Panel', description: '' },
-            options: {},
-        }, 0);
+    it('should add new panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for a new panel (i.e. no panel key)
+        (0, _testUtils.act)(()=>storeApi.getState().openPanelDrawer({
+                groupIndex: 0
+            }));
+        const nameInput = await _react.screen.findByLabelText(/Panel Name/);
+        _userEvent.default.type(nameInput, 'New Panel');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        // TODO: Assert drawer is closed?
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // Should have the new panel in the store
+            NewPanel: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'New Panel',
+                        description: ''
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
     });
-    it('should edit an existing panel', () => {
-        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue({
-            ...dashboardApp,
-            panelDrawer: {
+    it('should edit an existing panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for an existing panel
+        (0, _testUtils.act)(()=>storeApi.getState().openPanelDrawer({
                 groupIndex: 0,
-                panelKey: 'cpu',
-            },
-        });
-        renderPanelDrawer();
-        const nameInput = react_1.screen.getByLabelText(/Panel Name/);
-        user_event_1.default.type(nameInput, 'cpu usage');
-        user_event_1.default.click(react_1.screen.getByText('Apply'));
-        expect(updatePanel).toHaveBeenCalledWith('cpu', {
-            display: { name: 'cpu usage', description: '' },
-            kind: '',
-            options: {},
+                panelKey: 'cpu'
+            }));
+        const nameInput = await _react.screen.findByLabelText(/Panel Name/);
+        _userEvent.default.clear(nameInput);
+        _userEvent.default.type(nameInput, 'cpu usage');
+        _userEvent.default.click(_react.screen.getByText('Apply'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            cpu: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu usage',
+                        description: ''
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {}
+                    }
+                }
+            }
         });
     });
 });

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

@@ -0,0 +1,152 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PanelEditorForm: ()=>PanelEditorForm,
+    panelEditorFormId: ()=>panelEditorFormId
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+const _panelEditorModel = require("./panel-editor-model");
+const _panelTypeSelect = require("./PanelTypeSelect");
+const _panelSpecEditor = require("./PanelSpecEditor");
+function PanelEditorForm(props) {
+    const { initialValues , onSubmit  } = props;
+    const { layouts  } = (0, _context.useLayouts)();
+    const [name, setName] = (0, _react.useState)(initialValues.name);
+    const [description, setDescription] = (0, _react.useState)(initialValues.description);
+    const [group, setGroup] = (0, _react.useState)(initialValues.group);
+    const [kind, setKind] = (0, _react.useState)(initialValues.kind);
+    const { spec , onSpecChange  } = (0, _panelEditorModel.usePanelSpecState)(kind, initialValues.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);
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        const values = {
+            name,
+            description,
+            group,
+            kind,
+            spec
+        };
+        onSubmit(values);
+    };
+    var ref;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("form", {
+        id: panelEditorFormId,
+        onSubmit: handleSubmit,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+            container: true,
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                        required: true,
+                        label: "Panel Name",
+                        value: name,
+                        variant: "outlined",
+                        onChange: (e)=>setName(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 4,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                id: "select-group",
+                                children: "Group"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+                                required: true,
+                                labelId: "select-group",
+                                label: "Group",
+                                value: group !== null && group !== void 0 ? group : 0,
+                                onChange: handleGroupChange,
+                                children: layouts.map((layout, index)=>{
+                                    var ref1;
+                                    /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.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);
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                        label: "Panel Description",
+                        value: description,
+                        variant: "outlined",
+                        onChange: (e)=>setDescription(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 4,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                id: "panel-type-label",
+                                children: "Panel Type"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelTypeSelect.PanelTypeSelect, {
+                                required: true,
+                                labelId: "panel-type-label",
+                                label: "Panel Type",
+                                value: kind,
+                                onChange: (e)=>setKind(e.target.value)
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: spec !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelSpecEditor.PanelSpecEditor, {
+                            panelPluginKind: kind,
+                            value: spec,
+                            onChange: onSpecChange
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+const panelEditorFormId = 'panel-editor-form';

package/dist/cjs/components/PanelDrawer/PanelSpecEditor.js

@@ -0,0 +1,40 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelSpecEditor", {
+    enumerable: true,
+    get: ()=>PanelSpecEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
+function PanelSpecEditor(props) {
+    const { panelPluginKind , ...others } = props;
+    const { data: plugin , isLoading  } = (0, _pluginSystem.usePlugin)('Panel', panelPluginKind, {
+        useErrorBoundary: true,
+        enabled: panelPluginKind !== ''
+    });
+    // TODO: Proper loading indicator
+    if (isLoading) {
+        return null;
+    }
+    if (plugin === undefined) {
+        throw new Error(`Missing OptionsEditorComponent for Panel plugin with kind '${panelPluginKind}'`);
+    }
+    const { OptionsEditorComponent  } = plugin;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(OptionsEditorComponent, {
+        ...others
+    });
+}

package/dist/cjs/components/PanelDrawer/PanelTypeSelect.js

@@ -0,0 +1,38 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelTypeSelect", {
+    enumerable: true,
+    get: ()=>PanelTypeSelect
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginSystem = require("@perses-dev/plugin-system");
+function PanelTypeSelect(props) {
+    const { value: propValue , ...others } = props;
+    const { data , isLoading  } = (0, _pluginSystem.useListPluginMetadata)('Panel');
+    // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
+    const value = propValue !== '' && isLoading ? '' : propValue;
+    // TODO: Does this need a loading indicator of some kind?
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+        ...others,
+        value: value,
+        children: data === null || data === void 0 ? void 0 : data.map((metadata)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: metadata.kind,
+                children: metadata.display.name
+            }, metadata.kind))
+    });
+}