feat(form-engine): an opt-in calm appearance for the compact form, and a new form is not already wrong — 0.10.65

__tests__/allowedValueSpellings.test.tsx

@@ -0,0 +1,86 @@
+import { ReqoreUIProvider } from '@qoretechnologies/reqore';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { FieldAllowedValues } from '../src/components/form/fields/allowed-values/AllowedValues';
+import { allowedValueOf, findAllowedValueOption } from '../src/helpers/allowedValues';
+
+/**
+ * A choice is the same choice however its entry is written.
+ *
+ * An `allowed_values` entry comes as an envelope (`{value: {type, value}}`), a
+ * bare value (`{value: 'x'}`) or a name alone (`{name: 'x'}`) — the app
+ * catalogue sends the bare form, a `context=ui` answer the envelope. The row
+ * that names a stored choice read all three; the pickers that write one read
+ * only the envelope. On a bare list nothing showed as selected, and clicking a
+ * choice stored `undefined`: picking a pipeline processor's class cleared it.
+ */
+describe('the value a choice stands for', () => {
+  it('reads the envelope, the bare value and the name', () => {
+    expect(allowedValueOf({ value: { type: 'string', value: 'a' } })).toBe('a');
+    expect(allowedValueOf({ value: 'b' })).toBe('b');
+    expect(allowedValueOf({ name: 'c' })).toBe('c');
+    // A falsy bare value is still the value, not a reason to fall back to the name.
+    expect(allowedValueOf({ name: 'zero', value: 0 })).toBe(0);
+    expect(allowedValueOf({ value: false })).toBe(false);
+  });
+
+  it('agrees with the lookup that names the stored choice', () => {
+    for (const entry of [
+      { name: 'x', value: { type: 'string', value: 'v' } },
+      { name: 'x', value: 'v' },
+      { name: 'v' },
+    ]) {
+      const schema = { type: 'string', allowed_values: [entry] } as never;
+      expect(findAllowedValueOption(allowedValueOf(entry), schema)).toBe(entry);
+    }
+  });
+});
+
+describe('a short list written with bare values', () => {
+  const items = [
+    { name: 'ProcessorTypeTest', display_name: 'Processor Type Test', value: 'ProcessorTypeTest' },
+    {
+      name: 'qogcompatibilitytest',
+      display_name: 'Qog Compatibility Test',
+      value: 'qogcompatibilitytest',
+    },
+  ];
+
+  it('stores the choice that was clicked', () => {
+    const onChange = vi.fn();
+    render(
+      <ReqoreUIProvider>
+        <FieldAllowedValues
+          type='string'
+          name='processor'
+          value='ProcessorTypeTest'
+          onChange={onChange}
+          items={items as never}
+        />
+      </ReqoreUIProvider>
+    );
+
+    fireEvent.click(screen.getByText('Qog Compatibility Test').closest('.reqore-checkbox')!);
+    expect(onChange).toHaveBeenCalledWith('processor', 'qogcompatibilitytest');
+  });
+
+  it('knows the stored value is the selected choice', () => {
+    const onChange = vi.fn();
+    render(
+      <ReqoreUIProvider>
+        <FieldAllowedValues
+          type='string'
+          name='processor'
+          value='ProcessorTypeTest'
+          onChange={onChange}
+          items={items as never}
+        />
+      </ReqoreUIProvider>
+    );
+
+    // Clicking the selected choice unselects it, which is only possible if the
+    // picker recognised it as the selected one.
+    fireEvent.click(screen.getByText('Processor Type Test').closest('.reqore-checkbox')!);
+    expect(onChange).toHaveBeenCalledWith('processor', undefined);
+  });
+});

__tests__/compactRowCaretFindsTheControl.test.tsx

@@ -110,6 +110,89 @@ describe('the caret an opened row takes', () => {
     expect((document.activeElement as HTMLElement).textContent).toContain('Choose a connection');
   });
 
