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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.9.3",
+  "version": "9.0.0",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {

package/src/components/WfoError/WfoError.tsx

@@ -17,7 +17,7 @@ export const WfoError = () => {
   const { theme } = useOrchestratorTheme();
   return (
     <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
-      <WfoXCircleFill color={theme.colors.danger} />
+      <WfoXCircleFill color={theme.colors.danger} width={32} height={32} />
       <h1>{t('errorMessage')}</h1>
     </EuiFlexGroup>
   );
@@ -30,7 +30,7 @@ export const WfoErrorWithMessage = ({ error }: WfoErrorWithMessageProps) => {
   return (
     <>
       <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
-        <WfoXCircleFill color={theme.colors.danger} />
+        <WfoXCircleFill color={theme.colors.danger} width={32} height={32} />
         <EuiText color={theme.colors.textDanger}>
           {t('errorMessage')} ({message})
         </EuiText>

package/src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { useGetSubscriptionDetailQuery } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
-import { useUpdateSubscriptionDetailNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation';
+import { useUpdateSubscriptionNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation';
 import { SubscriptionDetail } from '@/types';
 import { INVISIBLE_CHARACTER } from '@/utils';
 
@@ -18,13 +18,13 @@ export const WfoSubscriptionDetailNoteEdit: FC<WfoSubscriptionDetailNoteEditProp
   subscriptionId,
   onlyShowOnHover = false,
 }) => {
-  const { data, endpointName } = useGetSubscriptionDetailQuery({
+  const { data } = useGetSubscriptionDetailQuery({
     subscriptionId,
   });
 
   const selectedItem = data?.subscription ?? { note: '' };
   const [startProcess] = useStartProcessMutation();
-  const [updateSub] = useUpdateSubscriptionDetailNoteOptimisticMutation();
+  const [updateSubscriptionNoteOptimistic] = useUpdateSubscriptionNoteOptimisticMutation();
 
   const triggerNoteModifyWorkflow = (note: string) => {
     const noteModifyPayload = [{ subscription_id: subscriptionId }, { note: note }];
@@ -33,11 +33,7 @@ export const WfoSubscriptionDetailNoteEdit: FC<WfoSubscriptionDetailNoteEditProp
       userInputs: noteModifyPayload,
     });
 
-    updateSub({
-      queryName: endpointName ?? '',
-      subscriptionId: subscriptionId,
-      note: note,
-    });
+    updateSubscriptionNoteOptimistic({ subscriptionId, note });
   };
 
   return (

package/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx

@@ -8,7 +8,7 @@ import { INVISIBLE_CHARACTER } from '@/utils';
 
 interface WfoSubscriptionNoteEditProps {
   onlyShowOnHover?: boolean;
-  queryVariables: Record<string, unknown>;
+  queryVariables: object;
   endpointName: string | undefined;
   subscriptionId: string;
   note: string | null;
@@ -22,7 +22,7 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
   note,
 }) => {
   const [startProcess] = useStartProcessMutation();
-  const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
+  const [updateSubscriptionNoteOptimistic] = useUpdateSubscriptionNoteOptimisticMutation();
 
   const triggerNoteModifyWorkflow = (note: string) => {
     const noteModifyPayload = [{ subscription_id: subscriptionId }, { note: note === INVISIBLE_CHARACTER ? '' : note }];
@@ -31,11 +31,10 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
       userInputs: noteModifyPayload,
     });
 
-    updateSub({
-      queryName: endpointName ?? '',
-      subscriptionId: subscriptionId,
-      graphQlQueryVariables: queryVariables,
-      note: note,
+    updateSubscriptionNoteOptimistic({
+      subscriptionId,
+      note,
+      listQuery: { queryName: endpointName ?? '', queryVariables },
     });
   };
 

package/src/components/WfoPageTemplate/paths.ts

@@ -3,7 +3,6 @@ export const PATH_START_NEW_WORKFLOW = '/workflows/new';
 export const PATH_START_NEW_TASK = '/tasks/new';
 export const PATH_WORKFLOWS = '/workflows';
 export const PATH_SUBSCRIPTIONS = '/subscriptions';
-export const PATH_SUBSCRIPTIONS_BETA = '/beta-subscriptions';
 export const PATH_METADATA = '/metadata';
 export const PATH_METADATA_PRODUCTS = '/metadata/products';
 export const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';

package/src/components/WfoSubscriptionsList/index.ts

@@ -1,3 +1,2 @@
-export * from './subscriptionResultMappers';
+export * from './subscriptionListItem';
 export * from './subscriptionListTabs';
-export * from './WfoSubscriptionsList';

package/src/components/WfoSubscriptionsList/subscriptionListItem.ts

@@ -0,0 +1,14 @@
+import { Subscription } from '@/types';
+
+export type SubscriptionListItem = Pick<
+  Subscription,
+  'subscriptionId' | 'description' | 'status' | 'insync' | 'note'
+> & {
+  startDate: Date | null;
+  endDate: Date | null;
+  productName: string;
+  tag: string | null;
+  customerFullname: string;
+  customerShortcode: string;
+  metadata: object | null;
+};

package/src/components/WfoSubscriptionsList/subscriptionListTabs.ts

@@ -1,5 +1,4 @@
 import { WfoFilterTab } from '../../components';
-import { SubscriptionListItem } from './subscriptionResultMappers';
 
 export enum WfoSubscriptionListTab {
   ACTIVE = 'ACTIVE',
@@ -8,36 +7,18 @@ export enum WfoSubscriptionListTab {
   ALL = 'ALL',
 }
 
-export const subscriptionListTabs: WfoFilterTab<WfoSubscriptionListTab, SubscriptionListItem>[] = [
+export const subscriptionListTabs: WfoFilterTab<WfoSubscriptionListTab>[] = [
   {
     id: WfoSubscriptionListTab.ACTIVE,
     translationKey: 'active',
-    alwaysOnFilters: [
-      {
-        field: 'status',
-        value: 'active',
-      },
-    ],
   },
   {
     id: WfoSubscriptionListTab.TERMINATED,
     translationKey: 'terminated',
-    alwaysOnFilters: [
-      {
-        field: 'status',
-        value: 'terminated',
-      },
-    ],
   },
   {
     id: WfoSubscriptionListTab.TRANSIENT,
     translationKey: 'transient',
-    alwaysOnFilters: [
-      {
-        field: 'status',
-        value: 'initial-provisioning-migrating',
-      },
-    ],
   },
   {
     id: WfoSubscriptionListTab.ALL,

package/src/components/WfoSummary/WfoLatestActiveSubscriptionsSummaryCard.tsx

@@ -3,30 +3,34 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 
 import { PATH_SUBSCRIPTIONS, SummaryCardStatus, WfoSummaryCard } from '@/components';
-import { mapSubscriptionSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
-import { subscriptionsListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
-import { useGetSubscriptionSummaryListQuery } from '@/rtk';
+import { mapSubscriptionSearchResultToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { getSubscriptionSummarySearchPayload } from '@/pages/startPage/searchPayloads';
+import { useSearchQuery } from '@/rtk';
+import { Filter } from '@/types';
 import { optionalArrayMapper } from '@/utils';
 
+// Elasticsearch equivalent of the list page's default Active tab filter
+// (`subscription.status == "active"`), so the count on the card matches the list.
+const activeSubscriptionsFilter = {
+  bool: {
+    must: [{ term: { 'subscription.status': 'active' } }],
+  },
+} as unknown as Filter;
+
+const activeSubscriptionsSearchPayload = getSubscriptionSummarySearchPayload(activeSubscriptionsFilter);
+
 export const WfoLatestActiveSubscriptionsSummaryCard = () => {
   const t = useTranslations('startPage.activeSubscriptions');
 
-  const {
-    data: subscriptionsSummaryResult,
-    isFetching,
-    isLoading,
-  } = useGetSubscriptionSummaryListQuery(subscriptionsListSummaryQueryVariables);
+  const { data, isFetching, isLoading } = useSearchQuery(activeSubscriptionsSearchPayload);
 
   return (
     <WfoSummaryCard
       headerTitle={t('headerTitle')}
-      headerValue={subscriptionsSummaryResult?.pageInfo.totalItems ?? '-'}
+      headerValue={data?.cursor?.total_items ?? '-'}
       headerStatus={SummaryCardStatus.Neutral}
       listTitle={t('listTitle')}
-      listItems={optionalArrayMapper(
-        subscriptionsSummaryResult?.subscriptions,
-        mapSubscriptionSummaryToSummaryCardListItem,
-      )}
+      listItems={optionalArrayMapper(data?.data, mapSubscriptionSearchResultToSummaryCardListItem)}
       button={{ name: t('buttonText'), url: PATH_SUBSCRIPTIONS }}
       isLoading={isLoading}
       isFetching={isFetching}

package/src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx

@@ -3,37 +3,50 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 
 import { PATH_SUBSCRIPTIONS, SummaryCardStatus, WfoSubscriptionListTab, WfoSummaryCard } from '@/components';
-import { mapSubscriptionSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
-import { outOfSyncSubscriptionsListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
-import { useGetSubscriptionSummaryListQuery } from '@/rtk';
+import { mapSubscriptionSearchResultToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { getSubscriptionSummarySearchPayload } from '@/pages/startPage/searchPayloads';
+import { useSearchQuery } from '@/rtk';
+import { Filter } from '@/types';
 import { optionalArrayMapper } from '@/utils';
 import { WfoQueryParams, getUrlWithQueryParams } from '@/utils/getQueryParams';
 
+const OUT_OF_SYNC_CEL =
+  'subscription.insync == false && (subscription.status == "provisioning" || subscription.status == "active")';
+
+// Elasticsearch equivalent of OUT_OF_SYNC_CEL. The list page produces the same clauses from the
+// CEL in the button link, so the count on the card matches the list.
+const outOfSyncSubscriptionsFilter = {
+  bool: {
+    must: [
+      { term: { 'subscription.insync': false } },
+      {
+        bool: {
+          should: [{ term: { 'subscription.status': 'active' } }, { term: { 'subscription.status': 'provisioning' } }],
+        },
+      },
+    ],
+  },
+} as unknown as Filter;
+
+const outOfSyncSubscriptionsSearchPayload = getSubscriptionSummarySearchPayload(outOfSyncSubscriptionsFilter);
+
 export const WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
   const t = useTranslations('startPage.outOfSyncSubscriptions');
 
-  const {
-    data: outOfSyncSubscriptionsSummaryResult,
-    isFetching,
-    isLoading,
-  } = useGetSubscriptionSummaryListQuery(outOfSyncSubscriptionsListSummaryQueryVariables);
+  const { data, isFetching, isLoading } = useSearchQuery(outOfSyncSubscriptionsSearchPayload);
 
   const queryParams = {
     [WfoQueryParams.ACTIVE_TAB]: WfoSubscriptionListTab.ALL,
-    [WfoQueryParams.SORT_BY]: 'field-startDate_order-ASC',
-    [WfoQueryParams.QUERY_STRING]: 'status:(provisioning|active) insync:false',
+    [WfoQueryParams.FILTER_STRING]: OUT_OF_SYNC_CEL,
   };
 
   return (
     <WfoSummaryCard
       headerTitle={t('headerTitle')}
-      headerValue={outOfSyncSubscriptionsSummaryResult?.pageInfo.totalItems ?? '-'}
+      headerValue={data?.cursor?.total_items ?? '-'}
       headerStatus={SummaryCardStatus.Error}
       listTitle={t('listTitle')}
-      listItems={optionalArrayMapper(
-        outOfSyncSubscriptionsSummaryResult?.subscriptions,
-        mapSubscriptionSummaryToSummaryCardListItem,
-      )}
+      listItems={optionalArrayMapper(data?.data, mapSubscriptionSearchResultToSummaryCardListItem)}
       button={{
         name: t('buttonText'),
         url: getUrlWithQueryParams(PATH_SUBSCRIPTIONS, queryParams),

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

@@ -38,11 +38,6 @@ const SAPS_PATH_INFO = {
   availablePaths: ['saps.port'],
 } as unknown as PathInfo;
 
-const PREFILLED_FIELD_OPTIONS = new Map([
-  ['subscription.insync', ['eq', 'neq']],
-  ['subscription.status', ['eq', 'neq', 'like']],
-]);
-
 // The mocked backend only knows saps, returned for any prefix of it.
 const mockAutocomplete = (loading = false) =>
   jest.mocked(usePathAutocomplete).mockImplementation((prefix) => ({
@@ -56,7 +51,6 @@ const renderFieldSelector = (field: string = defaultPlaceholderFieldName) => {
   const onFieldSelected = jest.fn();
   const context: WfoQueryBuilderContext = {
     onFieldSelected,
-    prefilledFieldOptions: PREFILLED_FIELD_OPTIONS,
     fieldPathInfoMap: new Map(),
     useAdvancedNestedSearch: true,
   };
@@ -154,16 +148,6 @@ describe('WfoFieldSelector', () => {
     expect(listedOptions()).toEqual(['startTypingToLoadOptions']);
   });
 
-  it('lists matching prefilled fields alongside the backend paths', () => {
-    renderFieldSelector();
-
-    typeSearchTerm('ins');
-    expect(listedOptions()).toEqual(['subscription.insync']);
-
-    typeSearchTerm('s');
-    expect(listedOptions()).toEqual(['subscription.insync', 'subscription.status', 'saps', 'saps.port']);
-  });
-
   it('does not offer the raw typed text as an option and reports no match once loaded', () => {
     renderFieldSelector();
 

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

@@ -37,7 +37,7 @@ interface WfoFieldSelectorProps extends Omit<FieldSelectorProps, 'context'> {
 
 export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, disabled, rule, context }) => {
   const { field } = rule;
-  const { useAdvancedNestedSearch, prefilledFieldOptions, onFieldSelected } = context;
+  const { useAdvancedNestedSearch, onFieldSelected } = context;
   const [autoFocus] = useState(field === defaultPlaceholderFieldName);
   const selectedField = field === defaultPlaceholderFieldName ? '' : field;
   const [searchTerm, setSearchTerm] = useState('');
@@ -66,19 +66,13 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
     error: errorMessage,
   } = usePathAutocomplete(autocompletePrefix, EntityKind.SUBSCRIPTION);
 
-  const matchesPrefix = (path: string) => path.toLowerCase().includes(autocompletePrefix.toLowerCase());
-
-  const prefilledFields = Array.from(prefilledFieldOptions.keys()).filter(matchesPrefix);
-  const autocompleteOptions = getOptionsFromPathInfo(paths).filter(
-    (option) => !prefilledFields.includes(option.value ?? ''),
-  );
+  const autocompleteOptions = getOptionsFromPathInfo(paths);
 
   const startTypingHintOption: EuiComboBoxOptionOption<string> = {
     label: t('startTypingToLoadOptions'),
     disabled: true,
   };
-  const options: EuiComboBoxOptionOption<string>[] =
-    autocompletePrefix ? [...prefilledFields.map(getOption), ...autocompleteOptions] : [startTypingHintOption];
+  const options: EuiComboBoxOptionOption<string>[] = autocompletePrefix ? autocompleteOptions : [startTypingHintOption];
 
   const renderHintOption = (option: EuiComboBoxOptionOption<string>) => (
     <EuiText size="xs" color="default">
@@ -103,7 +97,7 @@ export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, di
     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);
   };

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

@@ -11,10 +11,11 @@ import { useTranslations } from 'next-intl';
 
 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 type { WfoGraphqlError } from '@/rtk';
 import type { FieldToOperatorMap, PathInfo, WfoQueryBuilderContext } from '@/types';
 import { EntityKind } from '@/types';
 
@@ -28,6 +29,7 @@ import { WfoValueEditor } from './WfoValueEditor';
 import { getWfoStructuredSearchTableStyles } from './styles';
 import {
   collectRuleFields,
+  hasNestedRuleWithEmptyValue,
   onAddGroupHandler,
   operatorsToRQBOperatorOptionsMapper,
   useSearchWithDebouncedCallback,
@@ -41,8 +43,8 @@ interface WfoFilterBuilderProps {
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
   handleSearch: (searchParams?: SearchParams) => void;
   onToggleFilterBuilder: (isVisible: boolean) => void;
-  prefilledFieldOptions: FieldToOperatorMap;
   useAdvancedNestedSearch?: boolean;
+  error?: WfoGraphqlError[];
 }
 
 const initialRuleGroup: RuleGroupType = {
@@ -58,13 +60,13 @@ export const WfoFilterBuilder = ({
   queryBuilderRuleGroup = initialRuleGroup,
   onUpdateQueryBuilder,
   handleSearch,
-  prefilledFieldOptions,
   onToggleFilterBuilder,
   useAdvancedNestedSearch = true,
+  error,
 }: WfoFilterBuilderProps) => {
   const t = useTranslations('common');
   const { queryBuilderContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
-  const [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(prefilledFieldOptions);
+  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
@@ -77,6 +79,7 @@ export const WfoFilterBuilder = ({
   const { handleSubmitSearchOnClick, pendingSearchRun, handleSubmitSearchOnEnter } = useSearchWithDebouncedCallback({
     filterString,
     isValidFilterString,
+    hasEmptyRuleValue: hasNestedRuleWithEmptyValue(queryBuilderRuleGroup),
     searchCallback: () => handleSearch({ ruleGroup: latestRuleGroupRef.current }),
   });
 
@@ -106,7 +109,6 @@ export const WfoFilterBuilder = ({
 
   const queryBuilderContext: WfoQueryBuilderContext = {
     onFieldSelected: handleFieldSelected,
-    prefilledFieldOptions,
     fieldPathInfoMap,
     useAdvancedNestedSearch,
   };
@@ -173,7 +175,7 @@ export const WfoFilterBuilder = ({
           />
         </EuiFlexItem>
 
-        <EuiFlexGroup direction={'rowReverse'} alignItems={'center'}>
+        <EuiFlexGroup direction={'rowReverse'} alignItems={'center'} gutterSize={'l'}>
           <WfoApplyFilterButton
             isDisabled={!isValidFilterString}
             pendingSearchRun={pendingSearchRun}
@@ -189,6 +191,7 @@ export const WfoFilterBuilder = ({
               onToggleFilterBuilder(false);
             }}
           />
+          <EuiFlexItem>{error && <WfoErrorWithMessage error={error} />}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexGroup>
     </EuiFlexGroup>

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" />
 

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

@@ -5,11 +5,13 @@ import { act, renderHook } from '@testing-library/react';
 
 import { FILTER_CHANGE_DEBOUNCE_DELAY, useSearchWithDebouncedCallback } from './utils';
 
+type SearchHookProps = { filterString: string; hasEmptyRuleValue?: boolean };
+
 const renderSearchHook = (searchCallback: () => void, initialFilterString = 'subscription.status == "active"') =>
   renderHook(
-    ({ filterString }: { filterString: string }) =>
-      useSearchWithDebouncedCallback({ filterString, isValidFilterString: true, searchCallback }),
-    { initialProps: { filterString: initialFilterString } },
+    ({ filterString, hasEmptyRuleValue = false }: SearchHookProps) =>
+      useSearchWithDebouncedCallback({ filterString, isValidFilterString: true, hasEmptyRuleValue, searchCallback }),
+    { initialProps: { filterString: initialFilterString } as SearchHookProps },
   );
 
 describe('useSearchWithDebouncedCallback', () => {
@@ -91,4 +93,55 @@ describe('useSearchWithDebouncedCallback', () => {
     });
     expect(searchCallback).toHaveBeenCalledTimes(1);
   });
+
+  it('does not schedule a search while a value editor is empty', () => {
+    const searchCallback = jest.fn();
+    const { result, rerender } = renderSearchHook(searchCallback);
+
+    // Clearing the value editor empties the value out of the filter string.
+    rerender({ filterString: 'subscription.status == ""', hasEmptyRuleValue: true });
+    expect(result.current.pendingSearchRun).toBeUndefined();
+
+    act(() => {
+      jest.advanceTimersByTime(FILTER_CHANGE_DEBOUNCE_DELAY);
+    });
+    expect(searchCallback).not.toHaveBeenCalled();
+
+    // Typing a value again resumes the automatic search.
+    rerender({ filterString: 'subscription.status == "a"', hasEmptyRuleValue: false });
+    expect(result.current.pendingSearchRun).toBeDefined();
+
+    act(() => {
+      jest.advanceTimersByTime(FILTER_CHANGE_DEBOUNCE_DELAY);
+    });
+    expect(searchCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it('drops a scheduled search when the value editor is cleared before it runs', () => {
+    const searchCallback = jest.fn();
+    const { result, rerender } = renderSearchHook(searchCallback);
+
+    rerender({ filterString: 'subscription.status == "activ"' });
+    expect(result.current.pendingSearchRun).toBeDefined();
+
+    rerender({ filterString: 'subscription.status == ""', hasEmptyRuleValue: true });
+    expect(result.current.pendingSearchRun).toBeUndefined();
+
+    act(() => {
+      jest.advanceTimersByTime(FILTER_CHANGE_DEBOUNCE_DELAY);
+    });
+    expect(searchCallback).not.toHaveBeenCalled();
+  });
+
+  it('still searches on click while a value editor is empty', () => {
+    const searchCallback = jest.fn();
+    const { result, rerender } = renderSearchHook(searchCallback);
+
+    rerender({ filterString: 'subscription.status == ""', hasEmptyRuleValue: true });
+
+    act(() => {
+      result.current.handleSubmitSearchOnClick();
+    });
+    expect(searchCallback).toHaveBeenCalledTimes(1);
+  });
 });

package/src/components/WfoTable/WfoStructuredSearchTable/utils.spec.ts

@@ -1,7 +1,7 @@
 import type { RuleGroupType, RuleType } from 'react-querybuilder';
 import { formatQuery } from 'react-querybuilder';
 
-import { collectRuleFields, parseCelToRuleGroup } from './utils';
+import { collectRuleFields, hasNestedRuleWithEmptyValue, parseCelToRuleGroup } from './utils';
 
 describe('parseCelToRuleGroup', () => {
   it('assigns ids to the parsed group and rules so rule identity stays stable', () => {
@@ -54,3 +54,62 @@ describe('collectRuleFields', () => {
     expect(collectRuleFields({ combinator: 'and', rules: [] })).toEqual([]);
   });
 });
+
+describe('hasRuleWithEmptyValue', () => {
+  const groupWith = (rules: RuleGroupType['rules']): RuleGroupType => ({ combinator: 'and', rules });
+
+  it('reports an empty text value, including whitespace only', () => {
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'subscription.status', operator: '=', value: '' }]))).toBe(
+      true,
+    );
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'subscription.status', operator: '=', value: '  ' }]))).toBe(
+      true,
+    );
+    expect(
+      hasNestedRuleWithEmptyValue(groupWith([{ field: 'subscription.status', operator: '=', value: 'active' }])),
+    ).toBe(false);
+  });
+
+  it('treats a missing value as empty and a committed boolean or number as filled', () => {
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'lldp', operator: '=', value: undefined }]))).toBe(true);
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'lldp', operator: '=', value: false }]))).toBe(false);
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'port.speed', operator: '>', value: 0 }]))).toBe(false);
+  });
+
+  it('reports a range with only one side filled in', () => {
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'port.speed', operator: 'between', value: '1000,' }]))).toBe(
+      true,
+    );
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'port.speed', operator: 'between', value: '1000' }]))).toBe(
+      true,
+    );
+    expect(
+      hasNestedRuleWithEmptyValue(groupWith([{ field: 'port.speed', operator: 'between', value: '1000,2000' }])),
+    ).toBe(false);
+  });
+
+  it('never reports operators that take no value, whatever their leftover value is', () => {
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'port', operator: 'notNull', value: null }]))).toBe(false);
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'port', operator: 'null', value: null }]))).toBe(false);
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'port', operator: 'notNull', value: '' }]))).toBe(false);
+    expect(hasNestedRuleWithEmptyValue(groupWith([{ field: 'port', operator: 'null', value: 'abc' }]))).toBe(false);
+  });
+
+  it('does not hold back a search for a filter restored from CEL that uses has component', () => {
+    expect(hasNestedRuleWithEmptyValue(parseCelToRuleGroup('subscription.port != null'))).toBe(false);
+    expect(hasNestedRuleWithEmptyValue(parseCelToRuleGroup('subscription.port == null'))).toBe(false);
+  });
+
+  it('looks inside nested groups', () => {
+    const ruleGroup = groupWith([
+      { field: 'subscription.status', operator: '=', value: 'active' },
+      groupWith([{ field: 'subscription.note', operator: 'contains', value: '' }]),
+    ]);
+
+    expect(hasNestedRuleWithEmptyValue(ruleGroup)).toBe(true);
+  });
+
+  it('returns false without a rule group', () => {
+    expect(hasNestedRuleWithEmptyValue(undefined)).toBe(false);
+  });
+});