@perses-dev/dashboards 0.52.0 → 0.53.0-beta.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 (74) hide show
  1. package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js +0 -2
  2. package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js +5 -20
  3. package/dist/cjs/components/GridLayout/GridItemContent.js +6 -64
  4. package/dist/cjs/components/LeaveDialog/LeaveDialog.js +10 -1
  5. package/dist/cjs/components/PanelDrawer/PanelEditorForm.js +186 -183
  6. package/dist/cjs/components/PanelDrawer/PanelPreview.js +3 -0
  7. package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js +6 -21
  8. package/dist/cjs/components/QueryViewerDialog/QueryViewerDialog.js +121 -0
  9. package/dist/cjs/components/QueryViewerDialog/index.js +30 -0
  10. package/dist/cjs/components/Variables/ListVariableListBox.js +201 -0
  11. package/dist/cjs/components/Variables/Variable.js +130 -72
  12. package/dist/cjs/components/Variables/index.js +1 -0
  13. package/dist/cjs/components/index.js +2 -1
  14. package/dist/cjs/context/PanelEditorProvider/PanelEditorProvider.js +49 -0
  15. package/dist/cjs/context/PanelEditorProvider/index.js +23 -0
  16. package/dist/cjs/context/index.js +1 -0
  17. package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.d.ts.map +1 -1
  18. package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js +0 -2
  19. package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map +1 -1
  20. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.d.ts.map +1 -1
  21. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js +5 -15
  22. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map +1 -1
  23. package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
  24. package/dist/components/GridLayout/GridItemContent.js +8 -66
  25. package/dist/components/GridLayout/GridItemContent.js.map +1 -1
  26. package/dist/components/LeaveDialog/LeaveDialog.d.ts +2 -1
  27. package/dist/components/LeaveDialog/LeaveDialog.d.ts.map +1 -1
  28. package/dist/components/LeaveDialog/LeaveDialog.js +10 -1
  29. package/dist/components/LeaveDialog/LeaveDialog.js.map +1 -1
  30. package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map +1 -1
  31. package/dist/components/PanelDrawer/PanelEditorForm.js +186 -183
  32. package/dist/components/PanelDrawer/PanelEditorForm.js.map +1 -1
  33. package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
  34. package/dist/components/PanelDrawer/PanelPreview.js +4 -1
  35. package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
  36. package/dist/components/PanelGroupDialog/PanelGroupDialog.d.ts.map +1 -1
  37. package/dist/components/PanelGroupDialog/PanelGroupDialog.js +5 -15
  38. package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map +1 -1
  39. package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts +9 -0
  40. package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts.map +1 -0
  41. package/dist/components/QueryViewerDialog/QueryViewerDialog.js +72 -0
  42. package/dist/components/QueryViewerDialog/QueryViewerDialog.js.map +1 -0
  43. package/dist/components/QueryViewerDialog/index.d.ts +2 -0
  44. package/dist/components/QueryViewerDialog/index.d.ts.map +1 -0
  45. package/dist/components/QueryViewerDialog/index.js +15 -0
  46. package/dist/components/QueryViewerDialog/index.js.map +1 -0
  47. package/dist/components/Variables/ListVariableListBox.d.ts +16 -0
  48. package/dist/components/Variables/ListVariableListBox.d.ts.map +1 -0
  49. package/dist/components/Variables/ListVariableListBox.js +141 -0
  50. package/dist/components/Variables/ListVariableListBox.js.map +1 -0
  51. package/dist/components/Variables/Variable.d.ts.map +1 -1
  52. package/dist/components/Variables/Variable.js +134 -76
  53. package/dist/components/Variables/Variable.js.map +1 -1
  54. package/dist/components/Variables/index.d.ts +1 -0
  55. package/dist/components/Variables/index.d.ts.map +1 -1
  56. package/dist/components/Variables/index.js +1 -0
  57. package/dist/components/Variables/index.js.map +1 -1
  58. package/dist/components/index.d.ts +2 -1
  59. package/dist/components/index.d.ts.map +1 -1
  60. package/dist/components/index.js +2 -1
  61. package/dist/components/index.js.map +1 -1
  62. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts +13 -0
  63. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts.map +1 -0
  64. package/dist/context/PanelEditorProvider/PanelEditorProvider.js +33 -0
  65. package/dist/context/PanelEditorProvider/PanelEditorProvider.js.map +1 -0
  66. package/dist/context/PanelEditorProvider/index.d.ts +3 -0
  67. package/dist/context/PanelEditorProvider/index.d.ts.map +1 -0
  68. package/dist/context/PanelEditorProvider/index.js +16 -0
  69. package/dist/context/PanelEditorProvider/index.js.map +1 -0
  70. package/dist/context/index.d.ts +1 -0
  71. package/dist/context/index.d.ts.map +1 -1
  72. package/dist/context/index.js +1 -0
  73. package/dist/context/index.js.map +1 -1
  74. package/package.json +5 -5
