@orchestrator-ui/orchestrator-ui-components 8.9.2 → 9.0.0

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

@@ -0,0 +1,180 @@
+/**
+ * Renders the filter builder's field selector on its own with the autocomplete hook mocked,
+ * so the tests control which paths the "backend" returns for a typed prefix.
+ */
+import React, { type ComponentProps } from 'react';
+import { defaultPlaceholderFieldName } from 'react-querybuilder';
+
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { usePathAutocomplete } from '@/hooks';
+import type { PathInfo, WfoQueryBuilderContext } from '@/types';
+
+import { WfoFieldSelector } from './WfoFieldSelector';
+
+jest.mock('@/hooks', () => ({
+  usePathAutocomplete: jest.fn(),
+}));
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+// EuiComboBox sizes its search input by measuring text on a canvas, which jsdom does not implement.
+beforeEach(() => {
+  jest
+    .spyOn(HTMLCanvasElement.prototype, 'getContext')
+    .mockReturnValue({ font: '', measureText: () => ({ width: 0 }) } as unknown as CanvasRenderingContext2D);
+});
+
+const SAPS_PATH_INFO = {
+  path: 'saps',
+  type: 'component',
+  operators: ['has_component', 'not_has_component'],
+  value_schema: {},
+  group: 'component',
+  ui_types: ['component'],
+  availablePaths: ['saps.port'],
+} as unknown as PathInfo;
+
+// The mocked backend only knows saps, returned for any prefix of it.
+const mockAutocomplete = (loading = false) =>
+  jest.mocked(usePathAutocomplete).mockImplementation((prefix) => ({
+    paths: prefix && 'saps'.startsWith(prefix) ? [SAPS_PATH_INFO] : [],
+    loading,
+    error: null,
+  }));
+
+const renderFieldSelector = (field: string = defaultPlaceholderFieldName) => {
+  const handleOnChange = jest.fn();
+  const onFieldSelected = jest.fn();
+  const context: WfoQueryBuilderContext = {
+    onFieldSelected,
+    fieldPathInfoMap: new Map(),
+    useAdvancedNestedSearch: true,
+  };
+  const props = {
+    handleOnChange,
+    rule: { field, operator: '=', value: '' },
+    context,
+  } as unknown as ComponentProps<typeof WfoFieldSelector>;
+
+  render(<WfoFieldSelector {...props} />);
+  return { handleOnChange, onFieldSelected };
+};
+
+const getSearchInput = () => screen.getByRole('combobox');
+const typeSearchTerm = (searchTerm: string) => fireEvent.change(getSearchInput(), { target: { value: searchTerm } });
+const requestedPrefixes = () => jest.mocked(usePathAutocomplete).mock.calls.map(([prefix]) => prefix);
+const listedOptions = () => screen.queryAllByRole('option').map((option) => option.textContent);
+
+describe('WfoFieldSelector', () => {
+  beforeEach(() => mockAutocomplete());
+
+  it('does not look up the placeholder field and only shows a typing hint before typing', () => {
+    renderFieldSelector();
+
+    fireEvent.focus(getSearchInput());
+
+    expect(requestedPrefixes().every((prefix) => prefix === '')).toBe(true);
+    expect(listedOptions()).toEqual(['startTypingToLoadOptions']);
+    expect(screen.getByRole('option', { name: 'startTypingToLoadOptions' })).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('shows the loading state instead of a no-match message while nothing is listed yet', () => {
+    mockAutocomplete(true);
+    renderFieldSelector();
+
+    typeSearchTerm('unknown');
+
+    expect(screen.getByText('Loading options')).toBeInTheDocument();
+    expect(listedOptions()).toEqual([]);
+    expect(screen.queryByText(/doesn't match any options/)).not.toBeInTheDocument();
+  });
+
+  it('shows the loading state when the previous paths do not match the new text', () => {
+    // The hook keeps the previous lookup's paths until the new ones arrive.
+    jest
+      .mocked(usePathAutocomplete)
+      .mockImplementation(() => ({ paths: [SAPS_PATH_INFO], loading: true, error: null }));
+    renderFieldSelector();
+
+    typeSearchTerm('sax');
+
+    expect(listedOptions()).toEqual([]);
+    expect(screen.getByText('Loading options')).toBeInTheDocument();
+    expect(screen.queryByText(/doesn't match any options/)).not.toBeInTheDocument();
+  });
+
+  it('keeps listed options visible while the next lookup runs and spins inside the field', () => {
+    mockAutocomplete(true);
+    renderFieldSelector();
+
+    typeSearchTerm('sa');
+
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+    expect(screen.queryByText('Loading options')).not.toBeInTheDocument();
+    expect(document.querySelector('.euiFormControlLayoutIcons [role="progressbar"]')).toBeInTheDocument();
+  });
+
+  it('looks up the typed term and lists the returned paths', () => {
+    renderFieldSelector();
+
+    typeSearchTerm('sa');
+
+    expect(requestedPrefixes()).toContain('sa');
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+  });
+
+  it('selects a listed path and reports its operators and path info', () => {
+    const { handleOnChange, onFieldSelected } = renderFieldSelector();
+
+    typeSearchTerm('sa');
+    fireEvent.click(screen.getByRole('option', { name: 'saps' }));
+
+    expect(handleOnChange).toHaveBeenCalledWith('saps');
+    expect(onFieldSelected).toHaveBeenCalledWith('saps', SAPS_PATH_INFO.operators, SAPS_PATH_INFO);
+  });
+
+  it('drops the options again as soon as the input is cleared', () => {
+    renderFieldSelector();
+
+    typeSearchTerm('sa');
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+
+    typeSearchTerm('');
+
+    expect(listedOptions()).toEqual(['startTypingToLoadOptions']);
+  });
+
+  it('does not offer the raw typed text as an option and reports no match once loaded', () => {
+    renderFieldSelector();
+
+    typeSearchTerm('unknown');
+
+    expect(listedOptions()).toEqual([]);
+    expect(screen.getByText(/doesn't match any options/)).toBeInTheDocument();
+  });
+
+  it('shows a restored field as selected without an autocomplete request', () => {
+    renderFieldSelector('subscription.insync');
+
+    // A plain-text single selection is shown as the value of the search input.
+    expect(getSearchInput()).toHaveValue('subscription.insync');
+    expect(requestedPrefixes().every((prefix) => prefix === '')).toBe(true);
+  });
+
+  it('lists options for the selected field as soon as the selector is opened', () => {
+    renderFieldSelector('saps');
+
+    fireEvent.focus(getSearchInput());
+
+    expect(requestedPrefixes()).toContain('saps');
+    expect(listedOptions()).toEqual(['saps', 'saps.port']);
+
+    fireEvent.blur(getSearchInput());
+
+    expect(jest.mocked(usePathAutocomplete).mock.lastCall?.[0]).toBe('');
+  });
+});

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

@@ -1,10 +1,11 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { FieldSelectorProps } from 'react-querybuilder';
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { FieldSelectorProps, defaultPlaceholderFieldName } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
 
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
-import { EuiComboBox } from '@elastic/eui';
+import { EuiComboBox, EuiLoadingSpinner, EuiText } from '@elastic/eui';
 
 import { usePathAutocomplete } from '@/hooks';
 import { EntityKind, PathInfo, WfoQueryBuilderContext } from '@/types';
@@ -36,8 +37,11 @@ interface WfoFieldSelectorProps extends Omit<FieldSelectorProps, 'context'> {
 
 export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, disabled, rule, context }) => {
   const { field } = rule;
-  const { useAdvancedNestedSearch, prefilledFieldOptions, onFieldSelected } = context;
-  const [selectedValue, setSelectedValue] = useState<string>(field);
+  const { useAdvancedNestedSearch, onFieldSelected } = context;
+  const [autoFocus] = useState(field === defaultPlaceholderFieldName);
+  const selectedField = field === defaultPlaceholderFieldName ? '' : field;
+  const [searchTerm, setSearchTerm] = useState('');
+  const [hasFocus, setHasFocus] = useState(false);
   const [searchInput, setSearchInput] = useState<HTMLInputElement | null>(null);
   const optionsRef = useRef<EuiComboBoxOptionOption<string>[]>([]);
   const handleFieldSelectionRef = useRef<(selected: EuiComboBoxOptionOption<string>[]) => void>(() => {});
@@ -49,45 +53,51 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
 
   const isSelectablePath = (path: string) => useAdvancedNestedSearch || !path.includes('.');
 
-  const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] => {
-    const pathOptions: EuiComboBoxOptionOption<string>[] = [];
-
-    pathInfos.forEach((pathInfo) => {
-      [pathInfo.path, ...(pathInfo.availablePaths ?? [])].filter(isSelectablePath).forEach((path) => {
-        pathOptions.push(getOption(path));
-      });
-    });
-    return (
-      pathOptions.length > 0 ? pathOptions
-      : selectedValue ? [getOption(selectedValue)]
-      : []
+  const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] =>
+    pathInfos.flatMap((pathInfo) =>
+      [pathInfo.path, ...(pathInfo.availablePaths ?? [])].filter(isSelectablePath).map(getOption),
     );
-  };
 
+  const trimmedSearchTerm = searchTerm.trim();
+  const autocompletePrefix = trimmedSearchTerm || (hasFocus ? selectedField : '');
   const {
     paths,
     loading: isLoading,
     error: errorMessage,
-  } = usePathAutocomplete(selectedValue, EntityKind.SUBSCRIPTION);
+  } = usePathAutocomplete(autocompletePrefix, EntityKind.SUBSCRIPTION);
 
-  const prefilledOptions: EuiComboBoxOptionOption<string>[] = Array.from(prefilledFieldOptions.keys()).map(getOption);
   const autocompleteOptions = getOptionsFromPathInfo(paths);
-  const placeholderOption: EuiComboBoxOptionOption<string> = {
-    label: '──────',
+
+  const startTypingHintOption: EuiComboBoxOptionOption<string> = {
+    label: t('startTypingToLoadOptions'),
     disabled: true,
   };
-  const showPlaceholder = prefilledOptions.length > 0 && autocompleteOptions.length > 0;
-  const options: EuiComboBoxOptionOption<string>[] = [
-    ...prefilledOptions,
-    ...(showPlaceholder ? [placeholderOption] : []),
-    ...autocompleteOptions,
-  ];
+  const options: EuiComboBoxOptionOption<string>[] = autocompletePrefix ? autocompleteOptions : [startTypingHintOption];
+
+  const renderHintOption = (option: EuiComboBoxOptionOption<string>) => (
+    <EuiText size="xs" color="default">
+      {option.label}
+    </EuiText>
+  );
+  const normalizedSearchTerm = trimmedSearchTerm.toLowerCase();
+  const hasListedOptions =
+    autocompletePrefix !== ''
+    && options.some(
+      (option) =>
+        !option.disabled && option.value !== selectedField && option.label.toLowerCase().includes(normalizedSearchTerm),
+    );
+  const showLoadingState = isLoading && !hasListedOptions;
+  const showFieldSpinner = isLoading && hasListedOptions;
+  const fieldIconsContainer = useMemo(
+    () => searchInput?.closest('.euiFormControlLayout')?.querySelector('.euiFormControlLayoutIcons') ?? null,
+    [searchInput],
+  );
 
   const storeFieldOperators = (selectedValue: string) => {
     const matchingPath =
       paths.find((path) => path.path === selectedValue)
       ?? paths.find((path) => path.availablePaths?.includes(selectedValue));
-    const operators = matchingPath?.operators ?? prefilledFieldOptions.get(selectedValue) ?? [];
+    const operators = matchingPath?.operators ?? [];
 
     onFieldSelected(selectedValue, operators, matchingPath);
   };
@@ -95,7 +105,7 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
   const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {
     const selectedOption = selectedOptions[0];
     const selectedValue = selectedOption?.value || '';
-    setSelectedValue(selectedValue);
+    setSearchTerm('');
     storeFieldOperators(selectedValue);
 
     handleOnChange(selectedValue);
@@ -143,26 +153,31 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
   }, [searchInput]);
 
   return (
-    <EuiComboBox
-      placeholder={t('searchFieldsPlaceholder')}
-      options={options}
-      fullWidth={true}
-      selectedOptions={options.filter((option) => option.value === selectedValue)}
-      onChange={(selectedOptions) => {
-        handleFieldSelection(selectedOptions);
-      }}
-      onSearchChange={(inputValue) => {
-        if (inputValue.length > 0) {
-          setSelectedValue(inputValue);
-        }
-      }}
-      inputRef={setSearchInput}
-      singleSelection={{ asPlainText: true }}
-      isLoading={isLoading}
-      isClearable
-      isInvalid={!!errorMessage}
-      isDisabled={disabled}
-      rowHeight={30}
-    />
+    <>
+      {showFieldSpinner
+        && fieldIconsContainer
+        && createPortal(<EuiLoadingSpinner size="m" aria-label={t('loadingOptions')} />, fieldIconsContainer)}
+      <EuiComboBox
+        placeholder={t('searchFieldsPlaceholder')}
+        options={options}
+        renderOption={autocompletePrefix ? undefined : renderHintOption}
+        fullWidth={true}
+        selectedOptions={selectedField ? [getOption(selectedField)] : []}
+        onChange={(selectedOptions) => {
+          handleFieldSelection(selectedOptions);
+        }}
+        onSearchChange={setSearchTerm}
+        onFocus={() => setHasFocus(true)}
+        onBlur={() => setHasFocus(false)}
+        inputRef={setSearchInput}
+        autoFocus={autoFocus}
+        singleSelection={{ asPlainText: true }}
+        isLoading={showLoadingState}
+        isClearable
+        isInvalid={!!errorMessage}
+        isDisabled={disabled}
+        rowHeight={30}
+      />
+    </>
   );
 };

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

@@ -1,22 +1,23 @@
 import React, { type ComponentType, useEffect, useMemo, useRef, useState } from 'react';
 import {
   type FieldSelectorProps,
-  FullOperator,
   QueryBuilder,
   type RuleGroupType,
-  generateID,
+  defaultPlaceholderFieldName,
 } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import { SearchParams, WfoAutoExpandableTextArea, WfoTextAnchor } from '@/components';
+import { SearchParams, WfoAutoExpandableTextArea, WfoErrorWithMessage, WfoTextAnchor } from '@/components';
+import { WfoApplyFilterButton } from '@/components/WfoTable/WfoStructuredSearchTable/WfoApplyFilterButton';
 import { WfoCombinatorSelector } from '@/components/WfoTable/WfoStructuredSearchTable/WfoCombinatorSelector';
 import { useFieldsPathInfo, useWithOrchestratorTheme } from '@/hooks';
-import { EntityKind, OperatorDisplay } from '@/types';
+import type { WfoGraphqlError } from '@/rtk';
 import type { FieldToOperatorMap, PathInfo, WfoQueryBuilderContext } from '@/types';
+import { EntityKind } from '@/types';
 
 import { WfoFieldSelector } from './WfoFieldSelector';
 import { WfoInlineCombinator } from './WfoInlineCombinator';
@@ -26,43 +27,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: '!=',
-  lt: '<',
-  lte: '<=',
-  gt: '>',
-  gte: '>=',
-  between: 'between',
-  like: 'contains',
-  not_regexp: 'doesNotContain',
-  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' },
-  lt: { symbol: '<', description: 'less than' },
-  lte: { symbol: '≤', description: 'less than or equal to' },
-  gt: { symbol: '>', description: 'greater than' },
-  gte: { symbol: '≥', description: 'greater than or equal to' },
-  between: { symbol: '⟷', description: 'between (range)' },
-  has_component: { symbol: '✓', description: 'has component' },
-  not_has_component: { symbol: '✗', description: 'does not have component' },
-  like: { symbol: '∋', description: 'contains' },
-  not_regexp: { symbol: '∌', description: 'does not contain' },
-};
+import {
+  collectRuleFields,
+  hasNestedRuleWithEmptyValue,
+  onAddGroupHandler,
+  operatorsToRQBOperatorOptionsMapper,
+  useSearchWithDebouncedCallback,
+} from './utils';
 
 interface WfoFilterBuilderProps {
   filterString?: string;
@@ -72,21 +43,16 @@ interface WfoFilterBuilderProps {
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
   handleSearch: (searchParams?: SearchParams) => void;
   onToggleFilterBuilder: (isVisible: boolean) => void;
-  prefilledFieldOptions: FieldToOperatorMap;
   useAdvancedNestedSearch?: boolean;
+  error?: WfoGraphqlError[];
 }
 
 const initialRuleGroup: RuleGroupType = {
   id: 'root',
-  rules: [{ id: 'rule-0', field: '~', operator: '=', value: '' }],
+  rules: [{ id: 'rule-0', field: defaultPlaceholderFieldName, operator: '=', value: '' }],
   combinator: 'and',
 };
 
-const onAddGroupHandler = (ruleGroup: RuleGroupType): RuleGroupType => {
-  const [firstRule] = ruleGroup.rules;
-  return firstRule ? { ...ruleGroup, rules: [...ruleGroup.rules, { ...firstRule, id: generateID() }] } : ruleGroup;
-};
-
 export const WfoFilterBuilder = ({
   filterString,
   onUpdateFilterString,
@@ -94,28 +60,13 @@ export const WfoFilterBuilder = ({
   queryBuilderRuleGroup = initialRuleGroup,
   onUpdateQueryBuilder,
   handleSearch,
-  prefilledFieldOptions,
   onToggleFilterBuilder,
   useAdvancedNestedSearch = true,
+  error,
 }: WfoFilterBuilderProps) => {
-  const mapOperatorsToRQBOperatorOptions = (operators?: string[]): FullOperator[] => {
-    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,
-        ...(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 [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(new Map());
   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
@@ -125,9 +76,12 @@ export const WfoFilterBuilder = ({
   const latestRuleGroupRef = useRef<RuleGroupType | undefined>(queryBuilderRuleGroup);
   latestRuleGroupRef.current = queryBuilderRuleGroup;
 
-  const handleValueEditorEnter = () => {
-    handleSearch({ ruleGroup: latestRuleGroupRef.current });
-  };
+  const { handleSubmitSearchOnClick, pendingSearchRun, handleSubmitSearchOnEnter } = useSearchWithDebouncedCallback({
+    filterString,
+    isValidFilterString,
+    hasEmptyRuleValue: hasNestedRuleWithEmptyValue(queryBuilderRuleGroup),
+    searchCallback: () => handleSearch({ ruleGroup: latestRuleGroupRef.current }),
+  });
 
   const handleFieldSelected = (field: string, operators: string[], pathInfo?: PathInfo) => {
     setFieldToOperatorMap((previousMap) => {
@@ -155,9 +109,7 @@ export const WfoFilterBuilder = ({
 
   const queryBuilderContext: WfoQueryBuilderContext = {
     onFieldSelected: handleFieldSelected,
-    prefilledFieldOptions,
     fieldPathInfoMap,
-    onValueEditorEnter: handleValueEditorEnter,
     useAdvancedNestedSearch,
   };
 
@@ -172,7 +124,7 @@ export const WfoFilterBuilder = ({
   return (
     <EuiFlexGroup css={queryBuilderContainerStyles}>
       <EuiFlexGroup direction={'column'}>
-        <EuiFlexItem>
+        <EuiFlexItem onKeyDown={handleSubmitSearchOnEnter}>
           <QueryBuilder
             query={queryBuilderRuleGroup}
             enableMountQueryChange={false}
@@ -183,11 +135,9 @@ export const WfoFilterBuilder = ({
             context={queryBuilderContext}
             getOperators={(field) => {
               const operators = fieldToOperatorMap.get(field);
-              return mapOperatorsToRQBOperatorOptions(operators);
+              return operatorsToRQBOperatorOptionsMapper(operators);
             }}
             controlElements={{
-              // WfoFieldSelector requires the context this QueryBuilder always provides,
-              // while react-querybuilder declares it optional — hence the cast.
               fieldSelector: WfoFieldSelector as ComponentType<FieldSelectorProps>,
               operatorSelector: WfoOperatorSelector,
               valueEditor: WfoValueEditor,
@@ -220,33 +170,17 @@ export const WfoFilterBuilder = ({
               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();
-              }
-            }}
+            onKeyDown={handleSubmitSearchOnEnter}
             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>
+        <EuiFlexGroup direction={'rowReverse'} alignItems={'center'} gutterSize={'l'}>
+          <WfoApplyFilterButton
+            isDisabled={!isValidFilterString}
+            pendingSearchRun={pendingSearchRun}
+            onClick={handleSubmitSearchOnClick}
+          />
           <WfoTextAnchor
             text={t('removeFilter')}
             onClick={() => {
@@ -257,6 +191,7 @@ export const WfoFilterBuilder = ({
               onToggleFilterBuilder(false);
             }}
           />
+          <EuiFlexItem>{error && <WfoErrorWithMessage error={error} />}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexGroup>
     </EuiFlexGroup>

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

@@ -24,7 +24,6 @@ export const WfoRangeEditor = ({ handleOnChange, InputElement, value: currentVal
     });
   };
 
-  // Notify the parent only when both ends of the range hold a value
   useEffect(() => {
     if (value[0] !== undefined && value[1] !== undefined) {
       handleOnChange(`${value[0]},${value[1]}`);

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

@@ -1,6 +1,6 @@
 /**
  * Regression test for the URL-restore render loop: a controlled QueryBuilder wired like
- * WfoSearchPocPage + WfoFilterBuilder, restoring `lldp == true` from CEL while the path
+ * WfoSubscriptionsListPage + 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
@@ -80,7 +80,7 @@ const Harness = ({ initialCel = 'lldp == true' }: { initialCel?: string }) => {
       onQueryChange={(ruleGroup: RuleGroupType) => {
         queryChangeLog.push(JSON.stringify(ruleGroup));
         if (queryChangeLog.length > 20) return;
-        // Mirrors WfoSearchPocPage.onUpdateQueryBuilder
+        // Mirrors WfoSubscriptionsListPage.onUpdateQueryBuilder
         setQuery({ ...ruleGroup });
         setFilterString(formatQuery({ ...ruleGroup }, { format: 'cel', fallbackExpression: '' }));
       }}

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

@@ -30,7 +30,7 @@ import {
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoArrowsExpand } from '@/icons';
 import { WfoGraphqlError } from '@/rtk';
-import { FieldToOperatorMap, RetrieverType } from '@/types';
+import { RetrieverType } from '@/types';
 import { getDefaultTableConfig } from '@/utils';
 
 import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
@@ -97,7 +97,6 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   setPageSize: (updatedPageSize: number) => void;
   totalItems: number | false;
   hasNextPage: boolean;
-  prefilledFieldOptions: FieldToOperatorMap;
 };
 
 export const WfoStructuredSearchTable = <T extends object>({
@@ -131,7 +130,6 @@ export const WfoStructuredSearchTable = <T extends object>({
   hasNextPage,
   data,
   isLoading,
-  prefilledFieldOptions,
   ...tableProps
 }: WfoStructuredSearchTableProps<T>) => {
   const { theme } = useOrchestratorTheme();
@@ -283,13 +281,13 @@ export const WfoStructuredSearchTable = <T extends object>({
             onUpdateQueryBuilder={onUpdateQueryBuilder}
             handleSearch={handleSearch}
             onToggleFilterBuilder={setIsFilterBuilderVisible}
-            prefilledFieldOptions={prefilledFieldOptions}
             useAdvancedNestedSearch={advancedNestedSearch}
+            error={error}
           />
         </>
       )}
 
-      {error && <WfoErrorWithMessage error={error} />}
+      {error && !isFilterBuilderVisible && <WfoErrorWithMessage error={error} />}
 
       <EuiSpacer size="m" />
 
@@ -307,12 +305,12 @@ export const WfoStructuredSearchTable = <T extends object>({
         {...tableProps}
       />
 
-      {totalItems && (
+      {(totalItems || data.length > 0) && (
         <EuiFlexGroup alignItems={'center'} justifyContent={'center'} css={{ padding: theme.base }}>
           <EuiButton onClick={() => onShowMore()} disabled={!hasNextPage || isLoading}>
             {t('loadMore')}
           </EuiButton>
-          <div>{`${data.length}/${totalItems} records`}</div>
+          <div>{totalItems ? `${data.length}/${totalItems} records` : `${data.length} records`}</div>
         </EuiFlexGroup>
       )}