@perses-dev/dashboards 0.38.0 → 0.39.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 (78) hide show
  1. package/dist/cjs/components/Dashboard/Dashboard.js +3 -2
  2. package/dist/cjs/components/GridLayout/GridItemContent.js +3 -1
  3. package/dist/cjs/components/GridLayout/GridLayout.js +1 -0
  4. package/dist/cjs/components/Panel/Panel.js +8 -3
  5. package/dist/cjs/components/Panel/PanelHeader.js +7 -3
  6. package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js +3 -1
  7. package/dist/cjs/components/Variables/EditVariablesButton.js +2 -0
  8. package/dist/cjs/components/Variables/TemplateVariable.js +20 -16
  9. package/dist/cjs/components/Variables/VariableEditor.js +255 -94
  10. package/dist/cjs/components/Variables/VariableList.js +38 -18
  11. package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js +71 -24
  12. package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js +55 -5
  13. package/dist/cjs/context/TemplateVariableProvider/utils.js +39 -7
  14. package/dist/cjs/test/render.js +1 -1
  15. package/dist/cjs/views/ViewDashboard/DashboardApp.js +6 -1
  16. package/dist/cjs/views/ViewDashboard/ViewDashboard.js +4 -3
  17. package/dist/components/Dashboard/Dashboard.d.ts +3 -1
  18. package/dist/components/Dashboard/Dashboard.d.ts.map +1 -1
  19. package/dist/components/Dashboard/Dashboard.js +3 -2
  20. package/dist/components/Dashboard/Dashboard.js.map +1 -1
  21. package/dist/components/GridLayout/GridItemContent.d.ts +2 -0
  22. package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
  23. package/dist/components/GridLayout/GridItemContent.js +3 -1
  24. package/dist/components/GridLayout/GridItemContent.js.map +1 -1
  25. package/dist/components/GridLayout/GridLayout.d.ts +2 -0
  26. package/dist/components/GridLayout/GridLayout.d.ts.map +1 -1
  27. package/dist/components/GridLayout/GridLayout.js +1 -0
  28. package/dist/components/GridLayout/GridLayout.js.map +1 -1
  29. package/dist/components/Panel/Panel.d.ts +20 -0
  30. package/dist/components/Panel/Panel.d.ts.map +1 -1
  31. package/dist/components/Panel/Panel.js +8 -3
  32. package/dist/components/Panel/Panel.js.map +1 -1
  33. package/dist/components/Panel/PanelHeader.d.ts +2 -1
  34. package/dist/components/Panel/PanelHeader.d.ts.map +1 -1
  35. package/dist/components/Panel/PanelHeader.js +7 -3
  36. package/dist/components/Panel/PanelHeader.js.map +1 -1
  37. package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
  38. package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
  39. package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts.map +1 -1
  40. package/dist/components/SaveDashboardButton/SaveDashboardButton.js +3 -1
  41. package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map +1 -1
  42. package/dist/components/Variables/EditVariablesButton.d.ts.map +1 -1
  43. package/dist/components/Variables/EditVariablesButton.js +3 -1
  44. package/dist/components/Variables/EditVariablesButton.js.map +1 -1
  45. package/dist/components/Variables/TemplateVariable.d.ts +2 -1
  46. package/dist/components/Variables/TemplateVariable.d.ts.map +1 -1
  47. package/dist/components/Variables/TemplateVariable.js +20 -16
  48. package/dist/components/Variables/TemplateVariable.js.map +1 -1
  49. package/dist/components/Variables/VariableEditor.d.ts +7 -0
  50. package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
  51. package/dist/components/Variables/VariableEditor.js +247 -92
  52. package/dist/components/Variables/VariableEditor.js.map +1 -1
  53. package/dist/components/Variables/VariableList.d.ts +5 -0
  54. package/dist/components/Variables/VariableList.d.ts.map +1 -1
  55. package/dist/components/Variables/VariableList.js +31 -17
  56. package/dist/components/Variables/VariableList.js.map +1 -1
  57. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts +39 -10
  58. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map +1 -1
  59. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js +76 -27
  60. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map +1 -1
  61. package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts +9 -2
  62. package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts.map +1 -1
  63. package/dist/context/TemplateVariableProvider/hydrationUtils.js +60 -5
  64. package/dist/context/TemplateVariableProvider/hydrationUtils.js.map +1 -1
  65. package/dist/context/TemplateVariableProvider/utils.d.ts +27 -2
  66. package/dist/context/TemplateVariableProvider/utils.d.ts.map +1 -1
  67. package/dist/context/TemplateVariableProvider/utils.js +46 -4
  68. package/dist/context/TemplateVariableProvider/utils.js.map +1 -1
  69. package/dist/test/render.js +2 -2
  70. package/dist/test/render.js.map +1 -1
  71. package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
  72. package/dist/views/ViewDashboard/DashboardApp.js +7 -2
  73. package/dist/views/ViewDashboard/DashboardApp.js.map +1 -1
  74. package/dist/views/ViewDashboard/ViewDashboard.d.ts +2 -1
  75. package/dist/views/ViewDashboard/ViewDashboard.d.ts.map +1 -1
  76. package/dist/views/ViewDashboard/ViewDashboard.js +4 -3
  77. package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -1
  78. package/package.json +6 -6