package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js CHANGED
@@ -63,8 +63,6 @@ function DashboardStickyToolbar(props) {
63
63
  display: "flex",
64
64
  flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
65
65
  maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
66
- maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
67
- ,
68
66
  pt: 1,
69
67
  pl: isSticky ? 1 : 0,
70
68
  mt: isSticky && isBiggerThanMd ? 0.5 : 0,
package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js CHANGED
@@ -21,14 +21,9 @@ Object.defineProperty(exports, "DeletePanelGroupDialog", {
21
21
  }
22
22
  });
23
23
  const _jsxruntime = require("react/jsx-runtime");
24
+ const _components = require("@perses-dev/components");
24
25
  const _material = require("@mui/material");
25
- const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
26
26
  const _context = require("../../context");
27
- function _interop_require_default(obj) {
28
- return obj && obj.__esModule ? obj : {
29
- default: obj
30
- };
31
- }
32
27
  const DeletePanelGroupDialog = ()=>{
33
28
  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _context.useDeletePanelGroupDialog)();
34
29
  const { setViewPanel } = (0, _context.useViewPanel)();
@@ -42,26 +37,16 @@ const DeletePanelGroupDialog = ()=>{
42
37
  closeDeletePanelGroupDialog();
43
38
  setViewPanel(undefined);
44
39
  };
45
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
40
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
46
41
  open: deletePanelGroupDialog !== undefined,
47
42
  children: [
48
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
43
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
49
44
  children: "Delete Panel Group"
50
45
  }),
51
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
52
- "aria-label": "Close",
53
- onClick: ()=>closeDeletePanelGroupDialog(),
54
- sx: (theme)=>({
55
- position: 'absolute',
56
- top: theme.spacing(0.5),
57
- right: theme.spacing(0.5)
58
- }),
59
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
60
- }),
61
46
  /*#__PURE__*/ (0, _jsxruntime.jsxs)("form", {
62
47
  onSubmit: handleDelete,
63
48
  children: [
64
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogContent, {
49
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Content, {
65
50
  dividers: true,
66
51
  sx: {
67
52
  width: '500px'
@@ -72,7 +57,7 @@ const DeletePanelGroupDialog = ()=>{
72
57
  "? This will delete all the panels within the group."
73
58
  ]
74
59
  }),
75
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogActions, {
60
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Actions, {
76
61
  children: [
77
62
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
78
63
  variant: "contained",
package/dist/cjs/components/GridLayout/GridItemContent.js CHANGED
@@ -28,6 +28,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
28
28
  const _context = require("../../context");
29
29
  const _Panel = require("../Panel");
30
30
  const _panelgroupslice = require("../../context/DashboardProvider/panel-group-slice");
31
+ const _QueryViewerDialog = require("../QueryViewerDialog");
31
32
  function _getRequireWildcardCache(nodeInterop) {
32
33
  if (typeof WeakMap !== "function") return null;
33
34
  var cacheBabelInterop = new WeakMap();
@@ -122,38 +123,6 @@ function GridItemContent(props) {
122
123
  };
123
124
  });
124
125
  const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
125
- const queryRows = (0, _react.useMemo)(()=>{
126
- if (!queries?.length) return null;
127
- const queryItems = [];
128
- queries.forEach((query, index)=>{
129
- if (query?.spec?.plugin?.kind && query?.kind) {
130
- queryItems.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.default.Fragment, {
131
- children: [
132
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginSpecEditor, {
133
- value: query.spec.plugin.spec,
134
- pluginSelection: {
135
- kind: query.spec.plugin.kind,
136
- type: query.kind
137
- },
138
- onChange: ()=>{},
139
- isReadonly: true
140
- }),
141
- index < queries.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
142
- sx: {
143
- my: 2
144
- }
145
- })
146
- ]
147
- }, `query-${index}`));
148
- }
149
- });
150
- return queryItems;
151
- }, [
152
- queries
153
- ]);
154
- const onCloseHandler = ()=>{
155
- setOpenQueryViewer(false);
156
- };
157
126
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
158
127
  ref: ref,
159
128
  sx: {
@@ -161,38 +130,6 @@ function GridItemContent(props) {
161
130
  height: '100%'
162
131
  },
163
132
  children: [
164
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
165
- fullWidth: true,
166
- PaperProps: {
167
- sx: {
168
- margin: '10px',
169
- width: 'calc(100% - 20px)'
170
- }
171
- },
172
- maxWidth: "lg",
173
- open: openQueryViewer,
174
- children: [
175
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
176
- children: "Query Viewer"
177
- }),
178
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
179
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
180
- sx: {
181
- padding: '5px'
182
- },
183
- children: queryRows
184
- })
185
- }),
186
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogActions, {
187
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
188
- variant: "outlined",
189
- onClick: onCloseHandler,
190
- color: "primary",
191
- children: "Close"
192
- })
193
- })
194
- ]
195
- }),
196
133
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
197
134
  definitions: definitions,
