@orchestrator-ui/orchestrator-ui-components 8.7.2 → 8.7.3

package/src/hooks/usePathAutoComplete.spec.tsx

@@ -0,0 +1,64 @@
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { EntityKind } from '@/types';
+
+import { useFieldsPathInfo } from './usePathAutoComplete';
+
+const fetchPathsMock = jest.fn();
+
+jest.mock('@/rtk/endpoints', () => ({
+  useSearchPathsQuery: jest.fn(),
+  useLazySearchPathsQuery: () => [fetchPathsMock],
+  useSearchDefinitionsQuery: () => ({
+    data: {
+      boolean: {
+        operators: ['eq', 'neq'],
+        value_schema: { eq: { kind: 'boolean' }, neq: { kind: 'boolean' } },
+      },
+    },
+    isError: false,
+  }),
+}));
+
+describe('useFieldsPathInfo', () => {
+  beforeEach(() => {
+    fetchPathsMock.mockImplementation(({ q }: { q: string }) => ({
+      unwrap: () =>
+        Promise.resolve(
+          q === 'lldp' ?
+            { leaves: [{ name: 'lldp', ui_types: ['boolean'], paths: [] }], components: [] }
+          : { leaves: [], components: [] },
+        ),
+    }));
+  });
+
+  it('resolves the path info of an exactly matching leaf', async () => {
+    const { result } = renderHook(() => useFieldsPathInfo(['lldp'], EntityKind.SUBSCRIPTION));
+
+    await waitFor(() => expect(result.current.get('lldp')).toBeTruthy());
+    expect(result.current.get('lldp')).toMatchObject({
+      path: 'lldp',
+      ui_types: ['boolean'],
+      operators: ['eq', 'neq'],
+    });
+  });
+
+  it('stores null for a field the backend does not know', async () => {
+    const { result } = renderHook(() => useFieldsPathInfo(['nonexistent'], EntityKind.SUBSCRIPTION));
+
+    await waitFor(() => expect(result.current.has('nonexistent')).toBe(true));
+    expect(result.current.get('nonexistent')).toBeNull();
+  });
+
+  it('looks up each field at most once across rerenders', async () => {
+    const { result, rerender } = renderHook(({ fields }) => useFieldsPathInfo(fields, EntityKind.SUBSCRIPTION), {
+      initialProps: { fields: ['lldp'] },
+    });
+
+    await waitFor(() => expect(result.current.has('lldp')).toBe(true));
+    rerender({ fields: ['lldp'] });
+    rerender({ fields: ['lldp'] });
+
+    expect(fetchPathsMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/usePathAutoComplete.ts

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
-import { EntityKind, PathInfo, value_schema } from '@/types';
+import { useLazySearchPathsQuery, useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
+import { EntityKind, PathAutocompleteResponse, PathInfo, value_schema } from '@/types';
 
 import { useDebounce } from './useDebounce';
 
@@ -50,6 +50,52 @@ const FALLBACK_DEFINITIONS: Record<
   },
 };
 
+type SearchDefinitions = typeof FALLBACK_DEFINITIONS;
+
+const mapPathAutocompleteResponseToPathInfos = (
+  pathData: PathAutocompleteResponse,
+  definitions: SearchDefinitions,
+): PathInfo[] => {
+  const enrichedPaths: PathInfo[] = [];
+
+  // Process leaves first
+  (pathData.leaves || []).forEach((leaf) => {
+    const primaryType = leaf.ui_types[0] || 'string';
+    const typeDefinition = definitions[primaryType];
+
+    enrichedPaths.push({
+      path: leaf.name,
+      type: primaryType as 'string' | 'number' | 'datetime' | 'boolean',
+      operators: typeDefinition?.operators || [],
+      value_schema: typeDefinition?.value_schema || {},
+      group: 'leaf',
+      displayLabel: leaf.name,
+      ui_types: leaf.ui_types,
+      availablePaths: leaf.paths || [],
+      pathCount: leaf.paths ? leaf.paths?.length : 0,
+    });
+  });
+
+  (pathData.components || []).forEach((component) => {
+    const primaryType = component.ui_types[0] || 'string';
+    const typeDefinition = definitions[primaryType];
+
+    enrichedPaths.push({
+      path: component.name,
+      type: 'component',
+      operators: typeDefinition?.operators || [],
+      value_schema: typeDefinition?.value_schema || {},
+      group: 'component',
+      displayLabel: component.name,
+      ui_types: component.ui_types,
+      availablePaths: component.paths || [],
+      pathCount: component.paths ? component.paths?.length : 0,
+    });
+  });
+
+  return enrichedPaths;
+};
+
 export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
   const [paths, setPaths] = useState<PathInfo[]>([]);
   const debouncedPrefix = useDebounce(prefix, 300);
@@ -71,44 +117,7 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
       return;
     }
 
-    const enrichedPaths: PathInfo[] = [];
-
-    // Process leaves first
-    (pathData.leaves || []).forEach((leaf) => {
-      const primaryType = leaf.ui_types[0] || 'string';
-      const typeDefinition = definitions[primaryType];
-
-      enrichedPaths.push({
-        path: leaf.name,
-        type: primaryType as 'string' | 'number' | 'datetime' | 'boolean',
-        operators: typeDefinition?.operators || [],
-        value_schema: typeDefinition?.value_schema || {},
-        group: 'leaf',
-        displayLabel: leaf.name,
-        ui_types: leaf.ui_types,
-        availablePaths: leaf.paths || [],
-        pathCount: leaf.paths ? leaf.paths?.length : 0,
-      });
-    });
-
-    (pathData.components || []).forEach((component) => {
-      const primaryType = component.ui_types[0] || 'string';
-      const typeDefinition = definitions[primaryType];
-
-      enrichedPaths.push({
-        path: component.name,
-        type: 'component',
-        operators: typeDefinition?.operators || [],
-        value_schema: typeDefinition?.value_schema || {},
-        group: 'component',
-        displayLabel: component.name,
-        ui_types: component.ui_types,
-        availablePaths: component.paths || [],
-        pathCount: component.paths ? component.paths?.length : 0,
-      });
-    });
-
-    setPaths(enrichedPaths);
+    setPaths(mapPathAutocompleteResponseToPathInfos(pathData, definitions));
   }, [pathData, definitions, debouncedPrefix?.length]);
 
   const errorMessage =
@@ -118,3 +127,51 @@ export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
 
   return { paths, loading: isLoading, error: errorMessage };
 };
