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

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

@@ -1,22 +1,22 @@
 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 { 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 { FieldToOperatorMap, PathInfo, WfoQueryBuilderContext } from '@/types';
+import { EntityKind } from '@/types';
 
 import { WfoFieldSelector } from './WfoFieldSelector';
 import { WfoInlineCombinator } from './WfoInlineCombinator';
@@ -26,41 +26,12 @@ 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',
-  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' },
-};
+import {
+  collectRuleFields,
+  onAddGroupHandler,
+  operatorsToRQBOperatorOptionsMapper,
+  useSearchWithDebouncedCallback,
+} from './utils';
 
 interface WfoFilterBuilderProps {
   filterString?: string;
@@ -76,15 +47,10 @@ interface WfoFilterBuilderProps {
 
 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,
@@ -96,24 +62,9 @@ export const WfoFilterBuilder = ({
   onToggleFilterBuilder,
   useAdvancedNestedSearch = true,
 }: 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 [fieldPathInfoMap, setFieldPathInfoMap] = useState<Map<string, PathInfo>>(new Map());
 
   // Enter in a value editor commits its value on blur, and that state update has not
@@ -123,9 +74,11 @@ 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,
+    searchCallback: () => handleSearch({ ruleGroup: latestRuleGroupRef.current }),
+  });
 
   const handleFieldSelected = (field: string, operators: string[], pathInfo?: PathInfo) => {
     setFieldToOperatorMap((previousMap) => {
@@ -155,7 +108,6 @@ export const WfoFilterBuilder = ({
     onFieldSelected: handleFieldSelected,
     prefilledFieldOptions,
     fieldPathInfoMap,
-    onValueEditorEnter: handleValueEditorEnter,
     useAdvancedNestedSearch,
   };
 
@@ -170,7 +122,7 @@ export const WfoFilterBuilder = ({
   return (
     <EuiFlexGroup css={queryBuilderContainerStyles}>
       <EuiFlexGroup direction={'column'}>
-        <EuiFlexItem>
+        <EuiFlexItem onKeyDown={handleSubmitSearchOnEnter}>
           <QueryBuilder
             query={queryBuilderRuleGroup}
             enableMountQueryChange={false}
@@ -181,11 +133,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,
@@ -218,33 +168,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>
+          <WfoApplyFilterButton
+            isDisabled={!isValidFilterString}
+            pendingSearchRun={pendingSearchRun}
+            onClick={handleSubmitSearchOnClick}
+          />
           <WfoTextAnchor
             text={t('removeFilter')}
             onClick={() => {

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/WfoStructuredSearchTable.tsx

@@ -307,12 +307,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>
       )}
 

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

@@ -85,7 +85,9 @@ const TextEditor = ({ handleOnChange, value: currentValue = '' }: EditorInputFie
   const [value, setValue] = useState<string>(currentValue);
 
   const handleTextChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setValue(e.target.value || '');
+    const nextValue = e.target.value || '';
+    setValue(nextValue);
+    handleOnChange(nextValue);
   };
 
   const handleOnBlur = () => {
@@ -105,7 +107,11 @@ const NumberEditor = ({ handleOnChange, value: currentValue }: EditorInputFieldP
   const [value, setValue] = useState<string>(currentValue?.toString() || '');
 
   const handleNumberChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setValue(e.target.value || '');
+    const nextValue = e.target.value || '';
+    setValue(nextValue);
+    const numberValue = parseFloat(nextValue);
+    if (Number.isNaN(numberValue)) return;
+    handleOnChange(numberValue);
   };
 
   const handleOnBlur = () => {
@@ -193,21 +199,11 @@ export const WfoValueEditor = ({
     return <InputElement handleOnChange={handleOnChange} value={value} />;
   };
 
-  const handleWrapperKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
-    if (event.key !== 'Enter') return;
-    // Restrict to the editor inputs: the editors' own Enter handlers have already run
-    // (bubble phase) and committed the value via blur, so the search sees it. Enter on
-    // the boolean buttons means "select" — its click fires only after this keydown, so
-    // searching there would use the pre-toggle value.
-    if (!(event.target instanceof HTMLInputElement)) return;
-    queryBuilderContext?.onValueEditorEnter();
-  };
-
   // react-querybuilder delivers the standard `rule-value` class via this prop; the wrapper
   // makes it queryable in the DOM (WfoFieldSelector relies on it to move focus here).
   // `display: contents` keeps the children direct participants in the rule's flex row.
   return (
-    <div className={className} style={{ display: 'contents' }} onKeyDown={handleWrapperKeyDown}>
+    <div className={className} style={{ display: 'contents' }}>
       {getEditor()}
     </div>
   );

package/src/components/WfoTable/WfoStructuredSearchTable/styles.ts

@@ -168,6 +168,12 @@ export const getWfoStructuredSearchTableStyles = ({ theme, isDarkModeActive }: W
     padding: `${theme.base / 8}px ${theme.base / 4}px`,
   });
 
+  const applyFilterContentStyles = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.base / 2,
+  });
+
   const expandingRowFieldStyles = css({
     display: 'flex',
     padding: `${theme.base / 8}px ${theme.base / 4}px`,
@@ -193,6 +199,7 @@ export const getWfoStructuredSearchTableStyles = ({ theme, isDarkModeActive }: W
     ruleGroupBodyGridStyles,
     hideExpandedRowStyle,
     expandingRowFieldStyles,
+    applyFilterContentStyles,
     dotStyles,
   };
 };

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

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import '@testing-library/jest-dom';
+import { act, renderHook } from '@testing-library/react';
+
+import { FILTER_CHANGE_DEBOUNCE_DELAY, useSearchWithDebouncedCallback } from './utils';
+
+const renderSearchHook = (searchCallback: () => void, initialFilterString = 'subscription.status == "active"') =>
+  renderHook(
+    ({ filterString }: { filterString: string }) =>
+      useSearchWithDebouncedCallback({ filterString, isValidFilterString: true, searchCallback }),
+    { initialProps: { filterString: initialFilterString } },
+  );
+
+describe('useSearchWithDebouncedCallback', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('schedules a search when the filter string changes, and not for the one it starts with', () => {
+    const searchCallback = jest.fn();
+    const { result, rerender } = renderSearchHook(searchCallback);
+
+    act(() => {
+      jest.advanceTimersByTime(FILTER_CHANGE_DEBOUNCE_DELAY);
+    });
+    expect(searchCallback).not.toHaveBeenCalled();
+
+    rerender({ filterString: 'subscription.status == "activ"' });
+    expect(result.current.pendingSearchRun).toBeDefined();
+
+    act(() => {
+      jest.advanceTimersByTime(FILTER_CHANGE_DEBOUNCE_DELAY);
+    });
+    expect(searchCallback).toHaveBeenCalledTimes(1);
+    expect(result.current.pendingSearchRun).toBeUndefined();
+  });
+
+  it('searches immediately on click, dropping the countdown and the run it had scheduled', () => {
+    const searchCallback = jest.fn();
+    const { result, rerender } = renderSearchHook(searchCallback);
+
+    rerender({ filterString: 'subscription.status == "activ"' });
+    expect(result.current.pendingSearchRun).toBeDefined();
+
+    act(() => {
+      result.current.handleSubmitSearchOnClick();
+    });
+    expect(searchCallback).toHaveBeenCalledTimes(1);
+    expect(result.current.pendingSearchRun).toBeUndefined();
+
+    // The scheduled run was cancelled rather than left to fire a second search.
+    act(() => {
+      jest.advanceTimersByTime(FILTER_CHANGE_DEBOUNCE_DELAY);
+    });
+    expect(searchCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it('does the same on enter, and leaves shift+enter alone', () => {
+    const searchCallback = jest.fn();
+    const { result, rerender } = renderSearchHook(searchCallback);
+
+    rerender({ filterString: 'subscription.status == "activ"' });
+
+    act(() => {
+      result.current.handleSubmitSearchOnEnter({
+        key: 'Enter',
+        shiftKey: true,
+        preventDefault: jest.fn(),
+      } as unknown as React.KeyboardEvent<HTMLElement>);
+    });
+    expect(searchCallback).not.toHaveBeenCalled();
+    expect(result.current.pendingSearchRun).toBeDefined();
+
+    act(() => {
+      result.current.handleSubmitSearchOnEnter({
+        key: 'Enter',
+        shiftKey: false,
+        preventDefault: jest.fn(),
+      } as unknown as React.KeyboardEvent<HTMLElement>);
+    });
+    expect(searchCallback).toHaveBeenCalledTimes(1);
+    expect(result.current.pendingSearchRun).toBeUndefined();
+
+    act(() => {
+      jest.advanceTimersByTime(FILTER_CHANGE_DEBOUNCE_DELAY);
+    });
+    expect(searchCallback).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -1,7 +1,61 @@
-import type { RuleGroupType } from 'react-querybuilder';
+import { type KeyboardEventHandler, useEffect, useRef } from 'react';
+import { FullOperator, RuleGroupType, generateID } from 'react-querybuilder';
 import { prepareRuleGroup } from 'react-querybuilder';
 import { parseCEL } from 'react-querybuilder/parseCEL';
 
+import { useDebouncedCallback } from '@/hooks';
+import { OperatorDisplay } from '@/types';
+
+export const FILTER_CHANGE_DEBOUNCE_DELAY = 1000;
+
+interface SearchWithDebouncedCallbackProps {
+  filterString?: string;
+  isValidFilterString: boolean;
+  searchCallback: () => void;
+}
+
+export const useSearchWithDebouncedCallback = ({
+  filterString,
+  isValidFilterString,
+  searchCallback,
+}: SearchWithDebouncedCallbackProps) => {
+  const {
+    trigger: triggerSearch,
+    cancel: cancelSearch,
+    pendingRun: pendingSearchRun,
+  } = useDebouncedCallback(searchCallback);
+  const lastFilterStringRef = useRef(filterString);
+
+  const handleSubmitSearchOnClick = () => {
+    if (!isValidFilterString) return;
+    triggerSearch();
+    return;
+  };
+
+  useEffect(() => {
+    const hasFilterStringChanged = filterString !== lastFilterStringRef.current;
+    lastFilterStringRef.current = filterString;
+
+    if (!hasFilterStringChanged) return;
+
+    if (isValidFilterString) {
+      triggerSearch(FILTER_CHANGE_DEBOUNCE_DELAY);
+    } else {
+      cancelSearch();
+    }
+  }, [filterString, isValidFilterString, triggerSearch, cancelSearch]);
+
+  // Enter applies the filter exactly like that button; Shift+Enter is left alone so it can
+  // insert a newline in a textarea.
+  const handleSubmitSearchOnEnter: KeyboardEventHandler<HTMLElement> = (event) => {
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    event.preventDefault();
+    handleSubmitSearchOnClick();
+  };
+
+  return { handleSubmitSearchOnClick, pendingSearchRun, handleSubmitSearchOnEnter };
+};
+
 /** Collects the unique field names used by the rules of a rule group, including nested groups. */
 export const collectRuleFields = (ruleGroup: RuleGroupType): string[] => {
   const fields = ruleGroup.rules.flatMap((rule) => {
@@ -82,3 +136,57 @@ export const buildColumnFilter = <T>(
 
   return { filterString, ruleGroup };
 };
+
+// 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' },
+};
+
+export const operatorsToRQBOperatorOptionsMapper = (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' }),
+    };
+  });
+};
+
+export const onAddGroupHandler = (ruleGroup: RuleGroupType): RuleGroupType => {
+  const [firstRule] = ruleGroup.rules;
+  return firstRule ? { ...ruleGroup, rules: [...ruleGroup.rules, { ...firstRule, id: generateID() }] } : ruleGroup;
+};

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx

@@ -37,7 +37,8 @@ export const TableSettingsModal = <T,>({
   extraSettings,
 }: TableSettingsModalProps<T>) => {
   const t = useTranslations('main');
-  const { formRowStyle, columnsListStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
+  const { formStyle, formRowStyle, columnsListStyle, selectFieldStyle } =
+    useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
   const scrollBarStyle = useEuiScrollBar();
 
   const [columns, setColumns] = useState(tableConfig.columns);
@@ -72,7 +73,7 @@ export const TableSettingsModal = <T,>({
         })
       }
     >
-      <EuiForm>
+      <EuiForm css={formStyle}>
         <div css={[columnsListStyle, scrollBarStyle]}>
           {columns.map(({ field, name, isVisible }) => (
             <div key={field.toString()}>

package/src/components/WfoTable/WfoTableSettingsModal/styles.ts

@@ -14,6 +14,15 @@ export const getWfoTableSettingsModalStyles = (wfoThemeHelpers: WfoThemeHelpers)
     },
   });
 
+  const formStyle = css({
+    '.euiFormRow .euiFormRow__labelWrapper': {
+      flexBasis: '50%',
+    },
+    '.euiFormRow .euiFormRow__fieldWrapper': {
+      flexBasis: '50%',
+    },
+  });
+
   const { theme } = wfoThemeHelpers;
 
   const columnsListStyle = css({
@@ -30,6 +39,7 @@ export const getWfoTableSettingsModalStyles = (wfoThemeHelpers: WfoThemeHelpers)
   });
 
   return {
+    formStyle,
     formRowStyle,
     columnsListStyle,
     selectFieldStyle: formFieldBaseStyle,

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.9.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.9.3';

package/src/hooks/index.ts

@@ -16,3 +16,4 @@ export * from './useGetWorkflowNameById';
 export * from './usePathAutoComplete';
 export * from './useGetPydanticFormsConfig';
 export * from './useLanguageCode';
+export * from './useDebouncedCallback';

package/src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// The run currently scheduled: its `delay` lets a countdown indicator animate over exactly the
+// remaining wait, and its `id` changes per scheduled run so the indicator can restart itself.
+export type DebouncedPendingRun = {
+  id: number;
+  delay: number;
+};
+
+interface DebouncedCallback {
+  trigger: (delay?: number) => void;
+  cancel: () => void;
+  pendingRun?: DebouncedPendingRun;
+}
+
+export function useDebouncedCallback(callback: () => void): DebouncedCallback {
+  const callbackRef = useRef(callback);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const runIdRef = useRef(0);
+  const [pendingRun, setPendingRun] = useState<DebouncedPendingRun>();
+  callbackRef.current = callback;
+
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+  const trigger = useCallback((delay?: number) => {
+    clearTimeout(timeoutRef.current);
+
+    if (delay === undefined) {
+      setPendingRun(undefined);
+      callbackRef.current();
+      return;
+    }
+
+    const id = ++runIdRef.current;
+    setPendingRun({ id, delay });
+    timeoutRef.current = setTimeout(() => {
+      setPendingRun(undefined);
+      callbackRef.current();
+    }, delay);
+  }, []);
+
+  const cancel = useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    setPendingRun(undefined);
+  }, []);
+
+  return { trigger, cancel, pendingRun };
+}

package/src/hooks/useGetPydanticFormsConfig.tsx

@@ -208,7 +208,8 @@ const useGetComponentMatcherExtender = (): ComponentMatcherExtender => {
         ...currentMatchers
           .filter((matcher) => matcher.id !== 'text')
           .filter((matcher) => matcher.id !== 'array')
-          .filter((matcher) => matcher.id !== 'object'),
+          .filter((matcher) => matcher.id !== 'object')
+          .filter((matcher) => matcher.id !== 'list'),
         {
           id: 'object',
           ElementMatch: {