@perses-dev/dashboards 0.8.0 → 0.9.0

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

@@ -0,0 +1,28 @@
+// 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
+});
+_exportStar(require("./PanelDrawer"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/PanelDrawer/panel-editor-model.js

@@ -0,0 +1,140 @@
+// 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, {
+    usePanelDrawerModel: ()=>usePanelDrawerModel,
+    usePanelSpecState: ()=>usePanelSpecState
+});
+const _react = require("react");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _useImmer = require("use-immer");
+const _context = require("../../context");
+const _functions = require("../../utils/functions");
+function usePanelDrawerModel() {
+    const { panelDrawer  } = (0, _context.useDashboardApp)();
+    const { panels , updatePanel  } = (0, _context.usePanels)();
+    // If we're closed, no model to return
+    if (panelDrawer === undefined) {
+        return undefined;
+    }
+    // If we don't have a panel key, we're adding a new panel
+    const { panelKey , groupIndex  } = panelDrawer;
+    if (panelKey === undefined) {
+        return {
+            drawerTitle: 'Add Panel',
+            submitButtonText: 'Add',
+            initialValues: {
+                name: '',
+                description: '',
+                group: groupIndex !== null && groupIndex !== void 0 ? groupIndex : 0,
+                kind: '',
+                spec: {}
+            },
+            applyChanges: (values)=>{
+                const { name , description , group , kind , spec  } = values;
+                const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(name);
+                updatePanel(panelKey, {
+                    kind: 'Panel',
+                    spec: {
+                        display: {
+                            name,
+                            description
+                        },
+                        plugin: {
+                            kind,
+                            spec
+                        }
+                    }
+                }, group);
+            }
+        };
+    }
+    // Otherwise we have a panel key, so we're trying to edit an existing panel
+    const existingPanel = panels[panelKey];
+    // TODO: Can we better express this via the type system on the dashboard store to avoid these states?
+    if (existingPanel === undefined) {
+        throw new Error(`Cannot find existing panel '${panelKey}' to edit`);
+    }
+    if (groupIndex === undefined) {
+        throw new Error(`Cannot edit existing panel '${panelKey}' without its group index`);
+    }
+    var _description;
+    return {
+        drawerTitle: 'Edit Panel',
+        submitButtonText: 'Apply',
+        initialValues: {
+            name: existingPanel.spec.display.name,
+            description: (_description = existingPanel.spec.display.description) !== null && _description !== void 0 ? _description : '',
+            group: groupIndex,
+            kind: existingPanel.spec.plugin.kind,
+            spec: existingPanel.spec.plugin.spec
+        },
+        applyChanges: (values)=>{
+            const { name , description , group , kind , spec  } = values;
+            updatePanel(panelKey, {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name,
+                        description
+                    },
+                    plugin: {
+                        kind,
+                        spec
+                    }
+                }
+            });
+            if (group !== groupIndex) {
+            // TO DO: need to move panel if panel group changes
+            }
+        }
+    };
+}
+function usePanelSpecState(panelPluginKind, initialState) {
+    // Keeping track of spec values by kind allows users to switch between panel types and come back with their old
+    // values intact from before the switch
+    const [specByKind, setSpecByKind] = (0, _useImmer.useImmer)({
+        [panelPluginKind]: initialState
+    });
+    const { data: plugin  } = (0, _pluginSystem.usePlugin)('Panel', panelPluginKind, {
+        enabled: panelPluginKind !== ''
+    });
+    const pluginInitialSpec = (0, _react.useMemo)(()=>{
+        return plugin === null || plugin === void 0 ? void 0 : plugin.createInitialOptions();
+    }, [
+        plugin
+    ]);
+    var _panelPluginKind;
+    // Use the value in specByKind or if unset, use the initial values from the plugin (which could still be undefined)
+    const spec = (_panelPluginKind = specByKind[panelPluginKind]) !== null && _panelPluginKind !== void 0 ? _panelPluginKind : pluginInitialSpec;
+    // TODO: Do we want to expose more of a immer style API to plugin authors for managing their state, rather than the
+    // current "onChange" API?
+    const onSpecChange = (next)=>{
+        setSpecByKind((draft)=>{
+            draft[panelPluginKind] = next;
+        });
+    };
+    return {
+        spec,
+        onSpecChange
+    };
+}

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -1,9 +1,3 @@
-"use strict";
-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.
@@ -16,45 +10,140 @@ 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 react_1 = require("react");
-const material_1 = require("@mui/material");
-const Close_1 = __importDefault(require("mdi-material-ui/Close"));
-const context_1 = require("../../context");
-const PanelGroupDialog = () => {
-    var _a, _b, _c, _d, _e;
-    const { layouts, updateLayout } = (0, context_1.useLayouts)();
-    const { panelGroupDialog, closePanelGroupDialog } = (0, context_1.useDashboardApp)();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const { groupIndex } = panelGroupDialog; // PanelGroupDialog is only mounted if panelGroupDialog is defined
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const PanelGroupDialog = ()=>{
+    var ref, ref1, ref2, ref3, ref4;
+    const { layouts , updateLayout  } = (0, _context.useLayouts)();
+    const { panelGroupDialog , closePanelGroupDialog  } = (0, _context.useDashboardApp)();
+    const groupIndex = panelGroupDialog === null || panelGroupDialog === void 0 ? void 0 : panelGroupDialog.groupIndex;
     const isEditingPanelGroup = groupIndex !== undefined;
-    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(isEditingPanelGroup && !((_c = (_b = (_a = layouts[groupIndex]) === null || _a === void 0 ? void 0 : _a.spec.display) === null || _b === void 0 ? void 0 : _b.collapse) === null || _c === void 0 ? void 0 : _c.open));
-    const [name, setName] = (0, react_1.useState)(isEditingPanelGroup ? (_e = (_d = layouts[groupIndex]) === null || _d === void 0 ? void 0 : _d.spec.display) === null || _e === void 0 ? void 0 : _e.title : '');
-    const handleSubmit = (e) => {
-        var _a, _b;
+    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(isEditingPanelGroup && !((ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.display) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.collapse) === null || ref2 === void 0 ? void 0 : ref2.open));
+    const [name, setName] = (0, _react.useState)(isEditingPanelGroup ? (ref4 = (ref3 = layouts[groupIndex]) === null || ref3 === void 0 ? void 0 : ref3.spec.display) === null || ref4 === void 0 ? void 0 : ref4.title : '');
+    const handleSubmit = (e)=>{
+        var ref;
         e.preventDefault();
+        var _items;
         const newLayout = {
             kind: 'Grid',
             spec: {
                 display: {
                     title: name !== null && name !== void 0 ? name : '',
                     collapse: {
-                        open: !isCollapsed,
-                    },
+                        open: !isCollapsed
+                    }
                 },
-                items: groupIndex === undefined ? [] : (_b = (_a = layouts[groupIndex]) === null || _a === void 0 ? void 0 : _a.spec.items) !== null && _b !== void 0 ? _b : [],
-            },
+                items: groupIndex === undefined ? [] : (_items = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.items) !== null && _items !== void 0 ? _items : []
+            }
         };
         updateLayout(newLayout, groupIndex);
         closePanelGroupDialog();
     };