+
+/**
+ * Resolves PathInfo for exact field paths that were never picked through the field
+ * selector, e.g. the fields of a query restored from the URL. Returns a map that gains
+ * an entry per field once its lookup settles: the matching PathInfo, or null when the
+ * backend does not know the path. Each field is looked up at most once.
+ */
+export const useFieldsPathInfo = (fields: string[], entityType: EntityKind) => {
+  const [fieldsPathInfo, setFieldsPathInfo] = useState<Map<string, PathInfo | null>>(new Map());
+  const requestedFieldsRef = useRef<Set<string>>(new Set());
+  const [fetchPaths] = useLazySearchPathsQuery();
+  const { data: definitions, isError: definitionsFailed } = useSearchDefinitionsQuery();
+
+  // Wait for the definitions request to settle so resolved fields get the backend's
+  // operator lists instead of the fallback ones.
+  const settledDefinitions = definitions ?? (definitionsFailed ? FALLBACK_DEFINITIONS : undefined);
+
+  useEffect(() => {
+    // Changing entity type invalidates previous lookups.
+    requestedFieldsRef.current = new Set();
+    setFieldsPathInfo(new Map());
+  }, [entityType]);
+
+  useEffect(() => {
+    if (!settledDefinitions) {
+      return;
+    }
+    const newFields = fields.filter((field) => field && !requestedFieldsRef.current.has(field));
+    newFields.forEach((field) => {
+      requestedFieldsRef.current.add(field);
+      fetchPaths({ q: field, entity_type: entityType }, true)
+        .unwrap()
+        .then((pathData) => {
+          const pathInfos = mapPathAutocompleteResponseToPathInfos(pathData, settledDefinitions);
+          const match =
+            pathInfos.find((pathInfo) => pathInfo.path === field)
+            ?? pathInfos.find((pathInfo) => pathInfo.availablePaths?.includes(field));
+          setFieldsPathInfo((previous) => new Map(previous).set(field, match ?? null));
+        })
+        .catch(() => {
+          // Allow a retry on a later render, e.g. after a transient network error.
+          requestedFieldsRef.current.delete(field);
+        });
+    });
+  }, [fields, entityType, fetchPaths, settledDefinitions]);
+
+  return fieldsPathInfo;
+};

package/src/pages/WfoSearchPocPage.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { RuleGroupType } from 'react-querybuilder';
 import { formatQuery } from 'react-querybuilder/formatQuery';
-import { parseCEL } from 'react-querybuilder/parseCEL';
 
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -389,21 +388,19 @@ export const WfoSearchPocPage = () => {
   };
 
   const safeCelParse = useCallback((celString: string) => {
-    try {
-      const ruleGroup = parseCEL(celString);
-      if (celString === '') {
-        setIsValidFilterString(true);
-      } else if (ruleGroup?.rules?.length > 0) {
-        // parseCEL returns a query object — check if it has any rules
-        setIsValidFilterString(true);
-        setQueryBuilderRuleGroup(ruleGroup);
-      } else {
-        // If there are no rules created based on this string then
-        // we assume the string is not valid. In any case it will not do anything
-        // to the search results
-        setIsValidFilterString(false);
-      }
-    } catch {
+    if (celString === '') {
+      setIsValidFilterString(true);
+      return;
+    }
+    // parseCelToRuleGroup returns undefined when the string parses to no rules — in that
+    // case we assume the string is not valid. In any case it would not do anything to the
+    // search results. It also assigns the rule ids parseCEL leaves out, which the query
+    // builder needs to keep rule identity stable across query updates.
+    const ruleGroup = parseCelToRuleGroup(celString);
+    if (ruleGroup) {
+      setIsValidFilterString(true);
+      setQueryBuilderRuleGroup(ruleGroup);
+    } else {
       setIsValidFilterString(false);
     }
   }, []);
@@ -448,7 +445,11 @@ export const WfoSearchPocPage = () => {
         setIsValidFilterString(true);
       } else {
         setFilterString(celQuery);
-        setIsValidFilterString(true);
+        // formatQuery output is normally valid CEL, but not unconditionally — a rule can
+        // hold state formatQuery renders as unparseable CEL (e.g. a 'field' value source
+        // renders its value unquoted). Validate the round trip so the invalid marker and
+        // the Apply button track what the textarea actually shows.
+        setIsValidFilterString(!!parseCelToRuleGroup(celQuery));
       }
     }
   };

package/src/rtk/endpoints/search.ts

@@ -112,5 +112,6 @@ export const {
   useLazySearchQuery,
   useSearchWithPaginationMutation,
   useSearchPathsQuery,
+  useLazySearchPathsQuery,
   useSearchDefinitionsQuery,
 } = searchApi;