@qoretechnologies/reqraft 0.10.35-pr.92.ga86e098 → 0.10.35

package/src/components/form/expressions/ExpressionField.stories.tsx

@@ -55,6 +55,19 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/** The DPQL editor overlays "Connecting to language server…" / "Loading
+ * schema…" while its LSP session starts — a snapshot must never catch that
+ * transient, so every Text-mode play ends by waiting the overlay out. */
+const waitForLspIdle = (canvasElement: HTMLElement) =>
+  waitFor(
+    () => {
+      expect(canvasElement.querySelector('[contenteditable="true"]')).toBeInTheDocument();
+      expect(canvasElement.textContent).not.toContain('Connecting to language server');
+      expect(canvasElement.textContent).not.toContain('Loading schema');
+    },
+    { timeout: 10000 }
+  );
+
 /** The shell with a populated expression — the Visual/Text mode toggle. */
 export const Default: Story = {
   args: {
@@ -82,9 +95,8 @@ export const Default: Story = {
 };
 
 /**
- * Empty expression — the Text-mode "Parsed" preview shows `(empty)`. (The
- * preview element lives in Text mode; an empty AST renders to '' which the
- * shell displays as `(empty)`.)
+ * Empty expression — an empty AST renders no "Parsed" box at all (nothing to
+ * parse), just the bare editor waiting for input.
  */
 export const Empty: Story = {
   args: {
@@ -95,7 +107,7 @@ export const Empty: Story = {
     docs: {
       description: {
         story:
-          'Renders ExpressionField in Text mode with an empty expression AST — the "Parsed" preview shows the "(empty)" placeholder for an empty expression.',
+          'Renders ExpressionField in Text mode with an empty expression AST — only the DPQL editor shows; the "Parsed" preview box stays hidden until there is a query to parse.',
       },
     },
   },
@@ -105,18 +117,10 @@ export const Empty: Story = {
   },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
-    // The preview element is present and reads `(empty)` for an empty AST.
-    await waitFor(
-      () =>
-        expect(
-          canvasElement.querySelector('[data-testid="expression-preview"]')
-        ).toBeInTheDocument(),
-      { timeout: 6000 }
-    );
-    await waitFor(
-      () => expect(canvas.getByTestId('expression-preview').textContent).toContain('(empty)'),
-      { timeout: 6000 }
-    );
+    await waitForLspIdle(canvasElement);
+    // An empty query has nothing to parse — no Parsed box.
+    await expect(canvas.queryByTestId('expression-preview')).toBeNull();
+    await expect(canvas.queryByText('Parsed')).toBeNull();
   },
 };
 
@@ -230,6 +234,7 @@ export const ViaFormEngineTextMode: Story = {
       () => expect(canvas.getByTestId('expression-preview').textContent).toContain('John'),
       { timeout: 10000 }
     );
+    await waitForLspIdle(canvasElement);
   },
 };
 
@@ -314,6 +319,7 @@ export const ViaFormEngineTextTyping: Story = {
       () => expect(canvas.getByTestId('expression-preview')).toBeInTheDocument(),
       { timeout: 10000 }
     );
+    await waitForLspIdle(canvasElement);
   },
 };
 
@@ -358,6 +364,7 @@ export const TextMode: Story = {
       () => expect(canvas.getByTestId('expression-preview').textContent).toContain('name'),
       { timeout: 6000 }
     );
+    await waitForLspIdle(canvasElement);
   },
 };
 

package/src/components/form/expressions/ExpressionField.tsx