-    const handleSelectCollapsedStateChange = (e) => {
+    const handleSelectCollapsedStateChange = (e)=>{
         const isCollapsed = e.target.value === 'Close';
         setIsCollapsed(isCollapsed);
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: "Panel Group" }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "Close", onClick: () => closePanelGroupDialog(), sx: (theme) => ({
-                    position: 'absolute',
-                    top: theme.spacing(0.5),
-                    right: theme.spacing(0.5),
-                }), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { width: '500px' }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, label: "Name", variant: "outlined", value: name, onChange: (e) => setName(e.target.value) }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Collapse State" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { required: true, displayEmpty: true, labelId: "select-collapse-state", size: "small", value: isCollapsed ? 'Close' : 'Open', onChange: handleSelectCollapsedStateChange, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'Open', children: "Open" }, 'open'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'Close', children: "Close" }, 'close')] })] })] }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", children: isEditingPanelGroup ? 'Apply' : 'Add' }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => closePanelGroupDialog(), children: "Cancel" })] })] })] }));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Panel Group"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closePanelGroupDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+                onSubmit: handleSubmit,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                        required: true,
+                                        label: "Name",
+                                        variant: "outlined",
+                                        value: name,
+                                        onChange: (e)=>setName(e.target.value)
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                                    sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        width: '100%',
+                                        justifyContent: 'space-between'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                            children: "Collapse State"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+                                            required: true,
+                                            displayEmpty: true,
+                                            labelId: "select-collapse-state",
+                                            size: "small",
+                                            value: isCollapsed ? 'Close' : 'Open',
+                                            onChange: handleSelectCollapsedStateChange,
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                                    value: 'Open',
+                                                    children: "Open"
+                                                }, 'open'),
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                                    value: 'Close',
+                                                    children: "Close"
+                                                }, 'close')
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                type: "submit",
+                                children: isEditingPanelGroup ? 'Apply' : 'Add'
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>closePanelGroupDialog(),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 };
-exports.default = PanelGroupDialog;
+const _default = PanelGroupDialog;

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

