@perses-dev/dashboards 0.23.1 → 0.24.0

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -26,6 +26,7 @@ _export(exports, {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
+const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
@@ -94,8 +95,9 @@ const TIME_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx  }) {
+function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
+    // TODO: Remove this since it couples to the dashboard context
     const defaultTimeRange = (0, _context.useDefaultTimeRange)();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
@@ -110,7 +112,9 @@ function TimeRangeControls({ heightPx  }) {
             });
         }
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
                 timeOptions: TIME_OPTIONS,
@@ -118,7 +122,7 @@ function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            showRefresh && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.refreshDashboard,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
                     "aria-label": _constants.TOOLTIP_TEXT.refreshDashboard,

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts

@@ -3,7 +3,8 @@ import { TimeOption } from '@perses-dev/components';
 export declare const TIME_OPTIONS: TimeOption[];
 interface TimeRangeControlsProps {
     heightPx?: number;
+    showRefresh?: boolean;
 }
-export declare function TimeRangeControls({ heightPx }: TimeRangeControlsProps): JSX.Element;
+export declare function TimeRangeControls({ heightPx, showRefresh }: TimeRangeControlsProps): JSX.Element;
 export {};
 //# sourceMappingURL=TimeRangeControls.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAoC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOtF,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,eA2BrE"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAoC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOtF,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAkB,EAAE,EAAE,sBAAsB,eA8BzF"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -10,8 +10,9 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from 'mdi-material-ui/Refresh';
+import { Stack } from '@mui/material';
 import { DateTimeRangePicker, InfoTooltip } from '@perses-dev/components';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { isDurationString } from '@perses-dev/core';
