@perses-dev/plugin-system 0.0.0-snapshot-time-range-height-80d08fc

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.test.js

@@ -0,0 +1,160 @@
+// 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 { screen, render, getAllByRole } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { OptionsEditorTabs } from './OptionsEditorTabs';
+describe('OptionsEditorTabs', ()=>{
+    const renderTabs = (otherTabs)=>{
+        render(/*#__PURE__*/ _jsx(OptionsEditorTabs, {
+            tabs: {
+                query: {
+                    content: /*#__PURE__*/ _jsx("div", {
+                        children: "Edit query configuration"
+                    })
+                },
+                settings: {
+                    content: /*#__PURE__*/ _jsx("div", {
+                        children: "Edit settings configuration"
+                    })
+                },
+                json: {
+                    content: /*#__PURE__*/ _jsx("div", {
+                        children: "JSON editor"
+                    })
+                },
+                other: otherTabs
+            }
+        }));
+    };
+    const renderCustomTabs = ()=>{
+        renderTabs([
+            {
+                id: 'tableCols',
+                label: 'Table columns',
+                content: /*#__PURE__*/ _jsx("div", {
+                    children: "custom table column"
+                })
+            },
+            {
+                id: 'tableOpts',
+                label: 'Table options',
+                content: /*#__PURE__*/ _jsx("div", {
+                    children: "custom table options"
+                })
+            }
+        ]);
+    };
+    it('renders all specified tabs in a tab list', ()=>{
+        renderTabs();
+        const tabList = screen.getByRole('tablist');
+        const tabs = getAllByRole(tabList, 'tab');
+        expect(tabs).toHaveLength(3);
+        expect(tabs[0]).toHaveTextContent('Query');
+        expect(tabs[1]).toHaveTextContent('Settings');
+        expect(tabs[2]).toHaveTextContent('JSON');
+    });
+    it('defaults to selecting the first tab', ()=>{
+        renderTabs();
+        const activeTab = screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toHaveTextContent('Query');
+        const activeTabPanel = screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('query configuration');
+    });
+    it('switches selected tab on click', ()=>{
+        renderTabs();
+        const jsonTab = screen.getByRole('tab', {
+            name: 'JSON'
+        });
+        userEvent.click(jsonTab);
+        const activeTab = screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toBe(jsonTab);
+        const activeTabPanel = screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('JSON editor');
+    });
+    it('switches selected tab on keyboard interactions', ()=>{
+        renderTabs();
+        const vizTab = screen.getByRole('tab', {
+            name: 'Settings'
+        });
+        userEvent.tab();
+        userEvent.keyboard('{arrowright}{space}');
+        const activeTab = screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toBe(vizTab);
+        const activeTabPanel = screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('settings configuration');
+    });
+    it('renders custom tabs between visual tabs and json editor', ()=>{
+        renderCustomTabs();
+        const tabList = screen.getByRole('tablist');
+        const tabs = getAllByRole(tabList, 'tab');
+        expect(tabs).toHaveLength(5);
+        expect(tabs[0]).toHaveTextContent('Query');
+        expect(tabs[1]).toHaveTextContent('Settings');
+        expect(tabs[2]).toHaveTextContent('Table column');
+        expect(tabs[3]).toHaveTextContent('Table options');
+        expect(tabs[4]).toHaveTextContent('JSON');
+    });
+    it('shows the correct content when selecting a custom tab', ()=>{
+        renderCustomTabs();
+        const tableColTab = screen.getByRole('tab', {
+            name: 'Table columns'
+        });
+        userEvent.click(tableColTab);
+        const activeTab = screen.getByRole('tab', {
+            selected: true
+        });
+        expect(activeTab).toBe(tableColTab);
+        const activeTabPanel = screen.getByRole('tabpanel');
+        expect(activeTabPanel).toHaveTextContent('custom table column');
+    });
+    it('only renders common tabs that are specified', ()=>{
+        render(/*#__PURE__*/ _jsx(OptionsEditorTabs, {
+            tabs: {
+                settings: {
+                    content: /*#__PURE__*/ _jsx("div", {
+                        children: "settings are alone"
+                    })
+                },
+                json: {
+                    content: /*#__PURE__*/ _jsx("div", {
+                        children: "JSON is at the end"
+                    })
+                },
+                other: [
+                    {
+                        id: 'custom',
+                        label: 'Another tab',
+                        content: /*#__PURE__*/ _jsx("div", {
+                            children: "another tab content"
+                        })
+                    }
+                ]
+            }
+        }));
+        const tabList = screen.getByRole('tablist');
+        const tabs = getAllByRole(tabList, 'tab');
+        expect(tabs).toHaveLength(3);
+        expect(tabs[0]).toHaveTextContent('Settings');
+        expect(tabs[1]).toHaveTextContent('Another tab');
+        expect(tabs[2]).toHaveTextContent('JSON');
+    });
+});
+
+//# sourceMappingURL=OptionsEditorTabs.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.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 { screen, render, getAllByRole } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nimport { OptionsEditorTabs, OptionsEditorTabsProps } from './OptionsEditorTabs';\n\ndescribe('OptionsEditorTabs', () => {\n  const renderTabs = (otherTabs?: OptionsEditorTabsProps['tabs']['other']) => {\n    render(\n      <OptionsEditorTabs\n        tabs={{\n          query: {\n            content: <div>Edit query configuration</div>,\n          },\n          settings: {\n            content: <div>Edit settings configuration</div>,\n          },\n          json: {\n            content: <div>JSON editor</div>,\n          },\n          other: otherTabs,\n        }}\n      />\n    );\n  };\n\n  const renderCustomTabs = () => {\n    renderTabs([\n      {\n        id: 'tableCols',\n        label: 'Table columns',\n        content: <div>custom table column</div>,\n      },\n      {\n        id: 'tableOpts',\n        label: 'Table options',\n        content: <div>custom table options</div>,\n      },\n    ]);\n  };\n\n  it('renders all specified tabs in a tab list', () => {\n    renderTabs();\n\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(3);\n    expect(tabs[0]).toHaveTextContent('Query');\n    expect(tabs[1]).toHaveTextContent('Settings');\n    expect(tabs[2]).toHaveTextContent('JSON');\n  });\n\n  it('defaults to selecting the first tab', () => {\n    renderTabs();\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toHaveTextContent('Query');\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('query configuration');\n  });\n\n  it('switches selected tab on click', () => {\n    renderTabs();\n    const jsonTab = screen.getByRole('tab', { name: 'JSON' });\n    userEvent.click(jsonTab);\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(jsonTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('JSON editor');\n  });\n\n  it('switches selected tab on keyboard interactions', () => {\n    renderTabs();\n    const vizTab = screen.getByRole('tab', { name: 'Settings' });\n    userEvent.tab();\n    userEvent.keyboard('{arrowright}{space}');\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(vizTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('settings configuration');\n  });\n\n  it('renders custom tabs between visual tabs and json editor', () => {\n    renderCustomTabs();\n\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(5);\n    expect(tabs[0]).toHaveTextContent('Query');\n    expect(tabs[1]).toHaveTextContent('Settings');\n    expect(tabs[2]).toHaveTextContent('Table column');\n    expect(tabs[3]).toHaveTextContent('Table options');\n    expect(tabs[4]).toHaveTextContent('JSON');\n  });\n\n  it('shows the correct content when selecting a custom tab', () => {\n    renderCustomTabs();\n\n    const tableColTab = screen.getByRole('tab', { name: 'Table columns' });\n    userEvent.click(tableColTab);\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(tableColTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('custom table column');\n  });\n\n  it('only renders common tabs that are specified', () => {\n    render(\n      <OptionsEditorTabs\n        tabs={{\n          settings: {\n            content: <div>settings are alone</div>,\n          },\n          json: {\n            content: <div>JSON is at the end</div>,\n          },\n          other: [\n            {\n              id: 'custom',\n              label: 'Another tab',\n              content: <div>another tab content</div>,\n            },\n          ],\n        }}\n      />\n    );\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(3);\n    expect(tabs[0]).toHaveTextContent('Settings');\n    expect(tabs[1]).toHaveTextContent('Another tab');\n    expect(tabs[2]).toHaveTextContent('JSON');\n  });\n});\n"],"names":["screen","render","getAllByRole","userEvent","OptionsEditorTabs","describe","renderTabs","otherTabs","tabs","query","content","div","settings","json","other","renderCustomTabs","id","label","it","tabList","getByRole","expect","toHaveLength","toHaveTextContent","activeTab","selected","activeTabPanel","jsonTab","name","click","toBe","vizTab","tab","keyboard","tableColTab"],"mappings":"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"}