@@ -1,95 +1,102 @@
+// 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";
-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;
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-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");
-const react_1 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const immer_1 = __importDefault(require("immer"));
-const dashboardAppSlice = __importStar(require("../../context/DashboardAppSlice"));
-const layoutsSlice = __importStar(require("../../context/LayoutsSlice"));
-const test_1 = require("../../test");
-const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
-const PanelGroupDialog_1 = __importDefault(require("./PanelGroupDialog"));
-const dashboardApp = {
-    panelDrawer: undefined,
-    openPanelDrawer: jest.fn(),
-    closePanelDrawer: jest.fn(),
-    panelGroupDialog: {
-        groupIndex: undefined,
-    },
-    openPanelGroupDialog: jest.fn(),
-    closePanelGroupDialog: jest.fn(),
-};
-const updateLayout = jest.fn();
-jest.spyOn(layoutsSlice, 'useLayouts').mockReturnValue({
-    updateLayout,
-    addItemToLayout: jest.fn(),
-    layouts: testDashboard_1.default.spec.layouts,
-});
-describe('Add Panel Group', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-    it('should add new panel group', () => {
-        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {}));
-        const nameInput = react_1.screen.getByLabelText(/Name/);
-        user_event_1.default.type(nameInput, 'New Panel Group');
-        user_event_1.default.click(react_1.screen.getByText('Add'));
-        expect(updateLayout).toHaveBeenCalledWith({
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _testUtils = require("react-dom/test-utils");
+const _context = require("../../context");
+const _test = require("../../test");
+const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("./PanelGroupDialog"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('Add Panel Group', ()=>{
+    const renderDialog = ()=>{
+        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
+            initialState: {
+                dashboardSpec: (0, _test.getTestDashboard)().spec,
+                isEditMode: true
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {})
+            ]
+        }));
+        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 group', async ()=>{
+        // jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
+        const storeApi = renderDialog();
+        // Open the dialog for a new panel group
+        (0, _testUtils.act)(()=>storeApi.getState().openPanelGroupDialog());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'New Panel Group');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        const layouts = storeApi.getState().layouts;
+        expect(layouts).toContainEqual({
             kind: 'Grid',
             spec: {
                 display: {
                     title: 'New Panel Group',
                     collapse: {
-                        open: true,
-                    },
+                        open: true
+                    }
                 },
-                items: [],
-            },
-        }, undefined);
+                items: []
+            }
+        });
     });
-    it('should edit existing panel group', () => {
-        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue({
-            ...dashboardApp,
-            panelGroupDialog: {
-                groupIndex: 0,
-            },
+    it('should edit existing panel group', async ()=>{
+        const storeApi = renderDialog();
+        // Open the dialog for an existing panel group
+        (0, _testUtils.act)(()=>storeApi.getState().openPanelGroupDialog(0));
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.clear(nameInput);
+        _userEvent.default.type(nameInput, 'New Name');
+        _userEvent.default.click(_react.screen.getByText('Apply'));
+        const layouts = storeApi.getState().layouts;
+        expect(layouts).toContainEqual({
+            kind: 'Grid',
+            spec: {
+                display: {
+                    title: 'New Name',
+                    collapse: {
+                        open: true
+                    }
+                },
+                items: [
+                    {
+                        content: {
+                            $ref: '#/spec/panels/cpu'
+                        },
+                        height: 4,
+                        width: 12,
+                        x: 0,
+                        y: 0
+                    }
+                ]
+            }
         });
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {}));
-        const nameInput = react_1.screen.getByLabelText(/Name/);
-        user_event_1.default.type(nameInput, 'New Name');
-        user_event_1.default.click(react_1.screen.getByText('Apply'));
-        expect(updateLayout).toHaveBeenCalledWith((0, immer_1.default)(testDashboard_1.default.spec.layouts[0], (draftState) => {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            draftState.spec.display.title += 'New Name';
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            draftState.spec.display.collapse = { open: false };
-        }), 0);
     });
 });