@qoretechnologies/reqraft 0.10.25 → 0.10.26

package/src/components/form/fields/allowed-values/AllowedValues.tsx

@@ -12,8 +12,8 @@ import { ReqoreCheckbox, ReqoreControlGroup, ReqoreSpan } from '@qoretechnologie
 import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
 import { IQorusAllowedValue, TQorusType } from '@qoretechnologies/ts-toolkit';
 import { size as count, isEqual } from 'lodash';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useDebounce } from 'react-use';
+import { memo, useMemo } from 'react';
+import { getSelectItemShortDescription } from '../select/SelectCollection';
 import { ISelectFormFieldItem, SelectFormField as Select } from '../select/Select';
 
 export interface IFieldAllowedValuesProps extends Pick<
@@ -30,6 +30,7 @@ export interface IFieldAllowedValuesProps extends Pick<
   app?: string;
   action?: string;
   showSavedValues?: boolean;
+  forceDropdown?: boolean;
   [key: string]: any;
 }
 
@@ -57,7 +58,7 @@ export const FieldAllowedValuesCheckGroup = memo(
             margin='right'
             key={item.value?.toString()}
             label={item.display_name || JSON.stringify(item.value)}
-            tooltip={item.short_desc || item.desc}
+            tooltip={getSelectItemShortDescription(item)}
             disabled={rest.disabled}
             readOnly={rest.readOnly}
             intent={item.value === value ? 'info' : undefined}
@@ -97,49 +98,23 @@ export const FieldAllowedValues = memo(
     allowCreation,
     showSavedValues,
     showDescription,
+    forceDropdown,
     size,
     disabled,
     name,
     readOnly,
   }: IFieldAllowedValuesProps) => {
-    const [localValue, setLocalValue] = useState(value);
-    const [localItems, setLocalItems] = useState<IQorusAllowedValue[]>(items);
-
-    useEffect(() => {
-      setLocalItems(items);
-    }, [JSON.stringify(items)]);
-
-    const handleLocalChange = useCallback((_name: string, value: unknown) => {
-      setLocalValue(value);
-    }, []);
-
-    useDebounce(
-      () => {
-        if (localValue !== value) {
-          onChange(name, localValue);
-        }
-      },
-      200,
-      [localValue]
-    );
-
-    useEffect(() => {
-      if (value !== localValue) {
-        setLocalValue(value);
-      }
-    }, [value]);
-
     const fullItems = useMemo(() => {
       const result = [
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ...localItems.map(({ metadata, value, ...rest }) => ({
+        ...items.map(({ metadata, value, ...rest }) => ({
           value: value?.value,
           ...rest,
         })),
       ] as ISelectFormFieldItem[];
 
       return result;
-    }, [JSON.stringify(localItems), type, value, showSavedValues, disabled, readOnly]);
+    }, [JSON.stringify(items), type, value, showSavedValues, disabled, readOnly]);
 
     const style = useMemo(() => ({ width: '100%' }), []);
 
@@ -153,8 +128,8 @@ export const FieldAllowedValues = memo(
         return (
           <FieldAllowedValuesCheckGroup
             items={fullItems}
-            onChange={handleLocalChange}
-            value={localValue}
+            onChange={onChange}
+            value={value}
             name={name}
           />
         );
@@ -164,10 +139,11 @@ export const FieldAllowedValues = memo(
         <Select
           items={fullItems}
           value={value}
-          onChange={(value) => handleLocalChange(name, value)}
+          onChange={(value) => onChange(name, value)}
           fluid
           fixed={false}
           showDescription={Boolean(showDescription || showDescription === undefined)}
+          forceDropdown={forceDropdown}
           style={style}
           size={size}
           disabled={disabled}
@@ -178,10 +154,11 @@ export const FieldAllowedValues = memo(
     return (
       <Select
         items={fullItems}
-        onChange={(value) => handleLocalChange(name, value)}
+        onChange={(value) => onChange(name, value)}
         fluid
         fixed={false}
         showDescription={false}
+        forceDropdown={forceDropdown}
         style={style}
         minimal
         placeholder={'Saved & Suggested Values'}

package/src/components/form/fields/array/ArrayAutoField.stories.tsx

@@ -83,6 +83,14 @@ export const CompactEmpty: Story = {
     type: 'string',
     value: [],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with no items — only the entry input and a disabled confirm button are visible.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
 
@@ -102,6 +110,14 @@ export const CompactWithValues: Story = {
     type: 'string',
     value: ['hello', 'world'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with two existing items — the values are shown as tags above the entry input.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
 
@@ -122,6 +138,14 @@ export const CompactAddItem: Story = {
     type: 'string',
     value: ['existing'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with one existing item. Typing into the input and clicking confirm appends the new item and fires onChange with the full list.',
+      },
+    },
+  },
   async play({ args }) {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(1),
@@ -157,6 +181,14 @@ export const CompactEditItem: Story = {
     type: 'string',
     value: ['alpha', 'beta'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with two items. Clicking a tag\'s edit action loads its value into the input; editing and confirming replaces the tag in place.',
+      },
+    },
+  },
   async play({ args }) {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(2),
@@ -199,6 +231,14 @@ export const CompactRemoveItem: Story = {
     type: 'string',
     value: ['one', 'two', 'three'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with three items. Clicking the middle tag\'s remove action drops it from the list and fires onChange with the remaining two.',
+      },
+    },
+  },
   async play({ args }) {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(3),
@@ -230,6 +270,14 @@ export const CompactWithNumbers: Story = {
     value: [10, 20, 30],
     renderItem: numberRenderItem,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact int mode with three numeric items — the tags show 10, 20 and 30 and the entry input uses the Number field.',
+      },
+    },
+  },
   async play() {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(3),
@@ -244,6 +292,14 @@ export const CompactDisabled: Story = {
     value: ['locked'],
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with one item but disabled — the tag is visible without edit/remove actions and no entry input is shown.',
+      },
+    },
+  },
   async play() {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(1),
@@ -267,6 +323,14 @@ export const ComplexHashItems: Story = {
     value: [{ key: 'value' }],
     display_name: 'Hash Items',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in hash mode with one hash item — the field switches to the panel-based layout rather than compact tags.',
+      },
+    },
+  },
   async play() {
     // Should render panel-based UI, not compact tags
     await waitFor(() => expect(document.querySelectorAll('.array-auto-item').length).toBe(1), {

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

@@ -57,6 +57,14 @@ const waitForText = async (text: string | RegExp) => {
 /** Auto type, no value — the picker is shown and the field area prompts for a type. */
 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.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // The IDE auto resolves its type in a mount effect — assert asynchronously.
@@ -71,6 +79,14 @@ export const InferredInteger: Story = {
   args: {
     value: 42,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a pre-existing numeric value of 42 — the type is inferred as int and the numeric input is shown without prompting for a type.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // Resolved → a concrete field renders (post mount effect) and no prompt.
@@ -86,6 +102,14 @@ export const InferredText: Story = {
   args: {
     value: 'hello world',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a pre-existing string value — the type is inferred as string and the text field is shown holding "hello world".',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(await canvas.findByDisplayValue('hello world')).toBeInTheDocument();
@@ -97,6 +121,14 @@ export const ConcreteString: Story = {
   args: {
     defaultType: 'string',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a concrete defaultType of string — the text field is shown directly, no type picker. Typing "abc" fires onChange with the value and inferred type.',
+      },
+    },
+  },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
     // string renders the IDE's LongString field — a textarea. The verbatim
@@ -121,6 +153,14 @@ export const Nullable: Story = {
     value: 'some text',
     canBeNull: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with canBeNull enabled. Clicking "Set as null" clears the value to null, hides the field editor and flips the toggle to "Unset null".',
+      },
+    },
+  },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
 
@@ -147,6 +187,14 @@ export const AllowedTypesSubset: Story = {
       { name: 'string', display_name: 'Text' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with allowedTypes restricted to Integer and Text — the picker badge shows 2 available types instead of the full 14.',
+      },
+    },
+  },
   async play() {
     // The picker badge reflects the restricted list — 2 instead of 14.
     await waitForText('Please select data type');
@@ -159,6 +207,14 @@ export const NoSoftTypes: Story = {
   args: {
     noSoft: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with noSoft enabled — the soft* type variants are hidden and the picker badge reads 9 instead of 14.',
+      },
+    },
+  },
   async play() {
     await waitForText('Please select data type');
     await waitForText('9');
@@ -170,6 +226,14 @@ export const NoSoftTypes: Story = {
  * `auto` renders the picker 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.',
+      },
+    },
+  },
   render: () => {
     const [val, setVal] = useState<any>({});
     return (
@@ -190,9 +254,16 @@ export const ViaFormEngine: Story = {
   },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
-    await expect(await canvas.findByText('My Auto Field')).toBeInTheDocument();
+    // 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).
+    await expect(
+      await canvas.findByText('My Auto Field', undefined, { timeout: 10000 })
+    ).toBeInTheDocument();
     // The auto field renders its type picker inside the engine-driven form.
-    await expect(await canvas.findByText('Please select data type')).toBeInTheDocument();
+    await expect(
+      await canvas.findByText('Please select data type', undefined, { timeout: 10000 })
+    ).toBeInTheDocument();
   },
 };
 
@@ -215,6 +286,14 @@ export const StringWithAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField for a string with two allowed values — the operator picks from the constrained list rather than typing freely.',
+      },
+    },
+  },
 };
 
 export const RichText: Story = {
@@ -224,6 +303,14 @@ export const RichText: Story = {
     allowTemplates: true,
     templates: buildTemplates(templates as any),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in richtext mode with templates enabled. Typing appends to the existing value inside the contenteditable editor.',
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     await waitFor(() => canvasElement.querySelector('div[contenteditable]'), {
       timeout: 15000,
@@ -243,6 +330,7 @@ export const RichText: Story = {
 export const ConnectionWithAllowedValues: Story = {
   args: {
     defaultType: 'connection',
+    forceDropdown: false,
     allowed_values: [
       {
         display_name: 'test',
@@ -257,6 +345,14 @@ export const ConnectionWithAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField for a connection with two allowed values — clicking "Please select" opens the item picker modal titled "Select from items".',
+      },
+    },
+  },
   play: async () => {
     // connection is a no-compact type → the allowed values render as the
     // select with the item collection (the IDE asserts the same modal title).
@@ -270,6 +366,14 @@ export const Hash: Story = {
   args: {
     value: jsyaml.dump({ key: 'value' }),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a YAML-serialized hash value — the type is inferred as hash and the object editor is shown holding the parsed data.',
+      },
+    },
+  },
 };
 
 export const File: Story = {
@@ -281,6 +385,14 @@ export const File: Story = {
       size: 1234,
     },
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in file mode holding a text-file value — the file field shows the file name in place of the drop zone.',
+      },
+    },
+  },
 };
 
 export const AutoDoesNotChangeTypeBackToAuto: Story = {
@@ -288,6 +400,14 @@ export const AutoDoesNotChangeTypeBackToAuto: Story = {
     defaultType: 'auto',
     value: 'test',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in auto mode with a string value — the inferred type ("string") is shown and the picker still exposes all 14 types so the operator can switch away from auto without the field snapping back.',
+      },
+    },
+  },
   play: async () => {
     await waitForText('string');
     await waitForText('14');
@@ -310,6 +430,14 @@ export const ListWithAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in list mode restricted to two allowed list values — the operator picks one of the pre-defined lists rather than composing their own.',
+      },
+    },
+  },
 };
 
 export const ListWithCreatableAllowedValues: Story = {
@@ -330,6 +458,14 @@ export const ListWithCreatableAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in list mode with two allowed values but with allowed_values_creatable enabled — the operator can pick a canned list or compose a custom one.',
+      },
+    },
+  },
 };
 
 export const ListWithElementType: Story = {
@@ -337,4 +473,12 @@ export const ListWithElementType: Story = {
     defaultType: 'list',
     element_type: 'int',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in list mode with an int element type — new items are added as integers rather than requiring the operator to pick a per-item type.',
+      },
+    },
+  },
 };

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

