@perses-dev/dashboards 0.8.1 → 0.10.0

package/dist/components/Panel/Panel.test.js

@@ -1 +1,74 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import"intersection-observer";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps,FAKE_PANEL_PLUGIN}from"../../test";import testDashboard from"../../test/testDashboard";import{Panel}from"./Panel";describe("Panel",(()=>{let e,r;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}},groupIndex:0,panelKey:"panelRef"},r={isEditMode:!1,dashboardSpec:testDashboard.spec}}));const n=r=>{const{addMockPlugin:n,pluginRegistryProps:t}=mockPluginRegistryProps();n("Panel","FakePanel",FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...t,children:_jsx(Panel,{...e})}),r)};it("should render name and info icon",(async()=>{n(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")})),it("should render edit icons when in edit mode",(async()=>{r.isEditMode=!0,n(r),await screen.queryByLabelText("drag handle"),screen.queryByLabelText("edit panel"),screen.queryByLabelText("more")}))}));
+// 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 { PluginRegistry } from '@perses-dev/plugin-system';
+import 'intersection-observer'; // TODO: Why do we need this side-effect? Should it be in test setup somewhere?
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';
+import { DashboardProvider } from '../../context';
+import { Panel } from './Panel';
+describe('Panel', ()=>{
+    // Helper to create panel props for rendering tests
+    const createPanelProps = ()=>{
+        return {
+            definition: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'Fake Panel',
+                        description: 'This is a fake panel'
+                    },
+                    plugin: {
+                        kind: 'FakePanel',
+                        spec: {}
+                    }
+                }
+            },
+            groupIndex: 0,
+            itemIndex: 0
+        };
+    };
+    // Helper to render the panel with some context set
+    const renderPanel = (isEditMode = false)=>{
+        const { addMockPlugin , pluginRegistryProps  } = mockPluginRegistryProps();
+        addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);
+        renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
+            ...pluginRegistryProps,
+            children: /*#__PURE__*/ _jsx(DashboardProvider, {
+                initialState: {
+                    dashboardSpec: getTestDashboard().spec,
+                    isEditMode
+                },
+                children: /*#__PURE__*/ _jsx(Panel, {
+                    ...createPanelProps()
+                })
+            })
+        }));
+    };
+    it('should render name and info icon', async ()=>{
+        renderPanel();
+        await screen.findByText('Fake Panel');
+        screen.queryByLabelText('info-tooltip');
+    });
+    it('should render edit icons when in edit mode', ()=>{
+        renderPanel(true);
+        const panelTitle = screen.getByText('Fake Panel');
+        userEvent.hover(panelTitle);
+        screen.getByLabelText('drag handle');
+        screen.getByLabelText('edit panel');
+        screen.getByLabelText('delete panel');
+    });
+});
+
+//# sourceMappingURL=Panel.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/Panel.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 'intersection-observer'; // TODO: Why do we need this side-effect? Should it be in test setup somewhere?\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  // Helper to create panel props for rendering tests\n  const createPanelProps = (): PanelProps => {\n    return {\n      definition: {\n        kind: 'Panel',\n        spec: {\n          display: {\n            name: 'Fake Panel',\n            description: 'This is a fake panel',\n          },\n          plugin: {\n            kind: 'FakePanel',\n            spec: {},\n          },\n        },\n      },\n      groupIndex: 0,\n      itemIndex: 0,\n    };\n  };\n\n  // Helper to render the panel with some context set\n  const renderPanel = (isEditMode = false) => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n          <Panel {...createPanelProps()} />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n  };\n\n  it('should render name and info icon', async () => {\n    renderPanel();\n    await screen.findByText('Fake Panel');\n    screen.queryByLabelText('info-tooltip');\n  });\n\n  it('should render edit icons when in edit mode', () => {\n    renderPanel(true);\n    const panelTitle = screen.getByText('Fake Panel');\n    userEvent.hover(panelTitle);\n    screen.getByLabelText('drag handle');\n    screen.getByLabelText('edit panel');\n    screen.getByLabelText('delete panel');\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","groupIndex","itemIndex","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText","panelTitle","getByText","hover","getByLabelText"],"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,OAAO,uBAAuB,CAAC,CAAC,+EAA+E;AAC/G,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACDK,UAAU,EAAE,CAAC;YACbC,SAAS,EAAE,CAAC;SACb,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGnB,uBAAuB,EAAE,AAAC;QACzEkB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAEjB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACH,cAAc;YAAE,GAAGuB,mBAAmB;sBACrC,cAAA,KAAChB,iBAAiB;gBAACiB,YAAY,EAAE;oBAAEC,aAAa,EAAEnB,gBAAgB,EAAE,CAACO,IAAI;oBAAEQ,UAAU;iBAAE;0BACrF,cAAA,KAACb,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFgB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMnB,MAAM,CAAC0B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC1B,MAAM,CAAC2B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG5B,MAAM,CAAC6B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD5B,SAAS,CAAC6B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B5B,MAAM,CAAC+B,cAAc,CAAC,aAAa,CAAC,CAAC;QACrC/B,MAAM,CAAC+B,cAAc,CAAC,YAAY,CAAC,CAAC;QACpC/B,MAAM,CAAC+B,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/Panel/PanelContent.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { JsonObject } from '@perses-dev/core';
 import { PanelProps } from '@perses-dev/plugin-system';
