@perses-dev/plugin-system 0.42.1 → 0.43.0-rc1

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 (36) hide show
  1. package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js +7 -9
  2. package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +217 -147
  3. package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js +3 -3
  4. package/dist/cjs/validation/index.js +1 -0
  5. package/dist/cjs/validation/role.js +4 -4
  6. package/dist/cjs/validation/rolebinding.js +7 -7
  7. package/dist/cjs/validation/secret.js +176 -0
  8. package/dist/cjs/validation/variable.js +23 -4
  9. package/dist/components/DatasourceEditorForm/DatasourceEditorForm.d.ts.map +1 -1
  10. package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js +7 -9
  11. package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map +1 -1
  12. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -1
  13. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +218 -148
  14. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -1
  15. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts +8 -21
  16. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts.map +1 -1
  17. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js +3 -3
  18. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map +1 -1
  19. package/dist/validation/index.d.ts +1 -0
  20. package/dist/validation/index.d.ts.map +1 -1
  21. package/dist/validation/index.js +1 -0
  22. package/dist/validation/index.js.map +1 -1
  23. package/dist/validation/role.d.ts +24 -24
  24. package/dist/validation/role.js +1 -1
  25. package/dist/validation/role.js.map +1 -1
  26. package/dist/validation/rolebinding.js +1 -1
  27. package/dist/validation/rolebinding.js.map +1 -1
  28. package/dist/validation/secret.d.ts +964 -0
  29. package/dist/validation/secret.d.ts.map +1 -0
  30. package/dist/validation/secret.js +157 -0
  31. package/dist/validation/secret.js.map +1 -0
  32. package/dist/validation/variable.d.ts +82 -5
  33. package/dist/validation/variable.d.ts.map +1 -1
  34. package/dist/validation/variable.js +21 -2
  35. package/dist/validation/variable.js.map +1 -1
  36. package/package.json +4 -4
package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js CHANGED
@@ -13,14 +13,14 @@
13
13
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
14
14
  import React, { useCallback, useMemo, useState } from 'react';
15
15
  import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Button, Stack, ClickAwayListener, Divider } from '@mui/material';
16
- import { useImmer } from 'use-immer';
17
16
  import { DiscardChangesConfirmationDialog, ErrorBoundary } from '@perses-dev/components';
18
17
  import { Controller, FormProvider, useForm } from 'react-hook-form';
19
18
  import { zodResolver } from '@hookform/resolvers/zod';
19
+ import { useImmer } from 'use-immer';
20
20
  import { getSubmitText, getTitleAction } from '../../../utils';
21
21
  import { VARIABLE_TYPES } from '../variable-model';
22
22
  import { PluginEditor } from '../../PluginEditor';
23
- import { variableEditValidationSchema } from '../../../validation';
23
+ import { variableEditorValidationSchema } from '../../../validation';
24
24
  import { VariableListPreview, VariablePreview } from './VariablePreview';
25
25
  import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
26
26
  function FallbackPreview() {
@@ -50,12 +50,17 @@ export function VariableEditorForm(props) {
50
50
  const titleAction = getTitleAction(action, isDraft);
51
51
  const submitText = getSubmitText(action, isDraft);
52
52
  const form = useForm({
53
- resolver: zodResolver(variableEditValidationSchema),
53
+ resolver: zodResolver(variableEditorValidationSchema),
54
54
  mode: 'onBlur',
55
- defaultValues: state
55
+ defaultValues: initialState
56
56
  });
57
57
  const processForm = ()=>{
58
- onSave(getVariableDefinitionFromState(state));
58
+ // reset display attributes to undefined when empty, because we don't want to save empty strings
59
+ onSave(getVariableDefinitionFromState({
60
+ ...state,
61
+ title: state.title === '' ? undefined : state.title,
62
+ description: state.description === '' ? undefined : state.description
63
+ }));
59
64
  };
60
65
  // When user click on cancel, several possibilities:
61
66
  // - create action: ask for discard approval
@@ -68,12 +73,11 @@ export function VariableEditorForm(props) {
68
73
  onClose();
69
74
  }
70
75
  }, [
71
- state,
72
76
  initialState,
73
- setDiscardDialogOpened,
77
+ state,
74
78
  onClose
75
79
  ]);
