@qoretechnologies/reqraft 0.10.60-pr.133.gc8250dd → 0.10.60

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

@@ -52,6 +52,94 @@ const waitForText = async (text: string | RegExp) => {
   await waitFor(() => expect(body.queryAllByText(text)[0]).toBeTruthy(), { timeout: 10000 });
 };
 
+/** The readable names of the types an untyped field's picker offers. */
+const IMMEDIATE_TYPE_NAMES = [
+  'True/False',
+  'Date',
+  'Text',
+  'Binary',
+  'Decimal',
+  'List',
+  'Key/Value {}',
+  'Integer',
+  'RGB Color',
+];
+
+/**
+ * Opens the type picker and returns the open list. Asserts the closed trigger
+ * reads `label` (the chosen type's readable name) when one is given, and that
+ * it carries no item count: a count on a fixed list of types is noise.
+ */
+const openTypePicker = async (canvasElement: HTMLElement, label?: string) => {
+  const trigger = await waitFor(
+    () => {
+      const button = canvasElement.querySelector(
+        '.auto-field-group [aria-haspopup]'
+      ) as HTMLElement | null;
+      expect(button).toBeTruthy();
+      return button!;
+    },
+    { timeout: 10000 }
+  );
+  if (label) {
+    await waitFor(() => expect(trigger.textContent).toContain(label), { timeout: 10000 });
+  }
+  await expect(trigger.querySelector('.reqore-button-badge')).toBeNull();
+  await userEvent.click(trigger);
+  return waitFor(
+    () => {
+      const el = document.querySelector('.reqore-popover-content') as HTMLElement | null;
+      expect(el).toBeTruthy();
+      return el!;
+    },
+    { timeout: 10000 }
+  );
+};
+
+/**
+ * Closes the open type picker the way an author does — a click outside the
+ * list (reqore's popover closes on an outside click; Escape could discard an
+ * edit) — and waits until the list is gone.
+ */
+const closeTypePicker = async (popover: HTMLElement) => {
+  await userEvent.click(document.body);
+  await waitFor(
+    () => {
+      expect(popover.isConnected).toBe(false);
+      expect(document.querySelector('.reqore-popover-content')).toBeNull();
+    },
+    { timeout: 10000 }
+  );
+};
+
+/**
+ * Nothing (an open list) covers the control: it is on top at its centre and
+ * across its width — a full-width editor's centre is clear of a narrow list
+ * anchored at its left, so the centre alone would not show it.
+ */
+const expectUncovered = async (control: HTMLElement) => {
+  const box = control.getBoundingClientRect();
+  for (const fraction of [0.1, 0.3, 0.5, 0.7, 0.9]) {
+    const hit = document.elementFromPoint(
+      box.left + box.width * fraction,
+      box.top + box.height / 2
+    );
+    await expect(hit !== null && (hit === control || control.contains(hit))).toBe(true);
+  }
+};
+
+const expectOffered = async (popover: HTMLElement, labels: string[]) => {
+  await waitFor(
+    () => {
+      for (const label of labels) {
+        expect(within(popover).getAllByText(label, { exact: true }).length).toBeGreaterThan(0);
+      }
+    },
+    { timeout: 10000 }
+  );
+  await expect(within(popover).queryByText(/^soft/)).not.toBeInTheDocument();
+};
+
 // --- reqraft behavioral stories (kept from the field-migration batch) -------
 
 /** Untyped, no value — the field opens on an editor to type into, never on a type question. */
@@ -193,21 +281,21 @@ export const AllowedTypesSubset: Story = {
     docs: {
       description: {
         story:
-          '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.',
+          'Renders AutoFormField with allowedTypes restricted to Integer and Text. The type picker offers exactly those 2 types, with no item count, and the field can be typed into meanwhile without being asked for a data type.',
       },
     },
   },
   async play({ canvasElement }) {
-    // The picker badge reflects the restricted list — 2 instead of 14.
-    await waitForText('2');
     await expect(within(canvasElement).queryByText('Please select data type')).not.toBeInTheDocument();
+    const popover = await openTypePicker(canvasElement);
+    await expectOffered(popover, ['Integer', 'Text']);
+    await expect(within(popover).queryByText('Decimal')).not.toBeInTheDocument();
   },
 };
 
