@object-ui/fields 13.1.0 → 14.0.0

package/src/widgets/FilterConditionField.tsx

@@ -0,0 +1,343 @@
+import React from 'react';
+import { FilterBuilder, cn } from '@object-ui/components';
+import { SchemaRendererContext } from '@object-ui/react';
+import type { FieldWidgetProps } from './types';
+
+/**
+ * FilterConditionField — visual criteria builder for a stored FilterCondition
+ * (e.g. `sys_sharing_rule.criteria_json`), scoped to the object chosen in a
+ * sibling `object_name` field.
+ *
+ * Reached via the field `widget: 'filter-condition'` hint (resolves as
+ * `field:filter-condition`). Reads the live `object_name` from
+ * `dependentValues`, loads that object's fields via
+ * `dataSource.getObjectSchema(...)`, and renders `<FilterBuilder>` over them —
+ * so an admin builds `type == "customer" AND is_active == true` by picking
+ * fields/operators instead of hand-writing JSON.
+ *
+ * Storage contract: the value round-trips as a **MongoDB-style object filter**
+ * (`{ field: value }`, `{ field: { $gt: n } }`, `{ $or: [...] }`), JSON-encoded
+ * — the exact shape the sharing evaluator spreads into `engine.find(object,
+ * { filter })`. Criteria that can't be represented in the builder (nested
+ * mixes, unknown operators) fall back to a raw-JSON editor so nothing is hidden
+ * or lost; an "Edit as JSON" toggle is always available.
+ */
+
+interface FilterFieldDef {
+  value: string;
+  label: string;
+  type?: string;
+  options?: Array<{ value: string; label: string }>;
+  referenceTo?: string;
+}
+
+interface BuilderCondition {
+  id: string;
+  field: string;
+  operator: string;
+  value: any;
+}
+interface BuilderGroup {
+  id: string;
+  logic: 'and' | 'or';
+  conditions: BuilderCondition[];
+}
+
+const EMPTY_GROUP: BuilderGroup = { id: 'root', logic: 'and', conditions: [] };
+
+/** Field types that are not meaningfully filterable in a simple builder. */
+const NON_FILTERABLE = new Set([
+  'object', 'vector', 'file', 'image', 'avatar', 'signature',
+  'richtext', 'html', 'markdown', 'location', 'grid', 'json', 'code',
+]);
+
+function deriveFilterFields(schema: any): FilterFieldDef[] {
+  const raw = schema?.fields;
+  const entries: Array<[string, any]> = Array.isArray(raw)
+    ? raw.map((f: any) => [f?.name, f])
+    : raw && typeof raw === 'object'
+      ? Object.entries(raw)
+      : [];
+  const out: FilterFieldDef[] = [];
+  for (const [name, f] of entries) {
+    if (!name || !f || f.hidden) continue;
+    const type = f.type as string | undefined;
+    if (type && NON_FILTERABLE.has(type)) continue;
+    out.push({
+      value: name,
+      label: f.label || name,
+      type,
+      options: Array.isArray(f.options)
+        ? f.options.map((o: any) =>
+            typeof o === 'string'
+              ? { value: o, label: o }
+              : { value: String(o?.value), label: String(o?.label ?? o?.value) },
+          )
+        : undefined,
+      referenceTo: f.reference_to || f.reference,
+    });
+  }
+  return out;
+}
+
+function coerceByType(value: any, type?: string): any {
+  if (value == null) return value;
+  if (type === 'boolean' || type === 'toggle') {
+    if (typeof value === 'boolean') return value;
+    if (value === 'true') return true;
+    if (value === 'false') return false;
+    return value;
+  }
+  if (type === 'number' || type === 'currency' || type === 'percent' || type === 'rating' || type === 'slider') {
+    const n = Number(value);
+    return Number.isFinite(n) && value !== '' ? n : value;
+  }
+  return value;
+}
+
+function toArray(value: any): any[] {
+  if (Array.isArray(value)) return value;
+  if (typeof value === 'string') return value.split(',').map((s) => s.trim()).filter(Boolean);
+  return value == null ? [] : [value];
+}
+
+function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+  const { field, operator, value } = c || ({} as BuilderCondition);
+  if (!field) return null;
+  const t = typeOf(field);
+  const cv = coerceByType(value, t);
+  switch (operator) {
+    case 'equals': return { [field]: cv };
+    case 'notEquals': return { [field]: { $ne: cv } };
+    case 'contains': return { [field]: { $contains: value } };
+    case 'notContains': return { [field]: { $ncontains: value } };
+    case 'isEmpty': return { [field]: { $in: [null, ''] } };
+    case 'isNotEmpty': return { [field]: { $nin: [null, ''] } };
+    case 'greaterThan':
+    case 'after': return { [field]: { $gt: cv } };
+    case 'lessThan':
+    case 'before': return { [field]: { $lt: cv } };
+    case 'greaterOrEqual': return { [field]: { $gte: cv } };
+    case 'lessOrEqual': return { [field]: { $lte: cv } };
+    case 'between': {
+      const [a, b] = Array.isArray(value) ? value : [undefined, undefined];
+      return { [field]: { $gte: coerceByType(a, t), $lte: coerceByType(b, t) } };
+    }
+    case 'in': return { [field]: { $in: toArray(value).map((v) => coerceByType(v, t)) } };
+    case 'notIn': return { [field]: { $nin: toArray(value).map((v) => coerceByType(v, t)) } };
+    default: return { [field]: cv };
+  }
+}
+
+function filterGroupToMongo(group: BuilderGroup, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+  const frags = (group?.conditions ?? [])
+    .map((c) => condToMongo(c, typeOf))
+    .filter((x): x is Record<string, any> => !!x);
+  if (frags.length === 0) return null; // empty = match all
+  if (group.logic === 'or') return { $or: frags };
+  if (frags.length === 1) return frags[0];
+  const keys = frags.flatMap((f) => Object.keys(f));
+  const noCollision = new Set(keys).size === keys.length;
+  return noCollision ? Object.assign({}, ...frags) : { $and: frags };
+}
+
+function arraysEqual(a: any, b: any[]): boolean {
+  return Array.isArray(a) && a.length === b.length && a.every((v, i) => v === b[i]);
+}
+
+function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null {
+  const id = `c_${idx}_${field}`;
+  if (v === null || typeof v !== 'object' || Array.isArray(v)) {
+    return { id, field, operator: 'equals', value: v };
+  }
+  const opKeys = Object.keys(v);
+  if (opKeys.length === 1) {
+    const op = opKeys[0];
+    const val = v[op];
+    switch (op) {
+      case '$ne': return { id, field, operator: 'notEquals', value: val };
+      case '$contains': return { id, field, operator: 'contains', value: val };
+      case '$ncontains': return { id, field, operator: 'notContains', value: val };
+      case '$gt': return { id, field, operator: 'greaterThan', value: val };
+      case '$lt': return { id, field, operator: 'lessThan', value: val };
+      case '$gte': return { id, field, operator: 'greaterOrEqual', value: val };
+      case '$lte': return { id, field, operator: 'lessOrEqual', value: val };
+      case '$in':
+        return arraysEqual(val, [null, ''])
+          ? { id, field, operator: 'isEmpty', value: '' }
+          : { id, field, operator: 'in', value: val };
+      case '$nin':
+        return arraysEqual(val, [null, ''])
+          ? { id, field, operator: 'isNotEmpty', value: '' }
+          : { id, field, operator: 'notIn', value: val };
+      default: return null;
+    }
+  }
+  if (opKeys.length === 2 && '$gte' in v && '$lte' in v) {
+    return { id, field, operator: 'between', value: [v.$gte, v.$lte] };
+  }
+  return null;
+}
+
+/** Returns a BuilderGroup, or `null` when the criteria can't be represented. */
+function mongoToFilterGroup(mongo: any): BuilderGroup | null {
+  if (mongo == null) return { ...EMPTY_GROUP, conditions: [] };
+  if (typeof mongo !== 'object' || Array.isArray(mongo)) return null;
+  const entries = Object.entries(mongo);
+  if (entries.length === 0) return { ...EMPTY_GROUP, conditions: [] };
+  if (entries.length === 1 && (mongo.$or || mongo.$and)) {
+    const logic: 'and' | 'or' = mongo.$or ? 'or' : 'and';
+    const arr = mongo.$or || mongo.$and;
+    if (!Array.isArray(arr)) return null;
+    const conditions: BuilderCondition[] = [];
+    for (let i = 0; i < arr.length; i++) {
+      const frag = arr[i];
+      if (!frag || typeof frag !== 'object' || Object.keys(frag).length !== 1) return null;
+      const field = Object.keys(frag)[0];
+      if (field.startsWith('$')) return null;
+      const c = kvToCondition(field, frag[field], i);
+      if (!c) return null;
+      conditions.push(c);
+    }
+    return { id: 'root', logic, conditions };
+  }
+  const conditions: BuilderCondition[] = [];
+  let i = 0;
+  for (const [field, v] of entries) {
+    if (field.startsWith('$')) return null; // mixed logical + field → raw
+    const c = kvToCondition(field, v, i++);
+    if (!c) return null;
+    conditions.push(c);
+  }
+  return { id: 'root', logic: 'and', conditions };
+}
+
+function stringifyValue(value: string | object | undefined | null): string {
+  if (value == null || value === '') return '';
+  if (typeof value === 'string') return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '';
+  }
+}
+
+export function FilterConditionField({
+  value,
+  onChange,
+  readonly,
+  className,
+  ...props
+}: FieldWidgetProps<string | object>) {
+  const ctx = React.useContext(SchemaRendererContext);
+  const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
+  const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
+  const objectName = String(dependentValues.object_name ?? '');
+
+  const [fields, setFields] = React.useState<FilterFieldDef[] | null>(null);
+
+  React.useEffect(() => {
+    setFields(null);
+    if (!dataSource || !objectName || typeof dataSource.getObjectSchema !== 'function') return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const schema = await dataSource.getObjectSchema(objectName);
+        if (!cancelled) setFields(deriveFilterFields(schema));
+      } catch {
+        if (!cancelled) setFields([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource, objectName]);
+
+  const rawValue = React.useMemo(() => stringifyValue(value), [value]);
+
+  const parsed = React.useMemo(() => {
+    if (!rawValue.trim()) return { mongo: {}, ok: true };
+    try {
+      return { mongo: JSON.parse(rawValue), ok: true };
+    } catch {
+      return { mongo: null, ok: false };
+    }
+  }, [rawValue]);
+
+  const group = React.useMemo(
+    () => (parsed.ok ? mongoToFilterGroup(parsed.mongo) : null),
+    [parsed],
+  );
+
+  // Raw JSON mode: forced when the stored value can't be represented in the
+  // builder; otherwise opt-in via the toggle.
+  const representable = parsed.ok && group !== null;
+  const [rawMode, setRawMode] = React.useState<boolean>(!representable);
+  React.useEffect(() => {
+    if (!representable) setRawMode(true);
+  }, [representable]);
+
+  const typeOf = React.useMemo(() => {
+    const map = new Map((fields ?? []).map((f) => [f.value, f.type]));
+    return (f: string) => map.get(f);
+  }, [fields]);
+
+  const handleBuilderChange = (g: BuilderGroup) => {
+    const mongo = filterGroupToMongo(g, typeOf);
+    onChange((mongo == null ? '' : JSON.stringify(mongo)) as any);
+  };
+
+  if (!objectName) {
+    return (
+      <p className={cn('text-sm text-muted-foreground', className)}>
+        Select an object first.
+      </p>
+    );
+  }
+
+  if (readonly) {
+    if (!rawValue.trim()) {
+      return <span className={cn('text-sm text-muted-foreground', className)}>All records</span>;
+    }
+    return (
+      <pre className={cn('overflow-x-auto rounded bg-muted/40 p-2 text-xs', className)}>
+        {rawValue}
+      </pre>
+    );
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {rawMode ? (
+        <>
+          <textarea
+            className="min-h-[96px] w-full rounded border bg-background px-2 py-1 font-mono text-xs"
+            value={rawValue}
+            placeholder='{ "type": "customer", "is_active": true }'
+            onChange={(e) => onChange(e.target.value as any)}
+          />
+          {!parsed.ok && (
+            <span className="text-xs text-destructive">Invalid JSON — the rule will match no records until fixed.</span>
+          )}
+        </>
+      ) : (
+        <FilterBuilder
+          fields={fields ?? []}
+          value={(group ?? EMPTY_GROUP) as any}
+          onChange={handleBuilderChange as any}
+        />
+      )}
+      <button
+        type="button"
+        className="self-start text-xs text-muted-foreground underline-offset-2 hover:underline"
+        onClick={() => setRawMode((m) => !m)}
+        disabled={!representable && !rawMode}
+        title={!representable ? 'This criteria can only be edited as JSON' : undefined}
+      >
+        {rawMode ? 'Use visual builder' : 'Edit as JSON'}
+      </button>
+    </div>
+  );
+}
+
+export default FilterConditionField;

package/src/widgets/ObjectRefField.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Combobox, EmptyValue, cn } from '@object-ui/components';
+import { SchemaRendererContext } from '@object-ui/react';
+import type { FieldWidgetProps } from './types';
+
+/**
+ * ObjectRefField — object-name picker for form fields that store the machine
+ * name of a registered object (e.g. `sys_sharing_rule.object_name`).
+ *
+ * Reached via the field `widget: 'object-ref'` hint (declared on the object
+ * metadata; resolves as `field:object-ref`). Renders a searchable dropdown of
+ * the platform's registered objects instead of a free-text input where the
+ * admin has to remember a machine name.
+ *
+ * Object catalog source, in order of preference:
+ *   1. `dataSource.getObjects()` — the metadata-registry list endpoint
+ *      (`GET /api/v1/meta/object`), which merges code- and DB-defined objects.
+ *   2. Fallback: `dataSource.find('sys_metadata', { type: 'object' })` — the
+ *      same source the Setup app's object grid browses.
+ * The stored value is always the object's `name` string. If the catalog can't
+ * load, the current value is still shown, so the control degrades safely.
+ */
+interface ObjectHeader {
+  name: string;
+  label?: string;
+}
+
+export function ObjectRefField({
+  value,
+  onChange,
+  readonly,
+  className,
+  ...props
+}: FieldWidgetProps<string>) {
+  const ctx = React.useContext(SchemaRendererContext);
+  const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
+  const disabled = (props as any).disabled as boolean | undefined;
+
+  const [objects, setObjects] = React.useState<ObjectHeader[] | null>(null);
+
+  React.useEffect(() => {
+    if (!dataSource) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        let rows: ObjectHeader[] = [];
+        if (typeof dataSource.getObjects === 'function') {
+          rows = (await dataSource.getObjects()) ?? [];
+        } else if (typeof dataSource.find === 'function') {
+          const res = await dataSource.find('sys_metadata', {
+            $filter: { type: 'object' },
+            $top: 1000,
+          });
+          const list: any[] =
+            res?.data ?? res?.records ?? (Array.isArray(res) ? res : []);
+          rows = list
+            .map((r) => ({
+              name: String(r?.name ?? ''),
+              label: r?.label != null ? String(r.label) : undefined,
+            }))
+            .filter((r) => r.name);
+        }
+        if (!cancelled) setObjects(rows);
+      } catch {
+        if (!cancelled) setObjects([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource]);
+
+  const options = React.useMemo(() => {
+    const opts = (objects ?? []).map((o) => ({
+      value: o.name,
+      label: o.label ? `${o.label} (${o.name})` : o.name,
+    }));
+    // Keep the current value selectable even if the catalog didn't include it
+    // (unknown / not-yet-published object), so editing never drops it.
+    if (value && !opts.some((o) => o.value === value)) {
+      opts.unshift({ value, label: value });
+    }
+    return opts.sort((a, b) => a.label.localeCompare(b.label));
+  }, [objects, value]);
+
+  if (readonly) {
+    if (!value) return <EmptyValue />;
+    const label = options.find((o) => o.value === value)?.label ?? value;
+    return <span className={className}>{label}</span>;
+  }
+
+  return (
+    <Combobox
+      options={options}
+      value={value ?? ''}
+      onValueChange={(v) => onChange(v as any)}
+      placeholder={objects === null ? 'Loading objects…' : 'Select an object'}
+      searchPlaceholder="Search objects…"
+      emptyText={objects === null ? 'Loading…' : 'No objects found'}
+      disabled={disabled}
+      className={cn(className)}
+    />
+  );
+}
+
+export default ObjectRefField;

package/src/widgets/RecipientPickerField.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Combobox, EmptyValue, cn } from '@object-ui/components';
+import { SchemaRendererContext } from '@object-ui/react';
+import type { FieldWidgetProps } from './types';
+
+/**
+ * RecipientPickerField — dependent record picker for a polymorphic recipient
+ * reference (e.g. `sys_sharing_rule.recipient_id`), whose target object is
+ * decided by a sibling `recipient_type` select.
+ *
+ * Reached via the field `widget: 'recipient-picker'` hint (resolves as
+ * `field:recipient-picker`). Reads the live `recipient_type` from
+ * `dependentValues` (the form record), loads candidate records of the mapped
+ * object via `dataSource.find(...)`, and stores the value the sharing evaluator
+ * expects for that type:
+ *
+ *   user                  → sys_user, store `id`
+ *   team                  → sys_team, store `id`
+ *   business_unit         → sys_business_unit, store `id`
+ *   unit_and_subordinates → sys_business_unit, store `id`
+ *   position              → sys_position, store `name` (matched against
+ *                           sys_user_position.position at evaluation time)
+ *
+ * When `recipient_type` changes after mount the stored id is reset (an id valid
+ * for one type is meaningless for another). Unknown types degrade to a plain
+ * text input so nothing breaks.
+ */
+interface RecipientMapping {
+  object: string;
+  /** Which record field to persist into recipient_id. */
+  storeField: 'id' | 'name';
+  /** Candidate display-label fields, in preference order. */
+  labelFields: string[];
+}
+
+const TYPE_TO_OBJECT: Record<string, RecipientMapping> = {
+  user: { object: 'sys_user', storeField: 'id', labelFields: ['name', 'full_name', 'email'] },
+  team: { object: 'sys_team', storeField: 'id', labelFields: ['name', 'label'] },
+  business_unit: { object: 'sys_business_unit', storeField: 'id', labelFields: ['name', 'label'] },
+  unit_and_subordinates: { object: 'sys_business_unit', storeField: 'id', labelFields: ['name', 'label'] },
+  position: { object: 'sys_position', storeField: 'name', labelFields: ['label', 'name'] },
+};
+
+export function RecipientPickerField({
+  value,
+  onChange,
+  readonly,
+  className,
+  ...props
+}: FieldWidgetProps<string>) {
+  const ctx = React.useContext(SchemaRendererContext);
+  const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
+  const disabled = (props as any).disabled as boolean | undefined;
+  const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
+  const recipientType = String(dependentValues.recipient_type ?? '');
+  const mapping = TYPE_TO_OBJECT[recipientType];
+
+  const [records, setRecords] = React.useState<any[] | null>(null);
+
+  // Reset the stored recipient when the type changes AFTER mount (an id for a
+  // user is not a valid team/business-unit id). The ref starts null so the
+  // initial render of an existing rule never clears its value.
+  const prevType = React.useRef<string | null>(null);
+  React.useEffect(() => {
+    if (prevType.current !== null && prevType.current !== recipientType && value) {
+      onChange('' as any);
+    }
+    prevType.current = recipientType;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recipientType]);
+
+  React.useEffect(() => {
+    setRecords(null);
+    if (!dataSource || !mapping || typeof dataSource.find !== 'function') return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await dataSource.find(mapping.object, { $top: 500, $orderby: 'name asc' });
+        const list: any[] = res?.data ?? res?.records ?? (Array.isArray(res) ? res : []);
+        if (!cancelled) setRecords(Array.isArray(list) ? list : []);
+      } catch {
+        if (!cancelled) setRecords([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource, mapping?.object]);
+
+  const labelOf = (r: any): string => {
+    for (const f of mapping?.labelFields ?? ['name']) if (r?.[f]) return String(r[f]);
+    return String(r?.id ?? '');
+  };
+  const valueOf = (r: any): string => String(r?.[mapping?.storeField ?? 'id'] ?? '');
+
+  const options = React.useMemo(() => {
+    const opts = (records ?? [])
+      .map((r) => ({ value: valueOf(r), label: labelOf(r) }))
+      .filter((o) => o.value);
+    if (value && !opts.some((o) => o.value === value)) opts.unshift({ value, label: value });
+    return opts;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [records, value, mapping]);
+
+  if (!recipientType) {
+    return (
+      <p className={cn('text-sm text-muted-foreground', className)}>
+        Select a recipient type first.
+      </p>
+    );
+  }
+
+  if (!mapping) {
+    // Unknown / unsupported recipient type — keep a plain text input so the
+    // field is never un-editable.
+    return (
+      <input
+        className={cn(
+          'w-full rounded border bg-background px-2 py-1 text-sm',
+          className,
+        )}
+        value={value ?? ''}
+        disabled={disabled || readonly}
+        onChange={(e) => onChange(e.target.value as any)}
+      />
+    );
+  }
+
+  if (readonly) {
+    if (!value) return <EmptyValue />;
+    return <span className={className}>{options.find((o) => o.value === value)?.label ?? value}</span>;
+  }
+
+  return (
+    <Combobox
+      options={options}
+      value={value ?? ''}
+      onValueChange={(v) => onChange(v as any)}
+      placeholder={
+        records === null ? 'Loading…' : `Select a ${recipientType.replace(/_/g, ' ')}`
+      }
+      searchPlaceholder="Search…"
+      emptyText={records === null ? 'Loading…' : 'No matches'}
+      disabled={disabled}
+      className={className}
+    />
+  );
+}
+
+export default RecipientPickerField;