@perses-dev/dashboards 0.4.0 → 0.5.0

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -16,7 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // limitations under the License.
 const components_1 = require("@perses-dev/components");
 const core_1 = require("@perses-dev/core");
-const Panel_1 = require("../Panel");
+const Panel_1 = require("../Panel/Panel");
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -22,12 +22,12 @@ const COLUMNS = 24;
  * Layout component that arranges children in a Grid based on the definition.
  */
 function GridLayout(props) {
-    var _a, _b;
-    const { definition: { display, items }, renderGridItemContent, ...others } = props;
-    const [isOpen, setIsOpen] = (0, react_1.useState)((_b = (_a = display === null || display === void 0 ? void 0 : display.collapse) === null || _a === void 0 ? void 0 : _a.open) !== null && _b !== void 0 ? _b : true);
+    var _a, _b, _c;
+    const { definition: { spec }, renderGridItemContent, ...others } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)((_c = (_b = (_a = spec.display) === null || _a === void 0 ? void 0 : _a.collapse) === null || _b === void 0 ? void 0 : _b.open) !== null && _c !== void 0 ? _c : true);
     const gridItems = [];
     let mobileRowStart = 1;
-    items.forEach((item, idx) => {
+    spec.items.forEach((item, idx) => {
         // Try to maintain the chart's aspect ratio on mobile
         const widthScale = COLUMNS / item.width;
         const mobileRows = Math.floor(item.height * widthScale);
@@ -43,7 +43,7 @@ function GridLayout(props) {
             }, children: renderGridItemContent(item) }, idx));
         mobileRowStart += mobileRows;
     });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { title: display.title, collapse: display.collapse === undefined
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [spec.display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { title: spec.display.title, collapse: spec.display.collapse === undefined
                     ? undefined
                     : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) } })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                         display: 'grid',

package/dist/cjs/components/{Panel.js → Panel/Panel.js}

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -18,9 +18,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // See the License for the specific language governing permissions and
 // limitations under the License.
 const react_1 = require("react");
-const material_1 = require("@mui/material");
 const plugin_system_1 = require("@perses-dev/plugin-system");
 const components_1 = require("@perses-dev/components");
