@qoretechnologies/reqraft 0.10.27 → 0.10.28

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

@@ -31,6 +31,7 @@ import { FieldAllowedValues, FieldAllowedValuesCheckGroup } from '../allowed-val
 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';
@@ -726,6 +727,24 @@ function AutoField<T = any>({
               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`

package/src/components/form/fields/select/Select.stories.tsx

@@ -52,6 +52,32 @@ export const Items: Story = {
   },
 };
 
+export const WithValueLabel: Story = {
+  args: {
+    value: 'seconds',
+    valueLabel: 's',
+    items: [{ value: 'ms' }, { value: 'seconds' }, { value: 'minutes' }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with a `valueLabel` override — the closed trigger shows the short "s" for the selected value, while opening the popover still lists the full item names.',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('s')).toBeInTheDocument();
+    await fireEvent.click(canvas.getByText('s'));
+    await waitFor(
+      () => expect(within(document.body).getByText('seconds')).toBeInTheDocument(),
+      { timeout: 5000 }
+    );
+    await expect(within(document.body).getByText('minutes')).toBeInTheDocument();
+  },
+};
+
 export const ItemsWithDescription: Story = {
   parameters: {
     docs: {

package/src/components/form/fields/select/Select.tsx

@@ -31,6 +31,11 @@ export interface ISelectFormFieldProps {
   asMenu?: boolean;
   icon?: IReqoreIconName;
   showDescription?: 'tooltip' | boolean;
+  /** Label for the CLOSED trigger in place of the selected item's
+   * `display_name` — the open list keeps the item labels (e.g. a unit symbol
+   * on the trigger, full names in the picker). Ignored while nothing is
+   * selected. */
+  valueLabel?: string;
   showPlaceholder?: boolean;
   showRightIcon?: boolean;
   hideItemCount?: boolean;
@@ -69,6 +74,7 @@ export const SelectFormField = memo(
     icon,
     filters,
     showDescription = true,
+    valueLabel,
     showPlaceholder = true,
     showRightIcon = true,
     hideItemCount,
@@ -274,7 +280,7 @@ export const SelectFormField = memo(
           fluid={fluid}
           flat={flat ?? false}
           size={componentSize}
-          label={getLabel(items, value ?? autoSelectedItem.value)}
+          label={valueLabel ?? getLabel(items, value ?? autoSelectedItem.value)}
           description={getItemShortDescription(value as string) as string}
           readOnly
           fixed
@@ -366,7 +372,7 @@ export const SelectFormField = memo(
             disabled={disabled}
           >
             {value ?
-              getLabel(items, value as string)
+              (valueLabel ?? getLabel(items, value as string))
             : showPlaceholder ?
               placeholder || 'Please select'
             : undefined}
@@ -402,7 +408,7 @@ export const SelectFormField = memo(
             }
           >
             {value ?
-              getLabel(items, value as string)
+              (valueLabel ?? getLabel(items, value as string))
             : showPlaceholder ?
               placeholder || 'Please select'
             : undefined}

package/src/components/form/fields/timeout/Timeout.stories.tsx

@@ -0,0 +1,228 @@
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fireEvent, fn, userEvent, waitFor, within } from 'storybook/test';
+import { useState } from 'react';
+import { StoryMeta } from '../../../../types';
+import { TimeoutFormField } from './Timeout';
+
+const meta = {
+  component: TimeoutFormField,
+  title: 'Components/Form/Timeout',
+  args: {
+    onChange: fn(),
+    'aria-label': 'Timeout amount',
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <TimeoutFormField
+        {...args}
+        value={value}
+        onChange={(v) => {
+          args.onChange?.(v);
+          setValue(v);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof TimeoutFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Timeout field with no value — the unit selector sits on ms. Typing a number fires onChange with that many milliseconds.',
+      },
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Timeout amount');
+    await expect(input).toBeInTheDocument();
+    await expect(canvas.getByText('ms')).toBeInTheDocument();
+    await userEvent.type(input, '42');
+    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(42), { timeout: 5000 });
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    value: 45000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Timeout field pre-populated with 45000 milliseconds — shown as 45 with the seconds unit selected, the largest unit that represents the value exactly.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByDisplayValue('45')).toBeInTheDocument();
+    await expect(canvas.getByText('seconds')).toBeInTheDocument();
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    value: 45000,
+    // The phone presentation is prop-forced so the play is deterministic at
+    // any test-browser width; without the prop the field switches on the
+    // viewport's own phone-width flag.
+    abbreviateUnits: true,
+  },
+  parameters: {
+    // Capture at phone size; the selector abbreviation is prop-forced above.
+    qlip: { viewport: { width: 390, height: 844 } },
+    docs: {
+      description: {
+        story:
+          'Renders the phone presentation of the Timeout field with 45000 milliseconds — the closed unit selector reads "s", while the open picker keeps the full seconds/minutes/hours names.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByDisplayValue('45')).toBeInTheDocument();
+    await fireEvent.click(canvas.getByText('s'));
+    const body = within(canvasElement.ownerDocument.body);
+    await waitFor(() => expect(body.getByText('minutes')).toBeInTheDocument(), { timeout: 5000 });
+    await expect(body.getByText('hours')).toBeInTheDocument();
+  },
+};
+
+export const WithInexactValue: Story = {
+  args: {
+    value: 90500,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Timeout field with 90500 milliseconds — no larger unit divides it evenly, so it stays 90500 on the ms unit instead of rounding to 90.5 seconds.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByDisplayValue('90500')).toBeInTheDocument();
+    await expect(canvas.getByText('ms')).toBeInTheDocument();
+  },
+};
+
+export const UnitSwitch: Story = {
+  args: {
+    value: 45000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Timeout field with 45000 milliseconds (45 seconds). Switching the unit to minutes re-interprets the shown amount and fires onChange with 45 minutes in milliseconds.',
+      },
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await fireEvent.click(await canvas.findByText('seconds'));
+    const body = within(canvasElement.ownerDocument.body);
+    await waitFor(() => expect(body.getByText('minutes')).toBeInTheDocument(), { timeout: 5000 });
+    await fireEvent.click(body.getByText('minutes'));
+    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(2700000), { timeout: 5000 });
+    await expect(canvas.getByDisplayValue('45')).toBeInTheDocument();
+  },
+};
+
+export const TypingConverts: Story = {
+  args: {
+    value: 45000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Timeout field with 45000 milliseconds (45 seconds). Clearing the amount and typing 90 fires onChange with 90 seconds converted to milliseconds.',
+      },
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByDisplayValue('45');
+    await userEvent.clear(input);
+    await userEvent.type(input, '90');
+    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(90000), { timeout: 5000 });
+    await expect(canvas.getByText('seconds')).toBeInTheDocument();
+  },
+};
+
+export const KeepsUnitWhileTyping: Story = {
+  args: {
+    value: 45000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Timeout field with 45 seconds. Typing 120 — a minute-exact amount — keeps the seconds unit instead of auto-promoting to 2 minutes, and emits 120 seconds in milliseconds.',
+      },
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByDisplayValue('45');
+    await userEvent.clear(input);
+    await userEvent.type(input, '120');
+    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(120000), { timeout: 5000 });
+    await expect(canvas.getByDisplayValue('120')).toBeInTheDocument();
+    await expect(canvas.getByText('seconds')).toBeInTheDocument();
+  },
+};
+
+export const ClearResetsToZero: Story = {
+  args: {
+    value: 45000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the Timeout field with 45 seconds. Clicking the amount input's clear icon resets the value to 0 milliseconds while the seconds unit stays selected.",
+      },
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByDisplayValue('45');
+    const clearButton = canvasElement.querySelector('.reqore-clear-input-button');
+    await expect(clearButton).toBeInTheDocument();
+    await fireEvent.click(clearButton!);
+    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(0), { timeout: 5000 });
+    await expect(canvas.getByDisplayValue('0')).toBeInTheDocument();
+    await expect(canvas.getByText('seconds')).toBeInTheDocument();
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    value: 45000,
+    readOnly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Timeout field with 45 seconds in read-only mode — the amount input is marked readonly and the unit selector is disabled.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByDisplayValue('45');
+    await expect(input).toHaveAttribute('readonly');
+    await expect(canvas.getByText('seconds').closest('button')).toBeDisabled();
+  },
+};

package/src/components/form/fields/timeout/Timeout.tsx

@@ -0,0 +1,87 @@
+import { ReqoreControlGroup, useReqoreProperty } from '@qoretechnologies/reqore';
+import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
+import { memo, useState } from 'react';
+import {
+  getLargestExactTimeoutUnit,
+  TIMEOUT_UNITS,
+  timeoutUnitSymbol,
+  timeoutUnitToMs,
+  TTimeoutUnit,
+} from '../../../../helpers/common';
+import NumberFormField from '../number/Number';
+import { SelectFormField } from '../select/Select';
+
+const UNIT_ITEMS = TIMEOUT_UNITS.map(({ value }) => ({ value }));
+
+export interface ITimeoutFormFieldProps {
+  /** Integer count of milliseconds — the shape the server stores. */
+  value?: number;
+  onChange?: (value?: number) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  size?: TSizes;
+  /** Show unit symbols (ms/s/m/h) instead of full names. Defaults to the
+   * viewport's phone-width flag. */
+  abbreviateUnits?: boolean;
+  /** Unknown props (`aria-label`, …) forward to the primary (amount) input. */
+  [key: string]: unknown;
+}
+
+/**
+ * A timeout input — a numeric amount stacked with a unit selector
+ * (ms/seconds/minutes/hours). The field value stays the integer millisecond
+ * count the server stores; the unit only scales the display, and changing it
+ * re-interprets the shown amount (45 seconds → 45 minutes).
+ */
+export const TimeoutFormField = memo(
+  ({ value, onChange, disabled, readOnly, size, abbreviateUnits, ...rest }: ITimeoutFormFieldProps) => {
+    const isMobile = useReqoreProperty('isMobile');
+    const shortUnits = abbreviateUnits ?? isMobile;
+    // The ms value alone can't say whether 45000 should read "45 seconds" or
+    // "45000 ms", so the unit is pinned once the user touches the field.
+    // Until then — and whenever the controlled value stops dividing evenly by
+    // the pin (a parent-side reset) — the largest exact unit wins, so the
+    // display never rounds.
+    const [pinnedUnit, setPinnedUnit] = useState<TTimeoutUnit>();
+    const unit =
+      pinnedUnit && (value == null || value % timeoutUnitToMs(pinnedUnit) === 0)
+        ? pinnedUnit
+        : getLargestExactTimeoutUnit(value);
+    const amount = value != null ? value / timeoutUnitToMs(unit) : undefined;
+
+    return (
+      <ReqoreControlGroup stack fluid size={size}>
+        <NumberFormField
+          {...(rest as any)}
+          fluid
+          type='int'
+          value={amount}
+          onChange={(next) => {
+            setPinnedUnit(unit);
+            onChange?.(typeof next === 'number' ? next * timeoutUnitToMs(unit) : undefined);
+          }}
+          disabled={disabled}
+          readOnly={readOnly}
+        />
+        <SelectFormField
+          fixed
+          hideItemCount
+          items={UNIT_ITEMS}
+          // Where space is tight only the trigger abbreviates — the open
+          // picker keeps the full unit names.
+          valueLabel={shortUnits ? timeoutUnitSymbol(unit) : undefined}
+          value={unit}
+          onChange={(next) => {
+            setPinnedUnit(next as TTimeoutUnit);
+            if (amount != null) {
+              onChange?.(amount * timeoutUnitToMs(next as TTimeoutUnit));
+            }
+          }}
+          disabled={disabled || readOnly}
+        />
+      </ReqoreControlGroup>
+    );
+  }
+);
+
+export default TimeoutFormField;

package/src/components/form/index.tsx

@@ -4,6 +4,7 @@ export * from './fields/array/ArrayAuto';
 export * from './fields/array/ArrayAutoField';
 export * from './fields/auto/AutoFormField';
 export * from './fields/byte-size/ByteSize';
+export * from './fields/timeout/Timeout';
 export * from './fields/url/Url';
 export * from './fields/schema-definition';
 export * from './fields/boolean/Boolean';

package/src/helpers/common.ts

@@ -174,6 +174,42 @@ export const splitByteSize = (value?: string): [number | undefined, string | und
   return [amount?.[0] ? Number(amount[0]) : undefined, unit?.[0]];
 };
 
+export type TTimeoutUnit = 'ms' | 'seconds' | 'minutes' | 'hours';
+
+/** Timeout display units, smallest → largest, with the ms multiplier each one
+ * scales by and the symbol shown where space is tight (phone-width selector).
+ * The stored value is always the integer millisecond count. */
+export const TIMEOUT_UNITS: { value: TTimeoutUnit; ms: number; short: string }[] = [
+  { value: 'ms', ms: 1, short: 'ms' },
+  { value: 'seconds', ms: 1000, short: 's' },
+  { value: 'minutes', ms: 60000, short: 'm' },
+  { value: 'hours', ms: 3600000, short: 'h' },
+];
+
+export const timeoutUnitToMs = (unit: TTimeoutUnit): number =>
+  TIMEOUT_UNITS.find(({ value }) => value === unit)!.ms;
+
+export const timeoutUnitSymbol = (unit: TTimeoutUnit): string =>
+  TIMEOUT_UNITS.find(({ value }) => value === unit)!.short;
+
+/** The largest unit that represents `value` without rounding (45000 →
+ * seconds, 90500 → ms). Zero divides evenly by everything, so it stays ms. */
+export const getLargestExactTimeoutUnit = (value?: number): TTimeoutUnit => {
+  for (let i = TIMEOUT_UNITS.length - 1; i >= 0; i--) {
+    if (value != null && value !== 0 && value % TIMEOUT_UNITS[i].ms === 0) {
+      return TIMEOUT_UNITS[i].value;
+    }
+  }
+  return 'ms';
+};
+
+/** Human-readable timeout (e.g. `"45 seconds"`) — scaled to the largest unit
+ * that represents the millisecond count exactly (90500 → `"90500 ms"`). */
+export const formatTimeoutValue = (ms: number): string => {
+  const unit = getLargestExactTimeoutUnit(ms);
+  return `${ms / timeoutUnitToMs(unit)} ${unit}`;
+};
+
 /** Human-readable file size, e.g. `"12.3 KB"` — whole bytes below 1 KiB, one
  *  decimal above. Shared by the ticket thread / references attachment rows. */
 export const formatBytes = (bytes: number): string => {

package/src/helpers/validations.ts

@@ -262,20 +262,45 @@ export const _validateField = (
     case 'file': {
       // Support both the Build-tab typed format ({ name: { type, value } })
       // and the Upload-tab flat format ({ name: 'file.txt' })
-      const nameValue = value?.name?.value ?? value?.name;
-      const contentValue = value?.content?.value ?? value?.content;
-      const nameResult = validateFieldWithResult('string', nameValue);
-      const contentResult = validateFieldWithResult('string', contentValue);
-
-      if (!nameResult.isValid) {
-        return withContext(nameResult, 'File name is invalid');
-      }
-
-      if (!contentResult.isValid) {
-        return withContext(contentResult, 'File content is invalid');
-      }
+      //
+      // A Build-tab sub-value is a full option envelope: it carries its own
+      // `type` and may hold an expression (`is_expression`) or a rich-text
+      // paragraph array rather than a bare string. This used to unwrap `.value`
+      // and validate it as a hard-coded `string` with no field, discarding both
+      // the declared type and the expression flag — so a `concat(...)` filename
+      // arrived at the string validator as `{ exp, args }`, rich text arrived as
+      // an array, and both were rejected with "Value must be a non-empty text".
+      //
+      // Validate each part against its OWN type and route `is_expression`
+      // through `isFunction`, exactly as the `system-options` recursion below
+      // does, so the `field?.isFunction` branch above gets a chance to run.
+      const validateFilePart = (part: any, fallbackType: string): IValidationResult => {
+        const isEnvelope = !!part && isObject(part) && ('value' in part || 'is_expression' in part);
+
+        return isEnvelope
+          ? validateFieldWithResult(part.type || fallbackType, part.value, {
+              isFunction: part.is_expression,
+            } as IFieldValidationProps)
+          : validateFieldWithResult(fallbackType, part);
+      };
 
-      return validResult();
+      // Fall back to the arg_schema's declared types for the flat Upload-tab
+      // shape: `name` is `richtext` (which also accepts a plain string) and
+      // `content` is `data`.
+      const nameResult = validateFilePart(value?.name, 'richtext');
+      const contentResult = validateFilePart(value?.content, 'data');
+
+      // Report both parts. Returning on the first failure meant a bad file name
+      // masked the content result entirely, so the form could only ever surface
+      // one problem at a time.
+      const reasons = [
+        ...(nameResult.isValid ? [] : withContext(nameResult, 'File name is invalid').reasons),
+        ...(contentResult.isValid
+          ? []
+          : withContext(contentResult, 'File content is invalid').reasons),
+      ];
+
+      return reasons.length ? invalidResult(reasons) : validResult();
     }
     case 'number': {
       return resultFromBoolean(
@@ -504,6 +529,17 @@ export const _validateField = (
 
       return validResult();
     }
+    case 'timeout': {
+      // An integer count of milliseconds — the unit selector is display-only,
+      // so the stored value validates as an int.
+      const msResult = validateFieldWithResult('int', value);
+
+      if (!msResult.isValid) {
+        return withContext(msResult, 'Timeout must be a whole number of milliseconds');
+      }
+
+      return validResult();
+    }
     case 'url': {
       const protocolResult = validateFieldWithResult('string', getProtocol(value));
 

package/src/types/Form.ts

@@ -8,12 +8,15 @@ export type TFormFieldType =
   | TQorusType
   | 'softint' | 'softstring' | 'softbool' | 'softfloat' | 'softnumber' | 'softdate' | 'softlist'
   | 'byte-size'
+  // the server emits this for a connection's connect_timeout / timeout;
+  // it is not (yet) in ts-toolkit's TQorusType
+  | 'timeout'
   | 'multi-select'
   | 'schema-definition';
 
 export type TFormFieldValueType<T> =
   T extends 'string' | 'long-string' | 'binary' | 'email' | 'url' | 'enum' | 'select-string' | 'file-as-string' | 'byte-size' ? string
-  : T extends 'int' | 'integer' | 'float' | 'number' ? number
+  : T extends 'int' | 'integer' | 'float' | 'number' | 'timeout' ? number
   : T extends 'bool' | 'boolean' ? boolean
   : T extends 'date' ? Date | string
   : T extends 'hash' | 'free-hash' | 'data' ? Record<string, any>