@@ -71,6 +71,9 @@ export interface IAutoFieldProps
   uniqueName?: string;
 
   arg_schema?: string | IOptionsSchema;
+  /** Render the arg_schema sub-form in compact (read-first) mode, matching the
+   *  parent engine. */
+  compact?: boolean;
   path?: string;
   column?: boolean;
   level?: number;
@@ -137,6 +140,7 @@ function AutoField<T = any>({
   noSoft,
   path,
   arg_schema,
+  compact,
   column,
   level = 0,
   canBeNull,
@@ -150,6 +154,12 @@ function AutoField<T = any>({
   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,
   ...rest
 }: IAutoFieldProps & T) {
   const [currentType, setType] = useState<IQorusType>(defaultInternalType || null);
@@ -346,7 +356,12 @@ function AutoField<T = any>({
         {...rest}
         name={name}
         value={value}
-        onChange={(val: any) => handleChange(name, val)}
+        onChange={(val: any, emittedType?: IQorusType, emittedIsFunction?: boolean) => {
+          const returnType = emittedType || currentType;
+          if (onChange && returnType) {
+            onChange(name, val, returnType, emittedIsFunction);
+          }
+        }}
       />
     );
   }
@@ -359,6 +374,7 @@ function AutoField<T = any>({
   ) {
     return (
       <SchemaDefinitionEditor
+        {...((rest as any).fieldProps || {})}
         value={
           value === null || value === undefined
             ? undefined
@@ -404,6 +420,7 @@ function AutoField<T = any>({
         app={rest.app}
         action={rest.action}
         showDescription={rest.showDescription}
+        forceDropdown={rest.forceDropdown}
         allowCreation={rest.allowed_values_creatable}
         showSavedValues={showSavedValues}
         readOnly={rest.readonly}
@@ -540,6 +557,10 @@ function AutoField<T = any>({
               <FormEngine
                 wrapperPadding='top'
                 flat
+                compact={compact}
+                // 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}
@@ -556,6 +577,20 @@ function AutoField<T = any>({
                 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}
               />
             );
           }
@@ -650,6 +685,12 @@ function AutoField<T = any>({
                 allowed_values_creatable={rest.element_allowed_values_creatable}
                 type={effectiveElementType}
                 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);