+const material_1 = require("@mui/material");
+const InformationOutline_1 = __importDefault(require("mdi-material-ui/InformationOutline"));
 const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
 /**
  * Renders a PanelDefinition's content inside of a Card.
@@ -28,23 +29,27 @@ const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
 function Panel(props) {
     const { definition, ...others } = props;
     const [contentElement, setContentElement] = (0, react_1.useState)(null);
-    const isStatsChart = definition.kind === 'StatChart';
-    const panelPadding = isStatsChart ? 0 : 2;
     const { width, height } = (0, use_resize_observer_1.default)({ ref: contentElement });
     const contentDimensions = (0, react_1.useMemo)(() => {
         if (width === undefined || height === undefined)
             return undefined;
         return { width, height };
     }, [width, height]);
+    // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
+    const panelPadding = 1.5;
     return ((0, jsx_runtime_1.jsxs)(material_1.Card, { sx: {
             ...others.sx,
             width: '100%',
             height: '100%',
             display: 'flex',
             flexFlow: 'column nowrap',
-        }, variant: "outlined", ...others, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "body2", fontWeight: (theme) => theme.typography.fontWeightMedium, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: definition.display.name }), sx: {
+        }, variant: "outlined", ...others, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "body2", fontWeight: (theme) => theme.typography.fontWeightMedium, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: definition.display.name }), definition.display.description && ((0, jsx_runtime_1.jsx)(components_1.InfoTooltip, { id: "info-tooltip", description: definition.display.description, placement: components_1.TooltipPlacement.Right, children: (0, jsx_runtime_1.jsx)(InformationOutline_1.default, { "aria-describedby": "info-tooltip", "aria-hidden": false, sx: { fontSize: '1rem', position: 'relative', left: '4px', cursor: 'pointer' } }) }))] }), sx: {
                     display: 'block',
-                    padding: (theme) => theme.spacing(1, 2),
+                    padding: (theme) => theme.spacing(1, panelPadding),
+                    borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,
                 } }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: {
                     position: 'relative',
                     overflow: 'hidden',

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const react_1 = require("@testing-library/react");
+const test_1 = require("../../test");
+const Panel_1 = require("./Panel");
+const FAKE_PANEL_PLUGIN = {
+    pluginType: 'Panel',
+    kind: 'FakePanel',
+    plugin: {
+        PanelComponent: () => {
+            return (0, jsx_runtime_1.jsx)("div", { role: "figure", children: "FakePanel chart" });
+        },
+    },
+};
+describe('Panel', () => {
+    let props;
+    beforeEach(() => {
+        props = {
+            definition: {
+                display: {
+                    name: 'Fake Panel',
+                    description: 'This is a fake panel',
+                },
+                kind: 'FakePanel',
+                options: {},
+            },
+        };
+    });
+    // Helper to render the panel with some context set
+    const renderPanel = () => {
+        const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
+        addMockPlugin(FAKE_PANEL_PLUGIN);
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(Panel_1.Panel, { ...props }) }));
+    };
+    it('should render name and info icon', async () => {
+        renderPanel();
+        await react_1.screen.findByText('Fake Panel');
+        react_1.screen.queryByLabelText('info-tooltip');
+    });
+});

package/dist/cjs/components/{VariableOptionsDrawer.js → VariableOptionsDrawer/VariableOptionsDrawer.js}

@@ -17,8 +17,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const components_1 = require("@perses-dev/components");
 const plugin_system_1 = require("@perses-dev/plugin-system");
-const context_1 = require("../context");
-const VariableAutocomplete_1 = require("./VariableAutocomplete");
+const context_1 = require("../../context");
+const VariableAutocomplete_1 = require("../VariableAutocomplete");
 const DRAWER_WIDTH = 296;
 /**
  * Dashboard options drawer that includes variable inputs.

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

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const test_1 = require("../../test");
+const context_1 = require("../../context");
+const VariableOptionsDrawer_1 = require("./VariableOptionsDrawer");
+describe('VariableOptionsDrawer', () => {
+    const variables = {
+        job: {
+            display: {
+                label: 'Job',
+            },
+            kind: 'PrometheusLabelValues',
+            selection: {
+                default_value: 'node',
+            },
+            options: {
+                label_name: 'job',
+                match: ['node_uname_info'],
+            },
+        },
+    };
+    const options = {
+        data: ['node', 'all'],
+        isLoading: false,
+        error: undefined,
+    };
+    const FAKE_PANEL_PLUGIN = {
+        pluginType: 'Variable',
+        kind: 'PrometheusLabelValues',
+        plugin: {
+            useVariableOptions: () => {
+                return options;
+            },
+        },
+    };
+    const renderVariableOptionsDrawer = () => {
+        const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
+        addMockPlugin(FAKE_PANEL_PLUGIN);
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: variables, children: (0, jsx_runtime_1.jsx)(VariableOptionsDrawer_1.VariableOptionsDrawer, { variables: variables }) }) }));
+    };
+    it('should display Variables as the title', async () => {
+        renderVariableOptionsDrawer();
+        await react_1.screen.findByText('Variables');
+    });
+    describe('VariableAutocomplete', () => {
+        it('should display correct variable', async () => {
+            renderVariableOptionsDrawer();
+            await react_1.screen.findByLabelText('Job');
+        });
+        it('should display correct default value', async () => {
+            renderVariableOptionsDrawer();
+            await react_1.screen.findByDisplayValue('node');
+        });
+        it('should display correct options', async () => {
+            renderVariableOptionsDrawer();
+            const openButton = await react_1.screen.findByRole('button', { name: 'Open' });
+            user_event_1.default.click(openButton);
+            await react_1.screen.findByText('all');
+            react_1.screen.getByText('node');
+        });
+    });
+});

package/dist/cjs/components/index.js

@@ -28,6 +28,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Dashboard"), exports);
 __exportStar(require("./GridLayout"), exports);
-__exportStar(require("./Panel"), exports);
+__exportStar(require("./Panel/Panel"), exports);
 __exportStar(require("./VariableAutocomplete"), exports);
-__exportStar(require("./VariableOptionsDrawer"), exports);
+__exportStar(require("./VariableOptionsDrawer/VariableOptionsDrawer"), exports);

package/dist/cjs/test/index.js

@@ -0,0 +1,30 @@
+"use strict";
+// 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./plugin-registry"), exports);
+__exportStar(require("./render"), exports);

package/dist/cjs/test/plugin-registry.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mockPluginRegistryProps = void 0;
+/**
+ * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`
+ * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned
+ * to add mock plugins before rendering components that use them.
+ */
+function mockPluginRegistryProps() {
+    const mockPluginResource = {
+        kind: 'Plugin',
+        metadata: {
+            name: 'Fake Plugin for Tests',
+        },
+        spec: {
+            supported_kinds: {},
+        },
+    };
+    // Allow adding mock plugins in tests
+    const mockSetupFunctions = [];
+    const addMockPlugin = (config) => {
+        mockPluginResource.spec.supported_kinds[config.kind] = config.pluginType;
+        mockSetupFunctions.push((registerPlugin) => {
+            registerPlugin(config);
+        });
+    };
+    // Our mock plugin module just calls all the setup functions that were added
+    const mockPluginModule = {
+        setup(registerPlugin) {
+            for (const setup of mockSetupFunctions) {
+                setup(registerPlugin);
+            }
+        },
+    };
+    const pluginRegistryProps = {
+        getInstalledPlugins() {
+            return Promise.resolve([mockPluginResource]);
+        },
+        importPluginModule( /* resource */) {
+            return Promise.resolve(mockPluginModule);
+        },
+    };
+    return {
+        pluginRegistryProps,
+        addMockPlugin,
+    };
+}
+exports.mockPluginRegistryProps = mockPluginRegistryProps;