-/** `noSoft` hides the `soft*` variants from the picker (9 instead of 14). */
+/** The picker offers no `soft*` type: a typed-in literal has nothing to convert. */
 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',
@@ -217,13 +305,14 @@ export const NoSoftTypes: Story = {
     docs: {
       description: {
         story:
-          '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.',
+          'Renders an untyped AutoFormField holding a text value. The type picker, chosen as Text, offers the 9 base types by readable name (True/False, Date, Text, Binary, Decimal, List, Key/Value {}, Integer, RGB Color) and no soft type, and shows no item count.',
       },
     },
   },
   async play({ canvasElement }) {
-    await waitForText('9');
     await expect(within(canvasElement).queryByText('Please select data type')).not.toBeInTheDocument();
+    const popover = await openTypePicker(canvasElement, 'Text');
+    await expectOffered(popover, IMMEDIATE_TYPE_NAMES);
   },
 };
 
@@ -486,7 +575,7 @@ export const Timeout: Story = {
 
     const input = await canvas.findByDisplayValue('45');
     await expect(input).toBeInTheDocument();
-    await expect(input).toHaveAttribute('type', 'number');
+    await expect(input).toHaveAttribute('inputmode', 'numeric');
     await expect(canvas.getByText('seconds')).toBeInTheDocument();
     await expect(canvas.queryByText('Unknown type!')).not.toBeInTheDocument();
   },
@@ -501,13 +590,66 @@ export const AutoDoesNotChangeTypeBackToAuto: Story = {
     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.',
+          'Renders AutoFormField in auto mode with a string value — the inferred type is shown as Text and the picker still offers every base type so the operator can switch away from auto without the field snapping back.',
       },
     },
   },
-  play: async () => {
-    await waitForText('string');
-    await waitForText('14');
+  async play({ canvasElement }) {
+    const popover = await openTypePicker(canvasElement, 'Text');
+    await expectOffered(popover, IMMEDIATE_TYPE_NAMES);
+    // End on what the story is about: the text value, still in its editor.
+    await closeTypePicker(popover);
+    const editor = await within(canvasElement).findByDisplayValue('test');
+    await expectUncovered(editor);
+  },
+};
+
+/** A soft type in a caller's allowed types is offered once, as its base type. */
+export const AllowedSoftTypesOfferedAsTheirBase: Story = {
+  args: {
+    allowedTypes: [{ name: 'softint' }, { name: 'int' }, { name: 'softstring' }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField whose allowedTypes are softint, int and softstring. The type picker offers Integer once and Text, with no soft type and no item count.',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const popover = await openTypePicker(canvasElement);
+    await expectOffered(popover, ['Integer', 'Text']);
+    await expect(within(popover).getAllByText('Integer', { exact: true })).toHaveLength(1);
+  },
+};
+
+/** A value saved with a soft type is edited with its base type's editor. */
+export const SavedSoftTypeEditsAsItsBase: Story = {
+  args: {
+    defaultType: 'auto',
+    defaultInternalType: 'softint',
+    value: 5,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders an untyped AutoFormField holding 5, saved with the soft type softint. It is edited with the integer editor and the type picker reads Integer, instead of drawing "Unknown type!".',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByDisplayValue('5')).toBeInTheDocument();
+    await expect(canvas.queryByText('Unknown type!')).not.toBeInTheDocument();
+    const popover = await openTypePicker(canvasElement, 'Integer');
+    await expectOffered(popover, IMMEDIATE_TYPE_NAMES);
+    // End on what the story is about: the integer editor, holding 5.
+    await closeTypePicker(popover);
+    const input = await canvas.findByDisplayValue('5');
+    await expect(input.tagName).toBe('INPUT');
+    await expectUncovered(input);
   },
 };
 

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

@@ -12,7 +12,7 @@ import {
 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 } from 'lodash';
+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';
@@ -97,6 +97,10 @@ export interface IAutoFieldProps
   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. */
@@ -134,7 +138,17 @@ export interface IAutoFieldProps
   [key: string]: any;
 }
 
