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

package/src/hooks/useSearchPagination.ts

@@ -4,149 +4,139 @@ import { Query } from '@elastic/eui';
 
 import { buildSearchParams } from '@/components/WfoSearchPage/utils';
 import { useSearchWithPaginationMutation } from '@/rtk/endpoints';
-import {
-    EntityKind,
-    Group,
-    PaginatedSearchResults,
-    RetrieverType,
-    SearchResult,
-} from '@/types';
+import { EntityKind, Group, PaginatedSearchResults, RetrieverType, SearchResult } from '@/types';
 
 interface PageHistoryItem {
-    page: number;
-    results: SearchResult[];
-    cursor: number | null;
+  page: number;
+  results: SearchResult[];
+  cursor: number | null;
 }
 
 interface UseSearchPaginationReturn {
-    currentPage: number;
-    pageHistory: PageHistoryItem[];
-    error: string | null;
-    isLoadingMore: boolean;
-    handleNextPage: (nextPageCursor: number) => Promise<void>;
-    handlePrevPage: () => void;
-    resetPagination: () => void;
-    setError: (error: string | null) => void;
+  currentPage: number;
+  pageHistory: PageHistoryItem[];
+  error: string | null;
+  isLoadingMore: boolean;
+  handleNextPage: (nextPageCursor: number) => Promise<void>;
+  handlePrevPage: () => void;
+  resetPagination: () => void;
+  setError: (error: string | null) => void;
 }
 
 export const useSearchPagination = (
-    debouncedQuery: Query | string,
-    selectedEntityTab: EntityKind,
-    filterGroup: Group,
-    pageSize: number,
-    results: PaginatedSearchResults,
-    setResults: (results: PaginatedSearchResults) => void,
-    retriever?: RetrieverType,
+  debouncedQuery: Query | string,
+  selectedEntityTab: EntityKind,
+  filterGroup: Group,
+  pageSize: number,
+  results: PaginatedSearchResults,
+  setResults: (results: PaginatedSearchResults) => void,
+  retriever?: RetrieverType,
 ): UseSearchPaginationReturn => {
-    const [currentPage, setCurrentPage] = useState<number>(1);
-    const [pageHistory, setPageHistory] = useState<PageHistoryItem[]>([]);
-    const [error, setError] = useState<string | null>(null);
-    const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
-
-    const [triggerSearchPagination] = useSearchWithPaginationMutation();
-
-    const handleNextPage = useCallback(
-        async (nextPageCursor: number) => {
-            if (!nextPageCursor || isLoadingMore) return;
-
-            setIsLoadingMore(true);
-
-            setPageHistory((prev) => [
-                ...prev.filter((p) => p.page !== currentPage),
-                {
-                    page: currentPage,
-                    results: results.data,
-                    cursor: results.page_info.next_page_cursor,
-                },
-            ]);
-
-            try {
-                setError(null);
-                const searchParams = buildSearchParams(
-                    debouncedQuery,
-                    selectedEntityTab,
-                    filterGroup,
-                    pageSize,
-                    retriever === RetrieverType.Auto ? undefined : retriever,
-                );
-
-                const res = await triggerSearchPagination({
-                    ...searchParams,
-                    cursor: nextPageCursor,
-                }).unwrap();
-
-                setResults({
-                    data: res.data || [],
-                    page_info: {
-                        has_next_page: res.page_info.has_next_page,
-                        next_page_cursor: res.page_info.next_page_cursor,
-                    },
-                    search_metadata: {
-                        search_type: res.search_metadata.search_type,
-                        description: res.search_metadata.description,
-                    },
-                });
-
-                setCurrentPage((prev) => prev + 1);
-            } catch (error) {
-                const errorMessage =
-                    error instanceof Error
-                        ? error.message
-                        : 'An unexpected error occurred while loading the next page';
-                setError(errorMessage);
-                console.error('Load next page error:', error);
-            } finally {
-                setIsLoadingMore(false);
-            }
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageHistory, setPageHistory] = useState<PageHistoryItem[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+
+  const [triggerSearchPagination] = useSearchWithPaginationMutation();
+
+  const handleNextPage = useCallback(
+    async (nextPageCursor: number) => {
+      if (!nextPageCursor || isLoadingMore) return;
+
+      setIsLoadingMore(true);
+
+      setPageHistory((prev) => [
+        ...prev.filter((p) => p.page !== currentPage),
+        {
+          page: currentPage,
+          results: results.data,
+          cursor: results.page_info.next_page_cursor,
         },
-        [
-            currentPage,
-            results.data,
-            results.page_info.next_page_cursor,
-            isLoadingMore,
-            debouncedQuery,
-            selectedEntityTab,
-            filterGroup,
-            pageSize,
-            retriever,
-            setResults,
-            triggerSearchPagination,
-        ],
-    );
-
-    const handlePrevPage = useCallback(() => {
-        const previousPage = pageHistory.find(
-            (p) => p.page === currentPage - 1,
+      ]);
+
+      try {
+        setError(null);
+        const searchParams = buildSearchParams(
+          debouncedQuery,
+          selectedEntityTab,
+          filterGroup,
+          pageSize,
+          retriever === RetrieverType.Auto ? undefined : retriever,
         );
-        if (previousPage) {
-            setResults({
-                data: previousPage.results,
-                page_info: {
-                    has_next_page: true,
-                    next_page_cursor: previousPage.cursor,
-                },
-                search_metadata: results.search_metadata,
-            });
-
-            setCurrentPage((prev) => prev - 1);
-
-            setPageHistory((prev) => prev.filter((p) => p.page < currentPage));
-        }
-    }, [currentPage, pageHistory, results.search_metadata, setResults]);
-
-    const resetPagination = useCallback(() => {
-        setCurrentPage(1);
-        setPageHistory([]);
-    }, []);
-
-    return {
-        currentPage,
-        pageHistory,
-        error,
-        isLoadingMore,
-        handleNextPage,
-        handlePrevPage,
-        resetPagination,
-        setError,
-    };
+
+        const res = await triggerSearchPagination({
+          ...searchParams,
+          cursor: nextPageCursor,
+        }).unwrap();
+
+        setResults({
+          data: res.data || [],
+          page_info: {
+            has_next_page: res.page_info.has_next_page,
+            next_page_cursor: res.page_info.next_page_cursor,
+          },
+          search_metadata: {
+            search_type: res.search_metadata.search_type,
+            description: res.search_metadata.description,
+          },
+        });
+
+        setCurrentPage((prev) => prev + 1);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : 'An unexpected error occurred while loading the next page';
+        setError(errorMessage);
+        console.error('Load next page error:', error);
+      } finally {
+        setIsLoadingMore(false);
+      }
+    },
+    [
+      currentPage,
+      results.data,
+      results.page_info.next_page_cursor,
+      isLoadingMore,
+      debouncedQuery,
+      selectedEntityTab,
+      filterGroup,
+      pageSize,
+      retriever,
+      setResults,
+      triggerSearchPagination,
+    ],
+  );
+
+  const handlePrevPage = useCallback(() => {
+    const previousPage = pageHistory.find((p) => p.page === currentPage - 1);
+    if (previousPage) {
+      setResults({
+        data: previousPage.results,
+        page_info: {
+          has_next_page: true,
+          next_page_cursor: previousPage.cursor,
+        },
+        search_metadata: results.search_metadata,
+      });
+
+      setCurrentPage((prev) => prev - 1);
+
+      setPageHistory((prev) => prev.filter((p) => p.page < currentPage));
+    }
+  }, [currentPage, pageHistory, results.search_metadata, setResults]);
+
+  const resetPagination = useCallback(() => {
+    setCurrentPage(1);
+    setPageHistory([]);
+  }, []);
+
+  return {
+    currentPage,
+    pageHistory,
+    error,
+    isLoadingMore,
+    handleNextPage,
+    handlePrevPage,
+    resetPagination,
+    setError,
+  };
 };

package/src/hooks/useShowToastMessage.ts

@@ -6,18 +6,18 @@ import { ToastTypes } from '@/types';
 import { getToastMessage } from '@/utils/getToastMessage';
 
 export const useShowToastMessage = () => {
-    const dispatch = useAppDispatch();
+  const dispatch = useAppDispatch();
 
-    const showToastMessage = (
-        type: ToastTypes,
-        text: ReactNode,
-        title: string, // same as above for string instead of Toast['title'],
-    ) => {
-        const toastMessage = getToastMessage(type, text, title);
-        dispatch(addToastMessage(toastMessage));
-    };
+  const showToastMessage = (
+    type: ToastTypes,
+    text: ReactNode,
+    title: string, // same as above for string instead of Toast['title'],
+  ) => {
+    const toastMessage = getToastMessage(type, text, title);
+    dispatch(addToastMessage(toastMessage));
+  };
 
-    return {
-        showToastMessage,
-    };
+  return {
+    showToastMessage,
+  };
 };

package/src/hooks/useStoredTableConfig.ts

@@ -10,35 +10,28 @@ import { getDefaultTableConfig } from '../utils/getDefaultTableConfig';
 import { useShowToastMessage } from './useShowToastMessage';
 
 export const useStoredTableConfig = <T>(localeStorageKey: string) => {
-    const { showToastMessage } = useShowToastMessage();
-    const t = useTranslations('errors');
-    const tableConfig: StoredTableConfig<T> = useMemo(
-        () => getDefaultTableConfig<T>(localeStorageKey),
-        [localeStorageKey],
-    );
+  const { showToastMessage } = useShowToastMessage();
+  const t = useTranslations('errors');
+  const tableConfig: StoredTableConfig<T> = useMemo(
+    () => getDefaultTableConfig<T>(localeStorageKey),
+    [localeStorageKey],
+  );
 
-    const getStoredTableConfig = useCallback(():
-        | StoredTableConfig<T>
-        | undefined => {
-        try {
-            const storedConfig =
-                getTableConfigFromLocalStorage(localeStorageKey);
-            if (storedConfig) {
-                tableConfig.hiddenColumns = storedConfig.hiddenColumns;
-                tableConfig.selectedPageSize = storedConfig.selectedPageSize;
-            }
-            return tableConfig;
-        } catch {
-            showToastMessage(
-                ToastTypes.ERROR,
-                t('retrieve_stored_settings'),
-                t('retrieve_stored_settings_title'),
-            );
-            return tableConfig;
-        }
-        // Adding toastMessage to the dependency array here will result in an infinite loop in code calling the useStoredTableConfig hook
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [localeStorageKey, tableConfig]);
+  const getStoredTableConfig = useCallback((): StoredTableConfig<T> | undefined => {
+    try {
+      const storedConfig = getTableConfigFromLocalStorage(localeStorageKey);
+      if (storedConfig) {
+        tableConfig.hiddenColumns = storedConfig.hiddenColumns;
+        tableConfig.selectedPageSize = storedConfig.selectedPageSize;
+      }
+      return tableConfig;
+    } catch {
+      showToastMessage(ToastTypes.ERROR, t('retrieve_stored_settings'), t('retrieve_stored_settings_title'));
+      return tableConfig;
+    }
+    // Adding toastMessage to the dependency array here will result in an infinite loop in code calling the useStoredTableConfig hook
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localeStorageKey, tableConfig]);
 
-    return getStoredTableConfig;
+  return getStoredTableConfig;
 };

package/src/hooks/useUrlParams.ts

@@ -4,117 +4,99 @@ import { Query } from '@elastic/eui';
 
 import { EntityKind } from '@/types';
 
-import {
-    DEFAULT_ENTITY_TAB,
-    VALID_ENTITY_TYPES,
-} from '../components/WfoSearchPage/constants';
+import { DEFAULT_ENTITY_TAB, VALID_ENTITY_TYPES } from '../components/WfoSearchPage/constants';
 
 interface UseUrlParamsReturn {
-    urlParams: URLSearchParams;
-    query: Query | string;
-    selectedEntityTab: EntityKind;
-    showFilters: boolean;
-    selectedRecordIndex: number;
-    selectedRecordId: string | null;
-    setQuery: (query: Query | string) => void;
-    setSelectedEntityTab: (tab: EntityKind) => void;
-    setShowFilters: (show: boolean) => void;
-    setSelectedRecordIndex: (index: number) => void;
-    setSelectedRecordId: (id: string | null) => void;
+  urlParams: URLSearchParams;
+  query: Query | string;
+  selectedEntityTab: EntityKind;
+  showFilters: boolean;
+  selectedRecordIndex: number;
+  selectedRecordId: string | null;
+  setQuery: (query: Query | string) => void;
+  setSelectedEntityTab: (tab: EntityKind) => void;
+  setShowFilters: (show: boolean) => void;
+  setSelectedRecordIndex: (index: number) => void;
+  setSelectedRecordId: (id: string | null) => void;
 }
 
 export const useUrlParams = (): UseUrlParamsReturn => {
-    const [urlParams, setUrlParams] = useState(() => {
-        if (typeof window !== 'undefined') {
-            return new URLSearchParams(window.location.search);
-        }
-        return new URLSearchParams();
-    });
-
-    const [query, setQuery] = useState<Query | string>(() => {
-        const queryParam = urlParams.get('q');
-        return queryParam || '';
-    });
-
-    const [selectedEntityTab, setSelectedEntityTab] = useState<EntityKind>(
-        () => {
-            const tabParam = urlParams.get('tab') as EntityKind;
-            return tabParam && VALID_ENTITY_TYPES.includes(tabParam)
-                ? tabParam
-                : DEFAULT_ENTITY_TAB;
-        },
-    );
-
-    const [showFilters, setShowFilters] = useState<boolean>(() => {
-        return urlParams.get('filters') === 'true';
-    });
-
-    const [selectedRecordIndex, setSelectedRecordIndex] = useState<number>(
-        () => {
-            const indexParam = urlParams.get('selected');
-            return indexParam ? parseInt(indexParam, 10) || 0 : 0;
-        },
-    );
-
-    const [selectedRecordId, setSelectedRecordId] = useState<string | null>(
-        () => {
-            return urlParams.get('id') || null;
-        },
-    );
-
-    const updateUrl = useCallback(() => {
-        const newParams = new URLSearchParams();
-
-        const queryText = typeof query === 'string' ? query : query.text || '';
-        if (queryText && queryText !== '*') {
-            newParams.set('q', queryText);
-        }
-
-        if (selectedEntityTab !== DEFAULT_ENTITY_TAB) {
-            newParams.set('tab', selectedEntityTab);
-        }
-
-        if (showFilters) {
-            newParams.set('filters', 'true');
-        }
-
-        if (selectedRecordIndex > 0) {
-            newParams.set('selected', selectedRecordIndex.toString());
-        }
-
-        if (selectedRecordId) {
-            newParams.set('id', selectedRecordId);
-        }
-
-        const newUrl = newParams.toString()
-            ? `${window.location.pathname}?${newParams.toString()}`
-            : window.location.pathname;
-
-        window.history.replaceState({}, '', newUrl);
-        setUrlParams(newParams);
-    }, [
-        query,
-        selectedEntityTab,
-        showFilters,
-        selectedRecordIndex,
-        selectedRecordId,
-    ]);
-
-    useEffect(() => {
-        updateUrl();
-    }, [updateUrl]);
-
-    return {
-        urlParams,
-        query,
-        selectedEntityTab,
-        showFilters,
-        selectedRecordIndex,
-        selectedRecordId,
-        setQuery,
-        setSelectedEntityTab,
-        setShowFilters,
-        setSelectedRecordIndex,
-        setSelectedRecordId,
-    };
+  const [urlParams, setUrlParams] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return new URLSearchParams(window.location.search);
+    }
+    return new URLSearchParams();
+  });
+
+  const [query, setQuery] = useState<Query | string>(() => {
+    const queryParam = urlParams.get('q');
+    return queryParam || '';
+  });
+
+  const [selectedEntityTab, setSelectedEntityTab] = useState<EntityKind>(() => {
+    const tabParam = urlParams.get('tab') as EntityKind;
+    return tabParam && VALID_ENTITY_TYPES.includes(tabParam) ? tabParam : DEFAULT_ENTITY_TAB;
+  });
+
+  const [showFilters, setShowFilters] = useState<boolean>(() => {
+    return urlParams.get('filters') === 'true';
+  });
+
+  const [selectedRecordIndex, setSelectedRecordIndex] = useState<number>(() => {
+    const indexParam = urlParams.get('selected');
+    return indexParam ? parseInt(indexParam, 10) || 0 : 0;
+  });
+
+  const [selectedRecordId, setSelectedRecordId] = useState<string | null>(() => {
+    return urlParams.get('id') || null;
+  });
+
+  const updateUrl = useCallback(() => {
+    const newParams = new URLSearchParams();
+
+    const queryText = typeof query === 'string' ? query : query.text || '';
+    if (queryText && queryText !== '*') {
+      newParams.set('q', queryText);
+    }
+
+    if (selectedEntityTab !== DEFAULT_ENTITY_TAB) {
+      newParams.set('tab', selectedEntityTab);
+    }
+
+    if (showFilters) {
+      newParams.set('filters', 'true');
+    }
+
+    if (selectedRecordIndex > 0) {
+      newParams.set('selected', selectedRecordIndex.toString());
+    }
+
+    if (selectedRecordId) {
+      newParams.set('id', selectedRecordId);
+    }
+
+    const newUrl =
+      newParams.toString() ? `${window.location.pathname}?${newParams.toString()}` : window.location.pathname;
+
+    window.history.replaceState({}, '', newUrl);
+    setUrlParams(newParams);
+  }, [query, selectedEntityTab, showFilters, selectedRecordIndex, selectedRecordId]);
+
+  useEffect(() => {
+    updateUrl();
+  }, [updateUrl]);
+
+  return {
+    urlParams,
+    query,
+    selectedEntityTab,
+    showFilters,
+    selectedRecordIndex,
+    selectedRecordId,
+    setQuery,
+    setSelectedEntityTab,
+    setShowFilters,
+    setSelectedRecordIndex,
+    setSelectedRecordId,
+  };
 };