package/dist/cjs/components/Variables/VariableEditor.js CHANGED
@@ -14,9 +14,15 @@
14
14
  Object.defineProperty(exports, "__esModule", {
15
15
  value: true
16
16
  });
17
- Object.defineProperty(exports, "VariableEditor", {
18
- enumerable: true,
19
- get: ()=>VariableEditor
17
+ function _export(target, all) {
18
+ for(var name in all)Object.defineProperty(target, name, {
19
+ enumerable: true,
20
+ get: all[name]
21
+ });
22
+ }
23
+ _export(exports, {
24
+ VariableEditor: ()=>VariableEditor,
25
+ VariableName: ()=>VariableName
20
26
  });
21
27
  const _jsxRuntime = require("react/jsx-runtime");
22
28
  const _react = require("react");
@@ -27,8 +33,10 @@ const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pe
27
33
  const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
28
34
  const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
29
35
  const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
36
+ const _contentDuplicate = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentDuplicate"));
30
37
  const _pluginSystem = require("@perses-dev/plugin-system");
31
38
  const _context = require("../../context");
39
+ const _hydrationUtils = require("../../context/TemplateVariableProvider/hydrationUtils");
32
40
  function _interopRequireDefault(obj) {
33
41
  return obj && obj.__esModule ? obj : {
34
42
  default: obj
@@ -54,9 +62,18 @@ function VariableEditor(props) {
54
62
  const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
55
63
  const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
56
64
  const [variableFormAction, setVariableFormAction] = (0, _react.useState)('update');
65
+ const externalVariableDefinitions = props.externalVariableDefinitions;
57
66
  const validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
58
67
  variableDefinitions
59
68
  ]);
69
+ const [variableState] = (0, _react.useMemo)(()=>{
70
+ return [
71
+ (0, _hydrationUtils.hydrateTemplateVariableStates)(variableDefinitions, {}, externalVariableDefinitions)
72
+ ];
73
+ }, [
74
+ externalVariableDefinitions,
75
+ variableDefinitions
76
+ ]);
60
77
  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
61
78
  const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
62
79
  const handleCancel = ()=>{
@@ -133,7 +150,12 @@ function VariableEditor(props) {
133
150
  }
134
151
  });
135
152
  };
136
- var ref;
153
+ const overrideVariable = (v)=>{
154
+ setVariableDefinitions((draft)=>{
155
+ draft.push(v);
156
+ });
157
+ };
158
+ var ref, ref1;
137
159
  return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
138
160
  children: [
139
161
  currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.VariableEditForm, {
@@ -164,7 +186,7 @@ function VariableEditor(props) {
164
186
  children: [
165
187
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
166
188
  variant: "h2",
167
- children: "Variables"
189
+ children: "Dashboard Variables"
168
190
  }),
169
191
  /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
170
192
  direction: "row",
@@ -189,113 +211,226 @@ function VariableEditor(props) {
189
211
  })
190
212
  ]
191
213
  }),