+  /* A code editor draws its chrome first (a fullscreen toggle) and its edit area once
+     it has loaded. The caret may rest on the chrome for that moment, but the edit area
+     takes it when it arrives: otherwise the next space typed presses the toggle. */
+  const LateCodeEditor = ({ onMount }: { onMount: (mount: () => void) => void }) => {
+    const [ready, setReady] = React.useState(false);
+    React.useEffect(() => onMount(() => setReady(true)), []);
+    return (
+      <div>
+        <button type='button'>Fullscreen</button>
+        {ready ? <div role='textbox' tabIndex={0} aria-label='Editor content' /> : null}
+      </div>
+    );
+  };
+  const codeField = {
+    source: { type: 'string', ui_type: 'late-code', display_name: 'Source', required: true },
+  };
+
+  it('moves from an editor\'s chrome to its text box when the text box arrives late', async () => {
+    let mount: () => void = () => undefined;
+    renderForm(codeField, {}, {
+      componentOverrides: {
+        'late-code': () => <LateCodeEditor onMount={(fn) => (mount = fn)} />,
+      },
+    });
+
+    await waitFor(() => expect(focusedField()).toBe('source'));
+    expect(document.activeElement?.textContent).toBe('Fullscreen');
+
+    mount();
+
+    await waitFor(() =>
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Editor content')
+    );
+  });
+
+  /* Monaco inserts its edit area before it can take focus, and focus() on it then does
+     nothing. The caret counts as handed over only once it has actually landed. */
+  it('keeps trying until the text box can actually take the caret', async () => {
+    let makeFocusable: () => void = () => undefined;
+    const SlowEditArea = () => {
+      const [focusable, setFocusable] = React.useState(false);
+      React.useEffect(() => {
+        makeFocusable = () => setFocusable(true);
+      }, []);
+      return (
+        <div>
+          <button type='button'>Fullscreen</button>
+          <div role='textbox' aria-label='Editor content' {...(focusable ? { tabIndex: 0 } : {})} />
+        </div>
+      );
+    };
+    renderForm(codeField, {}, { componentOverrides: { 'late-code': SlowEditArea } });
+
+    // The text box is there but cannot take focus yet: the row waits for it rather
+    // than settling on the toolbar beside it.
+    await waitFor(() => expect(document.querySelector('.readfirst-row-editing')).toBeTruthy());
+    expect(document.activeElement?.textContent).not.toBe('Fullscreen');
+
+    makeFocusable();
+
+    await waitFor(() =>
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Editor content')
+    );
+  });
+
+  it('leaves the caret where the reader put it, even when the text box arrives later', async () => {
+    let mount: () => void = () => undefined;
+    const { container } = renderForm(codeField, {}, {
+      componentOverrides: {
+        'late-code': () => <LateCodeEditor onMount={(fn) => (mount = fn)} />,
+      },
+    });
+    await waitFor(() => expect(focusedField()).toBe('source'));
+
+    const elsewhere = document.createElement('input');
+    container.appendChild(elsewhere);
+    elsewhere.focus();
+    mount();
+
+    await waitFor(() => expect(document.querySelector('[aria-label="Editor content"]')).toBeTruthy());
+    expect(document.activeElement).toBe(elsewhere);
+  });
+
   it('leaves a caret the reader moved elsewhere alone', async () => {
     // A late editor plus a reader who did not wait: the row must not yank the
     // caret out of the control they moved into themselves.

__tests__/expressionRichTextArgument.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+
+import { renderExpressionToText } from '../src/components/form/expressions/renderExpressionToText';
+import { IExpression, IExpressionValue } from '../src/components/form/expressions/types';
+
+/**
+ * A rich-text argument reads as the string it is.
+ *
+ * The editor stores rich text as its document — paragraphs of text and template
+ * tags — and the offline renderer printed that object as JSON. A Qog's Message
+ * Content row read `+([{"type":"paragraph","children":[…]}], …)`: the editor's
+ * node tree, which is no value anyone wrote and not what the server renders.
+ */
+const richtext = (...children: unknown[]): IExpression =>
+  ({ type: 'richtext', value: [{ type: 'paragraph', children }] }) as IExpression;
+const lit = (value: unknown): IExpression => ({ value }) as IExpression;
+
+describe('renderExpressionToText with a rich-text argument', () => {
+  it('writes the rich text as a string literal', () => {
+    const value = {
+      exp: '+',
+      args: [richtext({ text: 'This Qog was run at ' }), lit(' by me')],
+    } as IExpressionValue;
+
+    expect(renderExpressionToText(value)).toBe('"This Qog was run at " + " by me"');
+  });
+
+  it('writes a template tag inside it as its reference', () => {
+    const value = {
+      exp: '+',
+      args: [
+        richtext(
+          { text: 'Day ends at ' },
+          { type: 'tag', label: 'Day End', value: '$timestamp:next_midnight', children: [{ text: '' }] }
+        ),
+        lit('!'),
+      ],
+    } as IExpressionValue;
+
+    expect(renderExpressionToText(value)).toBe('"Day ends at $timestamp:next_midnight" + "!"');
+  });
+
+  it('still writes any other object as it is', () => {
+    const value = { exp: '+', args: [lit({ a: 1 }), lit(2)] } as IExpressionValue;
+
+    expect(renderExpressionToText(value)).toBe('{"a":1} + 2');
+  });
+});

__tests__/formEngineCompletionMeter.test.tsx

@@ -95,7 +95,9 @@ describe('the completion header', () => {
     expect(text).not.toContain('Draft');
     expect(text).not.toContain('Ready');
     expect(text).toContain('0/2 set');
-    expect(text).toContain('2 need attention');
+    // Nobody has been to either field yet, so they are still to fill in, not faults.
+    expect(text).toContain('2 to fill in');
+    expect(text).not.toContain('need attention');
   });
 
   it('still reads Ready at 100% when nothing is flagged', async () => {