@qoretechnologies/reqraft 0.10.54 → 0.10.55-pr.115.g37abdfc

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

@@ -54,22 +54,24 @@ const waitForText = async (text: string | RegExp) => {
 
 // --- reqraft behavioral stories (kept from the field-migration batch) -------
 
-/** Auto type, no value — the picker is shown and the field area prompts for a type. */
+/** Untyped, no value — the field opens on an editor to type into, never on a type question. */
 export const Empty: Story = {
   args: {},
   parameters: {
     docs: {
       description: {
         story:
-          'Renders AutoFormField with no value or defaultType — the type picker is shown and the field area prompts the operator to pick a data type.',
+          'Renders AutoFormField with no value or defaultType. The field opens on a text editor to type into; it does not show a type picker or ask for a data type.',
       },
     },
   },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
-    // The IDE auto resolves its type in a mount effect — assert asynchronously.
-    await expect(await canvas.findByText('Please select data type')).toBeInTheDocument();
-    // No concrete field is rendered yet.
+    // The type resolves in a mount effect — assert asynchronously.
+    await waitFor(() => expect(canvasElement.querySelector('textarea')).toBeInTheDocument(), {
+      timeout: 5000,
+    });
+    await expect(canvas.queryByText('Please select data type')).not.toBeInTheDocument();
     await expect(canvasElement.querySelector('input[type="number"]')).not.toBeInTheDocument();
   },
 };
@@ -179,7 +181,7 @@ export const Nullable: Story = {
   },
 };
 
