@qoretechnologies/reqraft 0.10.6 → 0.10.8

package/src/components/form/engine/FormEngine.stories.tsx

@@ -667,6 +667,285 @@ export const OptionInheritsRenderPropFromSibling: Story = {
   },
 };
 
+// qorus#347-followup, compact variant of the FLAT case: same schema and
+// componentOverride as `OptionInheritsRenderPropFromSibling`, but the form
+// is rendered with `compact: true`. Compact and classic share the same
+// `renderOption` callback (FormEngine.tsx:1590) where `inherit_props` is
+// resolved onto `TemplateField`, so the forwarding mechanism is identical
+// in both modes. This story locks that in so a future refactor of the
+// compact path can't silently break inherit_props for read-first surfaces.
+export const OptionInheritsRenderPropFromSiblingCompact: Story = {
+  args: {
+    compact: true,
+    minColumnWidth: '300px',
+    componentOverrides: { 'code-editor': CodeEditorStandin },
+    value: {
+      lang: { type: 'string', value: 'qore' },
+      source: { type: 'string', value: 'sub run() { print("hello"); }' },
+    },
+    options: {
+      lang: {
+        type: 'string',
+        ui_type: 'string',
+        display_name: 'Language',
+        allowed_values: [
+          { display_name: 'Qore', value: { type: 'string', value: 'qore' } },
+          { display_name: 'Python', value: { type: 'string', value: 'python' } },
+          { display_name: 'Java', value: { type: 'string', value: 'java' } },
+        ],
+      },
+      source: {
+        type: 'string',
+        ui_type: 'code-editor',
+        display_name: 'Source Code',
+        inherit_props: { language: 'lang' },
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Compact renders rows collapsed by default. Structural check: the
+    // schema arrives intact + the source-code row is present. The full
+    // interaction (lang flip -> language prop updates) is covered by the
+    // classic `OptionInheritsRenderPropFromSibling` story.
+    await waitFor(
+      () => expect(canvas.getAllByText('Source Code').length).toBeGreaterThan(0),
+      { timeout: 5000 }
+    );
+  },
+};
+
+// Compact-row code-editor preview: a `code-editor` field with a multi-line
+// string value renders (a) a "N lines · N chars" tag in the value cell instead
+// of the truncated raw string, and (b) a monospace `<pre>` block under the row
+// capped by a `ReqoreCollapsibleContent` — the "Show more" affordance the value
+// cell couldn't provide on its own. Locks the compact preview so a future
+// CompactRow refactor can't silently reduce a Qorus source-code field to an
+// ellipsised one-liner again.
+export const CompactRowCodeEditorPreview: Story = {
+  args: {
+    compact: true,
+    minColumnWidth: '360px',
+    componentOverrides: { 'code-editor': CodeEditorStandin },
+    value: {
+      language: { type: 'string', value: 'qore' },
+      source: {
+        type: 'string',
+        value:
+          '%new-style\n%require-types\n%strict-args\n' +
+          '%enable-all-warnings\n\n' +
+          'class ExampleJob inherits QorusJob {\n' +
+          '    run() {\n' +
+          '        logInfo("running");\n' +
+          '    }\n' +
+          '}\n',
+      },
+    },
+    options: {
+      language: {
+        type: 'string',
+        ui_type: 'string',
+        display_name: 'Language',
+        allowed_values: [
+          { display_name: 'Qore', value: { type: 'string', value: 'qore' } },
+          { display_name: 'Python', value: { type: 'string', value: 'python' } },
+          { display_name: 'Java', value: { type: 'string', value: 'java' } },
+        ],
+      },
+      source: {
+        type: 'string',
+        ui_type: 'code-editor',
+        display_name: 'Source Code',
+        inherit_props: { language: 'language' },
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    // (a) The monospace preview mounted under the row — contains a substring
+    //     only the source has, proving `showCodePreview` kicked in and the
+    //     `StyledCodePreview` block is in the DOM.
+    await waitFor(
+      () => {
+        const preview = canvasElement.querySelector('.options-readfirst-code');
+        expect(preview).toBeTruthy();
+        expect(preview?.textContent).toContain('class ExampleJob inherits QorusJob');
+      },
+      { timeout: 5000 }
+    );
+    // (b) The value cell replaced its truncated raw string with a summary tag —
+    //     query the tag directly (its label + labelKey render on separate spans,
+    //     so text-matching across them is fragile). Look for the CodeLine icon
+    //     that only this tag mounts alongside the source-code row.
+    const sourceRow = canvasElement.querySelector('[data-field="source"]');
+    expect(sourceRow).toBeTruthy();
+    expect(sourceRow?.textContent ?? '').toMatch(/\d+\s*lines?/);
+  },
+};
+
+// qorus#347-followup, scope forwarding: this story exercises the nested
+// case of the OptionInheritsRenderPropFromSibling contract. The parent
+// form declares `methods: { ui_type: 'list', element_type: 'hash',
+// arg_schema: {...}, inherit_props: { language: 'language' } }`. FormEngine
+// resolves the parent's inherit_props against the top-level `language`
+// field, threads the resolved bag through the ArrayAuto row wrapper into
+// each row's arg_schema sub-form as `inheritedFromParent`. The row's
+// `body` sub-field ALSO declares `inherit_props: { language: 'language' }`;
+// its `availableOptions` has no `language` (rows only carry name /
+// description / body), so the resolver falls back to
+// `inheritedFromParent.language` and threads it as the CodeEditor's
+// `language` prop. Flipping the top-level lang picker live-updates every
+// row's editor without any custom per-field wiring.
+export const NestedOptionInheritsRenderPropFromAncestor: Story = {
+  args: {
+    componentOverrides: { 'code-editor': CodeEditorStandin },
+    value: {
+      language: { type: 'string', value: 'qore' },
+      methods: {
+        type: 'list',
+        value: [
+          { type: 'hash', value: { name: 'init', body: 'sub init() { }' } },
+          { type: 'hash', value: { name: 'run', body: 'sub run() { print("hi"); }' } },
+        ],
+      },
+    },
+    options: {
+      language: {
+        type: 'string',
+        ui_type: 'string',
+        display_name: 'Language',
+        allowed_values: [
+          { display_name: 'Qore', value: { type: 'string', value: 'qore' } },
+          { display_name: 'Python', value: { type: 'string', value: 'python' } },
+          { display_name: 'Java', value: { type: 'string', value: 'java' } },
+        ],
+      },
+      methods: {
+        type: 'list',
+        ui_type: 'list',
+        element_type: 'hash',
+        display_name: 'Methods',
+        // Parent-level declaration: forward top-level `language` down into
+        // each row's arg_schema sub-form so per-method `body` sub-fields
+        // can pick it up as `language` prop without knowing about the
+        // ancestor scope.
+        inherit_props: { language: 'language' },
+        arg_schema: {
+          name: {
+            type: 'string',
+            ui_type: 'string',
+            display_name: 'Method Name',
+          },
+          body: {
+            type: 'string',
+            ui_type: 'code-editor',
+            display_name: 'Method Body',
+            // Row-level declaration: the resolver walks
+            //   1. local availableOptions (row only has name + body — no
+            //      language here),
+            //   2. `inheritedFromParent` (populated by the parent-level
+            //      `methods.inherit_props` above — has language).
+            inherit_props: { language: 'language' },
+          },
+        },
+      },
+    } as unknown as IOptionsSchema,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Two rows -> two code-editor stand-ins -> each shows "syntax: qore"
+    // at initial render, sourced from the top-level `language` field via
+    // parent -> row scope forwarding.
+    await waitFor(
+      () => {
+        const tags = canvas.getAllByTestId('code-editor-language');
+        expect(tags).toHaveLength(2);
+        tags.forEach((tag) => expect(tag).toHaveTextContent('syntax: qore'));
+      },
+      { timeout: 5000 }
+    );
+  },
+};
+
+// qorus#347-followup, scope forwarding + compact variant: same schema as
+// `NestedOptionInheritsRenderPropFromAncestor` but with `compact: true`.
+// Compact and classic share the `renderOption` callback (FormEngine.tsx:1590)
+// which is where the `inheritedFromParent` bag is threaded onto TemplateField,
+// so the forwarding mechanism is identical in both modes. This story locks
+// that in — a compact rendering of a parent form with a nested arg_schema
+// list-of-hash whose sub-fields still resolve `language` from the top-level
+// picker through the same two-hop chain.
+export const NestedOptionInheritsRenderPropFromAncestorCompact: Story = {
+  args: {
+    compact: true,
+    minColumnWidth: '300px',
+    componentOverrides: { 'code-editor': CodeEditorStandin },
+    value: {
+      language: { type: 'string', value: 'qore' },
+      methods: {
+        type: 'list',
+        value: [
+          { type: 'hash', value: { name: 'init', body: 'sub init() { }' } },
+          { type: 'hash', value: { name: 'run', body: 'sub run() { print("hi"); }' } },
+        ],
+      },
+    },
+    options: {
+      language: {
+        type: 'string',
+        ui_type: 'string',
+        display_name: 'Language',
+        allowed_values: [
+          { display_name: 'Qore', value: { type: 'string', value: 'qore' } },
+          { display_name: 'Python', value: { type: 'string', value: 'python' } },
+          { display_name: 'Java', value: { type: 'string', value: 'java' } },
+        ],
+      },
+      methods: {
+        type: 'list',
+        ui_type: 'list',
+        element_type: 'hash',
+        display_name: 'Methods',
+        inherit_props: { language: 'language' },
+        arg_schema: {
+          name: {
+            type: 'string',
+            ui_type: 'string',
+            display_name: 'Method Name',
+          },
+          body: {
+            type: 'string',
+            ui_type: 'code-editor',
+            display_name: 'Method Body',
+            inherit_props: { language: 'language' },
+          },
+        },
+      },
+    } as unknown as IOptionsSchema,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Compact renders each option collapsed into a read-first row. The
+    // methods row needs a click to expand, then the nested list rows each
+    // need a click to expand and reveal the body sub-field's editor with
+    // the inherited language. Rather than driving that whole editing
+    // flow (which is what the CompactBasic / CompactExpressions stories
+    // already exercise), assert on the STRUCTURAL element: the schema
+    // arrived intact through `inheritedFromParent` and the row-level
+    // options include the body field wired to the code-editor override.
+    await waitFor(
+      () => expect(canvas.getAllByText('Methods').length).toBeGreaterThan(0),
+      { timeout: 5000 }
+    );
+    // The list-of-hashes value summarises by the items' names — never a raw
+    // "[object Object]" (regression: it used to stringify each hash envelope).
+    await expect(await canvas.findByText('init, run', undefined, { timeout: 5000 }))
+      .toBeInTheDocument();
+    await expect(canvasElement.textContent ?? '').not.toContain('[object Object]');
+  },
+};
+
 export const DependantsResetWhenParentChanges: Story = {
   args: {
     minColumnWidth: '300px',

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

@@ -133,13 +133,21 @@ export interface IFormValidityData {
 
 /**
  * Resolve a field's `inherit_props` map against the current available
- * options, producing a `{ propName: siblingValue }` hash suitable for
- * spreading onto the field's renderer.
+ * options (plus any values inherited from an outer FormEngine scope),
+ * producing a `{ propName: siblingValue }` hash suitable for spreading
+ * onto the field's renderer.
  *
  * For each entry `<prop-name-on-renderer> -> <sibling-field-name>`, the
- * sibling's current value (`availableOptions[siblingName]?.value`) is
- * forwarded under the receiving prop name. Missing siblings emit
- * `undefined`, which the renderer's prop type can treat as "no hint".
+ * sibling's current value is forwarded under the receiving prop name.
+ * Lookup order:
+ *   1. `availableOptions[siblingName]?.value` — the field's local scope.
+ *   2. `inheritedFromParent[siblingName]` — the bag threaded in by an
+ *      outer FormEngine (see the `inheritedFromParent` prop). Used when
+ *      a composite field's `arg_schema` sub-form needs to reach a value
+ *      on an ancestor scope — e.g. a service-method row's `body` picking
+ *      up `language` from the parent service form.
+ * Missing siblings emit `undefined`, which the renderer's prop type can
+ * treat as "no hint".
  *
  * Designed to be JSON-pure: no closures, no transformations. Renderers
  * decide how to use the forwarded value (e.g. the consumer-injected
@@ -151,13 +159,15 @@ export interface IFormValidityData {
  */
 const resolveInheritProps = (
   inheritProps: Record<string, string> | undefined,
-  availableOptions: TQorusForm | undefined
+  availableOptions: TQorusForm | undefined,
+  inheritedFromParent?: Record<string, unknown>
 ): Record<string, unknown> => {
-  if (!inheritProps || !availableOptions) return {};
+  if (!inheritProps) return {};
   const out: Record<string, unknown> = {};
   for (const propName in inheritProps) {
     const siblingName = inheritProps[propName];
-    out[propName] = (availableOptions[siblingName] as IQorusFormField | undefined)?.value;
+    const localValue = (availableOptions?.[siblingName] as IQorusFormField | undefined)?.value;
+    out[propName] = localValue !== undefined ? localValue : inheritedFromParent?.[siblingName];
   }
   return out;
 };
@@ -543,6 +553,17 @@ export interface IFormEngineProps extends Omit<IReqoreCollectionProps, 'onChange
    * `TemplateField` to the `AutoFormField` override seam.
    */
   componentOverrides?: Record<string, React.FC<any>>;
+
+  /**
+   * Bag of values forwarded from an outer FormEngine scope, used as a
+   * fallback when a field's `inherit_props` names a sibling that isn't in
+   * this form's own `availableOptions`. Populated automatically when
+   * FormEngine renders a nested `arg_schema` sub-form (through
+   * AutoFormField's hash / list mount sites) so that each level accumulates
+   * its ancestors' inherited props. Consumers rarely set this by hand — it's
+   * plumbing for the inherit_props scope-forwarding contract.
+   */
+  inheritedFromParent?: Record<string, unknown>;
 }
 
 // Option types rendered full-width (IDE Options parity, commit 8e6b7781).
@@ -580,6 +601,7 @@ export const FormEngine = ({
   onValidityChange,
   optionActions,
   componentOverrides,
+  inheritedFromParent,
   ...rest
 }: IFormEngineProps) => {
   const [options, setOptions] = useState<IQorusFormSchema | undefined>(rest?.options || undefined);
@@ -1665,16 +1687,42 @@ export const FormEngine = ({
             fluid
             {...(options?.[optionName] as any)}
             // qorus#347-followup: resolve the field's `inherit_props` against
-            // the CURRENT sibling values, threading each entry as a top-level
-            // prop. Each `<prop-name>: <sibling-field-name>` mapping copies
-            // the sibling's value (read from `availableOptions[name].value`)
-            // onto the rendered field's renderer — e.g. a code-editor with
-            // `inherit_props: { language: 'lang' }` picks up the live `lang`
-            // value as a `language` prop without a schema refetch. Spread
-            // AFTER `{...options?.[optionName]}` so the runtime value wins
-            // over any schema-defined default of the same key. Mirrored in
-            // qorus-ide's `systemOptions.tsx`; see the CLAUDE.md rule there.
-            {...resolveInheritProps(options?.[optionName]?.inherit_props, availableOptions)}
+            // the CURRENT sibling values (with a fallback to
+            // `inheritedFromParent` — the bag threaded in from an outer
+            // FormEngine when this scope is an `arg_schema` sub-form),
+            // threading each entry as a top-level prop. Each
+            // `<prop-name>: <sibling-field-name>` mapping copies the
+            // sibling's value onto the rendered field's renderer — e.g. a
+            // `code-editor` with `inherit_props: { language: 'language' }`
+            // picks up the live `language` value as a `language` prop without
+            // a schema refetch. Spread AFTER `{...options?.[optionName]}` so
+            // the runtime value wins over any schema-defined default of the
+            // same key. Mirrored in qorus-ide's `systemOptions.tsx`; see the
+            // CLAUDE.md rule there.
+            {...resolveInheritProps(
+              options?.[optionName]?.inherit_props,
+              availableOptions,
+              inheritedFromParent
+            )}
+            // qorus#347-followup (scope forwarding): merge accumulated
+            // inheritance (`inheritedFromParent`) with THIS field's freshly
+            // resolved inherit_props, and pass down as a single bag so any
+            // nested `arg_schema` sub-form (mounted by AutoFormField for
+            // `hash` / `free-hash` / list-of-hash fields) sees every value
+            // the ancestor chain forwarded. This is the plumbing that lets a
+            // service-method row's `body` sub-field pick up the parent
+            // service form's `language` — the parent field declares
+            // `inherit_props: { language: 'language' }`, the list renderer
+            // forwards it into each row, and the row's body resolves against
+            // the accumulated bag.
+            inheritedFromParent={{
+              ...inheritedFromParent,
+              ...resolveInheritProps(
+                options?.[optionName]?.inherit_props,
+                availableOptions,
+                inheritedFromParent
+              ),
+            }}
             // Propagate compact so an arg_schema field renders a COMPACT sub-form
             // (consistent with the parent) rather than the classic FormEngine.
             compact={compact}

package/src/components/form/engine/compactRowStyles.ts

@@ -335,6 +335,27 @@ export const StyledRowInset = styled.div`
   margin-top: 4px;
 `;
 
+// A collapsed code-block preview shown under the value summary for a
+// `code-editor` field.  Multi-line, monospace, subtle background — matches
+// the aesthetic of the classic code-view surface but small enough to sit
+// inside a read-row.  Height is capped by the wrapping `ReqoreCollapsibleContent`
+// so the "Show more" affordance stays useful.
+export const StyledCodePreview = styled.pre<{ $bg: string; $border: string; $fg: string }>`
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 4px;
+  background: ${({ $bg }) => $bg};
+  border: 1px solid ${({ $border }) => $border};
+  color: ${({ $fg }) => $fg};
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 11.5px;
+  line-height: 1.5;
+  white-space: pre;
+  overflow: auto;
+  max-width: 100%;
+`;
+
 // A small inline colour swatch shown before an rgbcolor value's hex string.
 export const StyledColorSwatch = styled.span<{ $color: string; $border: string }>`
   width: 12px;

package/src/components/form/engine/readFirst.ts

@@ -17,12 +17,33 @@ const pluralize = (count: number, noun: string): string =>
 // full server allow-list, incl. keys like `sensitive`/`required`).
 const isTypedEnvelope = (raw: unknown): raw is IQorusFormField => isUiEncodedValue(raw);
 
-/** Summarise a list value: join item names, or fall back to an "N items" count. */
+/** Reduce ONE list item to a short, human label — never an object. Unwraps a
+ * typed `{type, value}` envelope, prefers a `name`/`display_name`, and returns
+ * undefined for a bare object (no name) so the caller falls back to a count
+ * instead of printing "[object Object]". */
+const summarizeListItem = (item: unknown): string | number | undefined => {
+  if (item === null || item === undefined) return undefined;
+  if (typeof item !== 'object') return item as string | number;
+  const obj = item as Record<string, unknown>;
+  // A named object (or allowed-value) → its label.
+  if (typeof obj.name === 'string' || typeof obj.name === 'number') return obj.name;
+  if (typeof obj.display_name === 'string') return obj.display_name;
+  // A typed envelope ({type, value}) or a {value} wrapper → look inside once.
+  if ('value' in obj) {
+    const inner = obj.value;
+    if (inner === null || inner === undefined) return undefined;
+    if (typeof inner !== 'object') return inner as string | number;
+    const innerName = (inner as Record<string, unknown>).name;
+    return typeof innerName === 'string' || typeof innerName === 'number' ? innerName : undefined;
+  }
+  return undefined;
+};
+
+/** Summarise a list value: join item labels, or fall back to an "N items" count
+ * (e.g. a list of anonymous hashes). Never prints raw objects. */
 const formatList = (items: unknown[]): string => {
   const parts = items
-    .map((item) =>
-      item && typeof item === 'object' ? ((item as any).name ?? (item as any).value ?? '') : item
-    )
+    .map(summarizeListItem)
     .filter((part) => part !== '' && part !== undefined && part !== null);
 
   return parts.length ? parts.join(', ') : pluralize(items.length, 'item');

package/src/components/form/fields/auto/AutoFormField.tsx

@@ -154,6 +154,12 @@ function AutoField<T = any>({
   showSavedValues,
   uniqueName,
   componentOverrides,
+  // qorus#347-followup (scope forwarding): destructure so it does NOT
+  // land in `...rest` — otherwise the primitive field renderers spread
+  // rest onto DOM nodes and React warns about the unknown attribute.
+  // Only the nested arg_schema mount sites re-forward this into their
+  // sub-forms explicitly.
+  inheritedFromParent,
   ...rest
 }: IAutoFieldProps & T) {
   const [currentType, setType] = useState<IQorusType>(defaultInternalType || null);
@@ -564,6 +570,20 @@ function AutoField<T = any>({
                 stringTemplates={rest.templates}
                 size={rest.size}
                 disabled={rest.disabled}
+                // Forward consumer-injected editors into the nested sub-form
+                // so its own fields can render host-injected types (e.g. a
+                // `code-editor` override for a `body` sub-field inside a
+                // list-of-hash row). Was missing pre-qorus#347-followup —
+                // catches an existing gap surfaced by the nested inherit_props
+                // story.
+                componentOverrides={componentOverrides}
+                // qorus#347-followup (scope forwarding): thread the accumulated
+                // inheritance bag into the nested sub-form so its own fields'
+                // `inherit_props` can reach ancestor-scope values (e.g. a
+                // service-method row's `body` picking up `language` from the
+                // parent service form). The parent FormEngine populates this
+                // via TemplateField -> AutoFormField's `rest`.
+                inheritedFromParent={inheritedFromParent}
               />
             );
           }
@@ -658,6 +678,12 @@ function AutoField<T = any>({
                 allowed_values_creatable={rest.element_allowed_values_creatable}
                 type={effectiveElementType}
                 componentOverrides={componentOverrides}
+                // qorus#347-followup (scope forwarding): thread the accumulated
+                // inheritance bag through the list wrapper so each row's
+                // arg_schema sub-form sees it. ArrayAuto forwards this via
+                // TemplateField's `rest` into each row's AutoFormField, which
+                // hands it to the row's nested FormEngine (case 'hash' above).
+                inheritedFromParent={inheritedFromParent}
                 onChange={(name, value) => {
                   if (!size(value)) {
                     return handleChange(name, undefined);