-export declare type PanelContentProps = PanelProps<JsonObject>;
+import { UnknownSpec } from '@perses-dev/core';
+export interface PanelContentProps extends PanelProps<UnknownSpec> {
+    panelPluginKind: string;
+}
 /**
  * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
- * definition's kind. Used so that a PluginLoadingBoundary can be wrapped around this for fallback UI while
- * the plugin is loading.
+ * definition's kind. Used so that an ErrorBoundary can be wrapped around this.
  */
 export declare function PanelContent(props: PanelContentProps): JSX.Element;
 //# sourceMappingURL=PanelContent.d.ts.map

package/dist/components/Panel/PanelContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAkB,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,oBAAY,iBAAiB,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;AAEvD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAGpD"}
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,WAAW,CAAC;IAChE,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAcpD"}

package/dist/components/Panel/PanelContent.js

@@ -1 +1,41 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{usePanelPlugin}from"@perses-dev/plugin-system";export function PanelContent(n){const{PanelComponent:e}=usePanelPlugin(n.definition.kind);return _jsx(e,{...n})}
+// 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';
+import { Skeleton } from '@mui/material';
+/**
+ * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
+ * definition's kind. Used so that an ErrorBoundary can be wrapped around this.
+ */ export function PanelContent(props) {
+    const { panelPluginKind , contentDimensions , ...others } = props;
+    const { data: plugin , isLoading  } = usePlugin('Panel', panelPluginKind, {
+        useErrorBoundary: true
+    });
+    const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Skeleton, {
+            variant: "rectangular",
+            width: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.width,
+            height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height
+        });
+    }
+    if (PanelComponent === undefined) {
+        throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
+    }
+    return /*#__PURE__*/ _jsx(PanelComponent, {
+        ...others,
+        contentDimensions: contentDimensions
+    });
+}
+
+//# sourceMappingURL=PanelContent.js.map