package/dist/cjs/test/render.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderWithContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+const react_1 = require("@testing-library/react");
+const react_query_1 = require("react-query");
+const queryClient = new react_query_1.QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
+/**
+ * Test helper to render a React component with some common app-level providers wrapped around it.
+ */
+function renderWithContext(ui, options) {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: ui }), options);
+}
+exports.renderWithContext = renderWithContext;

package/dist/cjs/test/setup-tests.js

@@ -0,0 +1,18 @@
+"use strict";
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+// Add testing library assertions
+require("@testing-library/jest-dom/extend-expect");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

package/dist/components/GridLayout/GridItemContent.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{ErrorAlert}from"@perses-dev/components";import{resolvePanelRef}from"@perses-dev/core";import{Panel}from"../Panel";export function GridItemContent(r){const{content:e,spec:o}=r;try{const r=resolvePanelRef(o,e);return _jsx(Panel,{definition:r})}catch(r){return _jsx(ErrorAlert,{error:r})}}
+import{jsx as _jsx}from"react/jsx-runtime";import{ErrorAlert}from"@perses-dev/components";import{resolvePanelRef}from"@perses-dev/core";import{Panel}from"../Panel/Panel";export function GridItemContent(e){const{content:r,spec:o}=e;try{const e=resolvePanelRef(o,r);return _jsx(Panel,{definition:e})}catch(e){return _jsx(ErrorAlert,{error:e})}}

