@perses-dev/plugin-system 0.55.0-beta.2 → 0.55.0-beta.6

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -1,613 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "VariableEditorForm", {
-    enumerable: true,
-    get: function() {
-        return VariableEditorForm;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
-const _reacthookform = require("react-hook-form");
-const _zod = require("@hookform/resolvers/zod");
-const _reactquery = require("@tanstack/react-query");
-const _PluginEditor = require("../../PluginEditor");
-const _context = require("../../../context");
-const _variablemodel = require("../variable-model");
-const _VariablePreview = require("./VariablePreview");
-const _variableeditorformmodel = require("./variable-editor-form-model");
-function FallbackPreview() {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        children: "Error previewing values"
-    });
-}
-function TextVariableEditorForm({ action, control }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                py: 1,
-                variant: "subtitle1",
-                children: "Text Options"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                spacing: 2,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        control: control,
-                        name: "spec.value",
-                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
-                                            values: [
-                                                field.value
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                        ...field,
-                                        label: "Value",
-                                        InputLabelProps: {
-                                            shrink: action === 'read' ? true : undefined
-                                        },
-                                        InputProps: {
-                                            readOnly: action === 'read'
-                                        },
-                                        error: !!fieldState.error,
-                                        helperText: fieldState.error?.message,
-                                        value: field.value ?? '',
-                                        onChange: (event)=>{
-                                            field.onChange(event);
-                                        }
-                                    })
-                                ]
-                            })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        control: control,
-                        name: "spec.constant",
-                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                label: "Constant",
-                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                    ...field,
-                                    checked: !!field.value,
-                                    readOnly: action === 'read',
-                                    value: field.value ?? false,
-                                    onChange: (event)=>{
-                                        if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                        field.onChange(event);
-                                    }
-                                })
-                            })
-                    })
-                ]
-            })
-        ]
-    });
-}
-function ListVariableEditorForm({ action, control }) {
-    const form = (0, _reacthookform.useFormContext)();
-    const queryClient = (0, _reactquery.useQueryClient)();
-    const values = form.getValues();
-    /* We use `previewDefinition` to explicitly update the spec
-   * that will be used for preview when running query. The reason why we do this is to avoid
-   * having to re-fetch the values when the user is still editing the spec.
-   * Using structuredClone to not have reference issues with nested objects.
-   */ const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(structuredClone(values));
-    const handleRunQuery = (0, _react.useCallback)(async ()=>{
-        if (JSON.stringify(previewDefinition) === JSON.stringify(values)) {
-            await queryClient.invalidateQueries({
-                queryKey: [
-                    'variable',
-                    previewDefinition
-                ]
-            });
-        } else {
-            setPreviewDefinition(structuredClone(values));
-        }
-    }, [
-        previewDefinition,
-        queryClient,
-        values
-    ]);
-    const plugin = (0, _reacthookform.useWatch)({
-        control,
-        name: 'spec.plugin'
-    });
-    const kind = plugin?.kind;
-    const pluginSpec = plugin?.spec;
-    const _allowAllValue = (0, _reacthookform.useWatch)({
-        control: control,
-        name: 'spec.allowAllValue'
-    });
-    const _customAllValue = (0, _reacthookform.useWatch)({
-        control: control,
-        name: 'spec.customAllValue'
-    });
-    const sortMethod = (0, _reacthookform.useWatch)({
-        control: control,
-        name: 'spec.sort'
-    });
-    // When variable kind is selected we need to provide default values
-    // TODO: check if react-hook-form has a better way to do this
-    if (values.spec.allowAllValue === undefined) {
-        form.setValue('spec.allowAllValue', false);
-    }
-    if (values.spec.allowMultiple === undefined) {
-        form.setValue('spec.allowMultiple', false);
-    }
-    if (!values.spec.plugin) {
-        form.setValue('spec.plugin', {
-            kind: 'StaticListVariable',
-            spec: {}
-        });
-    }
-    if (!values.spec.sort) {
-        form.setValue('spec.sort', 'none');
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                py: 1,
-                variant: "subtitle1",
-                children: "List Options"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                spacing: 2,
-                mb: 2,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: FallbackPreview,
-                            resetKeys: [
-                                previewDefinition
-                            ],
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
-                                sortMethod: sortMethod,
-                                definition: previewDefinition
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                control: control,
-                                name: "spec.plugin",
-                                render: ({ field })=>{
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
-                                        withRunQueryButton: true,
-                                        width: "100%",
-                                        pluginTypes: [
-                                            'Variable'
-                                        ],
-                                        pluginKindLabel: "Source",
-                                        value: {
-                                            selection: {
-                                                type: 'Variable',
-                                                kind: kind ?? 'StaticListVariable'
-                                            },
-                                            spec: pluginSpec ?? {}
-                                        },
-                                        isReadonly: action === 'read',
-                                        onChange: (v)=>{
-                                            field.onChange({
-                                                kind: v.selection.kind,
-                                                spec: v.spec
-                                            });
-                                        },
-                                        onRunQuery: handleRunQuery
-                                    });
-                                }
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                            control: control,
-                            name: "spec.capturingRegexp",
-                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                    ...field,
-                                    label: "Capturing Regexp Filter",
-                                    InputLabelProps: {
-                                        shrink: action === 'read' ? true : undefined
-                                    },
-                                    InputProps: {
-                                        readOnly: action === 'read'
-                                    },
-                                    error: !!fieldState.error,
-                                    value: field.value ?? '',
-                                    onChange: (event)=>{
-                                        if (event.target.value === '') {
-                                            field.onChange(undefined);
-                                        } else {
-                                            field.onChange(event);
-                                        }
-                                    },
-                                    helperText: fieldState.error?.message ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
-                                })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                            control: control,
-                            name: "spec.sort",
-                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                    select: true,
-                                    ...field,
-                                    fullWidth: true,
-                                    label: "Sort",
-                                    InputLabelProps: {
-                                        shrink: action === 'read' ? true : undefined
-                                    },
-                                    InputProps: {
-                                        readOnly: action === 'read'
-                                    },
-                                    error: !!fieldState.error,
-                                    helperText: fieldState.error?.message,
-                                    value: field.value ?? 'none',
-                                    onChange: (event)=>{
-                                        field.onChange(event);
-                                    },
-                                    children: Object.keys(_variableeditorformmodel.SORT_METHODS).map((key)=>{
-                                        if (!_variableeditorformmodel.SORT_METHODS[key]) return null;
-                                        const { label } = _variableeditorformmodel.SORT_METHODS[key];
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: key,
-                                            children: label
-                                        }, key);
-                                    })
-                                })
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                py: 1,
-                variant: "subtitle1",
-                children: "Dropdown Options"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                spacing: "2",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                control: control,
-                                name: "spec.allowMultiple",
-                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                        label: "Allow Multiple Values",
-                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                            ...field,
-                                            checked: !!field.value,
-                                            readOnly: action === 'read',
-                                            value: field.value ?? false,
-                                            onChange: (event)=>{
-                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                                field.onChange(event);
-                                            }
-                                        })
-                                    })
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                variant: "caption",
-                                children: "Enables multiple values to be selected at the same time"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                control: control,
-                                name: "spec.allowAllValue",
-                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                        label: "Allow All option",
-                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                            ...field,
-                                            checked: !!field.value,
-                                            readOnly: action === 'read',
-                                            value: field.value ?? false,
-                                            onChange: (event)=>{
-                                                if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
-                                                field.onChange(event);
-                                            }
-                                        })
-                                    })
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                mb: 1,
-                                variant: "caption",
-                                children: "Enables an option to include all variable values"
-                            }),
-                            _allowAllValue && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                spacing: 1,
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                        label: "Use Custom All Value",
-                                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                            checked: _customAllValue !== undefined,
-                                            readOnly: action === 'read',
-                                            onChange: (event)=>{
-                                                if (action === 'read') return;
-                                                const isEnabled = event.target.checked;
-                                                if (isEnabled) {
-                                                    form.setValue('spec.customAllValue', '');
-                                                } else {
-                                                    form.setValue('spec.customAllValue', undefined);
-                                                }
-                                            }
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                        variant: "caption",
-                                        sx: {
-                                            mt: -0.5
-                                        },
-                                        children: 'Enable to set a custom value when "All" is selected'
-                                    }),
-                                    _customAllValue !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                        control: control,
-                                        name: "spec.customAllValue",
-                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                ...field,
-                                                fullWidth: true,
-                                                label: "Custom All Value",
-                                                InputLabelProps: {
-                                                    shrink: action === 'read' ? true : undefined
-                                                },
-                                                InputProps: {
-                                                    readOnly: action === 'read'
-                                                },
-                                                error: !!fieldState.error,
-                                                helperText: fieldState.error?.message,
-                                                value: field.value ?? '',
-                                                onChange: (event)=>{
-                                                    field.onChange(event.target.value || '');
-                                                }
-                                            })
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
-function VariableEditorForm({ initialVariableDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete }) {
-    const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
-    const titleAction = (0, _components.getTitleAction)(action, isDraft);
-    const submitText = (0, _components.getSubmitText)(action, isDraft);
-    const { variableEditorSchema } = (0, _context.useValidationSchemas)();
-    const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(variableEditorSchema),
-        mode: 'onBlur',
-        defaultValues: initialVariableDefinition
-    });
-    const kind = (0, _reacthookform.useWatch)({
-        control: form.control,
-        name: 'kind'
-    });
-    function clearFormData(data) {
-        const result = {
-            ...data
-        };
-        if (result.spec.display?.name === undefined && result.spec.display?.description === undefined && result.spec.display?.hidden === undefined) {
-            delete result.spec.display;
-        }
-        return result;
-    }
-    const processForm = (data)=>{
-        // reset display attributes to undefined when empty, because we don't want to save empty strings
-        onSave(clearFormData(data));
-    };
-    // When user click on cancel, several possibilities:
-    // - create action: ask for discard approval
-    // - update action: ask for discard approval if changed
-    // - read action: don´t ask for discard approval
-    function handleCancel() {
-        if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {
-            setDiscardDialogOpened(true);
-        } else {
-            onClose();
-        }
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
-        ...form,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: (theme)=>theme.spacing(1, 2),
-                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                        variant: "h2",
-                        children: [
-                            titleAction,
-                            " Variable"
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormActions, {
-                        action: action,
-                        submitText: submitText,
-                        isReadonly: isReadonly,
-                        isValid: form.formState.isValid,
-                        onActionChange: onActionChange,
-                        onSubmit: form.handleSubmit(processForm),
-                        onDelete: onDelete,
-                        onCancel: handleCancel
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                padding: 2,
-                sx: {
-                    overflowY: 'scroll'
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                        container: true,
-                        spacing: 2,
-                        mb: 2,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    control: form.control,
-                                    name: "spec.name",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                            ...field,
-                                            required: true,
-                                            fullWidth: true,
-                                            label: "Name",
-                                            InputLabelProps: {
-                                                shrink: action === 'read' ? true : undefined
-                                            },
-                                            InputProps: {
-                                                disabled: action === 'update' && !isDraft,
-                                                readOnly: action === 'read'
-                                            },
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            value: field.value ?? '',
-                                            onChange: (event)=>{
-                                                field.onChange(event);
-                                            }
-                                        })
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    control: form.control,
-                                    name: "spec.display.name",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                            ...field,
-                                            fullWidth: true,
-                                            label: "Display Label",
-                                            InputLabelProps: {
-                                                shrink: action === 'read' ? true : undefined
-                                            },
-                                            InputProps: {
-                                                readOnly: action === 'read'
-                                            },
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            value: field.value ?? '',
-                                            onChange: (event)=>{
-                                                field.onChange(event);
-                                            }
-                                        })
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    control: form.control,
-                                    name: "spec.display.description",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                            ...field,
-                                            fullWidth: true,
-                                            label: "Description",
-                                            InputLabelProps: {
-                                                shrink: action === 'read' ? true : undefined
-                                            },
-                                            InputProps: {
-                                                readOnly: action === 'read'
-                                            },
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            value: field.value ?? '',
-                                            onChange: (event)=>{
-                                                field.onChange(event);
-                                            }
-                                        })
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    control: form.control,
-                                    name: "kind",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                            select: true,
-                                            ...field,
-                                            fullWidth: true,
-                                            label: "Type",
-                                            InputLabelProps: {
-                                                shrink: action === 'read' ? true : undefined
-                                            },
-                                            InputProps: {
-                                                readOnly: action === 'read'
-                                            },
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            value: field.value ?? 'TextVariable',
-                                            onChange: (event)=>{
-                                                field.onChange(event);
-                                            },
-                                            children: _variablemodel.VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                    value: v.kind,
-                                                    children: v.label
-                                                }, v.kind))
-                                        })
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
-                    kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                        FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(TextVariableEditorForm, {
-                            action: action,
-                            control: form.control
-                        })
-                    }),
-                    kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                        FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ListVariableEditorForm, {
-                            action: action,
-                            control: form.control
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
-                description: "Are you sure you want to discard these changes? Changes cannot be recovered.",
-                isOpen: isDiscardDialogOpened,
-                onCancel: ()=>{
-                    setDiscardDialogOpened(false);
-                },
-                onDiscardChanges: ()=>{
-                    setDiscardDialogOpened(false);
-                    onClose();
-                }
-            })
-        ]
-    });
-}