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

package/src/components/form/engine/CompactRow.tsx

@@ -23,16 +23,18 @@ import isEqual from 'lodash/isEqual';
 import size from 'lodash/size';
 import React, { memo } from 'react';
 import { useContextSelector } from 'use-context-selector';
-import { hasAllDependenciesFullfilled } from '../../../helpers/validations';
+import { hasAllDependenciesFullfilled, parseDependency } from '../../../helpers/validations';
 import {
   findTemplate,
   getTemplateTagStyle,
   isValueTemplate,
+  describeTemplateReference,
+  splitTemplateTokens,
   TTemplateMeta,
 } from '../../../helpers/templates';
-import { richtextToSegments } from '../../../helpers/common';
+import { getDefaultValue, richtextToSegments, richtextToString } from '../../../helpers/common';
 import { ReadOnlyTemplateTag } from '../fields/template/ReadOnlyTemplateTag';
-import { ReqraftCodeSizeTag } from '../../codeSize';
+import { describeCodeSize, formatCodeChars, formatCodeLines } from '../../codeSize';
 import { Description } from '../../Description';
 import { useMarkdownRenderer } from '../../Description/markdownRendererContext';
 import { FocusedEditing } from '../../FocusedEditing';
@@ -47,7 +49,6 @@ import {
   StyledEditCard,
   StyledLabelBlock,
   StyledAbsorbedField,
-  StyledAbsorbedLabel,
   StyledLabelDesc,
   StyledRowActions,
   StyledRowInset,
@@ -138,6 +139,26 @@ const MAX_INLINE_OPTION_ACTIONS = 2;
 // One read-first row: label | value | action collapsed; the real editor (the
 // classic renderOption) expanded. `hidden` = search-surfaced optional —
 // activating the row adds the field first.
+/**
+ * The text inside a rich-text envelope, when a list item is one.
+ *
+ * An option like Gmail's `to` is `type: "list"`, `element_type: "string"`,
+ * `supports_templates: true`: each element is a plain string that may carry
+ * template tags, so its editor is a rich-text one and the element value arrives
+ * wrapped as `{type: "richtext", value: [{type: "paragraph", …}]}`.
+ *
+ * That envelope is a string in a coat, not structured data. The hash-list test
+ * unwraps `item.value`, found the Slate document — an object — and classed a
+ * list of email addresses as a list of hashes, so the row drew an expandable
+ * `type / children / text` tree instead of the address the operator typed.
+ */
+export const richtextItemText = (item: unknown): string | undefined =>
+  item && typeof item === 'object' && (item as { type?: unknown }).type === 'richtext' ?
+    richtextToString(
+      (item as { value?: Parameters<typeof richtextToString>[0] }).value
+    )
+  : undefined;
+
 export const CompactRow = memo(
   ({
     optionName,
@@ -235,6 +256,27 @@ export const CompactRow = memo(
 
     // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
     // its "N fields" summary (sub-fields reveal beneath the row).
+    /**
+     * Flattens the line breaks in one prose segment of a richtext SUMMARY.
+     *
+     * The read-first row is a single line: every other value type reaches it
+     * through `whiteSpace: 'nowrap'`, which collapses newlines for free. The
+     * richtext branch is the only one that opts into `'pre'` — it has to, or the
+     * spaces that separate a word from the chip beside it are dropped — and `pre`
+     * also honours the newlines, which `nowrap` would have eaten.
+     *
+     * So a genuinely multi-line value (an alert rule's Gmail message body is five
+     * `\n`-separated lines) gave each segment after the first a blank first line.
+     * The wrapper centres its items, so a two-line-tall box centred against
+     * one-line chips put every word 12px below the chip beside it, and the row
+     * read as a staircase. Measured on supah: prose boxes 30px against 14px chips.
+     *
+     * A space, not nothing: consecutive prose segments are merged before they get
+     * here, so a value with a break and no chip between its lines would otherwise
+     * lose the word boundary entirely.
+     */
+    const collapseSummaryBreaks = (text: string): string => text.replace(/\s*\r?\n\s*/g, ' ');
+
     const renderReadFirstValue = (
       field: IQorusFormField,
       schema: TQorusFormFieldSchema | undefined,
@@ -336,7 +378,6 @@ export const CompactRow = memo(
                 />
               );
             })}
-            <ReqraftCodeSizeTag code={field.value} />
           </ReqoreControlGroup>
         );
       }
@@ -385,6 +426,15 @@ export const CompactRow = memo(
         return <ReadOnlyTemplateTag value={field.value} templates={templates} size='small' />;
       }
 
+      // A LIST whose elements are rich-text envelopes is a list of strings, so it
+      // reads as those strings. Without this the row fell through to the generic
+      // list summary and printed a bare count ("1 item") above the structured
+      // tree, never the address itself.
+      if (Array.isArray(field?.value) && field.value.some((item) => richtextItemText(item) !== undefined)) {
+        const texts = field.value.map((item) => richtextItemText(item) ?? String(item ?? ''));
+        return <span style={textStyle}>{texts.filter((text) => text !== '').join(', ')}</span>;
+      }
+
       // Richtext read-first summary: inline $-chips for embedded template tags
       // with the prose around them (the IDE intent scheme via getTemplateTagStyle),
       // kept lightweight instead of mounting the full editor — that lives in the
@@ -415,6 +465,49 @@ export const CompactRow = memo(
                         ?.metadata as TTemplateMeta | undefined
                     )}
                   />
