@object-ui/app-shell 11.3.0 → 11.4.0

package/dist/views/studio-design/ObjectValidationsPanel.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Data pillar — Validations view (builder-ui Phase B).
+ *
+ * Edits `ObjectSchema.validations` (spec `ValidationRuleSchema`, a
+ * discriminated union on `type`). The no-code surface targets the `script`
+ * rule — `{ type: 'script', name, message, condition }` where the CEL
+ * `condition` is a FAIL predicate (TRUE ⇒ the write is rejected with
+ * `message`). The condition editor reuses the metadata-admin
+ * `ConditionBuilder`, fed with the DRAFT field list so unpublished fields
+ * are pickable.
+ *
+ * Non-`script` rule types (state_machine / format / cross_field / json /
+ * conditional) are surfaced read-only with their type badge — they carry
+ * structures a row editor can't honestly express; authoring them stays in
+ * code for now. Showing them (rather than hiding) keeps the list a truthful
+ * inventory of everything that will run on save.
+ */
+import React from 'react';
+import { Plus, Trash2, ShieldAlert } from 'lucide-react';
+import { ConditionBuilder } from '../metadata-admin/inspectors/ConditionBuilder';
+import { readFields } from '../metadata-admin/previews/object-fields-io';
+function readRules(input) {
+    if (!Array.isArray(input))
+        return [];
+    return input.filter((r) => !!r && typeof r === 'object');
+}
+function nextRuleName(existing) {
+    let i = existing.length + 1;
+    let name = `validation_${i}`;
+    const taken = new Set(existing);
+    while (taken.has(name))
+        name = `validation_${++i}`;
+    return name;
+}
+export function ObjectValidationsPanel({ draft, onPatch, disabled, }) {
+    const rules = readRules(draft.validations);
+    const [selected, setSelected] = React.useState(null);
+    const fields = React.useMemo(() => readFields(draft.fields).entries.map((e) => ({
+        name: e.name,
+        label: typeof e.def.label === 'string' ? e.def.label : undefined,
+        hidden: e.def.hidden === true,
+    })), [draft.fields]);
+    const commit = (next) => onPatch({ validations: next });
+    const patchRule = (name, patch) => commit(rules.map((r) => (r.name === name ? { ...r, ...patch } : r)));
+    const addRule = () => {
+        const name = nextRuleName(rules.map((r) => r.name ?? ''));
+        // `condition: 'false'` — a VALID never-failing CEL placeholder. An empty
+        // condition is rejected by the spec's ExpressionInputSchema, which would
+        // 422 the whole draft save and dead-end the create flow (the same
+        // required-field-blocks-authoring class as dashboard `layout` / page
+        // `regions`). A rule that never fires is safe to save mid-authoring.
+        commit([...rules, { type: 'script', name, message: '', condition: 'false', severity: 'error' }]);
+        setSelected(name);
+    };
+    const removeRule = (name) => {
+        commit(rules.filter((r) => r.name !== name));
+        if (selected === name)
+            setSelected(null);
+    };
+    const sel = rules.find((r) => r.name === selected) ?? null;
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 gap-4", children: [_jsxs("div", { className: "flex w-72 shrink-0 flex-col rounded-lg border", children: [_jsxs("header", { className: "flex items-center gap-2 border-b px-3 py-2", children: [_jsx(ShieldAlert, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u9A8C\u8BC1\u89C4\u5219" }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: ["(", rules.length, ")"] }), !disabled && (_jsxs("button", { type: "button", onClick: addRule, className: "ml-auto inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] hover:bg-muted", children: [_jsx(Plus, { className: "h-3 w-3" }), " \u65B0\u589E"] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: rules.length === 0 ? (_jsxs("p", { className: "px-3 py-6 text-center text-[11px] leading-5 text-muted-foreground", children: ["\u8FD8\u6CA1\u6709\u9A8C\u8BC1\u89C4\u5219\u3002", _jsx("br", {}), "\u89C4\u5219\u5728\u4FDD\u5B58\u8BB0\u5F55\u65F6\u6267\u884C:\u6761\u4EF6\u4E3A\u771F \u21D2 \u62D2\u7EDD\u4FDD\u5B58\u5E76\u63D0\u793A\u6D88\u606F\u3002"] })) : (rules.map((r) => (_jsxs("button", { type: "button", onClick: () => setSelected(r.name ?? null), className: 'flex w-full items-start gap-2 border-b px-3 py-2 text-left text-[12px] ' +
+                                (selected === r.name ? 'bg-muted' : 'hover:bg-muted/50'), children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", children: r.label || r.name }), _jsx("span", { className: "block truncate text-[11px] text-muted-foreground", children: r.message || '(无消息)' })] }), _jsx("span", { className: 'shrink-0 rounded-full px-1.5 py-0.5 text-[10px] ' +
+                                        (r.type === 'script'
+                                            ? 'bg-primary/10 text-primary'
+                                            : 'bg-muted text-muted-foreground'), children: r.type ?? 'script' })] }, r.name)))) })] }), _jsx("div", { className: "flex min-w-0 flex-1 flex-col rounded-lg border", children: !sel ? (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center text-[12px] text-muted-foreground", children: "\u9009\u62E9\u5DE6\u4FA7\u7684\u89C4\u5219\u8FDB\u884C\u7F16\u8F91,\u6216\u70B9\u300C\u65B0\u589E\u300D\u521B\u5EFA\u4E00\u6761\u3002" })) : sel.type !== 'script' ? (_jsxs("div", { className: "flex flex-1 flex-col gap-2 p-4", children: [_jsxs("p", { className: "text-[13px] font-medium", children: [sel.label || sel.name, _jsx("span", { className: "ml-2 rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: sel.type })] }), _jsxs("p", { className: "text-[12px] leading-5 text-muted-foreground", children: ["\u300C", sel.type, "\u300D\u7C7B\u578B\u7684\u89C4\u5219\u5E26\u6709\u7ED3\u6784\u5316\u914D\u7F6E(\u72B6\u6001\u673A\u8F6C\u79FB\u8868 / \u683C\u5F0F\u7EA6\u675F\u7B49),\u6682\u4E0D\u652F\u6301\u5728\u6B64\u7F16\u8F91 \u2014\u2014 \u8BF7\u5728\u4EE3\u7801\u5305\u4E2D\u7EF4\u62A4\u3002\u6D88\u606F:", sel.message || '(无)'] }), !disabled && (_jsxs("button", { type: "button", onClick: () => removeRule(sel.name), className: "mt-auto inline-flex w-fit items-center gap-1 rounded border border-destructive/40 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/10", children: [_jsx(Trash2, { className: "h-3 w-3" }), " \u5220\u9664\u89C4\u5219"] }))] })) : (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-4", children: [_jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: "\u89C4\u5219\u540D(snake_case,\u552F\u4E00)" }), _jsx("input", { value: sel.name ?? '', disabled: disabled, onChange: (e) => {
+                                        const name = e.target.value;
+                                        patchRule(sel.name, { name });
+                                        setSelected(name);
+                                    }, className: "w-full rounded border bg-background px-2 py-1 text-[12px]" })] }), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: "\u9519\u8BEF\u6D88\u606F(\u6821\u9A8C\u5931\u8D25\u65F6\u5C55\u793A\u7ED9\u7528\u6237)" }), _jsx("input", { value: sel.message ?? '', disabled: disabled, onChange: (e) => patchRule(sel.name, { message: e.target.value }), placeholder: "\u4F8B\u5982:\u5B8C\u6210\u65E5\u671F\u5728\u72B6\u6001\u4E3A\u5DF2\u5B8C\u6210\u65F6\u5FC5\u586B", className: "w-full rounded border bg-background px-2 py-1 text-[12px]" })] }), _jsxs("div", { children: [_jsxs("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: ["\u5931\u8D25\u6761\u4EF6(CEL)\u2014\u2014 \u6761\u4EF6\u4E3A ", _jsx("b", { children: "\u771F" }), " \u65F6,\u62D2\u7EDD\u4FDD\u5B58\u5E76\u663E\u793A\u4E0A\u9762\u7684\u6D88\u606F;\u65B0\u89C4\u5219\u9ED8\u8BA4", ' ', _jsx("code", { className: "rounded bg-muted px-1", children: "false" }), "(\u6C38\u4E0D\u89E6\u53D1),\u8BF7\u6539\u4E3A\u771F\u5B9E\u6761\u4EF6"] }), _jsx(ConditionBuilder, { value: typeof sel.condition === 'string' ? sel.condition : '', onCommit: (cel) => patchRule(sel.name, { condition: cel }), fields: fields, disabled: disabled })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-[12px]", children: [_jsx("span", { className: "text-muted-foreground", children: "\u4E25\u91CD\u5EA6" }), _jsxs("select", { value: sel.severity ?? 'error', disabled: disabled, onChange: (e) => patchRule(sel.name, { severity: e.target.value }), className: "rounded border bg-background px-1.5 py-0.5 text-[12px]", children: [_jsx("option", { value: "error", children: "error(\u62D2\u7EDD\u4FDD\u5B58)" }), _jsx("option", { value: "warning", children: "warning" }), _jsx("option", { value: "info", children: "info" })] })] }), _jsxs("label", { className: "flex items-center gap-1.5 text-[12px]", children: [_jsx("input", { type: "checkbox", checked: sel.active !== false, disabled: disabled, onChange: (e) => patchRule(sel.name, { active: e.target.checked }) }), "\u542F\u7528"] }), !disabled && (_jsxs("button", { type: "button", onClick: () => removeRule(sel.name), className: "ml-auto inline-flex items-center gap-1 rounded border border-destructive/40 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/10", children: [_jsx(Trash2, { className: "h-3 w-3" }), " \u5220\u9664"] }))] })] })) })] }));
+}