@@ -75,8 +76,9 @@ export const TIME_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-export function TimeRangeControls({ heightPx  }) {
+export function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = useTimeRange();
+    // TODO: Remove this since it couples to the dashboard context
     const defaultTimeRange = useDefaultTimeRange();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
@@ -91,7 +93,9 @@ export function TimeRangeControls({ heightPx  }) {
             });
         }
     }
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
         children: [
             /*#__PURE__*/ _jsx(DateTimeRangePicker, {
                 timeOptions: TIME_OPTIONS,
@@ -99,7 +103,7 @@ export function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ _jsx(InfoTooltip, {
+            showRefresh && /*#__PURE__*/ _jsx(InfoTooltip, {
                 description: TOOLTIP_TEXT.refreshDashboard,
                 children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
                     "aria-label": TOOLTIP_TEXT.refreshDashboard,

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2023 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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { DateTimeRangePicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDefaultTimeRange } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n}\n\nexport function TimeRangeControls({ heightPx }: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} height={height} />\n      <InfoTooltip description={TOOLTIP_TEXT.refreshDashboard}>\n        <ToolbarIconButton aria-label={TOOLTIP_TEXT.refreshDashboard} onClick={refresh} sx={{ height }}>\n          <RefreshIcon />\n        </ToolbarIconButton>\n      </InfoTooltip>\n    </>\n  );\n}\n"],"names":["RefreshIcon","DateTimeRangePicker","InfoTooltip","useTimeRange","isDurationString","TOOLTIP_TEXT","useDefaultTimeRange","ToolbarIconButton","TIME_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","timeRange","setTimeRange","refresh","defaultTimeRange","height","undefined","some","option","push","timeOptions","onChange","description","refreshDashboard","aria-label","onClick","sx"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2023 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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport { DateTimeRangePicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDefaultTimeRange } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n\n  // Whether to show the refresh button or not\n  showRefresh?: boolean;\n}\n\nexport function TimeRangeControls({ heightPx, showRefresh = true }: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  // TODO: Remove this since it couples to the dashboard context\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} height={height} />\n      {showRefresh && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshDashboard}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refreshDashboard} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","Stack","DateTimeRangePicker","InfoTooltip","useTimeRange","isDurationString","TOOLTIP_TEXT","useDefaultTimeRange","ToolbarIconButton","TIME_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showRefresh","timeRange","setTimeRange","refresh","defaultTimeRange","height","undefined","some","option","push","direction","spacing","timeOptions","onChange","description","refreshDashboard","aria-label","onClick","sx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.23.1",
+  "version": "0.24.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -20,7 +20,8 @@
     "build": "concurrently \"npm:build:*\"",
     "build:cjs": "swc ./src -d dist/cjs --config-file ../.cjs.swcrc",
     "build:esm": "swc ./src -d dist --config-file ../.swcrc",
-    "build:types": "tsc --emitDeclarationOnly --declaration --preserveWatchOutput",
+    "build:types": "tsc --project tsconfig.build.json",
+    "type-check": "tsc --noEmit",
     "start": "concurrently -P \"npm:build:* -- {*}\" -- --watch",
     "test": "TZ=UTC jest",
     "test:watch": "npm run test -- --watch",
@@ -28,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.23.1",
-    "@perses-dev/core": "0.23.1",
-    "@perses-dev/plugin-system": "0.23.1",
+    "@perses-dev/components": "0.24.0",
+    "@perses-dev/core": "0.24.0",
+    "@perses-dev/plugin-system": "0.24.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",

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

@@ -1,137 +0,0 @@
-// Copyright 2023 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("@testing-library/react");
-const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _test = require("../../test");
-const _panel = require("./Panel");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-describe('Panel', ()=>{
-    const createTestPanel = ()=>({
-            kind: 'Panel',
-            spec: {
-                display: {
-                    name: 'Fake Panel Title',
-                    description: 'This is a fake panel'
-                },
-                plugin: {
-                    kind: 'TimeSeriesChart',
-                    spec: {}
-                }
-            }
-        });
-    // Helper to render the panel with some context set
-    const renderPanel = (definition, editHandlers)=>{
-        definition !== null && definition !== void 0 ? definition : definition = createTestPanel();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-            definition: definition,
-            editHandlers: editHandlers
-        }));
-    };
-    // Helper to get the panel once rendered
-    const getPanel = ()=>_react.screen.getByRole('region', {
-            name: 'Fake Panel Title'
-        });
-    it('should render panel', async ()=>{
-        renderPanel();
-        const panel = getPanel();
-        expect(panel).toBeInTheDocument();
-        // Should diplay header with panel's title
-        const header = _react.screen.getByRole('banner');
-        expect(header).toHaveTextContent('Fake Panel Title');
-        // Should display chart's content from the fake panel plugin
-        const content = _react.screen.getByRole('figure');
-        await (0, _react.waitFor)(()=>{
-            expect(content).toHaveTextContent('TimeSeriesChart panel');
-        });
-        expect(content);
-    });
-    it('shows panel description', async ()=>{
-        renderPanel();
-        const panel = getPanel();
-        // Description button should not be visible until hover on panel
-        const missingButton = _react.screen.queryByRole('button', {
-            name: /description/i
-        });
-        expect(missingButton).not.toBeInTheDocument();
-        _userEvent.default.hover(panel);
-        const descriptionButton = _react.screen.getByRole('button', {
-            name: /description/i
-        });
-        expect(descriptionButton).toBeInTheDocument();
-        // Can hover to see panel description in tooltip
-        _userEvent.default.hover(descriptionButton);
-        const tooltip = await _react.screen.findByRole('tooltip');
-        expect(tooltip).toHaveTextContent('This is a fake panel');
-    });
-    it('does not show description when panel does not have one', ()=>{
-        // Render a panel without a description set
-        const withoutDescription = createTestPanel();
-        withoutDescription.spec.display.description = undefined;
-        renderPanel(withoutDescription);
-        const panel = getPanel();
-        _userEvent.default.hover(panel);
-        const descriptionButton = _react.screen.queryByRole('button', {
-            name: /description/i
-        });
-        expect(descriptionButton).not.toBeInTheDocument();
-    });
-    it('does not show description in edit mode', ()=>{
-        renderPanel(undefined, {
-            onEditPanelClick: jest.fn(),
-            onDeletePanelClick: jest.fn(),
-            onDuplicatePanelClick: jest.fn()
-        });
-        const panel = getPanel();
-        _userEvent.default.hover(panel);
-        const descriptionButton = _react.screen.queryByRole('button', {
-            name: /description/i
-        });
-        expect(descriptionButton).not.toBeInTheDocument();
-    });
-    it('can trigger panel actions in edit mode', ()=>{
-        const onEditPanelClick = jest.fn();
-        const onDeletePanelClick = jest.fn();
-        const onDuplicatePanelClick = jest.fn();
-        renderPanel(undefined, {
-            onEditPanelClick,
-            onDeletePanelClick,
-            onDuplicatePanelClick
-        });
-        const panel = getPanel();
-        _userEvent.default.hover(panel);
-        const editButton = _react.screen.getByRole('button', {
-            name: /edit/i
-        });
-        _userEvent.default.click(editButton);
-        const deleteButton = _react.screen.getByRole('button', {
-            name: /delete/i
-        });
-        _userEvent.default.click(deleteButton);
-        const duplicateButton = _react.screen.getByRole('button', {
-            name: /duplicate/i
-        });
-        _userEvent.default.click(duplicateButton);
-        expect(onEditPanelClick).toHaveBeenCalledTimes(1);
-        expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
-        expect(onDuplicatePanelClick).toHaveBeenCalledTimes(1);
-    });
-});

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

@@ -1,131 +0,0 @@
-// Copyright 2023 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("@testing-library/react");
-const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _testUtils = require("react-dom/test-utils");
-const _test = require("../../test");
-const _dashboardProvider = require("../../context/DashboardProvider");
-const _panelDrawer = require("./PanelDrawer");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-describe('Panel Drawer', ()=>{
-    const renderPanelDrawer = ()=>{
-        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
-            initialState: {
-                dashboardResource: (0, _test.getTestDashboard)(),
-                isEditMode: true
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.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
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.type(nameInput, 'New Panel');
-        _userEvent.default.click(_react.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 add panel with duplicate panel name', async ()=>{
-        const storeApi = renderPanelDrawer();
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.type(nameInput, 'cpu');
-        _userEvent.default.click(_react.screen.getByText('Add'));
-        const panels = storeApi.getState().panels;
-        expect(panels).toMatchObject({
-            // make sure we don't have duplicate panel key by appending "-1"
-            'cpu-1': {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name: 'cpu'
-                    },
-                    plugin: {
-                        kind: '',
-                        spec: {}
-                    }
-                }
-            }
-        });
-    });
-    it('should edit an existing panel', async ()=>{
-        const storeApi = renderPanelDrawer();
-        // Open the drawer for an existing panel
-        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
-        if (group === undefined) {
-            throw new Error('Test group not found');
-        }
-        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
-        if (layout === undefined) {
-            throw new Error('Test panel not found');
-        }
-        (0, _testUtils.act)(()=>storeApi.getState().openEditPanel({
-                panelGroupId: group.id,
-                panelGroupItemLayoutId: layout[0]
-            }));
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.clear(nameInput);
-        _userEvent.default.type(nameInput, 'cpu usage');
-        _userEvent.default.click(_react.screen.getByText('Apply'));
-        const panels = storeApi.getState().panels;
-        expect(panels).toMatchObject({
-            cpu: {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name: 'cpu usage'
-                    },
-                    plugin: {
-                        kind: 'TimeSeriesChart',
-                        spec: {}
-                    }
-                }
-            }
-        });
-    });
-});

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

