@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.0

package/src/hooks/useOrchestratorTheme.ts

@@ -4,36 +4,32 @@ import { WfoComputedModifications, WfoComputedTheme } from '@/theme';
 import { ColorModes } from '@/types';
 
 export type WfoThemeHelpers = Readonly<{
-    theme: WfoComputedTheme;
-    multiplyByBaseUnit: (multiplier: number) => number;
-    toSecondaryColor: (color: string) => string;
-    colorMode: EuiThemeColorMode;
-    isDarkModeActive: boolean;
+  theme: WfoComputedTheme;
+  multiplyByBaseUnit: (multiplier: number) => number;
+  toSecondaryColor: (color: string) => string;
+  colorMode: EuiThemeColorMode;
+  isDarkModeActive: boolean;
 }>;
 
-export const shadeOrchestratorColor = (color: string) =>
-    shade(color, 0.65).toString();
-export const tintOrchestratorColor = (color: string) =>
-    tint(color, 0.8).toString();
+export const shadeOrchestratorColor = (color: string) => shade(color, 0.65).toString();
+export const tintOrchestratorColor = (color: string) => tint(color, 0.8).toString();
 
 export const useOrchestratorTheme = (): WfoThemeHelpers => {
-    const { euiTheme, colorMode } = useEuiTheme<WfoComputedModifications>();
-    const isDarkModeActive = colorMode === ColorModes.DARK;
+  const { euiTheme, colorMode } = useEuiTheme<WfoComputedModifications>();
+  const isDarkModeActive = colorMode === ColorModes.DARK;
 
-    const baseUnit = euiTheme.base;
+  const baseUnit = euiTheme.base;
 
-    const multiplyByBaseUnit = (multiplier: number) => baseUnit * multiplier;
+  const multiplyByBaseUnit = (multiplier: number) => baseUnit * multiplier;
 
-    const toSecondaryColor = (color: string) =>
-        isDarkModeActive
-            ? shadeOrchestratorColor(color)
-            : tintOrchestratorColor(color);
+  const toSecondaryColor = (color: string) =>
+    isDarkModeActive ? shadeOrchestratorColor(color) : tintOrchestratorColor(color);
 
-    return {
-        theme: euiTheme,
-        multiplyByBaseUnit,
-        toSecondaryColor,
-        colorMode,
-        isDarkModeActive,
-    };
+  return {
+    theme: euiTheme,
+    multiplyByBaseUnit,
+    toSecondaryColor,
+    colorMode,
+    isDarkModeActive,
+  };
 };

package/src/hooks/usePathAutoComplete.ts

@@ -1,133 +1,121 @@
 import { useEffect, useState } from 'react';
 
-import {
-    useSearchDefinitionsQuery,
-    useSearchPathsQuery,
-} from '@/rtk/endpoints';
+import { useSearchDefinitionsQuery, useSearchPathsQuery } from '@/rtk/endpoints';
 import { EntityKind, PathInfo, value_schema } from '@/types';
 
 import { useDebounce } from './useDebounce';
 
 const FALLBACK_DEFINITIONS: Record<
