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

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,147 @@
+import React from 'react';
+
+import '@testing-library/jest-dom';
+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, hasEmptyRuleValue = false }: SearchHookProps) =>
+      useSearchWithDebouncedCallback({ filterString, isValidFilterString: true, hasEmptyRuleValue, searchCallback }),
+    { initialProps: { filterString: initialFilterString } as SearchHookProps },
+  );
+
+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);
+  });
+
+  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);
+  });
+});

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

@@ -1,7 +1,63 @@
-import type { RuleGroupType } from 'react-querybuilder';
+import { type KeyboardEventHandler, useEffect, useRef } from 'react';
+import { FullOperator, RuleGroupType, RuleType, 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;
+  hasEmptyRuleValue?: boolean;
+  searchCallback: () => void;
+}
+
+export const useSearchWithDebouncedCallback = ({
+  filterString,
+  isValidFilterString,
+  hasEmptyRuleValue = false,
+  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 && !hasEmptyRuleValue) {
+      triggerSearch(FILTER_CHANGE_DEBOUNCE_DELAY);
+    } else {
+      cancelSearch();
+    }
+  }, [filterString, isValidFilterString, hasEmptyRuleValue, 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 +138,79 @@ 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 isEmptyValue = (rule: RuleType): boolean => {
+  const { value } = rule;
+  if (RQB_UNARY_OPERATORS.includes(rule.operator)) {
+    return false;
+  } else if (typeof value !== 'string') {
+    return value === undefined || value === null;
+  } else if (rule.operator === 'between') {
+    const rangeParts = value.split(',');
+    return rangeParts.length < 2 || rangeParts.some((rangePart) => rangePart.trim() === '');
+  }
+  return value.trim() === '';
+};
+
+/** True when any rule of the group, nested groups included, has an empty value editor. */
+export const hasNestedRuleWithEmptyValue = (ruleGroup?: RuleGroupType): boolean =>
+  !!ruleGroup?.rules.some((rule) => {
+    if (typeof rule === 'string') {
+      return false;
+    }
+    return 'rules' in rule ? hasNestedRuleWithEmptyValue(rule) : isEmptyValue(rule);
+  });
+
+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/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.9.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '9.0.0';

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/usePathAutoComplete.spec.tsx

@@ -1,15 +1,15 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 
-import { EntityKind } from '@/types';
+import { useSearchPathsQuery } from '@/rtk/endpoints';
+import { EntityKind, PathAutocompleteResponse } from '@/types';
 
-import { useFieldsPathInfo } from './usePathAutoComplete';
+import { useFieldsPathInfo, usePathAutocomplete } from './usePathAutoComplete';
 
 const fetchPathsMock = jest.fn();
 
-jest.mock('@/rtk/endpoints', () => ({
-  useSearchPathsQuery: jest.fn(),
-  useLazySearchPathsQuery: () => [fetchPathsMock],
-  useSearchDefinitionsQuery: () => ({
+jest.mock('@/rtk/endpoints', () => {
+  // Stable like RTK Query's cached data: the hooks depend on it in effects.
+  const definitionsResult = {
     data: {
       boolean: {
         operators: ['eq', 'neq'],
@@ -17,8 +17,13 @@ jest.mock('@/rtk/endpoints', () => ({
       },
     },
     isError: false,
-  }),
-}));
+  };
+  return {
+    useSearchPathsQuery: jest.fn(),
+    useLazySearchPathsQuery: () => [fetchPathsMock],
+    useSearchDefinitionsQuery: () => definitionsResult,
+  };
+});
 
 describe('useFieldsPathInfo', () => {
   beforeEach(() => {
@@ -62,3 +67,83 @@ describe('useFieldsPathInfo', () => {
     expect(fetchPathsMock).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('usePathAutocomplete', () => {
+  const SAPS_RESPONSE = {
+    leaves: [],
+    components: [{ name: 'saps', ui_types: ['component'], paths: ['saps.port', 'saps.vlan'] }],
+  };
+  const EMPTY_RESPONSE: PathAutocompleteResponse = { leaves: [], components: [] };
+
+  // Only the fields the hook reads; the full RTK Query result type is far larger.
+  const mockSearchPaths = (
+    getData: (args: { q: string }, options?: { skip?: boolean }) => PathAutocompleteResponse | undefined,
+  ) =>
+    jest.mocked(useSearchPathsQuery).mockImplementation(((args: { q: string }, options?: { skip?: boolean }) => ({
+      data: getData(args, options),
+      isFetching: false,
+      isError: false,
+    })) as unknown as typeof useSearchPathsQuery);
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    mockSearchPaths((args, options) => {
+      if (options?.skip) return undefined;
+      return args.q === 'sa' ? SAPS_RESPONSE : EMPTY_RESPONSE;
+    });
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('skips the paths request and offers no paths while the prefix is empty', () => {
+    const { result } = renderHook(() => usePathAutocomplete('', EntityKind.SUBSCRIPTION));
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    expect(useSearchPathsQuery).toHaveBeenCalled();
+    jest.mocked(useSearchPathsQuery).mock.calls.forEach(([, options]) => expect(options?.skip).toBe(true));
+    expect(result.current.paths).toEqual([]);
+  });
+
+  it('reports loading from the keystroke until the debounced request has settled', async () => {
+    const { result, rerender } = renderHook(({ prefix }) => usePathAutocomplete(prefix, EntityKind.SUBSCRIPTION), {
+      initialProps: { prefix: '' },
+    });
+    expect(result.current.loading).toBe(false);
+
+    rerender({ prefix: 'sa' });
+    expect(result.current.loading).toBe(true);
+    expect(result.current.paths).toEqual([]);
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.paths).toHaveLength(1);
+  });
+
+  it('maps the components returned for a typed prefix, e.g. saps for "sa"', async () => {
+    const { result } = renderHook(() => usePathAutocomplete('sa', EntityKind.SUBSCRIPTION));
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    await waitFor(() => expect(result.current.paths).toHaveLength(1));
+    expect(useSearchPathsQuery).toHaveBeenLastCalledWith(
+      { q: 'sa', entity_type: EntityKind.SUBSCRIPTION },
+      { skip: false },
+    );
+    expect(result.current.paths[0]).toMatchObject({
+      path: 'saps',
+      type: 'component',
+      group: 'component',
+      availablePaths: ['saps.port', 'saps.vlan'],
+    });
+  });
+});

package/src/hooks/usePathAutoComplete.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { useLazySearchPathsQuery, useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
 import { EntityKind, PathAutocompleteResponse, PathInfo, value_schema } from '@/types';
@@ -97,35 +97,30 @@ const mapPathAutocompleteResponseToPathInfos = (
 };
 
 export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
-  const [paths, setPaths] = useState<PathInfo[]>([]);
   const debouncedPrefix = useDebounce(prefix, 300);
   const { data: definitions = FALLBACK_DEFINITIONS, isError: defError } = useSearchDefinitionsQuery();
 
   const {
     data: pathData,
-    isLoading,
+    isFetching,
     isError,
   } = useSearchPathsQuery({ q: debouncedPrefix, entity_type: entityType }, { skip: debouncedPrefix.length < 1 });
 
-  useEffect(() => {
-    if (debouncedPrefix.length < 1) {
-      setPaths([]);
-      return;
-    }
-
-    if (!pathData) {
-      return;
-    }
+  const paths = useMemo(
+    () =>
+      debouncedPrefix.length < 1 || !pathData ? [] : mapPathAutocompleteResponseToPathInfos(pathData, definitions),
+    [pathData, definitions, debouncedPrefix.length],
+  );
 
-    setPaths(mapPathAutocompleteResponseToPathInfos(pathData, definitions));
-  }, [pathData, definitions, debouncedPrefix?.length]);
+  const isDebouncing = prefix.length >= 1 && prefix !== debouncedPrefix;
+  const loading = isDebouncing || isFetching;
 
   const errorMessage =
     isError ? 'Failed to load paths'
     : defError ? 'Failed to load definitions'
     : null;
 
-  return { paths, loading: isLoading, error: errorMessage };
+  return { paths, loading, error: errorMessage };
 };
 
 /**

package/src/hooks/useSearchPagination.ts

@@ -51,7 +51,7 @@ export const useSearchPagination = (
         {
           page: currentPage,
           results: results.data,
-          cursor: results.cursor.start_cursor,
+          cursor: results.cursor?.start_cursor ?? null,
         },
       ]);