package/dist/components/OptionsEditorTabs/TabPanel.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface TabPanelProps {
+    children: React.ReactNode;
+    index: number;
+    value: number;
+}
+export declare function TabPanel(props: TabPanelProps): JSX.Element;
+export {};
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/components/OptionsEditorTabs/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabs/TabPanel.tsx"],"names":[],"mappings":";AAeA,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAgB5C"}

package/dist/components/OptionsEditorTabs/TabPanel.js

@@ -0,0 +1,31 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+export function TabPanel(props) {
+    const { children , value , index , ...other } = props;
+    const isActive = value === index;
+    return /*#__PURE__*/ _jsx("div", {
+        role: "tabpanel",
+        hidden: !isActive,
+        id: `options-editor-tabpanel-${index}`,
+        "aria-labelledby": `options-editor-tab-${index}`,
+        ...other,
+        children: isActive && /*#__PURE__*/ _jsx(Box, {
+            mt: 2,
+            children: children
+        })
+    });
+}
+
+//# sourceMappingURL=TabPanel.js.map

package/dist/components/OptionsEditorTabs/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorTabs/TabPanel.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\n\ninterface TabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function TabPanel(props: TabPanelProps) {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","TabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAQpC,OAAO,SAASC,QAAQ,CAACC,KAAoB,EAAE;IAC7C,MAAM,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,KAAK,EAAE,GAAGJ,KAAK,AAAC;IAEnD,MAAMK,QAAQ,GAAGH,KAAK,KAAKC,KAAK,AAAC;IAEjC,qBACE,KAACG,KAAG;QACFC,IAAI,EAAC,UAAU;QACfC,MAAM,EAAE,CAACH,QAAQ;QACjBI,EAAE,EAAE,CAAC,wBAAwB,EAAEN,KAAK,CAAC,CAAC;QACtCO,iBAAe,EAAE,CAAC,mBAAmB,EAAEP,KAAK,CAAC,CAAC;QAC7C,GAAGC,KAAK;kBAERC,QAAQ,kBAAI,KAACP,GAAG;YAACa,EAAE,EAAE,CAAC;sBAAGV,QAAQ;UAAO;MACrC,CACN;AACJ,CAAC"}

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

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

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

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

package/dist/components/OptionsEditorTabs/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 './OptionsEditorTabs';
+
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/PluginEditor/PluginEditor.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PluginEditorProps } from './plugin-editor-api';
+/**
+ * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property
+ * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's
+ * editor component. It takes care of transitioning from one plugin kind to another "all at once" so that when the
+ * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a
+ * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
+ * `usePluginEditor` hook that powers this component.
+ */
+export declare function PluginEditor(props: PluginEditorProps): JSX.Element;
+//# sourceMappingURL=PluginEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAsBpD"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -0,0 +1,68 @@
+// 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 { Box, FormControl, FormHelperText, InputLabel } from '@mui/material';
+import { PluginKindSelect } from '../PluginKindSelect';
+import { PluginSpecEditor } from '../PluginSpecEditor';
+import { usePluginEditor } from './plugin-editor-api';
+/**
+ * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property
+ * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's
+ * editor component. It takes care of transitioning from one plugin kind to another "all at once" so that when the
+ * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a
+ * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
+ * `usePluginEditor` hook that powers this component.
+ */ export function PluginEditor(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { value , pluginType , pluginKindLabel , onChange: _ , ...others } = props;
+    const { pendingKind , isLoading , error , onKindChange , onSpecChange  } = usePluginEditor(props);
+    var ref;
+    return /*#__PURE__*/ _jsxs(Box, {
+        ...others,
+        children: [
+            /*#__PURE__*/ _jsxs(FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                disabled: isLoading,
+                error: error !== null,
+                sx: {
+                    mb: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "plugin-kind-label",
+                        children: pluginKindLabel
+                    }),
+                    /*#__PURE__*/ _jsx(PluginKindSelect, {
+                        labelId: "plugin-kind-label",
+                        label: pluginKindLabel,
+                        pluginType: pluginType,
+                        value: pendingKind !== '' ? pendingKind : value.kind,
+                        onChange: onKindChange
+                    }),
+                    /*#__PURE__*/ _jsx(FormHelperText, {
+                        children: (ref = error === null || error === void 0 ? void 0 : error.message) !== null && ref !== void 0 ? ref : ''
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                pluginType: pluginType,
+                pluginKind: value.kind,
+                value: value.spec,
+                onChange: onSpecChange
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=PluginEditor.js.map

package/dist/components/PluginEditor/PluginEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, FormControl, FormHelperText, InputLabel } from '@mui/material';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginType, pluginKindLabel, onChange: _, ...others } = props;\n  const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <FormControl margin=\"dense\" fullWidth={false} disabled={isLoading} error={error !== null} sx={{ mb: 1 }}>\n        {/* TODO: How to ensure ids are unique? */}\n        <InputLabel id=\"plugin-kind-label\">{pluginKindLabel}</InputLabel>\n        <PluginKindSelect\n          labelId=\"plugin-kind-label\"\n          label={pluginKindLabel}\n          pluginType={pluginType}\n          value={pendingKind !== '' ? pendingKind : value.kind}\n          onChange={onKindChange}\n        />\n        <FormHelperText>{error?.message ?? ''}</FormHelperText>\n      </FormControl>\n\n      <PluginSpecEditor pluginType={pluginType} pluginKind={value.kind} value={value.spec} onChange={onSpecChange} />\n    </Box>\n  );\n}\n"],"names":["Box","FormControl","FormHelperText","InputLabel","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginType","pluginKindLabel","onChange","_","others","pendingKind","isLoading","error","onKindChange","onSpecChange","margin","fullWidth","disabled","sx","mb","id","labelId","label","kind","message","pluginKind","spec"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,WAAW,EAAEC,cAAc,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC7E,SAASC,gBAAgB,QAAQ,qBAAqB,CAAC;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB,CAAC;AACvD,SAA4BC,eAAe,QAAQ,qBAAqB,CAAC;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,CAAA,EAAEC,UAAU,CAAA,EAAEC,eAAe,CAAA,EAAEC,QAAQ,EAAEC,CAAC,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGN,KAAK,AAAC;IAC7E,MAAM,EAAEO,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAEC,KAAK,CAAA,EAAEC,YAAY,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,eAAe,CAACE,KAAK,CAAC,AAAC;QAatES,GAAc;IAZrC,qBACE,MAACjB,GAAG;QAAE,GAAGc,MAAM;;0BACb,MAACb,WAAW;gBAACmB,MAAM,EAAC,OAAO;gBAACC,SAAS,EAAE,KAAK;gBAAEC,QAAQ,EAAEN,SAAS;gBAAEC,KAAK,EAAEA,KAAK,KAAK,IAAI;gBAAEM,EAAE,EAAE;oBAAEC,EAAE,EAAE,CAAC;iBAAE;;kCAErG,KAACrB,UAAU;wBAACsB,EAAE,EAAC,mBAAmB;kCAAEd,eAAe;sBAAc;kCACjE,KAACP,gBAAgB;wBACfsB,OAAO,EAAC,mBAAmB;wBAC3BC,KAAK,EAAEhB,eAAe;wBACtBD,UAAU,EAAEA,UAAU;wBACtBD,KAAK,EAAEM,WAAW,KAAK,EAAE,GAAGA,WAAW,GAAGN,KAAK,CAACmB,IAAI;wBACpDhB,QAAQ,EAAEM,YAAY;sBACtB;kCACF,KAAChB,cAAc;kCAAEe,CAAAA,GAAc,GAAdA,KAAK,aAALA,KAAK,WAAS,GAAdA,KAAAA,CAAc,GAAdA,KAAK,CAAEY,OAAO,cAAdZ,GAAc,cAAdA,GAAc,GAAI,EAAE;sBAAkB;;cAC3C;0BAEd,KAACZ,gBAAgB;gBAACK,UAAU,EAAEA,UAAU;gBAAEoB,UAAU,EAAErB,KAAK,CAACmB,IAAI;gBAAEnB,KAAK,EAAEA,KAAK,CAACsB,IAAI;gBAAEnB,QAAQ,EAAEO,YAAY;cAAI;;MAC3G,CACN;AACJ,CAAC"}

package/dist/components/PluginEditor/PluginEditor.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PluginEditor.test.d.ts.map

package/dist/components/PluginEditor/PluginEditor.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginEditor.test.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.test.tsx"],"names":[],"mappings":""}

package/dist/components/PluginEditor/PluginEditor.test.js

@@ -0,0 +1,143 @@
+// 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 userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/react';
+import { useState } from 'react';
+import { renderWithContext } from '../../test';
+import { PluginEditor } from './PluginEditor';
+describe('PluginEditor', ()=>{
+    const renderComponent = ({ pluginType ='Panel' , defaultPluginKinds , value  } = {})=>{
+        const testValue = value || {
+            kind: 'BertPanel1',
+            spec: {
+                option1: 'Option1Value'
+            }
+        };
+        // A test helper component that includes the state that's controlled from outside
+        let onChange = jest.fn();
+        function TestHelperForm() {
+            const [value, setValue] = useState(testValue);
+            onChange = jest.fn((v)=>setValue(v));
+            return /*#__PURE__*/ _jsx(PluginEditor, {
+                pluginType: pluginType,
+                pluginKindLabel: "Panel Type",
+                value: value,
+                onChange: onChange
+            });
+        }
+        renderWithContext(/*#__PURE__*/ _jsx(TestHelperForm, {}), undefined, {
+            defaultPluginKinds
+        });
+        return {
+            onChange
+        };
+    };
+    // Opens the PluginKindSelect and waits for loading to finish (i.e. options to appear)
+    const openPluginKind = async ()=>{
+        const select = screen.getByRole('button', {
+            name: 'Panel Type'
+        });
+        userEvent.click(select);
+        const options = await screen.findAllByRole('option');
+        return options;
+    };
+    it('shows plugin kind and spec editor', async ()=>{
+        renderComponent();
+        const pluginKind = screen.getByRole('button', {
+            name: 'Panel Type'
+        });
+        await waitFor(()=>expect(pluginKind).toHaveTextContent('Bert Panel 1'));
+        const specEditor = await screen.findByLabelText('BertPanel1 editor');
+        expect(specEditor).toHaveValue('Option1Value');
+    });
+    it('initializes kind and spec together', async ()=>{
+        const { onChange  } = renderComponent();
+        // Switch to a new plugin kind
+        await openPluginKind();
+        const newPluginKind = screen.getByRole('option', {
+            name: 'Bert Panel 2'
+        });
+        userEvent.click(newPluginKind);
+        // Wait for the editor of the other plugin
+        const newEditor = await screen.findByLabelText('BertPanel2 editor');
+        expect(newEditor).toBeInTheDocument();
+        expect(newEditor).toHaveValue('');
+        // Make sure onChange was only called once (i.e. initializes both kind and spec at the same time
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'BertPanel2',
+            spec: {
+                option2: ''
+            }
+        });
+    });
+    it('remembers previous spec values', async ()=>{
+        renderComponent();
+        // Use the current editor to make a change to the spec value
+        let editor = await screen.findByLabelText('BertPanel1 editor');
+        userEvent.clear(editor);
+        userEvent.type(editor, 'MyNewValue');
+        // Switch to a new plugin kind
+        await openPluginKind();
+        const newPluginKind = screen.getByRole('option', {
+            name: 'Bert Panel 2'
+        });
+        userEvent.click(newPluginKind);
+        // Wait for the other editor to appear, then switch back
+        const newEditor = await screen.findByLabelText('BertPanel2 editor');
+        expect(newEditor).toHaveValue('');
+        await openPluginKind();
+        const oldPluginKind = screen.getByRole('option', {
+            name: 'Bert Panel 1'
+        });
+        userEvent.click(oldPluginKind);
+        // Make sure the editor from the first plugin appears and has our modified value from before the switch
+        editor = await screen.findByLabelText('BertPanel1 editor');
+        expect(editor).toHaveValue('MyNewValue');
+    });
+    describe('when defaultPluginKinds specified in plugin registry', ()=>{
+        it('uses default kind when one is not provided', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                defaultPluginKinds: {
+                    Panel: 'BertPanel2'
+                },
+                value: {
+                    kind: '',
+                    spec: {}
+                }
+            });
+            // Wait for default panel kind to load.
+            const pluginKind = screen.getByRole('button', {
+                name: 'Panel Type'
+            });
+            await waitFor(()=>expect(pluginKind).toHaveTextContent('Bert Panel 2'));
+        });
+        it('does not use default when kind is provided', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                defaultPluginKinds: {
+                    Panel: 'BertPanel2'
+                }
+            });
+            // Wait for specified panel kind to load.
+            const pluginKind = screen.getByRole('button', {
+                name: 'Panel Type'
+            });
+            await waitFor(()=>expect(pluginKind).toHaveTextContent('Bert Panel 1'));
+        });
+    });
+});
+
+//# sourceMappingURL=PluginEditor.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 userEvent from '@testing-library/user-event';\nimport { screen, waitFor } from '@testing-library/react';\nimport { useState } from 'react';\nimport { renderWithContext } from '../../test';\nimport { DefaultPluginKinds } from '../../model';\nimport { PluginEditor } from './PluginEditor';\nimport { PluginEditorProps } from './plugin-editor-api';\n\ntype RenderComponentOptions = {\n  pluginType?: PluginEditorProps['pluginType'];\n  defaultPluginKinds?: DefaultPluginKinds;\n  value?: PluginEditorProps['value'];\n};\n\ndescribe('PluginEditor', () => {\n  const renderComponent = ({ pluginType = 'Panel', defaultPluginKinds, value }: RenderComponentOptions = {}) => {\n    const testValue: PluginEditorProps['value'] = value || { kind: 'BertPanel1', spec: { option1: 'Option1Value' } };\n\n    // A test helper component that includes the state that's controlled from outside\n    let onChange: jest.Mocked<PluginEditorProps['onChange']> = jest.fn();\n    function TestHelperForm() {\n      const [value, setValue] = useState(testValue);\n      onChange = jest.fn((v) => setValue(v));\n\n      return <PluginEditor pluginType={pluginType} pluginKindLabel=\"Panel Type\" value={value} onChange={onChange} />;\n    }\n\n    renderWithContext(<TestHelperForm />, undefined, { defaultPluginKinds });\n    return { onChange };\n  };\n\n  // Opens the PluginKindSelect and waits for loading to finish (i.e. options to appear)\n  const openPluginKind = async () => {\n    const select = screen.getByRole('button', { name: 'Panel Type' });\n    userEvent.click(select);\n    const options = await screen.findAllByRole('option');\n    return options;\n  };\n\n  it('shows plugin kind and spec editor', async () => {\n    renderComponent();\n\n    const pluginKind = screen.getByRole('button', { name: 'Panel Type' });\n    await waitFor(() => expect(pluginKind).toHaveTextContent('Bert Panel 1'));\n    const specEditor = await screen.findByLabelText('BertPanel1 editor');\n    expect(specEditor).toHaveValue('Option1Value');\n  });\n\n  it('initializes kind and spec together', async () => {\n    const { onChange } = renderComponent();\n\n    // Switch to a new plugin kind\n    await openPluginKind();\n    const newPluginKind = screen.getByRole('option', { name: 'Bert Panel 2' });\n    userEvent.click(newPluginKind);\n\n    // Wait for the editor of the other plugin\n    const newEditor = await screen.findByLabelText('BertPanel2 editor');\n    expect(newEditor).toBeInTheDocument();\n    expect(newEditor).toHaveValue('');\n\n    // Make sure onChange was only called once (i.e. initializes both kind and spec at the same time\n    expect(onChange).toHaveBeenCalledTimes(1);\n    expect(onChange).toHaveBeenCalledWith({ kind: 'BertPanel2', spec: { option2: '' } });\n  });\n\n  it('remembers previous spec values', async () => {\n    renderComponent();\n\n    // Use the current editor to make a change to the spec value\n    let editor = await screen.findByLabelText('BertPanel1 editor');\n    userEvent.clear(editor);\n    userEvent.type(editor, 'MyNewValue');\n\n    // Switch to a new plugin kind\n    await openPluginKind();\n    const newPluginKind = screen.getByRole('option', { name: 'Bert Panel 2' });\n    userEvent.click(newPluginKind);\n\n    // Wait for the other editor to appear, then switch back\n    const newEditor = await screen.findByLabelText('BertPanel2 editor');\n    expect(newEditor).toHaveValue('');\n    await openPluginKind();\n    const oldPluginKind = screen.getByRole('option', { name: 'Bert Panel 1' });\n    userEvent.click(oldPluginKind);\n\n    // Make sure the editor from the first plugin appears and has our modified value from before the switch\n    editor = await screen.findByLabelText('BertPanel1 editor');\n    expect(editor).toHaveValue('MyNewValue');\n  });\n\n  describe('when defaultPluginKinds specified in plugin registry', () => {\n    it('uses default kind when one is not provided', async () => {\n      renderComponent({\n        pluginType: 'Panel',\n        defaultPluginKinds: {\n          Panel: 'BertPanel2',\n        },\n        value: { kind: '', spec: {} },\n      });\n\n      // Wait for default panel kind to load.\n      const pluginKind = screen.getByRole('button', { name: 'Panel Type' });\n      await waitFor(() => expect(pluginKind).toHaveTextContent('Bert Panel 2'));\n    });\n\n    it('does not use default when kind is provided', async () => {\n      renderComponent({ pluginType: 'Panel', defaultPluginKinds: { Panel: 'BertPanel2' } });\n\n      // Wait for specified panel kind to load.\n      const pluginKind = screen.getByRole('button', { name: 'Panel Type' });\n      await waitFor(() => expect(pluginKind).toHaveTextContent('Bert Panel 1'));\n    });\n  });\n});\n"],"names":["userEvent","screen","waitFor","useState","renderWithContext","PluginEditor","describe","renderComponent","pluginType","defaultPluginKinds","value","testValue","kind","spec","option1","onChange","jest","fn","TestHelperForm","setValue","v","pluginKindLabel","undefined","openPluginKind","select","getByRole","name","click","options","findAllByRole","it","pluginKind","expect","toHaveTextContent","specEditor","findByLabelText","toHaveValue","newPluginKind","newEditor","toBeInTheDocument","toHaveBeenCalledTimes","toHaveBeenCalledWith","option2","editor","clear","type","oldPluginKind","Panel"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export * from './PluginEditor';
+export * from './plugin-editor-api';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}