-    string,
-    {
-        operators: string[];
-        value_schema: Record<string, value_schema>;
-    }
+  string,
+  {
+    operators: string[];
+    value_schema: Record<string, value_schema>;
+  }
 > = {
-    string: {
-        operators: ['eq', 'neq'],
-        value_schema: {
-            eq: { kind: 'string' },
-            neq: { kind: 'string' },
-        },
+  string: {
+    operators: ['eq', 'neq'],
+    value_schema: {
+      eq: { kind: 'string' },
+      neq: { kind: 'string' },
     },
-    number: {
-        operators: ['eq', 'neq', 'lt', 'lte', 'gt', 'gte'],
-        value_schema: {
-            eq: { kind: 'number' },
-            neq: { kind: 'number' },
-            lt: { kind: 'number' },
-            lte: { kind: 'number' },
-            gt: { kind: 'number' },
-            gte: { kind: 'number' },
-        },
+  },
+  number: {
+    operators: ['eq', 'neq', 'lt', 'lte', 'gt', 'gte'],
+    value_schema: {
+      eq: { kind: 'number' },
+      neq: { kind: 'number' },
+      lt: { kind: 'number' },
+      lte: { kind: 'number' },
+      gt: { kind: 'number' },
+      gte: { kind: 'number' },
     },
-    boolean: {
-        operators: ['eq', 'neq'],
-        value_schema: {
-            eq: { kind: 'boolean' },
-            neq: { kind: 'boolean' },
-        },
+  },
+  boolean: {
+    operators: ['eq', 'neq'],
+    value_schema: {
+      eq: { kind: 'boolean' },
+      neq: { kind: 'boolean' },
     },
-    datetime: {
-        operators: ['eq', 'neq', 'lt', 'lte', 'gt', 'gte'],
-        value_schema: {
-            eq: { kind: 'datetime' },
-            neq: { kind: 'datetime' },
-            lt: { kind: 'datetime' },
-            lte: { kind: 'datetime' },
-            gt: { kind: 'datetime' },
-            gte: { kind: 'datetime' },
-        },
+  },
+  datetime: {
+    operators: ['eq', 'neq', 'lt', 'lte', 'gt', 'gte'],
+    value_schema: {
+      eq: { kind: 'datetime' },
+      neq: { kind: 'datetime' },
+      lt: { kind: 'datetime' },
+      lte: { kind: 'datetime' },
+      gt: { kind: 'datetime' },
+      gte: { kind: 'datetime' },
     },
+  },
 };
 
 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,
-        isError,
-    } = useSearchPathsQuery(
-        { q: debouncedPrefix, entity_type: entityType },
-        { skip: debouncedPrefix.length < 1 },
-    );
-
-    useEffect(() => {
-        if (debouncedPrefix.length < 1) {
-            setPaths([]);
-            return;
-        }
-
-        if (!pathData) {
-            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);
-    }, [pathData, definitions]);
-
-    const errorMessage = isError
-        ? 'Failed to load paths'
-        : defError
-        ? 'Failed to load definitions'
-        : null;
-
-    return { paths, loading: isLoading, error: errorMessage };
+  const [paths, setPaths] = useState<PathInfo[]>([]);
+  const debouncedPrefix = useDebounce(prefix, 300);
+
+  const { data: definitions = FALLBACK_DEFINITIONS, isError: defError } = useSearchDefinitionsQuery();
+
+  const {
+    data: pathData,
+    isLoading,
+    isError,
+  } = useSearchPathsQuery({ q: debouncedPrefix, entity_type: entityType }, { skip: debouncedPrefix.length < 1 });
+
+  useEffect(() => {
+    if (debouncedPrefix.length < 1) {
+      setPaths([]);
+      return;
+    }
+
+    if (!pathData) {
+      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);
+  }, [pathData, definitions, debouncedPrefix.length]);
+
+  const errorMessage =
+    isError ? 'Failed to load paths'
+    : defError ? 'Failed to load definitions'
+    : null;
+
+  return { paths, loading: isLoading, error: errorMessage };
 };

package/src/hooks/usePolicy.ts

@@ -5,11 +5,10 @@ import { useRouter } from 'next/router';
 import { PolicyContext } from '@/contexts';
 
 export const usePolicy = () => {
-    const { isAllowedHandler } = useContext(PolicyContext);
-    const router = useRouter();
+  const { isAllowedHandler } = useContext(PolicyContext);
+  const router = useRouter();
 
-    return {
-        isAllowed: (resource?: string) =>
-            isAllowedHandler(router.asPath, resource),
-    };
+  return {
+    isAllowed: (resource?: string) => isAllowedHandler(router.asPath, resource),
+  };
 };

package/src/hooks/useSearch.ts

@@ -3,90 +3,75 @@ import { useEffect, useState } from 'react';
 import { Query } from '@elastic/eui';
 
 import { useSearchMutation } from '@/rtk/endpoints';
-import {
-    EntityKind,
-    Group,
-    PaginatedSearchResults,
-    RetrieverType,
-} from '@/types';
+import { EntityKind, Group, PaginatedSearchResults, RetrieverType } from '@/types';
 
 export const useSearch = (
-    query: Query | string,
-    entityType: EntityKind,
-    filterGroup?: Group,
-    limit?: number,
-    retriever: RetrieverType = RetrieverType.Auto,
+  query: Query | string,
+  entityType: EntityKind,
+  filterGroup?: Group,
+  limit?: number,
+  retriever: RetrieverType = RetrieverType.Auto,
 ) => {
-    const [results, setResults] = useState<PaginatedSearchResults>({
-        data: [],
-        page_info: { has_next_page: false, next_page_cursor: null },
-        search_metadata: { search_type: null, description: null },
-    });
+  const [results, setResults] = useState<PaginatedSearchResults>({
+    data: [],
+    page_info: { has_next_page: false, next_page_cursor: null },
+    search_metadata: { search_type: null, description: null },
+  });
 
-    const [triggerSearch, { isLoading, isError }] = useSearchMutation();
+  const [triggerSearch, { isLoading, isError }] = useSearchMutation();
 
-    useEffect(() => {
-        const queryText =
-            typeof query === 'string' ? query : query.text?.trim() || '';
+  useEffect(() => {
+    const queryText = typeof query === 'string' ? query : query.text?.trim() || '';
 
-        const hasFilters = filterGroup && filterGroup.children.length > 0;
+    const hasFilters = filterGroup && filterGroup.children.length > 0;
 
-        if (queryText.length < 2 && !hasFilters) {
-            setResults({
-                data: [],
-                page_info: { has_next_page: false, next_page_cursor: null },
-                search_metadata: { search_type: null, description: null },
-            });
-            return;
-        }
+    if (queryText.length < 2 && !hasFilters) {
+      setResults({
+        data: [],
+        page_info: { has_next_page: false, next_page_cursor: null },
+        search_metadata: { search_type: null, description: null },
+      });
+      return;
+    }
 
-        const performSearch = async () => {
-            try {
-                const result = await triggerSearch({
-                    entity_type: entityType,
-                    query: queryText,
-                    filters:
-                        filterGroup && filterGroup.children.length > 0
-                            ? filterGroup
-                            : undefined,
-                    limit: limit,
-                    retriever:
-                        retriever === RetrieverType.Auto
-                            ? undefined
-                            : retriever,
-                }).unwrap();
+    const performSearch = async () => {
+      try {
+        const result = await triggerSearch({
+          entity_type: entityType,
+          query: queryText,
+          filters: filterGroup && filterGroup.children.length > 0 ? filterGroup : undefined,
+          limit: limit,
+          retriever: retriever === RetrieverType.Auto ? undefined : retriever,
+        }).unwrap();
 
-                setResults({
-                    data: result.data || [],
-                    page_info: {
-                        has_next_page: result.page_info?.has_next_page || false,
-                        next_page_cursor:
-                            result.page_info?.next_page_cursor || null,
-                    },
-                    search_metadata: {
-                        search_type:
-                            result.search_metadata?.search_type || null,
-                        description:
-                            result.search_metadata?.description || null,
-                    },
-                });
-            } catch (error) {
-                console.error('Search error:', error);
-                setResults({
-                    data: [],
-                    page_info: { has_next_page: false, next_page_cursor: null },
-                    search_metadata: { search_type: null, description: null },
-                });
-            }
-        };
+        setResults({
+          data: result.data || [],
+          page_info: {
+            has_next_page: result.page_info?.has_next_page || false,
+            next_page_cursor: result.page_info?.next_page_cursor || null,
+          },
+          search_metadata: {
+            search_type: result.search_metadata?.search_type || null,
+            description: result.search_metadata?.description || null,
+          },
+        });
+      } catch (error) {
+        console.error('Search error:', error);
+        setResults({
+          data: [],
+          page_info: { has_next_page: false, next_page_cursor: null },
+          search_metadata: { search_type: null, description: null },
+        });
+      }
+    };
 
-        performSearch();
-    }, [query, entityType, filterGroup, limit, retriever, triggerSearch]);
+    performSearch();
+  }, [query, entityType, filterGroup, limit, retriever, triggerSearch]);
 
-    return {
-        results,
-        loading: isLoading,
-        error: isError ? 'Search failed' : null,
-        setResults,
-    };
+  return {
+    results,
+    loading: isLoading,
+    error: isError ? 'Search failed' : null,
+    setResults,
+  };
 };