-/** The picker can be restricted to a subset of types via `allowedTypes`. */
+/** A field declaring several allowed types still picks between them. */
 export const AllowedTypesSubset: Story = {
   args: {
     allowedTypes: [
@@ -191,14 +193,14 @@ export const AllowedTypesSubset: Story = {
     docs: {
       description: {
         story:
-          'Renders AutoFormField with allowedTypes restricted to Integer and Text — the picker badge shows 2 available types instead of the full 14.',
+          'Renders AutoFormField with allowedTypes restricted to Integer and Text. The type picker offers those 2 types (its badge reads 2), and the field can be typed into meanwhile without being asked for a data type.',
       },
     },
   },
-  async play() {
+  async play({ canvasElement }) {
     // The picker badge reflects the restricted list — 2 instead of 14.
-    await waitForText('Please select data type');
     await waitForText('2');
+    await expect(within(canvasElement).queryByText('Please select data type')).not.toBeInTheDocument();
   },
 };
 
@@ -206,31 +208,35 @@ export const AllowedTypesSubset: Story = {
 export const NoSoftTypes: Story = {
   args: {
     noSoft: true,
+    /* The picker belongs to a value with a type: an untyped field that is
+       empty is typed into, and one holding text has resolved to `string`. */
+    defaultType: 'auto',
+    value: 'some text',
   },
   parameters: {
     docs: {
       description: {
         story:
-          'Renders AutoFormField with noSoft enabled — the soft* type variants are hidden and the picker badge reads 9 instead of 14.',
+          'Renders an untyped AutoFormField holding a text value with noSoft enabled. The picker for the type the value resolved to leaves out the soft* variants, so its badge reads 9 instead of 14.',
       },
     },
   },
-  async play() {
-    await waitForText('Please select data type');
+  async play({ canvasElement }) {
     await waitForText('9');
+    await expect(within(canvasElement).queryByText('Please select data type')).not.toBeInTheDocument();
   },
 };
 
 /**
  * The whole point of the migration: a `FormEngine` schema with a field typed
- * `auto` renders the picker for free, via FormEngine → TemplateField → auto.
+ * `auto` renders the untyped editor for free, via FormEngine → TemplateField → auto.
  */
 export const ViaFormEngine: Story = {
   parameters: {
     docs: {
       description: {
         story:
-          'Renders a FormEngine schema whose single option is typed as auto — the engine flows through TemplateField and renders the AutoFormField picker without any extra wiring.',
+          'Renders a FormEngine schema whose single option is typed as auto. The engine flows through TemplateField to the untyped editor without any extra wiring: an editor to type into, with no data-type question.',
       },
     },
   },
@@ -255,15 +261,76 @@ export const ViaFormEngine: Story = {
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // Generous timeout: findByText defaults to 1s, which flakes under CI load
-    // while the engine boots the auto field's type picker (the rest of the suite
-    // waits ~10s).
+    // while the engine boots the auto field (the rest of the suite waits ~10s).
     await expect(
       await canvas.findByText('My Auto Field', undefined, { timeout: 10000 })
     ).toBeInTheDocument();
-    // The auto field renders its type picker inside the engine-driven form.
+    // The untyped field opens on an editor inside the engine-driven form, and
+    // never asks for a data type.
+    await waitFor(() => expect(canvasElement.querySelector('textarea')).toBeInTheDocument(), {
+      timeout: 10000,
+    });
+    await expect(canvas.queryByText('Please select data type')).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * The ⋮ on that same field holds one group — "Set Custom Value" and the data
+ * types under it — and opens it, rather than asking for a click to reach the
+ * only thing on offer.
+ */
+export const ViaFormEngineMenuOpensItsOnlyGroup: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The untyped field\'s ⋮ holds nothing but the "Set Custom Value" section, so that section is already open: the data types are one click from the menu, not two. Where a menu holds more than one group the sections stay shut, because there the click is the choice.',
+      },
+    },
+  },
+  render: () => {
+    const [val, setVal] = useState<any>({});
+    return (
+      <FormEngine
+        name='autoFieldMenuDemo'
+        options={{
+          myAutoField: {
+            type: 'auto',
+            ui_type: 'auto',
+            display_name: 'My Auto Field',
+            preselected: true,
+          },
+        }}
+        value={val}
+        onChange={(_n, v) => setVal(v)}
+      />
+    );
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
     await expect(
-      await canvas.findByText('Please select data type', undefined, { timeout: 10000 })
+      await canvas.findByText('My Auto Field', undefined, { timeout: 10000 })
     ).toBeInTheDocument();
+
+    const menu = await waitFor(
+      () => {
+        const el = canvasElement.querySelector('.template-more');
+        expect(el).toBeTruthy();
+        return el as HTMLElement;
+      },
+      { timeout: 10000 }
+    );
+    await userEvent.click(menu);
+
+    // The section still names its rows...
+    await waitFor(
+      () => expect(document.body.textContent).toContain('Set Custom Value'),
+      { timeout: 10000 }
+    );
+    // ...and the rows are there to click, with no header click in between.
+    await waitFor(() => expect(document.body.textContent).toContain('Ordered key-value pair'), {
+      timeout: 10000,
+    });
   },
 };
 

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

@@ -7,7 +7,6 @@ import {
   ReqoreControlGroup,
   ReqoreErrorBoundary,
   ReqoreMessage,
-  ReqoreSpinner,
   ReqoreTag,
 } from '@qoretechnologies/reqore';
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
@@ -19,6 +18,7 @@ import { useUpdateEffect } from 'react-use';
 import useMount from 'react-use/lib/useMount';
 import { typedToYaml, yamlToTyped } from '../../../../helpers/common';
 import { getListElementValue } from '../../../../helpers/options';
+import { isSingleLineStringType } from '../../../../helpers/singleLineString';
 import {
   getTypeFromValue,
   getValueOrDefaultValue,
@@ -53,6 +53,8 @@ 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;
@@ -62,9 +64,15 @@ export interface IAutoFieldProps
     IWithReqoreSize,
     Omit<
       TQorusFormFieldSchema,
-      'get_message' | 'return_message' | 'on_change' | 'type' | 'arg_schema'
+      '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;
@@ -261,7 +269,7 @@ function AutoField<T = any>({
     let internalType: IQorusType;
     // If value already exists, but the type is auto or any
     // set the type based on the value
-    if (value && (defType === 'auto' || defType === 'any') && !defaultInternalType) {
+    if (value && isUntypedOptionType(defType) && !defaultInternalType) {
       internalType = getTypeFromValue(maybeParseYaml(value)) as IQorusType;
     } else {
       internalType = defaultInternalType || defType;
@@ -296,7 +304,7 @@ function AutoField<T = any>({
       if (typeValue && typeValue !== currentType) {
         // If this is auto / any field
         // set the internal type
-        if (typeValue === 'auto' || typeValue === 'any') {
+        if (isUntypedOptionType(typeValue)) {
           setInternalType(value ? (getTypeFromValue(maybeParseYaml(value)) as IQorusType) : 'any');
         } else {
           setInternalType(typeValue);
@@ -395,6 +403,13 @@ function AutoField<T = any>({
         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) => {
@@ -457,7 +472,10 @@ function AutoField<T = any>({
   }
 
   if (arg_schema && !finalArgSchema) {
-    return <ReqoreSpinner size='small'>Loading field data...</ReqoreSpinner>;
+    /* 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} />;
   }
 
   const renderAllowedValues = (currentType: IQorusType) => {
@@ -490,6 +508,40 @@ function AutoField<T = any>({
     );
   };
 
+  /* 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) {
@@ -565,18 +617,35 @@ function AutoField<T = any>({
       // 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. */
         case 'string':
+        case 'long-string':
+          return renderTextEditor(currentType);
         case 'data':
         case 'binary':
-        case 'long-string':
           return (
             <LongStringFormField
               {...rest}
-              // These four share one editor but not one 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.
+              /* 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}
@@ -941,17 +1010,17 @@ function AutoField<T = any>({
             />
           );
         }
+        /* 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':
-          return null;
         case 'auto':
-          return (
-            <ReqoreTag
-              intent='warning'
-              minimal
-              icon='ErrorWarningLine'
-              label='Please select data type'
-            />
-          );
+          return renderTextEditor('string');
         default:
           return <ReqoreTag intent='danger' icon='SpamLine' label='Unknown type!' />;
       }
@@ -964,9 +1033,16 @@ function AutoField<T = any>({
     );
   };
 
+  /* 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 ||
-    ((!size(rest.allowed_values) ||
+    (!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)) &&

package/src/components/form/fields/date/Date.tsx

@@ -17,7 +17,22 @@ const toFullIso = (value?: string | Date): string | Date | null => {
   return value;
 };
 
-export const DateFormField = ({ value, onChange, disabled, ...rest }: IDateFormFieldProps) => {
+/**
+ * The language a date is written in: the page's own (`<html lang>`, which is the
+ * application's interface language), else the browser's preferred language.
+ *
+ * Reqore's DatePicker, given no locale, takes the first NON-English entry of
+ * `navigator.languages`, so a browser set to English with French as its second
+ * language showed "jj / mm / aaaa" in an English application.
+ */
+const pageLocale = (): string | undefined => {
+  if (typeof document !== 'undefined' && document.documentElement.lang) {
+    return document.documentElement.lang;
+  }
+  return typeof navigator !== 'undefined' ? navigator.language : undefined;
+};
+
+export const DateFormField = ({ value, onChange, disabled, locale, ...rest }: IDateFormFieldProps) => {
   const theme = useReqoreTheme();
 
   const handleChange = (date: TDateValue): void => {
@@ -27,6 +42,7 @@ export const DateFormField = ({ value, onChange, disabled, ...rest }: IDateFormF
   return (
     <DatePicker
       {...rest}
+      locale={locale ?? pageLocale()}
       style={{ width: '100%' }}
       value={toFullIso(value) as TDateValue}
       onChange={handleChange}

package/src/components/form/fields/long-string/LongString.tsx

@@ -1,6 +1,6 @@
 import { ReqoreTextarea } from '@qoretechnologies/reqore';
 import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useDebounce } from 'react-use';
 import {
   flattenToSingleLine,
@@ -29,16 +29,28 @@ export const LongStringFormField = ({
   ...rest
 }: ILongStringFormFieldProps) => {
   const [localValue, setLocalValue] = useState<string>(value ?? '');
+  /* What this field last TOLD its parent, which is not the same as the value it
+     was given. Comparing against the prop loses a clear wherever the parent
+     does not feed the value back: the prop stays `undefined`, so emptying the
+     text makes `localValue` '' and `value ?? ''` '' too, and the parent never
+     learns the field was emptied. Seeded from the initial value so a mount
+     reports nothing — an empty field's text is '' and its value `undefined`,
+     and reporting that difference marked every form holding an empty text
+     field as changed before anyone typed. */
+  const lastEmittedRef = useRef<string>(value ?? '');
 
   useEffect(() => {
-    if (value !== localValue) {
+    if ((value ?? '') !== localValue) {
       setLocalValue(value ?? '');
     }
+    // A value from outside is not something to report back to whoever sent it.
+    lastEmittedRef.current = value ?? '';
   }, [value]);
 
   useDebounce(
     () => {
-      if (localValue !== value) {
+      if (localValue !== lastEmittedRef.current) {
+        lastEmittedRef.current = localValue;
         onChange?.(localValue);
       }
     },

package/src/components/form/fields/multi-select/MultiSelectFormField.tsx

@@ -2,7 +2,11 @@ import { ReqoreMultiSelect } from '@qoretechnologies/reqore';
 import { TReqoreMultiSelectItem } from '@qoretechnologies/reqore/dist/components/MultiSelect';
 import { IQorusAllowedValue } from '@qoretechnologies/ts-toolkit';
 import { memo, useMemo } from 'react';
-import { getSelectItemShortDescription } from '../select/SelectCollection';
+import {
+  getSelectItemShortDescription,
+  getSelectItemUnavailability,
+  UNAVAILABLE_ITEM_CLASS,
+} from '../select/SelectCollection';
 
 export interface IMultiSelectFormFieldProps {
   /** Currently selected values (plain scalars) */
@@ -32,19 +36,62 @@ export const MultiSelectFormField = memo(
       [JSON.stringify(value)]
     );
 
+    /**
+     * The values this picker will not take, by their string form.
+     *
+     * Only a refusal the SERVER resolved reaches here: this component is handed
+     * the raw `allowed_values`, not the mapped items the single-value pickers
+     * build, so a value's own `depends_on` is not judged against the form —
+     * see `design/UNAVAILABLE_ALLOWED_VALUES.md`.
+     */
+    const refusedValues = useMemo<Set<string>>(
+      () =>
+        new Set(
+          items
+            .filter(
+              (item) =>
+                !!getSelectItemUnavailability({
+                  disabled: item.disabled,
+                  messages: item.messages,
+                })
+            )
+            .map((item) => String(item.value?.value ?? ''))
+        ),
+      [JSON.stringify(items)]
+    );
+
     const reqoreItems = useMemo<TReqoreMultiSelectItem[]>(() => {
       const base = items.map(
         (item): TReqoreMultiSelectItem => {
           const description = getSelectItemShortDescription(item);
+          /* Never reqore's `disabled` for a refused VALUE: it applies
+             `DisabledElement` (`pointer-events: none`), which takes the row's
+             tooltip with it — the one place the whole reason fits. The
+             refusal itself is in `onValueChange` below, because reqore owns
+             this list's selection and there is no per-row handler to drop. */
+          const unavailable = getSelectItemUnavailability({
+            disabled: item.disabled,
+            messages: item.messages,
+          });
 
           return {
             value: item.value?.value as string,
             label: item.display_name ?? String(item.value?.value ?? ''),
-            description,
+            description:
+              unavailable ?
+                [unavailable.title, unavailable.content, description].filter(Boolean).join(' — ')
+              : description,
+            tooltip: unavailable ? unavailable.content : undefined,
+            icon: unavailable ? ('LockLine' as const) : undefined,
+            className: unavailable ? UNAVAILABLE_ITEM_CLASS : undefined,
+            effect: unavailable ? { opacity: 0.55 } : undefined,
+            readOnly: !!unavailable,
             wrap: true,
-            // IDE parity: when `*` is selected, every other item is disabled.
-            disabled:
-              !!item.disabled || (selectedValues.includes('*') && item.value?.value !== '*'),
+            /* IDE parity: when `*` is selected, every other item is disabled.
+               That one stays reqore's `disabled` — the wildcard is a state of
+               the SELECTION rather than a refusal of the value, and it has no
+               reason of its own to protect. */
+            disabled: selectedValues.includes('*') && item.value?.value !== '*',
           };
         }
       );
@@ -63,8 +110,20 @@ export const MultiSelectFormField = memo(
         items={reqoreItems}
         value={selectedValues}
         onValueChange={(selected) => {
+          /* The refusal, for the same reason the rows carry no `disabled`: the
+             row itself has no handler to withhold, so this is where a refused
+             value is dropped. A value already HELD is kept even once it is
+             refused — the picker will not take it again, but clearing an
+             answer the author gave because a sibling edit closed the value is
+             worse than holding one the form can no longer offer.
+
+             Before the wildcard, so that a refused `*` is refused too. */
+          const accepted = selected.filter(
+            (val) => selectedValues.includes(val) || !refusedValues.has(val)
+          );
+
           // IDE parity: picking the `*` wildcard collapses the selection.
-          onChange?.(selected.includes('*') ? ['*'] : (selected as unknown[]));
+          onChange?.(accepted.includes('*') ? ['*'] : (accepted as unknown[]));
         }}
         disabled={disabled}
         size={size as any}