-export const DefaultNoSoftTypes = [
+/**
+ * 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' },
@@ -146,6 +160,21 @@ export const DefaultNoSoftTypes = [
   { 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,
@@ -155,7 +184,8 @@ function AutoField<T = any>({
   defaultInternalType,
   requestFieldData,
   type,
-  noSoft,
+  // Inert (deprecated); destructured so it does not land in `...rest`.
+  noSoft, // eslint-disable-line @typescript-eslint/no-unused-vars
   path,
   arg_schema,
   compact,
@@ -185,9 +215,11 @@ function AutoField<T = any>({
   ...rest
 }: IAutoFieldProps & T) {
   const [currentType, setType] = useState<IQorusType>(defaultInternalType || null);
-  const [currentInternalType, setInternalType] = useState<IQorusType>(
+  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
@@ -203,7 +235,6 @@ function AutoField<T = any>({
     defaultInternalType,
     requestFieldData,
     type,
-    noSoft,
     path,
     arg_schema,
     column,
@@ -288,7 +319,7 @@ function AutoField<T = any>({
   });
 
   useUpdateEffect(() => {
-    if (defaultType && currentInternalType !== defaultType) {
+    if (defaultType && storedInternalType !== defaultType) {
       setType(defaultType);
       setInternalType(defaultType);
     }
@@ -1055,26 +1086,23 @@ function AutoField<T = any>({
         currentType === 'auto' ||
         currentType === 'any'));
 
-  const types =
-    allowedTypes ||
-    (!noSoft
-      ? [
-          { value: 'bool' },
-          { value: 'softbool' },
-          { value: 'date' },
-          { value: 'string' },
-          { value: 'softstring' },
-          { value: 'binary' },
-          { value: 'float' },
-          { value: 'softfloat' },
-          { value: 'list' },
-          { value: 'softlist' },
-          { value: 'hash' },
-          { value: 'int' },
-          { value: 'softint' },
-          { value: 'rgbcolor' },
-        ]
-      : DefaultNoSoftTypes);
+  // 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>;
@@ -1102,6 +1130,9 @@ function AutoField<T = any>({
             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);

package/src/components/form/fields/number/Number.stories.tsx

@@ -51,12 +51,14 @@ export const Integer: Story = {
     const input = canvas.getByLabelText('Number');
 
     await expect(input).toBeInTheDocument();
-    await expect(input).toHaveValue(42);
-    await expect(input).toHaveAttribute('type', 'number');
+    await expect(input).toHaveValue('42');
+    // typed freely, on a numeric keyboard
+    await expect(input).toHaveAttribute('type', 'text');
+    await expect(input).toHaveAttribute('inputmode', 'numeric');
 
     await userEvent.clear(input);
     await userEvent.type(input, '10');
-    await expect(input).toHaveValue(10);
+    await expect(input).toHaveValue('10');
     await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(10), { timeout: 500 });
   },
 };
@@ -70,7 +72,7 @@ export const Float: Story = {
     docs: {
       description: {
         story:
-          'Renders the Number field in float mode with 3.14 pre-populated — the input uses a 0.1 step and accepts decimals.',
+          'Renders the Number field in float mode with 3.14 pre-populated — the input asks for a decimal keyboard and accepts decimals.',
       },
     },
   },
@@ -78,12 +80,12 @@ export const Float: Story = {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Number');
 
-    await expect(input).toHaveValue(3.14);
-    await expect(input).toHaveAttribute('step', '0.1');
+    await expect(input).toHaveValue('3.14');
+    await expect(input).toHaveAttribute('inputmode', 'decimal');
 
     await userEvent.clear(input);
     await userEvent.type(input, '10.9');
-    await expect(input).toHaveValue(10.9);
+    await expect(input).toHaveValue('10.9');
     await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(10.9), { timeout: 500 });
   },
 };
@@ -104,7 +106,7 @@ export const Empty: Story = {
     const input = canvas.getByLabelText('Number');
 
     await expect(input).toBeInTheDocument();
-    await expect(input).toHaveValue(null);
+    await expect(input).toHaveValue('');
   },
 };
 
@@ -127,6 +129,31 @@ export const Disabled: Story = {
     const input = canvas.getByLabelText('Number');
 
     await expect(input).toBeDisabled();
-    await expect(input).toHaveValue(99);
+    await expect(input).toHaveValue('99');
+  },
+};
+
+export const TypedFreely: Story = {
+  args: {
+    value: 7,
+    type: 'int',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Number field in integer mode after typing what is not a number: 12abc stays as typed (the form flags it, it is not cut to 12), and a template ($local:quantity) or an expression (@qty * 2) is passed on as typed for the field around it to take up.',
+      },
+    },
+  },
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Number');
+    for (const text of ['12abc', '@qty * 2', '$local:quantity']) {
+      await userEvent.clear(input);
+      await userEvent.type(input, text);
+      await expect(input).toHaveValue(text);
+      await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(text), { timeout: 500 });
+    }
   },
 };

package/src/components/form/fields/number/Number.tsx

@@ -27,6 +27,22 @@ export interface INumberFormFieldProps extends Omit<IReqoreInputProps, 'value' |
   max_value?: number;
 }
 
+/** A whole number as typed: an optional sign and digits. */
+const WHOLE_NUMBER = /^[-+]?\d+$/;
+/** A decimal number as typed: an optional sign, digits with a point, and an exponent. */
+const DECIMAL_NUMBER = /^[-+]?(\d+\.?\d*|\.\d+)([eE][-+]?\d+)?$/;
+
+/**
+ * What a typed text is: the number it writes, or - when it writes none - the text as typed. A field of a
+ * number type is typed freely (David's review of qorus#646): a template (`$local:x`) or an expression
+ * (`@qty * 2`) is taken up by the field around it, and anything else is kept as typed for the form to flag
+ * as not a number. `parseInt` cut `12abc` to 12 without a word.
+ */
+export const typedNumber = (text: string, type: 'int' | 'float'): number | string => {
+  const trimmed = text.trim();
+  return (type === 'int' ? WHOLE_NUMBER : DECIMAL_NUMBER).test(trimmed) ? Number(trimmed) : text;
+};
+
 export const NumberFormField = ({
   onChange,
   autoFocus,
@@ -37,7 +53,10 @@ export const NumberFormField = ({
   max_value,
   ...rest
 }: INumberFormFieldProps) => {
-  const [localValue, setLocalValue] = useState<number | string>(value ?? '');
+  // What is shown is what was typed; what the form gets is the number it writes, or the text when it writes
+  // none. Showing the number instead dropped a decimal point mid-typing: `10.` is 10, and `10.9` became `109`.
+  const [text, setText] = useState<string>(value === undefined || value === null ? '' : String(value));
+  const localValue = text === '' ? '' : typedNumber(text, type);
   // The parent's echo of an emit still in flight is not a change: copying it
   // over the local value lost what was typed since. See `EmittedValues`.
   const emitted = useEmittedValues<number | string | undefined>();
@@ -47,7 +66,7 @@ export const NumberFormField = ({
       return;
     }
     if (value !== localValue) {
-      setLocalValue(value ?? '');
+      setText(value === undefined || value === null ? '' : String(value));
     }
   }, [value]);
 
@@ -62,17 +81,9 @@ export const NumberFormField = ({
     [localValue, onChange]
   );
 
-  const handleChange = useCallback(
-    (rawValue: number | string): void => {
-      if (rawValue === '' || rawValue === '-' || rawValue === '-.') {
-        setLocalValue(rawValue);
-        return;
-      }
-      const parsed = type === 'int' ? parseInt(rawValue as string, 10) : parseFloat(rawValue as string);
-      setLocalValue(isNaN(parsed) ? rawValue : parsed);
-    },
-    [type]
-  );
+  const handleChange = useCallback((rawValue: number | string): void => {
+    setText(String(rawValue));
+  }, []);
 
   const handleInputChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>): void => {
@@ -82,7 +93,7 @@ export const NumberFormField = ({
   );
 
   const handleResetClick = useCallback((): void => {
-    setLocalValue(0);
+    setText('0');
     emitted.record(0);
     onChange?.(0);
   }, [onChange]);
@@ -98,17 +109,12 @@ export const NumberFormField = ({
     [autoFocus]
   );
 
-  const handleItemSelect = useCallback((item) => setLocalValue(item.value), []);
+  const handleItemSelect = useCallback((item) => setText(String(item.value)), []);
 
-  // The schema's bounds under the names the input uses. Omitted entirely when the schema
-  // declares none, so an undeclared bound stays undeclared rather than becoming `min={0}`.
-  const bounds = useMemo(
-    () => ({
-      ...(typeof min_value === 'number' ? { min: min_value } : {}),
-      ...(typeof max_value === 'number' ? { max: max_value } : {}),
-    }),
-    [min_value, max_value]
-  );
+  // The schema's bounds are the form's to check (a text input has no min or max); they are named in the
+  // props only to keep them off the DOM node.
+  void min_value;
+  void max_value;
 
   // IDE `NumberField` parity: with templates the input is wrapped in a
   // focus-opened dropdown of the template values.
@@ -121,12 +127,13 @@ export const NumberFormField = ({
         icon='MoneyDollarCircleLine'
         items={templates?.items}
         filterable
-        value={localValue}
+        value={text}
         onItemSelect={handleItemSelect}
         onChange={handleInputChange}
-        type='number'
-        step={type === 'int' ? 1 : 0.1}
-        {...bounds}
+        // typed freely: a number input drops what is not part of a number, so a template or an expression
+        // could not be typed; the keyboard is still a numeric one
+        type='text'
+        inputMode={type === 'int' ? 'numeric' : 'decimal'}
         onClearClick={handleResetClick}
         focusRules={focusRules}
         {...TemplatesListProps}
@@ -138,14 +145,14 @@ export const NumberFormField = ({
     <ReqoreInput
       fluid
       icon='MoneyDollarCircleLine'
-      value={localValue}
+      value={text}
       onChange={handleInputChange}
-      type='number'
-      step={type === 'int' ? 1 : 0.1}
+      // typed freely, on a numeric keyboard (see above)
+      type='text'
+      inputMode={type === 'int' ? 'numeric' : 'decimal'}
       onClearClick={handleResetClick}
       focusRules={focusRules}
       {...rest}
-      {...bounds}
     />
   );
 };

package/src/components/form/fields/template/TemplateField.tsx

@@ -1529,6 +1529,8 @@ const TemplateFieldImpl = memo(
                 readOnly={rest.readOnly || rest.disabled}
                 expressions={rest.expressions}
                 expressionsUrl={rest.expressions_url}
+                // the record's fields for the Text view, from the field's schema (`dpql_fields`)
+                fields={rest.dpql_fields}
                 serverHandled={rest.server_expression_handling}
                 extraActions={extraActions}
                 size={rest.size}

package/src/providers/StorageProvider.tsx

@@ -41,7 +41,14 @@ export const ReqraftUserProvider = ({ children, waitForStorage }: IReqraftStorag
   } = currentUserStore();
 
   useEffectOnce(() => {
-    loadCurrentUser();
+    /* A user that cannot be loaded - no token (401), another origin the instance
+       refuses (CORS), no such endpoint (404) - is a state the store keeps
+       (`error`, `errorData`), and the page renders without one. The promise was
+       dropped, so the failure was an unhandled rejection: Storybook marked a story
+       wrapped in this provider as errored whenever it landed first. */
+    loadCurrentUser().catch((error: unknown) => {
+      console.warn('Reqraft: the current user could not be loaded', error);
+    });
   });
 
   const { load } = useFetch({