@qoretechnologies/reqraft 0.10.61 → 0.10.62-pr.137.g86641aa

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

@@ -1378,6 +1378,8 @@ const FormEngineImpl = ({
   // stays put when its status flips (e.g. becomes valid) instead of jumping to
   // another box mid-edit and stealing focus. Keyed by option name.
   const settledBucket = useRef<Record<string, 'attention' | 'set' | 'optional'>>({});
+  // the one field that says where it moves when it is closed: see `heldOptions`
+  const movesToNoteFor = useRef<string | null | undefined>(undefined);
   // Measured form width (not viewport — the form lives in drawers/panels of
   // arbitrary width) drives the stacked narrow layout.
   const [compactWrapRef, { width: compactWrapWidth }] = useMeasure<HTMLDivElement>();
@@ -1425,9 +1427,7 @@ const FormEngineImpl = ({
       setCompactToolbarHeight(0);
       return undefined;
     }
-    const header = wrap.querySelector<HTMLElement>(
-      ':scope > .reqore-panel > .reqore-panel-title'
-    );
+    const header = wrap.querySelector<HTMLElement>(':scope > .reqore-panel > .reqore-panel-title');
     if (!header) {
       setCompactToolbarHeight(0);
       return undefined;
@@ -2148,7 +2148,6 @@ const FormEngineImpl = ({
           return newValue;
         }
 
-
         const rendererType = getType(
           (options[optionName].ui_type || options[optionName].type) as TQorusType,
           operators,
@@ -2392,29 +2391,39 @@ const FormEngineImpl = ({
         const isEmpty = optionValue === undefined || optionValue === '';
 
         let validation: IValidationResult;
-
-        /* A required field locked by an unmet `depends_on` does not apply
+        /* A field whose host gives its own reason (`invalid_reason`) is invalid while it does, whatever the
+           field makes of its value: the host knows something the field cannot - that a field it names
+           is not in the record, that text around a field is not a whole number - and says it in the field,
+           in place of the field's own message (`getOptionFieldMessages`). */
+        const hostReason = (options?.[optionName] as { invalid_reason?: string } | undefined)
+          ?.invalid_reason;
+
+        if (hostReason) {
+          validation = { isValid: false, reason: hostReason, reasons: [hostReason] };
+        } else {
+          /* A required field locked by an unmet `depends_on` does not apply
            while it is locked: it is not in "Needs attention", and an empty one
            does not make the form incomplete either. Otherwise a check whose
            kind is Equals could never be saved, because Minimum — required for
            Between alone — is empty; and a form whose only gaps are fields
            nobody can fill in would say Incomplete with nothing to act on. A
            locked field that still HOLDS a value is validated as before. */
-        if (
-          isEmpty &&
-          ((!isRequired && !hasRequiredGroups) || dependencyLockedNames.includes(optionName))
-        ) {
-          validation = { isValid: true, reasons: [] };
-        } else {
-          validation = validateFieldWithResult(getType(type), optionValue, {
-            has_to_have_value: true,
-            optionSchema: options,
-            options: availableOptions,
-            ...options?.[optionName],
-            // The expression flag lives on the field value, not the schema.
-            isFunction: (option as { is_expression?: boolean }).is_expression,
-            hasOwnEditor: isRendererOnly(options?.[optionName]?.ui_type as TQorusType),
-          } as any);
+          if (
+            isEmpty &&
+            ((!isRequired && !hasRequiredGroups) || dependencyLockedNames.includes(optionName))
+          ) {
+            validation = { isValid: true, reasons: [] };
+          } else {
+            validation = validateFieldWithResult(getType(type), optionValue, {
+              has_to_have_value: true,
+              optionSchema: options,
+              options: availableOptions,
+              ...options?.[optionName],
+              // The expression flag lives on the field value, not the schema.
+              isFunction: (option as { is_expression?: boolean }).is_expression,
+              hasOwnEditor: isRendererOnly(options?.[optionName]?.ui_type as TQorusType),
+            } as any);
+          }
         }
 
         result.push({
@@ -3103,6 +3112,9 @@ const FormEngineImpl = ({
             // reqraft: form-level expression fields get the Visual/Text shell
             // (DPQL text mode); opt out per-form via `templateFieldProps`.
             allowTextExpressions
+            // a form's options enter their value on tabs: Value · Expression · Visual, or Value · Template
+            // where only templates are taken (qorus#646); opt out per-form via `templateFieldProps`
+            valueTabs
             // A fixed allowed-value field still needs its selector even when
             // arbitrary custom values are forbidden. TemplateField uses this
             // flag to decide whether to mount AutoFormField at all; treating
@@ -3270,9 +3282,35 @@ const FormEngineImpl = ({
   // The closure surface the extracted CompactRow reads through context. Refs and
   // setters are stable; the state/memo/handler fields change identity as they do
   // today, so a row re-renders exactly when its inputs do.
+  /* An open field is held in the box it was opened in, so finishing an edit does not remount it elsewhere
+     and take the focus (see `stableBucketOf`). Held, it says where it now belongs - otherwise a value
+     already right sat under "Needs attention" until ✓ was pressed, with nothing saying why (David's review
+     of qorus#646). Keyed by option name: the box it moves to when closed.
+
+     It is said once per form, on the first field held this way, and on no field once that one is closed:
+     the user knows it from then on, and saying it on every field takes room (qlip build 20261008-083118;
+     David's decision). `movesToNoteFor` is that field - undefined until one is held, null once it is
+     closed. */
+  const heldEntries = expandedOptions
+    .map((name) => [name, settledBucket.current[name], getOptionBucket(name)] as const)
+    .filter(([, held, now]) => !!held && held !== now)
+    .map(([name, , now]) => [name, now] as const);
+  if (movesToNoteFor.current === undefined && heldEntries.length) {
+    movesToNoteFor.current = heldEntries[0][0];
+  } else if (movesToNoteFor.current && !expandedOptions.includes(movesToNoteFor.current)) {
+    movesToNoteFor.current = null;
+  }
+  const heldOptionsKey = JSON.stringify(
+    Object.fromEntries(heldEntries.filter(([name]) => name === movesToNoteFor.current))
+  );
+  const heldOptions = useMemo<Record<string, 'attention' | 'set' | 'optional'>>(
+    () => JSON.parse(heldOptionsKey),
+    [heldOptionsKey]
+  );
   const compactRowContextValue = useMemo<ICompactRowContext>(
     () => ({
       templates: templates.value,
+      heldOptions,
       readOnly,
       onReadOnlyActivate,
       commitMode,
@@ -3322,6 +3360,7 @@ const FormEngineImpl = ({
     }),
     [
       templates.value,
+      heldOptions,
       readOnly,
       commitMode,
       expandMode,
@@ -4245,7 +4284,10 @@ const FormEngineImpl = ({
      tested. Rendered as `data-wait` on the placeholder so a page can be asked
      what it is waiting FOR instead of only that it is waiting. */
   const waitReason =
-    rest.skeleton ? (rest.skeletonReason ? `host:${rest.skeletonReason}` : 'host')
+    rest.skeleton ?
+      rest.skeletonReason ?
+        `host:${rest.skeletonReason}`
+      : 'host'
     : templates.loading ? 'templates'
     : typesLoading ? 'types'
     : optionsLoading ? 'options'

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

@@ -633,6 +633,11 @@ export const InjectedOptionActionsEditCard: Story = {
         document.querySelector('.options-readfirst-card .option-branch-action')
       ).toBeTruthy();
     });
+
+    // the card's name is centred on its actions, not above them (David's review of qorus#646)
+    const header = document.querySelector('.options-readfirst-card-header') as HTMLElement;
+    const [heading, actions] = [...header.children].map((el) => el.getBoundingClientRect());
+    await expect(Math.abs(heading.top + heading.height / 2 - (actions.top + actions.height / 2))).toBeLessThanOrEqual(2);
   },
 };
 

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

@@ -356,7 +356,16 @@ export const getOptionFieldMessages = ({
     !!optionSchema?.depends_on &&
     !hasAllDependenciesFullfilled(optionSchema.depends_on, allOptions, schema);
 
-  if (option.value || option.value === false || option.value === 0 || option.value === null) {
+  /* The host's own words for what is wrong with this field (`invalid_reason`) are said in place of the
+     field's own reason and its "This field is required": a host that has a sentence of its own, in the
+     user's language, showed it beside the field's generic one, two messages for one problem (qorus#646).
+     Required groups and dependencies still say what they say. */
+  const hostReason = (optionSchema as { invalid_reason?: string } | undefined)?.invalid_reason;
+  const hasValue = option.value || option.value === false || option.value === 0 || option.value === null;
+
+  if (hostReason) {
+    result.push({ label: hostReason, intent: 'danger' });
+  } else if (hasValue) {
     /* A concrete type the VALUE carries beats an untyped schema.
        `auto`/`any` declare no type — the author picks one (Binary, Date, …)
        and it is recorded beside the value. Reading the schema first validated
@@ -396,7 +405,9 @@ export const getOptionFieldMessages = ({
     if (optionSchema?.required && !locked) {
       result.push({ label: 'This field is required', intent: 'danger' });
     }
+  }
 
+  if (!hasValue) {
     if (
       optionSchema?.required_groups &&
       !validateOptionWithRequiredGroups(allOptions, schema, optionSchema.required_groups)

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

@@ -69,6 +69,8 @@ export interface ICompactRowContext {
   // display name in the read-first chip.
   templates?: IReqoreFormTemplates;
   expandedOptions: string[];
+  /** Open fields held in the box they were opened in, with the box each moves to when it is closed. */
+  heldOptions?: Record<string, 'attention' | 'set' | 'optional'>;
   highlightedOptions: string[];
   flashedOptions: string[];
   infoPanelOverrides: Record<string, boolean>;

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

@@ -4,6 +4,7 @@ import {
   TQorusFormFieldSchema,
   TQorusType,
 } from '@qoretechnologies/ts-toolkit';
+import { isValueTemplate } from '../../../helpers/templates';
 import { isRendererOnlyUiType } from './rendererTypes';
 import { isEmptyUiEnvelope, isUiEncodedValue } from './_structuredData/structuredData';
 import { renderExpressionToText } from '../expressions/renderExpressionToText';
@@ -642,7 +643,12 @@ export const formatOptionValue = (
 
   const type = getValueType(option, schema);
 
-  if (type === 'bool' || type === 'boolean') {
+  /* A template is the field it names, in a yes/no as in any type: it is not "Yes" because it is not
+     empty. Only a value that is true or false reads as Yes or No (qorus#646). */
+  if (
+    (type === 'bool' || type === 'boolean') &&
+    !(typeof value === 'string' && isValueTemplate(value))
+  ) {
     return value ? 'Yes' : 'No';
   }
 

package/src/components/form/expressions/ExpressionField.stories.tsx

@@ -659,6 +659,37 @@ export const TextMode: Story = {
   },
 };
 
+/** A comparison built in the Visual view and left unfinished, seen in the Text view. */
+export const TextModeOfAnUnfinishedExpression: Story = {
+  args: {
+    value: {
+      is_expression: true,
+      // ">" with its first operand switched to "Use Expression", nothing chosen, and its second empty
+      value: { exp: '>', args: [{ value: { args: [null] }, is_expression: true }, {}] },
+    },
+    defaultMode: 'text',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ExpressionField in Text mode over a comparison left unfinished in the Visual view: an operand switched to Use Expression with no operation chosen, and an empty one. The text shows a hole for each, "… > …", as the row summary does.',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    await waitFor(
+      () => {
+        const el = canvasElement.querySelector('[contenteditable="true"]');
+        expect(el?.textContent).toBe('… > …');
+      },
+      { timeout: 6000 }
+    );
+    expect(canvasElement.textContent).not.toContain('[object Object]');
+    await waitForLspIdle(canvasElement);
+  },
+};
+
 /**
  * A plain `bool` field with `supports_expressions` and no value — starts as
  * the normal field; the "Use Expression" toggle (More menu) switches it.
@@ -757,10 +788,10 @@ const settle = (root: HTMLElement, quietMs = 400): Promise<void> =>
   });
 
 /** Open a compact row — a read-first row shows its label, not its editor. */
-const openCompactRow = async (canvasElement: HTMLElement): Promise<void> => {
+const openCompactRow = async (canvasElement: HTMLElement, rowLabel = 'Value'): Promise<void> => {
   const label = (await waitFor(
     () => {
-      const el = within(canvasElement).queryByText('Value');
+      const el = within(canvasElement).queryByText(rowLabel);
       if (!el) throw new Error('row not rendered');
       return el as HTMLElement;
     },
@@ -1108,7 +1139,7 @@ export const FieldMenuStaysInTheToolbar: Story = {
     docs: {
       description: {
         story:
-          "Accepts the offer on a compact row whose field also has templates. The row shows ONE More menu — the field publishes its items into the row's ⋮ rather than drawing its own — and that menu sits in the shell's toolbar row, level with Undo, not part-way down the editor.",
+          "Types 1 + 2 on a compact row whose field also has templates: the field enters its value on tabs (Value · Expression · Visual), and the expression moves it to Expression. The row shows ONE More menu — the field publishes its items into the row's ⋮ rather than drawing its own — and that menu sits in the tabs' row, not part-way down the editor.",
       },
     },
   },
@@ -1128,7 +1159,7 @@ export const FieldMenuStaysInTheToolbar: Story = {
             expected: {
               type: 'string',
               ui_type: 'string',
-              display_name: 'Value',
+              display_name: 'Expected',
               preselected: true,
               supports_expressions: true,
               supports_templates: true,
@@ -1150,8 +1181,25 @@ export const FieldMenuStaysInTheToolbar: Story = {
     );
   },
   async play({ canvasElement }) {
-    await openCompactRow(canvasElement);
-    await acceptTypedExpression(canvasElement);
+    await openCompactRow(canvasElement, 'Expected');
+    const input = (await waitFor(
+      () => {
+        const el = canvasElement.querySelector('.value-tab-text [contenteditable="true"]');
+        if (!el) throw new Error('field not ready');
+        return el as HTMLElement;
+      },
+      { timeout: 10000 }
+    )) as HTMLElement;
+    await userEvent.click(input);
+    await userEvent.type(input, '1 + 2');
+    // the Value tab never holds an expression: the field moves to Expression, in the tabs' row
+    await waitFor(
+      () =>
+        expect(
+          canvasElement.querySelector('.value-tab[aria-pressed="true"]')?.getAttribute('data-tab')
+        ).toBe('Expression'),
+      { timeout: 10000 }
+    );
 
     // One menu per control: the row's ⋮, not a second one drawn by the field.
     expect(canvasElement.querySelector('.template-more')).toBeNull();
@@ -1159,9 +1207,9 @@ export const FieldMenuStaysInTheToolbar: Story = {
     expect(menus).toHaveLength(1);
     const menu = menus[0] as HTMLElement;
 
-    // The toolbar row is the shell's first line — the Visual/Text toggle.
-    const toggle = within(canvasElement).getByText('Text').closest('button') as HTMLElement;
-    const toolbar = toggle.getBoundingClientRect();
+    // The toolbar row is the field's first line — its tabs.
+    const tabs = canvasElement.querySelector('.value-tabs') as HTMLElement;
+    const toolbar = tabs.getBoundingClientRect();
     const control = menu.getBoundingClientRect();
 
     /* Reported as numbers: "the menu is in the wrong place" is not something a