@qoretechnologies/reqraft 0.10.54 → 0.10.55-pr.115.g24a94bf

package/src/components/form/expressions/builder/ExpressionBuilder.stories.tsx

@@ -9,6 +9,7 @@ import { expect, fireEvent, fn, userEvent, waitFor, within } from 'storybook/tes
 import { useState } from 'react';
 import { sleep } from '../../../../../__tests__/utils';
 import { StoryMeta } from '../../../../types';
+import { templateChipLabel } from '../../../../helpers/templateText';
 import { mockExpressions } from '../mockExpressions';
 import { IExpression } from '../types';
 import { ExpressionBuilder } from './index';
@@ -643,14 +644,38 @@ export const VariableArgumentsCanBeAdded: Story = {
 const CONCAT_OPERANDS = ['first', 'second', 'third'];
 const OPERAND_LITERALS = [...CONCAT_OPERANDS, 'plain', '$local:some-richtext'];
 
+/**
+ * What an operand field holds. A text operand is edited in the chip editor
+ * (these stories offer templates), so it is read from the editable field; a
+ * template chip in it shows the name these stories' templates give the
+ * reference ("Richtext Template"), read back as the reference it names.
+ */
+const readOperand = (field: HTMLElement): string => {
+  if (field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement) {
+    return field.value;
+  }
+  const shown = (field.textContent ?? '').replace(/\uFEFF/g, '').trim();
+  return (
+    OPERAND_LITERALS.find(
+      (literal) => literal === shown || templateChipLabel(localTemplates as never, literal) === shown
+    ) ?? shown
+  );
+};
+
+/** Every operand editor's text, in DOM order (no number or position inputs). */
+const operandTexts = () =>
+  Array.from(
+    document.querySelectorAll<HTMLElement>('.expression textarea, .expression [contenteditable="true"]')
+  ).map(readOperand);
+
 /** Seeded operand values in DOM order — only the seeded ones, so stray fields don't count. */
 const operandValues = () =>
   Array.from(
-    document.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>(
-      '.expression textarea, .expression input'
+    document.querySelectorAll<HTMLElement>(
+      '.expression textarea, .expression input, .expression [contenteditable="true"]'
     )
   )
-    .map((field) => field.value)
+    .map(readOperand)
     .filter((value) => OPERAND_LITERALS.includes(value));
 
 const count = (selector: string) => document.querySelectorAll(selector).length;
@@ -698,7 +723,7 @@ export const ConcatExpression: Story = {
     docs: {
       description: {
         story:
-          'Renders a "concat" varargs expression with three string operands ("first", "second", "third"). By default each operand gets a drag grip and a "Move Argument" section in its ⋮ menu — opened and expanded here on the second operand to show "Move before / after / to start / to end" and, at three operands, a "Move to position" caption with a single "2nd" position dropdown beside it, opened to show 1st / 2nd / 3rd.',
+          'Renders a "concat" varargs expression with three string operands ("first", "second", "third"), each edited in the chip editor a string field with templates now uses — a contenteditable box rather than a textarea, so a template reference in an operand reads as its name. By default each operand gets a drag grip and a "Move Argument" section in its ⋮ menu — opened and expanded here on the second operand to show "Move before / after / to start / to end" and, at three operands, a "Move to position" caption with a single "2nd" position dropdown beside it, opened to show 1st / 2nd / 3rd.',
       },
     },
   },
@@ -765,11 +790,7 @@ export const ReorderLongConcat: Story = {
     await fireEvent.keyDown(field, { key: 'Enter' });
     await waitFor(
       () =>
-        expect(
-          Array.from(
-            document.querySelectorAll<HTMLTextAreaElement>('.expression textarea')
-          ).map((t) => t.value)
-        ).toEqual(['first', 'third', 'fourth', 'fifth', 'sixth', 'second', 'seventh']),
+        expect(operandTexts()).toEqual(['first', 'third', 'fourth', 'fifth', 'sixth', 'second', 'seventh']),
       { timeout: 10000 }
     );
 
@@ -780,11 +801,7 @@ export const ReorderLongConcat: Story = {
     await clickSelector('.expression-arg-move-to-7');
     await waitFor(
       () =>
-        expect(
-          Array.from(
-            document.querySelectorAll<HTMLTextAreaElement>('.expression textarea')
-          ).map((t) => t.value)
-        ).toEqual(['first', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'second']),
+        expect(operandTexts()).toEqual(['first', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'second']),
       { timeout: 10000 }
     );
     expect(context.args.onChange).toHaveBeenLastCalledWith(

package/src/components/form/expressions/builder/argumentLabel.tsx

@@ -49,9 +49,15 @@ export const ExpressionBuilderArgumentLabel = ({
     ...types.getExactMatches(schema.ui_type),
     ...types.getAcceptedTypes(schema.ui_type),
   ]);
-  const { isValid, reason } = arg.is_expression
-    ? validateFieldWithResult('expression', arg, { expressions })
-    : validateFieldWithResult(argumentType, arg.value, schema, !schema.required);
+  /* `arg` is optional — an operand the author has not filled in yet has no
+     entry at all, and a literal carried straight from a parse can be the null
+     literal itself. Both were dereferenced unguarded here, which took the whole
+     expression editor down to its error boundary rather than drawing an empty
+     argument. */
+  const { isValid, reason } =
+    arg?.is_expression ?
+      validateFieldWithResult('expression', arg, { expressions })
+    : validateFieldWithResult(argumentType, arg?.value, schema, !schema.required);
 
   return (
     <ReqoreP
@@ -94,7 +100,7 @@ export const ExpressionBuilderArgumentLabel = ({
       {!matchesType ? (
         <ReqoreIcon icon='ErrorWarningLine' color='warning' size='10px' margin='both' />
       ) : null}
-      {(argumentType || (arg.is_expression && arg.value?.exp)) &&
+      {(argumentType || (arg?.is_expression && arg.value?.exp)) &&
       types.getTypeDisplayName(argumentType) !== types.getTypeDisplayName(schema.ui_type) &&
       !matchesTypeExactly ? (
         <>

package/src/components/form/expressions/builder/index.tsx

@@ -25,6 +25,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components';
 import { moveItem } from '../../../../helpers/common';
 import { areQorusTypesCompatible, getArgumentType } from '../../../../helpers/expressions';
+import { addMissingExpressionArgs } from '../argumentPresence';
 import { findTemplate } from '../../../../helpers/templates';
 import { validateField, validateFieldWithResult } from '../../../../helpers/validations';
 import { IQorusTypeObject, useQorusTypes } from '../../../../hooks/useQorusTypes';
@@ -79,6 +80,18 @@ export interface IExpressionBuilderProps {
   expressions?: IExpressionSchema[];
   expressionsUrl?: string;
   serverHandled?: boolean;
+  /**
+   * SEAM (reqraft): the host's per-`ui_type` editors, forwarded to the operand
+   * fields below.
+   *
+   * Without them an operand whose type is one of the CONSUMER's own ui_types
+   * falls through `AutoFormField`'s switch to the literal "Unknown type!" tag.
+   * That is what an assertion's `Value` did the moment it was turned into an
+   * expression: the field is `test-reference`, an IDE ui_type whose editor the
+   * IDE registers through `componentOverrides`, and the builder rendered its
+   * operands without them.
+   */
+  componentOverrides?: Record<string, React.FC<any>>;
   size?: string;
   /**
    * SEAM (reqraft): extra hover actions prepended to each expression card —
@@ -132,6 +145,7 @@ export const Expression = ({
   expressionsUrl,
   serverHandled,
   extraActions,
+  componentOverrides,
   ...props
 }: IExpressionProps) => {
   const types = useQorusTypes();
@@ -267,62 +281,8 @@ export const Expression = ({
   );
 
   const addMissingArgs = useCallback(
-    (expression: string, args: IExpression[] = []): IExpression[] => {
-      const newArgs = [...args];
-      // Check if this expression has variable arguments
-      const selectedExpression = expressions.value?.find((exp) => exp.name === expression);
-
-      // An operand slot with nothing in it yet: the schema's default value
-      // when it has one, otherwise an envelope typed after the schema for
-      // the editors that need a type to mount. `updateExp` leaves such a
-      // slot behind for every catalogue argument the previous value had no
-      // operand for (a fresh builder has none), so every branch below has
-      // to fill them — an `undefined` operand that reaches the validator or
-      // an operand editor is read for its `type` and crashes the builder.
-      const isEmptySlot = (slot: IExpression | undefined, arg: IExpressionSchemaArg) =>
-        slot === undefined || size(slot) === 0 || (arg.default_value && !('value' in slot));
-      const emptySlot = (arg: IExpressionSchemaArg): IExpression =>
-        arg.default_value
-          ? { value: arg.default_value, type: arg.ui_type }
-          : {
-              type:
-                arg.ui_type === 'richtext' || arg.ui_type === 'number' || arg.ui_type === 'bool'
-                  ? arg.ui_type
-                  : undefined,
-            };
-
-      if (selectedExpression.varargs) {
-        if (selectedExpression.subtype === 2) {
-          newArgs.push({
-            is_expression: true,
-            value: {
-              args: [],
-            },
-          });
-        } else {
-          // Every operand follows the one schema argument; add slots up to
-          // min_args and fill the empty ones.
-          const [schema] = selectedExpression.args;
-
-          newArgs.push(
-            ...Array.from({ length: selectedExpression.min_args - 1 }, () => emptySlot(schema))
-          );
-          newArgs.forEach((slot, index) => {
-            if (isEmptySlot(slot, schema)) {
-              newArgs[index] = emptySlot(schema);
-            }
-          });
-        }
-      } else {
-        selectedExpression.args.forEach((arg, index) => {
-          if (isEmptySlot(newArgs[index], arg)) {
-            newArgs[index] = emptySlot(arg);
-          }
-        });
-      }
-
-      return newArgs;
-    },
+    (expression: string, args: IExpression[] = []): IExpression[] =>
+      addMissingExpressionArgs(expressions.value as never, expression, args as never) as never,
     [JSON.stringify(expressions.value)]
   );
 
@@ -511,13 +471,7 @@ export const Expression = ({
   );
 
   const updateArg = useCallback(
-    (
-      val: any,
-      index: number = 0,
-      type?: string,
-      isFunction?: boolean,
-      isRequired?: boolean
-    ) => {
+    (val: any, index: number = 0, type?: string, isFunction?: boolean) => {
       const args = clone(value.value.args);
       const newVal = clone(val);
 
@@ -525,12 +479,18 @@ export const Expression = ({
         newVal.args = addMissingArgs(newVal.exp, newVal.args);
       }
 
+      /* `required` is NOT written here. It is a schema key — it describes the
+         catalogue's declaration of the argument, not the author's value, and
+         nothing reads it back off a stored argument (validation takes it from
+         the schema). Persisting it made a cleared argument indistinguishable
+         from real data: the value dropped out as `undefined`, `required: true`
+         stayed, and what was saved to the draft was `{type, required}` — an
+         argument DEFINITION sitting where its value should be. */
       args[index] = {
         ...args[index],
         value: newVal,
         type: !isFunction ? type || args[index]?.type : undefined,
         is_expression: isFunction,
-        required: isRequired,
       };
 
       onValueChange(
@@ -776,16 +736,10 @@ export const Expression = ({
   const handleFirstParamChange = useCallback(
     (_name, value, type, isFunction) => {
       if (isFunction || (type !== 'any' && type !== 'auto')) {
-        updateArg(
-          value,
-          0,
-          isFunction ? undefined : type,
-          isFunction,
-          selectedExpression?.args?.[0]?.required
-        );
+        updateArg(value, 0, isFunction ? undefined : type, isFunction);
       }
     },
-    [updateArg, JSON.stringify(selectedExpression)]
+    [updateArg]
   );
 
   const buildCustomTemplateItems = useCallback(
@@ -1062,7 +1016,9 @@ export const Expression = ({
           {confirmDialogData.children}
         </ConfirmUnsupportedTypeModal>
       )}
-      {showSummary && <ExpressionRenderTemplate exp={value} expressions={expressions.value} />}
+      {showSummary && (
+        <ExpressionRenderTemplate exp={value} expressions={expressions.value} templates={localTemplates} />
+      )}
       {!selectedExpression && !serverExpression && !firstArgument?.value && level === 0 ? (
         <ReqoreMessage size='small' opaque={false} intent='info'>
           Select an operation to start building your expression
@@ -1102,6 +1058,7 @@ export const Expression = ({
           >
             <TemplateField
               component={auto}
+              componentOverrides={componentOverrides}
               // SEAM (reqraft): an operand that becomes an expression mounts
               // its own builder through this TemplateField — hand the host's
               // actions on, or nesting silently drops them (the group
@@ -1223,6 +1180,7 @@ export const Expression = ({
                     <TemplateField
                       minimal
                       component={auto}
+                      componentOverrides={componentOverrides}
                       // SEAM (reqraft): same as the first operand above.
                       extraActions={extraActions}
                       noSoft
@@ -1257,13 +1215,7 @@ export const Expression = ({
                         !!arg.default_value
                       }
                       onChange={((_name, value, type, isFunction) => {
-                        updateArg(
-                          value,
-                          index + 1,
-                          isFunction ? undefined : type,
-                          isFunction,
-                          arg.required
-                        );
+                        updateArg(value, index + 1, isFunction ? undefined : type, isFunction);
                       }) as any}
                       fluid={phone}
                       fixed={!phone}
@@ -1351,6 +1303,7 @@ export const ExpressionBuilder = ({
   expressionsUrl,
   serverHandled,
   extraActions,
+  componentOverrides,
   reorder,
 }: IExpressionBuilderProps) => {
   const templates = useTemplates(!isChild, localTemplates);
@@ -1472,7 +1425,11 @@ export const ExpressionBuilder = ({
         >
           <ReqoreControlGroup vertical fluid size='normal' style={{ position: 'relative' }} wrap>
             {showSummary && (
-              <ExpressionRenderTemplate exp={value} expressions={_expressions.expressions} />
+              <ExpressionRenderTemplate
+                exp={value}
+                expressions={_expressions.expressions}
+                templates={localTemplates}
+              />
             )}
             <StyledExpressionItemLabel
               as={ReqoreP}
@@ -1535,6 +1492,7 @@ export const ExpressionBuilder = ({
         id={level === 0 && index === 0 ? 'expression-builder' : undefined}
         serverHandled={serverHandled}
         extraActions={extraActions}
+        componentOverrides={componentOverrides}
         reorder={reorder}
       />
     </ReqoreErrorBoundary>

package/src/components/form/expressions/builder/renderTemplate.tsx

@@ -1,75 +1,42 @@
 // SEAM (reqraft): the IDE rendered the readable expression via
-// `callBackendBasic('render-expression')` over the Creator WebSocket; here
-// the same server rendering arrives over the LSP (`dpql/renderExpression`,
-// via `useRenderExpression`), with a client-side approximation as fallback.
-//
-// Server path: the rendering is displayed through a read-only `DpqlEditor`,
-// which gives template-reference chips (the `$context:value` converter) AND
-// LSP-backed token colours (semantic tokens) — diagnostics are suppressed
-// because the rendering is human-readable text, not parseable DPQL. The
-// fallback path keeps the plain rich-text rendering plus an explicit
-// "Approximate" tag so the serving path is never ambiguous.
+// `callBackendBasic('render-expression')` over the Creator WebSocket; here the
+// same server rendering arrives over the LSP (`dpql/renderExpression`, via
+// `useRenderExpression`) and is shown through `ExpressionRendering`, the one
+// read-only rendering every expression surface shares — monospace, coloured by
+// the language server, template references as chips.
 // The component name/shape is kept identical so `index.tsx`'s usage is
 // unchanged.
-import { ReqoreTag } from '@qoretechnologies/reqore';
-import { useAsyncRetry } from 'react-use';
-import { DpqlEditor } from '../../../dpqlEditor';
+import { ReqoreMessage } from '@qoretechnologies/reqore';
+import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { validateField } from '../../../../helpers/validations';
-import { RichTextFormField } from '../../fields/rich-text/RichText';
-import { useRenderExpression } from '../useRenderExpression';
+import { ExpressionRendering } from '../DpqlRendering';
 import { IExpression, IExpressionSchema } from '../types';
 
-const noop = (): void => undefined;
-
 export interface IExpressionRenderTemplateProps {
   exp: IExpression;
   expressions: IExpressionSchema[];
+  /** The builder's template catalogue: a reference in it reads as its name. */
+  templates?: IReqoreFormTemplates;
 }
 
-export const ExpressionRenderTemplate = ({ exp, expressions }: IExpressionRenderTemplateProps) => {
-  const { renderRich } = useRenderExpression();
-
-  const isValid = validateField('expression', exp, { expressions });
-
-  const renderTemplate = useAsyncRetry(async () => {
-    if (!isValid) return null;
-    return renderRich(exp.value, expressions);
-  }, [JSON.stringify(exp), JSON.stringify(expressions)]);
-
-  if (!isValid || !renderTemplate.value || !renderTemplate.value.server) {
+export const ExpressionRenderTemplate = ({
+  exp,
+  expressions,
+  templates,
+}: IExpressionRenderTemplateProps) => {
+  if (!validateField('expression', exp, { expressions })) {
     return (
-      <>
-        <RichTextFormField
-          readOnly
-          value={
-            isValid
-              ? renderTemplate.value?.text
-              : 'Expression is invalid, unable to render summary'
-          }
-          flat
-          panelProps={{ style: { flexGrow: 0, flexShrink: 0 } }}
-          size='small'
-        />
-        {isValid && renderTemplate.value ? (
-          <ReqoreTag
-            size='small'
-            minimal
-            intent='muted'
-            label='Approximate — server rendering unavailable'
-          />
-        ) : null}
-      </>
+      <ReqoreMessage size='small' intent='muted' flat opaque={false}>
+        Expression is invalid, unable to render summary
+      </ReqoreMessage>
     );
   }
 
   return (
-    <DpqlEditor
-      value={renderTemplate.value.text}
-      onChange={noop}
-      readOnly
-      showDiagnostics={false}
-      enableHover={false}
-      templateTagsUseIntent
+    <ExpressionRendering
+      expression={exp.value}
+      templates={templates}
+      data-testid='expression-explanation'
     />
   );
 };