198
135
  options: {
@@ -210,6 +147,11 @@ function GridItemContent(props) {
210
147
  panelOptions: props.panelOptions,
211
148
  panelGroupItemId: panelGroupItemId
212
149
  })
150
+ }),
151
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryViewerDialog.QueryViewerDialog, {
152
+ open: openQueryViewer,
153
+ queryDefinitions: queryDefinitions,
154
+ onClose: ()=>setOpenQueryViewer(false)
213
155
  })
214
156
  ]
215
157
  });
package/dist/cjs/components/LeaveDialog/LeaveDialog.js CHANGED
@@ -65,8 +65,17 @@ function Prompt({ isBlocked, message }) {
65
65
  });
66
66
  }
67
67
  function LeaveDialog({ original, current }) {
68
+ const handleIsBlocked = (ctx)=>{
69
+ if (JSON.stringify(original) !== JSON.stringify(current)) {
70
+ // Only block navigation if the pathname is changing (=> ignore search params changes)
71
+ if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {
72
+ return true;
73
+ }
74
+ }
75
+ return false;
76
+ };
68
77
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(Prompt, {
69
- isBlocked: JSON.stringify(original) !== JSON.stringify(current),
78
+ isBlocked: handleIsBlocked,
70
79
  message: "You have unsaved changes, are you sure you want to leave?"
71
80
  });
72
81
  }
package/dist/cjs/components/PanelDrawer/PanelEditorForm.js CHANGED
@@ -37,6 +37,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
37
37
  const _reacthookform = require("react-hook-form");
38
38
  const _zod = require("@hookform/resolvers/zod");
39
39
  const _context = require("../../context");
40
+ const _PanelEditorProvider = require("../../context/PanelEditorProvider/PanelEditorProvider");
40
41
  const _PanelPreview = require("./PanelPreview");
41
42
  const _usePanelEditor = require("./usePanelEditor");
42
43
  function PanelEditorForm(props) {
@@ -140,200 +141,202 @@ function PanelEditorForm(props) {
140
141
  ]);
141
142
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
142
143
  timeRange: timeRange,
