@qoretechnologies/reqraft 0.10.45-pr.95.gc02205d → 0.10.45

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/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: {
@@ -364,6 +417,7 @@ export const HashItemsHeadedByIdentity: Story = {
       { description: 'Added but not yet named' },
       {},
     ],
+    renderItem: hashRenderItem,
   },
   parameters: {
     docs: {
@@ -390,5 +444,32 @@ export const HashItemsHeadedByIdentity: Story = {
     // 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/auto/AutoFormField.stories.tsx

@@ -11,7 +11,7 @@
 import { StoryObj } from '@storybook/react-vite';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import jsyaml from 'js-yaml';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { StoryMeta } from '../../../../types';
 import { buildTemplates } from '../../../../helpers/templates';
@@ -512,3 +512,49 @@ export const ListWithElementType: Story = {
     },
   },
 };
+
+/**
+ * A named `arg_schema` whose fetch fails.
+ *
+ * The field asks the server for `dataprovider/arg_schemas/<name>`. When that
+ * request rejected — a malformed instance URL, an aborted request, a transport
+ * error — the rejection escaped the effect's async IIFE unhandled, `setError`
+ * never ran, and `finalArgSchema` stayed undefined. The loading branch then
+ * returned on every subsequent render and the error branch below it was
+ * unreachable, so the field showed "Loading field data..." for the life of the
+ * form: a request that failed instantly and one that is merely slow looked
+ * exactly the same, forever.
+ *
+ * The transport is stubbed rather than left to the dev server, so the story
+ * exercises that path and only that path.
+ */
+export const NamedArgSchemaFetchFails: Story = {
+  args: {
+    name: 'rules',
+    type: 'list',
+    element_type: 'hash',
+    arg_schema: 'a-schema-that-does-not-resolve' as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The named arg schema could not be fetched, so the field says so instead of showing an endless "Loading field data..." spinner with the error it had already received never rendered.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      const real = window.fetch;
+      window.fetch = (() =>
+        Promise.reject(new Error('Failed to fetch the field schema'))) as typeof window.fetch;
+      useEffect(() => () => {
+        window.fetch = real;
+      }, []);
+      return <Story />;
+    },
+  ],
+  play: async () => {
+    await waitForText(/Failed to fetch the field schema|could not be loaded/);
+  },
+};

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';