package/dist/components/Panel/PanelContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n}\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const { panelPluginKind, contentDimensions, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return <Skeleton variant=\"rectangular\" width={contentDimensions?.width} height={contentDimensions?.height} />;\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","others","data","plugin","isLoading","useErrorBoundary","PanelComponent","variant","width","height","undefined","Error"],"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,SAAS,QAAoB,2BAA2B,CAAC;AAClE,SAASC,QAAQ,QAAQ,eAAe,CAAC;AAOzC;;;CAGC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,eAAe,CAAA,EAAEC,iBAAiB,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IAChE,MAAM,EAAEI,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGT,SAAS,CAAC,OAAO,EAAEI,eAAe,EAAE;QAAEM,gBAAgB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpG,MAAMC,cAAc,GAAGH,MAAM,aAANA,MAAM,WAAgB,GAAtBA,KAAAA,CAAsB,GAAtBA,MAAM,CAAEG,cAAc,AAAC;IAE9C,IAAIF,SAAS,EAAE;QACb,qBAAO,KAACR,QAAQ;YAACW,OAAO,EAAC,aAAa;YAACC,KAAK,EAAER,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEQ,KAAK;YAAEC,MAAM,EAAET,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAES,MAAM;UAAI,CAAC;IAChH,CAAC;IAED,IAAIH,cAAc,KAAKI,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEZ,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACO,cAAc;QAAE,GAAGL,MAAM;QAAED,iBAAiB,EAAEA,iBAAiB;MAAI,CAAC;AAC9E,CAAC"}

package/dist/components/Panel/index.js

@@ -1 +1,15 @@
-export*from"./Panel";
+// 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 './Panel';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/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 './Panel';\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,SAAS,CAAC"}

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-declare const PanelDrawer: () => JSX.Element;
-export default PanelDrawer;
+/**
+ * The Add/Edit panel drawer for editing a panel's options.
+ */
+export declare const PanelDrawer: () => JSX.Element;
 //# sourceMappingURL=PanelDrawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAuCA,QAAA,MAAM,WAAW,mBA0JhB,CAAC;AA2BF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAuDvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -1 +1,96 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{MenuItem,Stack,Select,TextField,InputLabel,FormControl,Grid,Box,Button,Typography}from"@mui/material";import{Drawer,ErrorAlert}from"@perses-dev/components";import{PluginBoundary}from"@perses-dev/plugin-system";import{useState,useEffect}from"react";import{useDashboardApp,useLayouts,usePanels}from"../../context";import{removeWhiteSpacesAndSpecialCharacters}from"../../utils/functions";import{PanelOptionsEditor}from"./PanelOptionsEditor";const PanelDrawer=()=>{var e,l,n,a;const{layouts:r}=useLayouts(),{panels:i,updatePanel:t}=usePanels(),{panelDrawer:o,closePanelDrawer:s}=useDashboardApp();let d="",u="";(null==o?void 0:o.panelKey)&&(d=null!==(l=null===(e=i[o.panelKey])||void 0===e?void 0:e.display.name)&&void 0!==l?l:"",u=null!==(a=null===(n=i[o.panelKey])||void 0===n?void 0:n.display.description)&&void 0!==a?a:"");const[p,c]=useState(null==o?void 0:o.groupIndex),[x,v]=useState(d),[m,h]=useState(u),[y,g]=useState(""),[j,_]=useState({});useEffect((()=>{var e,l,n,a;c(null==o?void 0:o.groupIndex),(null==o?void 0:o.panelKey)?(v(null!==(l=null===(e=i[o.panelKey])||void 0===e?void 0:e.display.name)&&void 0!==l?l:""),h(null!==(a=null===(n=i[o.panelKey])||void 0===n?void 0:n.display.description)&&void 0!==a?a:"")):(v(""),h(""))}),[o,i]);return _jsx(Drawer,{isOpen:!!o,onClose:()=>s(),children:_jsxs("form",{onSubmit:e=>{e.preventDefault(),void 0===(null==o?void 0:o.groupIndex)||(null==o?void 0:o.panelKey)?(null==o?void 0:o.panelKey)&&(void 0!==(null==o?void 0:o.panelKey)&&t(o.panelKey,{...i[o.panelKey],kind:y,options:j,display:{name:null!=x?x:"",description:m}})):(()=>{if(void 0===(null==o?void 0:o.groupIndex))return;const e=removeWhiteSpacesAndSpecialCharacters(x);t(e,{kind:y,options:j,display:{name:x,description:m}},o.groupIndex)})(),s()},children:[_jsx(PanelDrawerHeader,{panelKey:null==o?void 0:o.panelKey,onClose:()=>s()}),_jsxs(Grid,{container:!0,spacing:2,children:[_jsx(Grid,{item:!0,xs:4,children:_jsxs(FormControl,{children:[_jsx(InputLabel,{id:"select-group",children:"Group"}),_jsx(Select,{required:!0,labelId:"select-group",label:"Group",value:null!=p?p:0,onChange:e=>{const{value:l}=e.target;"string"!=typeof l&&c(l)},children:r.map(((e,l)=>{var n;return _jsx(MenuItem,{value:l,children:(null===(n=e.spec.display)||void 0===n?void 0:n.title)||`Group ${l+1}`},l)}))})]})}),_jsx(Grid,{item:!0,xs:8,children:_jsxs(Stack,{spacing:2,sx:{flexGrow:"1"},children:[_jsx(TextField,{required:!0,label:"Panel Name",value:x,variant:"outlined",onChange:e=>{v(e.target.value)}}),_jsx(TextField,{label:"Description",value:m,variant:"outlined",onChange:e=>{h(e.target.value)}})]})}),_jsx(Grid,{item:!0,xs:4,children:_jsxs(FormControl,{children:[_jsx(InputLabel,{id:"panel-type-label",children:"Panel Type"}),_jsxs(Select,{required:!0,labelId:"panel-type-label",label:"Panel Type",value:y,onChange:e=>{g(e.target.value)},children:[_jsx(MenuItem,{value:"LineChart",children:"Line Chart"}),_jsx(MenuItem,{value:"GaugeChart",children:"Gauge Chart"}),_jsx(MenuItem,{value:"StatChart",children:"Stat Chart"})]})]})}),_jsx(Grid,{item:!0,xs:8,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:""!==y&&_jsx(PanelOptionsEditor,{kind:y,value:j,onChange:e=>{_(e)}})})})]})]})})},PanelDrawerHeader=({panelKey:e,onClose:l})=>_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginBottom:e=>e.spacing(2),paddingBottom:e=>e.spacing(2),borderBottom:e=>`1px solid ${e.palette.grey[100]}`},children:[_jsx(Typography,{variant:"h2",children:(e?"Edit":"Add")+" Panel"}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(Button,{type:"submit",variant:"contained",children:e?"Apply":"Add"}),_jsx(Button,{variant:"outlined",onClick:l,children:"Cancel"})]})]});export default PanelDrawer;
