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

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,
         },
       ]);
 

package/src/messages/en-GB.json

@@ -372,6 +372,7 @@
       "previousPage": "Previous page",
       "removeConditionAriaLabel": "Remove condition",
       "removeGroup": "Remove group",
+      "loadingOptions": "Loading options",
       "removeRule": "Remove rule",
       "resultsOnPage": "{resultCount} result(s) on this page",
       "retrieval": "Retrieval",
@@ -380,7 +381,7 @@
       "retrieverHybrid": "Hybrid",
       "retrieverSemantic": "Semantic",
       "searchError": "Error",
-      "searchFieldsPlaceholder": "Search fields...",
+      "searchFieldsPlaceholder": "Type to select fields",
       "searchPlaceholder": "Search for {entityType}…",
       "searchResultsPagination": "Search results pagination",
       "selectDateAndTime": "Select date",
@@ -388,6 +389,7 @@
       "selectOrEnterValue": "Select or type value",
       "selectSpecificPathPlaceholder": "Select a specific path...",
       "showFilters": "Show filters",
+      "startTypingToLoadOptions": "Start typing to load options",
       "structuredFilters": "Structured filters",
       "toDate": "To date",
       "toNumber": "To",

package/src/messages/nl-NL.json

@@ -372,6 +372,7 @@
       "previousPage": "Vorige pagina",
       "removeConditionAriaLabel": "Conditie verwijderen",
       "removeGroup": "Groep verwijderen",
+      "loadingOptions": "Opties laden",
       "removeRule": "Regel verwijderen",
       "resultsOnPage": "{resultCount} resulta(a)t(en) op deze pagina",
       "retrieval": "Retrieval",
@@ -380,7 +381,7 @@
       "retrieverHybrid": "Hybride",
       "retrieverSemantic": "Semantic",
       "searchError": "Fout",
-      "searchFieldsPlaceholder": "Zoek velden...",
+      "searchFieldsPlaceholder": "Typ om velden te selecteren",
       "searchPlaceholder": "Zoek naar {entityType}…",
       "searchResultsPagination": "Paginering zoekresultaten",
       "selectDateAndTime": "Selecteer datum",
@@ -388,6 +389,7 @@
       "selectOrEnterValue": "Selecteer of typ een waarde",
       "selectSpecificPathPlaceholder": "Selecteer een specifiek pad...",
       "showFilters": "Toon filters",
+      "startTypingToLoadOptions": "Begin met typen om opties te laden",
       "structuredFilters": "Gestructureerde filters",
       "toDate": "Tot datum",
       "toNumber": "Tot",

package/src/pages/WfoSearchPocPage.tsx

@@ -129,17 +129,17 @@ const resultColumToPropertyMap: ResultColumToPropertyMap<SubscriptionListItem> =
 
 /* These options will be added as the first options in the field dropdown in the FieldSelector */
 const prefilledFieldOptions: FieldToOperatorMap = new Map([
-  ['subscription.subscription_id', ['eq', 'neq', 'like']],
-  ['subscription.description', ['eq', 'neq', 'like']],
-  ['subscription.status', ['eq', 'neq', 'like']],
+  ['subscription.subscription_id', ['eq', 'neq', 'like', 'not_regexp']],
+  ['subscription.description', ['eq', 'neq', 'like', 'not_regexp']],
+  ['subscription.status', ['eq', 'neq', 'like', 'not_regexp']],
   ['subscription.insync', ['eq', 'neq']],
-  ['subscription.product.name', ['eq', 'neq', 'like']],
-  ['subscription.product.tag', ['eq', 'neq', 'like']],
-  ['subscription.customer_name', ['eq', 'neq', 'like']],
-  ['subscription.customer_abbreviation', ['eq', 'neq', 'like']],
+  ['subscription.product.name', ['eq', 'neq', 'like', 'not_regexp']],
+  ['subscription.product.tag', ['eq', 'neq', 'like', 'not_regexp']],
+  ['subscription.customer_name', ['eq', 'neq', 'like', 'not_regexp']],
+  ['subscription.customer_abbreviation', ['eq', 'neq', 'like', 'not_regexp']],
   ['subscription.start_date', ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between']],
   ['subscription.end_date', ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between']],
-  ['subscription.note', ['eq', 'neq', 'like']],
+  ['subscription.note', ['eq', 'neq', 'like', 'not_regexp']],
 ]);
 
 export const WfoSearchPocPage = () => {

package/src/types/search.ts

@@ -35,7 +35,7 @@ export type PaginatedSearchResults = {
     total_items: number;
     start_cursor: number;
     end_cursor: number;
-  };
+  } | null;
   page_info: {
     has_next_page: boolean;
     next_page_cursor: string | null;
@@ -219,6 +219,5 @@ export type WfoQueryBuilderContext = {
   onFieldSelected: (field: string, operators: string[], pathInfo?: PathInfo) => void;
   prefilledFieldOptions: FieldToOperatorMap;
   fieldPathInfoMap: Map<string, PathInfo>;
-  onValueEditorEnter: () => void;
   useAdvancedNestedSearch: boolean;
 };