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

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

@@ -15,12 +15,14 @@ export type WfoSubscriptionActionExpandableMenuItemProps = {
   subscriptionAction: SubscriptionAction;
   onClickLockedRelation: (relation: SubscriptionRelation) => void;
   children: React.ReactNode;
+  subscriptionPath?: string;
 };
 
 export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionExpandableMenuItemProps> = ({
   subscriptionAction,
   onClickLockedRelation,
   children,
+  subscriptionPath = PATH_SUBSCRIPTIONS,
 }) => {
   const t = useTranslations('subscriptions.detail.actions');
 
@@ -29,18 +31,21 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
   const [isExpanded, setIsExpanded] = useState(false);
 
   // TODO: remove lockedRelationsUuids fallback when orchestrator-core 6.0.0 is released and only use the _detail variant
-  const lockedRelationsDetail = subscriptionAction.locked_relations_detail;
-  const lockedRelationsUuids = subscriptionAction.locked_relations;
-  const hasLockedRelations = (lockedRelationsDetail?.length ?? 0) > 0 || (lockedRelationsUuids?.length ?? 0) > 0;
+  const relationsDetail = [
+    ...(subscriptionAction.locked_relations_detail ?? []),
+    ...(subscriptionAction.unterminated_in_use_by_subscriptions_detail ?? []),
+  ];
+  const relationsUuids = [
+    ...(subscriptionAction.locked_relations ?? []),
+    ...(subscriptionAction.unterminated_in_use_by_subscriptions ?? []),
+  ];
+  const hasRelations = relationsDetail.length > 0 || relationsUuids.length > 0;
 
   return (
     <div>
-      <div
-        css={[expandableMenuItemStyle, hasLockedRelations && clickableStyle]}
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
+      <div css={[expandableMenuItemStyle, hasRelations && clickableStyle]} onClick={() => setIsExpanded(!isExpanded)}>
         <div>{children}</div>
-        {hasLockedRelations && (
+        {hasRelations && (
           <EuiButtonIcon
             css={expandButtonStyle}
             iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
@@ -49,17 +54,17 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
           />
         )}
       </div>
-      {hasLockedRelations && isExpanded && (
+      {hasRelations && isExpanded && (
         <div css={expandedContentStyle}>
           <EuiText size="xs">{t('lockedBySubscriptions')}</EuiText>
           <ul css={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
-            {lockedRelationsDetail ?
-              lockedRelationsDetail.map((relation) => (
+            {relationsDetail.length > 0 ?
+              relationsDetail.map((relation) => (
                 <li key={relation.subscription_id}>
                   <EuiText size="xs">
                     <Link
                       css={linkStyle}
-                      href={`${PATH_SUBSCRIPTIONS}/${relation.subscription_id}`}
+                      href={`${subscriptionPath}/${relation.subscription_id}`}
                       target="_blank"
                       onClick={() => onClickLockedRelation(relation)}
                     >
@@ -68,10 +73,10 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionEx
                   </EuiText>
                 </li>
               ))
-            : lockedRelationsUuids?.map((id) => (
+            : relationsUuids.map((id) => (
                 <li key={id}>
                   <EuiText size="xs">
-                    <Link css={linkStyle} href={`${PATH_SUBSCRIPTIONS}/${id}`} target="_blank">
+                    <Link css={linkStyle} href={`${subscriptionPath}/${id}`} target="_blank">
                       {id}
                     </Link>
                   </EuiText>

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

@@ -5,7 +5,13 @@ import { useRouter } from 'next/router';
 
 import { EuiButton, EuiButtonIcon, EuiLoadingSpinner, EuiTitle } from '@elastic/eui';
 
-import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, WfoInSyncField, WfoPopover } from '@/components';
+import {
+  PATH_START_NEW_TASK,
+  PATH_START_NEW_WORKFLOW,
+  PATH_SUBSCRIPTIONS,
+  WfoInSyncField,
+  WfoPopover,
+} from '@/components';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { useActiveProcess } from '@/components/WfoSubscription/WfoSubscriptionActions/utils';
 import { PolicyResource } from '@/configuration/policy-resources';
@@ -27,12 +33,14 @@ export type WfoSubscriptionActionsProps = {
   subscriptionId: string;
   isLoading?: boolean;
   compactMode?: boolean;
+  subscriptionPath?: string;
 };
 
 export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
   subscriptionId,
   isLoading,
   compactMode = false,
+  subscriptionPath = PATH_SUBSCRIPTIONS,
 }) => {
   const t = useTranslations('subscriptions.detail.actions');
   const { theme } = useOrchestratorTheme();
@@ -132,6 +140,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               subscriptionAction={subscriptionAction}
               target={WorkflowTarget.VALIDATE}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => handleActionClick(subscriptionAction.name, compactMode, true)}
               isLoading={buttonIsLoading}
             />
@@ -152,6 +161,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               }
               target={WorkflowTarget.RECONCILE}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => handleActionClick(subscriptionAction.name, compactMode, false)}
               isLoading={buttonIsLoading}
             />
@@ -182,6 +192,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               subscriptionAction={subscriptionAction}
               target={WorkflowTarget.MODIFY}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => {
                 redirectToUrl(subscriptionAction.name);
               }}
@@ -199,6 +210,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               subscriptionAction={subscriptionAction}
               target={WorkflowTarget.TERMINATE}
               setPopover={setPopover}
+              subscriptionPath={subscriptionPath}
               onClick={() => {
                 redirectToUrl(subscriptionAction.name);
               }}

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

@@ -19,6 +19,7 @@ interface MenuItemProps {
   setPopover: (isOpen: boolean) => void;
   onClick: () => void;
   isLoading?: boolean;
+  subscriptionPath?: string;
 }
 
 export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
@@ -27,6 +28,7 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
   target,
   setPopover,
   isLoading = false,
+  subscriptionPath,
 }) => {
   const { linkMenuItemStyle, tooltipMenuItemStyle, disabledIconStyle, iconStyle, secondaryIconStyle } =
     useWithOrchestratorTheme(getSubscriptionActionStyles);
@@ -102,6 +104,7 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
           <WfoSubscriptionActionExpandableMenuItem
             subscriptionAction={subscriptionAction}
             onClickLockedRelation={() => setPopover(false)}
+            subscriptionPath={subscriptionPath}
           >
             {actionItem}
           </WfoSubscriptionActionExpandableMenuItem>

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -147,7 +147,7 @@ export const WfoSubscriptionProductBlock = ({
                     </td>
                     <td>
                       {(inUseByRelations.length === 0 && 'None') || (
-                        <WfoInUseByRelations inUseByRelations={inUseByRelations} />
+                        <WfoInUseByRelations inUseByRelations={inUseByRelations} subscriptionPath={subscriptionPath} />
                       )}
                     </td>
                   </tr>

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -122,6 +122,11 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
       label: t('tag'),
       width: '100px',
     },
+    customerId: {
+      columnType: ColumnType.DATA,
+      label: t('customerId'),
+      width: '100px',
+    },
     customerFullname: {
       columnType: ColumnType.DATA,
       label: t('customerFullname'),

package/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts

@@ -12,6 +12,7 @@ export type SubscriptionListItem = Pick<
   tag: string | null;
   customerFullname: string;
   customerShortcode: string;
+  customerId: string;
   metadata: object | null;
 };
 
@@ -27,7 +28,7 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
       subscription;
 
     const { name: productName, tag } = product;
-    const { fullname: customerFullname, shortcode: customerShortcode } = customer;
+    const { fullname: customerFullname, shortcode: customerShortcode, customerId } = customer;
 
     return {
       subscriptionId,
@@ -41,6 +42,7 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
       tag,
       customerFullname,
       customerShortcode,
+      customerId,
       metadata: Object.keys(metadata).length > 0 ? metadata : null,
     };
   });

package/src/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable.tsx

@@ -8,7 +8,6 @@ import {
   DEFAULT_PAGE_SIZE,
   DEFAULT_PAGE_SIZES,
   TableColumnKeys,
-  TableSettingsColumnConfig,
   TableSettingsConfig,
   TableSettingsModal,
   WfoErrorWithMessage,
@@ -18,6 +17,7 @@ import {
   WfoSearchField,
   WfoToolTip,
   clearTableConfigFromLocalStorage,
+  getTableSettingsColumns,
   setTableConfigToLocalStorage,
 } from '@/components';
 import { getRowDetailData } from '@/components/WfoTable/WfoAdvancedTable/getRowDetailData';
@@ -96,17 +96,7 @@ export const WfoAdvancedTable = <T extends object>({
     ...tableColumnConfig,
   };
 
-  const tableSettingsColumns: TableSettingsColumnConfig<T>[] = Object.entries(tableColumnConfig).map(
-    ([key, { label }]): TableSettingsColumnConfig<T> => {
-      const field = key as keyof T;
-
-      return {
-        field,
-        name: label,
-        isVisible: hiddenColumns.indexOf(field) === -1,
-      };
-    },
-  );
+  const tableSettingsColumns = getTableSettingsColumns(tableColumnConfig, hiddenColumns);
 
   const rowDetailData: WfoKeyValueTableDataType[] | undefined =
     selectedDataForDetailModal && getRowDetailData(selectedDataForDetailModal, tableColumnConfig);

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

@@ -1,36 +1,43 @@
 import React from 'react';
 
+import { WfoHighlightedText } from '@/components/WfoSearchPage/WfoSearchResults/WfoHighlightedText';
 import { useWithOrchestratorTheme } from '@/hooks';
 import type { MatchingField } from '@/types';
+import { toPercentage } from '@/utils';
 
 import { getWfoStructuredSearchTableStyles } from './styles';
 
 interface WfoExpandingSearchRowProps {
   score?: number;
   perfectMatch?: number;
-  matchingField?: MatchingField | null;
+  matchingFields?: MatchingField[] | null;
 }
 
-export const WfoExpandingSearchRow = ({ score, matchingField }: WfoExpandingSearchRowProps) => {
-  const { expandingSearchRowStyles, expandingRowBodyStyles } = useWithOrchestratorTheme(
-    getWfoStructuredSearchTableStyles,
-  );
-
-  if (!matchingField) return null;
+export const WfoExpandingSearchRow = ({ score, matchingFields }: WfoExpandingSearchRowProps) => {
+  const { expandingSearchRowStyles, expandingRowBodyStyles, hideExpandedRowStyle, dotStyles, expandingRowFieldStyles } =
+    useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
 
-  const { path, text } = matchingField;
+  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>
+    <tr css={hideExpandedRowStyle}>
       <td colSpan={999} css={expandingSearchRowStyles}>
         <div css={expandingRowBodyStyles}>
           <div>
-            <span>{path}</span> {text}
-          </div>
-          <span>•</span>
-          <div>
-            <span>score</span> {score !== undefined && `${(score * 100).toFixed(1)}%`}
+            {matchingFields.map((field) => {
+              return (
+                <div key={`${field.path}:${field.text}`} css={expandingRowFieldStyles}>
+                  <div>
+                    <span css={dotStyles}>•</span>
+                    {field.path}: <WfoHighlightedText text={field.text} highlight_indices={field.highlight_indices} />
+                  </div>
+                </div>
+              );
+            })}
           </div>
+
+          {score && <div css={dotStyles}>confidence: {toPercentage(score)}</div>}
         </div>
       </td>
     </tr>

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

@@ -9,6 +9,27 @@ import { EuiComboBox } from '@elastic/eui';
 import { usePathAutocomplete } from '@/hooks';
 import { EntityKind, FieldToOperatorMap, PathInfo } from '@/types';
 
+// react-querybuilder applies the `.rule` class to the rule container and `.rule-value` to
+// the value-editor cell (see `standardClassnames` in @react-querybuilder/core). We hop from
+// the EuiComboBox search input up to the enclosing rule and focus the value editor's first
+// focusable child on the next frame, once react-querybuilder has re-rendered the rule with
+// the editor type for the new field.
+const focusValueEditorAfterRender = (searchInput: HTMLInputElement | null) => {
+  if (!searchInput) return;
+  requestAnimationFrame(() => {
+    const valueCell = searchInput.closest('.rule')?.querySelector('.rule-value');
+    const focusable = valueCell?.querySelector<HTMLElement>(
+      'input:not([disabled]), textarea:not([disabled]), button:not([disabled])',
+    );
+
+    if (!focusable) return;
+    focusable.focus();
+    if (focusable instanceof HTMLInputElement && (focusable.type === 'text' || focusable.type === 'number')) {
+      focusable.select();
+    }
+  });
+};
+
 export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: FieldSelectorProps) => {
   const { field } = rule;
   const prefilledFieldOptions: FieldToOperatorMap = context.prefilledFieldOptions;
@@ -74,6 +95,8 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
     storeFieldOperators(selectedValue);
 
     handleOnChange(selectedValue);
+
+    if (selectedValue) focusValueEditorAfterRender(searchInput);
   };
 
   // EuiComboBox only auto-selects on Enter/Tab when exactly one option matches the typed
@@ -95,7 +118,10 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
         (option) => !option.disabled && option.label.toLowerCase() === typed.toLowerCase(),
       );
       if (!exactMatch) return;
-      if (event.key === 'Enter') event.preventDefault();
+      // Prevent both Enter (form submit / EUI's no-op fallback) and Tab (native focus
+      // shift to the operator selector) — handleFieldSelection moves focus to the value
+      // editor itself, and a native Tab in the meantime causes a visible focus flash.
+      event.preventDefault();
       handleFieldSelectionRef.current([exactMatch]);
 
       // EuiComboBox keeps its own internal `searchValue` and `isListOpen` state. Clearing

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { FullOperator, QueryBuilder, type RuleGroupType, generateID } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
@@ -58,7 +58,6 @@ interface WfoFilterBuilderProps {
   queryBuilderRuleGroup?: RuleGroupType;
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
   handleSearch: (searchParams?: SearchParams) => void;
-  isFilterBuilderVisible: boolean;
   onToggleFilterBuilder: (isVisible: boolean) => void;
   prefilledFieldOptions: FieldToOperatorMap;
 }
@@ -82,7 +81,6 @@ export const WfoFilterBuilder = ({
   onUpdateQueryBuilder,
   handleSearch,
   prefilledFieldOptions,
-  isFilterBuilderVisible,
   onToggleFilterBuilder,
 }: WfoFilterBuilderProps) => {
   const mapOperatorsToRQBOperatorOptions = (operators?: string[]): FullOperator[] => {
@@ -94,11 +92,20 @@ export const WfoFilterBuilder = ({
   };
 
   const t = useTranslations('common');
-  const { queryBuilderContainerStyles, toggleButtonStyles } = useWithOrchestratorTheme(
-    getWfoStructuredSearchTableStyles,
-  );
+  const { queryBuilderContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   const [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(prefilledFieldOptions);
 
+  // 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
+  // synchronously during the blur, so this ref always holds the freshest rule group,
+  // which is passed to handleSearch explicitly (same pattern as the remove-filter link).
+  const latestRuleGroupRef = useRef<RuleGroupType | undefined>(queryBuilderRuleGroup);
+  latestRuleGroupRef.current = queryBuilderRuleGroup;
+
+  const handleValueEditorEnter = () => {
+    handleSearch({ ruleGroup: latestRuleGroupRef.current });
+  };
+
   const handleFieldSelected = (field: string, operators: string[]) => {
     setFieldToOperatorMap((previousMap) => {
       return new Map(previousMap).set(field, operators);
@@ -106,93 +113,92 @@ export const WfoFilterBuilder = ({
   };
 
   return (
-    <EuiFlexGroup css={isFilterBuilderVisible ? queryBuilderContainerStyles : undefined}>
-      {(isFilterBuilderVisible && (
-        <EuiFlexGroup direction={'column'}>
-          <EuiFlexItem>
-            <QueryBuilder
-              query={queryBuilderRuleGroup}
-              enableMountQueryChange={false}
-              onQueryChange={(ruleGroup: RuleGroupType) => {
-                onUpdateQueryBuilder(ruleGroup);
-              }}
-              context={{ onFieldSelected: handleFieldSelected, prefilledFieldOptions }}
-              getOperators={(field) => {
-                const operators = fieldToOperatorMap.get(field);
-                return mapOperatorsToRQBOperatorOptions(operators);
-              }}
-              controlElements={{
-                fieldSelector: WfoFieldSelector,
-                operatorSelector: WfoOperatorSelector,
-                valueEditor: WfoValueEditor,
-                ruleGroup: WfoRuleGroup,
-                rule: WfoRule,
-                combinatorSelector: WfoCombinatorSelector,
-                inlineCombinator: WfoInlineCombinator,
-                addRuleAction: null,
-                addGroupAction: null,
-                removeGroupAction: null,
-                removeRuleAction: WfoRemoveRuleAction,
-              }}
-              addRuleToNewGroups
-              onAddGroup={onAddGroupHandler}
-              maxLevels={5}
-              showCombinatorsBetweenRules
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <WfoAutoExpandableTextArea
-              id={'searchbox-textarea'}
-              value={filterString ?? ''}
-              onChange={(e) => {
-                const filterString = e.target.value;
-                onUpdateFilterString(filterString);
-              }}
-              isInvalid={!isValidFilterString}
-            />
-          </EuiFlexItem>
-
-          <EuiFlexGroup direction={'rowReverse'} alignItems={'center'}>
-            <EuiButton
-              onClick={() => {
+    <EuiFlexGroup css={queryBuilderContainerStyles}>
+      <EuiFlexGroup direction={'column'}>
+        <EuiFlexItem>
+          <QueryBuilder
+            query={queryBuilderRuleGroup}
+            enableMountQueryChange={false}
+            onQueryChange={(ruleGroup: RuleGroupType) => {
+              latestRuleGroupRef.current = ruleGroup;
+              onUpdateQueryBuilder(ruleGroup);
+            }}
+            context={{
+              onFieldSelected: handleFieldSelected,
+              prefilledFieldOptions,
+              onValueEditorEnter: handleValueEditorEnter,
+            }}
+            getOperators={(field) => {
+              const operators = fieldToOperatorMap.get(field);
+              return mapOperatorsToRQBOperatorOptions(operators);
+            }}
+            controlElements={{
+              fieldSelector: WfoFieldSelector,
+              operatorSelector: WfoOperatorSelector,
+              valueEditor: WfoValueEditor,
+              ruleGroup: WfoRuleGroup,
+              rule: WfoRule,
+              combinatorSelector: WfoCombinatorSelector,
+              inlineCombinator: WfoInlineCombinator,
+              addRuleAction: null,
+              addGroupAction: null,
+              removeGroupAction: null,
+              removeRuleAction: WfoRemoveRuleAction,
+            }}
+            addRuleToNewGroups
+            onAddGroup={onAddGroupHandler}
+            maxLevels={5}
+            showCombinatorsBetweenRules
+            resetOnFieldChange={false}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <WfoAutoExpandableTextArea
+            id={'searchbox-textarea'}
+            value={filterString ?? ''}
+            onChange={(e) => {
+              const filterString = e.target.value;
+              onUpdateFilterString(filterString);
+            }}
+            onKeyDown={(event) => {
+              // Enter applies the filter like the Apply button (and like it, does nothing
+              // while the filter string is invalid); Shift+Enter inserts a newline.
+              if (event.key !== 'Enter' || event.shiftKey) return;
+              event.preventDefault();
+              if (isValidFilterString) {
                 handleSearch();
-              }}
-              id={'button-apply-filter'}
-              data-test-id={'button-apply-filter'}
-              fill
-              type="submit"
-              aria-label={t('applyFilter')}
-              disabled={!isValidFilterString}
-            >
-              {t('applyFilter')}
-            </EuiButton>
-            <WfoTextAnchor
-              text={t('removeFilter')}
-              onClick={() => {
-                onUpdateQueryBuilder(false);
-                // we call with ruleGroup: false explictly to
-                // avoid state not having caught up yet when searching
-                handleSearch({ ruleGroup: false });
-                onToggleFilterBuilder(false);
-              }}
-            />
-          </EuiFlexGroup>
+              }
+            }}
+            isInvalid={!isValidFilterString}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexGroup direction={'rowReverse'} alignItems={'center'}>
+          <EuiButton
+            onClick={() => {
+              handleSearch();
+            }}
+            id={'button-apply-filter'}
+            data-test-id={'button-apply-filter'}
+            fill
+            type="submit"
+            aria-label={t('applyFilter')}
+            disabled={!isValidFilterString}
+          >
+            {t('applyFilter')}
+          </EuiButton>
+          <WfoTextAnchor
+            text={t('removeFilter')}
+            onClick={() => {
+              onUpdateQueryBuilder(false);
+              // we call with ruleGroup: false explictly to
+              // avoid state not having caught up yet when searching
+              handleSearch({ ruleGroup: false });
+              onToggleFilterBuilder(false);
+            }}
+          />
         </EuiFlexGroup>
-      )) || (
-        <EuiButton
-          css={toggleButtonStyles}
-          onClick={() => onToggleFilterBuilder(true)}
-          id={'button-toggle-filter-builder'}
-          data-test-id={'button-toggle-filter-builder'}
-          fill
-          type="submit"
-          iconType="filter"
-          iconSide="left"
-          aria-label={t('createFilter')}
-        >
-          {t('createFilter')}
-        </EuiButton>
-      )}
+      </EuiFlexGroup>
     </EuiFlexGroup>
   );
 };

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

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { FullOperator, OperatorSelectorProps, OptionGroup } from 'react-querybuilder';
+import { defaultOperators } from 'react-querybuilder';
 
 import { EuiSelect } from '@elastic/eui';
 
@@ -7,6 +8,8 @@ const isOptionGroup = (operator: FullOperator | OptionGroup<FullOperator>): oper
   'options' in operator;
 
 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],
   );
@@ -16,17 +19,39 @@ export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
     [flatOptions],
   );
 
+  const optionsKey = selectOptions.map((option) => option.value).join('|');
+  const previousOptionsKeyRef = useRef(optionsKey);
+
   useEffect(() => {
-    if (props.options && !props.value && selectOptions.length > 0) {
-      props.handleOnChange(selectOptions[0].value);
+    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;
+    const currentValueIsValid = selectOptions.some((option) => option.value === value);
+    if (!currentValueIsValid) {
+      handleOnChange(selectOptions[0].value);
     }
-  }, [props, props.options, props.value, selectOptions]);
+  }, [optionsKey, 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 }]
+    );
 
   return (
     <EuiSelect
-      options={selectOptions}
-      value={props.value}
-      onChange={(e) => props.handleOnChange(e.target.value)}
+      options={displayOptions}
+      value={value}
+      onChange={(e) => handleOnChange(e.target.value)}
       disabled={props.disabled}
     />
   );