@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.
Files changed (197) hide show
  1. package/dist/cjs/components/{Dashboard.js → Dashboard/Dashboard.js} +2 -2
  2. package/dist/cjs/components/Dashboard/index.js +28 -0
  3. package/dist/cjs/components/{DashboardToolbar.js → DashboardToolbar/DashboardToolbar.js} +9 -23
  4. package/dist/cjs/components/DashboardToolbar/index.js +28 -0
  5. package/dist/cjs/components/{Panel → DeletePanelDialog}/DeletePanelDialog.js +2 -3
  6. package/dist/cjs/components/DeletePanelDialog/index.js +28 -0
  7. package/dist/cjs/components/{PanelGroupDialog → DeletePanelGroupDialog}/DeletePanelGroupDialog.js +0 -0
  8. package/dist/cjs/components/DeletePanelGroupDialog/index.js +28 -0
  9. package/dist/cjs/components/GridLayout/GridItemContent.js +11 -1
  10. package/dist/cjs/components/Panel/Panel.js +30 -89
  11. package/dist/cjs/components/Panel/Panel.test.js +93 -47
  12. package/dist/cjs/components/Panel/PanelHeader.js +116 -0
  13. package/dist/cjs/components/Panel/index.js +0 -1
  14. package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js +9 -15
  15. package/dist/cjs/components/PanelDrawer/PanelPreview.js +13 -20
  16. package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js +1 -1
  17. package/dist/cjs/components/PanelGroupDialog/index.js +0 -1
  18. package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js +1 -1
  19. package/dist/cjs/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js +67 -0
  20. package/dist/cjs/components/UnsavedChangesConfirmationDialog/index.js +28 -0
  21. package/dist/cjs/components/Variables/Variable.js +18 -11
  22. package/dist/cjs/components/index.js +4 -0
  23. package/dist/cjs/context/DashboardProvider/DashboardProvider.js +24 -18
  24. package/dist/cjs/context/DashboardProvider/common.js +3 -3
  25. package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js +2 -4
  26. package/dist/cjs/context/DashboardProvider/panel-group-slice.js +47 -52
  27. package/dist/cjs/context/DashboardProvider/panel-slice.js +2 -13
  28. package/dist/cjs/context/{TemplateVariableProvider.js → TemplateVariableProvider/TemplateVariableProvider.js} +25 -12
  29. package/dist/cjs/context/TemplateVariableProvider/index.js +28 -0
  30. package/dist/cjs/context/TemplateVariableProvider/query-params.js +79 -0
  31. package/dist/cjs/context/TemplateVariableProvider/query-params.test.js +82 -0
  32. package/dist/cjs/context/index.js +1 -1
  33. package/dist/cjs/context/{useDashboardSpec.js → useDashboard.js} +20 -16
  34. package/dist/cjs/test/plugin-registry.js +14 -54
  35. package/dist/cjs/test/render.js +6 -1
  36. package/dist/cjs/utils/component-ids.js +31 -0
  37. package/dist/cjs/views/ViewDashboard/DashboardApp.js +40 -10
  38. package/dist/cjs/views/ViewDashboard/ViewDashboard.js +1 -1
  39. package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js +1 -1
  40. package/dist/components/{Dashboard.d.ts → Dashboard/Dashboard.d.ts} +0 -0
  41. package/dist/components/Dashboard/Dashboard.d.ts.map +1 -0
  42. package/dist/components/{Dashboard.js → Dashboard/Dashboard.js} +2 -2
  43. package/dist/components/Dashboard/Dashboard.js.map +1 -0
  44. package/dist/components/Dashboard/index.d.ts +2 -0
  45. package/dist/components/Dashboard/index.d.ts.map +1 -0
  46. package/dist/components/Dashboard/index.js +15 -0
  47. package/dist/components/Dashboard/index.js.map +1 -0
  48. package/dist/components/{DashboardToolbar.d.ts → DashboardToolbar/DashboardToolbar.d.ts} +2 -0
  49. package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map +1 -0
  50. package/dist/components/{DashboardToolbar.js → DashboardToolbar/DashboardToolbar.js} +5 -19
  51. package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -0
  52. package/dist/components/DashboardToolbar/index.d.ts +2 -0
  53. package/dist/components/DashboardToolbar/index.d.ts.map +1 -0
  54. package/dist/components/DashboardToolbar/index.js +15 -0
  55. package/dist/components/DashboardToolbar/index.js.map +1 -0
  56. package/dist/components/DeletePanelDialog/DeletePanelDialog.d.ts +3 -0
  57. package/dist/components/DeletePanelDialog/DeletePanelDialog.d.ts.map +1 -0
  58. package/dist/components/{Panel → DeletePanelDialog}/DeletePanelDialog.js +1 -2
  59. package/dist/components/DeletePanelDialog/DeletePanelDialog.js.map +1 -0
  60. package/dist/components/DeletePanelDialog/index.d.ts +2 -0
  61. package/dist/components/DeletePanelDialog/index.d.ts.map +1 -0
  62. package/dist/components/DeletePanelDialog/index.js +15 -0
  63. package/dist/components/DeletePanelDialog/index.js.map +1 -0
  64. package/dist/components/{PanelGroupDialog → DeletePanelGroupDialog}/DeletePanelGroupDialog.d.ts +0 -0
  65. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.d.ts.map +1 -0
  66. package/dist/components/{PanelGroupDialog → DeletePanelGroupDialog}/DeletePanelGroupDialog.js +0 -0
  67. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map +1 -0
  68. package/dist/components/DeletePanelGroupDialog/index.d.ts +2 -0
  69. package/dist/components/DeletePanelGroupDialog/index.d.ts.map +1 -0
  70. package/dist/components/DeletePanelGroupDialog/index.js +15 -0
  71. package/dist/components/DeletePanelGroupDialog/index.js.map +1 -0
  72. package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
  73. package/dist/components/GridLayout/GridItemContent.js +12 -2
  74. package/dist/components/GridLayout/GridItemContent.js.map +1 -1
  75. package/dist/components/Panel/Panel.d.ts +3 -3
  76. package/dist/components/Panel/Panel.d.ts.map +1 -1
  77. package/dist/components/Panel/Panel.js +32 -91
  78. package/dist/components/Panel/Panel.js.map +1 -1
  79. package/dist/components/Panel/Panel.test.js +95 -49
  80. package/dist/components/Panel/Panel.test.js.map +1 -1
  81. package/dist/components/Panel/PanelHeader.d.ts +16 -0
  82. package/dist/components/Panel/PanelHeader.d.ts.map +1 -0
  83. package/dist/components/Panel/PanelHeader.js +105 -0
  84. package/dist/components/Panel/PanelHeader.js.map +1 -0
  85. package/dist/components/Panel/index.d.ts +0 -1
  86. package/dist/components/Panel/index.d.ts.map +1 -1
  87. package/dist/components/Panel/index.js +0 -1
  88. package/dist/components/Panel/index.js.map +1 -1
  89. package/dist/components/PanelDrawer/PanelDrawer.test.js +10 -16
  90. package/dist/components/PanelDrawer/PanelDrawer.test.js.map +1 -1
  91. package/dist/components/PanelDrawer/PanelPreview.d.ts +2 -2
  92. package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
  93. package/dist/components/PanelDrawer/PanelPreview.js +13 -20
  94. package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
  95. package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js +1 -1
  96. package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js.map +1 -1
  97. package/dist/components/PanelGroupDialog/index.d.ts +0 -1
  98. package/dist/components/PanelGroupDialog/index.d.ts.map +1 -1
  99. package/dist/components/PanelGroupDialog/index.js +0 -1
  100. package/dist/components/PanelGroupDialog/index.js.map +1 -1
  101. package/dist/components/TimeRangeControls/TimeRangeControls.test.js +1 -1
  102. package/dist/components/TimeRangeControls/TimeRangeControls.test.js.map +1 -1
  103. package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.d.ts +8 -0
  104. package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.d.ts.map +1 -0
  105. package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js +56 -0
  106. package/dist/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js.map +1 -0
  107. package/dist/components/UnsavedChangesConfirmationDialog/index.d.ts +2 -0
  108. package/dist/components/UnsavedChangesConfirmationDialog/index.d.ts.map +1 -0
  109. package/dist/components/UnsavedChangesConfirmationDialog/index.js +15 -0
  110. package/dist/components/UnsavedChangesConfirmationDialog/index.js.map +1 -0
  111. package/dist/components/Variables/Variable.d.ts.map +1 -1
  112. package/dist/components/Variables/Variable.js +19 -12
  113. package/dist/components/Variables/Variable.js.map +1 -1
  114. package/dist/components/index.d.ts +4 -0
  115. package/dist/components/index.d.ts.map +1 -1
  116. package/dist/components/index.js +4 -0
  117. package/dist/components/index.js.map +1 -1
  118. package/dist/context/DashboardProvider/DashboardProvider.d.ts +4 -4
  119. package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -1
  120. package/dist/context/DashboardProvider/DashboardProvider.js +26 -20
  121. package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -1
  122. package/dist/context/DashboardProvider/common.d.ts +1 -1
  123. package/dist/context/DashboardProvider/common.d.ts.map +1 -1
  124. package/dist/context/DashboardProvider/common.js +4 -4
  125. package/dist/context/DashboardProvider/common.js.map +1 -1
  126. package/dist/context/DashboardProvider/dashboard-provider-api.d.ts +1 -2
  127. package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map +1 -1
  128. package/dist/context/DashboardProvider/dashboard-provider-api.js +2 -4
  129. package/dist/context/DashboardProvider/dashboard-provider-api.js.map +1 -1
  130. package/dist/context/DashboardProvider/index.d.ts +1 -0
  131. package/dist/context/DashboardProvider/index.d.ts.map +1 -1
  132. package/dist/context/DashboardProvider/index.js.map +1 -1
  133. package/dist/context/DashboardProvider/panel-group-slice.d.ts +1 -15
  134. package/dist/context/DashboardProvider/panel-group-slice.d.ts.map +1 -1
  135. package/dist/context/DashboardProvider/panel-group-slice.js +38 -49
  136. package/dist/context/DashboardProvider/panel-group-slice.js.map +1 -1
  137. package/dist/context/DashboardProvider/panel-slice.d.ts +0 -9
  138. package/dist/context/DashboardProvider/panel-slice.d.ts.map +1 -1
  139. package/dist/context/DashboardProvider/panel-slice.js +2 -13
  140. package/dist/context/DashboardProvider/panel-slice.js.map +1 -1
  141. package/dist/context/{TemplateVariableProvider.d.ts → TemplateVariableProvider/TemplateVariableProvider.d.ts} +0 -0
  142. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map +1 -0
  143. package/dist/context/{TemplateVariableProvider.js → TemplateVariableProvider/TemplateVariableProvider.js} +25 -12
  144. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map +1 -0
  145. package/dist/context/TemplateVariableProvider/index.d.ts +2 -0
  146. package/dist/context/TemplateVariableProvider/index.d.ts.map +1 -0
  147. package/dist/context/TemplateVariableProvider/index.js +15 -0
  148. package/dist/context/TemplateVariableProvider/index.js.map +1 -0
  149. package/dist/context/TemplateVariableProvider/query-params.d.ts +12 -0
  150. package/dist/context/TemplateVariableProvider/query-params.d.ts.map +1 -0
  151. package/dist/context/TemplateVariableProvider/query-params.js +64 -0
  152. package/dist/context/TemplateVariableProvider/query-params.js.map +1 -0
  153. package/dist/context/TemplateVariableProvider/query-params.test.d.ts +2 -0
  154. package/dist/context/TemplateVariableProvider/query-params.test.d.ts.map +1 -0
  155. package/dist/context/TemplateVariableProvider/query-params.test.js +80 -0
  156. package/dist/context/TemplateVariableProvider/query-params.test.js.map +1 -0
  157. package/dist/context/index.d.ts +1 -1
  158. package/dist/context/index.d.ts.map +1 -1
  159. package/dist/context/index.js +1 -1
  160. package/dist/context/index.js.map +1 -1
  161. package/dist/context/useDashboard.d.ts +6 -0
  162. package/dist/context/useDashboard.d.ts.map +1 -0
  163. package/dist/context/{useDashboardSpec.js → useDashboard.js} +19 -15
  164. package/dist/context/useDashboard.js.map +1 -0
  165. package/dist/test/plugin-registry.d.ts +2 -11
  166. package/dist/test/plugin-registry.d.ts.map +1 -1
  167. package/dist/test/plugin-registry.js +12 -49
  168. package/dist/test/plugin-registry.js.map +1 -1
  169. package/dist/test/render.d.ts.map +1 -1
  170. package/dist/test/render.js +6 -1
  171. package/dist/test/render.js.map +1 -1
  172. package/dist/utils/component-ids.d.ts +8 -0
  173. package/dist/utils/component-ids.d.ts.map +1 -0
  174. package/dist/utils/component-ids.js +27 -0
  175. package/dist/utils/component-ids.js.map +1 -0
  176. package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
  177. package/dist/views/ViewDashboard/DashboardApp.js +40 -5
  178. package/dist/views/ViewDashboard/DashboardApp.js.map +1 -1
  179. package/dist/views/ViewDashboard/ViewDashboard.js +1 -1
  180. package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -1
  181. package/dist/views/ViewDashboard/tests/panelGroups.test.js +1 -1
  182. package/dist/views/ViewDashboard/tests/panelGroups.test.js.map +1 -1
  183. package/package.json +4 -4
  184. package/dist/components/Dashboard.d.ts.map +0 -1
  185. package/dist/components/Dashboard.js.map +0 -1
  186. package/dist/components/DashboardToolbar.d.ts.map +0 -1
  187. package/dist/components/DashboardToolbar.js.map +0 -1
  188. package/dist/components/Panel/DeletePanelDialog.d.ts +0 -4
  189. package/dist/components/Panel/DeletePanelDialog.d.ts.map +0 -1
  190. package/dist/components/Panel/DeletePanelDialog.js.map +0 -1
  191. package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts.map +0 -1
  192. package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js.map +0 -1
  193. package/dist/context/TemplateVariableProvider.d.ts.map +0 -1
  194. package/dist/context/TemplateVariableProvider.js.map +0 -1
  195. package/dist/context/useDashboardSpec.d.ts +0 -11
  196. package/dist/context/useDashboardSpec.d.ts.map +0 -1
  197. 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 { PluginRegistry } from '@perses-dev/plugin-system';
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, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';
18
- import { DashboardProvider } from '../../context';
16
+ import { renderWithContext } from '../../test';
19
17
  import { Panel } from './Panel';