@@ -1,87 +0,0 @@
-// Copyright 2023 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("@testing-library/react");
-const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _testUtils = require("react-dom/test-utils");
-const _context = require("../../context");
-const _test = require("../../test");
-const _panelGroupDialog = require("./PanelGroupDialog");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-describe('Add Panel Group', ()=>{
-    const renderDialog = ()=>{
-        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
-            initialState: {
-                dashboardResource: (0, _test.getTestDashboard)(),
-                isEditMode: true
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.PanelGroupDialog, {})
-            ]
-        }));
-        const { value: storeApi  } = store;
-        if (storeApi === undefined) {
-            throw new Error('Expected dashboard store to be set after initial render');
-        }
-        return storeApi;
-    };
-    it('should add new panel group', async ()=>{
-        const storeApi = renderDialog();
-        // Open the dialog for a new panel group
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanelGroup());
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.type(nameInput, 'New Panel Group');
-        _userEvent.default.click(_react.screen.getByText('Add'));
-        // TODO: Figure out how to test this without coupling to the store state
-        const panelGroups = Object.values(storeApi.getState().panelGroups);
-        expect(panelGroups).toContainEqual({
-            id: expect.any(Number),
-            title: 'New Panel Group',
-            isCollapsed: false,
-            itemLayouts: expect.any(Array),
-            itemPanelKeys: expect.any(Object)
-        });
-    });
-    it('should edit existing panel group', async ()=>{
-        const storeApi = renderDialog();
-        // Open the dialog for an existing panel group
-        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
-        if (group === undefined) {
-            throw new Error('Missing test group');
-        }
-        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(group.id));
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.clear(nameInput);
-        _userEvent.default.type(nameInput, 'New Name');
-        _userEvent.default.click(_react.screen.getByText('Apply'));
-        // TODO: Figure out how to test this without coupling to the store state
-        const panelGroups = storeApi.getState().panelGroups;
-        expect(panelGroups).toMatchObject({
-            [group.id]: {
-                id: group.id,
-                title: 'New Name',
-                isCollapsed: false
-            }
-        });
-    });
-});

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

