@orchestrator-ui/orchestrator-ui-components 8.7.1 → 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.1",
+  "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/WfoFieldSelector.tsx

@@ -85,7 +85,7 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
       ?? paths.find((path) => path.availablePaths?.includes(selectedValue));
     const operators = matchingPath?.operators ?? prefilledFieldOptions.get(selectedValue) ?? [];
 
-    context?.onFieldSelected?.(selectedValue, operators);
+    context?.onFieldSelected?.(selectedValue, operators, matchingPath);
   };
 
   const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {

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,9 +8,9 @@ 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 type { FieldToOperatorMap } from '@/types';
+import { useFieldsPathInfo, useWithOrchestratorTheme } from '@/hooks';
+import { EntityKind, OperatorDisplay } from '@/types';
+import type { FieldToOperatorMap, PathInfo } from '@/types';
 
 import { WfoFieldSelector } from './WfoFieldSelector';
 import { WfoInlineCombinator } from './WfoInlineCombinator';
@@ -20,9 +20,13 @@ 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.
+// has_component/not_has_component ride on notNull/null: they survive the CEL round trip
+// (`field != null` / `field == null`) and formatQuery(elasticsearch) turns them into
+// exists / must_not-exists, which the backend translates to component-presence filters.
 const SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP: Record<string, string> = {
   eq: '=',
   neq: '!=',
@@ -32,8 +36,13 @@ const SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP: Record<string, string> = {
   gte: '>=',
   between: 'between',
   like: 'contains',
+  has_component: 'notNull',
+  not_has_component: 'null',
 };
 
+// Operators without a value; marking them unary makes react-querybuilder's Rule hide the value editor.
+const RQB_UNARY_OPERATORS = ['null', 'notNull'];
+
 const OPERATOR_MAP: Record<string, OperatorDisplay> = {
   eq: { symbol: '=', description: 'equals' },
   neq: { symbol: '≠', description: 'not equals' },
@@ -47,10 +56,6 @@ const OPERATOR_MAP: Record<string, OperatorDisplay> = {
   like: { symbol: '∋', description: 'contains' },
 };
 
-/* TODO: Add the missing operators
-['has_component', 'not_has_component'];
- */
-
 interface WfoFilterBuilderProps {
   filterString?: string;
   onUpdateFilterString: (filterString: string) => void;
@@ -87,13 +92,21 @@ export const WfoFilterBuilder = ({
     return (operators ?? []).map((operator) => {
       const { symbol, description } = OPERATOR_MAP[operator] || { symbol: operator, description: operator };
       const rqbOperator = SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP[operator] ?? operator;
-      return { name: rqbOperator, label: `${symbol} ${description}`, value: rqbOperator };
+      return {
+        name: rqbOperator,
+        label: `${symbol} ${description}`,
+        value: rqbOperator,
+        ...(RQB_UNARY_OPERATORS.includes(rqbOperator) && { arity: 'unary' }),
+      };
     });
   };
 
   const t = useTranslations('common');
   const { queryBuilderContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   const [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(prefilledFieldOptions);
+  // Path info per selected field, so the value editor can pick a typed editor (date picker,
+  // number input, boolean toggle or range editor)
+  const [fieldPathInfoMap, setFieldPathInfoMap] = useState<Map<string, PathInfo>>(new Map());
 
   // Enter in a value editor commits its value on blur, and that state update has not
   // flushed yet when the search runs in the same keydown. onQueryChange fires
@@ -106,12 +119,38 @@ export const WfoFilterBuilder = ({
     handleSearch({ ruleGroup: latestRuleGroupRef.current });
   };
 
-  const handleFieldSelected = (field: string, operators: string[]) => {
+  const handleFieldSelected = (field: string, operators: string[], pathInfo?: PathInfo) => {
     setFieldToOperatorMap((previousMap) => {
       return new Map(previousMap).set(field, operators);
     });
+    if (pathInfo) {
+      setFieldPathInfoMap((previousMap) => {
+        return new Map(previousMap).set(field, pathInfo);
+      });
+    }
   };
 
+  // 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'}>
@@ -126,6 +165,7 @@ export const WfoFilterBuilder = ({
             context={{
               onFieldSelected: handleFieldSelected,
               prefilledFieldOptions,
+              fieldPathInfoMap,
               onValueEditorEnter: handleValueEditorEnter,
             }}
             getOperators={(field) => {
@@ -144,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

@@ -7,11 +7,28 @@ import { EuiSelect } from '@elastic/eui';
 const isOptionGroup = (operator: FullOperator | OptionGroup<FullOperator>): operator is OptionGroup<FullOperator> =>
   'options' in operator;
 
+// The search backend has no is-null operator: null/notNull only occur here as the
+// react-querybuilder encoding of the component-presence operators, so a restored rule
+// should label them accordingly instead of using defaultOperators' "is (not) null".
+const FALLBACK_OPERATOR_LABELS: Record<string, string> = {
+  notNull: '✓ has component',
+  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(
@@ -26,25 +43,47 @@ 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.
   const currentValueIsListed = !value || selectOptions.some((option) => option.value === value);
   const displayOptions =
     currentValueIsListed ? selectOptions : (
-      [...selectOptions, { value, text: defaultOperators.find((operator) => operator.name === value)?.label ?? value }]
+      [
+        ...selectOptions,
+        {
+          value,
+          text:
+            FALLBACK_OPERATOR_LABELS[value]
+            ?? defaultOperators.find((operator) => operator.name === value)?.label
+            ?? value,
+        },
+      ]
     );
 
   return (

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

@@ -1,64 +1,52 @@
 import React, { useEffect, useState } from 'react';
+import type { ValueEditorProps } from 'react-querybuilder';
 
 import { EuiFlexGroup } from '@elastic/eui';
 
-export interface WfoRangeElementProps {
-  handleOnChange: (value: string | number | undefined, rangeIndex?: number) => void;
-  value: string;
-  operator?: string;
-  rangeIndex?: number;
-}
+import type { EditorComponent } from './WfoValueEditor';
 
 interface WfoRangeEditorProps {
-  handleOnChange: (value: string | number | undefined, rangeIndex?: number) => void;
-  operator: string;
+  handleOnChange: ValueEditorProps['handleOnChange'];
   value: string;
-  Element: React.ComponentType<WfoRangeElementProps>;
+  InputElement: EditorComponent;
 }
 
-export const WfoRangeEditor = ({ handleOnChange, operator, Element, value: currentValue }: WfoRangeEditorProps) => {
-  const [currentOperator, setCurrentOperator] = useState(operator);
+export const WfoRangeEditor = ({ handleOnChange, InputElement, value: currentValue }: WfoRangeEditorProps) => {
   const startValue = currentValue ? currentValue?.toString().split(',') : [];
-  const [value, setValue] = useState<string[]>(startValue);
+  const [value, setValue] = useState<(string | undefined)[]>(startValue);
+
+  const handleRangeChange = (newValue: string | number | boolean | undefined, rangeIndex: number) => {
+    setValue((currentValues) => {
+      const next = [...currentValues];
+      const isCleared = newValue === undefined || (typeof newValue === 'number' && Number.isNaN(newValue));
+      next[rangeIndex] = isCleared ? undefined : String(newValue);
+      return next;
+    });
+  };
 
+  // Notify the parent only when both ends of the range hold a value
   useEffect(() => {
-    if (operator !== currentOperator && (operator === 'between' || currentOperator === 'between')) {
-      setValue([]);
-      handleOnChange('');
-      setCurrentOperator(operator);
-    }
-  }, [currentOperator, handleOnChange, operator]);
-
-  const handleChange = (value: string | number | undefined, rangeIndex: number = 0) => {
-    if (operator === 'between') {
-      setValue((currentDates) => {
-        // remove value if set to undefined
-        if (value === null) {
-          return currentDates.filter((_, index) => index !== rangeIndex);
-        }
-        // add value at supplied index
-        currentDates[rangeIndex] = value as string;
-
-        // call the parent if 2 values are present
-        if (currentDates.length === 2) {
-          handleOnChange(`${currentDates[0]},${currentDates[1]}`);
-        }
-
-        return currentDates;
-      });
-    } else {
-      handleOnChange(value);
+    if (value[0] !== undefined && value[1] !== undefined) {
+      handleOnChange(`${value[0]},${value[1]}`);
     }
-  };
-
-  if (operator === 'between') {
-    return (
-      <EuiFlexGroup direction="row" gutterSize="s">
-        <Element handleOnChange={handleChange} rangeIndex={0} value={value[0]} />
-        <Element handleOnChange={handleChange} rangeIndex={1} value={value[1]} />
-      </EuiFlexGroup>
-    );
-  }
-
-  return <Element handleOnChange={handleOnChange} value={value[0]} />;
+    // handleOnChange comes from react-querybuilder and is not referentially stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <EuiFlexGroup direction="row" gutterSize="s">
+      <InputElement
+        handleOnChange={(value) => {
+          handleRangeChange(value, 0);
+        }}
+        value={value[0]}
+      />
+      <InputElement
+        handleOnChange={(value) => {
+          handleRangeChange(value, 1);
+        }}
+        value={value[1]}
+      />
+    </EuiFlexGroup>
+  );
 };

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();
+  });
+});