@qoretechnologies/reqraft 0.10.60-pr.134.g36530dc → 0.10.60

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/helpers/validations.ts

@@ -1824,24 +1824,36 @@ export const getTypeFromValue = (value: any) => {
   }
 };
 
-export const validateOptionWithRequiredGroups = (
+/**
+ * The groups of `groups` none of whose options has a value. A required group asks for one of its
+ * options; an option in several groups is settled only when each of them is.
+ */
+export const unsatisfiedRequiredGroups = (
   options: TQorusForm,
   schema: IQorusFormSchema,
   groups: string[]
-): boolean => {
-  if (groups) {
-    const optionsInGroups = getOptionsFromRequiredGroups(schema, groups);
-    return optionsInGroups.some((option) =>
-      isValueDefined(
-        ((schema[option] as TQorusFormFieldSchema)?.ui_type as string) ||
-          ((schema[option] as TQorusFormFieldSchema)?.type as string),
-        options?.[option]?.value
+): string[] =>
+  (groups ?? []).filter(
+    (group) =>
+      !getOptionsFromRequiredGroups(schema, [group]).some((option) =>
+        isValueDefined(
+          ((schema[option] as TQorusFormFieldSchema)?.ui_type as string) ||
+            ((schema[option] as TQorusFormFieldSchema)?.type as string),
+          options?.[option]?.value
+        )
       )
-    );
-  }
+  );
 
-  return true;
-};
+/**
+ * Whether an option's required groups are settled: each has an option with a value. Any value in any of
+ * the groups used to do, so an option in two groups passed while one of them was still empty - it was
+ * neither flagged nor counted, and the form said fewer fields needed attention than did.
+ */
+export const validateOptionWithRequiredGroups = (
+  options: TQorusForm,
+  schema: IQorusFormSchema,
+  groups: string[]
+): boolean => !unsatisfiedRequiredGroups(options, schema, groups).length;
 
 /** Why a required option is not satisfied by the current values. */
 export type TUnresolvedRequiredOptionReason =

package/src/index.tsx

@@ -9,6 +9,7 @@ export {
   hasAllDependenciesFullfilled,
   parseDependency,
   validateOptionWithRequiredGroups,
+  unsatisfiedRequiredGroups,
 } from './helpers/validations';
 export type { IValidationResult } from './helpers/validations';
 export { thinScrollbar } from './helpers/scrollbar';