@perses-dev/dashboards 0.8.0 → 0.9.0

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

@@ -0,0 +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":"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,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,GAAG,QAAQ,sBAAsB,CAAC;AAC3C,SACEC,0BAA0B,EAC1BC,iBAAiB,EACjBC,gBAAgB,EAChBC,uBAAuB,EACvBC,iBAAiB,QACZ,YAAY,CAAC;AACpB,SAASC,iBAAiB,QAAQ,iCAAiC,CAAC;AACpE,SAASC,WAAW,QAAQ,eAAe,CAAC;AAE5CC,QAAQ,CAAC,cAAc,EAAE,IAAM;IAC7B,MAAMC,iBAAiB,GAAG,IAAM;QAC9B,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGP,uBAAuB,EAAE,AAAC;QACzEM,aAAa,CAAC,OAAO,EAAE,WAAW,EAAER,iBAAiB,CAAC,CAAC;QAEvD,MAAM,EAAEU,KAAK,CAAA,EAAEC,oBAAoB,CAAA,EAAE,GAAGZ,0BAA0B,EAAE,AAAC;QAErEI,iBAAiB,eACf,KAACR,cAAc;YAAE,GAAGc,mBAAmB;sBACrC,cAAA,MAACL,iBAAiB;gBAACQ,YAAY,EAAE;oBAAEC,aAAa,EAAEZ,gBAAgB,EAAE,CAACa,IAAI;oBAAEC,UAAU,EAAE,IAAI;iBAAE;;kCAC3F,KAACJ,oBAAoB,KAAG;kCACxB,KAACN,WAAW,KAAG;;cACG;UACL,CAClB,CAAC;QAEF,MAAM,EAAEW,KAAK,EAAEC,QAAQ,CAAA,EAAE,GAAGP,KAAK,AAAC;QAClC,IAAIO,QAAQ,KAAKC,SAAS,EAAE;YAC1B,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC,CAAC;QAC7E,CAAC;QAED,OAAOF,QAAQ,CAAC;IAClB,CAAC,AAAC;IAEFG,EAAE,CAAC,sBAAsB,EAAE,UAAY;QACrC,MAAMH,QAAQ,GAAGV,iBAAiB,EAAE,AAAC;QAErC,sDAAsD;QACtDT,GAAG,CAAC,IAAMmB,QAAQ,CAACI,QAAQ,EAAE,CAACC,eAAe,CAAC;gBAAEC,UAAU,EAAE,CAAC;aAAE,CAAC,CAAC,CAAC;QAElE,MAAMC,SAAS,GAAG,MAAM5B,MAAM,CAAC6B,eAAe,cAAc,AAAC;QAC7D5B,SAAS,CAAC6B,IAAI,CAACF,SAAS,EAAE,WAAW,CAAC,CAAC;QACvC3B,SAAS,CAAC8B,KAAK,CAAC/B,MAAM,CAACgC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QAEzC,iCAAiC;QACjC,MAAMC,MAAM,GAAGZ,QAAQ,CAACI,QAAQ,EAAE,CAACQ,MAAM,AAAC;QAC1CC,MAAM,CAACD,MAAM,CAAC,CAACE,aAAa,CAAC;YAC3B,yCAAyC;YACzCC,QAAQ,EAAE;gBACRC,IAAI,EAAE,OAAO;gBACbnB,IAAI,EAAE;oBACJoB,OAAO,EAAE;wBAAEC,IAAI,EAAE,WAAW;wBAAEC,WAAW,EAAE,EAAE;qBAAE;oBAC/CC,MAAM,EAAE;wBACNJ,IAAI,EAAE,EAAE;wBACRnB,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHM,EAAE,CAAC,+BAA+B,EAAE,UAAY;QAC9C,MAAMH,QAAQ,GAAGV,iBAAiB,EAAE,AAAC;QAErC,wCAAwC;QACxCT,GAAG,CAAC,IAAMmB,QAAQ,CAACI,QAAQ,EAAE,CAACC,eAAe,CAAC;gBAAEC,UAAU,EAAE,CAAC;gBAAEe,QAAQ,EAAE,KAAK;aAAE,CAAC,CAAC,CAAC;QAEnF,MAAMd,SAAS,GAAG,MAAM5B,MAAM,CAAC6B,eAAe,cAAc,AAAC;QAC7D5B,SAAS,CAAC0C,KAAK,CAACf,SAAS,CAAC,CAAC;QAC3B3B,SAAS,CAAC6B,IAAI,CAACF,SAAS,EAAE,WAAW,CAAC,CAAC;QACvC3B,SAAS,CAAC8B,KAAK,CAAC/B,MAAM,CAACgC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAE3C,MAAMC,MAAM,GAAGZ,QAAQ,CAACI,QAAQ,EAAE,CAACQ,MAAM,AAAC;QAC1CC,MAAM,CAACD,MAAM,CAAC,CAACE,aAAa,CAAC;YAC3BS,GAAG,EAAE;gBACHP,IAAI,EAAE,OAAO;gBACbnB,IAAI,EAAE;oBACJoB,OAAO,EAAE;wBAAEC,IAAI,EAAE,WAAW;wBAAEC,WAAW,EAAE,EAAE;qBAAE;oBAC/CC,MAAM,EAAE;wBACNJ,IAAI,EAAE,iBAAiB;wBACvBnB,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PanelEditorFormValues } from './panel-editor-model';
+export interface PanelEditorFormProps {
+    initialValues: PanelEditorFormValues;
+    onSubmit: (values: PanelEditorFormValues) => void;
+}
+export declare function PanelEditorForm(props: PanelEditorFormProps): JSX.Element;
+/**
+ * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.
+ */
+export declare const panelEditorFormId = "panel-editor-form";
+//# sourceMappingURL=PanelEditorForm.d.ts.map

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

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

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -0,0 +1,142 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Grid, FormControl, InputLabel, Select, MenuItem, TextField } 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';
+export function PanelEditorForm(props) {
+    const { initialValues , onSubmit  } = props;
+    const { layouts  } = useLayouts();
+    const [name, setName] = useState(initialValues.name);
+    const [description, setDescription] = useState(initialValues.description);
+    const [group, setGroup] = useState(initialValues.group);
+    const [kind, setKind] = useState(initialValues.kind);
+    const { spec , onSpecChange  } = 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__*/ _jsx("form", {
+        id: panelEditorFormId,
+        onSubmit: handleSubmit,
+        children: /*#__PURE__*/ _jsxs(Grid, {
+            container: true,
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ _jsx(TextField, {
+                        required: true,
+                        label: "Panel Name",
+                        value: name,
+                        variant: "outlined",
+                        onChange: (e)=>setName(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 4,
+                    children: /*#__PURE__*/ _jsxs(FormControl, {
+                        children: [
+                            /*#__PURE__*/ _jsx(InputLabel, {
+                                id: "select-group",
+                                children: "Group"
+                            }),
+                            /*#__PURE__*/ _jsx(Select, {
+                                required: true,
+                                labelId: "select-group",
+                                label: "Group",
+                                value: group !== null && group !== void 0 ? group : 0,
+                                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);
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ _jsx(TextField, {
+                        label: "Panel Description",
+                        value: description,
+                        variant: "outlined",
+                        onChange: (e)=>setDescription(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ _jsx(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)
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: spec !== undefined && /*#__PURE__*/ _jsx(PanelSpecEditor, {
+                            panelPluginKind: kind,
+                            value: spec,
+                            onChange: onSpecChange
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+/**
+ * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.
+ */ export const panelEditorFormId = 'panel-editor-form';
+
+//# sourceMappingURL=PanelEditorForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEventHandler, useState } from 'react';\nimport { Grid, FormControl, InputLabel, Select, MenuItem, TextField, SelectProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useLayouts } from '../../context';\nimport { PanelEditorFormValues, usePanelSpecState } from './panel-editor-model';\nimport { PanelTypeSelect } from './PanelTypeSelect';\nimport { PanelSpecEditor } from './PanelSpecEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorFormValues;\n  onSubmit: (values: PanelEditorFormValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const { layouts } = useLayouts();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [group, setGroup] = useState(initialValues.group);\n  const [kind, setKind] = useState(initialValues.kind);\n  const { spec, onSpecChange } = usePanelSpecState(kind, initialValues.spec);\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroup(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorFormValues = { name, description, group, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    <form id={panelEditorFormId} onSubmit={handleSubmit}>\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            label=\"Panel Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={group ?? 0} onChange={handleGroupChange}>\n              {layouts.map((layout, index) => (\n                <MenuItem key={index} value={index}>\n                  {layout.spec.display?.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            label=\"Panel Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl>\n            <InputLabel id=\"panel-type-label\">Panel Type</InputLabel>\n            <PanelTypeSelect\n              required\n              labelId=\"panel-type-label\"\n              label=\"Panel Type\"\n              value={kind}\n              onChange={(e) => setKind(e.target.value)}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            {/* Wait until we have some proper initial spec values before rendering the editor */}\n            {spec !== undefined && <PanelSpecEditor panelPluginKind={kind} value={spec} onChange={onSpecChange} />}\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","Grid","FormControl","InputLabel","Select","MenuItem","TextField","ErrorAlert","ErrorBoundary","useLayouts","usePanelSpecState","PanelTypeSelect","PanelSpecEditor","PanelEditorForm","props","initialValues","onSubmit","layouts","name","setName","description","setDescription","group","setGroup","kind","setKind","spec","onSpecChange","handleGroupChange","e","value","target","handleSubmit","preventDefault","values","layout","form","id","panelEditorFormId","container","spacing","item","xs","required","label","variant","onChange","labelId","map","index","display","title","FallbackComponent","undefined","panelPluginKind"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OptionsEditorProps } from '@perses-dev/plugin-system';
+export interface PanelSpecEditorProps extends OptionsEditorProps<unknown> {
+    panelPluginKind: string;
+}
+export declare function PanelSpecEditor(props: PanelSpecEditorProps): JSX.Element | null;
+//# sourceMappingURL=PanelSpecEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelSpecEditor.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,kBAAkB,EAAa,MAAM,2BAA2B,CAAC;AAE1E,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB,CAAC,OAAO,CAAC;IACvE,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,sBAkB1D"}

package/dist/components/PanelDrawer/PanelSpecEditor.js

@@ -0,0 +1,34 @@
+// 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 { usePlugin } from '@perses-dev/plugin-system';
+export function PanelSpecEditor(props) {
+    const { panelPluginKind , ...others } = props;
+    const { data: plugin , isLoading  } = 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__*/ _jsx(OptionsEditorComponent, {
+        ...others
+    });
+}
+
+//# sourceMappingURL=PanelSpecEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelSpecEditor.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 { OptionsEditorProps, usePlugin } from '@perses-dev/plugin-system';\n\nexport interface PanelSpecEditorProps extends OptionsEditorProps<unknown> {\n  panelPluginKind: string;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps) {\n  const { panelPluginKind, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, {\n    useErrorBoundary: true,\n    enabled: panelPluginKind !== '',\n  });\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing OptionsEditorComponent for Panel plugin with kind '${panelPluginKind}'`);\n  }\n\n  const { OptionsEditorComponent } = plugin;\n  return <OptionsEditorComponent {...others} />;\n}\n"],"names":["usePlugin","PanelSpecEditor","props","panelPluginKind","others","data","plugin","isLoading","useErrorBoundary","enabled","undefined","Error","OptionsEditorComponent"],"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,SAA6BA,SAAS,QAAQ,2BAA2B,CAAC;AAM1E,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,eAAe,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGF,KAAK,AAAC;IAC7C,MAAM,EAAEG,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGP,SAAS,CAAC,OAAO,EAAEG,eAAe,EAAE;QACtEK,gBAAgB,EAAE,IAAI;QACtBC,OAAO,EAAEN,eAAe,KAAK,EAAE;KAChC,CAAC,AAAC;IAEH,iCAAiC;IACjC,IAAII,SAAS,EAAE;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAID,MAAM,KAAKI,SAAS,EAAE;QACxB,MAAM,IAAIC,KAAK,CAAC,CAAC,2DAA2D,EAAER,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACpG,CAAC;IAED,MAAM,EAAES,sBAAsB,CAAA,EAAE,GAAGN,MAAM,AAAC;IAC1C,qBAAO,KAACM,sBAAsB;QAAE,GAAGR,MAAM;MAAI,CAAC;AAChD,CAAC"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SelectProps } from '@mui/material';
+export declare type PanelTypeSelectProps = Omit<SelectProps<string>, 'children'>;
+/**
+ * Displays a MUI Select input for selecing a Panel type. Queries the plugin system to get the list of all panel types.
+ */
+export declare function PanelTypeSelect(props: PanelTypeSelectProps): JSX.Element;
+//# sourceMappingURL=PanelTypeSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTypeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelTypeSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,WAAW,EAAY,MAAM,eAAe,CAAC;AAG9D,oBAAY,oBAAoB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC;AAEzE;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAiB1D"}

package/dist/components/PanelDrawer/PanelTypeSelect.js

@@ -0,0 +1,34 @@
+// 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 { Select, MenuItem } from '@mui/material';
+import { useListPluginMetadata } from '@perses-dev/plugin-system';
+/**
+ * Displays a MUI Select input for selecing a Panel type. Queries the plugin system to get the list of all panel types.
+ */ export function PanelTypeSelect(props) {
+    const { value: propValue , ...others } = props;
+    const { data , isLoading  } = 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__*/ _jsx(Select, {
+        ...others,
+        value: value,
+        children: data === null || data === void 0 ? void 0 : data.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: metadata.kind,
+                children: metadata.display.name
+            }, metadata.kind))
+    });
+}
+
+//# sourceMappingURL=PanelTypeSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelTypeSelect.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 { Select, SelectProps, MenuItem } from '@mui/material';\nimport { useListPluginMetadata } from '@perses-dev/plugin-system';\n\nexport type PanelTypeSelectProps = Omit<SelectProps<string>, 'children'>;\n\n/**\n * Displays a MUI Select input for selecing a Panel type. Queries the plugin system to get the list of all panel types.\n */\nexport function PanelTypeSelect(props: PanelTypeSelectProps) {\n  const { value: propValue, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata('Panel');\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = propValue !== '' && isLoading ? '' : propValue;\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <Select {...others} value={value}>\n      {data?.map((metadata) => (\n        <MenuItem key={metadata.kind} value={metadata.kind}>\n          {metadata.display.name}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n"],"names":["Select","MenuItem","useListPluginMetadata","PanelTypeSelect","props","value","propValue","others","data","isLoading","map","metadata","kind","display","name"],"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,MAAM,EAAeC,QAAQ,QAAQ,eAAe,CAAC;AAC9D,SAASC,qBAAqB,QAAQ,2BAA2B,CAAC;AAIlE;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,KAAK,EAAEC,SAAS,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IAC9C,MAAM,EAAEI,IAAI,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGP,qBAAqB,CAAC,OAAO,CAAC,AAAC;IAE3D,qHAAqH;IACrH,MAAMG,KAAK,GAAGC,SAAS,KAAK,EAAE,IAAIG,SAAS,GAAG,EAAE,GAAGH,SAAS,AAAC;IAE7D,yDAAyD;IACzD,qBACE,KAACN,MAAM;QAAE,GAAGO,MAAM;QAAEF,KAAK,EAAEA,KAAK;kBAC7BG,IAAI,aAAJA,IAAI,WAAK,GAATA,KAAAA,CAAS,GAATA,IAAI,CAAEE,GAAG,CAAC,CAACC,QAAQ,iBAClB,KAACV,QAAQ;gBAAqBI,KAAK,EAAEM,QAAQ,CAACC,IAAI;0BAC/CD,QAAQ,CAACE,OAAO,CAACC,IAAI;eADTH,QAAQ,CAACC,IAAI,CAEjB,AACZ,CAAC;MACK,CACT;AACJ,CAAC"}

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

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

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

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

package/dist/components/PanelDrawer/index.js

@@ -0,0 +1,15 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './PanelDrawer';
+
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/PanelDrawer/panel-editor-model.d.ts

@@ -0,0 +1,27 @@
+export interface PanelEditorFormValues {
+    name: string;
+    description: string;
+    group: number;
+    kind: string;
+    spec: unknown;
+}
+interface PanelDrawerModel {
+    drawerTitle: string;
+    submitButtonText: string;
+    initialValues: PanelEditorFormValues;
+    applyChanges: (values: PanelEditorFormValues) => void;
+}
+/**
+ * Returns props that are different depending on whether the PanelDrawer has been opened in add or edit mode. If the
+ * drawer isn't open at all, returns undefined.
+ */
+export declare function usePanelDrawerModel(): PanelDrawerModel | undefined;
+/**
+ * Manages panel plugin spec state. The spec will be undefined while a plugin is being loaded.
+ */
+export declare function usePanelSpecState(panelPluginKind: string, initialState: unknown): {
+    spec: unknown;
+    onSpecChange: (next: unknown) => void;
+};
+export {};
+//# sourceMappingURL=panel-editor-model.d.ts.map

package/dist/components/PanelDrawer/panel-editor-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-editor-model.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/panel-editor-model.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAGD,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,qBAAqB,CAAC;IACrC,YAAY,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACvD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,SAAS,CAkFlE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,eAAe,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO;;yBAYlD,OAAO;EAUpC"}

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

@@ -0,0 +1,133 @@
+// 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 { useMemo } from 'react';
+import { usePlugin } from '@perses-dev/plugin-system';
+import { useImmer } from 'use-immer';
+import { useDashboardApp, usePanels } from '../../context';
+import { removeWhiteSpacesAndSpecialCharacters } from '../../utils/functions';
+/**
+ * Returns props that are different depending on whether the PanelDrawer has been opened in add or edit mode. If the
+ * drawer isn't open at all, returns undefined.
+ */ export function usePanelDrawerModel() {
+    const { panelDrawer  } = useDashboardApp();
+    const { panels , updatePanel  } = 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 = 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
+            }
+        }
+    };
+}
+/**
+ * Manages panel plugin spec state. The spec will be undefined while a plugin is being loaded.
+ */ export 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] = useImmer({
+        [panelPluginKind]: initialState
+    });
+    const { data: plugin  } = usePlugin('Panel', panelPluginKind, {
+        enabled: panelPluginKind !== ''
+    });
+    const pluginInitialSpec = 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
+    };
+}
+
+//# sourceMappingURL=panel-editor-model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelDrawer/panel-editor-model.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { usePlugin } from '@perses-dev/plugin-system';\nimport { useImmer } from 'use-immer';\nimport { useDashboardApp, usePanels } from '../../context';\nimport { removeWhiteSpacesAndSpecialCharacters } from '../../utils/functions';\n\nexport interface PanelEditorFormValues {\n  name: string;\n  description: string;\n  group: number;\n  kind: string;\n  spec: unknown;\n}\n\n// Props that vary based on whether the PanelDrawer is in add or edit mode\ninterface PanelDrawerModel {\n  drawerTitle: string;\n  submitButtonText: string;\n  initialValues: PanelEditorFormValues;\n  applyChanges: (values: PanelEditorFormValues) => void;\n}\n\n/**\n * Returns props that are different depending on whether the PanelDrawer has been opened in add or edit mode. If the\n * drawer isn't open at all, returns undefined.\n */\nexport function usePanelDrawerModel(): PanelDrawerModel | undefined {\n  const { panelDrawer } = useDashboardApp();\n  const { panels, updatePanel } = usePanels();\n\n  // If we're closed, no model to return\n  if (panelDrawer === undefined) {\n    return undefined;\n  }\n\n  // If we don't have a panel key, we're adding a new panel\n  const { panelKey, groupIndex } = panelDrawer;\n  if (panelKey === undefined) {\n    return {\n      drawerTitle: 'Add Panel',\n      submitButtonText: 'Add',\n      initialValues: {\n        name: '',\n        description: '',\n        group: groupIndex ?? 0,\n        kind: '',\n        spec: {},\n      },\n      applyChanges: (values) => {\n        const { name, description, group, kind, spec } = values;\n        const panelKey = removeWhiteSpacesAndSpecialCharacters(name);\n        updatePanel(\n          panelKey,\n          {\n            kind: 'Panel',\n            spec: {\n              display: { name, description },\n              plugin: {\n                kind,\n                spec,\n              },\n            },\n          },\n          group\n        );\n      },\n    };\n  }\n\n  // Otherwise we have a panel key, so we're trying to edit an existing panel\n  const existingPanel = panels[panelKey];\n\n  // TODO: Can we better express this via the type system on the dashboard store to avoid these states?\n  if (existingPanel === undefined) {\n    throw new Error(`Cannot find existing panel '${panelKey}' to edit`);\n  }\n  if (groupIndex === undefined) {\n    throw new Error(`Cannot edit existing panel '${panelKey}' without its group index`);\n  }\n\n  return {\n    drawerTitle: 'Edit Panel',\n    submitButtonText: 'Apply',\n    initialValues: {\n      name: existingPanel.spec.display.name,\n      description: existingPanel.spec.display.description ?? '',\n      group: groupIndex,\n      kind: existingPanel.spec.plugin.kind,\n      spec: existingPanel.spec.plugin.spec, // TODO: Should we clone to be safe?\n    },\n    applyChanges: (values) => {\n      const { name, description, group, kind, spec } = values;\n      updatePanel(panelKey, {\n        kind: 'Panel',\n        spec: {\n          display: { name, description },\n          plugin: {\n            kind,\n            spec,\n          },\n        },\n      });\n\n      if (group !== groupIndex) {\n        // TO DO: need to move panel if panel group changes\n      }\n    },\n  };\n}\n\n/**\n * Manages panel plugin spec state. The spec will be undefined while a plugin is being loaded.\n */\nexport function usePanelSpecState(panelPluginKind: string, initialState: unknown) {\n  // Keeping track of spec values by kind allows users to switch between panel types and come back with their old\n  // values intact from before the switch\n  const [specByKind, setSpecByKind] = useImmer<Record<string, unknown>>({ [panelPluginKind]: initialState });\n  const { data: plugin } = usePlugin('Panel', panelPluginKind, { enabled: panelPluginKind !== '' });\n  const pluginInitialSpec = useMemo(() => plugin?.createInitialOptions(), [plugin]);\n\n  // Use the value in specByKind or if unset, use the initial values from the plugin (which could still be undefined)\n  const spec = specByKind[panelPluginKind] ?? pluginInitialSpec;\n\n  // TODO: Do we want to expose more of a immer style API to plugin authors for managing their state, rather than the\n  // current \"onChange\" API?\n  const onSpecChange = (next: unknown) => {\n    setSpecByKind((draft) => {\n      draft[panelPluginKind] = next;\n    });\n  };\n\n  return {\n    spec,\n    onSpecChange,\n  };\n}\n"],"names":["useMemo","usePlugin","useImmer","useDashboardApp","usePanels","removeWhiteSpacesAndSpecialCharacters","usePanelDrawerModel","panelDrawer","panels","updatePanel","undefined","panelKey","groupIndex","drawerTitle","submitButtonText","initialValues","name","description","group","kind","spec","applyChanges","values","display","plugin","existingPanel","Error","usePanelSpecState","panelPluginKind","initialState","specByKind","setSpecByKind","data","enabled","pluginInitialSpec","createInitialOptions","onSpecChange","next","draft"],"mappings":"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"}

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

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