package/src/hooks/useWfoErrorMonitoring.ts

@@ -2,5 +2,4 @@ import { useContext } from 'react';
 
 import { WfoErrorMonitoringContext } from '@/contexts';
 
-export const useWfoErrorMonitoring = () =>
-    useContext(WfoErrorMonitoringContext);
+export const useWfoErrorMonitoring = () => useContext(WfoErrorMonitoringContext);

package/src/hooks/useWfoSession.ts

@@ -3,28 +3,26 @@ import { useSession } from 'next-auth/react';
 import type { UseSessionOptions } from 'next-auth/react';
 
 export type WfoSession = Session & {
-    accessToken?: string;
-    accessTokenExpiresAt?: number;
-    refreshTokenExpiresAt?: number;
-    profile?: WfoUserProfile;
+  accessToken?: string;
+  accessTokenExpiresAt?: number;
+  refreshTokenExpiresAt?: number;
+  profile?: WfoUserProfile;
 };
 
 export type WfoUserProfile = {
-    sub: string;
-    name: string;
-    preferred_username: string;
-    email: string;
-    [key: string]: unknown;
+  sub: string;
+  name: string;
+  preferred_username: string;
+  email: string;
+  [key: string]: unknown;
 };
 
-export const useWfoSession = <R extends boolean>(
-    options?: UseSessionOptions<R>,
-) => {
-    const sessionData = useSession(options);
+export const useWfoSession = <R extends boolean>(options?: UseSessionOptions<R>) => {
+  const sessionData = useSession(options);
 
-    // Data prop of type Session from NextAuth endpoint is not properly typed
-    const { data, ...updatedSessionData } = sessionData;
-    const dataWithToken = data as WfoSession | null;
+  // Data prop of type Session from NextAuth endpoint is not properly typed
+  const { data, ...updatedSessionData } = sessionData;
+  const dataWithToken = data as WfoSession | null;
 
-    return { ...updatedSessionData, session: dataWithToken };
+  return { ...updatedSessionData, session: dataWithToken };
 };

package/src/hooks/useWithOrchestratorTheme.ts

@@ -1,9 +1,7 @@
 import { useOrchestratorTheme } from './useOrchestratorTheme';
 import type { WfoThemeHelpers } from './useOrchestratorTheme';
 
-export function useWithOrchestratorTheme<T>(
-    getStylesFunction: (wfoThemeHelpers: WfoThemeHelpers) => T,
-) {
-    const wfoThemeHelpers = useOrchestratorTheme();
-    return getStylesFunction(wfoThemeHelpers);
+export function useWithOrchestratorTheme<T>(getStylesFunction: (wfoThemeHelpers: WfoThemeHelpers) => T) {
+  const wfoThemeHelpers = useOrchestratorTheme();
+  return getStylesFunction(wfoThemeHelpers);
 }