192
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
214
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
193
215
  padding: 2,
194
216
  sx: {
195
217
  overflowY: 'scroll'
196
218
  },
197
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
198
- spacing: 2,
199
- children: [
200
- !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
201
- severity: "error",
202
- children: error
203
- }, error)),
204
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
205
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
206
- sx: {
207
- minWidth: 650
208
- },
209
- "aria-label": "table of variables",
210
- children: [
211
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
212
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
213
- children: [
214
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
215
- children: "Visibility"
216
- }),
217
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
218
- children: "Name"
219
- }),
220
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
221
- children: "Type"
222
- }),
223
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
224
- align: "right"
225
- })
226
- ]
227
- })
228
- }),
229
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
230
- children: variableDefinitions.map((v, idx)=>{
231
- var ref1;
232
- /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
219
+ children: [
220
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
221
+ spacing: 2,
222
+ children: [
223
+ !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
224
+ severity: "error",
225
+ children: error
226
+ }, error)),
227
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
228
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
229
+ sx: {
230
+ minWidth: 650
231
+ },
232
+ "aria-label": "table of variables",
233
+ children: [
234
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
235
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
233
236
  children: [
234
237
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
235
- component: "th",
236
- scope: "row",
237
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
238
- checked: ((ref1 = v.spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) !== true,
239
- onChange: (e)=>{
240
- toggleVariableVisibility(idx, e.target.checked);
241
- }
242
- })
238
+ children: "Visibility"
243
239
  }),
244
240
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
245
- component: "th",
246
- scope: "row",
247
- sx: {
248
- fontWeight: 'bold'
249
- },
250
- children: v.spec.name
241
+ children: "Name"
251
242
  }),
252
243
  /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
253
- children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
244
+ children: "Type"
254
245
  }),
255
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
256
- align: "right",
246
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
247
+ align: "right"
248
+ })
249
+ ]
250
+ })
251
+ }),
252
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
253
+ children: variableDefinitions.map((v, idx)=>{
254
+ var ref1;
255
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
256
+ children: [
257
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
258
+ component: "th",
259
+ scope: "row",
260
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
261
+ checked: ((ref1 = v.spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) !== true,
262
+ onChange: (e)=>{
263
+ toggleVariableVisibility(idx, e.target.checked);
264
+ }
265
+ })
266
+ }),
267
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
268
+ component: "th",
269
+ scope: "row",
270
+ sx: {
271
+ fontWeight: 'bold'
272
+ },
273
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableName, {
274
+ name: v.spec.name,
275
+ state: variableState.get({
276
+ name: v.spec.name
277
+ })
278
+ })
279
+ }),
280
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
281
+ children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
282
+ }),
283
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
284
+ align: "right",
285
+ children: [
286
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
287
+ onClick: ()=>changeVariableOrder(idx, 'up'),
288
+ disabled: idx === 0,
289
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
290
+ }),
291
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
292
+ onClick: ()=>changeVariableOrder(idx, 'down'),
293
+ disabled: idx === variableDefinitions.length - 1,
294
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
295
+ }),
296
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
297
+ onClick: ()=>editVariable(idx),
298
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
299
+ }),
300
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
301
+ onClick: ()=>removeVariable(idx),
302
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
303
+ })
304
+ ]
305
+ })
306
+ ]
307
+ }, v.spec.name);
308
+ })
309
+ })
310
+ ]
311
+ })
312
+ }),
313
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
314
+ display: "flex",
315
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
316
+ variant: "contained",
317
+ startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
318
+ sx: {
319
+ marginLeft: 'auto'
320
+ },
321
+ onClick: addVariable,
322
+ children: "Add Variable"
323
+ })
324
+ })
325
+ ]
326
+ }),
327
+ externalVariableDefinitions.map((extVar)=>{
328
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.Stack, {
329
+ children: [
330
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
331
+ variant: "h2",
332
+ children: [
333
+ (0, _material.capitalize)(extVar.source),
334
+ " Variables"
335
+ ]
336
+ }),
337
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
338
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
339
+ sx: {
340
+ minWidth: 650
341
+ },
342
+ "aria-label": "table of variables",
343
+ children: [
344
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
345
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
346
+ children: [
347
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
348
+ children: "Visibility"
349
+ }),
350
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
351
+ children: "Name"
352
+ }),
353
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
354
+ children: "Type"
355
+ }),
356
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
357
+ align: "right"
358
+ })
359
+ ]
360
+ })
361
+ }),
362
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
363
+ children: extVar.definitions.map((v)=>{
364
+ var ref;
365
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
257
366
  children: [
258
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
259
- onClick: ()=>changeVariableOrder(idx, 'up'),
260
- disabled: idx === 0,
261
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
367
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
368
+ component: "th",
369
+ scope: "row",
370
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
371
+ checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
372
+ disabled: true
373
+ })
262
374
  }),