+                : <span key={index} style={{ whiteSpace: 'pre' }}>
+                    {collapseSummaryBreaks(segment.text)}
+                  </span>
+              )}
+            </span>
+          );
+        }
+      }
+
+      // An expression summarises to one line of text, and a template reference
+      // inside it printed as its own raw token — `$data:{…}` renders a value as
+      // code where a name belongs. Chip every reference here, on the richtext
+      // branch's pattern above, so the wrapper (`trim(`…`)`) still reads as the
+      // text it is while the reference reads as a name.
+      //
+      // Unconditionally: a surface with no catalogue (the Automation Hub
+      // template preview never fetches one) still shows the reference's own
+      // path, which is the point — a conditional chip is no chip at all
+      // exactly where the raw token looks worst.
+      if ((field as { is_expression?: boolean })?.is_expression && formatted) {
+        const segments = splitTemplateTokens(formatted);
+        const named = segments.map((segment) =>
+          segment.kind === 'token' ?
+            { ...segment, ...describeTemplateReference(templates, segment.text) }
+          : segment
+        );
+
+        if (named.some((segment) => segment.kind === 'token')) {
+          return (
+            <span style={{ ...wrapStyle, gap: 4, overflow: 'hidden' }}>
+              {named.map((segment, index) =>
+                segment.kind === 'token' ?
+                  <ReqoreTag
+                    key={index}
+                    size='tiny'
+                    // Inherit the row's font size so the chip shares a baseline
+                    // with the text around it — see the richtext branch above.
+                    style={{ fontSize: 'inherit' }}
+                    icon='ExchangeDollarLine'
+                    label={segment.label}
+                    tooltip={segment.text}
+                    {...getTemplateTagStyle(segment.item?.metadata as TTemplateMeta | undefined)}
+                  />
                 : <span key={index} style={{ whiteSpace: 'pre' }}>
                     {segment.text}
                   </span>
@@ -833,6 +926,7 @@ export const CompactRow = memo(
           className='options-readfirst-cancel'
           size='small'
           flat
+          minimal
           fixed
           icon='CloseLine'
           intent='warning'
@@ -950,6 +1044,11 @@ export const CompactRow = memo(
         />
       : null;
 
+    // The gap rides on the message itself rather than on the panel around it:
+    // the panel is a vertical ReqoreControlGroup, which owns its own layout and
+    // stacks children flush, and the class rule that used to carry a 4px gap
+    // never reached this element at all — which is why two messages read as one
+    // two-tone block with no space between them.
     const renderInfoStrip = (m: TInfoMsg, index: number) => (
       <ReqoreMessage
         key={`${m.content}-${index}`}
@@ -958,6 +1057,7 @@ export const CompactRow = memo(
         flat
         intent={m.intent as never}
         title={m.title}
+        style={{ marginBottom: 8 }}
       >
         {m.content}
       </ReqoreMessage>
@@ -1050,10 +1150,10 @@ export const CompactRow = memo(
             const absorbedField = availableOptions?.[absorbedName] as IQorusFormField | undefined;
             if (!absorbedField) return null;
             return (
+              // No label element of its own: the editor now heads itself with
+              // the field's name (see FieldAllowedValuesCheckGroup), so a label
+              // beside it printed the same word twice.
               <StyledAbsorbedField key={absorbedName} className='options-readfirst-absorbed'>
-                <StyledAbsorbedLabel size='small' effect={{ opacity: 0.6 }}>
-                  {getAbsorbedLabel(absorbedName)}
-                </StyledAbsorbedLabel>
                 <div style={{ minWidth: 0, flex: 1 }}>
                   {renderOption(absorbedName, absorbedField, 'small', true)}
                 </div>
@@ -1068,6 +1168,36 @@ export const CompactRow = memo(
     // holding code.
     const valueType = getValueType(optionField, schema);
 
+    // How much source there is describes the FIELD, not its value, so the count
+    // sits under the field's name — the same rule `lineCountNote` already
+    // follows for a multi-line markdown value, and the same reason: the value
+    // column carries the value and nothing else. It renders on the read row and
+    // the open one alike, because "how much code is here?" is a question that
+    // outlives opening the editor.
+    //
+    // It is a plain monospaced note rather than a tag, and deliberately the same
+    // one `lineCountNote` renders: both answer "how big is this field's value?"
+    // in the same corner of the same column, so stating one as a chip and the
+    // other as text made two spellings of one idea.
+    const codeSizeNode =
+      valueType === 'code-editor' &&
+      typeof optionField?.value === 'string' &&
+      optionField.value !== '' ?
+        (() => {
+          const { lines, chars } = describeCodeSize(optionField.value as string);
+          return (
+            <ReqoreP
+              className='options-readfirst-label-code-size'
+              size='tiny'
+              effect={{ opacity: 0.45, textAlign: 'left' }}
+              style={{ fontFamily: 'monospace' }}
+            >
+              {`${formatCodeChars(chars)} ${formatCodeLines(lines)}`}
+            </ReqoreP>
+          );
+        })()
+      : null;
+
     if (isExpanded) {
       if (inlineEditable) {
         const collapse = () => toggleExpandedOption(optionName);
@@ -1083,7 +1213,7 @@ export const CompactRow = memo(
             }
             {...clusterHoverProps}
           >
-            <StyledLabelBlock>
+            <StyledLabelBlock className='options-readfirst-label-block'>
               <StyledRowLabel
                 role='button'
                 tabIndex={0}
@@ -1118,6 +1248,7 @@ export const CompactRow = memo(
                   {labelShortDesc}
                 </StyledLabelDesc>
               : null}
+              {codeSizeNode}
             </StyledLabelBlock>
             <div
               ref={editorRef}
@@ -1145,15 +1276,32 @@ export const CompactRow = memo(
 
                   It renders here, at the top of the value cell, which is exactly where
                   it sits on the read row — so the switch moves nothing. */}
+              {/* The field's own schema messages follow it into the editor.
+
+                  A message is guidance about the value, so the moment it matters
+                  most is while the value is being changed — and a diagnostic is
+                  useless anywhere else: it names a line the author can only act
+                  on with the editor in front of them. They used to render on the
+                  READ row alone, so opening the field to fix what one said was
+                  what made it disappear. Worse for a host that opens a field on
+                  arrival: the message was never visible at all.
+
+                  Above the editor rather than below it, and above the absorbed
+                  siblings, because it is the reason the author opened the row. */}
+              {panelMessages.length ?
+                <ReqoreControlGroup
+                  className='options-readfirst-info-panel'
+                  vertical
+                  fluid
+                  gapSize='normal'
+                >
+                  {panelMessages.map(renderInfoStrip)}
+                </ReqoreControlGroup>
+              : null}
               {/* Absorbed siblings sit at the TOP of the value cell, above the
                   editor they belong to — the language you are writing in is
                   read before the code, not after it. */}
               {absorbedNodes}
-              {valueType === 'code-editor' && typeof optionField?.value === 'string' ?
-                <div className='options-readfirst-editing-summary'>
-                  <ReqraftCodeSizeTag code={optionField.value} />
-                </div>
-              : null}
               {renderOption(optionName, optionField, 'small', true)}
             </div>
             <StyledRowActions>
@@ -1330,6 +1478,18 @@ export const CompactRow = memo(
               {inlineOptionActions.map((action, index) =>
                 renderInjectedOptionAction(action, index)
               )}
+              {/* Revert and Cancel, in the same order and with the same meaning
+                  as the inline row's strip.
+
+                  They were absent here, and which shape a field opens into is
+                  decided by its TYPE — so an `any`-typed option (a test
+                  assertion's Expected Value, a Qog action state option) opened
+                  into this card and had no way out that discarded: Done
+                  committed, clicking away committed, and Escape did nothing at
+                  all because the handler is on the inline row's editor. The
+                  only exit from a card kept whatever had been typed. */}
+              {editRowRevertButton}
+              {cancelEditButton}
               {/* Clear-value sits before the More menu — the card analog of the
                   inline row's Clear. Empties the value (keeps the field). */}
               {hasValue && !readOnly ?
@@ -1354,6 +1514,20 @@ export const CompactRow = memo(
               not only the inline row — which shape a field opens into depends
               on its type, and absorbing must not depend on that. */}
           {absorbedNodes}
+          {/* Escape discards here for the same reason it does on the inline
+              row: it is the one keystroke every editor treats as "get me out
+              of this without saving", and a card that ignored it made the
+              keystroke a silent commit. Same handler, same `cancelEdit()`, so
+              the two shapes cannot diverge. */}
+          <div
+            style={{ display: 'contents' }}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                event.stopPropagation();
+                cancelEdit();
+              }
+            }}
+          >
           {/* Same fullscreen focused-editing affordance as the classic cards —
               the modal mounts when this option is focused. */}
           <FocusedEditing
@@ -1370,12 +1544,33 @@ export const CompactRow = memo(
             : null}
             {renderOption(optionName, optionField)}
           </FocusedEditing>
+          </div>
         </StyledEditCard>
       );
     }
 
     const formatted = formatOptionValue(optionField, schema);
     const empty = formatted === '';
+    // A field with no value of its own but a declared default is not simply
+    // unanswered: the default is what the server will use, and an em-dash says
+    // the opposite. Render the default in its place, through the same formatter
+    // so a list or an enum reads the way a real value would.
+    //
+    // This does NOT make the field count as answered. `empty` stays true, so the
+    // row keeps the dimmed italic treatment that distinguishes a default from an
+    // answer, and bucketing — which reads the field's own value, not this — still
+    // files it under Optional and leaves it behind the collapse.
+    //
+    // `hidden` is included deliberately: it marks a field the form has not added
+    // yet, which is the case that benefits most — the row is the author's first
+    // sight of the field, and the default is what it will contribute if left
+    // alone. Both flags only ever route to the em-dash below, so there is no
+    // real value being displaced.
+    const defaultValue = hidden || empty ? getDefaultValue(schema) : undefined;
+    const formattedDefault =
+      defaultValue === undefined || defaultValue === null ?
+        ''
+      : formatOptionValue({ ...optionField, value: defaultValue }, schema);
     // Inline reasons shown on the value line: validation / dependency / one-of /
     // default-value hints, plus a read-only covered-by note (editable covered rows
     // carry that in their chip instead).
@@ -1405,6 +1600,9 @@ export const CompactRow = memo(
       Array.isArray(optionField?.value) &&
       optionField.value.length > 0 &&
       optionField.value.some((item) => {
+        if (richtextItemText(item) !== undefined) {
+          return false;
+        }
         const inner =
           item && typeof item === 'object' && 'value' in (item as Record<string, unknown>) ?
             (item as Record<string, unknown>).value
@@ -1422,6 +1620,19 @@ export const CompactRow = memo(
       valueType === 'code-editor' &&
       typeof optionField?.value === 'string' &&
       optionField.value.length > 0;
+    // A richtext value that renders as CHIPS is drawn in full by the row itself:
+    // the chips are the value, and the reader is looking straight at it. The
+    // native `title` below would then hover the raw source of the very thing the
+    // chips replace ("[$fsminput:severity] $fsminput:alert_code") — and, because
+    // each chip carries its own Reqore tooltip, hovering one fires BOTH: the chip
+    // popover and the row's browser tooltip, in different places, saying almost
+    // the same thing. Only the popover shows up in a screenshot, which is what
+    // made the pair hard to report.
+    const showsTemplateChips =
+      !hidden &&
+      valueType === 'richtext' &&
+      Array.isArray(optionField?.value) &&
+      richtextToSegments(optionField.value as never).some((segment) => segment.kind === 'tag');
     // Markdown reads the same way for the same reason: the row itself can only
     // show a line of text, and for markdown that line is the SOURCE — the reader
     // gets `## ` and `**` where the point of the value is what it looks like
@@ -1458,35 +1669,45 @@ export const CompactRow = memo(
       showFieldTypes ?
         `<${(schema?.ui_type as string) || (schema?.type as string) || 'auto'}${(schema as { ui_element_type?: string } | undefined)?.ui_element_type ? `[${(schema as { ui_element_type?: string }).ui_element_type}]` : ''}>`
       : null;
-    // Disabled rows (schema flag or unmet deps) can't open — a lock + reason
-    // renders instead. Form-level readOnly still opens in view mode (Close).
+    // A `readonly` field is one the system owns — an assigned id, a recorded
+    // provenance. The server states that on the field itself; only the older
+    // compat projection also mapped it to `disabled`, so on this path the form
+    // was handed `readonly` alone and rendered an editable control for a value
+    // no answer of the user's can change.
+    const fieldReadonly = !!(schema as { readonly?: boolean } | undefined)?.readonly;
+    // Disabled rows (schema flag, readonly, or unmet deps) can't open — a lock +
+    // reason renders instead. Form-level readOnly still opens in view mode (Close).
     const fieldDisabled =
       !hidden &&
       !readOnly &&
       (!!schema?.disabled ||
+        fieldReadonly ||
         !hasAllDependenciesFullfilled(schema?.depends_on, availableOptions, options || {}));
     const fieldDisabledReason =
-      schema?.disabled ? 'This field is disabled' : 'Disabled — dependencies are not fulfilled';
+      schema?.disabled ? 'This field is disabled'
+      : fieldReadonly ? 'Set by Qorus — not editable'
+      : 'Disabled — dependencies are not fulfilled';
     // Dependency contract: top-level entries must ALL hold; a nested array
-    // means ANY of its entries; `name=value` requires that exact value.
+    // means ANY of its entries; `name=value` requires that exact value, and
+    // `name!=value` requires any other answer. Parsed by the same helper the
+    // predicate uses, so the lock cannot describe a rule the form does not apply.
     const dependencyEntries =
-      fieldDisabled && !schema?.disabled ?
+      fieldDisabled && !schema?.disabled && !fieldReadonly ?
         ((schema?.depends_on || []) as (string | string[])[])
       : [];
     const describeDependency = (dep: string) => {
-      const eqIndex = dep.indexOf('=');
-      const depName = eqIndex === -1 ? dep : dep.slice(0, eqIndex);
-      const expected = eqIndex === -1 ? undefined : dep.slice(eqIndex + 1);
+      const { name: depName, op, value: expected } = parseDependency(dep);
       const depLabel = (options?.[depName]?.display_name as string) || depName;
       const depValue = (availableOptions as TQorusForm)?.[depName]?.value;
       return {
         name: depName,
         exists: !!options?.[depName],
-        label: expected === undefined ? depLabel : `${depLabel} = ${expected}`,
+        label: !op ? depLabel : `${depLabel} ${op === '=' ? '=' : '≠'} ${expected}`,
         fulfilled:
-          expected === undefined ?
-            !isOptionValueEmpty(depValue)
-          : depValue != null && String(depValue) === expected,
+          !op ? !isOptionValueEmpty(depValue)
+          : depValue == null ? false
+          : op === '=' ? String(depValue) === expected
+          : String(depValue) !== expected,
       };
     };
     const depHighlightNames = (flatten(dependencyEntries as never[]) as string[])
@@ -1621,7 +1842,7 @@ export const CompactRow = memo(
         {...clusterHoverProps}
       >
         {clusterNode}
-        <StyledLabelBlock>
+        <StyledLabelBlock className='options-readfirst-label-block'>
           <StyledRowLabel title={schema?.short_desc || undefined} $color={cKey}>
             {rowChromeIcon}
             {/* label + asterisk + help flow as ONE inline run, so the asterisk
@@ -1652,6 +1873,7 @@ export const CompactRow = memo(
               {labelShortDesc}
             </StyledLabelDesc>
           : null}
+          {codeSizeNode}
           {lineCountNote ?
             <ReqoreP
               className='options-readfirst-label-lines'
@@ -1667,14 +1889,17 @@ export const CompactRow = memo(
           // A code field draws its whole value in the preview below, with
           // "Show more" for the rest, so a hover carrying the same text is
           // noise -- and a native tooltip holding a few hundred lines is
-          // unreadable anyway. Every other value keeps its hover, which is the
-          // only way to read one that the row had to truncate.
+          // unreadable anyway. A chipped richtext value is the same case: the row
+          // already draws it in full, and its chips carry their own tooltips.
+          // Every other value keeps its hover, which is the only way to read one
+          // that the row had to truncate.
           title={
             (
               !empty &&
               !hidden &&
               !showCodePreview &&
               !showMarkdownPreview &&
+              !showsTemplateChips &&
               typeof formatted === 'string'
             ) ?
               formatted
@@ -1701,10 +1926,24 @@ export const CompactRow = memo(
               reads less like a summary than like a second, disagreeing answer.
               An UNDESCRIBED value keeps its summary: the data tree beneath it
               says nothing about what the value MEANS, so the summary is still
-              the only line that does. */}
-          {showMarkdownPreview || previewWithSchema ? null : (
+              the only line that does.
+
+              Both suppressions are conditional on the replacement ACTUALLY
+              rendering. `previewWithSchema` only asks whether the value and its
+              `arg_schema` COULD be drawn as a schema preview; whether one is
+              drawn is `showStructuredPreview`, and the two disagree for a field
+              whose value type is a host ui_type rather than a list or a hash —
+              a test's `cases` (`ui_type: "test-cases"`, an array of case hashes
+              with an `arg_schema`) could be previewed but is not, because
+              `isHashList` only recognises `list`/`free-list`/`array`. The row
+              then dropped its summary in favour of a preview that never came
+              and rendered nothing at all: a test with cases read as a bare
+              "Cases" and looked unset until it was opened. */}
+          {showMarkdownPreview || (previewWithSchema && showStructuredPreview) ? null : (
             <span className='options-readfirst-valuetext'>
-              {hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted)}
+              {hidden || empty ?
+                formattedDefault || '—'
+              : renderReadFirstValue(optionField, schema, formatted)}
             </span>
           )}
           {valueReasons.map((m, i) => (
@@ -1720,7 +1959,14 @@ export const CompactRow = memo(
               value (full width of the value column) — never pushed down by the
               label's short_desc. */}
           {panelMessages.length ?
-            <div className='options-readfirst-info-panel'>{panelMessages.map(renderInfoStrip)}</div>
+            <ReqoreControlGroup
+              className='options-readfirst-info-panel'
+              vertical
+              fluid
+              gapSize='normal'
+            >
+              {panelMessages.map(renderInfoStrip)}
+            </ReqoreControlGroup>
           : null}
           {/* The structured hash/list preview also lives in the value cell, so it
               starts directly under the value summary ("N fields"), not below the