@orchestrator-ui/orchestrator-ui-components 8.7.2 → 8.7.3

package/jest.config.cjs

@@ -2,19 +2,20 @@ const base = require('@orchestrator-ui/jest-config/jest-base.config.js');
 const nextJest = require('next/jest');
 
 const createJestConfig = nextJest({
-    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
-    dir: './',
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
 });
 
 // The entry for "uuid" in the moduleNameMapper can be removed when EUI updates the dependency version to 9.0.0 or higher.
 // https://github.com/uuidjs/uuid/blob/main/CHANGELOG.md#900-2022-09-05
 const customJestConfig = {
-    ...base,
-    displayName: 'Wfo-UI Tests',
-    moduleNameMapper: {
-        '^uuid$': 'uuid',
-        '^@copilotkit/react-core/v2$': '<rootDir>/__mocks__/@copilotkit/react-core.js',
-    },
+  ...base,
+  displayName: 'Wfo-UI Tests',
+  moduleNameMapper: {
+    '^uuid$': 'uuid',
+    // Mirrors the "@/*" path alias from tsconfig.json
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
 };
 
 module.exports = createJestConfig(customJestConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.7.2",
+  "version": "8.7.3",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {

package/src/components/WfoTable/WfoStructuredSearchTable/WfoFilterBuilder.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { FullOperator, QueryBuilder, type RuleGroupType, generateID } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
@@ -8,8 +8,8 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { SearchParams, WfoAutoExpandableTextArea, WfoTextAnchor } from '@/components';
 import { WfoCombinatorSelector } from '@/components/WfoTable/WfoStructuredSearchTable/WfoCombinatorSelector';
-import { useWithOrchestratorTheme } from '@/hooks';
-import { OperatorDisplay } from '@/types';
+import { useFieldsPathInfo, useWithOrchestratorTheme } from '@/hooks';
+import { EntityKind, OperatorDisplay } from '@/types';
 import type { FieldToOperatorMap, PathInfo } from '@/types';
 
 import { WfoFieldSelector } from './WfoFieldSelector';
@@ -20,6 +20,7 @@ import { WfoRule } from './WfoRule';
 import { WfoRuleGroup } from './WfoRuleGroup';
 import { WfoValueEditor } from './WfoValueEditor';
 import { getWfoStructuredSearchTableStyles } from './styles';
+import { collectRuleFields } from './utils';
 
 // Maps PathInfo operator names to react-querybuilder's native operator names,
 // which is what parseCEL produces and formatQuery(cel) expects.
@@ -129,6 +130,27 @@ export const WfoFilterBuilder = ({
     }
   };
 
+  // Fields can enter the query without passing through the field selector — a filter
+  // restored from the URL or added by a column-header search. Resolve their path info
+  // so the value editor renders the right input type (date picker, boolean toggle, ...)
+  // and the operator selector gets the field's operator list.
+  const unresolvedFields = useMemo(
+    () =>
+      collectRuleFields(queryBuilderRuleGroup).filter(
+        (field) => field && field !== '~' && !fieldPathInfoMap.has(field),
+      ),
+    [queryBuilderRuleGroup, fieldPathInfoMap],
+  );
+  const resolvedFieldsPathInfo = useFieldsPathInfo(unresolvedFields, EntityKind.SUBSCRIPTION);
+
+  useEffect(() => {
+    resolvedFieldsPathInfo.forEach((pathInfo, field) => {
+      if (pathInfo && !fieldPathInfoMap.has(field)) {
+        handleFieldSelected(field, pathInfo.operators, pathInfo);
+      }
+    });
+  }, [fieldPathInfoMap, resolvedFieldsPathInfo]);
+
   return (
     <EuiFlexGroup css={queryBuilderContainerStyles}>
       <EuiFlexGroup direction={'column'}>
@@ -162,6 +184,11 @@ export const WfoFilterBuilder = ({
               addGroupAction: null,
               removeGroupAction: null,
               removeRuleAction: WfoRemoveRuleAction,
+              // Field-to-field comparisons are not supported, but a rule can briefly hold
+              // valueSource 'field' while a CEL literal is being typed in the textarea
+              // ('lldp == fals' parses 'fals' as an identifier) — without this override
+              // react-querybuilder's default value source selector flashes into the rule.
+              valueSourceSelector: null,
             }}
             addRuleToNewGroups
             onAddGroup={onAddGroupHandler}

package/src/components/WfoTable/WfoStructuredSearchTable/WfoOperatorSelector.spec.tsx

@@ -0,0 +1,143 @@
+/**
+ * Reproduces the WfoFilterBuilder wiring around operator selection: a controlled
+ * QueryBuilder with resetOnFieldChange=false, getOperators backed by a map that is
+ * filled when a field is selected (like fieldToOperatorMap), and a value editor
+ * that hides itself for the unary null/notNull operators.
+ */
+import React, { useState } from 'react';
+import type { FieldSelectorProps, FullOperator, RuleGroupType, ValueEditorProps } from 'react-querybuilder';
+import { QueryBuilder } from 'react-querybuilder';
+
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { WfoOperatorSelector } from './WfoOperatorSelector';
+
+const FIELD_OPERATORS: Record<string, FullOperator[]> = {
+  componentField: [
+    { name: 'notNull', label: '✓ has component', value: 'notNull', arity: 'unary' },
+    { name: 'null', label: '✗ does not have component', value: 'null', arity: 'unary' },
+  ],
+  textField: [
+    { name: '=', label: '= equals', value: '=' },
+    { name: '!=', label: '≠ not equals', value: '!=' },
+  ],
+  // A field the autocomplete could not resolve: storeFieldOperators falls back to []
+  unknownField: [],
+  // A field whose operator list starts with the unary component operators
+  mixedField: [
+    { name: 'notNull', label: '✓ has component', value: 'notNull', arity: 'unary' },
+    { name: 'null', label: '✗ does not have component', value: 'null', arity: 'unary' },
+    { name: 'contains', label: '∋ contains', value: 'contains' },
+  ],
+};
+
+const FieldSelectorStub = ({ handleOnChange, value, context }: FieldSelectorProps) => (
+  <select
+    data-testid="field-selector"
+    value={value}
+    onChange={(e) => {
+      context.onFieldSelected(e.target.value);
+      handleOnChange(e.target.value);
+    }}
+  >
+    <option value="~">~</option>
+    <option value="componentField">componentField</option>
+    <option value="textField">textField</option>
+    <option value="unknownField">unknownField</option>
+    <option value="mixedField">mixedField</option>
+  </select>
+);
+
+const ValueEditorStub = ({ operator }: ValueEditorProps) => {
+  if (operator === 'null' || operator === 'notNull') {
+    return null;
+  }
+  return <input data-testid="value-editor" />;
+};
+
+const initialRuleGroup: RuleGroupType = {
+  id: 'root',
+  rules: [{ id: 'rule-0', field: '~', operator: '=', value: '' }],
+  combinator: 'and',
+};
+
+const Harness = ({ onQueryChange }: { onQueryChange?: (q: RuleGroupType) => void }) => {
+  const [query, setQuery] = useState<RuleGroupType>(initialRuleGroup);
+  const [fieldToOperatorMap, setFieldToOperatorMap] = useState<Map<string, FullOperator[]>>(new Map());
+
+  return (
+    <QueryBuilder
+      query={query}
+      enableMountQueryChange={false}
+      onQueryChange={(q: RuleGroupType) => {
+        setQuery(q);
+        onQueryChange?.(q);
+      }}
+      context={{
+        onFieldSelected: (field: string) => {
+          setFieldToOperatorMap((previousMap) => new Map(previousMap).set(field, FIELD_OPERATORS[field] ?? []));
+        },
+      }}
+      getOperators={(field) => fieldToOperatorMap.get(field) ?? []}
+      controlElements={{
+        fieldSelector: FieldSelectorStub,
+        operatorSelector: WfoOperatorSelector,
+        valueEditor: ValueEditorStub,
+      }}
+      resetOnFieldChange={false}
+    />
+  );
+};
+
+const selectField = (field: string) => {
+  fireEvent.change(screen.getByTestId('field-selector'), { target: { value: field } });
+};
+
+// The operator selector is the only select inside the rule row besides the field-selector stub.
+const getOperatorSelect = () =>
+  screen
+    .getAllByRole<HTMLSelectElement>('combobox')
+    .find((select) => select.closest('.rule') && select.dataset.testid !== 'field-selector') as HTMLSelectElement;
+
+describe('WfoOperatorSelector operator reset on field change', () => {
+  it('resets to the first operator when the selected field does not support the current one', () => {
+    render(<Harness />);
+
+    selectField('componentField');
+    expect(getOperatorSelect().value).toBe('notNull');
+    expect(screen.queryByTestId('value-editor')).not.toBeInTheDocument();
+  });
+
+  it('recovers from a unary operator when switching to a field without unary operators', () => {
+    render(<Harness />);
+
+    selectField('componentField');
+    expect(getOperatorSelect().value).toBe('notNull');
+
+    selectField('textField');
+    expect(getOperatorSelect().value).toBe('=');
+    expect(screen.getByTestId('value-editor')).toBeInTheDocument();
+  });
+
+  it('recovers from a unary operator when switching to a field whose operators are unknown', () => {
+    render(<Harness />);
+
+    selectField('componentField');
+    expect(getOperatorSelect().value).toBe('notNull');
+
+    selectField('unknownField');
+    expect(getOperatorSelect().value).not.toBe('notNull');
+    expect(screen.getByTestId('value-editor')).toBeInTheDocument();
+  });
+
+  it('prefers a non-unary operator as the default when the current operator is invalid', () => {
+    render(<Harness />);
+
+    // The initial rule operator '=' is not in mixedField's list; the reset should skip
+    // the leading unary operators so the value editor stays visible.
+    selectField('mixedField');
+    expect(getOperatorSelect().value).toBe('contains');
+    expect(screen.getByTestId('value-editor')).toBeInTheDocument();
+  });
+});

package/src/components/WfoTable/WfoStructuredSearchTable/WfoOperatorSelector.tsx

@@ -15,11 +15,20 @@ const FALLBACK_OPERATOR_LABELS: Record<string, string> = {
   null: '✗ does not have component',
 };
 
+// null/notNull hide the value editor, so they only make a sane default when a field
+// offers nothing else; prefer the first operator that keeps the value editor visible.
+const getDefaultOperator = (options: FullOperator[]) =>
+  (options.find((option) => option.arity !== 'unary') ?? options[0]).name;
+
 export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
   const { value, handleOnChange } = props;
 
-  const flatOptions = (props.options as Array<FullOperator | OptionGroup<FullOperator>>).flatMap((option) =>
-    isOptionGroup(option) ? option.options : [option],
+  const flatOptions = useMemo(
+    () =>
+      (props.options as Array<FullOperator | OptionGroup<FullOperator>>).flatMap((option) =>
+        isOptionGroup(option) ? option.options : [option],
+      ),
+    [props.options],
   );
 
   const selectOptions = useMemo(
@@ -34,18 +43,31 @@ export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
     const optionsChanged = previousOptionsKeyRef.current !== optionsKey;
     previousOptionsKeyRef.current = optionsKey;
 
-    // Reset to the first option only when the field's operator list changes — i.e. the
-    // user picked a (different) field, and resetOnFieldChange=false on QueryBuilder
-    // preserved an operator that is not valid for it. The `optionsChanged` guard keeps
-    // rules restored from CEL (URL or textarea) intact on mount: parseCEL can produce
-    // operators outside the prefilled operator lists (e.g. beginsWith), and resetting
-    // those here would silently rewrite the user's filter string.
-    if (!optionsChanged || selectOptions.length === 0) return;
+    // Reset to a default option only when the field's operator list changes — i.e. the
+    // user picked a (different) field and resetOnFieldChange=false on QueryBuilder
+    // preserved an operator that is not valid for it, or WfoFilterBuilder resolved the
+    // real operator list of a field restored from CEL (URL or textarea). The
+    // `optionsChanged` guard keeps restored rules intact while their field's operators
+    // are still unknown: parseCEL can produce operators outside the prefilled operator
+    // lists (e.g. beginsWith), and resetting those would silently rewrite the user's
+    // filter string.
+    if (!optionsChanged) return;
+
+    if (flatOptions.length === 0) {
+      // The new field's operators are unknown (nothing stored for it). A left-over unary
+      // operator would keep the value editor hidden with nothing in the dropdown to bring
+      // it back, so fall back to the query builder's default operator.
+      if (value === 'null' || value === 'notNull') {
+        handleOnChange('=');
+      }
+      return;
+    }
+
     const currentValueIsValid = selectOptions.some((option) => option.value === value);
     if (!currentValueIsValid) {
-      handleOnChange(selectOptions[0].value);
+      handleOnChange(getDefaultOperator(flatOptions));
     }
-  }, [optionsKey, selectOptions, value, handleOnChange]);
+  }, [optionsKey, flatOptions, selectOptions, value, handleOnChange]);
 
   // A restored operator that falls outside the field's list must still be visible in
   // the dropdown; without it EuiSelect renders an empty selection for the rule.

package/src/components/WfoTable/WfoStructuredSearchTable/WfoRestoreLoop.spec.tsx

@@ -0,0 +1,130 @@
+/**
+ * Regression test for the URL-restore render loop: a controlled QueryBuilder wired like
+ * WfoSearchPocPage + WfoFilterBuilder, restoring `lldp == true` from CEL while the path
+ * info of `lldp` resolves asynchronously (boolean ui type + operator list).
+ *
+ * The rule group is deliberately created with parseCEL directly — without the rule ids
+ * parseCelToRuleGroup adds — so every query prop change remounts the rules. The editors
+ * must not dispatch a query change on mount for a value the rule already holds, or the
+ * remount + mount-commit combination feeds back into an endless update cycle.
+ */
+import React, { useEffect, useState } from 'react';
+import type { FieldSelectorProps, FullOperator, RuleGroupType } from 'react-querybuilder';
+import { QueryBuilder, formatQuery } from 'react-querybuilder';
+import { parseCEL } from 'react-querybuilder/parseCEL';
+
+import '@testing-library/jest-dom';
+import { act, render, screen } from '@testing-library/react';
+
+import type { PathInfo } from '@/types';
+
+import { WfoOperatorSelector } from './WfoOperatorSelector';
+import { WfoValueEditor } from './WfoValueEditor';
+
+jest.mock('@/hooks', () => ({
+  useWithOrchestratorTheme: () => ({}),
+}));
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+const LLDP_PATH_INFO = {
+  path: 'lldp',
+  type: 'boolean',
+  operators: ['eq', 'neq'],
+  value_schema: {},
+  group: 'leaf',
+  ui_types: ['boolean'],
+} as unknown as PathInfo;
+
+const SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP: Record<string, string> = {
+  eq: '=',
+  neq: '!=',
+};
+
+const mapOperators = (operators?: string[]): FullOperator[] =>
+  (operators ?? []).map((operator) => {
+    const rqbOperator = SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP[operator] ?? operator;
+    return { name: rqbOperator, label: rqbOperator, value: rqbOperator };
+  });
+
+const FieldSelectorStub = ({ value }: FieldSelectorProps) => <span data-testid="field">{value}</span>;
+
+// Circuit breaker: records query updates and stops propagating them after a threshold
+// so a render loop terminates and can be inspected instead of hanging the test.
+const queryChangeLog: string[] = [];
+
+const Harness = ({ initialCel = 'lldp == true' }: { initialCel?: string }) => {
+  // Page-like state: rule group parsed from the URL's CEL string (rules have no ids).
+  const [query, setQuery] = useState<RuleGroupType>(() => parseCEL(initialCel));
+  const [, setFilterString] = useState<string>(initialCel);
+
+  // WfoFilterBuilder-like state, with the async field resolution simulated: the maps
+  // are empty on mount and get lldp's path info after a tick.
+  const [fieldToOperatorMap, setFieldToOperatorMap] = useState<Map<string, string[]>>(new Map());
+  const [fieldPathInfoMap, setFieldPathInfoMap] = useState<Map<string, PathInfo>>(new Map());
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setFieldToOperatorMap(new Map([['lldp', LLDP_PATH_INFO.operators]]));
+      setFieldPathInfoMap(new Map([['lldp', LLDP_PATH_INFO]]));
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <QueryBuilder
+      query={query}
+      enableMountQueryChange={false}
+      onQueryChange={(ruleGroup: RuleGroupType) => {
+        queryChangeLog.push(JSON.stringify(ruleGroup));
+        if (queryChangeLog.length > 20) return;
+        // Mirrors WfoSearchPocPage.onUpdateQueryBuilder
+        setQuery({ ...ruleGroup });
+        setFilterString(formatQuery({ ...ruleGroup }, { format: 'cel', fallbackExpression: '' }));
+      }}
+      context={{
+        fieldPathInfoMap,
+        onFieldSelected: () => {},
+      }}
+      getOperators={(field) => mapOperators(fieldToOperatorMap.get(field))}
+      controlElements={{
+        fieldSelector: FieldSelectorStub,
+        operatorSelector: WfoOperatorSelector,
+        valueEditor: WfoValueEditor,
+        valueSourceSelector: null,
+      }}
+      resetOnFieldChange={false}
+    />
+  );
+};
+
+describe('URL restore with async path info resolution', () => {
+  it('settles without a render loop once the path info resolves', async () => {
+    render(<Harness />);
+
+    // Flush the simulated resolution plus any follow-up effect cascades.
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(screen.getByTestId('field')).toHaveTextContent('lldp');
+    // The resolved boolean ui type must render the boolean editor for the restored rule
+    expect(screen.getByRole('button', { name: 'True' })).toBeInTheDocument();
+    // Nothing about the restored rule changed, so no query updates should have fired
+    expect(queryChangeLog).toEqual([]);
+  });
+
+  it('does not flash a value source selector while a literal is half-typed', async () => {
+    // 'fals' parses as an identifier, giving the rule valueSource 'field'; without the
+    // valueSourceSelector override the default selector appears next to the editor.
+    render(<Harness initialCel="lldp == fals" />);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(document.querySelector('[data-testid="value-source-selector"]')).not.toBeInTheDocument();
+  });
+});

package/src/components/WfoTable/WfoStructuredSearchTable/WfoValueEditor.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { ValueEditorProps } from 'react-querybuilder';
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import type { PathInfo } from '@/types';
+
+import { WfoValueEditor } from './WfoValueEditor';
+
+jest.mock('@/hooks', () => ({
+  useWithOrchestratorTheme: () => ({}),
+}));
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+const BOOLEAN_PATH_INFO = { ui_types: ['boolean'] } as PathInfo;
+
+const renderBooleanValueEditor = (value: unknown, handleOnChange = jest.fn()) => {
+  render(
+    <WfoValueEditor
+      {...({
+        field: 'lldp',
+        operator: '=',
+        value,
+        handleOnChange,
+        className: 'rule-value',
+        context: { fieldPathInfoMap: new Map([['lldp', BOOLEAN_PATH_INFO]]) },
+      } as unknown as ValueEditorProps)}
+    />,
+  );
+  return handleOnChange;
+};
+
+describe('WfoValueEditor boolean editor', () => {
+  it('commits the default true on mount for a freshly selected field without a value', () => {
+    const handleOnChange = renderBooleanValueEditor('');
+
+    expect(handleOnChange).toHaveBeenCalledWith(true);
+    expect(screen.getByRole('button', { name: 'True', pressed: true })).toBeInTheDocument();
+  });
+
+  it('does not re-commit a restored boolean value', () => {
+    const handleOnChange = renderBooleanValueEditor(false);
+
+    expect(handleOnChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: 'False', pressed: true })).toBeInTheDocument();
+  });
+
+  it('does not overwrite a half-typed literal from the filter string textarea', () => {
+    // While the user edits `lldp == false` in the textarea, intermediate states like
+    // `lldp == fals` parse to a non-boolean value. Committing a normalized boolean here
+    // would echo back into the filter string and snap the textarea back mid-edit.
+    const handleOnChange = renderBooleanValueEditor('fals');
+
+    expect(handleOnChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/WfoTable/WfoStructuredSearchTable/WfoValueEditor.tsx

@@ -24,12 +24,30 @@ enum UiFieldType {
   datetime = 'datetime',
 }
 
-const BooleanEditor = ({ handleOnChange, value: currentValue = true }: EditorInputFieldProps<boolean>) => {
-  const [value, setValue] = useState<string>(currentValue.toString());
+// The value is only a boolean for rules committed by this editor; a rule parsed from a
+// CEL string can carry anything, e.g. a half-typed literal ('fals') or a quoted string.
+const BooleanEditor = ({
+  handleOnChange,
+  value: currentValue,
+}: EditorInputFieldProps<boolean | string | undefined>) => {
+  // A restored query (URL / filter string) delivers a real boolean; anything else —
+  // a freshly selected field ('') or a value left behind by another editor — means
+  // there is no boolean value yet and the editor starts at its default, true.
+  const initialValue = typeof currentValue === 'boolean' ? currentValue : true;
+  const [value, setValue] = useState<string>(initialValue.toString());
 
   useEffect(() => {
-    handleOnChange(true);
-    // Sets the initial value to true so we allow empty dep array here
+    // Commit the default only for a rule without a value yet (a freshly selected field)
+    // so it is complete without user interaction. Any other value belongs to someone
+    // else and is left alone: a boolean restored from CEL has nothing to commit (and
+    // committing anyway loops when the query update remounts this editor), and the
+    // half-typed literal of a CEL string being edited in the textarea ('fals') must not
+    // be overwritten — the commit would echo a normalized boolean back into the filter
+    // string, snapping the textarea back mid-edit.
+    if (currentValue === undefined || currentValue === '') {
+      handleOnChange(initialValue);
+    }
+    // Only on mount: currentValue is this editor's own output after that
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/components/WfoTable/WfoStructuredSearchTable/utils.spec.ts

@@ -0,0 +1,56 @@
+import type { RuleGroupType, RuleType } from 'react-querybuilder';
+import { formatQuery } from 'react-querybuilder';
+
+import { collectRuleFields, parseCelToRuleGroup } from './utils';
+
+describe('parseCelToRuleGroup', () => {
+  it('assigns ids to the parsed group and rules so rule identity stays stable', () => {
+    const ruleGroup = parseCelToRuleGroup('lldp == true && port.speed > 1000');
+
+    expect(ruleGroup?.id).toBeTruthy();
+    expect(ruleGroup?.rules).toHaveLength(2);
+    ruleGroup?.rules.forEach((rule) => {
+      expect((rule as RuleType).id).toBeTruthy();
+    });
+  });
+
+  it('returns undefined for strings that do not parse to rules', () => {
+    expect(parseCelToRuleGroup('')).toBeUndefined();
+    expect(parseCelToRuleGroup('not valid cel ===')).toBeUndefined();
+  });
+
+  it('drops the field value source parseCEL assigns to bare identifiers, keeping values quoted', () => {
+    // parseCEL reads the bare identifier as a field reference (valueSource 'field').
+    // Left in place, formatQuery would render the value unquoted: `lldp == fals`.
+    const ruleGroup = parseCelToRuleGroup('lldp == fals');
+
+    expect(ruleGroup).toBeDefined();
+    expect((ruleGroup?.rules[0] as RuleType).valueSource).toBeUndefined();
+    expect(formatQuery(ruleGroup as RuleGroupType, { format: 'cel', fallbackExpression: '' })).toBe('lldp == "fals"');
+  });
+});
+
+describe('collectRuleFields', () => {
+  it('collects unique fields from rules, including nested groups', () => {
+    const ruleGroup: RuleGroupType = {
+      combinator: 'and',
+      rules: [
+        { field: 'lldp', operator: '=', value: true },
+        { field: 'subscription.status', operator: '=', value: 'active' },
+        {
+          combinator: 'or',
+          rules: [
+            { field: 'lldp', operator: '=', value: false },
+            { field: 'port.speed', operator: '>', value: 1000 },
+          ],
+        },
+      ],
+    };
+
+    expect(collectRuleFields(ruleGroup)).toEqual(['lldp', 'subscription.status', 'port.speed']);
+  });
+
+  it('returns an empty list for a group without rules', () => {
+    expect(collectRuleFields({ combinator: 'and', rules: [] })).toEqual([]);
+  });
+});

package/src/components/WfoTable/WfoStructuredSearchTable/utils.ts

@@ -1,13 +1,52 @@
 import type { RuleGroupType } from 'react-querybuilder';
+import { prepareRuleGroup } from 'react-querybuilder';
 import { parseCEL } from 'react-querybuilder/parseCEL';
 
+/** Collects the unique field names used by the rules of a rule group, including nested groups. */
+export const collectRuleFields = (ruleGroup: RuleGroupType): string[] => {
+  const fields = ruleGroup.rules.flatMap((rule) => {
+    if (typeof rule === 'string') {
+      return [];
+    }
+    if ('rules' in rule) {
+      return collectRuleFields(rule);
+    }
+    return [rule.field];
+  });
+  return [...new Set(fields)];
+};
+
+// The filter builder has no field-to-field comparisons: a 'field' value source only
+// appears when parseCEL reads a bare identifier (e.g. the half-typed literal in
+// `lldp == fals`) as a field reference. If it stays on the rule it survives later field
+// and value edits (resetOnFieldChange is off and the value editors only set the value),
+// and formatQuery renders the value of such a rule unquoted — producing invalid CEL like
+// `subscription.end_date == 2026-07-05T22:00:00.000Z` once a string value is committed.
+const dropFieldValueSources = (ruleGroup: RuleGroupType): RuleGroupType => ({
+  ...ruleGroup,
+  rules: ruleGroup.rules.map((rule) => {
+    if (typeof rule === 'string' || 'rules' in rule) {
+      return typeof rule === 'string' ? rule : dropFieldValueSources(rule);
+    }
+    if (rule.valueSource === 'field') {
+      const ruleWithoutValueSource = { ...rule };
+      delete ruleWithoutValueSource.valueSource;
+      return ruleWithoutValueSource;
+    }
+    return rule;
+  }),
+});
+
 export const parseCelToRuleGroup = (celString: string): RuleGroupType | undefined => {
   if (!celString) {
     return undefined;
   }
   try {
     const ruleGroup = parseCEL(celString);
-    return ruleGroup?.rules?.length > 0 ? ruleGroup : undefined;
+    // prepareRuleGroup assigns the rule ids parseCEL leaves out. Without stable ids the
+    // QueryBuilder regenerates them on every query prop change, remounting all rules —
+    // which loses editor state and can loop with editors that commit a value on mount.
+    return ruleGroup?.rules?.length > 0 ? prepareRuleGroup(dropFieldValueSources(ruleGroup)) : undefined;
   } catch {
     return undefined;
   }

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.3';