@@ -1,95 +0,0 @@
-// Copyright 2023 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _reactRouter = require("react-router");
-const _history = require("history");
-const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _react = require("@testing-library/react");
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _test = require("../../test");
-const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
-const _context = require("../../context");
-const _timeRangeControls = require("./TimeRangeControls");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const history = (0, _history.createMemoryHistory)({
-    initialEntries: [
-        (0, _reactRouter.generatePath)('/home'),
-        (0, _reactRouter.generatePath)('/dashboards/:id', {
-            id: 'test'
-        })
-    ]
-});
-describe('TimeRangeControls', ()=>{
-    let initialState;
-    const testDefaultTimeRange = {
-        pastDuration: _testDashboard.default.spec.duration
-    };
-    beforeEach(()=>{
-        initialState = {
-            dashboardResource: _testDashboard.default
-        };
-    });
-    const renderTimeRangeControls = (testURLParams)=>{
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
-            initialState: initialState,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
-                initialTimeRange: testDefaultTimeRange,
-                enabledURLParams: testURLParams,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
-            })
-        }), undefined, history);
-    };
-    it('should default to dashboard duration and update selected time option when clicked', async ()=>{
-        renderTimeRangeControls(false);
-        expect(_react.screen.getByText('Last 30 minutes')).toBeInTheDocument();
-        const dateButton = _react.screen.getByRole('button', {
-            name: /time range/i
-        });
-        _userEvent.default.click(dateButton);
-        const firstSelected = _react.screen.getByRole('option', {
-            name: 'Last 5 minutes'
-        });
-        _userEvent.default.click(firstSelected);
-        expect(dateButton).toHaveTextContent(/5 minutes/i);
-    });
-    it('should update URL params with correct time range values', ()=>{
-        renderTimeRangeControls(true);
-        const dateButton = _react.screen.getByRole('button', {
-            name: /time range/i
-        });
-        _userEvent.default.click(dateButton);
-        const firstSelected = _react.screen.getByRole('option', {
-            name: 'Last 5 minutes'
-        });
-        _userEvent.default.click(firstSelected);
-        expect(history.location.search).toEqual('?start=5m');
-        // pick another option from TimeRangeSelector dropdown
-        const secondSelected = _react.screen.getByText('Last 12 hours');
-        _userEvent.default.click(secondSelected);
-        expect(history.location.search).toEqual('?start=12h');
-        // back button should return to previous page selected
-        (0, _react.act)(()=>{
-            history.back();
-        });
-        expect(history.location.pathname).toEqual('/home');
-    });
-// TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
-});