package/dist/components/GridLayout/GridLayout.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Box,Collapse}from"@mui/material";import{GridTitle}from"./GridTitle";const COLUMNS=24;export function GridLayout(i){var o,s;const{definition:{display:t,items:e},renderGridItemContent:n,...r}=i,[l,a]=useState(null===(s=null===(o=null==t?void 0:t.collapse)||void 0===o?void 0:o.open)||void 0===s||s),p=[];let d=1;return e.forEach(((i,o)=>{const s=24/i.width,t=Math.floor(i.height*s);p.push(_jsx(Box,{sx:{gridColumn:{xs:"1 / span 24",sm:`${i.x+1} / span ${i.width}`},gridRow:{xs:`${d} / span ${t}`,sm:`${i.y+1} / span ${i.height}`}},children:n(i)},o)),d+=t})),_jsxs(Box,{...r,component:"section",sx:{"& + &":{marginTop:i=>i.spacing(1)}},children:[void 0!==t&&_jsx(GridTitle,{title:t.title,collapse:void 0===t.collapse?void 0:{isOpen:l,onToggleOpen:()=>a((i=>!i))}}),_jsx(Collapse,{in:l,unmountOnExit:!0,children:_jsx(Box,{sx:{display:"grid",gridTemplateColumns:"repeat(24, 1fr)",gridAutoRows:{xs:24,sm:36},columnGap:i=>i.spacing(1),rowGap:i=>i.spacing(1)},children:p})})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Box,Collapse}from"@mui/material";import{GridTitle}from"./GridTitle";const COLUMNS=24;export function GridLayout(i){var s,o,e;const{definition:{spec:t},renderGridItemContent:n,...l}=i,[r,a]=useState(null===(e=null===(o=null===(s=t.display)||void 0===s?void 0:s.collapse)||void 0===o?void 0:o.open)||void 0===e||e),p=[];let d=1;return t.items.forEach(((i,s)=>{const o=24/i.width,e=Math.floor(i.height*o);p.push(_jsx(Box,{sx:{gridColumn:{xs:"1 / span 24",sm:`${i.x+1} / span ${i.width}`},gridRow:{xs:`${d} / span ${e}`,sm:`${i.y+1} / span ${i.height}`}},children:n(i)},s)),d+=e})),_jsxs(Box,{...l,component:"section",sx:{"& + &":{marginTop:i=>i.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:r,onToggleOpen:()=>a((i=>!i))}}),_jsx(Collapse,{in:r,unmountOnExit:!0,children:_jsx(Box,{sx:{display:"grid",gridTemplateColumns:"repeat(24, 1fr)",gridAutoRows:{xs:24,sm:36},columnGap:i=>i.spacing(1),rowGap:i=>i.spacing(1)},children:p})})]})}

package/dist/components/{Panel.d.ts → Panel/Panel.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CardProps } from '@mui/material';
 import { PanelDefinition } from '@perses-dev/core';
+import { CardProps } from '@mui/material';
 export interface PanelProps extends CardProps {
     definition: PanelDefinition;
 }

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAa,SAAS,EAAuC,MAAM,eAAe,CAAC;AAI1F,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoFtC"}

package/dist/components/Panel/Panel.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";import useResizeObserver from"use-resize-observer";export function Panel(e){const{definition:i,...o}=e,[r,t]=useState(null),{width:n,height:s}=useResizeObserver({ref:r}),a=useMemo((()=>{if(void 0!==n&&void 0!==s)return{width:n,height:s}}),[n,s]);return _jsxs(Card,{sx:{...o.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...o,children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Right,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,sx:{fontSize:"1rem",position:"relative",left:"4px",cursor:"pointer"}})})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:t,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(PanelComponent,{definition:i,contentDimensions:a})})})]})}

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

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

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps}from"../../test";import{Panel}from"./Panel";const FAKE_PANEL_PLUGIN={pluginType:"Panel",kind:"FakePanel",plugin:{PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"})}};describe("Panel",(()=>{let e;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}}}})),it("should render name and info icon",(async()=>{(()=>{const{addMockPlugin:n,pluginRegistryProps:i}=mockPluginRegistryProps();n(FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...i,children:_jsx(Panel,{...e})}))})(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")}))}));

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableOptionsDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/VariableOptionsDrawer/VariableOptionsDrawer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqB,UAAU,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD,MAAM,WAAW,0BAA2B,SAAQ,UAAU;IAC5D,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA8CtE"}

package/dist/components/VariableOptionsDrawer/VariableOptionsDrawer.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Paper,Typography}from"@mui/material";import{ErrorAlert,combineSx}from"@perses-dev/components";import{PluginBoundary,useTemplateVariables}from"@perses-dev/plugin-system";import{useTemplateVariablesSetters}from"../../context";import{VariableAutocomplete}from"../VariableAutocomplete";const DRAWER_WIDTH=296;export function VariableOptionsDrawer(e){const{variables:r,sx:t,...a}=e,{variables:o}=useTemplateVariables(),{setValue:i,setOptions:s}=useTemplateVariablesSetters();return _jsxs(Paper,{sx:combineSx({width:296,flexShrink:0,padding:e=>e.spacing(1,2),borderLeft:e=>`1px solid ${e.palette.divider}`},t),square:!0,elevation:0,...a,children:[_jsx(Typography,{component:"h2",variant:"h6",children:"Variables"}),Object.entries(r).map((([e,r])=>{if(!0===r.display.hide)return null;const t=o[e];if(void 0===t){const r=new Error(`Variable state for '${e}' not found`);return _jsx(ErrorAlert,{error:r},e)}return _jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(VariableAutocomplete,{definition:r,state:t,onChange:r=>i(e,r),onOptionsChange:r=>s(e,r)})},e)}))]})}

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

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

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

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

