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

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

@@ -7,10 +7,15 @@ import { useTranslations } from 'next-intl';
 
 import { EuiButtonGroup, EuiDatePicker, EuiFieldNumber, EuiFieldText } from '@elastic/eui';
 
+import { WfoRangeEditor } from '@/components/WfoTable/WfoStructuredSearchTable/WfoRangeEditor';
 import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
-import { WfoRangeEditor, WfoRangeElementProps } from './WfoRangeEditor';
+export interface EditorInputFieldProps<T = string> {
+  handleOnChange: ValueEditorProps['handleOnChange'];
+  value: T;
+}
+export type EditorComponent = React.ComponentType<EditorInputFieldProps<ValueEditorProps['value']>>;
 
 enum UiFieldType {
   text = 'text',
@@ -19,20 +24,30 @@ enum UiFieldType {
   datetime = 'datetime',
 }
 
-export type HandleOnChange<T> = (value: T | undefined, rangeIndex?: number) => void;
-
-export interface EditorProps<T> {
-  handleOnChange: HandleOnChange<T>;
-  value: T;
-  operator?: string;
-}
-
-const BooleanEditor = ({ handleOnChange, value: currentValue = true }: EditorProps<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
   }, []);
 
@@ -65,7 +80,7 @@ const BooleanEditor = ({ handleOnChange, value: currentValue = true }: EditorPro
   );
 };
 
