@qoretechnologies/reqraft 0.10.41-pr.95.g294e5aa → 0.10.41

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

@@ -43,15 +43,28 @@ export const FieldAllowedValuesCheckGroup = memo(
     onChange,
     name,
     value,
+    label,
     ...rest
   }: Partial<Omit<IFieldAllowedValuesProps, 'items'>> & {
     multiSelect?: boolean;
     items: ISelectFormFieldItem[];
+    /**
+     * The field's own name, used as the group's heading.
+     *
+     * A picker headed by what it IS beats one headed by a generic instruction:
+     * "Select one:" says nothing the shape of a radio group has not already
+     * said, and in a container that absorbs a sibling it forced the field's name
+     * to be printed a second time beside the group. Falls back to the
+     * instruction when a field declares no display name.
+     */
+    label?: string;
   }) => {
     return (
       <ReqoreControlGroup vertical size={rest.size || 'small'} gapSize='tiny'>
         <ReqoreSpan effect={{ opacity: 0.6, uppercase: true, weight: 'bold' }} size='tiny'>
-          {multiSelect ? 'Select one or more:' : 'Select one:'}
+          {label ? `${label}:`
+          : multiSelect ? 'Select one or more:'
+          : 'Select one:'}
         </ReqoreSpan>
         {items?.map((item) => (
           <ReqoreCheckbox
@@ -62,10 +75,17 @@ export const FieldAllowedValuesCheckGroup = memo(
             disabled={rest.disabled}
             readOnly={rest.readOnly}
             intent={item.value === value ? 'info' : undefined}
+            // `isEqual`, and only once there is a value to match. The single
+            // -select branch compared JSON.stringify(value) with
+            // JSON.stringify(item.value), and JSON.stringify(undefined) is
+            // undefined — so an unset field whose items carry no resolved value
+            // compared undefined with undefined and reported EVERY option as
+            // checked, on a field that was simultaneously "This field is
+            // required". Nothing selected must read as nothing selected.
             checked={
               multiSelect
                 ? Array.isArray(value) && value.some((v) => isEqual(v, item.value))
-                : JSON.stringify(value) === JSON.stringify(item.value)
+                : value !== undefined && value !== null && isEqual(value, item.value)
             }
             onClick={() => {
               if (multiSelect) {
@@ -103,6 +123,7 @@ export const FieldAllowedValues = memo(
     disabled,
     name,
     readOnly,
+    label,
   }: IFieldAllowedValuesProps) => {
     const fullItems = useMemo(() => {
       const result = [
@@ -131,6 +152,7 @@ export const FieldAllowedValues = memo(
             onChange={onChange}
             value={value}
             name={name}
+            label={label}
           />
         );
       }

package/src/components/form/fields/array/ArrayAuto.tsx

@@ -24,6 +24,7 @@ import { validateFieldWithResult } from '../../../../helpers/validations';
 import { useWhyDidYouUpdate } from '../../../../hooks/useWhyDidYouUpdate';
 // Direct imports — the cycle (ArrayAuto → TemplateField/auto → ArrayAuto) is
 // safe the same way Field → AutoFormField → Field is.
+import { recordIdentity } from '../../engine/readFirst';
 import { AutoFormField } from '../auto/AutoFormField';
 import { TemplateField } from '../template/TemplateField';
 
@@ -133,12 +134,29 @@ export const ArrayAuto = ({
   // Render list of auto fields
   return (
     <ReqoreControlGroup vertical fluid>
-      {map(localValue, (val: string | number, idx: string) => (
+      {map(localValue, (val: string | number, idx: string) => {
+        // The same field the collapsed preview promotes, resolved by the same
+        // definition — see `recordIdentity`. A list of seven methods headed
+        // `#1 … #7` makes the reader open each one to find out which is which,
+        // and heading them differently in the preview and the editor would make
+        // one item answer to two names.
+        const identity =
+          val && typeof val === 'object' && !Array.isArray(val)
+            ? recordIdentity(val as Record<string, unknown>, rest.arg_schema)
+            : undefined;
+
+        return (
         <ReqorePanel
           key={idx}
-          label={`#${idx + 1}`}
+          // `#N` stays as the fallback: a row whose identifying field is still
+          // empty (one just added) has nothing to be called yet, and a blank
+          // heading would be worse than a number.
+          label={identity?.text || `#${idx + 1}`}
+          tooltip={identity?.label}
           unMountContentOnCollapse={false}
-          badge={display_name || name}
+          // The position moves to the badge once the name owns the heading, so
+          // "which of these is third" stays answerable.
+          badge={identity ? `#${idx + 1}` : display_name || name}
           collapsible
           responsiveActions={false}
           responsiveTitle={false}
@@ -188,7 +206,8 @@ export const ArrayAuto = ({
           />
           {showValidationMessage(val)}
         </ReqorePanel>
-      ))}
+        );
+      })}
       <ReqoreControlGroup fluid>
         <ReqoreButton
           onClick={addValue}

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

@@ -46,6 +46,58 @@ const numberRenderItem: IArrayAutoFieldProps['renderItem'] = ({
   />
 );
 
+/**
+ * Hash items are records, so a renderer that casts the item to a string prints
+ * `[object Object]` and shows nothing at all. This one reads the record through
+ * the schema that describes it: one input per declared field, labelled by that
+ * field's `display_name`, carrying the value actually stored under its key.
+ *
+ * With no `arg_schema` there is nothing to name the parts with, so the record is
+ * shown as JSON — unhelpful, but at least it is the data.
+ */
+const hashRenderItem: IArrayAutoFieldProps['renderItem'] = ({
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  size,
+  arg_schema,
+}) => {
+  const record = (value ?? {}) as Record<string, unknown>;
+  const fields = Object.entries(arg_schema ?? {});
+
+  if (!fields.length) {
+    return (
+      <StringFormField
+        value={JSON.stringify(record)}
+        onChange={() => {}}
+        disabled={disabled}
+        readOnly
+        size={size as any}
+        aria-label='Array item input'
+      />
+    );
+  }
+
+  return (
+    <ReqoreControlGroup vertical fluid gapSize='small'>
+      {fields.map(([fieldName, fieldSchema]) => (
+        <StringFormField
+          key={fieldName}
+          value={(record[fieldName] as string) ?? ''}
+          onChange={(v) => onChange({ ...record, [fieldName]: v })}
+          disabled={disabled}
+          readOnly={readOnly}
+          size={size as any}
+          aria-label={
+            ((fieldSchema as { display_name?: string })?.display_name as string) ?? fieldName
+          }
+        />
+      ))}
+    </ReqoreControlGroup>
+  );
+};
+
 const meta = {
   component: ArrayAutoField,
   title: 'Components/Form/Auto Array',
@@ -322,6 +374,7 @@ export const ComplexHashItems: Story = {
     type: 'hash',
     value: [{ key: 'value' }],
     display_name: 'Hash Items',
+    renderItem: hashRenderItem,
   },
   parameters: {
     docs: {
@@ -339,3 +392,84 @@ export const ComplexHashItems: Story = {
     await expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(0);
   },
 };
+
+/**
+ * The editable list, headed by what identifies each record.
+ *
+ * The rows used to read `#1 #2 #3`, so finding one method meant opening each in
+ * turn — and the collapsed preview beside it already headed the same records
+ * `init` / `onOrderStatus`, which made one item answer to two names. Both now
+ * resolve the heading through `recordIdentity`: the first field the SCHEMA
+ * declares that holds a scalar, skipping any it leaves unset. The position keeps
+ * a badge, so "the third one" is still answerable.
+ */
+export const HashItemsHeadedByIdentity: Story = {
+  args: {
+    type: 'hash',
+    display_name: 'Service Methods',
+    arg_schema: {
+      name: { type: 'string', ui_type: 'string', display_name: 'Method Name', required: true },
+      description: { type: 'string', ui_type: 'string', display_name: 'Description' },
+    },
+    value: [
+      { name: 'init', description: 'The init method' },
+      { name: 'onOrderStatus', description: 'Handles order status callbacks' },
+      { description: 'Added but not yet named' },
+      {},
+    ],
+    renderItem: hashRenderItem,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders four hash items headed by their identifying value: two named methods read as "init" and "onOrderStatus", one with no name falls through to its description, and an entirely empty one keeps its position number.',
+      },
+    },
+  },
+  async play() {
+    await waitFor(() => expect(document.querySelectorAll('.array-auto-item').length).toBe(4), {
+      timeout: 5000,
+    });
+
+    const headings = [...document.querySelectorAll('.array-auto-item')].map(
+      (item) => item.textContent ?? ''
+    );
+
+    await expect(headings[0]).toContain('init');
+    await expect(headings[1]).toContain('onOrderStatus');
+    // An unset field is skipped rather than promoted blank, so this one is
+    // headed by the next field that IS set.
+    await expect(headings[2]).toContain('Added but not yet named');
+    // And a record with nothing set at all keeps its position — there is
+    // genuinely nothing to call it.
+    await expect(headings[3]).toContain('#4');
+
+    // The heading is only half the story: each item must also render the record
+    // it is heading, field by field. Asserting the inputs is what would have
+    // caught them all printing "[object Object]" — the heading resolved
+    // correctly while every value below it was a stringified hash.
+    const nameInputs = document.querySelectorAll<HTMLInputElement>(
+      'input[aria-label="Method Name"]'
+    );
+    const descInputs = document.querySelectorAll<HTMLInputElement>(
+      'input[aria-label="Description"]'
+    );
+
+    await expect(nameInputs.length).toBe(4);
+    await expect(descInputs.length).toBe(4);
+    await expect(nameInputs[0].value).toBe('init');
+    await expect(descInputs[0].value).toBe('The init method');
+    await expect(nameInputs[1].value).toBe('onOrderStatus');
+    // The unnamed record: no name to show, but the description it IS headed by
+    // has to be there.
+    await expect(nameInputs[2].value).toBe('');
+    await expect(descInputs[2].value).toBe('Added but not yet named');
+    // And the empty one renders empty inputs rather than an empty item.
+    await expect(nameInputs[3].value).toBe('');
+    await expect(descInputs[3].value).toBe('');
+
+    // Nothing anywhere may read as a stringified record.
+    await expect(document.body.textContent).not.toContain('[object Object]');
+  },
+};

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

@@ -9,6 +9,7 @@ import {
 } from '@qoretechnologies/reqore';
 import { IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
 import { map, size } from 'lodash';
+import { recordIdentity } from '../../engine/readFirst';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useDebounce } from 'react-use';
 import { validateFieldWithResult } from '../../../../helpers/validations';
@@ -279,11 +280,27 @@ export const ArrayAutoField = memo(
 
     return (
       <ReqoreControlGroup vertical fluid>
-        {map(localValue, (val, idx) => (
+        {map(localValue, (val, idx) => {
+          // The same field the collapsed preview promotes, resolved by the same
+          // definition — see `recordIdentity`. Both editable list renderers head
+          // their records with it, so an item cannot be called `init` in one
+          // place and `#1` in another.
+          const identity =
+            val && typeof val === 'object' && !Array.isArray(val)
+              ? recordIdentity(val as Record<string, unknown>, arg_schema)
+              : undefined;
+
+          return (
           <ReqorePanel
             key={idx}
-            label={`#${idx + 1}`}
-            badge={display_name || name}
+            // `#N` stays as the fallback: a record whose identifying field is
+            // still empty has nothing to be called yet, and a blank heading
+            // would be worse than a number.
+            label={identity?.text || `#${idx + 1}`}
+            tooltip={identity?.label}
+            // The position moves to the badge once the name owns the heading,
+            // so "which of these is third" stays answerable.
+            badge={identity ? `#${idx + 1}` : display_name || name}
             collapsible
             unMountContentOnCollapse={false}
             responsiveActions={false}
@@ -321,7 +338,8 @@ export const ArrayAutoField = memo(
             })}
             {renderValidationMessage(val)}
           </ReqorePanel>
-        ))}
+          );
+        })}
 
         <ReqoreButton
           onClick={addItem}

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

@@ -18,6 +18,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import useMount from 'react-use/lib/useMount';
 import { typedToYaml, yamlToTyped } from '../../../../helpers/common';
+import { getListElementValue } from '../../../../helpers/options';
 import {
   getTypeFromValue,
   getValueOrDefaultValue,
@@ -363,6 +364,18 @@ function AutoField<T = any>({
     return (
       <Override
         {...rest}
+        // The field's SHAPE, which `rest` does not carry: these three are
+        // destructured into named props above, so a host editor received a
+        // field it could not describe. `arg_schema` is the sub-schema a host
+        // sub-form renders FROM — without it the IDE's test-cases drawer fell
+        // back to humanising each key, so `Path`, `Actual` and `Expected` were
+        // asked for with no label of their own and no description, while the
+        // text sat one fetch away. `element_type`/`ui_element_type` travel with
+        // it: a sub-schema alone cannot say whether the value is one hash or a
+        // list of them.
+        arg_schema={arg_schema}
+        element_type={element_type}
+        ui_element_type={ui_element_type}
         name={name}
         value={value}
         onChange={(val: any, emittedType?: IQorusType, emittedIsFunction?: boolean) => {
@@ -424,6 +437,9 @@ function AutoField<T = any>({
         value={value}
         name={name}
         onChange={handleChange}
+        // The picker heads itself with the field's own name rather than a
+        // generic "Select one:".
+        label={rest.display_name}
         size={rest.size}
         disabled={rest.disabled}
         app={rest.app}
@@ -507,6 +523,12 @@ function AutoField<T = any>({
           return (
             <LongStringFormField
               {...rest}
+              // These four share one editor but not one shape: a `string` holds
+              // exactly one line, while `data`, `binary` and `long-string` hold
+              // a document. Without the type the field cannot tell them apart
+              // and treats them all as documents, so an interface's Internal
+              // Name — which becomes a YAML key — accepted Enter.
+              type={currentType}
               onChange={(value) => handleChange(name, value)}
               value={value}
             />
@@ -644,8 +666,16 @@ function AutoField<T = any>({
               });
             };
 
+            // An element may arrive bare or in a `{value, type}` envelope. The
+            // envelope is what `formatToServerValue` writes, so a list the user
+            // has edited in this session is always wrapped — but a list read
+            // back from storage holds exactly what the server contract asks
+            // for, which for a list of strings is the strings themselves.
+            // Reaching for `.value` on those answered `undefined` for every
+            // element: the row rendered as an empty, invalid item, and the
+            // emptiness was then written back over the stored value.
             const formatFromServerValue = (value) => {
-              return (value || []).map((item) => item?.value);
+              return (value || []).map(getListElementValue);
             };
 
             const mappedAllowedValues = rest.element_allowed_values?.map((ev) => ({

package/src/components/form/fields/long-string/LongString.tsx

@@ -1,17 +1,31 @@
 import { ReqoreTextarea } from '@qoretechnologies/reqore';
 import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
+import {
+  flattenToSingleLine,
+  hasLineBreak,
+  isSingleLineStringType,
+} from '../../../../helpers/singleLineString';
 
 export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange'> {
   value?: string;
   onChange?: (value: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+  /**
+   * The field's declared type, which decides whether it holds one line.
+   *
+   * Without it every string field is a growing textarea, so a technical name, a
+   * version and an IP address all accept Enter — and become YAML keys, class
+   * names and URLs with a newline in them. See `helpers/singleLineString`.
+   */
+  type?: string;
 }
 
 export const LongStringFormField = ({
   value,
   onChange,
   onClearClick,
+  type,
   ...rest
 }: ILongStringFormFieldProps) => {
   const [localValue, setLocalValue] = useState<string>(value ?? '');
@@ -32,9 +46,32 @@ export const LongStringFormField = ({
     [localValue, onChange]
   );
 
-  const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>): void => {
-    setLocalValue(event.target.value);
-  }, []);
+  const singleLine = isSingleLineStringType(type);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>): void => {
+      const raw = event.target.value;
+      // Flatten here rather than only blocking the Enter key: a line break also
+      // arrives by paste, by drag-and-drop, from autofill and from an IME, and
+      // a keydown guard catches none of those.
+      setLocalValue(singleLine && hasLineBreak(raw) ? flattenToSingleLine(raw) : raw);
+    },
+    [singleLine]
+  );
+
+  // Stop Enter before it inserts anything, so the caret does not jump to a
+  // second line that is then flattened away under the cursor.
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+      if (singleLine && event.key === 'Enter') {
+        event.preventDefault();
+      }
+      (rest as { onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void }).onKeyDown?.(
+        event
+      );
+    },
+    [singleLine, rest.onKeyDown]
+  );
 
   const handleClearClick = useCallback(() => {
     setLocalValue('');
@@ -44,12 +81,16 @@ export const LongStringFormField = ({
 
   return (
     <ReqoreTextarea
-      scaleWithContent
+      // A one-line field must not grow, and must not offer a resize grip that
+      // implies it can hold more than it will keep.
+      scaleWithContent={!singleLine}
+      rows={singleLine ? 1 : undefined}
       fluid
       value={localValue}
       onChange={handleChange}
       onClearClick={handleClearClick}
       {...rest}
+      onKeyDown={handleKeyDown}
     />
   );
 };

package/src/components/form/fields/schema-definition/SchemaDefinitionField.stories.tsx

@@ -55,6 +55,11 @@ export const Empty: Story = {
     await expect(canvas.getByText('Tables')).toBeInTheDocument();
     await expect(canvas.getByText('Sequences')).toBeInTheDocument();
     await expect(canvas.getByText('Migrations')).toBeInTheDocument();
+    // The form rows fade in after the chrome — wait for the Schema tab's own
+    // catalogue rows, or the capture shows empty shells where the form goes
+    // (rejected on build #123 for exactly that).
+    await expect(await canvas.findByText('Schema Name')).toBeInTheDocument();
+    await expect(await canvas.findByText('Version')).toBeInTheDocument();
   },
 };
 

package/src/components/form/fields/template/ExampleValueModal.stories.tsx

@@ -0,0 +1,114 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fireEvent, fn, waitFor } from 'storybook/test';
+import { LONG_EXAMPLE_VALUE } from './__fixtures__/longExampleValue';
+import { ReqraftTemplateExampleValueModal } from './ExampleValueModal';
+
+const meta = {
+  component: ReqraftTemplateExampleValueModal,
+  title: 'Components/Form/TemplateExampleValueModal',
+  args: {
+    // Standalone render — in the app the modal rides reqore's global modal
+    // queue, whose wrapper injects `isOpen`/`onClose` itself.
+    isOpen: true,
+    label: 'Attachment Body',
+    value: LONG_EXAMPLE_VALUE,
+    onClose: fn(),
+  },
+} as Meta<typeof ReqraftTemplateExampleValueModal>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The full example-value viewer for template items whose value is too long for the picker: the whole value in a selectable, scrollable textarea filling the modal body, with a Copy action. Copy surfaces a notification either way — success, or a danger notice when the browser denies clipboard access — never an unhandled rejection.',
+      },
+    },
+  },
+  play: async () => {
+    const modal = await waitFor(
+      () => {
+        const el = document.querySelector('.reqraft-template-example-value-modal');
+        if (!el) throw new Error('modal not rendered yet');
+        return el;
+      },
+      { timeout: 10000 }
+    );
+
+    // The modal holds the WHOLE value — down to the sentinel at the very end.
+    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
+    await expect(textarea.value).toBe(LONG_EXAMPLE_VALUE);
+    await expect(textarea.value.endsWith('THE_VERY_END')).toBe(true);
+
+    // Copy notifies (success locally, clipboard-denied danger in headless CI).
+    const copy = Array.from(modal.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Copy')
+    );
+    await expect(copy).toBeTruthy();
+    fireEvent.click(copy);
+    await waitFor(
+      () => {
+        if (!document.querySelector('.reqore-notification')) {
+          throw new Error('no notification yet');
+        }
+      },
+      { timeout: 10000 }
+    );
+  },
+};
+
+export const Mobile: StoryObj<typeof meta> = {
+  args: {
+    // The overridable strings double as the prop-passthrough coverage: the
+    // play below asserts THIS notification text, proving consumers (e.g.
+    // qorus-ide under Lingui) can supply translated copy.
+    copyLabel: 'Copy value',
+    copyNotificationContent: 'Value copied',
+    copyFailedNotificationContent: 'Copy was blocked',
+  },
+  parameters: {
+    qlip: { viewport: { width: 390, height: 844 } },
+    docs: {
+      description: {
+        story:
+          'The phone presentation of the full-value modal — the textarea still fills the modal body at phone width, and every user-visible string (Copy label, both notifications) is prop-overridden here, which doubles as coverage that consumers can pass translated copy.',
+      },
+    },
+  },
+  play: async () => {
+    const modal = await waitFor(
+      () => {
+        const el = document.querySelector('.reqraft-template-example-value-modal');
+        if (!el) throw new Error('modal not rendered yet');
+        return el;
+      },
+      { timeout: 10000 }
+    );
+
+    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
+    await expect(textarea.value).toBe(LONG_EXAMPLE_VALUE);
+
+    // The overridden copy label renders…
+    const copy = Array.from(modal.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Copy value')
+    );
+    await expect(copy).toBeTruthy();
+
+    // …and the overridden notification content is what surfaces (success or
+    // clipboard-denied, both prop-supplied).
+    fireEvent.click(copy);
+    await waitFor(
+      () => {
+        const notification = document.querySelector('.reqore-notification');
+        if (!notification) throw new Error('no notification yet');
+        const text = notification.textContent || '';
+        if (!text.includes('Value copied') && !text.includes('Copy was blocked')) {
+          throw new Error(`unexpected notification: ${text}`);
+        }
+      },
+      { timeout: 10000 }
+    );
+  },
+};