+// 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Stack, Box, Button, Typography } from '@mui/material';
+import { Drawer } from '@perses-dev/components';
+import { usePanels } from '../../context';
+import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
+/**
+ * The Add/Edit panel drawer for editing a panel's options.
+ */ export const PanelDrawer = ()=>{
+    const { panelEditor  } = usePanels();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = useState(false);
+    const handleClose = ()=>setIsClosing(true);
+    // Don't call closeDrawer on the store until the Drawer has completely transitioned out
+    const handleExited = ()=>{
+        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        setIsClosing(false);
+    };
+    // Drawer is open if we have a model and we're not transitioning out
+    const isOpen = panelEditor !== 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 (panelEditor === undefined) {
+            throw new Error('Cannot apply changes');
+        }
+        panelEditor.applyChanges(values);
+        handleClose();
+    };
+    return /*#__PURE__*/ _jsx(Drawer, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        SlideProps: {
+            onExited: handleExited
+        },
+        children: panelEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(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__*/ _jsxs(Typography, {
+                            variant: "h2",
+                            children: [
+                                panelEditor.mode,
+                                " Panel"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    form: panelEditorFormId,
+                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outlined",
+                                    onClick: handleClose,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(PanelEditorForm, {
+                    onSubmit: handleSubmit,
+                    initialValues: panelEditor.initialValues
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=PanelDrawer.js.map

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

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

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

@@ -1 +1,99 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import*as dashboardAppSlice from"../../context/DashboardAppSlice";import*as layoutsSlice from"../../context/LayoutsSlice";import*as context from"../../context/DashboardProvider";import{FAKE_PANEL_PLUGIN,mockPluginRegistryProps,renderWithContext}from"../../test";import testDashboard from"../../test/testDashboard";import PanelDrawer from"./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.spec.layouts});const dashboardApp={panelDrawer:{groupIndex:0},openPanelDrawer:jest.fn(),closePanelDrawer:jest.fn(),panelGroupDialog:void 0,openPanelGroupDialog:jest.fn(),closePanelGroupDialog:jest.fn()};describe("Panel Drawer",(()=>{beforeEach((()=>{jest.clearAllMocks()}));const e=()=>{const{addMockPlugin:e,pluginRegistryProps:t}=mockPluginRegistryProps();e("Panel","FakePanel",FAKE_PANEL_PLUGIN),renderWithContext(_jsxs(PluginRegistry,{...t,children:[_jsx(PanelDrawer,{}),","]}))};it("should add new panel",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue(dashboardApp),e();const t=screen.getByLabelText(/Panel Name/);userEvent.type(t,"New Panel"),userEvent.click(screen.getByText("Add")),expect(updatePanel).toHaveBeenCalledWith("NewPanel",{kind:"",display:{name:"New Panel",description:""},options:{}},0)})),it("should edit an existing panel",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue({...dashboardApp,panelDrawer:{groupIndex:0,panelKey:"cpu"}}),e();const t=screen.getByLabelText(/Panel Name/);userEvent.type(t,"cpu usage"),userEvent.click(screen.getByText("Apply")),expect(updatePanel).toHaveBeenCalledWith("cpu",{display:{name:"cpu usage",description:""},kind:"",options:{}})}))}));
+// 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 { PluginRegistry } from '@perses-dev/plugin-system';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+import { createDashboardProviderSpy, FAKE_PANEL_PLUGIN, getTestDashboard, mockPluginRegistryProps, renderWithContext } from '../../test';
+import { DashboardProvider } from '../../context/DashboardProvider';
+import { PanelDrawer } from './PanelDrawer';
+describe('Panel Drawer', ()=>{
+    const renderPanelDrawer = ()=>{
+        const { addMockPlugin , pluginRegistryProps  } = mockPluginRegistryProps();
+        addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);
+        const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
+        renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
+            ...pluginRegistryProps,
+            children: /*#__PURE__*/ _jsxs(DashboardProvider, {
+                initialState: {
+                    dashboardSpec: getTestDashboard().spec,
+                    isEditMode: true
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(DashboardProviderSpy, {}),
+                    /*#__PURE__*/ _jsx(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', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for a new panel (i.e. no panel key)
+        act(()=>storeApi.getState().addPanel(0));
+        const nameInput = await screen.findByLabelText(/Name/);
+        userEvent.type(nameInput, 'New Panel');
+        userEvent.click(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'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+    it('should edit an existing panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for an existing panel
+        act(()=>storeApi.getState().editPanel({
+                groupIndex: 0,
+                itemIndex: 0
+            }));
+        const nameInput = await screen.findByLabelText(/Name/);
+        userEvent.clear(nameInput);
+        userEvent.type(nameInput, 'cpu usage');
+        userEvent.click(screen.getByText('Apply'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            cpu: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu usage'
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+});
+
+//# sourceMappingURL=PanelDrawer.test.js.map

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', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);\n\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n          <DashboardProviderSpy />\n          <PanelDrawer />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel (i.e. no panel key)\n    act(() => storeApi.getState().addPanel(0));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    act(() => storeApi.getState().editPanel({ groupIndex: 0, itemIndex: 0 }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","addPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","plugin","editPanel","groupIndex","itemIndex","clear","cpu"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PanelEditorValues } from '../../context/DashboardProvider/panel-editing-slice';
+export interface PanelEditorFormProps {
+    initialValues: PanelEditorValues;
+    onSubmit: (values: PanelEditorValues) => 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":";AA4BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAGxF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA+F1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}