-const TextEditor = ({ handleOnChange, value: currentValue = '' }: EditorProps<string>) => {
+const TextEditor = ({ handleOnChange, value: currentValue = '' }: EditorInputFieldProps<string>) => {
   const [value, setValue] = useState<string>(currentValue);
 
   const handleTextChange: ChangeEventHandler<HTMLInputElement> = (e) => {
@@ -85,7 +100,7 @@ const TextEditor = ({ handleOnChange, value: currentValue = '' }: EditorProps<st
   return <EuiFieldText value={value} onChange={handleTextChange} onBlur={handleOnBlur} onKeyDown={handleOnKeyDown} />;
 };
 
-const NumberEditor = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRangeElementProps) => {
+const NumberEditor = ({ handleOnChange, value: currentValue }: EditorInputFieldProps<number>) => {
   const [value, setValue] = useState<string>(currentValue?.toString() || '');
 
   const handleNumberChange: ChangeEventHandler<HTMLInputElement> = (e) => {
@@ -94,7 +109,7 @@ const NumberEditor = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRa
 
   const handleOnBlur = () => {
     const numberValue = parseFloat(value);
-    handleOnChange(numberValue, rangeIndex);
+    handleOnChange(numberValue);
   };
 
   const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
@@ -113,7 +128,7 @@ const NumberEditor = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRa
   );
 };
 
-const DatePicker = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRangeElementProps) => {
+const DatePicker = ({ handleOnChange, value: currentValue }: EditorInputFieldProps<string>) => {
   const [date, setDate] = useState<string>(currentValue || '');
   const t = useTranslations('search.page');
 
@@ -123,9 +138,8 @@ const DatePicker = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRang
       onChange={(date) => {
         const utcDate = date ? moment.utc(date) : undefined;
         setDate(utcDate?.toISOString() || '');
-        handleOnChange(utcDate?.toISOString(), rangeIndex);
+        handleOnChange(utcDate?.toISOString());
       }}
-      id={rangeIndex ? `date-range-${rangeIndex}` : 'date-range'}
       css={{ width: '330px' }}
       showTimeSelect
       dateFormat="yyyy-MM-dd HH:mm"
@@ -145,27 +159,36 @@ export const WfoValueEditor = ({
   value,
   className,
 }: ValueEditorProps) => {
+  // For components that don't take a value in addition to an operator - for example where you
+  // only choose 'Has component' or 'Does not have component' - the WfoValueEditor should not be rendered.
+  // React-query-builder handles this by default by setting the unary constant in the getOperators
+  // property of the QueryBuilder component (see WfoFilterBuilder)
+  // Because this check might not have run yet when the query is rebuild from an URL
+  // we make the check explicitly here aswell.
+  if (operator === 'null' || operator === 'notNull') {
+    return null;
+  }
+
+  const getComponentByType = (): EditorComponent => {
+    if (uiFieldType === UiFieldType.boolean) return BooleanEditor;
+    if (uiFieldType === UiFieldType.datetime) return DatePicker;
+    if (uiFieldType === UiFieldType.number) return NumberEditor;
+    return TextEditor;
+  };
+
   const fieldPathInfoMap = context?.fieldPathInfoMap;
 
   const fieldInfo = fieldPathInfoMap && fieldPathInfoMap.has(fieldName) ? fieldPathInfoMap.get(fieldName) : undefined;
-  const uiFieldType = fieldInfo?.ui_types[0] || UiFieldType.text;
+  const uiFieldType = fieldInfo?.ui_types?.[0] || UiFieldType.text;
 
   const getEditor = () => {
-    if (uiFieldType === UiFieldType.boolean) {
-      return <BooleanEditor handleOnChange={handleOnChange} value={value} />;
-    }
-
-    if (uiFieldType === UiFieldType.datetime) {
-      return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={DatePicker} value={value} />;
-    }
+    const InputElement = getComponentByType();
 
-    if (uiFieldType === UiFieldType.number) {
-      return (
-        <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={NumberEditor} value={value} />
-      );
+    if (operator === 'between') {
+      return <WfoRangeEditor handleOnChange={handleOnChange} value={value} InputElement={InputElement} />;
     }
 
-    return <TextEditor handleOnChange={handleOnChange} value={value} />;
+    return <InputElement handleOnChange={handleOnChange} value={value} />;
   };
 
   const handleWrapperKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {

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.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.3';

package/src/hooks/usePathAutoComplete.spec.tsx

@@ -0,0 +1,64 @@
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { EntityKind } from '@/types';
+
+import { useFieldsPathInfo } from './usePathAutoComplete';
+
+const fetchPathsMock = jest.fn();
+
+jest.mock('@/rtk/endpoints', () => ({
+  useSearchPathsQuery: jest.fn(),
+  useLazySearchPathsQuery: () => [fetchPathsMock],
+  useSearchDefinitionsQuery: () => ({
+    data: {
+      boolean: {
+        operators: ['eq', 'neq'],
+        value_schema: { eq: { kind: 'boolean' }, neq: { kind: 'boolean' } },
+      },
+    },
+    isError: false,
+  }),
+}));
+
+describe('useFieldsPathInfo', () => {
+  beforeEach(() => {
+    fetchPathsMock.mockImplementation(({ q }: { q: string }) => ({
+      unwrap: () =>
+        Promise.resolve(
+          q === 'lldp' ?
+            { leaves: [{ name: 'lldp', ui_types: ['boolean'], paths: [] }], components: [] }
+          : { leaves: [], components: [] },
+        ),
+    }));
+  });
+
+  it('resolves the path info of an exactly matching leaf', async () => {
+    const { result } = renderHook(() => useFieldsPathInfo(['lldp'], EntityKind.SUBSCRIPTION));
+
+    await waitFor(() => expect(result.current.get('lldp')).toBeTruthy());
+    expect(result.current.get('lldp')).toMatchObject({
+      path: 'lldp',
+      ui_types: ['boolean'],
+      operators: ['eq', 'neq'],
+    });
+  });
+
+  it('stores null for a field the backend does not know', async () => {
+    const { result } = renderHook(() => useFieldsPathInfo(['nonexistent'], EntityKind.SUBSCRIPTION));
+
+    await waitFor(() => expect(result.current.has('nonexistent')).toBe(true));
+    expect(result.current.get('nonexistent')).toBeNull();
+  });
+
+  it('looks up each field at most once across rerenders', async () => {
+    const { result, rerender } = renderHook(({ fields }) => useFieldsPathInfo(fields, EntityKind.SUBSCRIPTION), {
+      initialProps: { fields: ['lldp'] },
+    });
+
+    await waitFor(() => expect(result.current.has('lldp')).toBe(true));
+    rerender({ fields: ['lldp'] });
+    rerender({ fields: ['lldp'] });
+
+    expect(fetchPathsMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/usePathAutoComplete.ts

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
-import { EntityKind, PathInfo, value_schema } from '@/types';
+import { useLazySearchPathsQuery, useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
+import { EntityKind, PathAutocompleteResponse, PathInfo, value_schema } from '@/types';
 
 import { useDebounce } from './useDebounce';
 
@@ -50,6 +50,52 @@ const FALLBACK_DEFINITIONS: Record<
   },
 };
 
+type SearchDefinitions = typeof FALLBACK_DEFINITIONS;
+
+const mapPathAutocompleteResponseToPathInfos = (
+  pathData: PathAutocompleteResponse,
+  definitions: SearchDefinitions,
+): PathInfo[] => {
+  const enrichedPaths: PathInfo[] = [];
+
+  // Process leaves first
+  (pathData.leaves || []).forEach((leaf) => {
+    const primaryType = leaf.ui_types[0] || 'string';
+    const typeDefinition = definitions[primaryType];
+
+    enrichedPaths.push({
+      path: leaf.name,
+      type: primaryType as 'string' | 'number' | 'datetime' | 'boolean',
+      operators: typeDefinition?.operators || [],
+      value_schema: typeDefinition?.value_schema || {},
+      group: 'leaf',
+      displayLabel: leaf.name,
+      ui_types: leaf.ui_types,
+      availablePaths: leaf.paths || [],
+      pathCount: leaf.paths ? leaf.paths?.length : 0,
+    });
+  });
+
+  (pathData.components || []).forEach((component) => {
+    const primaryType = component.ui_types[0] || 'string';
+    const typeDefinition = definitions[primaryType];
+
+    enrichedPaths.push({
+      path: component.name,
+      type: 'component',
+      operators: typeDefinition?.operators || [],
+      value_schema: typeDefinition?.value_schema || {},
+      group: 'component',
+      displayLabel: component.name,
+      ui_types: component.ui_types,
+      availablePaths: component.paths || [],
+      pathCount: component.paths ? component.paths?.length : 0,
+    });
+  });
+
+  return enrichedPaths;
+};
+
 export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
   const [paths, setPaths] = useState<PathInfo[]>([]);
   const debouncedPrefix = useDebounce(prefix, 300);
@@ -71,44 +117,7 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
       return;
     }
 
-    const enrichedPaths: PathInfo[] = [];
-
-    // Process leaves first
-    (pathData.leaves || []).forEach((leaf) => {
-      const primaryType = leaf.ui_types[0] || 'string';
-      const typeDefinition = definitions[primaryType];
-
-      enrichedPaths.push({
-        path: leaf.name,
-        type: primaryType as 'string' | 'number' | 'datetime' | 'boolean',
-        operators: typeDefinition?.operators || [],
-        value_schema: typeDefinition?.value_schema || {},
-        group: 'leaf',
-        displayLabel: leaf.name,
-        ui_types: leaf.ui_types,
-        availablePaths: leaf.paths || [],
-        pathCount: leaf.paths ? leaf.paths?.length : 0,
-      });
-    });
-
-    (pathData.components || []).forEach((component) => {
-      const primaryType = component.ui_types[0] || 'string';
-      const typeDefinition = definitions[primaryType];
-
-      enrichedPaths.push({
-        path: component.name,
-        type: 'component',
-        operators: typeDefinition?.operators || [],
-        value_schema: typeDefinition?.value_schema || {},
-        group: 'component',
-        displayLabel: component.name,
-        ui_types: component.ui_types,
-        availablePaths: component.paths || [],
-        pathCount: component.paths ? component.paths?.length : 0,
-      });
-    });
-
-    setPaths(enrichedPaths);
+    setPaths(mapPathAutocompleteResponseToPathInfos(pathData, definitions));
   }, [pathData, definitions, debouncedPrefix?.length]);
 
   const errorMessage =
@@ -118,3 +127,51 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
 
   return { paths, loading: isLoading, error: errorMessage };
 };
+
+/**
+ * Resolves PathInfo for exact field paths that were never picked through the field
+ * selector, e.g. the fields of a query restored from the URL. Returns a map that gains
+ * an entry per field once its lookup settles: the matching PathInfo, or null when the
+ * backend does not know the path. Each field is looked up at most once.
+ */
+export const useFieldsPathInfo = (fields: string[], entityType: EntityKind) => {
+  const [fieldsPathInfo, setFieldsPathInfo] = useState<Map<string, PathInfo | null>>(new Map());
+  const requestedFieldsRef = useRef<Set<string>>(new Set());
+  const [fetchPaths] = useLazySearchPathsQuery();
+  const { data: definitions, isError: definitionsFailed } = useSearchDefinitionsQuery();
+
+  // Wait for the definitions request to settle so resolved fields get the backend's
+  // operator lists instead of the fallback ones.
+  const settledDefinitions = definitions ?? (definitionsFailed ? FALLBACK_DEFINITIONS : undefined);
+
+  useEffect(() => {
+    // Changing entity type invalidates previous lookups.
+    requestedFieldsRef.current = new Set();
+    setFieldsPathInfo(new Map());
+  }, [entityType]);
+
+  useEffect(() => {
+    if (!settledDefinitions) {
+      return;
+    }
+    const newFields = fields.filter((field) => field && !requestedFieldsRef.current.has(field));
+    newFields.forEach((field) => {
+      requestedFieldsRef.current.add(field);
+      fetchPaths({ q: field, entity_type: entityType }, true)
+        .unwrap()
+        .then((pathData) => {
+          const pathInfos = mapPathAutocompleteResponseToPathInfos(pathData, settledDefinitions);
+          const match =
+            pathInfos.find((pathInfo) => pathInfo.path === field)
+            ?? pathInfos.find((pathInfo) => pathInfo.availablePaths?.includes(field));
+          setFieldsPathInfo((previous) => new Map(previous).set(field, match ?? null));
+        })
+        .catch(() => {
+          // Allow a retry on a later render, e.g. after a transient network error.
+          requestedFieldsRef.current.delete(field);
+        });
+    });
+  }, [fields, entityType, fetchPaths, settledDefinitions]);
+
+  return fieldsPathInfo;
+};

package/src/pages/WfoSearchPocPage.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { RuleGroupType } from 'react-querybuilder';
 import { formatQuery } from 'react-querybuilder/formatQuery';
-import { parseCEL } from 'react-querybuilder/parseCEL';
 
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -389,21 +388,19 @@ export const WfoSearchPocPage = () => {
   };
 
   const safeCelParse = useCallback((celString: string) => {
-    try {
-      const ruleGroup = parseCEL(celString);
-      if (celString === '') {
-        setIsValidFilterString(true);
-      } else if (ruleGroup?.rules?.length > 0) {
-        // parseCEL returns a query object — check if it has any rules
-        setIsValidFilterString(true);
-        setQueryBuilderRuleGroup(ruleGroup);
-      } else {
-        // If there are no rules created based on this string then
-        // we assume the string is not valid. In any case it will not do anything
-        // to the search results
-        setIsValidFilterString(false);
-      }
-    } catch {
+    if (celString === '') {
+      setIsValidFilterString(true);
+      return;
+    }
+    // parseCelToRuleGroup returns undefined when the string parses to no rules — in that
+    // case we assume the string is not valid. In any case it would not do anything to the
+    // search results. It also assigns the rule ids parseCEL leaves out, which the query
+    // builder needs to keep rule identity stable across query updates.
+    const ruleGroup = parseCelToRuleGroup(celString);
+    if (ruleGroup) {
+      setIsValidFilterString(true);
+      setQueryBuilderRuleGroup(ruleGroup);
+    } else {
       setIsValidFilterString(false);
     }
   }, []);
@@ -448,7 +445,11 @@ export const WfoSearchPocPage = () => {
         setIsValidFilterString(true);
       } else {
         setFilterString(celQuery);
-        setIsValidFilterString(true);
+        // formatQuery output is normally valid CEL, but not unconditionally — a rule can
+        // hold state formatQuery renders as unparseable CEL (e.g. a 'field' value source
+        // renders its value unquoted). Validate the round trip so the invalid marker and
+        // the Apply button track what the textarea actually shows.
+        setIsValidFilterString(!!parseCelToRuleGroup(celQuery));
       }
     }
   };

package/src/rtk/endpoints/search.ts

@@ -112,5 +112,6 @@ export const {
   useLazySearchQuery,
   useSearchWithPaginationMutation,
   useSearchPathsQuery,
+  useLazySearchPathsQuery,
   useSearchDefinitionsQuery,
 } = searchApi;