@@ -218,24 +218,29 @@ export const ExpressionField = memo(
               readOnly={readOnly}
               height='48px'
             />
-            <ReqoreMessage intent='info' size='small' title='Parsed' flat opaque={false}>
-              {preview.server ? (
-                // Server rendering shown through a read-only DpqlEditor:
-                // template-ref chips + LSP token colours; diagnostics off
-                // (the rendering is readable text, not parseable DPQL).
-                <div data-testid='expression-preview' style={{ width: '100%' }}>
-                  <DpqlEditor
-                    value={preview.text}
-                    onChange={noop}
-                    readOnly
-                    showDiagnostics={false}
-                    enableHover={false}
-                  />
-                </div>
-              ) : (
-                <code data-testid='expression-preview'>{preview.text || '(empty)'}</code>
-              )}
-            </ReqoreMessage>
+            {/* An empty query has nothing to parse — the box appears once a
+                parse result exists rather than sitting there holding a
+                placeholder token. */}
+            {preview.text ? (
+              <ReqoreMessage intent='info' size='small' title='Parsed' flat opaque={false}>
+                {preview.server ? (
+                  // Server rendering shown through a read-only DpqlEditor:
+                  // template-ref chips + LSP token colours; diagnostics off
+                  // (the rendering is readable text, not parseable DPQL).
+                  <div data-testid='expression-preview' style={{ width: '100%' }}>
+                    <DpqlEditor
+                      value={preview.text}
+                      onChange={noop}
+                      readOnly
+                      showDiagnostics={false}
+                      enableHover={false}
+                    />
+                  </div>
+                ) : (
+                  <code data-testid='expression-preview'>{preview.text}</code>
+                )}
+              </ReqoreMessage>
+            ) : null}
           </>
         ) : (
           <ExpressionBuilder

package/src/components/form/fields/Field.tsx

@@ -30,6 +30,7 @@ import { StringFormField } from './string/String';
 import { ArrayAutoField } from './array/ArrayAutoField';
 import { AutoFormField } from './auto/AutoFormField';
 import { ByteSizeFormField } from './byte-size/ByteSize';
+import { TimeoutFormField } from './timeout/Timeout';
 import { UrlFormField } from './url/Url';
 import { SchemaDefinitionEditor } from './schema-definition';
 import { IDataSchemaDefinition } from './schema-definition/types';
@@ -44,6 +45,10 @@ const mapQorusTypeToFormFieldType = (type: string): TFormFieldType => {
     case 'richtext': return 'richtext';
     case 'bool': case 'boolean': return 'bool';
     case 'int': case 'integer': case 'float': case 'number': return 'int';
+    // `timeout` is an integer count of milliseconds (a connection's
+    // connect_timeout / timeout); without it the default below renders it
+    // as a long-string text box.
+    case 'timeout': return 'timeout';
     case 'date': return 'date';
     case 'file': return 'file';
     case 'rgbcolor': return 'rgbcolor';
@@ -173,6 +178,18 @@ export const FormField = <T extends TFormFieldType>({
           />
         );
 
+      case 'timeout':
+        return (
+          <TimeoutFormField
+            {...(fieldProps as any)}
+            value={value as number}
+            onChange={(val) => handleChange(val as TFormFieldValueType<T>)}
+            disabled={(rest as { disabled?: boolean }).disabled}
+            readOnly={readonly}
+            size={fieldSize}
+          />
+        );
+
       case 'int':
       case 'integer':
       case 'float':

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

@@ -395,6 +395,36 @@ export const File: Story = {
   },
 };
 
+/**
+ * A connection's `connect_timeout` / `timeout` option, as the server emits it:
+ * `type: 'timeout'` holding an integer count of milliseconds.
+ */
+export const Timeout: Story = {
+  args: {
+    defaultType: 'timeout',
+    defaultInternalType: 'timeout',
+    type: 'timeout',
+    value: 45000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders a connection's Connect Timeout option, which the server types as `timeout` and fills with 45000 milliseconds. The unit-aware timeout field shows it as 45 with the seconds unit selected.",
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+
+    const input = await canvas.findByDisplayValue('45');
+    await expect(input).toBeInTheDocument();
+    await expect(input).toHaveAttribute('type', 'number');
+    await expect(canvas.getByText('seconds')).toBeInTheDocument();
+    await expect(canvas.queryByText('Unknown type!')).not.toBeInTheDocument();
+  },
+};
+
 export const AutoDoesNotChangeTypeBackToAuto: Story = {
   args: {
     defaultType: 'auto',

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';
@@ -734,6 +735,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';