@qoretechnologies/reqraft 0.10.46-pr.95.ge595a13 → 0.10.46

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)}
         />