@qoretechnologies/reqraft 0.10.43-pr.95.gf7f712f → 0.10.43

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,
@@ -212,16 +213,31 @@ function AutoField<T = any>({
   useEffect(() => {
     if (typeof arg_schema === 'string') {
       (async () => {
-        const schema = await query<IOptionsSchema>({
-          url: `dataprovider/arg_schemas/${arg_schema}`,
-          method: 'GET',
-        });
-
-        if (schema.ok) {
-          setError(undefined);
-          setFinalArgSchema(schema.data);
-        } else {
-          setError(schema.error);
+        /* The await is guarded because `query` can REJECT rather than answer
+           `{ ok: false }` — a malformed instance URL, an aborted request, a
+           transport error. Unguarded, that rejection escaped the async IIFE as
+           an unhandled promise rejection, `setError` never ran, `finalArgSchema`
+           stayed undefined, and the field showed "Loading field data..." for the
+           life of the form: a request that failed instantly and a request that
+           is merely slow looked exactly the same, forever. */
+        try {
+          const schema = await query<IOptionsSchema>({
+            url: `dataprovider/arg_schemas/${arg_schema}`,
+            method: 'GET',
+          });
+
+          if (schema.ok) {
+            setError(undefined);
+            setFinalArgSchema(schema.data);
+          } else {
+            setError(schema.error ?? `The schema "${arg_schema}" could not be loaded.`);
+          }
+        } catch (fetchError) {
+          setError(
+            fetchError instanceof Error ?
+              fetchError.message
+            : `The schema "${arg_schema}" could not be loaded.`
+          );
         }
       })();
     } else {
@@ -363,6 +379,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) => {
@@ -407,6 +435,23 @@ function AutoField<T = any>({
     );
   }
 
+  /* The error is checked BEFORE the spinner, and the spinner waits on the error
+     being absent.
+
+     A named `arg_schema` is fetched (`dataprovider/arg_schemas/<name>`), and when
+     that fetch failed `finalArgSchema` stayed undefined forever — so this spinner
+     returned on every subsequent render and the `if (error)` branch further down
+     was unreachable. The field sat on "Loading field data..." for the life of the
+     form with no way to find out why, which is indistinguishable from a request
+     that is merely slow. */
+  if (arg_schema && !finalArgSchema && error) {
+    return (
+      <ReqoreMessage intent='danger' size='small'>
+        {error}
+      </ReqoreMessage>
+    );
+  }
+
   if (arg_schema && !finalArgSchema) {
     return <ReqoreSpinner size='small'>Loading field data...</ReqoreSpinner>;
   }
@@ -424,6 +469,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 +555,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 +698,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 }
+    );
+  },
+};

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

@@ -0,0 +1,99 @@
+import { ReqoreModal, ReqoreTextarea, useReqoreProperty } from '@qoretechnologies/reqore';
+import { IReqoreModalProps } from '@qoretechnologies/reqore/dist/components/Modal';
+import { CSSProperties, memo, useCallback } from 'react';
+
+export interface IReqraftTemplateExampleValueModalProps extends Partial<IReqoreModalProps> {
+  /** The template field's display name — the modal heading. */
+  label?: string;
+  /** The FULL serialized example value. */
+  value: string;
+  /** Copy-action label. @default 'Copy' */
+  copyLabel?: string;
+  /**
+   * Notification shown after a successful copy (prop-overridable so consumers
+   * can pass translated copy — same contract as `ReqoreExportModal`).
+   * @default 'Example value copied to clipboard'
+   */
+  copyNotificationContent?: string;
+  /** Notification shown when the browser denies clipboard access. @default 'Could not copy to clipboard' */
+  copyFailedNotificationContent?: string;
+}
+
+/* Fill the modal's fixed-height body instead of scaling with content: a
+   content-scaled textarea either stops short of the body (dead space below, a
+   partial-height scrollbar) or explodes it on huge values. Filling hands the
+   whole body to the textarea, so its scrollbar spans the modal body. Module
+   scope for stable identity. */
+const FILL_STYLE: CSSProperties = { height: '100%' };
+
+/**
+ * Full example-value viewer for template/context-data items whose
+ * `example_value` is too long for the picker's item description (a
+ * binary-carrying field's example can be an entire base64 file). Opened by the
+ * "?" item action wired in `helpers/templates.ts` via reqore's global
+ * `modalStore.addModal()` — the modals wrapper injects `isOpen`/`onClose`, so
+ * this component stays presentation-only (pass `isOpen` yourself only when
+ * rendering it standalone, e.g. in a story).
+ */
+export const ReqraftTemplateExampleValueModal = memo(
+  ({
+    label,
+    value,
+    copyLabel = 'Copy',
+    copyNotificationContent = 'Example value copied to clipboard',
+    copyFailedNotificationContent = 'Could not copy to clipboard',
+    ...rest
+  }: IReqraftTemplateExampleValueModalProps) => {
+    const addNotification = useReqoreProperty('addNotification');
+
+    const handleCopyClick = useCallback(async () => {
+      // Clipboard access can be denied (permissions, insecure context) — the
+      // failure surfaces as a notification instead of an unhandled rejection.
+      try {
+        await navigator.clipboard.writeText(value);
+        addNotification({
+          content: copyNotificationContent,
+          intent: 'success',
+          duration: 3000,
+        });
+      } catch (error) {
+        addNotification({
+          content: copyFailedNotificationContent,
+          intent: 'danger',
+          duration: 3000,
+        });
+      }
+    }, [value, addNotification, copyNotificationContent, copyFailedNotificationContent]);
+
+    return (
+      <ReqoreModal
+        label={label || 'Example value'}
+        icon='FileTextLine'
+        height='70vh'
+        className='reqraft-template-example-value-modal'
+        bottomActions={[
+          {
+            position: 'right',
+            label: copyLabel,
+            icon: 'ClipboardLine',
+            onClick: () => {
+              handleCopyClick();
+            },
+          },
+        ]}
+        {...rest}
+      >
+        <ReqoreTextarea
+          readOnly
+          value={value}
+          minimal
+          fluid
+          style={FILL_STYLE}
+          wrapperStyle={FILL_STYLE}
+        />
+      </ReqoreModal>
+    );
+  }
+);
+
+ReqraftTemplateExampleValueModal.displayName = 'ReqraftTemplateExampleValueModal';

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

@@ -2,7 +2,11 @@ import { ReqoreTag, ReqoreTagGroup } from '@qoretechnologies/reqore';
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
 import { memo } from 'react';
-import { findTemplate, getTemplateTagStyle, TTemplateMeta } from '../../../../helpers/templates';
+import {
+  getTemplateTagStyle,
+  describeTemplateReference,
+  TTemplateMeta,
+} from '../../../../helpers/templates';
 
 export interface IReadOnlyTemplateTagProps {
   /** The template reference value, e.g. `$local:test`. */
@@ -22,14 +26,14 @@ export interface IReadOnlyTemplateTagProps {
  */
 export const ReadOnlyTemplateTag = memo(
   ({ value, templates, size }: IReadOnlyTemplateTagProps) => {
-    const template = templates ? findTemplate(templates, value) : undefined;
-    const metadata = template?.metadata as TTemplateMeta | undefined;
+    const { label, item } = describeTemplateReference(templates, value);
+    const metadata = item?.metadata as TTemplateMeta | undefined;
     return (
       <ReqoreTagGroup size={size}>
         <ReqoreTag
           icon='ExchangeDollarLine'
           leftIconProps={{ image: metadata?.image }}
-          label={template?.label || value}
+          label={label}
           tooltip={value}
           {...getTemplateTagStyle(metadata)}
         />