@perses-dev/dashboards 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/{Dashboard.js → Dashboard/Dashboard.js} +2 -2
- package/dist/cjs/components/Dashboard/index.js +28 -0
- package/dist/cjs/components/{DashboardToolbar.js → DashboardToolbar/DashboardToolbar.js} +9 -23
- package/dist/cjs/components/DashboardToolbar/index.js +28 -0
- package/dist/cjs/components/{Panel → DeletePanelDialog}/DeletePanelDialog.js +2 -3
- package/dist/cjs/components/DeletePanelDialog/index.js +28 -0
- package/dist/cjs/components/{PanelGroupDialog → DeletePanelGroupDialog}/DeletePanelGroupDialog.js +0 -0
- package/dist/cjs/components/DeletePanelGroupDialog/index.js +28 -0
- package/dist/cjs/components/GridLayout/GridItemContent.js +11 -1
- package/dist/cjs/components/Panel/Panel.js +30 -89
- package/dist/cjs/components/Panel/Panel.test.js +93 -47
- package/dist/cjs/components/Panel/PanelHeader.js +116 -0
- package/dist/cjs/components/Panel/index.js +0 -1
- package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js +9 -15
- package/dist/cjs/components/PanelDrawer/PanelPreview.js +13 -20
- package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js +1 -1
- package/dist/cjs/components/PanelGroupDialog/index.js +0 -1
- package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js +1 -1
- package/dist/cjs/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js +67 -0
- package/dist/cjs/components/UnsavedChangesConfirmationDialog/index.js +28 -0
- package/dist/cjs/components/Variables/Variable.js +18 -11
- package/dist/cjs/components/index.js +4 -0
- package/dist/cjs/context/DashboardProvider/DashboardProvider.js +24 -18
- package/dist/cjs/context/DashboardProvider/common.js +3 -3
- package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js +2 -4
- package/dist/cjs/context/DashboardProvider/panel-group-slice.js +47 -52
- package/dist/cjs/context/DashboardProvider/panel-slice.js +2 -13
- package/dist/cjs/context/{TemplateVariableProvider.js → TemplateVariableProvider/TemplateVariableProvider.js} +25 -12
- package/dist/cjs/context/TemplateVariableProvider/index.js +28 -0
- package/dist/cjs/context/TemplateVariableProvider/query-params.js +79 -0
- package/dist/cjs/context/TemplateVariableProvider/query-params.test.js +82 -0
- package/dist/cjs/context/index.js +1 -1
- package/dist/cjs/context/{useDashboardSpec.js → useDashboard.js} +20 -16
- package/dist/cjs/test/plugin-registry.js +14 -54
- package/dist/cjs/test/render.js +6 -1
- package/dist/cjs/utils/component-ids.js +31 -0
- package/dist/cjs/views/ViewDashboard/DashboardApp.js +40 -10
- package/dist/cjs/views/ViewDashboard/ViewDashboard.js +1 -1
- package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js +1 -1
- package/dist/components/{Dashboard.d.ts → Dashboard/Dashboard.d.ts} +0 -0
- package/dist/components/Dashboard/Dashboard.d.ts.map +1 -0
- package/dist/components/{Dashboard.js → Dashboard/Dashboard.js} +2 -2
- package/dist/components/Dashboard/Dashboard.js.map +1 -0
- package/dist/components/Dashboard/index.d.ts +2 -0
- package/dist/components/Dashboard/index.d.ts.map +1 -0
- package/dist/components/Dashboard/index.js +15 -0
- package/dist/components/Dashboard/index.js.map +1 -0
- package/dist/components/{DashboardToolbar.d.ts → DashboardToolbar/DashboardToolbar.d.ts} +2 -0
- package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map +1 -0
- package/dist/components/{DashboardToolbar.js → DashboardToolbar/DashboardToolbar.js} +5 -19
- package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -0
- package/dist/components/DashboardToolbar/index.d.ts +2 -0
- package/dist/components/DashboardToolbar/index.d.ts.map +1 -0
- package/dist/components/DashboardToolbar/index.js +15 -0
- package/dist/components/DashboardToolbar/index.js.map +1 -0
- package/dist/components/DeletePanelDialog/DeletePanelDialog.d.ts +3 -0
- package/dist/components/DeletePanelDialog/DeletePanelDialog.d.ts.map +1 -0
- package/dist/components/{Panel → DeletePanelDialog}/DeletePanelDialog.js +1 -2
- package/dist/components/DeletePanelDialog/DeletePanelDialog.js.map +1 -0
- package/dist/components/DeletePanelDialog/index.d.ts +2 -0
- package/dist/components/DeletePanelDialog/index.d.ts.map +1 -0
- package/dist/components/DeletePanelDialog/index.js +15 -0
- package/dist/components/DeletePanelDialog/index.js.map +1 -0
- package/dist/components/{PanelGroupDialog → DeletePanelGroupDialog}/DeletePanelGroupDialog.d.ts +0 -0
- package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.d.ts.map +1 -0
- package/dist/components/{PanelGroupDialog → DeletePanelGroupDialog}/DeletePanelGroupDialog.js +0 -0
- package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map +1 -0
- package/dist/components/DeletePanelGroupDialog/index.d.ts +2 -0
- package/dist/components/DeletePanelGroupDialog/index.d.ts.map +1 -0
- package/dist/components/DeletePanelGroupDialog/index.js +15 -0
- package/dist/components/DeletePanelGroupDialog/index.js.map +1 -0
- package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
- package/dist/components/GridLayout/GridItemContent.js +12 -2
- package/dist/components/GridLayout/GridItemContent.js.map +1 -1
- package/dist/components/Panel/Panel.d.ts +3 -3
- package/dist/components/Panel/Panel.d.ts.map +1 -1
- package/dist/components/Panel/Panel.js +32 -91
- package/dist/components/Panel/Panel.js.map +1 -1
- package/dist/components/Panel/Panel.test.js +95 -49
- package/dist/components/Panel/Panel.test.js.map +1 -1
- package/dist/components/Panel/PanelHeader.d.ts +16 -0
- package/dist/components/Panel/PanelHeader.d.ts.map +1 -0
- package/dist/components/Panel/PanelHeader.js +105 -0
- package/dist/components/Panel/PanelHeader.js.map +1 -0
- package/dist/components/Panel/index.d.ts +0 -1
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +0 -1
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/PanelDrawer/PanelDrawer.test.js +10 -16
- package/dist/components/PanelDrawer/PanelDrawer.test.js.map +1 -1
- package/dist/components/PanelDrawer/PanelPreview.d.ts +2 -2
- package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
- package/dist/components/PanelDrawer/PanelPreview.js +13 -20
- package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
- package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js +1 -1
- package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js.map +1 -1
- package/dist/components/PanelGroupDialog/index.d.ts +0 -1
- package/dist/components/PanelGroupDialog/index.d.ts.map +1 -1
- package/dist/components/PanelGroupDialog/index.js +0 -1
- package/dist/components/PanelGroupDialog/index.js.map +1 -1
- package/dist/components/TimeRangeControls/TimeRangeControls.test.js +1 -1
- package/dist/components/TimeRangeControls/TimeRangeControls.test.js.map +1 -1
- package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.d.ts +8 -0
- package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.d.ts.map +1 -0
- package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js +56 -0
- package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js.map +1 -0
- package/dist/components/UnsavedChangesConfirmationDialog/index.d.ts +2 -0
- package/dist/components/UnsavedChangesConfirmationDialog/index.d.ts.map +1 -0
- package/dist/components/UnsavedChangesConfirmationDialog/index.js +15 -0
- package/dist/components/UnsavedChangesConfirmationDialog/index.js.map +1 -0
- package/dist/components/Variables/Variable.d.ts.map +1 -1
- package/dist/components/Variables/Variable.js +19 -12
- package/dist/components/Variables/Variable.js.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +4 -0
- package/dist/components/index.js.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.d.ts +4 -4
- package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.js +26 -20
- package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -1
- package/dist/context/DashboardProvider/common.d.ts +1 -1
- package/dist/context/DashboardProvider/common.d.ts.map +1 -1
- package/dist/context/DashboardProvider/common.js +4 -4
- package/dist/context/DashboardProvider/common.js.map +1 -1
- package/dist/context/DashboardProvider/dashboard-provider-api.d.ts +1 -2
- package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map +1 -1
- package/dist/context/DashboardProvider/dashboard-provider-api.js +2 -4
- package/dist/context/DashboardProvider/dashboard-provider-api.js.map +1 -1
- package/dist/context/DashboardProvider/index.d.ts +1 -0
- package/dist/context/DashboardProvider/index.d.ts.map +1 -1
- package/dist/context/DashboardProvider/index.js.map +1 -1
- package/dist/context/DashboardProvider/panel-group-slice.d.ts +1 -15
- package/dist/context/DashboardProvider/panel-group-slice.d.ts.map +1 -1
- package/dist/context/DashboardProvider/panel-group-slice.js +38 -49
- package/dist/context/DashboardProvider/panel-group-slice.js.map +1 -1
- package/dist/context/DashboardProvider/panel-slice.d.ts +0 -9
- package/dist/context/DashboardProvider/panel-slice.d.ts.map +1 -1
- package/dist/context/DashboardProvider/panel-slice.js +2 -13
- package/dist/context/DashboardProvider/panel-slice.js.map +1 -1
- package/dist/context/{TemplateVariableProvider.d.ts → TemplateVariableProvider/TemplateVariableProvider.d.ts} +0 -0
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map +1 -0
- package/dist/context/{TemplateVariableProvider.js → TemplateVariableProvider/TemplateVariableProvider.js} +25 -12
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map +1 -0
- package/dist/context/TemplateVariableProvider/index.d.ts +2 -0
- package/dist/context/TemplateVariableProvider/index.d.ts.map +1 -0
- package/dist/context/TemplateVariableProvider/index.js +15 -0
- package/dist/context/TemplateVariableProvider/index.js.map +1 -0
- package/dist/context/TemplateVariableProvider/query-params.d.ts +12 -0
- package/dist/context/TemplateVariableProvider/query-params.d.ts.map +1 -0
- package/dist/context/TemplateVariableProvider/query-params.js +64 -0
- package/dist/context/TemplateVariableProvider/query-params.js.map +1 -0
- package/dist/context/TemplateVariableProvider/query-params.test.d.ts +2 -0
- package/dist/context/TemplateVariableProvider/query-params.test.d.ts.map +1 -0
- package/dist/context/TemplateVariableProvider/query-params.test.js +80 -0
- package/dist/context/TemplateVariableProvider/query-params.test.js.map +1 -0
- package/dist/context/index.d.ts +1 -1
- package/dist/context/index.d.ts.map +1 -1
- package/dist/context/index.js +1 -1
- package/dist/context/index.js.map +1 -1
- package/dist/context/useDashboard.d.ts +6 -0
- package/dist/context/useDashboard.d.ts.map +1 -0
- package/dist/context/{useDashboardSpec.js → useDashboard.js} +19 -15
- package/dist/context/useDashboard.js.map +1 -0
- package/dist/test/plugin-registry.d.ts +2 -11
- package/dist/test/plugin-registry.d.ts.map +1 -1
- package/dist/test/plugin-registry.js +12 -49
- package/dist/test/plugin-registry.js.map +1 -1
- package/dist/test/render.d.ts.map +1 -1
- package/dist/test/render.js +6 -1
- package/dist/test/render.js.map +1 -1
- package/dist/utils/component-ids.d.ts +8 -0
- package/dist/utils/component-ids.d.ts.map +1 -0
- package/dist/utils/component-ids.js +27 -0
- package/dist/utils/component-ids.js.map +1 -0
- package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
- package/dist/views/ViewDashboard/DashboardApp.js +40 -5
- package/dist/views/ViewDashboard/DashboardApp.js.map +1 -1
- package/dist/views/ViewDashboard/ViewDashboard.js +1 -1
- package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -1
- package/dist/views/ViewDashboard/tests/panelGroups.test.js +1 -1
- package/dist/views/ViewDashboard/tests/panelGroups.test.js.map +1 -1
- package/package.json +4 -4
- package/dist/components/Dashboard.d.ts.map +0 -1
- package/dist/components/Dashboard.js.map +0 -1
- package/dist/components/DashboardToolbar.d.ts.map +0 -1
- package/dist/components/DashboardToolbar.js.map +0 -1
- package/dist/components/Panel/DeletePanelDialog.d.ts +0 -4
- package/dist/components/Panel/DeletePanelDialog.d.ts.map +0 -1
- package/dist/components/Panel/DeletePanelDialog.js.map +0 -1
- package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts.map +0 -1
- package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js.map +0 -1
- package/dist/context/TemplateVariableProvider.d.ts.map +0 -1
- package/dist/context/TemplateVariableProvider.js.map +0 -1
- package/dist/context/useDashboardSpec.d.ts +0 -11
- package/dist/context/useDashboardSpec.d.ts.map +0 -1
- package/dist/context/useDashboardSpec.js.map +0 -1
|
@@ -11,65 +11,111 @@
|
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
import {
|
|
15
|
-
import { screen } from '@testing-library/react';
|
|
14
|
+
import { screen, waitFor } from '@testing-library/react';
|
|
16
15
|
import userEvent from '@testing-library/user-event';
|
|
17
|
-
import { renderWithContext
|
|
18
|
-
import { DashboardProvider } from '../../context';
|
|
16
|
+
import { renderWithContext } from '../../test';
|
|
19
17
|
import { Panel } from './Panel';
|
|
20
18
|
describe('Panel', ()=>{
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
plugin: {
|
|
32
|
-
kind: 'FakePanel',
|
|
33
|
-
spec: {}
|
|
34
|
-
}
|
|
19
|
+
const createTestPanel = ()=>({
|
|
20
|
+
kind: 'Panel',
|
|
21
|
+
spec: {
|
|
22
|
+
display: {
|
|
23
|
+
name: 'Fake Panel Title',
|
|
24
|
+
description: 'This is a fake panel'
|
|
25
|
+
},
|
|
26
|
+
plugin: {
|
|
27
|
+
kind: 'TimeSeriesChart',
|
|
28
|
+
spec: {}
|
|
35
29
|
}
|
|
36
|
-
},
|
|
37
|
-
// TODO: This is coupled to ID generation which is not good and the tests will probably fail
|
|
38
|
-
panelGroupItemId: {
|
|
39
|
-
panelGroupId: 0,
|
|
40
|
-
panelGroupItemLayoutId: ''
|
|
41
30
|
}
|
|
42
|
-
};
|
|
43
|
-
};
|
|
31
|
+
});
|
|
44
32
|
// Helper to render the panel with some context set
|
|
45
|
-
const renderPanel = (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
children: /*#__PURE__*/ _jsx(DashboardProvider, {
|
|
51
|
-
initialState: {
|
|
52
|
-
dashboardSpec: getTestDashboard().spec,
|
|
53
|
-
isEditMode
|
|
54
|
-
},
|
|
55
|
-
children: /*#__PURE__*/ _jsx(Panel, {
|
|
56
|
-
...createPanelProps()
|
|
57
|
-
})
|
|
58
|
-
})
|
|
33
|
+
const renderPanel = (definition, editHandlers)=>{
|
|
34
|
+
definition !== null && definition !== void 0 ? definition : definition = createTestPanel();
|
|
35
|
+
renderWithContext(/*#__PURE__*/ _jsx(Panel, {
|
|
36
|
+
definition: definition,
|
|
37
|
+
editHandlers: editHandlers
|
|
59
38
|
}));
|
|
60
39
|
};
|
|
61
|
-
|
|
40
|
+
// Helper to get the panel once rendered
|
|
41
|
+
const getPanel = ()=>screen.getByRole('region', {
|
|
42
|
+
name: 'Fake Panel Title'
|
|
43
|
+
});
|
|
44
|
+
it('should render panel', async ()=>{
|
|
62
45
|
renderPanel();
|
|
63
|
-
|
|
64
|
-
|
|
46
|
+
const panel = getPanel();
|
|
47
|
+
expect(panel).toBeInTheDocument();
|
|
48
|
+
// Should diplay header with panel's title
|
|
49
|
+
const header = screen.getByRole('banner');
|
|
50
|
+
expect(header).toHaveTextContent('Fake Panel Title');
|
|
51
|
+
// Should display chart's content from the fake panel plugin
|
|
52
|
+
const content = screen.getByRole('figure');
|
|
53
|
+
await waitFor(()=>{
|
|
54
|
+
expect(content).toHaveTextContent('TimeSeriesChart panel');
|
|
55
|
+
});
|
|
56
|
+
expect(content);
|
|
57
|
+
});
|
|
58
|
+
it('shows panel description', async ()=>{
|
|
59
|
+
renderPanel();
|
|
60
|
+
const panel = getPanel();
|
|
61
|
+
// Description button should not be visible until hover on panel
|
|
62
|
+
const missingButton = screen.queryByRole('button', {
|
|
63
|
+
name: /description/i
|
|
64
|
+
});
|
|
65
|
+
expect(missingButton).not.toBeInTheDocument();
|
|
66
|
+
userEvent.hover(panel);
|
|
67
|
+
const descriptionButton = screen.getByRole('button', {
|
|
68
|
+
name: /description/i
|
|
69
|
+
});
|
|
70
|
+
expect(descriptionButton).toBeInTheDocument();
|
|
71
|
+
// Can hover to see panel description in tooltip
|
|
72
|
+
userEvent.hover(descriptionButton);
|
|
73
|
+
const tooltip = await screen.findByRole('tooltip');
|
|
74
|
+
expect(tooltip).toHaveTextContent('This is a fake panel');
|
|
75
|
+
});
|
|
76
|
+
it('does not show description when panel does not have one', ()=>{
|
|
77
|
+
// Render a panel without a description set
|
|
78
|
+
const withoutDescription = createTestPanel();
|
|
79
|
+
withoutDescription.spec.display.description = undefined;
|
|
80
|
+
renderPanel(withoutDescription);
|
|
81
|
+
const panel = getPanel();
|
|
82
|
+
userEvent.hover(panel);
|
|
83
|
+
const descriptionButton = screen.queryByRole('button', {
|
|
84
|
+
name: /description/i
|
|
85
|
+
});
|
|
86
|
+
expect(descriptionButton).not.toBeInTheDocument();
|
|
87
|
+
});
|
|
88
|
+
it('does not show description in edit mode', ()=>{
|
|
89
|
+
renderPanel(undefined, {
|
|
90
|
+
onEditPanelClick: jest.fn(),
|
|
91
|
+
onDeletePanelClick: jest.fn()
|
|
92
|
+
});
|
|
93
|
+
const panel = getPanel();
|
|
94
|
+
userEvent.hover(panel);
|
|
95
|
+
const descriptionButton = screen.queryByRole('button', {
|
|
96
|
+
name: /description/i
|
|
97
|
+
});
|
|
98
|
+
expect(descriptionButton).not.toBeInTheDocument();
|
|
65
99
|
});
|
|
66
|
-
it('
|
|
67
|
-
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
100
|
+
it('can trigger panel actions in edit mode', ()=>{
|
|
101
|
+
const onEditPanelClick = jest.fn();
|
|
102
|
+
const onDeletePanelClick = jest.fn();
|
|
103
|
+
renderPanel(undefined, {
|
|
104
|
+
onEditPanelClick,
|
|
105
|
+
onDeletePanelClick
|
|
106
|
+
});
|
|
107
|
+
const panel = getPanel();
|
|
108
|
+
userEvent.hover(panel);
|
|
109
|
+
const editButton = screen.getByRole('button', {
|
|
110
|
+
name: /edit/i
|
|
111
|
+
});
|
|
112
|
+
userEvent.click(editButton);
|
|
113
|
+
const deleteButton = screen.getByRole('button', {
|
|
114
|
+
name: /delete/i
|
|
115
|
+
});
|
|
116
|
+
userEvent.click(deleteButton);
|
|
117
|
+
expect(onEditPanelClick).toHaveBeenCalledTimes(1);
|
|
118
|
+
expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
|
|
73
119
|
});
|
|
74
120
|
});
|
|
75
121
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { renderWithContext } from '../../test';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n const createTestPanel = (): PanelDefinition => ({\n kind: 'Panel',\n spec: {\n display: {\n name: 'Fake Panel Title',\n description: 'This is a fake panel',\n },\n plugin: {\n kind: 'TimeSeriesChart',\n spec: {},\n },\n },\n });\n\n // Helper to render the panel with some context set\n const renderPanel = (definition?: PanelDefinition, editHandlers?: PanelProps['editHandlers']) => {\n definition ??= createTestPanel();\n\n renderWithContext(<Panel definition={definition} editHandlers={editHandlers} />);\n };\n\n // Helper to get the panel once rendered\n const getPanel = () => screen.getByRole('region', { name: 'Fake Panel Title' });\n\n it('should render panel', async () => {\n renderPanel();\n\n const panel = getPanel();\n expect(panel).toBeInTheDocument();\n\n // Should diplay header with panel's title\n const header = screen.getByRole('banner');\n expect(header).toHaveTextContent('Fake Panel Title');\n\n // Should display chart's content from the fake panel plugin\n const content = screen.getByRole('figure');\n await waitFor(() => {\n expect(content).toHaveTextContent('TimeSeriesChart panel');\n });\n expect(content);\n });\n\n it('shows panel description', async () => {\n renderPanel();\n\n const panel = getPanel();\n\n // Description button should not be visible until hover on panel\n const missingButton = screen.queryByRole('button', { name: /description/i });\n expect(missingButton).not.toBeInTheDocument();\n userEvent.hover(panel);\n const descriptionButton = screen.getByRole('button', { name: /description/i });\n expect(descriptionButton).toBeInTheDocument();\n\n // Can hover to see panel description in tooltip\n userEvent.hover(descriptionButton);\n const tooltip = await screen.findByRole('tooltip');\n expect(tooltip).toHaveTextContent('This is a fake panel');\n });\n\n it('does not show description when panel does not have one', () => {\n // Render a panel without a description set\n const withoutDescription = createTestPanel();\n withoutDescription.spec.display.description = undefined;\n renderPanel(withoutDescription);\n\n const panel = getPanel();\n userEvent.hover(panel);\n const descriptionButton = screen.queryByRole('button', { name: /description/i });\n expect(descriptionButton).not.toBeInTheDocument();\n });\n\n it('does not show description in edit mode', () => {\n renderPanel(undefined, { onEditPanelClick: jest.fn(), onDeletePanelClick: jest.fn() });\n\n const panel = getPanel();\n userEvent.hover(panel);\n const descriptionButton = screen.queryByRole('button', { name: /description/i });\n expect(descriptionButton).not.toBeInTheDocument();\n });\n\n it('can trigger panel actions in edit mode', () => {\n const onEditPanelClick = jest.fn();\n const onDeletePanelClick = jest.fn();\n renderPanel(undefined, { onEditPanelClick, onDeletePanelClick });\n\n const panel = getPanel();\n userEvent.hover(panel);\n\n const editButton = screen.getByRole('button', { name: /edit/i });\n userEvent.click(editButton);\n\n const deleteButton = screen.getByRole('button', { name: /delete/i });\n userEvent.click(deleteButton);\n\n expect(onEditPanelClick).toHaveBeenCalledTimes(1);\n expect(onDeletePanelClick).toHaveBeenCalledTimes(1);\n });\n});\n"],"names":["screen","waitFor","userEvent","renderWithContext","Panel","describe","createTestPanel","kind","spec","display","name","description","plugin","renderPanel","definition","editHandlers","getPanel","getByRole","it","panel","expect","toBeInTheDocument","header","toHaveTextContent","content","missingButton","queryByRole","not","hover","descriptionButton","tooltip","findByRole","withoutDescription","undefined","onEditPanelClick","jest","fn","onDeletePanelClick","editButton","click","deleteButton","toHaveBeenCalledTimes"],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CardHeaderProps } from '@mui/material';
|
|
3
|
+
declare type OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';
|
|
4
|
+
export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
|
|
5
|
+
id: string;
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
editHandlers?: {
|
|
9
|
+
onEditPanelClick: () => void;
|
|
10
|
+
onDeletePanelClick: () => void;
|
|
11
|
+
};
|
|
12
|
+
isHovered: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps): JSX.Element;
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=PanelHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AAOnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAiE7G"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
// Copyright 2022 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
import { CardHeader, Typography, Stack, IconButton, styled } from '@mui/material';
|
|
15
|
+
import { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';
|
|
16
|
+
import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
|
|
17
|
+
import PencilIcon from 'mdi-material-ui/PencilOutline';
|
|
18
|
+
import DeleteIcon from 'mdi-material-ui/DeleteOutline';
|
|
19
|
+
import DragIcon from 'mdi-material-ui/DragVertical';
|
|
20
|
+
export function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
|
|
21
|
+
const titleElementId = `${id}-title`;
|
|
22
|
+
const descriptionTooltipId = `${id}-description`;
|
|
23
|
+
// Don't show any actions unless panel is hovered
|
|
24
|
+
let action = undefined;
|
|
25
|
+
if (isHovered) {
|
|
26
|
+
if (editHandlers !== undefined) {
|
|
27
|
+
// If there are edit handlers, always just show the edit buttons
|
|
28
|
+
action = /*#__PURE__*/ _jsxs(Stack, {
|
|
29
|
+
direction: "row",
|
|
30
|
+
alignItems: "center",
|
|
31
|
+
spacing: 0.5,
|
|
32
|
+
children: [
|
|
33
|
+
/*#__PURE__*/ _jsx(HeaderIconButton, {
|
|
34
|
+
"aria-label": "edit panel",
|
|
35
|
+
size: "small",
|
|
36
|
+
onClick: editHandlers.onEditPanelClick,
|
|
37
|
+
children: /*#__PURE__*/ _jsx(PencilIcon, {})
|
|
38
|
+
}),
|
|
39
|
+
/*#__PURE__*/ _jsx(HeaderIconButton, {
|
|
40
|
+
"aria-label": "delete panel",
|
|
41
|
+
size: "small",
|
|
42
|
+
onClick: editHandlers.onDeletePanelClick,
|
|
43
|
+
children: /*#__PURE__*/ _jsx(DeleteIcon, {})
|
|
44
|
+
}),
|
|
45
|
+
/*#__PURE__*/ _jsx(HeaderIconButton, {
|
|
46
|
+
"aria-label": "drag handle",
|
|
47
|
+
size: "small",
|
|
48
|
+
children: /*#__PURE__*/ _jsx(DragIcon, {
|
|
49
|
+
className: "drag-handle",
|
|
50
|
+
sx: {
|
|
51
|
+
cursor: 'grab'
|
|
52
|
+
}
|
|
53
|
+
})
|
|
54
|
+
})
|
|
55
|
+
]
|
|
56
|
+
});
|
|
57
|
+
} else if (description !== undefined) {
|
|
58
|
+
// If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
|
|
59
|
+
action = /*#__PURE__*/ _jsx(InfoTooltip, {
|
|
60
|
+
id: descriptionTooltipId,
|
|
61
|
+
description: description,
|
|
62
|
+
placement: TooltipPlacement.Bottom,
|
|
63
|
+
children: /*#__PURE__*/ _jsx(HeaderIconButton, {
|
|
64
|
+
"aria-label": "Panel Description",
|
|
65
|
+
children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
|
|
66
|
+
"aria-describedby": "info-tooltip",
|
|
67
|
+
"aria-hidden": false,
|
|
68
|
+
sx: {
|
|
69
|
+
color: (theme)=>theme.palette.grey[700]
|
|
70
|
+
}
|
|
71
|
+
})
|
|
72
|
+
})
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return /*#__PURE__*/ _jsx(CardHeader, {
|
|
77
|
+
id: id,
|
|
78
|
+
component: "header",
|
|
79
|
+
"aria-labelledby": titleElementId,
|
|
80
|
+
"aria-describedby": descriptionTooltipId,
|
|
81
|
+
disableTypography: true,
|
|
82
|
+
title: /*#__PURE__*/ _jsx(Typography, {
|
|
83
|
+
id: titleElementId,
|
|
84
|
+
variant: "subtitle1",
|
|
85
|
+
sx: {
|
|
86
|
+
whiteSpace: 'nowrap',
|
|
87
|
+
overflow: 'hidden',
|
|
88
|
+
textOverflow: 'ellipsis'
|
|
89
|
+
},
|
|
90
|
+
children: title
|
|
91
|
+
}),
|
|
92
|
+
action: action,
|
|
93
|
+
sx: combineSx((theme)=>({
|
|
94
|
+
padding: theme.spacing(1),
|
|
95
|
+
borderBottom: `solid 1px ${theme.palette.divider}`
|
|
96
|
+
}), sx),
|
|
97
|
+
...rest
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
const HeaderIconButton = styled(IconButton)(({ theme })=>({
|
|
101
|
+
borderRadius: theme.shape.borderRadius,
|
|
102
|
+
padding: '4px'
|
|
103
|
+
}));
|
|
104
|
+
|
|
105
|
+
//# sourceMappingURL=PanelHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Panel/PanelHeader.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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n id: string;\n title: string;\n description?: string;\n editHandlers?: {\n onEditPanelClick: () => void;\n onDeletePanelClick: () => void;\n };\n isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n const titleElementId = `${id}-title`;\n const descriptionTooltipId = `${id}-description`;\n\n // Don't show any actions unless panel is hovered\n let action: CardHeaderProps['action'] = undefined;\n if (isHovered) {\n if (editHandlers !== undefined) {\n // If there are edit handlers, always just show the edit buttons\n action = (\n <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n <HeaderIconButton aria-label=\"edit panel\" size=\"small\" onClick={editHandlers.onEditPanelClick}>\n <PencilIcon />\n </HeaderIconButton>\n <HeaderIconButton aria-label=\"delete panel\" size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n <DeleteIcon />\n </HeaderIconButton>\n <HeaderIconButton aria-label=\"drag handle\" size=\"small\">\n <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n </HeaderIconButton>\n </Stack>\n );\n } else if (description !== undefined) {\n // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n action = (\n <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n <HeaderIconButton aria-label=\"Panel Description\">\n <InformationOutlineIcon\n aria-describedby=\"info-tooltip\"\n aria-hidden={false}\n sx={{ color: (theme) => theme.palette.grey[700] }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }\n\n return (\n <CardHeader\n id={id}\n component=\"header\"\n aria-labelledby={titleElementId}\n aria-describedby={descriptionTooltipId}\n disableTypography\n title={\n <Typography\n id={titleElementId}\n variant=\"subtitle1\"\n sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}\n >\n {title}\n </Typography>\n }\n action={action}\n sx={combineSx(\n (theme) => ({\n padding: theme.spacing(1),\n borderBottom: `solid 1px ${theme.palette.divider}`,\n }),\n sx\n )}\n {...rest}\n />\n );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n borderRadius: theme.shape.borderRadius,\n padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","alignItems","spacing","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","whiteSpace","overflow","textOverflow","padding","borderBottom","divider","borderRadius","shape"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Panel';\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Panel';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,SAAS,CAAC"}
|
|
@@ -11,30 +11,24 @@
|
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { PluginRegistry } from '@perses-dev/plugin-system';
|
|
15
14
|
import { screen } from '@testing-library/react';
|
|
16
15
|
import userEvent from '@testing-library/user-event';
|
|
17
16
|
import { act } from 'react-dom/test-utils';
|
|
18
|
-
import { createDashboardProviderSpy,
|
|
17
|
+
import { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';
|
|
19
18
|
import { DashboardProvider } from '../../context/DashboardProvider';
|
|
20
19
|
import { PanelDrawer } from './PanelDrawer';
|
|
21
20
|
describe('Panel Drawer', ()=>{
|
|
22
21
|
const renderPanelDrawer = ()=>{
|
|
23
|
-
const { addMockPlugin , pluginRegistryProps } = mockPluginRegistryProps();
|
|
24
|
-
addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);
|
|
25
22
|
const { store , DashboardProviderSpy } = createDashboardProviderSpy();
|
|
26
|
-
renderWithContext(/*#__PURE__*/
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
/*#__PURE__*/ _jsx(PanelDrawer, {})
|
|
36
|
-
]
|
|
37
|
-
})
|
|
23
|
+
renderWithContext(/*#__PURE__*/ _jsxs(DashboardProvider, {
|
|
24
|
+
initialState: {
|
|
25
|
+
dashboardResource: getTestDashboard(),
|
|
26
|
+
isEditMode: true
|
|
27
|
+
},
|
|
28
|
+
children: [
|
|
29
|
+
/*#__PURE__*/ _jsx(DashboardProviderSpy, {}),
|
|
30
|
+
/*#__PURE__*/ _jsx(PanelDrawer, {})
|
|
31
|
+
]
|
|
38
32
|
}));
|
|
39
33
|
const { value: storeApi } = store;
|
|
40
34
|
if (storeApi === undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n const renderPanelDrawer = () => {\n const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n renderWithContext(\n <DashboardProvider initialState={{ dashboardResource: getTestDashboard(), isEditMode: true }}>\n <DashboardProviderSpy />\n <PanelDrawer />\n </DashboardProvider>\n );\n\n const { value: storeApi } = store;\n if (storeApi === undefined) {\n throw new Error('Expected dashboard store to be set after initial render');\n }\n\n return storeApi;\n };\n\n it('should add new panel', async () => {\n const storeApi = renderPanelDrawer();\n\n // Open the drawer for a new panel\n act(() => storeApi.getState().openAddPanel());\n\n const nameInput = await screen.findByLabelText(/Name/);\n userEvent.type(nameInput, 'New Panel');\n userEvent.click(screen.getByText('Add'));\n\n // TODO: Assert drawer is closed?\n const panels = storeApi.getState().panels;\n expect(panels).toMatchObject({\n // Should have the new panel in the store\n NewPanel: {\n kind: 'Panel',\n spec: {\n display: { name: 'New Panel' },\n plugin: {\n kind: '',\n spec: {},\n },\n },\n },\n });\n });\n\n it('should edit an existing panel', async () => {\n const storeApi = renderPanelDrawer();\n\n // Open the drawer for an existing panel\n const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n if (group === undefined) {\n throw new Error('Test group not found');\n }\n const layout = Object.entries(group.itemPanelKeys).find(([, panelKey]) => panelKey === 'cpu');\n if (layout === undefined) {\n throw new Error('Test panel not found');\n }\n act(() => storeApi.getState().openEditPanel({ panelGroupId: group.id, panelGroupItemLayoutId: layout[0] }));\n\n const nameInput = await screen.findByLabelText(/Name/);\n userEvent.clear(nameInput);\n userEvent.type(nameInput, 'cpu usage');\n userEvent.click(screen.getByText('Apply'));\n\n const panels = storeApi.getState().panels;\n expect(panels).toMatchObject({\n cpu: {\n kind: 'Panel',\n spec: {\n display: { name: 'cpu usage' },\n plugin: {\n kind: 'TimeSeriesChart',\n spec: {},\n },\n },\n },\n });\n });\n});\n"],"names":["screen","userEvent","act","createDashboardProviderSpy","getTestDashboard","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","store","DashboardProviderSpy","initialState","dashboardResource","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","spec","display","name","plugin","group","Object","values","panelGroups","find","title","layout","entries","itemPanelKeys","panelKey","openEditPanel","panelGroupId","id","panelGroupItemLayoutId","clear","cpu"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PanelEditorValues } from '../../context
|
|
3
|
-
export declare function PanelPreview({ name, description, kind, spec
|
|
2
|
+
import { PanelEditorValues } from '../../context';
|
|
3
|
+
export declare function PanelPreview({ name, description, kind, spec }: PanelEditorValues): JSX.Element | null;
|
|
4
4
|
//# sourceMappingURL=PanelPreview.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGlD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,iBAAiB,sBAwBhF"}
|
|
@@ -13,34 +13,27 @@
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { Box } from '@mui/material';
|
|
15
15
|
import { Panel } from '../Panel';
|
|
16
|
-
export function PanelPreview({ name , description , kind , spec
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
spec
|
|
28
|
-
}
|
|
16
|
+
export function PanelPreview({ name , description , kind , spec }) {
|
|
17
|
+
const definition = {
|
|
18
|
+
kind: 'Panel',
|
|
19
|
+
spec: {
|
|
20
|
+
display: {
|
|
21
|
+
name,
|
|
22
|
+
description: description === '' ? undefined : description
|
|
23
|
+
},
|
|
24
|
+
plugin: {
|
|
25
|
+
kind,
|
|
26
|
+
spec
|
|
29
27
|
}
|
|
30
|
-
},
|
|
31
|
-
// TODO: this shouldn't be necessary for preview
|
|
32
|
-
panelGroupItemId: {
|
|
33
|
-
panelGroupId: groupId,
|
|
34
|
-
panelGroupItemLayoutId: ''
|
|
35
28
|
}
|
|
36
29
|
};
|
|
37
|
-
if (
|
|
30
|
+
if (kind === '') {
|
|
38
31
|
return null;
|
|
39
32
|
}
|
|
40
33
|
return /*#__PURE__*/ _jsx(Box, {
|
|
41
34
|
height: 300,
|
|
42
35
|
children: /*#__PURE__*/ _jsx(Panel, {
|
|
43
|
-
|
|
36
|
+
definition: definition
|
|
44
37
|
})
|
|
45
38
|
});
|
|
46
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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';\nimport { PanelEditorValues } from '../../context
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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';\nimport { PanelEditorValues } from '../../context';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec }: PanelEditorValues) {\n const definition: PanelProps['definition'] = {\n kind: 'Panel',\n spec: {\n display: {\n name,\n description: description === '' ? undefined : description,\n },\n plugin: {\n kind,\n spec,\n },\n },\n };\n\n if (kind === '') {\n return null;\n }\n\n return (\n <Box height={300}>\n <Panel definition={definition} />\n </Box>\n );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","definition","display","undefined","plugin","height"],"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;AAEpC,SAASC,KAAK,QAAoB,UAAU,CAAC;AAE7C,OAAO,SAASC,YAAY,CAAC,EAAEC,IAAI,CAAA,EAAEC,WAAW,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAqB,EAAE;IACjF,MAAMC,UAAU,GAA6B;QAC3CF,IAAI,EAAE,OAAO;QACbC,IAAI,EAAE;YACJE,OAAO,EAAE;gBACPL,IAAI;gBACJC,WAAW,EAAEA,WAAW,KAAK,EAAE,GAAGK,SAAS,GAAGL,WAAW;aAC1D;YACDM,MAAM,EAAE;gBACNL,IAAI;gBACJC,IAAI;aACL;SACF;KACF,AAAC;IAEF,IAAID,IAAI,KAAK,EAAE,EAAE;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACW,MAAM,EAAE,GAAG;kBACd,cAAA,KAACV,KAAK;YAACM,UAAU,EAAEA,UAAU;UAAI;MAC7B,CACN;AACJ,CAAC"}
|
|
@@ -22,7 +22,7 @@ describe('Add Panel Group', ()=>{
|
|
|
22
22
|
const { store , DashboardProviderSpy } = createDashboardProviderSpy();
|
|
23
23
|
renderWithContext(/*#__PURE__*/ _jsxs(DashboardProvider, {
|
|
24
24
|
initialState: {
|
|
25
|
-
|
|
25
|
+
dashboardResource: getTestDashboard(),
|
|
26
26
|
isEditMode: true
|
|
27
27
|
},
|
|
28
28
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { PanelGroupDialog } from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n const renderDialog = () => {\n const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n renderWithContext(\n <DashboardProvider initialState={{
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { DashboardProvider } from '../../context';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { PanelGroupDialog } from './PanelGroupDialog';\n\ndescribe('Add Panel Group', () => {\n const renderDialog = () => {\n const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n renderWithContext(\n <DashboardProvider initialState={{ dashboardResource: getTestDashboard(), isEditMode: true }}>\n <DashboardProviderSpy />\n <PanelGroupDialog />\n </DashboardProvider>\n );\n\n const { value: storeApi } = store;\n if (storeApi === undefined) {\n throw new Error('Expected dashboard store to be set after initial render');\n }\n\n return storeApi;\n };\n\n it('should add new panel group', async () => {\n const storeApi = renderDialog();\n\n // Open the dialog for a new panel group\n act(() => storeApi.getState().openAddPanelGroup());\n\n const nameInput = await screen.findByLabelText(/Name/);\n userEvent.type(nameInput, 'New Panel Group');\n userEvent.click(screen.getByText('Add'));\n\n // TODO: Figure out how to test this without coupling to the store state\n const panelGroups = Object.values(storeApi.getState().panelGroups);\n expect(panelGroups).toContainEqual({\n id: expect.any(Number),\n title: 'New Panel Group',\n isCollapsed: false,\n itemLayouts: expect.any(Array),\n itemPanelKeys: expect.any(Object),\n });\n });\n\n it('should edit existing panel group', async () => {\n const storeApi = renderDialog();\n\n // Open the dialog for an existing panel group\n const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n if (group === undefined) {\n throw new Error('Missing test group');\n }\n act(() => storeApi.getState().openEditPanelGroup(group.id));\n\n const nameInput = await screen.findByLabelText(/Name/);\n userEvent.clear(nameInput);\n userEvent.type(nameInput, 'New Name');\n userEvent.click(screen.getByText('Apply'));\n\n // TODO: Figure out how to test this without coupling to the store state\n const panelGroups = storeApi.getState().panelGroups;\n expect(panelGroups).toMatchObject({\n [group.id]: {\n id: group.id,\n title: 'New Name',\n isCollapsed: false,\n },\n });\n });\n});\n"],"names":["screen","userEvent","act","DashboardProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","PanelGroupDialog","describe","renderDialog","store","DashboardProviderSpy","initialState","dashboardResource","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanelGroup","nameInput","findByLabelText","type","click","getByText","panelGroups","Object","values","expect","toContainEqual","id","any","Number","title","isCollapsed","itemLayouts","Array","itemPanelKeys","group","find","openEditPanelGroup","clear","toMatchObject"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}
|