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

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.8.1",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {

package/src/components/WfoBadges/WfoWorkflowTargetBadge/WfoWorkflowTargetBadge.tsx

@@ -13,11 +13,11 @@ export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({ target
   const { theme, toSecondaryColor } = useOrchestratorTheme();
   if (!target) return null;
 
-  const getBadgeColorFromTarget = (_target: string) => {
+  const getBadgeColorFromTarget = (_target: WorkflowTarget) => {
     const { primary, danger, textDanger, textPrimary, success, textSuccess, warning, textWarning, accent, textAccent } =
       theme.colors;
 
-    switch (_target?.toLowerCase()) {
+    switch (_target) {
       case WorkflowTarget.CREATE:
         return {
           badgeColor: toSecondaryColor(success),

package/src/components/WfoContentHeader/WfoContentHeader.tsx

@@ -19,7 +19,7 @@ export const WfoContentHeader: FC<WfoContentHeaderProps> = ({ title, subtitle, c
         </WfoRenderElementOrString>
         {subtitle && (
           <div>
-            <EuiSpacer size="m" />
+            <EuiSpacer size="s" />
             <WfoRenderElementOrString>{subtitle}</WfoRenderElementOrString>
           </div>
         )}

package/src/components/WfoInlineNoteEdit/WfoProcessListNoteEdit.spec.tsx

@@ -0,0 +1,35 @@
+/**
+ * Regression tests for the note column going stale while paginating: the table reuses row
+ * components across pages, and EuiInlineEditText only follows its value prop while the value
+ * is truthy. A row whose note is empty must therefore still pass a truthy value (the
+ * invisible character), otherwise the cell keeps showing the previous page's note.
+ */
+import React from 'react';
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import { WfoProcessListNoteEdit } from './WfoProcessListNoteEdit';
+
+jest.mock('@/rtk', () => ({
+  ...jest.requireActual('@/rtk'),
+  usePatchProcessMutation: () => [jest.fn()],
+}));
+
+describe('WfoProcessListNoteEdit', () => {
+  it('stops showing the previous note when the reused row has no note', () => {
+    const { rerender } = render(<WfoProcessListNoteEdit processId="process-1" note="Note from page one" />);
+    expect(screen.getByText('Note from page one')).toBeInTheDocument();
+
+    rerender(<WfoProcessListNoteEdit processId="process-2" note={null} />);
+    expect(screen.queryByText('Note from page one')).not.toBeInTheDocument();
+  });
+
+  it('shows the new note when the reused row has a different note', () => {
+    const { rerender } = render(<WfoProcessListNoteEdit processId="process-1" note="Note from page one" />);
+
+    rerender(<WfoProcessListNoteEdit processId="process-2" note="Note from page two" />);
+    expect(screen.getByText('Note from page two')).toBeInTheDocument();
+    expect(screen.queryByText('Note from page one')).not.toBeInTheDocument();
+  });
+});

package/src/components/WfoInlineNoteEdit/WfoProcessListNoteEdit.tsx

@@ -1,8 +1,9 @@
 import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { usePatchProcessMutation } from '@/rtk';
 import { ProcessDetail } from '@/types';
+import { INVISIBLE_CHARACTER } from '@/utils';
 
 import { WfoInlineEdit } from '../WfoInlineEdit';
 
@@ -13,13 +14,6 @@ interface WfoProcessDetailNoteEditProps {
 
 export const WfoProcessListNoteEdit: FC<WfoProcessDetailNoteEditProps> = ({ processId, note }) => {
   const [patchProcess] = usePatchProcessMutation();
-  const [noteValue, setNoteValue] = useState(note);
-
-  useEffect(() => {
-    if (note !== noteValue) {
-      setNoteValue(note);
-    }
-  }, [note, noteValue]);
 
   const onSaveNote = async (note: string) => {
     const noteModifyPayload = { id: processId, note: note };
@@ -27,5 +21,9 @@ export const WfoProcessListNoteEdit: FC<WfoProcessDetailNoteEditProps> = ({ proc
     return note;
   };
 
-  return <WfoInlineEdit value={noteValue?.trim() || ''} onSave={onSaveNote} />;
+  // An empty note must still be passed as a non-empty string (the invisible character):
+  // EuiInlineEditText only follows its value prop while the value is truthy, so an empty
+  // string would freeze the cell on the note of whichever row rendered here before it,
+  // e.g. when the table rows are reused while paginating.
+  return <WfoInlineEdit value={note?.trim() ? note : INVISIBLE_CHARACTER} onSave={onSaveNote} />;
 };

package/src/components/WfoProcessList/WfoProcessListDeltaPopover.tsx

@@ -28,7 +28,7 @@ export const WfoProcessListDeltaPopover: FC<WfoProcessListDeltaPopoverProps> = (
 
   const { data, isFetching } = useGetRawProcessDetailQuery({ processId }, { skip: !isPopoverOpen });
 
-  if (workflowTarget.toUpperCase() !== WorkflowTarget.MODIFY.toUpperCase()) {
+  if (workflowTarget !== WorkflowTarget.MODIFY) {
     return null;
   }
 

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -241,15 +241,17 @@ export const WfoProcessesList = ({
   const getProcessListForExport = () =>
     getProcessListTrigger(getQueryVariablesForExport(processListQueryVars)).unwrap();
 
+  const tableConfig = mapSortableAndFilterableValuesToTableColumnConfig(
+    tableColumns,
+    pageInfo?.sortFields,
+    pageInfo?.filterFields,
+  );
+
   return (
     <WfoAdvancedTable<ProcessListItem>
       queryString={queryString}
       data={mapGraphQlProcessListResultToProcessListItems(processes || [])}
-      tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
-        tableColumns,
-        pageInfo?.sortFields,
-        pageInfo?.filterFields,
-      )}
+      tableColumnConfig={tableConfig}
       dataSorting={[dataSorting]}
       pagination={pagination}
       isLoading={isFetching}

package/src/components/WfoSubscription/WfoProcessesTimeline.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import { EuiComment, EuiCommentList, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiComment, EuiCommentList, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch, EuiText } from '@elastic/eui';
 
 import {
   PATH_TASKS,
@@ -15,7 +15,7 @@ import {
   sortProcessesByDate,
 } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { SortOrder, SubscriptionDetailProcess } from '@/types';
+import { SortOrder, SubscriptionDetailProcess, WorkflowTarget } from '@/types';
 import { parseDate, parseDateToLocaleDateTimeString, upperCaseFirstChar } from '@/utils';
 
 import { WfoProcessStatusBadge } from '../WfoBadges';
@@ -122,8 +122,9 @@ export const WfoProcessesTimeline = ({ subscriptionDetailProcesses }: WfoProcess
       value: SortOrder.DESC,
     },
   ];
-
-  const [selectedOption, setSelectedOption] = React.useState(options[0]);
+  const { processToggleStyles } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
+  const [selectedOption, setSelectedOption] = useState(options[0]);
+  const [hideValidateTasks, setHideValidateTasks] = useState<boolean>(true);
 
   const handleOnSelectOption = (option: WfoRadioDropdownOption<SortOrder>) => {
     setSelectedOption(option);
@@ -135,11 +136,24 @@ export const WfoProcessesTimeline = ({ subscriptionDetailProcesses }: WfoProcess
     <>
       <EuiSpacer size={'m'} />
       {!subscriptionDetailProcesses && <WfoLoading />}
-      <WfoRadioDropdown options={options} onUpdateOption={handleOnSelectOption} selectedOption={selectedOption} />
+      <EuiFlexGroup alignItems={'center'} css={processToggleStyles}>
+        <EuiSwitch
+          showLabel={true}
+          label={t('hideValidateTasks')}
+          type="button"
+          checked={hideValidateTasks}
+          onChange={() => setHideValidateTasks((value) => !value)}
+        />
+        <WfoRadioDropdown options={options} onUpdateOption={handleOnSelectOption} selectedOption={selectedOption} />
+      </EuiFlexGroup>
+
       {sortedProcesses && (
         <EuiCommentList aria-label="Processes">
           {sortedProcesses
-            .filter((process) => !process.isTask)
+            .filter(
+              (process) =>
+                !process.isTask || (process.workflowTarget === WorkflowTarget.VALIDATE && !hideValidateTasks),
+            )
             .map((subscriptionDetailProcess, index) => (
               <WfoRenderSubscriptionProcess key={index} subscriptionDetailProcess={subscriptionDetailProcess} />
             ))}

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -18,7 +18,7 @@ import { PolicyResource } from '@/configuration/policy-resources';
 import { useOrchestratorTheme, usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
 import { useGetSubscriptionActionsQuery, useGetSubscriptionDetailQuery, useStartProcessMutation } from '@/rtk';
-import { WorkflowTarget } from '@/types';
+import { SubscriptionAction, WorkflowTarget } from '@/types';
 
 type MenuBlockProps = {
   title: string;
@@ -129,12 +129,28 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     }
   };
 
+  const getActionItems = (workflowTarget: WorkflowTarget): SubscriptionAction[] => {
+    // Core versions 5.2 and lower return subscriptionActions result with lowercase keynames. Higher version return them uppercased to align
+    // with all the other places they are used. We support both for now. The lowercase keys are deliberately not part of the
+    // SubscriptionActions type, so the fallback is a runtime-only check behind a cast.
+    const actionsByTarget = subscriptionActions as unknown as
+      | Record<string, SubscriptionAction[] | undefined>
+      | undefined;
+
+    return actionsByTarget?.[workflowTarget] ?? actionsByTarget?.[workflowTarget.toLowerCase()] ?? [];
+  };
+
+  const validateActionItems = getActionItems(WorkflowTarget.VALIDATE);
+  const reconcileActionItems = getActionItems(WorkflowTarget.RECONCILE);
+  const modifyActionItems = getActionItems(WorkflowTarget.MODIFY);
+  const terminateActionItems = getActionItems(WorkflowTarget.TERMINATE);
+
   const compactItems = (
     <>
-      {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) && subscriptionActions?.validate && (
+      {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) && validateActionItems.length > 0 && (
         <>
           {!compactMode && <MenuBlock title={t('tasks')} />}
-          {subscriptionActions.validate.map((subscriptionAction, index) => (
+          {validateActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`s_${index}`}
               subscriptionAction={subscriptionAction}
@@ -148,10 +164,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         </>
       )}
 
-      {isAllowed(SUBSCRIPTION_RECONCILE + subscriptionId) && (subscriptionActions?.reconcile?.length ?? 0) > 0 && (
+      {isAllowed(SUBSCRIPTION_RECONCILE + subscriptionId) && reconcileActionItems.length > 0 && (
         <>
           {!compactMode && <MenuBlock title={t('reconcile')} />}
-          {subscriptionActions?.reconcile.map((subscriptionAction, index) => (
+          {reconcileActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`r_${index}`}
               subscriptionAction={
@@ -183,10 +199,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
 
   const fullItems = (
     <>
-      {isAllowed(SUBSCRIPTION_MODIFY + subscriptionId) && subscriptionActions?.modify && (
+      {isAllowed(SUBSCRIPTION_MODIFY + subscriptionId) && modifyActionItems.length > 0 && (
         <>
           <MenuBlock title={t('modify')} />
-          {subscriptionActions.modify.map((subscriptionAction, index) => (
+          {modifyActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`m_${index}`}
               subscriptionAction={subscriptionAction}
@@ -201,10 +217,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         </>
       )}
       {compactItems}
-      {isAllowed(SUBSCRIPTION_TERMINATE + subscriptionId) && subscriptionActions?.terminate && (
+      {isAllowed(SUBSCRIPTION_TERMINATE + subscriptionId) && terminateActionItems.length > 0 && (
         <>
           <MenuBlock title={t('terminate')} />
-          {subscriptionActions.terminate.map((subscriptionAction, index) => (
+          {terminateActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`t_${index}`}
               subscriptionAction={subscriptionAction}

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx

@@ -67,7 +67,7 @@ export const WfoSubscriptionDetailSection = ({ subscriptionDetail }: WfoSubscrip
       key: t('lastRunValidation'),
       value: (() => {
         const lastValidate = processes?.page
-          ?.filter((process) => process.workflowTarget.toLowerCase() === WorkflowTarget.VALIDATE.toLowerCase())
+          ?.filter((process) => process.workflowTarget === WorkflowTarget.VALIDATE)
           .slice(-1)[0];
 
         if (!lastValidate) {

package/src/components/WfoSubscription/styles.ts

@@ -54,6 +54,11 @@ export const getSubscriptionDetailStyles = ({ theme, isDarkModeActive }: WfoThem
     flexDirection: 'column',
     alignItems: 'flex-start',
   });
+
+  const processToggleStyles = css({
+    justifySelf: 'flex-end',
+  });
+
   return {
     rowStyle,
     labelCellStyle,
@@ -66,5 +71,6 @@ export const getSubscriptionDetailStyles = ({ theme, isDarkModeActive }: WfoThem
     productBlockTreeWidth,
     customerDescriptionsCustomerNameStyle,
     customerDescriptionsFormStyle,
+    processToggleStyles,
   };
 };

package/src/components/WfoSubscription/utils/utils.ts

@@ -59,8 +59,7 @@ export const flattenSubscriptionActionProps = (action?: SubscriptionAction | nul
 };
 
 export const getWorkflowTargetColor = (workflowTarget: WorkflowTarget, theme: EuiThemeComputed) => {
-  // Data returned from graphql can't always be depended on to be lowercase
-  switch (workflowTarget.toLocaleLowerCase()) {
+  switch (workflowTarget) {
     case WorkflowTarget.CREATE:
       return theme.colors.textSuccess;
     case WorkflowTarget.MODIFY:
@@ -78,8 +77,7 @@ export const getWorkflowTargetColor = (workflowTarget: WorkflowTarget, theme: Eu
 };
 
 export const getWorkflowTargetIconContent = (workflowTarget: WorkflowTarget) => {
-  // Data returned from graphql can't always be depended on to be lowercase
-  switch (workflowTarget.toLocaleLowerCase()) {
+  switch (workflowTarget) {
     case WorkflowTarget.CREATE:
       return 'C';
     case WorkflowTarget.SYSTEM:

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

@@ -19,7 +19,6 @@ export const WfoExpandingSearchRow = ({ score, matchingFields }: WfoExpandingSea
 
   if (!matchingFields || matchingFields.length === 0) return null;
 
-  // Note: The row is shown on hover by the row above is as configured in the table component expandableRow config
   return (
     <tr css={hideExpandedRowStyle}>
       <td colSpan={999} css={expandingSearchRowStyles}>

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.