package/dist/components/VariableOptionsDrawer/VariableOptionsDrawer.test.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{PluginRegistry}from"@perses-dev/plugin-system";import{mockPluginRegistryProps,renderWithContext}from"../../test";import{TemplateVariablesProvider}from"../../context";import{VariableOptionsDrawer}from"./VariableOptionsDrawer";describe("VariableOptionsDrawer",(()=>{const e={job:{display:{label:"Job"},kind:"PrometheusLabelValues",selection:{default_value:"node"},options:{label_name:"job",match:["node_uname_info"]}}},i={data:["node","all"],isLoading:!1,error:void 0},r={pluginType:"Variable",kind:"PrometheusLabelValues",plugin:{useVariableOptions:()=>i}},a=()=>{const{addMockPlugin:i,pluginRegistryProps:a}=mockPluginRegistryProps();i(r),renderWithContext(_jsx(PluginRegistry,{...a,children:_jsx(TemplateVariablesProvider,{variableDefinitions:e,children:_jsx(VariableOptionsDrawer,{variables:e})})}))};it("should display Variables as the title",(async()=>{a(),await screen.findByText("Variables")})),describe("VariableAutocomplete",(()=>{it("should display correct variable",(async()=>{a(),await screen.findByLabelText("Job")})),it("should display correct default value",(async()=>{a(),await screen.findByDisplayValue("node")})),it("should display correct options",(async()=>{a();const e=await screen.findByRole("button",{name:"Open"});userEvent.click(e),await screen.findByText("all"),screen.getByText("node")}))}))}));

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 export * from './Dashboard';
 export * from './GridLayout';
-export * from './Panel';
+export * from './Panel/Panel';
 export * from './VariableAutocomplete';
-export * from './VariableOptionsDrawer';
+export * from './VariableOptionsDrawer/VariableOptionsDrawer';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,+CAA+C,CAAC"}

package/dist/components/index.js

@@ -1 +1 @@
-export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel";export*from"./VariableAutocomplete";export*from"./VariableOptionsDrawer";
+export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel/Panel";export*from"./VariableAutocomplete";export*from"./VariableOptionsDrawer/VariableOptionsDrawer";

package/dist/test/index.d.ts

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

package/dist/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test/index.ts"],"names":[],"mappings":"AAaA,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC"}

package/dist/test/index.js

@@ -0,0 +1 @@
+export*from"./plugin-registry";export*from"./render";

package/dist/test/plugin-registry.d.ts

@@ -0,0 +1,11 @@
+import { PluginRegistryProps, RegisterPlugin } from '@perses-dev/plugin-system';
+/**
+ * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`
+ * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned
+ * to add mock plugins before rendering components that use them.
+ */
+export declare function mockPluginRegistryProps(): {
+    pluginRegistryProps: Omit<PluginRegistryProps, "children">;
+    addMockPlugin: RegisterPlugin;
+};
+//# sourceMappingURL=plugin-registry.d.ts.map

package/dist/test/plugin-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-registry.d.ts","sourceRoot":"","sources":["../../src/test/plugin-registry.ts"],"names":[],"mappings":"AAYA,OAAO,EAEL,mBAAmB,EAGnB,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,uBAAuB;;;EA0CtC"}

package/dist/test/plugin-registry.js

@@ -0,0 +1 @@
+export function mockPluginRegistryProps(){const e={kind:"Plugin",metadata:{name:"Fake Plugin for Tests"},spec:{supported_kinds:{}}},s=[],n={setup(e){for(const n of s)n(e)}};return{pluginRegistryProps:{getInstalledPlugins:()=>Promise.resolve([e]),importPluginModule:()=>Promise.resolve(n)},addMockPlugin:n=>{e.spec.supported_kinds[n.kind]=n.pluginType,s.push((e=>{e(n)}))}}}

package/dist/test/render.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { RenderOptions } from '@testing-library/react';
+/**
+ * Test helper to render a React component with some common app-level providers wrapped around it.
+ */
+export declare function renderWithContext(ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+//# sourceMappingURL=render.d.ts.map

package/dist/test/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK/D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,gIAEjG"}

package/dist/test/render.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{QueryClient,QueryClientProvider}from"react-query";const queryClient=new QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});export function renderWithContext(e,r){return render(_jsx(QueryClientProvider,{client:queryClient,children:e}),r)}