package/dist/components/PluginEditor/index.js

@@ -0,0 +1,16 @@
+// 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 './PluginEditor';
+export * from './plugin-editor-api';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PluginEditor/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 './PluginEditor';\nexport * from './plugin-editor-api';\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,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}

package/dist/components/PluginEditor/plugin-editor-api.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+import { Definition, UnknownSpec } from '@perses-dev/core';
+import { PluginType } from '../../model';
+declare type OmittedMuiProps = 'children' | 'value' | 'onChange';
+export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
+    pluginType: PluginType;
+    pluginKindLabel: string;
+    value: Definition<UnknownSpec>;
+    onChange: (next: Definition<UnknownSpec>) => void;
+}
+/**
+ * Props needed by the usePluginEditor hook.
+ */
+export declare type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value' | 'onChange'>;
+/**
+ * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide
+ * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also
+ * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin
+ * kind back.
+ */
+export declare function usePluginEditor(props: UsePluginEditorProps): {
+    pendingKind: string;
+    isLoading: boolean;
+    error: Error | null;
+    onKindChange: (event: import("@mui/material").SelectChangeEvent<string>, child: import("react").ReactNode) => void;
+    onSpecChange: (next: UnknownSpec) => void;
+};
+export {};
+//# sourceMappingURL=plugin-editor-api.d.ts.map

package/dist/components/PluginEditor/plugin-editor-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGrE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAOzC,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAID;;GAEG;AACH,oBAAY,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;AAEhG;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;EA+E1D"}