20
18
  describe('Panel', ()=>{
21
- // Helper to create panel props for rendering tests
22
- const createPanelProps = ()=>{
23
- return {
24
- definition: {
25
- kind: 'Panel',
26
- spec: {
27
- display: {
28
- name: 'Fake Panel',
29
- description: 'This is a fake panel'
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 = (isEditMode = false)=>{
46
- const { addMockPlugin , pluginRegistryProps } = mockPluginRegistryProps();
47
- addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);
48
- renderWithContext(/*#__PURE__*/ _jsx(PluginRegistry, {
49
- ...pluginRegistryProps,
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
- it('should render name and info icon', async ()=>{
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
- await screen.findByText('Fake Panel');
64
- screen.queryByLabelText('info-tooltip');
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('should render edit icons when in edit mode', ()=>{
67
- renderPanel(true);
68
- const panelTitle = screen.getByText('Fake Panel');
69
- userEvent.hover(panelTitle);
70
- screen.getByLabelText('drag handle');
71
- screen.getByLabelText('edit panel');
72
- screen.getByLabelText('delete panel');
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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n // Helper to create panel props for rendering tests\n const createPanelProps = (): PanelProps => {\n return {\n definition: {\n kind: 'Panel',\n spec: {\n display: {\n name: 'Fake Panel',\n description: 'This is a fake panel',\n },\n plugin: {\n kind: 'FakePanel',\n spec: {},\n },\n },\n },\n // TODO: This is coupled to ID generation which is not good and the tests will probably fail\n panelGroupItemId: { panelGroupId: 0, panelGroupItemLayoutId: '' },\n };\n };\n\n // Helper to render the panel with some context set\n const renderPanel = (isEditMode = false) => {\n const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n renderWithContext(\n <PluginRegistry {...pluginRegistryProps}>\n <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n <Panel {...createPanelProps()} />\n </DashboardProvider>\n </PluginRegistry>\n );\n };\n\n it('should render name and info icon', async () => {\n renderPanel();\n await screen.findByText('Fake Panel');\n screen.queryByLabelText('info-tooltip');\n });\n\n it('should render edit icons when in edit mode', () => {\n renderPanel(true);\n const panelTitle = screen.getByText('Fake Panel');\n userEvent.hover(panelTitle);\n screen.getByLabelText('drag handle');\n screen.getByLabelText('edit panel');\n screen.getByLabelText('delete panel');\n });\n});\n"],"names":["PluginRegistry","screen","userEvent","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","panelGroupItemId","panelGroupId","panelGroupItemLayoutId","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText","panelTitle","getByText","hover","getByLabelText"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACD,4FAA4F;YAC5FK,gBAAgB,EAAE;gBAAEC,YAAY,EAAE,CAAC;gBAAEC,sBAAsB,EAAE,EAAE;aAAE;SAClE,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGpB,uBAAuB,EAAE,AAAC;QACzEmB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAElB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACH,cAAc;YAAE,GAAGwB,mBAAmB;sBACrC,cAAA,KAACjB,iBAAiB;gBAACkB,YAAY,EAAE;oBAAEC,aAAa,EAAEpB,gBAAgB,EAAE,CAACO,IAAI;oBAAES,UAAU;iBAAE;0BACrF,cAAA,KAACd,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFiB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMpB,MAAM,CAAC2B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC3B,MAAM,CAAC4B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG7B,MAAM,CAAC8B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD7B,SAAS,CAAC8B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B7B,MAAM,CAACgC,cAAc,CAAC,aAAa,CAAC,CAAC;QACrChC,MAAM,CAACgC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpChC,MAAM,CAACgC,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
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,3 +1,2 @@
1
1
  export * from './Panel';
2
- export * from './DeletePanelDialog';
3
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC"}
@@ -11,6 +11,5 @@
11
11
  // See the License for the specific language governing permissions and
12
12
  // limitations under the License.
13
13
  export * from './Panel';
14
- export * from './DeletePanelDialog';
15
14
 
16
15
  //# sourceMappingURL=index.js.map
@@ -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';\nexport * from './DeletePanelDialog';\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;AACxB,cAAc,qBAAqB,CAAC"}
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, FAKE_PANEL_PLUGIN, getTestDashboard, mockPluginRegistryProps, renderWithContext } from '../../test';
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__*/ _jsx(PluginRegistry, {
27
- ...pluginRegistryProps,
28
- children: /*#__PURE__*/ _jsxs(DashboardProvider, {
29
- initialState: {
30
- dashboardSpec: getTestDashboard().spec,
31
- isEditMode: true
32
- },
33
- children: [
34
- /*#__PURE__*/ _jsx(DashboardProviderSpy, {}),
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 { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport {\n createDashboardProviderSpy,\n FAKE_PANEL_PLUGIN,\n getTestDashboard,\n mockPluginRegistryProps,\n renderWithContext,\n} from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n const renderPanelDrawer = () => {\n const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);\n\n const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n renderWithContext(\n <PluginRegistry {...pluginRegistryProps}>\n <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n <DashboardProviderSpy />\n <PanelDrawer />\n </DashboardProvider>\n </PluginRegistry>\n );\n\n const { value: storeApi } = store;\n if (storeApi === undefined) {\n throw new Error('Expected dashboard store to be set after initial render');\n }\n\n return storeApi;\n };\n\n it('should add new panel', async () => {\n const storeApi = renderPanelDrawer();\n\n // Open the drawer for a new panel\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":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","plugin","group","Object","values","panelGroups","find","title","layout","entries","itemPanelKeys","panelKey","openEditPanel","panelGroupId","id","panelGroupItemLayoutId","clear","cpu"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,GAAG,QAAQ,sBAAsB,CAAC;AAC3C,SACEC,0BAA0B,EAC1BC,iBAAiB,EACjBC,gBAAgB,EAChBC,uBAAuB,EACvBC,iBAAiB,QACZ,YAAY,CAAC;AACpB,SAASC,iBAAiB,QAAQ,iCAAiC,CAAC;AACpE,SAASC,WAAW,QAAQ,eAAe,CAAC;AAE5CC,QAAQ,CAAC,cAAc,EAAE,IAAM;IAC7B,MAAMC,iBAAiB,GAAG,IAAM;QAC9B,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGP,uBAAuB,EAAE,AAAC;QACzEM,aAAa,CAAC,OAAO,EAAE,iBAAiB,EAAER,iBAAiB,CAAC,CAAC;QAE7D,MAAM,EAAEU,KAAK,CAAA,EAAEC,oBAAoB,CAAA,EAAE,GAAGZ,0BAA0B,EAAE,AAAC;QAErEI,iBAAiB,eACf,KAACR,cAAc;YAAE,GAAGc,mBAAmB;sBACrC,cAAA,MAACL,iBAAiB;gBAACQ,YAAY,EAAE;oBAAEC,aAAa,EAAEZ,gBAAgB,EAAE,CAACa,IAAI;oBAAEC,UAAU,EAAE,IAAI;iBAAE;;kCAC3F,KAACJ,oBAAoB,KAAG;kCACxB,KAACN,WAAW,KAAG;;cACG;UACL,CAClB,CAAC;QAEF,MAAM,EAAEW,KAAK,EAAEC,QAAQ,CAAA,EAAE,GAAGP,KAAK,AAAC;QAClC,IAAIO,QAAQ,KAAKC,SAAS,EAAE;YAC1B,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC,CAAC;QAC7E,CAAC;QAED,OAAOF,QAAQ,CAAC;IAClB,CAAC,AAAC;IAEFG,EAAE,CAAC,sBAAsB,EAAE,UAAY;QACrC,MAAMH,QAAQ,GAAGV,iBAAiB,EAAE,AAAC;QAErC,kCAAkC;QAClCT,GAAG,CAAC,IAAMmB,QAAQ,CAACI,QAAQ,EAAE,CAACC,YAAY,EAAE,CAAC,CAAC;QAE9C,MAAMC,SAAS,GAAG,MAAM3B,MAAM,CAAC4B,eAAe,QAAQ,AAAC;QACvD3B,SAAS,CAAC4B,IAAI,CAACF,SAAS,EAAE,WAAW,CAAC,CAAC;QACvC1B,SAAS,CAAC6B,KAAK,CAAC9B,MAAM,CAAC+B,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QAEzC,iCAAiC;QACjC,MAAMC,MAAM,GAAGX,QAAQ,CAACI,QAAQ,EAAE,CAACO,MAAM,AAAC;QAC1CC,MAAM,CAACD,MAAM,CAAC,CAACE,aAAa,CAAC;YAC3B,yCAAyC;YACzCC,QAAQ,EAAE;gBACRC,IAAI,EAAE,OAAO;gBACblB,IAAI,EAAE;oBACJmB,OAAO,EAAE;wBAAEC,IAAI,EAAE,WAAW;qBAAE;oBAC9BC,MAAM,EAAE;wBACNH,IAAI,EAAE,EAAE;wBACRlB,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHM,EAAE,CAAC,+BAA+B,EAAE,UAAY;QAC9C,MAAMH,QAAQ,GAAGV,iBAAiB,EAAE,AAAC;QAErC,wCAAwC;QACxC,MAAM6B,KAAK,GAAGC,MAAM,CAACC,MAAM,CAACrB,QAAQ,CAACI,QAAQ,EAAE,CAACkB,WAAW,CAAC,CAACC,IAAI,CAAC,CAACJ,KAAK,GAAKA,KAAK,CAACK,KAAK,KAAK,WAAW,CAAC,AAAC;QAC1G,IAAIL,KAAK,KAAKlB,SAAS,EAAE;YACvB,MAAM,IAAIC,KAAK,CAAC,sBAAsB,CAAC,CAAC;QAC1C,CAAC;QACD,MAAMuB,MAAM,GAAGL,MAAM,CAACM,OAAO,CAACP,KAAK,CAACQ,aAAa,CAAC,CAACJ,IAAI,CAAC,CAAC,GAAGK,QAAQ,CAAC,GAAKA,QAAQ,KAAK,KAAK,CAAC,AAAC;QAC9F,IAAIH,MAAM,KAAKxB,SAAS,EAAE;YACxB,MAAM,IAAIC,KAAK,CAAC,sBAAsB,CAAC,CAAC;QAC1C,CAAC;QACDrB,GAAG,CAAC,IAAMmB,QAAQ,CAACI,QAAQ,EAAE,CAACyB,aAAa,CAAC;gBAAEC,YAAY,EAAEX,KAAK,CAACY,EAAE;gBAAEC,sBAAsB,EAAEP,MAAM,CAAC,CAAC,CAAC;aAAE,CAAC,CAAC,CAAC;QAE5G,MAAMnB,SAAS,GAAG,MAAM3B,MAAM,CAAC4B,eAAe,QAAQ,AAAC;QACvD3B,SAAS,CAACqD,KAAK,CAAC3B,SAAS,CAAC,CAAC;QAC3B1B,SAAS,CAAC4B,IAAI,CAACF,SAAS,EAAE,WAAW,CAAC,CAAC;QACvC1B,SAAS,CAAC6B,KAAK,CAAC9B,MAAM,CAAC+B,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAE3C,MAAMC,MAAM,GAAGX,QAAQ,CAACI,QAAQ,EAAE,CAACO,MAAM,AAAC;QAC1CC,MAAM,CAACD,MAAM,CAAC,CAACE,aAAa,CAAC;YAC3BqB,GAAG,EAAE;gBACHnB,IAAI,EAAE,OAAO;gBACblB,IAAI,EAAE;oBACJmB,OAAO,EAAE;wBAAEC,IAAI,EAAE,WAAW;qBAAE;oBAC9BC,MAAM,EAAE;wBACNH,IAAI,EAAE,iBAAiB;wBACvBlB,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
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/DashboardProvider/panel-editor-slice';
3
- export declare function PanelPreview({ name, description, kind, spec, groupId }: PanelEditorValues): JSX.Element | null;
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,oDAAoD,CAAC;AAGvF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,iBAAiB,sBA4BzF"}
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 , groupId }) {
17
- const previewValues = {
18
- definition: {
19
- kind: 'Panel',
20
- spec: {
21
- display: {
22
- name,
23
- description
24
- },
25
- plugin: {
26
- kind,
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 (!kind) {
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
- ...previewValues
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/DashboardProvider/panel-editor-slice';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec, groupId }: PanelEditorValues) {\n const previewValues: PanelProps = {\n definition: {\n kind: 'Panel',\n spec: {\n display: {\n name,\n description,\n },\n plugin: {\n kind,\n spec,\n },\n },\n },\n // TODO: this shouldn't be necessary for preview\n panelGroupItemId: { panelGroupId: groupId, panelGroupItemLayoutId: '' },\n };\n\n if (!kind) {\n return null;\n }\n\n return (\n <Box height={300}>\n <Panel {...previewValues} />\n </Box>\n );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","groupId","previewValues","definition","display","plugin","panelGroupItemId","panelGroupId","panelGroupItemLayoutId","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,EAAEC,OAAO,CAAA,EAAqB,EAAE;IAC1F,MAAMC,aAAa,GAAe;QAChCC,UAAU,EAAE;YACVJ,IAAI,EAAE,OAAO;YACbC,IAAI,EAAE;gBACJI,OAAO,EAAE;oBACPP,IAAI;oBACJC,WAAW;iBACZ;gBACDO,MAAM,EAAE;oBACNN,IAAI;oBACJC,IAAI;iBACL;aACF;SACF;QACD,gDAAgD;QAChDM,gBAAgB,EAAE;YAAEC,YAAY,EAAEN,OAAO;YAAEO,sBAAsB,EAAE,EAAE;SAAE;KACxE,AAAC;IAEF,IAAI,CAACT,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACe,MAAM,EAAE,GAAG;kBACd,cAAA,KAACd,KAAK;YAAE,GAAGO,aAAa;UAAI;MACxB,CACN;AACJ,CAAC"}
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
- dashboardSpec: getTestDashboard().spec,
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={{ dashboardSpec: getTestDashboard().spec, 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","dashboardSpec","spec","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
+ {"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":"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,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,GAAG,QAAQ,sBAAsB,CAAC;AAC3C,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,0BAA0B,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,YAAY,CAAC;AAC7F,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAEtDC,QAAQ,CAAC,iBAAiB,EAAE,IAAM;IAChC,MAAMC,YAAY,GAAG,IAAM;QACzB,MAAM,EAAEC,KAAK,CAAA,EAAEC,oBAAoB,CAAA,EAAE,GAAGP,0BAA0B,EAAE,AAAC;QAErEE,iBAAiB,eACf,MAACH,iBAAiB;YAACS,YAAY,EAAE;gBAAEC,iBAAiB,EAAER,gBAAgB,EAAE;gBAAES,UAAU,EAAE,IAAI;aAAE;;8BAC1F,KAACH,oBAAoB,KAAG;8BACxB,KAACJ,gBAAgB,KAAG;;UACF,CACrB,CAAC;QAEF,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,CAAA,EAAE,GAAGN,KAAK,AAAC;QAClC,IAAIM,QAAQ,KAAKC,SAAS,EAAE;YAC1B,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC,CAAC;QAC7E,CAAC;QAED,OAAOF,QAAQ,CAAC;IAClB,CAAC,AAAC;IAEFG,EAAE,CAAC,4BAA4B,EAAE,UAAY;QAC3C,MAAMH,QAAQ,GAAGP,YAAY,EAAE,AAAC;QAEhC,wCAAwC;QACxCP,GAAG,CAAC,IAAMc,QAAQ,CAACI,QAAQ,EAAE,CAACC,iBAAiB,EAAE,CAAC,CAAC;QAEnD,MAAMC,SAAS,GAAG,MAAMtB,MAAM,CAACuB,eAAe,QAAQ,AAAC;QACvDtB,SAAS,CAACuB,IAAI,CAACF,SAAS,EAAE,iBAAiB,CAAC,CAAC;QAC7CrB,SAAS,CAACwB,KAAK,CAACzB,MAAM,CAAC0B,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QAEzC,wEAAwE;QACxE,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACI,QAAQ,EAAE,CAACO,WAAW,CAAC,AAAC;QACnEG,MAAM,CAACH,WAAW,CAAC,CAACI,cAAc,CAAC;YACjCC,EAAE,EAAEF,MAAM,CAACG,GAAG,CAACC,MAAM,CAAC;YACtBC,KAAK,EAAE,iBAAiB;YACxBC,WAAW,EAAE,KAAK;YAClBC,WAAW,EAAEP,MAAM,CAACG,GAAG,CAACK,KAAK,CAAC;YAC9BC,aAAa,EAAET,MAAM,CAACG,GAAG,CAACL,MAAM,CAAC;SAClC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHT,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjD,MAAMH,QAAQ,GAAGP,YAAY,EAAE,AAAC;QAEhC,8CAA8C;QAC9C,MAAM+B,KAAK,GAAGZ,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACI,QAAQ,EAAE,CAACO,WAAW,CAAC,CAACc,IAAI,CAAC,CAACD,KAAK,GAAKA,KAAK,CAACL,KAAK,KAAK,WAAW,CAAC,AAAC;QAC1G,IAAIK,KAAK,KAAKvB,SAAS,EAAE;YACvB,MAAM,IAAIC,KAAK,CAAC,oBAAoB,CAAC,CAAC;QACxC,CAAC;QACDhB,GAAG,CAAC,IAAMc,QAAQ,CAACI,QAAQ,EAAE,CAACsB,kBAAkB,CAACF,KAAK,CAACR,EAAE,CAAC,CAAC,CAAC;QAE5D,MAAMV,SAAS,GAAG,MAAMtB,MAAM,CAACuB,eAAe,QAAQ,AAAC;QACvDtB,SAAS,CAAC0C,KAAK,CAACrB,SAAS,CAAC,CAAC;QAC3BrB,SAAS,CAACuB,IAAI,CAACF,SAAS,EAAE,UAAU,CAAC,CAAC;QACtCrB,SAAS,CAACwB,KAAK,CAACzB,MAAM,CAAC0B,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAE3C,wEAAwE;QACxE,MAAMC,WAAW,GAAGX,QAAQ,CAACI,QAAQ,EAAE,CAACO,WAAW,AAAC;QACpDG,MAAM,CAACH,WAAW,CAAC,CAACiB,aAAa,CAAC;YAChC,CAACJ,KAAK,CAACR,EAAE,CAAC,EAAE;gBACVA,EAAE,EAAEQ,KAAK,CAACR,EAAE;gBACZG,KAAK,EAAE,UAAU;gBACjBC,WAAW,EAAE,KAAK;aACnB;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
@@ -1,3 +1,2 @@
1
1
  export * from './PanelGroupDialog';
2
- export * from './DeletePanelGroupDialog';
3
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}