263
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
264
- onClick: ()=>changeVariableOrder(idx, 'down'),
265
- disabled: idx === variableDefinitions.length - 1,
266
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
375
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
376
+ component: "th",
377
+ scope: "row",
378
+ sx: {
379
+ fontWeight: 'bold'
380
+ },
381
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableName, {
382
+ name: v.spec.name,
383
+ state: variableState.get({
384
+ name: v.spec.name,
385
+ source: extVar.source
386
+ })
387
+ })
267
388
  }),
268
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
269
- onClick: ()=>editVariable(idx),
270
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
389
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
390
+ children: (ref1 = getVariableLabelByKind(v.kind)) !== null && ref1 !== void 0 ? ref1 : v.kind
271
391
  }),
272
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
273
- onClick: ()=>removeVariable(idx),
274
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
392
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(TableCell, {
393
+ align: "right",
394
+ children: [
395
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
396
+ title: "Override",
397
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
398
+ onClick: ()=>overrideVariable(v),
399
+ disabled: !!variableState.get({
400
+ name: v.spec.name
401
+ }),
402
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_contentDuplicate.default, {})
403
+ })
404
+ }),
405
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
406
+ disabled: true,
407
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
408
+ }),
409
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
410
+ disabled: true,
411
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
412
+ }),
413
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
414
+ disabled: true,
415
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
416
+ }),
417
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
418
+ disabled: true,
419
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
420
+ })
421
+ ]
275
422
  })
276
423
  ]
277
- })
278
- ]
279
- }, v.spec.name);
280
- })
424
+ }, v.spec.name);
425
+ })
426
+ })
427
+ ]
281
428
  })
282
- ]
283
- })
284
- }),
285
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
286
- display: "flex",
287
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
288
- variant: "contained",
289
- startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
290
- sx: {
291
- marginLeft: 'auto'
292
- },
293
- onClick: addVariable,
294
- children: "Add Variable"
295
- })
296
- })
297
- ]
298
- })
429
+ })
430
+ ]
431
+ }, extVar.source);
432
+ })
433
+ ]
299
434
  })
300
435
  ]
301
436
  })
@@ -305,3 +440,29 @@ function VariableEditor(props) {
305
440
  const TableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
306
441
  borderBottom: `solid 1px ${theme.palette.divider}`
307
442
  }));
