@qoretechnologies/reqraft 0.10.36 → 0.10.37-pr.95.g4e65c57

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

@@ -12,8 +12,14 @@ import {
 import { IReqoreDropdownItem } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
 import { IReqorePanelAction } from '@qoretechnologies/reqore/dist/components/Panel';
 import { resolveOptionActions } from './optionActions';
-import { IQorusFormField, TQorusForm, TQorusFormFieldSchema } from '@qoretechnologies/ts-toolkit';
+import {
+  IQorusFormField,
+  IQorusFormSchema,
+  TQorusForm,
+  TQorusFormFieldSchema,
+} from '@qoretechnologies/ts-toolkit';
 import flatten from 'lodash/flatten';
+import isEqual from 'lodash/isEqual';
 import size from 'lodash/size';
 import React, { memo } from 'react';
 import { useContextSelector } from 'use-context-selector';
@@ -26,6 +32,7 @@ import {
 } from '../../../helpers/templates';
 import { richtextToSegments } from '../../../helpers/common';
 import { ReadOnlyTemplateTag } from '../fields/template/ReadOnlyTemplateTag';
+import { ReqraftCodeSizeTag } from '../../codeSize';
 import { Description } from '../../Description';
 import { useMarkdownRenderer } from '../../Description/markdownRendererContext';
 import { FocusedEditing } from '../../FocusedEditing';
@@ -39,6 +46,8 @@ import {
   StyledColumn,
   StyledEditCard,
   StyledLabelBlock,
+  StyledAbsorbedField,
+  StyledAbsorbedLabel,
   StyledLabelDesc,
   StyledRowActions,
   StyledRowInset,
@@ -47,6 +56,8 @@ import {
   StyledStatusDot,
 } from './compactRowStyles';
 import { getShownSchemaMessages, getOptionFieldMessages } from './OptionFieldMessages';
+import { SchemaDataView, canRenderWithSchema } from './_structuredData/SchemaDataView';
+import { query } from '../../../utils/fetch';
 import {
   colorToCss,
   formatBytes,
@@ -135,10 +146,16 @@ export const CompactRow = memo(
     clustered = false,
     clusterFirst = false,
     clusterLast = false,
+    absorbedFields,
   }: {
     optionName: string;
     optionField: IQorusFormField;
     hidden?: boolean;
+    /** Siblings this row renders inside its own container instead of leaving
+     *  them a row each — declared by the schema's `absorb_fields`. The pair it
+     *  exists for is a code editor and its language: one decision, so one
+     *  element. */
+    absorbedFields?: string[];
     // Rendered inside a required-group cluster: leading status node + rail, and no
     // per-row "one of" chip (the cluster header carries it). first/last trim the
     // rail segment so it spans node-to-node, not past the end members.
@@ -149,6 +166,13 @@ export const CompactRow = memo(
     const readOnly = useContextSelector(CompactRowContext, (v) => v.readOnly);
     const commitMode = useContextSelector(CompactRowContext, (v) => v.commitMode);
     const options = useContextSelector(CompactRowContext, (v) => v.options);
+
+    // An absorbed field keeps its own name — it is a different field, not a
+    // property of its host — so the label comes from its schema exactly as it
+    // would on its own row.
+    const getAbsorbedLabel = (absorbedName: string): string =>
+      (options?.[absorbedName] as { display_name?: string } | undefined)?.display_name ||
+      absorbedName;
     const codePreviewRenderer = useContextSelector(CompactRowContext, (v) => v.codePreviewRenderer);
     const markdownRenderer = useMarkdownRenderer();
     const operators = useContextSelector(CompactRowContext, (v) => v.operators);
@@ -288,17 +312,32 @@ export const CompactRow = memo(
       // see `showCodePreview` below. Keeps the row height fixed while making
       // multi-line source readable without opening the full editor.
       if (valueType === 'code-editor' && typeof field?.value === 'string') {
-        const lines = field.value.split('\n').length;
-        const chars = field.value.length;
+        // An absorbed sibling has no row of its own, so a COLLAPSED host has to
+        // carry its value or it disappears from the form entirely when closed.
+        // It reads as a chip beside the size chip — "Qore · 62 lines" — which
+        // is the same summary the read-only interface pages already show.
         return (
-          <ReqoreTag
-            size='small'
-            minimal
-            intent='info'
-            icon='CodeLine'
-            label={`${lines} ${lines === 1 ? 'line' : 'lines'}`}
-            labelKey={`${chars} ${chars === 1 ? 'char' : 'chars'}`}
-          />
+          <ReqoreControlGroup gapSize='tiny' verticalAlign='center' wrap>
+            {(absorbedFields ?? []).map((absorbedName) => {
+              const absorbedValue = (
+                availableOptions?.[absorbedName] as IQorusFormField | undefined
+              )?.value;
+              if (absorbedValue === undefined || absorbedValue === null || absorbedValue === '') {
+                return null;
+              }
+              return (
+                <ReqoreTag
+                  key={absorbedName}
+                  className='options-readfirst-absorbed-tag'
+                  size='small'
+                  minimal
+                  label={String(absorbedValue)}
+                  tooltip={getAbsorbedLabel(absorbedName)}
+                />
+              );
+            })}
+            <ReqraftCodeSizeTag code={field.value} />
+          </ReqoreControlGroup>
         );
       }
 
@@ -592,6 +631,110 @@ export const CompactRow = memo(
       return () => window.clearTimeout(id);
     }, [isExpanded, optionName, autoFocusNameRef]);
 
+    // What the field held when it was opened — the baseline Cancel restores.
+    //
+    // Deliberately NOT `originalValue`, which is the whole form's load-time
+    // snapshot. That answers "undo every change ever made to this field", which
+    // is a different question from "forget what I just typed"; a Cancel sitting
+    // next to Done has to mean the second one, or it silently throws away edits
+    // the user made earlier and had already accepted.
+    //
+    // The dependency list is `isExpanded` alone on purpose: adding the value
+    // would re-take the snapshot on every keystroke, leaving nothing to cancel.
+    const editEntryValue = React.useRef<{ value: any; type?: string } | undefined>(undefined);
+    React.useEffect(() => {
+      if (isExpanded) {
+        editEntryValue.current = { value: optionField?.value, type: optionField?.type };
+      } else {
+        editEntryValue.current = undefined;
+      }
+    }, [isExpanded]);
+
+    // True while the open editor holds something other than what it opened with.
+    const editedSinceOpened =
+      isExpanded &&
+      !!editEntryValue.current &&
+      !isEqual(editEntryValue.current.value, optionField?.value);
+
+    // Discard whatever was typed since the field was opened and close it. Used
+    // by both the Cancel button and Escape, so the two cannot diverge.
+    const cancelEdit = React.useCallback(() => {
+      const snapshot = editEntryValue.current;
+      if (snapshot && !isEqual(snapshot.value, optionField?.value)) {
+        handleValueChange(optionName, snapshot.value, snapshot.type);
+      }
+      toggleExpandedOption(optionName);
+    }, [handleValueChange, optionField?.value, optionName, toggleExpandedOption]);
+
+    // The sub-schema describing this field's value, when it has one. A value the
+    // form knows the shape of is previewed THROUGH that shape (see
+    // `SchemaDataView`); only genuinely undescribed data falls through to the
+    // untyped data tree.
+    //
+    // The server does NOT inline that sub-schema. `encodeFieldsForUi()` registers
+    // it and sends an id string in its place, which the consumer fetches back —
+    // exactly what AutoFormField does to build the editor ("Some arg schemas are
+    // not provided as objects, but as strings so we need to fetch them"). A
+    // preview that understood only the inline object therefore fell through to
+    // the untyped tree for every field a real server describes: the schema view
+    // worked against hand-written story fixtures and nowhere else.
+    //
+    // Resolved here rather than beside the preview it feeds: the preview renders
+    // below an early return, so a hook placed there would run conditionally.
+    const rawArgSchema = (schema as { arg_schema?: IQorusFormSchema | string } | undefined)
+      ?.arg_schema;
+    const argSchemaId = typeof rawArgSchema === 'string' ? rawArgSchema : undefined;
+    const [resolvedArgSchema, setResolvedArgSchema] = React.useState<IQorusFormSchema | undefined>(
+      undefined
+    );
+
+    // Only worth a request when there is a described value to preview: a row whose
+    // value is unset or scalar renders no inset, so fetching its schema would buy
+    // a round trip per row and show nothing. `query` caches GETs, so rows sharing
+    // an id (every row of one list) cost one request between them.
+    const valueLooksStructured =
+      !!optionField?.value && typeof optionField.value === 'object';
+
+    React.useEffect(() => {
+      if (!argSchemaId || !valueLooksStructured) {
+        return undefined;
+      }
+      let cancelled = false;
+      (async () => {
+        const response = await query<IQorusFormSchema>({
+          url: `dataprovider/arg_schemas/${argSchemaId}`,
+          method: 'GET',
+        });
+        // A failed fetch is not an error state here: the preview simply stays the
+        // untyped tree, which is what it was before the schema view existed.
+        if (!cancelled && response.ok) {
+          setResolvedArgSchema(response.data as IQorusFormSchema);
+        }
+      })();
+      return () => {
+        cancelled = true;
+      };
+    }, [argSchemaId, valueLooksStructured]);
+
+    const previewArgSchema =
+      argSchemaId ? resolvedArgSchema : (rawArgSchema as IQorusFormSchema | undefined);
+    const previewWithSchema = React.useMemo(
+      () => canRenderWithSchema(optionField?.value, previewArgSchema),
+      [optionField?.value, previewArgSchema]
+    );
+
+    // The form-load revert: back to the value the FORM was loaded with.
+    //
+    // In an open editor this is offered only when it would do something
+    // `cancelEditButton` does not — that is, when the field was already
+    // modified BEFORE it was opened, so "undo this edit" and "undo every edit"
+    // are different answers. On the usual path (open an untouched field, type,
+    // change your mind) the two are identical, and two buttons with the same
+    // effect and different names are worse than one.
+    //
+    // It is unconditional on the READ row, where it renders inline in the
+    // status-dot column — there is no edit in progress there to cancel, so the
+    // whole-field revert is the only undo that makes sense.
     const revertButton =
       changed ?
         <ReqoreButton
@@ -673,6 +816,42 @@ export const CompactRow = memo(
         />
       : null;
     const isPassiveCloseAction = fixedAllowedValueOption || readOnly;
+    // Cancel — the counterpart to Done, and the answer to "how do I get out of
+    // here without keeping this". Done was the only way to leave an open field,
+    // so every way out committed: the check, clicking away, and Escape (which
+    // closed without discarding, so it committed too, silently).
+    //
+    // Shown only while there is something to discard. On an untouched field
+    // Cancel and Done would do exactly the same thing, and two buttons that
+    // differ in name but not in effect are worse than one.
+    //
+    // Not offered when the close action is passive (read-only, or a fixed
+    // choice) — nothing can have been typed, so there is nothing to cancel.
+    const cancelEditButton =
+      !isPassiveCloseAction && editedSinceOpened ?
+        <ReqoreButton
+          className='options-readfirst-cancel'
+          size='small'
+          flat
+          fixed
+          icon='CloseLine'
+          intent='warning'
+          // "Cancel edit", not "Cancel": a bare Cancel collides with the one
+          // in Reqore's confirmation modal, and this one is specifically about
+          // abandoning the edit rather than dismissing a dialog.
+          aria-label='Cancel edit'
+          tooltip='Cancel edit — discard the changes made since this field was opened'
+          onClick={(event: React.MouseEvent) => {
+            event.stopPropagation();
+            cancelEdit();
+          }}
+        />
+      : null;
+    // See `revertButton` above for why this is conditional in the edit row.
+    const openedWithFormLoadValue =
+      !editEntryValue.current ||
+      isEqual(editEntryValue.current.value, originalValue.current?.[optionName]?.value);
+    const editRowRevertButton = openedWithFormLoadValue ? null : revertButton;
     const closeExpandedFieldButton = (
       <ReqoreButton
         className='options-readfirst-done'
@@ -857,6 +1036,38 @@ export const CompactRow = memo(
       />
     );
 
+    // The absorbed siblings' controls, rendered inside this row.
+    //
+    // Each keeps its own label so it is still identifiable — it is a different
+    // field, not a property of this one — but it sits inside this row's
+    // container, above the editor, so the pair reads as the single decision it
+    // is. `renderOption` is the same function the row uses for its own editor,
+    // so an absorbed field renders exactly as it would have on its own row.
+    const absorbedNodes =
+      absorbedFields?.length ?
+        absorbedFields
+          .map((absorbedName) => {
+            const absorbedField = availableOptions?.[absorbedName] as IQorusFormField | undefined;
+            if (!absorbedField) return null;
+            return (
+              <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>
+              </StyledAbsorbedField>
+            );
+          })
+          .filter(Boolean)
+      : null;
+
+    // Declared here rather than beside the hash rows below: the `isExpanded`
+    // branch returns before that point, and its editor needs to know whether it is
+    // holding code.
+    const valueType = getValueType(optionField, schema);
+
     if (isExpanded) {
       if (inlineEditable) {
         const collapse = () => toggleExpandedOption(optionName);
@@ -914,10 +1125,35 @@ export const CompactRow = memo(
               onKeyDown={(event) => {
                 if (event.key === 'Escape') {
                   event.stopPropagation();
-                  collapse();
+                  // Escape discards. It used to call `collapse()`, which closed
+                  // the field and KEPT whatever had been typed — the one
+                  // keystroke every editor treats as "get me out of this
+                  // without saving" was the quietest way to commit.
+                  cancelEdit();
                 }
               }}
             >
+              {/* The size chip survives into the editor.
+
+                  Opening a field replaces the whole value cell with its editor, which
+                  for every other type is right — the editor shows the value, so a
+                  summary of it above would say the same thing twice. Code is the
+                  exception: the chip counts lines and characters, which the editor
+                  does not show anywhere. Dropping it lost real information AND moved
+                  everything under it up by the height of a chip, so the editor
+                  appeared to jump as it opened.
+
+                  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. */}
+              {/* 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>
@@ -926,7 +1162,8 @@ export const CompactRow = memo(
                   OptionFieldMessages strip below already says it — showing
                   both was redundant. The tag stays on READ rows, where no
                   message strip is visible. */}
-              {revertButton}
+              {editRowRevertButton}
+              {cancelEditButton}
               {clearValueButton}
               {inlineOptionActions.map((action, index) =>
                 renderInjectedOptionAction(action, index)
@@ -1113,6 +1350,10 @@ export const CompactRow = memo(
               {closeExpandedFieldButton}
             </ReqoreControlGroup>
           </div>
+          {/* Absorbed siblings render in the CARD form of an open field too,
+              not only the inline row — which shape a field opens into depends
+              on its type, and absorbing must not depend on that. */}
+          {absorbedNodes}
           {/* Same fullscreen focused-editing affordance as the classic cards —
               the modal mounts when this option is focused. */}
           <FocusedEditing
@@ -1146,7 +1387,6 @@ export const CompactRow = memo(
     ];
     // A hash row reveals its sub-fields as read-only sub-rows under a "view
     // more" disclosure; the row itself still expands the real editor on click.
-    const valueType = getValueType(optionField, schema);
     const hashEntries =
       (
         !hidden &&
@@ -1452,8 +1692,17 @@ export const CompactRow = memo(
               copy that used to sit above the document was a second rendering of
               the same text with the markers taken out (Qlip review, build #97).
               Without a renderer there is no inset, and the prose IS the value —
-              so the line stays, and `renderReadFirstValue` still produces it. */}
-          {showMarkdownPreview ? null : (
+              so the line stays, and `renderReadFirstValue` still produces it.
+
+              A schema-previewed value is the same situation. The summary is a
+              flattened join of the item labels ("Default RBAC, Cookie") sitting
+              directly above a preview that names every one of those items and
+              its fields — the same facts twice, the shorter version first, which
+              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 : (
             <span className='options-readfirst-valuetext'>
               {hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted)}
             </span>
@@ -1486,17 +1735,57 @@ export const CompactRow = memo(
               onClick={(e) => e.stopPropagation()}
             >
               <ReqoreCollapsibleContent
-                maxCollapsedHeight={96}
+                // The schema view spends more height per datum than a data tree
+                // does — a labelled row rather than a packed chip — but there is
+                // far less of it to read, so it gets enough room to show a
+                // couple of complete items instead of fading out mid-row. A tree
+                // of unknown depth keeps the tighter cap.
+                maxCollapsedHeight={previewWithSchema ? 140 : 96}
                 buttonProps={{ className: 'options-readfirst-viewmore' }}
               >
                 <div className='options-readfirst-structured'>
-                  <StructuredDataView
-                    value={optionField?.value}
-                    collapsibleRoot={false}
-                    showTypes={showFieldTypes}
-                    defaultExpandDepth={2}
-                    onItemClick={() => activate()}
-                  />
+                  {previewWithSchema ?
+                    // The form already knows this value's shape, names and
+                    // choices, so the preview says it rather than making the
+                    // reader decode it: "Scheme Type — Default RBAC", not a data
+                    // tree announcing "Object · 1 field" over `type: default`.
+                    <SchemaDataView
+                      value={optionField?.value}
+                      schema={previewArgSchema!}
+                      showTypes={showFieldTypes}
+                      colors={{
+                        key: cKey,
+                        muted: cMuted,
+                        // Deliberately stronger than `cDivider`. That tier is for
+                        // decorative hairlines between rows, where being nearly
+                        // invisible is the point. This rule is load-bearing — it
+                        // is the only thing saying which fields belong to which
+                        // numbered item — so it gets the muted tier at partial
+                        // alpha: quiet, but actually visible.
+                        border: `${cMuted}66`,
+                        // The identity accent for each item's heading.
+                        //
+                        // `custom1` first: BRAND_DESIGN §1 says apps may register
+                        // their own named intents and reference them like the
+                        // built-ins, and that is where a product's own accent
+                        // lives (qorus-ide registers its brand purple there).
+                        // Falling back to `info` keeps this working for a
+                        // consumer that registers nothing — the heading is
+                        // accented either way, just in the theme's own colour
+                        // rather than one this library picked.
+                        accent:
+                          (theme?.intents as Record<string, string> | undefined)?.custom1 || cInfo,
+                      }}
+                      onItemClick={() => activate()}
+                    />
+                  : <StructuredDataView
+                      value={optionField?.value}
+                      collapsibleRoot={false}
+                      showTypes={showFieldTypes}
+                      defaultExpandDepth={2}
+                      onItemClick={() => activate()}
+                    />
+                  }
                 </div>
               </ReqoreCollapsibleContent>
             </StyledRowInset>