@qoretechnologies/reqraft 0.10.66-pr.145.gcb1e59d → 0.10.66

package/src/components/form/fields/auto/AutoFormField.tsx

@@ -1,1183 +0,0 @@
-// Verbatim port of qorus-ide `src/components/Field/auto.tsx` — keep edits to
-// the documented seams (leaf-API `onChange` adaptation, `query()`/`FormEngine`
-// swaps) so it stays in sync with the IDE. Intentionally-unported IDE types
-// and the full seam list live in `.tasks/FIELD_STACK_REPORT.md`.
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreErrorBoundary,
-  ReqoreMessage,
-  ReqoreTag,
-} from '@qoretechnologies/reqore';
-import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { IWithReqoreSize } from '@qoretechnologies/reqore/dist/types/global';
-import { TQorusFormFieldSchema, TQorusType } from '@qoretechnologies/ts-toolkit';
-import { isEqual, size, uniqBy } from 'lodash';
-import React, { memo, useCallback, useEffect, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
-import useMount from 'react-use/lib/useMount';
-import { typedToYaml, yamlToTyped } from '../../../../helpers/common';
-import { allowedValueOf } from '../../../../helpers/allowedValues';
-import { getListElementValue } from '../../../../helpers/options';
-import { isSingleLineStringType } from '../../../../helpers/singleLineString';
-import {
-  getTypeFromValue,
-  getValueOrDefaultValue,
-  maybeParseYaml,
-} from '../../../../helpers/validations';
-import { useWhyDidYouUpdate } from '../../../../hooks/useWhyDidYouUpdate';
-import { isQueryCancelled, query } from '../../../../utils/fetch';
-import { DpqlEditor } from '../../../dpqlEditor';
-import { FormEngine, IOptionsSchema } from '../../engine/FormEngine';
-import {
-  DRAWS_OWN_CHOICES_TYPES,
-  FieldAllowedValues,
-  FieldAllowedValuesCheckGroup,
-  rendersCreatableValueSelect,
-} from '../allowed-values/AllowedValues';
-import { ArrayAuto } from '../array/ArrayAuto';
-import BooleanFormField from '../boolean/Boolean';
-import { ByteSizeFormField } from '../byte-size/ByteSize';
-import { TimeoutFormField } from '../timeout/Timeout';
-import ColorFormField from '../color/Color';
-import CronFormField from '../cron/Cron';
-import { DateFormField } from '../date/Date';
-import { IFileFormFieldValue, ReqraftFileFormField } from '../file/File';
-import LongStringFormField from '../long-string/LongString';
-import MarkdownFormField from '../markdown/Markdown';
-import { MultiSelectFormField } from '../multi-select/MultiSelectFormField';
-import NumberFormField from '../number/Number';
-import { ReqraftObjectFormField } from '../object/Object';
-import RadioGroupFormField from '../radio-group/RadioGroup';
-import { RichTextFormField } from '../rich-text/RichText';
-import { SchemaDefinitionEditor } from '../schema-definition';
-import { IDataSchemaDefinition } from '../schema-definition/types';
-import { ISelectFormFieldItem, SelectFormField } from '../select/Select';
-import { StringFormField } from '../string/String';
-import { UrlFormField } from '../url/Url';
-import { FormFieldsSkeleton } from '../../engine/FormFieldsSkeleton';
-import { isUntypedOptionType } from '../../../../helpers/optionUiTypes';
-
-/** UI superset of `TQorusType` — the IDE's `Field/systemOptions` `IQorusType`. */
-export type IQorusType = TQorusType | string;
-
-export interface IAutoFieldProps
-  extends
-    IWithReqoreSize,
-    Omit<
-      TQorusFormFieldSchema,
-      'get_message' | 'return_message' | 'on_change' | 'type' | 'arg_schema' | 'ui_type'
-    > {
-  name?: string;
-  /**
-   * The editor the schema asks for. Optional here although the shared
-   * descriptor requires it: the field renders from `type` / `defaultType` when
-   * there is none, and reads this only to pick an override or a special editor.
-   */
-  ui_type?: IQorusType;
-  value?: any;
-  default_value?: any;
-  type?: IQorusType;
-  onChange?: (name: string, value: any, type?: IQorusType, canBeNull?: boolean) => void;
-  /** From IDE FieldWrapper `IField` — lets `type-depends-on` query sibling fields. */
-  requestFieldData?: (name: string, key: string) => any;
-  canBeNull?: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  uniqueName?: string;
-
-  arg_schema?: string | IOptionsSchema;
-  /** Render the arg_schema sub-form in compact (read-first) mode, matching the
-   *  parent engine. */
-  compact?: boolean;
-  /** Open the arg_schema sub-form's first attention row on mount, without taking
-   *  focus — see FormEngine's `expandFirstRequired`. Set by ArrayAuto on a
-   *  just-added row so its required choice is visible without a second click. */
-  expandFirstRequired?: boolean;
-  path?: string;
-  column?: boolean;
-  level?: number;
-  defaultType?: IQorusType;
-  defaultInternalType?: IQorusType;
-  /**
-   * @deprecated Inert: the type picker never offers a soft type (see
-   * `getImmediateValueTypes`). Kept so existing callers still compile.
-   */
-  noSoft?: boolean;
-
-  /** SEAM: inert in reqraft — saved-values storage is IDE-only. */
-  allowSaving?: boolean;
-  /** SEAM: inert in reqraft — saved-values storage is IDE-only. */
-  showSavedValues?: boolean;
-
-  app?: string;
-  action?: string;
-
-  isConfigItem?: boolean;
-  isVariable?: boolean;
-  disableSearchOptions?: boolean;
-  disableManagement?: boolean;
-
-  allowedTypes?: { name: IQorusType; display_name?: string }[];
-  allowTemplates?: boolean;
-
-  fluid?: boolean;
-
-  showDescription?: boolean;
-
-  templates?: IReqoreFormTemplates;
-  metadata?: ISelectFormFieldItem['metadata'];
-
-  /**
-   * SEAM (reqraft): per-type editor injection — checked by `type` /
-   * `ui_type` before the built-in switch. The IDE re-injects its own
-   * editors (InterfaceSelector, ConnectorField, CodeEditor, …) here at the
-   * dedupe phase; without an override those types render the verbatim
-   * "Unknown type!" tag.
-   */
-  componentOverrides?: Record<string, React.FC<any>>;
-
-  [key: string]: any;
-}
-
-/**
- * The types the picker offers for a value typed into this field.
- *
- * No Qore soft type (`softint`, `softstring`, `softlist`, …) is among them. A
- * soft type is a DECLARATION: it says that whatever a variable or parameter is
- * given is converted to the base type. A value typed in here is already a
- * literal of the type its editor makes, so there is nothing to convert and no
- * editor of its own to draw — the picker used to offer them anyway, and each
- * one drew "Unknown type!".
- */
-export const getImmediateValueTypes = (): { name: IQorusType; display_name: string }[] => [
-  { name: 'bool', display_name: 'True/False' },
-  { name: 'date', display_name: 'Date' },
-  { name: 'string', display_name: 'Text' },
-  { name: 'binary', display_name: 'Binary' },
-  { name: 'float', display_name: 'Decimal' },
-  { name: 'list', display_name: 'List' },
-  { name: 'hash', display_name: 'Key/Value {}' },
-  { name: 'int', display_name: 'Integer' },
-  { name: 'rgbcolor', display_name: 'RGB Color' },
-];
-
-/** @deprecated Use `getImmediateValueTypes()`; every picker now offers this list. */
-export const DefaultNoSoftTypes = getImmediateValueTypes();
-
-/**
- * The type a value is EDITED as: a soft type is edited as its base type.
- *
- * A soft type still reaches this field from data saved before the picker
- * stopped offering them, and from a declared type the server sends (an option
- * or a config item declared `softint`). It is shown and edited as the base
- * type it converts to, so that value keeps its editor; the declared type
- * itself is left as it is and is what the field reports back.
- */
-export const editorTypeOf = <T extends string | undefined | null>(type: T): T =>
-  (typeof type === 'string' && /^soft[a-z]/.test(type) ? type.slice(4) : type) as T;
-
-function AutoField<T = any>({
-  name,
-  onChange,
-  value,
-  default_value,
-  defaultType,
-  defaultInternalType,
-  requestFieldData,
-  type,
-  // Inert (deprecated); destructured so it does not land in `...rest`.
-  noSoft, // eslint-disable-line @typescript-eslint/no-unused-vars
-  path,
-  arg_schema,
-  compact,
-  column,
-  level = 0,
-  canBeNull,
-  isConfigItem,
-  isVariable,
-  allowedTypes,
-  element_type,
-  ui_element_type,
-  disableManagement,
-  allowSaving,
-  showSavedValues,
-  uniqueName,
-  componentOverrides,
-  // qorus#347-followup (scope forwarding): destructure so it does NOT
-  // land in `...rest` — otherwise the primitive field renderers spread
-  // rest onto DOM nodes and React warns about the unknown attribute.
-  // Only the nested arg_schema mount sites re-forward this into their
-  // sub-forms explicitly.
-  inheritedFromParent,
-  // Destructured for the same reason as `inheritedFromParent`: only the nested
-  // sub-form mount site consumes it, and leaving it in `...rest` would spread an
-  // unknown attribute onto the primitive field renderers' DOM nodes.
-  expandFirstRequired,
-  ...rest
-}: IAutoFieldProps & T) {
-  const [currentType, setType] = useState<IQorusType>(defaultInternalType || null);
-  const [storedInternalType, setInternalType] = useState<IQorusType>(
-    defaultInternalType || 'any'
-  );
-  // What the value is edited as; see `editorTypeOf`.
-  const currentInternalType = editorTypeOf(storedInternalType);
-  const [isSetToNull, setIsSetToNull] = useState<boolean>(false);
-  const [finalArgSchema, setFinalArgSchema] = useState<IOptionsSchema>(
-    typeof arg_schema === 'string' ? undefined : arg_schema
-  );
-  const [error, setError] = useState<string>();
-
-  useWhyDidYouUpdate(`Auto field ${name} ${currentType}`, {
-    name,
-    onChange,
-    value,
-    default_value,
-    defaultType,
-    defaultInternalType,
-    requestFieldData,
-    type,
-    path,
-    arg_schema,
-    column,
-    level,
-    canBeNull,
-    isConfigItem,
-    isVariable,
-    allowedTypes,
-    element_type,
-    disableManagement,
-    allowSaving,
-    showSavedValues,
-    uniqueName,
-    ...rest,
-  });
-
-  // Some arg schemas are not provided as objects, but as strings
-  // so we need to fetch them
-  useEffect(() => {
-    if (typeof arg_schema === 'string') {
-      (async () => {
-        /* The await is guarded because `query` can REJECT rather than answer
-           `{ ok: false }` — a malformed instance URL, an aborted request, a
-           transport error. Unguarded, that rejection escaped the async IIFE as
-           an unhandled promise rejection, `setError` never ran, `finalArgSchema`
-           stayed undefined, and the field showed "Loading field data..." for the
-           life of the form: a request that failed instantly and a request that
-           is merely slow looked exactly the same, forever. */
-        try {
-          const schema = await query<IOptionsSchema>({
-            url: `dataprovider/arg_schemas/${arg_schema}`,
-            method: 'GET',
-          });
-
-          if (schema.ok) {
-            setError(undefined);
-            setFinalArgSchema(schema.data);
-          } else {
-            setError(schema.error ?? `The schema "${arg_schema}" could not be loaded.`);
-          }
-        } catch (fetchError) {
-          // abandoned (the query cache was cleared mid-flight), not refused:
-          // there is no schema that "could not be loaded" to report
-          if (isQueryCancelled(fetchError)) {
-            return;
-          }
-          setError(
-            fetchError instanceof Error ?
-              fetchError.message
-            : `The schema "${arg_schema}" could not be loaded.`
-          );
-        }
-      })();
-    } else {
-      setError(undefined);
-      setFinalArgSchema(arg_schema);
-    }
-  }, [JSON.stringify(arg_schema)]);
-
-  useMount(() => {
-    let defType: IQorusType = defaultType && (defaultType.replace(/"/g, '').trim() as any);
-
-    // If default type was not provided, get the type from the value
-    if (!defType) {
-      defType = getTypeFromValue(maybeParseYaml(value)) as IQorusType;
-    }
-
-    let internalType: IQorusType;
-    // If value already exists, but the type is auto or any
-    // set the type based on the value
-    if (value && isUntypedOptionType(defType) && !defaultInternalType) {
-      internalType = getTypeFromValue(maybeParseYaml(value)) as IQorusType;
-    } else {
-      internalType = defaultInternalType || defType;
-    }
-
-    setInternalType(internalType);
-    setType(defType);
-    // If the value is null and can be null, set the null flag
-    if (
-      (getValueOrDefaultValue(value, default_value, _canBeNull(defType)) === 'null' ||
-        getValueOrDefaultValue(value, default_value, _canBeNull(defType)) === null) &&
-      _canBeNull(defType)
-    ) {
-      setIsSetToNull(true);
-    }
-  });
-
-  useUpdateEffect(() => {
-    if (defaultType && storedInternalType !== defaultType) {
-      setType(defaultType);
-      setInternalType(defaultType);
-    }
-  }, [defaultType]);
-
-  useEffect(() => {
-    // Auto field type depends on other fields' value
-    // which will be used as a type
-    if (rest['type-depends-on']) {
-      // Get the requested type
-      const typeValue: IQorusType = requestFieldData(rest['type-depends-on'], 'value');
-      // Check if the field has the value set yet
-      if (typeValue && typeValue !== currentType) {
-        // If this is auto / any field
-        // set the internal type
-        if (isUntypedOptionType(typeValue)) {
-          setInternalType(value ? (getTypeFromValue(maybeParseYaml(value)) as IQorusType) : 'any');
-        } else {
-          setInternalType(typeValue);
-        }
-        // Set the new type
-        setType(typeValue);
-        if (!currentType) {
-          handleChange(name, value === undefined ? undefined : value, typeValue);
-        } else if (typeValue !== 'any') {
-          const typeFromValue =
-            value || value === null ? getTypeFromValue(maybeParseYaml(value)) : 'any';
-
-          handleChange(
-            name,
-            value === null ? null : typeValue === typeFromValue ? value : undefined,
-            typeValue
-          );
-        }
-      }
-    }
-    // If can be undefined was toggled off, but the value right now is null
-    // we need to set the ability to be null to false and remove
-    if (!_canBeNull() && isSetToNull) {
-      setIsSetToNull(false);
-      handleChange(name, null);
-    }
-  });
-
-  const _canBeNull = (type = currentType) => {
-    if (type === 'any' || canBeNull) {
-      return true;
-    }
-
-    if (requestFieldData) {
-      return requestFieldData('can_be_undefined', 'value');
-    }
-
-    return false;
-  };
-
-  const handleChange: (name: string, val: any, type?: IQorusType) => void = useCallback(
-    (name, val, type) => {
-      const returnType: IQorusType = type || currentType;
-      // Run the onchange
-      if (onChange && returnType) {
-        onChange(name, val, returnType, _canBeNull(returnType));
-      }
-    },
-    [currentInternalType, currentType, onChange]
-  );
-
-  const handleListObjectChange = useCallback(
-    (name, val, type) => {
-      const typedValue = yamlToTyped(val);
-      handleChange(name, typedValue?.value, type);
-    },
-    [handleChange]
-  );
-
-  const handleTypeChange: (name: string, type?: IQorusType) => void = (name, type) => {
-    // Run the onchange
-    onChange?.(name, null, 'auto');
-    setInternalType(type);
-  };
-
-  const handleNullToggle = () => {
-    setType(defaultType || 'any');
-    setInternalType(defaultType || 'any');
-    setIsSetToNull((current) => {
-      return !current;
-    });
-
-    // Handle change
-    handleChange(name, isSetToNull ? undefined : null);
-  };
-
-  // SEAM (reqraft): consumer-injected editors for types reqraft doesn't
-  // ship (the IDE's processor-mappings, tool-catalog, test-cases,
-  // active-windows, collection-documents, data-provider, interface
-  // selectors, code-editor, …).
-  const Override =
-    componentOverrides?.[type as string] || componentOverrides?.[(rest as any).ui_type];
-  if (Override) {
-    return (
-      <Override
-        {...rest}
-        // The field's SHAPE, which `rest` does not carry: these three are
-        // destructured into named props above, so a host editor received a
-        // field it could not describe. `arg_schema` is the sub-schema a host
-        // sub-form renders FROM — without it the IDE's test-cases drawer fell
-        // back to humanising each key, so `Path`, `Actual` and `Expected` were
-        // asked for with no label of their own and no description, while the
-        // text sat one fetch away. `element_type`/`ui_element_type` travel with
-        // it: a sub-schema alone cannot say whether the value is one hash or a
-        // list of them.
-        arg_schema={arg_schema}
-        element_type={element_type}
-        ui_element_type={ui_element_type}
-        // Same reason as the three above: it is destructured out of `rest` so the
-        // primitive renderers do not spread it onto a DOM node, which also took
-        // it away from host editors — and a host editor is exactly what
-        // `inherit_props` exists to feed. A field declaring it got the values
-        // resolved and then had nowhere to send them, so every consumer
-        // downstream saw `undefined` and silently did nothing.
-        inheritedFromParent={inheritedFromParent}
-        name={name}
-        value={value}
-        onChange={(val: any, emittedType?: IQorusType, emittedIsFunction?: boolean) => {
-          const returnType = emittedType || currentType;
-          if (onChange && returnType) {
-            onChange(name, val, returnType, emittedIsFunction);
-          }
-        }}
-      />
-    );
-  }
-
-  // Render the structured DataSchema editor for the schema object's
-  // `definition` hash — server-driven via `?action=options` (qorus#225).
-  if (
-    (type as string) === 'schema-definition' ||
-    (rest as any).ui_type === 'schema-definition'
-  ) {
-    return (
-      <SchemaDefinitionEditor
-        {...((rest as any).fieldProps || {})}
-        value={
-          value === null || value === undefined
-            ? undefined
-            : (value as IDataSchemaDefinition)
-        }
-        onChange={(definition) => handleChange(name, definition, 'hash')}
-        readOnly={rest.readonly || rest.disabled}
-      />
-    );
-  }
-
-  // Render the Monaco DPQL editor for a DPQL match-expression field
-  // (alert rules / silences opt their `match` field in via `ui_type`).
-  if ((type as string) === 'dpql' || (rest as any).ui_type === 'dpql') {
-    return (
-      <DpqlEditor
-        value={typeof value === 'string' ? value : value == null ? '' : String(value)}
-        onChange={(next) => handleChange(name, next, 'string')}
-        readOnly={rest.readonly || rest.disabled}
-      />
-    );
-  }
-
-  /* The error is checked BEFORE the spinner, and the spinner waits on the error
-     being absent.
-
-     A named `arg_schema` is fetched (`dataprovider/arg_schemas/<name>`), and when
-     that fetch failed `finalArgSchema` stayed undefined forever — so this spinner
-     returned on every subsequent render and the `if (error)` branch further down
-     was unreachable. The field sat on "Loading field data..." for the life of the
-     form with no way to find out why, which is indistinguishable from a request
-     that is merely slow. */
-  if (arg_schema && !finalArgSchema && error) {
-    return (
-      <ReqoreMessage intent='danger' size='small'>
-        {error}
-      </ReqoreMessage>
-    );
-  }
-
-  if (arg_schema && !finalArgSchema) {
-    /* One ROW, because this stands in for one field. It was a spinner reading
-       "Loading field data…", which is a different picture from every other
-       wait on the page and announces a delay the reader cannot act on. */
-    return <FormFieldsSkeleton rows={1} reason='arg-schema' />;
-  }
-
-  const renderAllowedValues = (currentType: IQorusType) => {
-    if (rest.allowed_values_creatable && (!currentInternalType || currentInternalType === 'auto')) {
-      return null;
-    }
-
-    return (
-      <FieldAllowedValues
-        items={rest.allowed_values}
-        type={currentType as TQorusType}
-        elementType={ui_element_type || element_type}
-        value={value}
-        name={name}
-        onChange={handleChange}
-        // The picker heads itself with the field's own name rather than a
-        // generic "Select one:".
-        label={rest.display_name}
-        size={rest.size}
-        disabled={rest.disabled}
-        app={rest.app}
-        action={rest.action}
-        showDescription={rest.showDescription}
-        forceDropdown={rest.forceDropdown}
-        allowCreation={rest.allowed_values_creatable}
-        showSavedValues={showSavedValues}
-        readOnly={rest.readonly}
-        canAutoSelect={!size(rest.required_groups)}
-      />
-    );
-  };
-
-  /* Text that may hold template references is edited in the chip editor
-     whenever the field offers templates (`RichTextFormField`, `text` format):
-     each reference is drawn as the name it was chosen by and the value stays the
-     plain string. Text holding a reference anywhere but its start
-     (`Interface $local:id failed`) never enters template mode, so in a textarea
-     its references read as their spelling. */
-  const offersTemplates = rest.allowTemplates !== false && size(rest.templates?.items) > 0;
-  const renderTextEditor = (editorType: string) =>
-    offersTemplates ?
-      <RichTextFormField
-        {...rest}
-        valueFormat='text'
-        singleLine={isSingleLineStringType(editorType)}
-        allowTemplates
-        /* Stringified rather than blanked: an `auto` field resolved to a text
-           type can be holding a number, and showing an empty box for it reads
-           as the value having been lost. A non-string coming back out is not a
-           value this editor produced, so it is ignored rather than written as
-           '' over what is there. */
-        value={String(value ?? '')}
-        onChange={(next) => {
-          if (typeof next !== 'string') {
-            return;
-          }
-          handleChange(name, next);
-        }}
-      />
-    : <LongStringFormField
-        {...rest}
-        type={editorType}
-        onChange={(next) => handleChange(name, next)}
-        value={value}
-      />;
-
-  const renderField = (currentType: IQorusType) => {
-    // If this field is set to null
-    if (isSetToNull) {
-      // Render a readonly field with null
-      return <StringFormField value='null' readOnly />;
-    }
-
-    if (!currentType) {
-      return null;
-    }
-    // Check if there is a `<` in the type
-    const pos: number = (currentType as string).indexOf('<');
-
-    if (pos > 0) {
-      // Get the type from start to the position of the `<`
-      currentType = (currentType as string).slice(0, pos) as IQorusType;
-    }
-
-    // Readonly fields whose value is a primitive (string / number / boolean)
-    // get the compact button shortcut below. Complex values — Slate
-    // documents for richtext, lists, hashes — MUST fall through to the
-    // switch-case so their kind-specific renderer (RichTextField,
-    // LongStringField, …) handles the read-only display. Rendering a Slate
-    // doc as a ReqoreButton label otherwise lands an object in JSX
-    // children and React crashes with "Objects are not valid as a React
-    // child (found: object with keys {type, children})".
-    const isPrimitiveValue =
-      value === null ||
-      value === undefined ||
-      typeof value === 'string' ||
-      typeof value === 'number' ||
-      typeof value === 'boolean';
-
-    if (rest.readonly && isPrimitiveValue) {
-      return (
-        <ReqoreButton
-          readOnly
-          fluid
-          label={value === default_value ? rest.default_value_display_name || value : value}
-          customTheme={{
-            main: 'main:darken:2',
-          }}
-          description={value === default_value ? rest.default_value_desc : undefined}
-        />
-      );
-    }
-
-    // A creatable string field's value is held by the chip picker that
-    // `renderAllowedValues` draws below, so a raw editor here would be a
-    // second control for the same value.
-    if (
-      rendersCreatableValueSelect(
-        currentType,
-        rest.allowed_values_creatable,
-        rest.allowed_values
-      )
-    ) {
-      return null;
-    }
-
-    // Non-creatable allowed_values render through FieldAllowedValues
-    // (`renderAllowedValues` below) — a radio CheckGroup for ≤3 simple values, a
-    // Select otherwise — matching the IDE (which returns null here). The exceptions
-    // are the editors that draw their own choices (`DRAWS_OWN_CHOICES_TYPES`: the
-    // enum radio group and the multi-select), which FieldAllowedValues skips, so they
-    // fall through. f5f2e11 had returned a second RadioGroup here, which duplicated
-    // FieldAllowedValues for string allowed-value fields.
-    if (
-      rest.allowed_values &&
-      !rest.allowed_values_creatable &&
-      !DRAWS_OWN_CHOICES_TYPES.includes(currentType as string)
-    ) {
-      return null;
-    }
-
-    const renderFieldComponent = () => {
-      // Render the field based on the type. SEAM (reqraft): `long-string` is
-      // reqraft FormField vocabulary — the IDE calls it `string` (both render
-      // the textarea field).
-      switch (currentType) {
-        /* These four share an editor but not a shape: a `string` holds exactly
-           one line, while `data`, `binary` and `long-string` hold a document.
-           Without the type the field cannot tell them apart and treats them all
-           as documents, so an interface's Internal Name — which becomes a YAML
-           key — accepted Enter. Only text takes references; `data` and
-           `binary` are encoded content, where a chip would stand for nothing.
-
-           The semantic string formats (`email` … `phone`) are one line of text
-           whose identity the validator checks. They are in the option vocabulary
-           (`optionUiTypes`) and the single-line list, but had no case here, so a
-           field of one drew "Unknown type!" in every form. */
-        case 'string':
-        case 'long-string':
-        case 'email':
-        case 'uri':
-        case 'uuid':
-        case 'hostname':
-        case 'ipv4':
-        case 'ipv6':
-        case 'phone':
-          return renderTextEditor(currentType);
-        case 'data':
-        case 'binary':
-          return (
-            <LongStringFormField
-              {...rest}
-              /* Say what the field takes before it is typed into. The server
-                 decodes a binary value as base64 unless it is told otherwise
-                 (`lib/misc.ql` `_priv_parse_ui_hash_value_intern`, symmetric
-                 with the `toBase64()` it encodes with), and bare hex is the
-                 trap: it is not rejected, it is read as base64 and corrupts.
-                 `validateField` already accepts exactly these three spellings
-                 — this is that rule said up front instead of after the fact.
-                 Kept short enough to read in one line at phone width, where a
-                 longer hint wrapped out of the field's single visible row. */
-              placeholder={
-                currentType === 'binary' ?
-                  ((rest as { placeholder?: string }).placeholder ??
-                  'Base64, 0x hex, or data: URL')
-                : (rest as { placeholder?: string }).placeholder
-              }
-              type={currentType}
-              onChange={(value) => handleChange(name, value)}
-              value={value}
-            />
-          );
-        // reqraft ships these editors (see Field.tsx), but the compact /
-        // TemplateField path dispatches through AutoFormField — bridge them so
-        // they render here instead of falling through to "Unknown type!".
-        case 'markdown':
-          return (
-            <MarkdownFormField
-              {...rest}
-              onChange={(value) => handleChange(name, value)}
-              value={value}
-            />
-          );
-        case 'cron':
-          return (
-            <CronFormField
-              {...rest}
-              onChange={(value) => handleChange(name, value)}
-              value={value}
-            />
-          );
-        case 'processor':
-        case 'richtext': {
-          return (
-            <RichTextFormField
-              {...rest}
-              onChange={(value) => {
-                handleChange(name, value);
-              }}
-              value={value}
-            />
-          );
-        }
-        case 'bool':
-        case 'boolean':
-          return (
-            <BooleanFormField
-              {...rest}
-              checked={!!value}
-              onChange={(checked) => handleChange(name, checked)}
-            />
-          );
-        case 'date':
-          return (
-            <DateFormField
-              {...rest}
-              onChange={(val) => handleChange(name, val)}
-              value={value}
-            />
-          );
-        case 'hash':
-        case 'free-hash': {
-          if (finalArgSchema) {
-            return (
-              <FormEngine
-                wrapperPadding='top'
-                flat
-                compact={compact}
-                // A row added just now: open the field it cannot be saved
-                // without, instead of making the author find it and click it.
-                expandFirstRequired={expandFirstRequired}
-                // Embedded sub-form: no scroll context of its own, so its toolbar
-                // isn't sticky and its header stays transparent (no dark backdrop).
-                compactNested
-                name={name}
-                uniqueName={uniqueName}
-                options={finalArgSchema}
-                value={value === null ? undefined : value}
-                templateFieldProps={{
-                  level: level + 1,
-                }}
-                allowTemplates
-                onChange={(name, value) => {
-                  handleChange(name, value, 'hash');
-                }}
-                columns={1}
-                minColumnWidth='150px'
-                stringTemplates={rest.templates}
-                size={rest.size}
-                disabled={rest.disabled}
-                // Forward consumer-injected editors into the nested sub-form
-                // so its own fields can render host-injected types (e.g. a
-                // `code-editor` override for a `body` sub-field inside a
-                // list-of-hash row). Was missing pre-qorus#347-followup —
-                // catches an existing gap surfaced by the nested inherit_props
-                // story.
-                componentOverrides={componentOverrides}
-                // qorus#347-followup (scope forwarding): thread the accumulated
-                // inheritance bag into the nested sub-form so its own fields'
-                // `inherit_props` can reach ancestor-scope values (e.g. a
-                // service-method row's `body` picking up `language` from the
-                // parent service form). The parent FormEngine populates this
-                // via TemplateField -> AutoFormField's `rest`.
-                inheritedFromParent={inheritedFromParent}
-              />
-            );
-          }
-
-          const yamlValue = value ? typedToYaml({ type: 'hash', value }) : value;
-
-          return (
-            <ReqraftObjectFormField
-              value={yamlValue}
-              onChange={(value) => handleListObjectChange(name, value, 'hash')}
-              type='object'
-              dataType='yaml'
-              resultDataType='yaml'
-              {...rest}
-            />
-          );
-        }
-        case 'list':
-        case 'free-list': {
-          if (
-            ui_element_type ||
-            element_type ||
-            (rest.element_allowed_values && !rest.element_allowed_values_creatable)
-          ) {
-            const formatToServerValue = (value) => {
-              return (value || []).map((item) => {
-                // If this value is actually in allowed values, just return it
-                if (rest.element_allowed_values?.find((ev) => isEqual(ev.value, item))) {
-                  return item;
-                }
-
-                return {
-                  value: item,
-                  type:
-                    ui_element_type ||
-                    element_type ||
-                    rest.element_allowed_values?.find((ev) => isEqual(ev.value, item))?.ui_type,
-                };
-              });
-            };
-
-            // An element may arrive bare or in a `{value, type}` envelope. The
-            // envelope is what `formatToServerValue` writes, so a list the user
-            // has edited in this session is always wrapped — but a list read
-            // back from storage holds exactly what the server contract asks
-            // for, which for a list of strings is the strings themselves.
-            // Reaching for `.value` on those answered `undefined` for every
-            // element: the row rendered as an empty, invalid item, and the
-            // emptiness was then written back over the stored value.
-            const formatFromServerValue = (value) => {
-              return (value || []).map(getListElementValue);
-            };
-
-            const mappedAllowedValues = rest.element_allowed_values?.map((ev) => ({
-              ...ev,
-              value: ev.value?.value,
-            }));
-
-            if (
-              rest.element_allowed_values &&
-              !rest.element_allowed_values_creatable &&
-              !rest.allowed_values_creatable
-            ) {
-              if (size(rest.element_allowed_values) <= 3) {
-                return (
-                  <FieldAllowedValuesCheckGroup
-                    items={mappedAllowedValues}
-                    value={formatFromServerValue(value)}
-                    multiSelect
-                    onChange={(_name, value) => {
-                      handleChange(name, formatToServerValue(value));
-                    }}
-                  />
-                );
-              }
-
-              // the multi-select reads each item's `{type, value}` envelope itself, as Field.tsx gives it;
-              // handing it the unwrapped values left every choice `undefined`, so a pick stored an empty
-              // element and drew an "undefined" chip
-              return (
-                <MultiSelectFormField
-                  items={rest.element_allowed_values}
-                  value={formatFromServerValue(value)}
-                  onChange={(selected) => {
-                    handleChange(name, formatToServerValue(selected));
-                  }}
-                  disabled={rest.disabled}
-                  size={rest.size}
-                />
-              );
-            }
-
-            const effectiveElementType = ui_element_type || element_type;
-
-            return (
-              <ArrayAuto
-                {...rest}
-                level={level + 1}
-                arg_schema={finalArgSchema}
-                name={name}
-                value={formatFromServerValue(value)}
-                allowed_values={rest.element_allowed_values}
-                allowed_values_creatable={rest.element_allowed_values_creatable}
-                type={effectiveElementType}
-                // Propagate compact into every row, exactly as the `hash` case
-                // above does for a single sub-form. `compact` is destructured
-                // out of `rest`, so without this each row's AutoFormField saw
-                // `compact: undefined` and its arg_schema sub-form fell back to
-                // the classic FormEngine — a list-of-hash field inside a compact
-                // form rendered stacked labels + an option filter, while every
-                // sibling field rendered as a compact read-first row.
-                compact={compact}
-                componentOverrides={componentOverrides}
-                // qorus#347-followup (scope forwarding): thread the accumulated
-                // inheritance bag through the list wrapper so each row's
-                // arg_schema sub-form sees it. ArrayAuto forwards this via
-                // TemplateField's `rest` into each row's AutoFormField, which
-                // hands it to the row's nested FormEngine (case 'hash' above).
-                inheritedFromParent={inheritedFromParent}
-                onChange={(name, value) => {
-                  if (!size(value)) {
-                    return handleChange(name, undefined);
-                  }
-
-                  handleChange(name, formatToServerValue(value));
-                }}
-              />
-            );
-          }
-
-          const yamlValue = value ? typedToYaml({ type: 'list', value }) : value;
-
-          return (
-            <ReqraftObjectFormField
-              value={yamlValue}
-              onChange={(value) => handleListObjectChange(name, value, 'list')}
-              type='array'
-              dataType='yaml'
-              resultDataType='yaml'
-              {...rest}
-            />
-          );
-        }
-        case 'int':
-        case 'integer':
-        case 'float':
-        case 'number':
-          return (
-            <NumberFormField
-              {...rest}
-              onChange={(value) => handleChange(name, value)}
-              value={value}
-            />
-          );
-        // A connection's `connect_timeout` / `timeout` arrive from
-        // `getCreateConnectionOptions` as `type: 'timeout'` with a bare-integer
-        // default (45000) and an "in milliseconds" description. The value stays
-        // that integer millisecond count — TimeoutFormField only adds the
-        // unit-aware display. Extras are trimmed the same way as `byte-size`
-        // below: `rest` carries `templates`, which would flip the inner
-        // NumberFormField into its templates-dropdown variant.
-        case 'timeout':
-          return (
-            <TimeoutFormField
-              value={value}
-              onChange={(val) => handleChange(name, val)}
-              disabled={rest.disabled}
-              readOnly={rest.readonly}
-              size={rest.size}
-              aria-label={rest['aria-label']}
-            />
-          );
-        case 'byte-size':
-          // The IDE spreads `{...rest}` here but its ByteSizeField ignores
-          // extras — reqraft's forwards them into the amount input, and `rest`
-          // carries `templates` (which would flip NumberFormField into its
-          // templates-dropdown variant), so only `aria-label` is forwarded.
-          return (
-            <ByteSizeFormField
-              value={value}
-              onChange={(val) => handleChange(name, val)}
-              disabled={rest.disabled}
-              readOnly={rest.readonly}
-              size={rest.size}
-              aria-label={rest['aria-label']}
-            />
-          );
-        case 'enum': {
-          // Two option shapes describe the same enum: reqraft `allowed_values`
-          // ({ value: { type, value }, display_name, image }) and the IDE
-          // `items` ({ value, title, display_name?, image? }). Accept both so a
-          // server-driven enum field (e.g. language) renders its choices —
-          // previously only `allowed_values` was read, leaving `items` empty.
-          const enumItems = (rest.allowed_values as any[] | undefined)?.length
-            ? (rest.allowed_values as any[]).map((av) => ({
-                label: av.display_name ?? String(allowedValueOf(av)),
-                value: allowedValueOf(av),
-                image: av.image,
-                icon: av.icon,
-              }))
-            : ((rest as any).items as any[] | undefined ?? []).map((it) => ({
-                label: it.display_name ?? it.title ?? String(it.value),
-                value: it.value,
-                image: it.image,
-                icon: it.icon,
-              }));
-          return (
-            <RadioGroupFormField
-              items={enumItems}
-              value={value}
-              onChange={(val) => handleChange(name, val)}
-              disabled={rest.disabled}
-            />
-          );
-        }
-        case 'url': {
-          return (
-            <UrlFormField
-              {...rest}
-              value={value}
-              onChange={(val) => handleChange(name, val)}
-            />
-          );
-        }
-        case 'select-string': {
-          return (
-            <SelectFormField
-              items={(rest.allowed_values || []).map((av) => ({
-                ...av,
-                value: allowedValueOf(av),
-              }))}
-              value={value}
-              onChange={(val) => handleChange(name, val)}
-            />
-          );
-        }
-        case 'select-array':
-        case 'multi-select': {
-          return (
-            <MultiSelectFormField
-              items={rest.allowed_values ?? []}
-              value={(value as unknown[]) ?? []}
-              onChange={(selected) => handleChange(name, selected)}
-              canCreateItems={rest.allowed_values_creatable || !size(rest.allowed_values)}
-              disabled={rest.disabled}
-              size={rest.size}
-            />
-          );
-        }
-        case 'file':
-        case 'file-as-string': {
-          return (
-            <ReqraftFileFormField
-              onChange={(val) => handleChange(name, val)}
-              options={rest.type_options}
-              value={value as IFileFormFieldValue}
-              argSchema={finalArgSchema as any}
-              {...rest}
-            />
-          );
-        }
-        case 'rgbcolor': {
-          return (
-            <ColorFormField
-              {...rest}
-              value={!value ? undefined : value}
-              onChange={(color) => handleChange(name, color)}
-            />
-          );
-        }
-        /* An UNTYPED field is typed into, never asked for a type.
-
-           It used to show a type picker and "Please select data type" — a
-           question about storage ("is this a Text or a Number?") that an author
-           writing a value often cannot answer, asked before they could write
-           anything. What is typed is stored untyped, exactly as template mode
-           stores it; a value of an explicit type is set from the field's ⋮ menu
-           (see `FormEngine`'s `getCustomMenuTemplateItems`). */
-        case 'any':
-        case 'auto':
-          return renderTextEditor('string');
-        default:
-          return <ReqoreTag intent='danger' icon='SpamLine' label='Unknown type!' />;
-      }
-    };
-
-    return (
-      <ReqoreControlGroup vertical={false} fluid={true} verticalAlign='flex-start'>
-        {renderFieldComponent()}
-      </ReqoreControlGroup>
-    );
-  };
-
-  /* No picker while the type is unresolved: the field is typed into instead
-     (see the `auto` / `any` editor above). A field declaring several allowed
-     types still picks between THOSE — that is a choice the schema offers, not a
-     question about storage. */
-  const typeIsUnresolved =
-    !currentInternalType || isUntypedOptionType(currentInternalType);
-  const showPicker =
-    size(allowedTypes) > 1 ||
-    (!typeIsUnresolved &&
-    (!size(rest.allowed_values) ||
-      (size(rest?.allowed_values) > 0 && !rest.allowed_values_creatable) ||
-      !size(rest.element_allowed_values) ||
-      (size(rest?.element_allowed_values) > 0 && !rest.element_allowed_values_creatable)) &&
-      !isSetToNull &&
-      (defaultType === 'auto' ||
-        defaultType === 'any' ||
-        currentType === 'auto' ||
-        currentType === 'any'));
-
-  // A caller's own list is offered as the editors it names, so a soft type in
-  // it is offered once, as its base type.
-  const types = allowedTypes
-    ? uniqBy(
-        allowedTypes.map((allowed) => {
-          const name = editorTypeOf(allowed.name);
-          return {
-            ...allowed,
-            name,
-            display_name:
-              allowed.display_name ||
-              getImmediateValueTypes().find((type) => type.name === name)?.display_name,
-          };
-        }),
-        'name'
-      )
-    : getImmediateValueTypes();
-
-  if (error) {
-    return <ReqoreMessage intent='danger'>{error}</ReqoreMessage>;
-  }
-
-  if (arg_schema) {
-    return (
-      <ReqoreControlGroup vertical className='auto-field-schema-wrapper' fluid>
-        {renderField(currentInternalType)}
-        {currentInternalType && currentInternalType !== 'auto'
-          ? renderAllowedValues(currentInternalType)
-          : null}
-      </ReqoreControlGroup>
-    );
-  }
-
-  // Render type picker if the type is auto or any
-  return (
-    <ReqoreErrorBoundary>
-      <ReqoreControlGroup {...rest} className={`auto-field-group`} vertical fluid>
-        {showPicker && (
-          <SelectFormField
-            fixed
-            flat
-            minimal={rest.minimal}
-            size={rest.size}
-            items={types as ISelectFormFieldItem[]}
-            /* A count on a fixed list of types says nothing the open list
-               does not; the IDE's picker shows none either. */
-            hideItemCount
-            value={currentInternalType}
-            onChange={(value) => {
-              handleTypeChange(name, value as IQorusType);
-            }}
-          />
-        )}
-        {renderField(currentInternalType)}
-        {renderAllowedValues(currentInternalType)}
-        {canBeNull && (
-          <ReqoreButton
-            intent={isSetToNull ? 'warning' : undefined}
-            icon={isSetToNull ? 'CloseLine' : undefined}
-            onClick={handleNullToggle}
-            fixed
-          >
-            {isSetToNull ? 'Unset null' : 'Set as null'}
-          </ReqoreButton>
-        )}
-      </ReqoreControlGroup>
-    </ReqoreErrorBoundary>
-  );
-}
-
-export const AutoFormField = memo(AutoField) as React.FC<IAutoFieldProps>;