143
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
144
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.FormProvider, {
144
145
  ...form,
145
- children: [
146
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
147
- sx: {
148
- display: 'flex',
149
- alignItems: 'center',
150
- padding: (theme)=>theme.spacing(1, 2),
151
- borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
152
- },
153
- children: [
154
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
155
- variant: "h2",
156
- children: [
157
- titleAction,
158
- " Panel"
159
- ]
160
- }),
161
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
162
- direction: "row",
163
- spacing: 1,
164
- marginLeft: "auto",
165
- children: [
166
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
167
- variant: "contained",
168
- disabled: !form.formState.isValid,
169
- onClick: handleSubmit,
170
- children: submitText
171
- }),
172
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
173
- color: "secondary",
174
- variant: "outlined",
175
- onClick: handleCancel,
176
- children: "Cancel"
177
- })
178
- ]
179
- })
180
- ]
181
- }),
182
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
183
- id: panelEditorFormId,
184
- sx: {
185
- flex: 1,
186
- overflowY: 'scroll',
187
- padding: (theme)=>theme.spacing(2)
188
- },
189
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
190
- container: true,
191
- spacing: 2,
146
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PanelEditorProvider.PanelEditorProvider, {
147
+ children: [
148
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
149
+ sx: {
150
+ display: 'flex',
151
+ alignItems: 'center',
152
+ padding: (theme)=>theme.spacing(1, 2),
153
+ borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
154
+ },
192
155
  children: [
193
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
194
- item: true,
195
- xs: 8,
196
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
197
- control: form.control,
198
- name: "panelDefinition.spec.display.name",
199
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
200
- ...field,
201
- required: true,
202
- fullWidth: true,
203
- label: "Name",
204
- error: !!fieldState.error,
205
- helperText: fieldState.error?.message,
206
- value: watchedName ?? '',
207
- onChange: (event)=>{
208
- field.onChange(event);
209
- setName(event.target.value);
210
- }
211
- })
212
- })
213
- }),
214
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
215
- item: true,
216
- xs: 4,
217
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
218
- control: form.control,
219
- name: "groupId",
220
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
221
- select: true,
222
- ...field,
223
- required: true,
224
- fullWidth: true,
225
- label: "Group",
226
- error: !!fieldState.error,
227
- helperText: fieldState.error?.message,
228
- onChange: (event)=>{
229
- field.onChange(event);
230
- },
231
- children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
232
- value: panelGroup.id,
233
- children: panelGroup.title ?? `Group ${index + 1}`
234
- }, panelGroup.id))
235
- })
236
- })
237
- }),
238
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
239
- item: true,
240
- xs: 8,
241
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
242
- control: form.control,
243
- name: "panelDefinition.spec.display.description",
244
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
245
- ...field,
246
- fullWidth: true,
247
- label: "Description",
248
- error: !!fieldState.error,
249
- helperText: fieldState.error?.message,
250
- value: watchedDescription ?? '',
251
- onChange: (event)=>{
252
- field.onChange(event);
253
- setDescription(event.target.value);
254
- }
255
- })
256
- })
257
- }),
258
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
259
- item: true,
260
- xs: 4,
261
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
262
- control: form.control,
263
- name: "panelDefinition.spec.plugin.kind",
264
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
265
- ...field,
266
- pluginTypes: [
267
- 'Panel'
268
- ],
269
- required: true,
270
- fullWidth: true,
271
- label: "Type",
272
- disabled: pluginEditor.isLoading,
273
- error: !!pluginEditor.error || !!fieldState.error,
274
- helperText: pluginEditor.error?.message ?? fieldState.error?.message,
275
- value: {
276
- type: 'Panel',
277
- kind: watchedPluginKind
278
- },
279
- onChange: (event)=>{
280
- field.onChange(event.kind);
281
- pluginEditor.onSelectionChange(event);
282
- }
283
- })
284
- })
156
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
157
+ variant: "h2",
158
+ children: [
159
+ titleAction,
160
+ " Panel"
161
+ ]
285
162
  }),
286
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
287
- item: true,
288
- xs: 12,
163
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
164
+ direction: "row",
165
+ spacing: 1,
166
+ marginLeft: "auto",
289
167
  children: [
290
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
291
- variant: "h4",
292
- marginBottom: 1,
293
- children: "Preview"
168
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
169
+ variant: "contained",
170
+ disabled: !form.formState.isValid,
171
+ onClick: handleSubmit,
172
+ children: submitText
294
173
  }),
295
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
296
- FallbackComponent: _components.ErrorAlert,
297
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
298
- panelDefinition: panelDefinition
299
- })
174
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
175
+ color: "secondary",
176
+ variant: "outlined",
177
+ onClick: handleCancel,
178
+ children: "Cancel"
300
179
  })
301
180
  ]
302
- }),
303
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
304
- item: true,
305
- xs: 12,
306
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
307
- FallbackComponent: _components.ErrorAlert,
308
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
309
- ref: pluginEditorRef,
181
+ })
182
+ ]
183
+ }),
184
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
185
+ id: panelEditorFormId,
186
+ sx: {
187
+ flex: 1,
188
+ overflowY: 'scroll',
189
+ padding: (theme)=>theme.spacing(2)
190
+ },
191
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
192
+ container: true,
193
+ spacing: 2,
194
+ children: [
195
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
196
+ item: true,
197
+ xs: 8,
198
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
199
+ control: form.control,
200
+ name: "panelDefinition.spec.display.name",
201
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
202
+ ...field,
203
+ required: true,
204
+ fullWidth: true,
205
+ label: "Name",
206
+ error: !!fieldState.error,
207
+ helperText: fieldState.error?.message,
208
+ value: watchedName ?? '',
209
+ onChange: (event)=>{
210
+ field.onChange(event);
211
+ setName(event.target.value);
212
+ }
213
+ })
214
+ })
215
+ }),
216
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
217
+ item: true,
218
+ xs: 4,
219
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
220
+ control: form.control,
221
+ name: "groupId",
222
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
223
+ select: true,
224
+ ...field,
225
+ required: true,
226
+ fullWidth: true,
227
+ label: "Group",
228
+ error: !!fieldState.error,
229
+ helperText: fieldState.error?.message,
230
+ onChange: (event)=>{
231
+ field.onChange(event);
232
+ },
233
+ children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
234
+ value: panelGroup.id,
235
+ children: panelGroup.title ?? `Group ${index + 1}`
236
+ }, panelGroup.id))
237
+ })
238
+ })
239
+ }),
240
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
241
+ item: true,
242
+ xs: 8,
243
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
244
+ control: form.control,
245
+ name: "panelDefinition.spec.display.description",
246
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
247
+ ...field,
248
+ fullWidth: true,
249
+ label: "Description",
250
+ error: !!fieldState.error,
251
+ helperText: fieldState.error?.message,
252
+ value: watchedDescription ?? '',
253
+ onChange: (event)=>{
254
+ field.onChange(event);
255
+ setDescription(event.target.value);
256
+ }
257
+ })
258
+ })
259
+ }),
260
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
261
+ item: true,
262
+ xs: 4,
263
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
310
264
  control: form.control,