package/dist/test/setup-tests.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+//# sourceMappingURL=setup-tests.d.ts.map

package/dist/test/setup-tests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-tests.d.ts","sourceRoot":"","sources":["../../src/test/setup-tests.ts"],"names":[],"mappings":"AAcA,OAAO,yCAAyC,CAAC"}

package/dist/test/setup-tests.js

@@ -0,0 +1 @@
+import"@testing-library/jest-dom/extend-expect";jest.mock("echarts/core");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -18,16 +18,17 @@
     "clean": "rimraf dist/",
     "build": "tsc --build",
     "build:cjs": "tsc --project ./tsconfig.cjs.json",
-    "test": "echo 'no test to run' && exit 0",
+    "test": "TZ=UTC jest",
+    "test:watch": "TZ=UTC jest --watch",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.4.0",
-    "@perses-dev/core": "^0.4.0",
-    "@perses-dev/plugin-system": "^0.4.0",
-    "immer": "^9.0.12",
-    "use-immer": "^0.6.0",
+    "@perses-dev/components": "^0.5.0",
+    "@perses-dev/core": "^0.5.0",
+    "@perses-dev/plugin-system": "^0.5.0",
+    "immer": "^9.0.15",
+    "use-immer": "^0.7.0",
     "use-resize-observer": "^8.0.0"
   },
   "peerDependencies": {

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

@@ -1 +0,0 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAQ,SAAS,EAAuC,MAAM,eAAe,CAAC;AAIrF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA8DtC"}

package/dist/components/Panel.js

@@ -1 +0,0 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import{Card,CardHeader,CardContent,Typography}from"@mui/material";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert}from"@perses-dev/components";import useResizeObserver from"use-resize-observer";export function Panel(e){const{definition:r,...i}=e,[o,n]=useState(null),t="StatChart"===r.kind?0:2,{width:s,height:a}=useResizeObserver({ref:o}),d=useMemo((()=>{if(void 0!==s&&void 0!==a)return{width:s,height:a}}),[s,a]);return _jsxs(Card,{sx:{...i.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...i,children:[_jsx(CardHeader,{title:_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:r.display.name}),sx:{display:"block",padding:e=>e.spacing(1,2)}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(t),":last-child":{padding:e=>e.spacing(t)}},ref:n,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(PanelComponent,{definition:r,contentDimensions:d})})})]})}

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

@@ -1 +0,0 @@
-{"version":3,"file":"VariableOptionsDrawer.d.ts","sourceRoot":"","sources":["../../src/components/VariableOptionsDrawer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqB,UAAU,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD,MAAM,WAAW,0BAA2B,SAAQ,UAAU;IAC5D,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA8CtE"}

package/dist/components/VariableOptionsDrawer.js

@@ -1 +0,0 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Paper,Typography}from"@mui/material";import{ErrorAlert,combineSx}from"@perses-dev/components";import{PluginBoundary,useTemplateVariables}from"@perses-dev/plugin-system";import{useTemplateVariablesSetters}from"../context";import{VariableAutocomplete}from"./VariableAutocomplete";const DRAWER_WIDTH=296;export function VariableOptionsDrawer(e){const{variables:r,sx:t,...a}=e,{variables:o}=useTemplateVariables(),{setValue:i,setOptions:s}=useTemplateVariablesSetters();return _jsxs(Paper,{sx:combineSx({width:296,flexShrink:0,padding:e=>e.spacing(1,2),borderLeft:e=>`1px solid ${e.palette.divider}`},t),square:!0,elevation:0,...a,children:[_jsx(Typography,{component:"h2",variant:"h6",children:"Variables"}),Object.entries(r).map((([e,r])=>{if(!0===r.display.hide)return null;const t=o[e];if(void 0===t){const r=new Error(`Variable state for '${e}' not found`);return _jsx(ErrorAlert,{error:r},e)}return _jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(VariableAutocomplete,{definition:r,state:t,onChange:r=>i(e,r),onOptionsChange:r=>s(e,r)})},e)}))]})}