76
- var _state_textVariableFields_constant, _state_listVariableFields_capturingRegexp, _state_listVariableFields_sort;
80
+ var _state_title, _state_description, _state_listVariableFields_capturingRegexp, _state_listVariableFields_sort, _state_listVariableFields_customAllValue;
77
81
  return /*#__PURE__*/ _jsxs(FormProvider, {
78
82
  ...form,
79
83
  children: [
@@ -178,11 +182,12 @@ export function VariableEditorForm(props) {
178
182
  shrink: action === 'read' ? true : undefined
179
183
  },
180
184
  InputProps: {
181
- disabled: action === 'update',
185
+ disabled: action === 'update' && !isDraft,
182
186
  readOnly: action === 'read'
183
187
  },
184
188
  error: !!fieldState.error,
185
189
  helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
190
+ value: state.name,
186
191
  onChange: (event)=>{
187
192
  field.onChange(event);
188
193
  setState((draft)=>{
@@ -212,6 +217,7 @@ export function VariableEditorForm(props) {
212
217
  },
213
218
  error: !!fieldState.error,
214
219
  helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
220
+ value: (_state_title = state.title) !== null && _state_title !== void 0 ? _state_title : '',
215
221
  onChange: (event)=>{
216
222
  field.onChange(event);
217
223
  setState((draft)=>{
@@ -241,6 +247,7 @@ export function VariableEditorForm(props) {
241
247
  },
242
248
  error: !!fieldState.error,
243
249
  helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
250
+ value: (_state_description = state.description) !== null && _state_description !== void 0 ? _state_description : '',
244
251
  onChange: (event)=>{
245
252
  field.onChange(event);
246
253
  setState((draft)=>{
@@ -271,6 +278,7 @@ export function VariableEditorForm(props) {
271
278
  },
272
279
  error: !!fieldState.error,
273
280
  helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
281
+ value: state.kind,
274
282
  onChange: (event)=>{
275
283
  field.onChange(event);
276
284
  setState((draft)=>{
@@ -305,33 +313,49 @@ export function VariableEditorForm(props) {
305
313
  ]
306
314
  })
307
315
  }),
308
- /*#__PURE__*/ _jsx(TextField, {
309
- label: "Value",
310
- value: state.textVariableFields.value,
311
- InputLabelProps: {
312
- shrink: action === 'read' ? true : undefined
313
- },
314
- InputProps: {
315
- readOnly: action === 'read'
316
- },
317
- onChange: (v)=>{
318
- setState((draft)=>{
319
- draft.textVariableFields.value = v.target.value;
316
+ /*#__PURE__*/ _jsx(Controller, {
317
+ name: "textVariableFields.value",
318
+ render: ({ field , fieldState })=>{
319
+ var _fieldState_error;
320
+ /*#__PURE__*/ return _jsx(TextField, {
321
+ ...field,
322
+ label: "Value",
323
+ InputLabelProps: {
324
+ shrink: action === 'read' ? true : undefined
325
+ },
326
+ InputProps: {
327
+ readOnly: action === 'read'
328
+ },
329
+ error: !!fieldState.error,
330
+ helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
331
+ value: state.textVariableFields.value,
332
+ onChange: (event)=>{
333
+ field.onChange(event);
334
+ setState((draft)=>{
335
+ draft.textVariableFields.value = event.target.value;
336
+ });
337
+ }
320
338
  });
321
339
  }
322
340
  }),
323
- /*#__PURE__*/ _jsx(FormControlLabel, {
324
- control: /*#__PURE__*/ _jsx(Switch, {
325
- checked: (_state_textVariableFields_constant = state.textVariableFields.constant) !== null && _state_textVariableFields_constant !== void 0 ? _state_textVariableFields_constant : false,
326
- readOnly: action === 'read',
327
- onChange: (e)=>{
328
- if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
329
- setState((draft)=>{
330
- draft.textVariableFields.constant = e.target.checked;
331
- });
332
- }
333
- }),
334
- label: "Constant"
341
+ /*#__PURE__*/ _jsx(Controller, {
342
+ name: "textVariableFields.constant",
343
+ render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
344
+ label: "Constant",
345
+ control: /*#__PURE__*/ _jsx(Switch, {
346
+ ...field,
347
+ checked: !!field.value,
348
+ readOnly: action === 'read',
349
+ value: state.textVariableFields.constant,
350
+ onChange: (event)=>{
351
+ if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
352
+ field.onChange(event);
353
+ setState((draft)=>{
354
+ draft.textVariableFields.constant = event.target.checked;
355
+ });
356
+ }
357
+ })
358
+ })
335
359
  })
336
360
  ]
337
361
  })
@@ -368,89 +392,113 @@ export function VariableEditorForm(props) {
368
392
  onClickAway: ()=>refreshPreview(),
369
393
  children: /*#__PURE__*/ _jsx(Box, {})
370
394
  }),
371
- /*#__PURE__*/ _jsx(PluginEditor, {
372
- width: "100%",
373
- pluginType: "Variable",
374
- pluginKindLabel: "Source",
375
- value: state.listVariableFields.plugin,
376
- isReadonly: action === 'read',
377
- onChange: (val)=>{
378
- setState((draft)=>{
379
- draft.listVariableFields.plugin = val;
380
- });
381
- }
395
+ /*#__PURE__*/ _jsx(Controller, {
396
+ name: "listVariableFields.plugin",
397
+ render: ({ field })=>/*#__PURE__*/ _jsx(PluginEditor, {
398
+ width: "100%",
399
+ pluginType: "Variable",
400
+ pluginKindLabel: "Source",
401
+ isReadonly: action === 'read',
402
+ value: state.listVariableFields.plugin,
403
+ onChange: (val)=>{
404
+ field.onChange(val);
405
+ setState((draft)=>{
406
+ draft.listVariableFields.plugin = val;
407
+ });
408
+ }
409
+ })
382
410
  })
383
411
  ]
384
412
  }),
385
413
  /*#__PURE__*/ _jsx(Stack, {
386
- children: /*#__PURE__*/ _jsx(TextField, {
387
- label: "Capturing Regexp Filter",
388
- value: (_state_listVariableFields_capturingRegexp = state.listVariableFields.capturingRegexp) !== null && _state_listVariableFields_capturingRegexp !== void 0 ? _state_listVariableFields_capturingRegexp : '',
389
- InputLabelProps: {
390
- shrink: action === 'read' ? true : undefined
391
- },
392
- InputProps: {
393
- readOnly: action === 'read'
394
- },
395
- onChange: (e)=>{
396
- setState((draft)=>{
397
- if (e.target.value) {
398
- // TODO: do a better fix, if empty string => it should skip the filter
399
- draft.listVariableFields.capturingRegexp = e.target.value;
400
- } else {
401
- draft.listVariableFields.capturingRegexp = undefined;
402
- }
414
+ children: /*#__PURE__*/ _jsx(Controller, {
415
+ name: "listVariableFields.capturingRegexp",
416
+ render: ({ field , fieldState })=>{
417
+ var _fieldState_error;
418
+ /*#__PURE__*/ return _jsx(TextField, {
419
+ ...field,
420
+ label: "Capturing Regexp Filter",
421
+ InputLabelProps: {
422
+ shrink: action === 'read' ? true : undefined
423
+ },
424
+ InputProps: {
425
+ readOnly: action === 'read'
426
+ },
427
+ error: !!fieldState.error,
428
+ value: (_state_listVariableFields_capturingRegexp = state.listVariableFields.capturingRegexp) !== null && _state_listVariableFields_capturingRegexp !== void 0 ? _state_listVariableFields_capturingRegexp : '',
429
+ onChange: (event)=>{
430
+ field.onChange(event);
431
+ setState((draft)=>{
432
+ if (event.target.value) {
433
+ // TODO: do a better fix, if empty string => it should skip the filter
434
+ draft.listVariableFields.capturingRegexp = event.target.value;
435
+ } else {
436
+ draft.listVariableFields.capturingRegexp = undefined;
437
+ }
438
+ });
439
+ },
440
+ helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
403
441
  });
404
- },
405
- helperText: "Optional, if you want to filter on captured result."
442
+ }
406
443
  })
407
444
  }),
408
445
  /*#__PURE__*/ _jsx(Stack, {
409
- children: /*#__PURE__*/ _jsxs(TextField, {
410
- select: true,
411
- label: "Sort",
412
- value: (_state_listVariableFields_sort = state.listVariableFields.sort) !== null && _state_listVariableFields_sort !== void 0 ? _state_listVariableFields_sort : '',
413
- InputLabelProps: {
414
- shrink: action === 'read' ? true : undefined
415
- },
416
- InputProps: {
417
- readOnly: isReadonly
418
- },
419
- onChange: (e)=>{
420
- setState((draft)=>{
421
- draft.listVariableFields.sort = e.target.value;
446
+ children: /*#__PURE__*/ _jsx(Controller, {
447
+ name: "listVariableFields.sort",
448
+ render: ({ field , fieldState })=>{
449
+ var _fieldState_error;
450
+ /*#__PURE__*/ return _jsxs(TextField, {
451
+ select: true,
452
+ ...field,
453
+ fullWidth: true,
454
+ label: "Sort",
455
+ InputLabelProps: {
456
+ shrink: action === 'read' ? true : undefined
457
+ },
458
+ InputProps: {
459
+ readOnly: action === 'read'
460
+ },
461
+ error: !!fieldState.error,
462
+ helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
463
+ value: (_state_listVariableFields_sort = state.listVariableFields.sort) !== null && _state_listVariableFields_sort !== void 0 ? _state_listVariableFields_sort : 'none',
464
+ onChange: (event)=>{
465
+ field.onChange(event);
466
+ setState((draft)=>{
467
+ draft.listVariableFields.sort = event.target.value;
468
+ });
469
+ },
470
+ children: [
471
+ /*#__PURE__*/ _jsx(MenuItem, {
472
+ value: "none",
473
+ children: "None"
474
+ }),
475
+ /*#__PURE__*/ _jsx(MenuItem, {
476
+ value: "alphabetical-asc",
477
+ children: "Alphabetical, asc"
478
+ }),
479
+ /*#__PURE__*/ _jsx(MenuItem, {
480
+ value: "alphabetical-desc",
481
+ children: "Alphabetical, desc"
482
+ }),
483
+ /*#__PURE__*/ _jsx(MenuItem, {
484
+ value: "numerical-asc",
485
+ children: "Numerical, asc"
486
+ }),
487
+ /*#__PURE__*/ _jsx(MenuItem, {
488
+ value: "numerical-desc",
489
+ children: "Numerical, desc"
490
+ }),
491
+ /*#__PURE__*/ _jsx(MenuItem, {
492
+ value: "alphabetical-ci-asc",
493
+ children: "Alphabetical, case-insensitive, asc"
494
+ }),
495
+ /*#__PURE__*/ _jsx(MenuItem, {
496
+ value: "alphabetical-ci-desc",
497
+ children: "Alphabetical, case-insensitive, desc"
498
+ })
499
+ ]
422
500
  });
423
- },
424
- children: [
425
- /*#__PURE__*/ _jsx(MenuItem, {
426
- value: "none",
427
- children: "None"
428
- }),
429
- /*#__PURE__*/ _jsx(MenuItem, {
430
- value: "alphabetical-asc",
431
- children: "Alphabetical, asc"
432
- }),
433
- /*#__PURE__*/ _jsx(MenuItem, {
434
- value: "alphabetical-desc",
435
- children: "Alphabetical, desc"
436
- }),
437
- /*#__PURE__*/ _jsx(MenuItem, {
438
- value: "numerical-asc",
439
- children: "Numerical, asc"
440
- }),
441
- /*#__PURE__*/ _jsx(MenuItem, {
442
- value: "numerical-desc",
443
- children: "Numerical, desc"
444
- }),
445
- /*#__PURE__*/ _jsx(MenuItem, {
446
- value: "alphabetical-ci-asc",
447
- children: "Alphabetical, case-insensitive, asc"
448
- }),
449
- /*#__PURE__*/ _jsx(MenuItem, {
450
- value: "alphabetical-ci-desc",
451
- children: "Alphabetical, case-insensitive, desc"
452
- })
453
- ]
501
+ }
454
502
  })
455
503
  })
456
504
  ]
@@ -466,18 +514,24 @@ export function VariableEditorForm(props) {
466
514
  children: [
467
515
  /*#__PURE__*/ _jsxs(Stack, {
468
516
  children: [
469
- /*#__PURE__*/ _jsx(FormControlLabel, {
470
- control: /*#__PURE__*/ _jsx(Switch, {
471
- checked: state.listVariableFields.allowMultiple,
472
- readOnly: action === 'read',
473
- onChange: (e)=>{
474
- if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
475
- setState((draft)=>{
476
- draft.listVariableFields.allowMultiple = e.target.checked;
477
- });
478
- }
479
- }),
480
- label: "Allow Multiple Values"
517
+ /*#__PURE__*/ _jsx(Controller, {
518
+ name: "listVariableFields.allowMultiple",
519
+ render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
520
+ label: "Allow Multiple Values",
521
+ control: /*#__PURE__*/ _jsx(Switch, {
522
+ ...field,
523
+ checked: !!field.value,
524
+ readOnly: action === 'read',
525
+ value: state.listVariableFields.allowMultiple,
526
+ onChange: (event)=>{
527
+ if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
528
+ field.onChange(event);
529
+ setState((draft)=>{
530
+ draft.listVariableFields.allowMultiple = event.target.checked;
531
+ });
532
+ }
533
+ })
534
+ })
481
535
  }),
482
536
  /*#__PURE__*/ _jsx(Typography, {
483
537
  variant: "caption",
@@ -487,43 +541,59 @@ export function VariableEditorForm(props) {
487
541
  }),
488
542
  /*#__PURE__*/ _jsxs(Stack, {
489
543
  children: [
490
- /*#__PURE__*/ _jsx(FormControlLabel, {
491
- control: /*#__PURE__*/ _jsx(Switch, {
492
- checked: state.listVariableFields.allowAll,
493
- readOnly: action === 'read',
494
- onChange: (e)=>{
495
- if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
496
- setState((draft)=>{
497
- draft.listVariableFields.allowAll = e.target.checked;
498
- });
499
- }
500
- }),
501
- label: "Allow All option"
544
+ /*#__PURE__*/ _jsx(Controller, {
545
+ name: "listVariableFields.allowAllValue",
546
+ render: ({ field })=>/*#__PURE__*/ _jsx(FormControlLabel, {
547
+ label: "Allow All option",
548
+ control: /*#__PURE__*/ _jsx(Switch, {
549
+ ...field,
550
+ checked: !!field.value,
551
+ readOnly: action === 'read',
552
+ value: state.listVariableFields.allowAllValue,
553
+ onChange: (event)=>{
554
+ if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
555
+ field.onChange(event);
556
+ setState((draft)=>{
557
+ draft.listVariableFields.allowAllValue = event.target.checked;
558
+ });
559
+ }
560
+ })
561
+ })
502
562
  }),
503
563
  /*#__PURE__*/ _jsx(Typography, {
504
564
  mb: 1,
505
565
  variant: "caption",
506
566
  children: "Enables an option to include all variable values"
507
567
  }),
508
- state.listVariableFields.allowAll && /*#__PURE__*/ _jsx(TextField, {
509
- label: "Custom All Value",
510
- value: state.listVariableFields.customAllValue,
511
- InputLabelProps: {
512
- shrink: action === 'read' ? true : undefined
513
- },
514
- InputProps: {
515
- readOnly: action === 'read'
516
- },
517
- onChange: (e)=>{
518
- setState((draft)=>{
519
- if (e.target.value) {
520
- draft.listVariableFields.customAllValue = e.target.value;
521
- } else {
522
- draft.listVariableFields.customAllValue = undefined;
568
+ state.listVariableFields.allowAllValue && /*#__PURE__*/ _jsx(Controller, {
569
+ name: "listVariableFields.customAllValue",
570
+ render: ({ field , fieldState })=>{
571
+ var _fieldState_error;
572
+ /*#__PURE__*/ return _jsx(TextField, {
573
+ ...field,
574
+ fullWidth: true,
575
+ label: "Custom All Value",
576
+ InputLabelProps: {
577
+ shrink: action === 'read' ? true : undefined
578
+ },
579
+ InputProps: {
580
+ readOnly: action === 'read'
581
+ },
582
+ error: !!fieldState.error,
583
+ helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'When All is selected, this value will be used',
584
+ value: (_state_listVariableFields_customAllValue = state.listVariableFields.customAllValue) !== null && _state_listVariableFields_customAllValue !== void 0 ? _state_listVariableFields_customAllValue : '',
585
+ onChange: (event)=>{
586
+ field.onChange(event);
587
+ setState((draft)=>{
588
+ if (event.target.value) {
589
+ draft.listVariableFields.customAllValue = event.target.value;
590
+ } else {
591
+ draft.listVariableFields.customAllValue = undefined;
592
+ }
593
+ });
523
594
  }
524
595
  });
525
- },
526
- helperText: "When All is selected, this value will be used"
596
+ }
527
597
  })
528
598
  ]
529
599
  })