443
+ function VariableName(props) {
444
+ const { name , state } = props;
445
+ return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
446
+ children: [
447
+ !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,
448
+ !(state === null || state === void 0 ? void 0 : state.overridden) && (state === null || state === void 0 ? void 0 : state.overriding) && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
449
+ fontWeight: "normal",
450
+ color: (theme)=>theme.palette.primary.main,
451
+ children: "(overriding)"
452
+ }),
453
+ (state === null || state === void 0 ? void 0 : state.overridden) && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
454
+ children: [
455
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
456
+ color: (theme)=>theme.palette.grey[500],
457
+ children: name
458
+ }),
459
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
460
+ fontWeight: "normal",
461
+ color: (theme)=>theme.palette.grey[500],
462
+ children: "(overridden)"
463
+ })
464
+ ]
465
+ })
466
+ ]
467
+ });
468
+ }
package/dist/cjs/components/Variables/VariableList.js CHANGED
@@ -14,9 +14,15 @@
14
14
  Object.defineProperty(exports, "__esModule", {
15
15
  value: true
16
16
  });
17
- Object.defineProperty(exports, "TemplateVariableList", {
18
- enumerable: true,
19
- get: ()=>TemplateVariableList
17
+ function _export(target, all) {
18
+ for(var name in all)Object.defineProperty(target, name, {
19
+ enumerable: true,
20
+ get: all[name]
21
+ });
22
+ }
23
+ _export(exports, {
24
+ TemplateVariableList: ()=>TemplateVariableList,
25
+ TemplateVariableListItem: ()=>TemplateVariableListItem
20
26
  });
21
27
  const _jsxRuntime = require("react/jsx-runtime");
22
28
  const _material = require("@mui/material");
@@ -26,20 +32,34 @@ const VARIABLE_INPUT_MIN_WIDTH = '120px';
26
32
  const VARIABLE_INPUT_MAX_WIDTH = '240px';
27
33
  function TemplateVariableList() {
28
34
  const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
29
- return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
30
- children: variableDefinitions.map((v)=>{
31
- var ref;
32
- /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
33
- display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
34
- minWidth: VARIABLE_INPUT_MIN_WIDTH,
35
- maxWidth: VARIABLE_INPUT_MAX_WIDTH,
36
- marginBottom: 1,
37
- marginRight: 1,
38
- "data-testid": "template-variable",
39
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_templateVariable.TemplateVariable, {
40
- name: v.spec.name
41
- }, v.spec.name)
42
- }, v.spec.name);
43
- })
35
+ const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
36
+ return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
37
+ children: [
38
+ externalVariableDefinitions.slice().reverse() // We reverse to have the most prioritized on top
39
+ .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableListItem, {
40
+ spec: v.spec,
41
+ source: def.source
42
+ }, v.spec.name + def.source))),
43
+ variableDefinitions.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableListItem, {
44
+ spec: v.spec
45
+ }, v.spec.name))
46
+ ]
44
47
  });
45
48
  }
49
+ function TemplateVariableListItem({ spec , source }) {
50
+ var ref, ref1;
51
+ const ctx = (0, _context.useTemplateVariable)(spec.name, source);
52
+ var ref2, ref3;
53
+ return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
54
+ display: ((ref = ctx.state) === null || ref === void 0 ? void 0 : ref.overridden) || ((ref1 = spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) ? 'none' : undefined,
55
+ minWidth: VARIABLE_INPUT_MIN_WIDTH,
56
+ maxWidth: VARIABLE_INPUT_MAX_WIDTH,
57
+ marginBottom: 1,
58
+ marginRight: 1,
59
+ "data-testid": "template-variable",
60
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_templateVariable.TemplateVariable, {
61
+ name: spec.name,
62
+ source: source
63
+ }, (ref2 = spec.name + source) !== null && ref2 !== void 0 ? ref2 : '')
64
+ }, (ref3 = spec.name + source) !== null && ref3 !== void 0 ? ref3 : '');
65
+ }