@uipath/apollo-react 6.79.0 → 7.0.0

package/dist/canvas/components/NodeVariablesPanel/NodeVariableEditDialog.js

@@ -0,0 +1,371 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, FormField, FormFieldDescription, FormFieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea } from "@uipath/apollo-wind";
+import { Database, Pencil } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+const VARIABLE_TYPES = [
+    'string',
+    'number',
+    'boolean',
+    'object',
+    'array'
+];
+const IDENTIFIER_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+function draftFor(type, value) {
+    if (null == value) return '';
+    if ('object' === type || 'array' === type) return JSON.stringify(value, null, 2);
+    return String(value);
+}
+function parseDefault(type, draft, checked) {
+    if ('boolean' === type) return {
+        value: checked
+    };
+    const text = draft.trim();
+    if (!text) return {
+        value: void 0
+    };
+    if ('string' === type) return {
+        value: draft
+    };
+    if ('number' === type) {
+        const value = Number(text);
+        return Number.isFinite(value) ? {
+            value
+        } : {
+            error: true
+        };
+    }
+    try {
+        const value = JSON.parse(text);
+        const isArray = Array.isArray(value);
+        const isObject = 'object' == typeof value && null !== value && !isArray;
+        return ('array' === type ? isArray : isObject) ? {
+            value
+        } : {
+            error: true
+        };
+    } catch  {
+        return {
+            error: true
+        };
+    }
+}
+function NodeVariableEditDialog({ variable, takenNames, referenceFor, onSave, onClose }) {
+    const { _ } = useSafeLingui();
+    const fieldId = useId();
+    const idInputRef = useRef(null);
+    const [id, setId] = useState(variable.id);
+    const [editingId, setEditingId] = useState(()=>!IDENTIFIER_PATTERN.test(variable.id));
+    const [type, setType] = useState(variable.type);
+    const [description, setDescription] = useState(variable.description ?? '');
+    const [draft, setDraftState] = useState(()=>draftFor(variable.type, variable.defaultValue));
+    const [checked, setCheckedState] = useState('boolean' == typeof variable.defaultValue ? variable.defaultValue : void 0);
+    const [defaultEdited, setDefaultEdited] = useState(false);
+    const setDraft = (next)=>{
+        setDraftState(next);
+        setDefaultEdited(true);
+    };
+    const setChecked = (next)=>{
+        setCheckedState(next);
+        setDefaultEdited(true);
+    };
+    const nullPlaceholder = null !== variable.defaultValue || defaultEdited ? void 0 : 'null';
+    const trimmedId = id.trim();
+    const idError = IDENTIFIER_PATTERN.test(trimmedId) ? trimmedId !== variable.id && takenNames.has(trimmedId) ? _({
+        id: 'canvas.node_variables_panel.edit_id_taken_error',
+        message: 'A variable named {name} already exists.',
+        values: {
+            name: trimmedId
+        }
+    }) : void 0 : _({
+        id: 'canvas.node_variables_panel.edit_id_pattern_error',
+        message: 'Use a letter or underscore first, then letters, numbers, or underscores.'
+    });
+    const parsed = parseDefault(type, draft, checked);
+    const defaultError = 'error' in parsed ? ({
+        number: _({
+            id: 'canvas.node_variables_panel.edit_default_number_error',
+            message: 'Enter a number.'
+        }),
+        object: _({
+            id: 'canvas.node_variables_panel.edit_default_object_error',
+            message: 'Enter a valid JSON object.'
+        }),
+        array: _({
+            id: 'canvas.node_variables_panel.edit_default_array_error',
+            message: 'Enter a valid JSON array.'
+        })
+    })[type] : void 0;
+    const changeType = (next)=>{
+        setType(next);
+        setDraft('');
+        setChecked(void 0);
+    };
+    const submit = (event)=>{
+        event.preventDefault();
+        if (idError || 'error' in parsed) return;
+        const untouched = !defaultEdited;
+        onSave({
+            id: trimmedId,
+            type,
+            description: description.trim() || void 0,
+            defaultValue: untouched ? variable.defaultValue : parsed.value
+        });
+    };
+    const typeLabel = {
+        string: _({
+            id: 'canvas.node_variables_panel.type_string',
+            message: 'String'
+        }),
+        number: _({
+            id: 'canvas.node_variables_panel.type_number',
+            message: 'Number'
+        }),
+        boolean: _({
+            id: 'canvas.node_variables_panel.type_boolean',
+            message: 'Boolean'
+        }),
+        object: _({
+            id: 'canvas.node_variables_panel.type_object',
+            message: 'Object'
+        }),
+        array: _({
+            id: 'canvas.node_variables_panel.type_array',
+            message: 'Array'
+        })
+    };
+    const defaultLabel = _({
+        id: 'canvas.node_variables_panel.edit_default_label',
+        message: 'Default value'
+    });
+    const reference = referenceFor(IDENTIFIER_PATTERN.test(trimmedId) ? trimmedId : variable.id);
+    return /*#__PURE__*/ jsx(Dialog, {
+        open: true,
+        onOpenChange: (open)=>!open && onClose(),
+        children: /*#__PURE__*/ jsx(DialogContent, {
+            "aria-describedby": void 0,
+            onKeyDown: (event)=>event.stopPropagation(),
+            children: /*#__PURE__*/ jsxs("form", {
+                onSubmit: submit,
+                noValidate: true,
+                className: "grid gap-4",
+                children: [
+                    /*#__PURE__*/ jsx(DialogHeader, {
+                        children: /*#__PURE__*/ jsxs(DialogTitle, {
+                            className: "flex items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ jsx(Database, {
+                                    size: 16,
+                                    "aria-hidden": "true",
+                                    className: "text-foreground-muted"
+                                }),
+                                _({
+                                    id: 'canvas.node_variables_panel.edit_title',
+                                    message: 'Edit variable'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${fieldId}-id`,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_id_label',
+                                    message: 'ID'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-start gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(Input, {
+                                        ref: idInputRef,
+                                        id: `${fieldId}-id`,
+                                        value: id,
+                                        disabled: !editingId,
+                                        onChange: (event)=>setId(event.target.value),
+                                        error: editingId ? idError : void 0,
+                                        "aria-describedby": `${fieldId}-id-hint`,
+                                        autoComplete: "off",
+                                        spellCheck: false,
+                                        className: "flex-1 font-mono"
+                                    }),
+                                    !editingId && /*#__PURE__*/ jsx(Button, {
+                                        type: "button",
+                                        variant: "outline",
+                                        size: "icon",
+                                        "aria-label": _({
+                                            id: 'canvas.node_variables_panel.edit_id_action',
+                                            message: 'Edit ID'
+                                        }),
+                                        onClick: ()=>{
+                                            setEditingId(true);
+                                            requestAnimationFrame(()=>idInputRef.current?.select());
+                                        },
+                                        className: "shrink-0",
+                                        children: /*#__PURE__*/ jsx(Pencil, {})
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(FormFieldDescription, {
+                                id: `${fieldId}-id-hint`,
+                                children: [
+                                    _({
+                                        id: 'canvas.node_variables_panel.edit_id_hint',
+                                        message: 'Used in expressions as'
+                                    }),
+                                    ' ',
+                                    /*#__PURE__*/ jsx("code", {
+                                        className: "break-all rounded bg-surface-overlay px-1 py-0.5 font-mono text-xs",
+                                        children: reference
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${fieldId}-type`,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_type_label',
+                                    message: 'Data type'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(Select, {
+                                value: type,
+                                onValueChange: (next)=>changeType(next),
+                                children: [
+                                    /*#__PURE__*/ jsx(SelectTrigger, {
+                                        id: `${fieldId}-type`,
+                                        children: /*#__PURE__*/ jsx(SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ jsx(SelectContent, {
+                                        children: VARIABLE_TYPES.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                value: option,
+                                                children: typeLabel[option]
+                                            }, option))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${fieldId}-description`,
+                                children: _({
+                                    id: "canvas.node_variables_panel.edit_description_label",
+                                    message: "Description"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Textarea, {
+                                id: `${fieldId}-description`,
+                                value: description,
+                                onChange: (event)=>setDescription(event.target.value),
+                                placeholder: _({
+                                    id: "canvas.node_variables_panel.edit_description_placeholder",
+                                    message: "Helpful description of what this variable represents"
+                                }),
+                                rows: 2
+                            })
+                        ]
+                    }),
+                    'boolean' === type ? /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${fieldId}-default`,
+                                children: defaultLabel
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(Switch, {
+                                        id: `${fieldId}-default`,
+                                        checked: checked ?? false,
+                                        onCheckedChange: setChecked,
+                                        "aria-describedby": `${fieldId}-default-hint`
+                                    }),
+                                    void 0 !== checked && /*#__PURE__*/ jsx(Button, {
+                                        type: "button",
+                                        variant: "ghost",
+                                        size: "2xs",
+                                        onClick: ()=>setChecked(void 0),
+                                        "aria-label": _({
+                                            id: 'canvas.node_variables_panel.edit_default_clear_label',
+                                            message: 'Clear default value'
+                                        }),
+                                        children: _({
+                                            id: 'canvas.node_variables_panel.edit_default_clear',
+                                            message: 'Clear'
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(FormFieldDescription, {
+                                id: `${fieldId}-default-hint`,
+                                children: void 0 === checked ? _({
+                                    id: 'canvas.node_variables_panel.edit_default_boolean_unset_hint',
+                                    message: 'No default. Toggle on for true, off for false'
+                                }) : _({
+                                    id: 'canvas.node_variables_panel.edit_default_boolean_hint',
+                                    message: 'Toggle on for true, off for false'
+                                })
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${fieldId}-default`,
+                                children: defaultLabel
+                            }),
+                            'object' === type || 'array' === type ? /*#__PURE__*/ jsx(Textarea, {
+                                id: `${fieldId}-default`,
+                                value: draft,
+                                onChange: (event)=>setDraft(event.target.value),
+                                placeholder: nullPlaceholder ?? ('object' === type ? '{"key": "value"}' : '[1, 2, 3]'),
+                                error: defaultError,
+                                rows: 4,
+                                spellCheck: false,
+                                className: "font-mono"
+                            }) : /*#__PURE__*/ jsx(Input, {
+                                id: `${fieldId}-default`,
+                                value: draft,
+                                onChange: (event)=>setDraft(event.target.value),
+                                inputMode: 'number' === type ? 'decimal' : void 0,
+                                placeholder: nullPlaceholder ?? ('number' === type ? '0' : _({
+                                    id: 'canvas.node_variables_panel.edit_default_string_placeholder',
+                                    message: 'Enter text value'
+                                })),
+                                error: defaultError,
+                                autoComplete: "off"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DialogFooter, {
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                type: "button",
+                                variant: "outline",
+                                onClick: onClose,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_cancel',
+                                    message: 'Cancel'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                type: "submit",
+                                disabled: !!idError || !!defaultError,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_save',
+                                    message: 'Save'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+export { NodeVariableEditDialog };