311
- panelDefinition: panelDefinition,
312
- onJSONChange: handlePanelDefinitionChange,
313
- onQueriesChange: (queries)=>{
314
- setQueries(queries);
315
- },
316
- onPluginSpecChange: (spec)=>{
317
- pluginEditor.onSpecChange(spec);
318
- }
265
+ name: "panelDefinition.spec.plugin.kind",
266
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
267
+ ...field,
268
+ pluginTypes: [
269
+ 'Panel'
270
+ ],
271
+ required: true,
272
+ fullWidth: true,
273
+ label: "Type",
274
+ disabled: pluginEditor.isLoading,
275
+ error: !!pluginEditor.error || !!fieldState.error,
276
+ helperText: pluginEditor.error?.message ?? fieldState.error?.message,
277
+ value: {
278
+ type: 'Panel',
279
+ kind: watchedPluginKind
280
+ },
281
+ onChange: (event)=>{
282
+ field.onChange(event.kind);
283
+ pluginEditor.onSelectionChange(event);
284
+ }
285
+ })
286
+ })
287
+ }),
288
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
289
+ item: true,
290
+ xs: 12,
291
+ children: [
292
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
293
+ variant: "h4",
294
+ marginBottom: 1,
295
+ children: "Preview"
296
+ }),
297
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
298
+ FallbackComponent: _components.ErrorAlert,
299
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
300
+ panelDefinition: panelDefinition
301
+ })
302
+ })
303
+ ]
304
+ }),
305
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
306
+ item: true,
307
+ xs: 12,
308
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
309
+ FallbackComponent: _components.ErrorAlert,
310
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
311
+ ref: pluginEditorRef,
312
+ control: form.control,
313
+ panelDefinition: panelDefinition,
314
+ onJSONChange: handlePanelDefinitionChange,
315
+ onQueriesChange: (queries)=>{
316
+ setQueries(queries);
317
+ },
318
+ onPluginSpecChange: (spec)=>{
319
+ pluginEditor.onSpecChange(spec);
320
+ }
321
+ })
319
322
  })
320
323
  })
321
- })
322
- ]
324
+ ]
325
+ })
326
+ }),
327
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
328
+ description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
329
+ isOpen: isDiscardDialogOpened,
330
+ onCancel: ()=>{
331
+ setDiscardDialogOpened(false);
332
+ },
333
+ onDiscardChanges: ()=>{
334
+ setDiscardDialogOpened(false);
335
+ onClose();
336
+ }
323
337
  })
324
- }),
325
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
326
- description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
327
- isOpen: isDiscardDialogOpened,
328
- onCancel: ()=>{
329
- setDiscardDialogOpened(false);
330
- },
331
- onDiscardChanges: ()=>{
332
- setDiscardDialogOpened(false);
333
- onClose();
334
- }
335
- })
336
- ]
338
+ ]
339
+ })
337
340
  })
338
341
  });
339
342
  }
package/dist/cjs/components/PanelDrawer/PanelPreview.js CHANGED
@@ -25,13 +25,16 @@ const _react = require("react");
25
25
  const _material = require("@mui/material");
26
26
  const _pluginsystem = require("@perses-dev/plugin-system");
27
27
  const _Panel = require("../Panel");
28
+ const _context = require("../../context");
28
29
  const PANEL_PREVIEW_HEIGHT = 300;
29
30
  const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
30
31
  function PanelPreview({ panelDefinition }) {
31
32
  const boxRef = (0, _react.useRef)(null);
32
33
  let width = PANEL_PREVIEW_DEFAULT_WIDTH;
34
+ const panelEditorContext = (0, _react.useContext)(_context.PanelEditorContext);
33
35
  if (boxRef.current !== null) {
34
36
  width = boxRef.current.getBoundingClientRect().width;
37
+ panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
35
38
  }
36
39
  const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
37
40
  const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);