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

package/src/contexts/OrchestratorConfigContext.tsx

@@ -5,41 +5,34 @@ import { useOrchestratorConfig } from '@/hooks/useOrchestratorConfig';
 import type { OrchestratorConfig } from '@/types';
 
 export const emptyOrchestratorConfig: OrchestratorConfig = {
-    environmentName: '',
-    graphqlEndpointCore: '',
-    orchestratorApiBaseUrl: '',
-    orchestratorWebsocketUrl: '',
-    authActive: true,
-    useWebSockets: false,
-    useThemeToggle: false,
-    showWorkflowInformationLink: false,
-    workflowInformationLinkUrl: '',
-    enableSupportMenuItem: false,
-    supportMenuItemUrl: '',
-    enableAoStackStatus: false,
-    aoStackStatusUrl: '',
-    startWorkflowFilters: undefined,
+  environmentName: '',
+  graphqlEndpointCore: '',
+  orchestratorApiBaseUrl: '',
+  orchestratorWebsocketUrl: '',
+  authActive: true,
+  useWebSockets: false,
+  useThemeToggle: false,
+  showWorkflowInformationLink: false,
+  workflowInformationLinkUrl: '',
+  enableSupportMenuItem: false,
+  supportMenuItemUrl: '',
+  enableAoStackStatus: false,
+  aoStackStatusUrl: '',
+  startWorkflowFilters: undefined,
 };
 
-export const OrchestratorConfigContext = createContext<OrchestratorConfig>(
-    emptyOrchestratorConfig,
-);
+export const OrchestratorConfigContext = createContext<OrchestratorConfig>(emptyOrchestratorConfig);
 
 export type OrchestratorConfigProviderProps = {
-    initialOrchestratorConfig: OrchestratorConfig | null;
-    children: ReactNode;
+  initialOrchestratorConfig: OrchestratorConfig | null;
+  children: ReactNode;
 };
 
-export const OrchestratorConfigProvider: FC<
-    OrchestratorConfigProviderProps
-> = ({ initialOrchestratorConfig, children }) => {
-    const { orchestratorConfig } = useOrchestratorConfig(
-        initialOrchestratorConfig ?? emptyOrchestratorConfig,
-    );
+export const OrchestratorConfigProvider: FC<OrchestratorConfigProviderProps> = ({
+  initialOrchestratorConfig,
+  children,
+}) => {
+  const { orchestratorConfig } = useOrchestratorConfig(initialOrchestratorConfig ?? emptyOrchestratorConfig);
 
-    return (
-        <OrchestratorConfigContext.Provider value={orchestratorConfig}>
-            {children}
-        </OrchestratorConfigContext.Provider>
-    );
+  return <OrchestratorConfigContext.Provider value={orchestratorConfig}>{children}</OrchestratorConfigContext.Provider>;
 };

package/src/contexts/PolicyContext.tsx

@@ -1,23 +1,18 @@
 import React, { FC, ReactNode, createContext } from 'react';
 
 export type Policy = {
-    isAllowedHandler: (routerPath: string, resource?: string) => boolean;
+  isAllowedHandler: (routerPath: string, resource?: string) => boolean;
 };
 
 export const PolicyContext = createContext<Policy>({
-    isAllowedHandler: () => true,
+  isAllowedHandler: () => true,
 });
 
 export type PolicyProviderProps = {
-    isAllowedHandler: (routerPath: string, resource?: string) => boolean;
-    children: ReactNode;
+  isAllowedHandler: (routerPath: string, resource?: string) => boolean;
+  children: ReactNode;
 };
 
-export const PolicyContextProvider: FC<PolicyProviderProps> = ({
-    isAllowedHandler,
-    children,
-}) => (
-    <PolicyContext.Provider value={{ isAllowedHandler }}>
-        {children}
-    </PolicyContext.Provider>
+export const PolicyContextProvider: FC<PolicyProviderProps> = ({ isAllowedHandler, children }) => (
+  <PolicyContext.Provider value={{ isAllowedHandler }}>{children}</PolicyContext.Provider>
 );

package/src/contexts/TreeContext.tsx

@@ -2,119 +2,105 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 
 export type TreeContextType = {
-    setDepths: (depths: number[]) => void;
-    selectedIds: number[];
-    expandedIds: number[];
-    toggleSelectedId: (id: number) => void;
-    expandNode: (id: number) => void;
-    collapseNode: (id: number) => void;
-    expandAll: () => void;
-    collapseAll: () => void;
-    resetSelection: () => void;
-    selectAll: () => void;
-    selectIds: (ids: number[]) => void;
-    deselectIds: (ids: number[]) => void;
+  setDepths: (depths: number[]) => void;
+  selectedIds: number[];
+  expandedIds: number[];
+  toggleSelectedId: (id: number) => void;
+  expandNode: (id: number) => void;
+  collapseNode: (id: number) => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+  resetSelection: () => void;
+  selectAll: () => void;
+  selectIds: (ids: number[]) => void;
+  deselectIds: (ids: number[]) => void;
 };
 
 export const TreeContext = React.createContext<TreeContextType | null>(null);
 
 export type TreeProviderProps = {
-    children: ReactNode;
+  children: ReactNode;
 };
 
 export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
-    const [depths, setDepths] = React.useState<number[]>([]);
-    const [selectedIds, setSelectedIds] = React.useState<number[]>([0]);
-    const [expandedIds, setExpandedIds] = React.useState<number[]>([0]);
+  const [depths, setDepths] = React.useState<number[]>([]);
+  const [selectedIds, setSelectedIds] = React.useState<number[]>([0]);
+  const [expandedIds, setExpandedIds] = React.useState<number[]>([0]);
 
-    const toggleSelectedId = (id: number) => {
-        if (selectedIds.includes(id)) {
-            setSelectedIds((prevSelectedIds) =>
-                prevSelectedIds.filter((selectedId) => selectedId !== id),
-            );
-        } else {
-            setSelectedIds((prevSelectedIds) => [...prevSelectedIds, id]);
-        }
-    };
-
-    const selectAll = () => {
-        setSelectedIds(Array.from(Array(depths.length).keys()));
-    };
+  const toggleSelectedId = (id: number) => {
+    if (selectedIds.includes(id)) {
+      setSelectedIds((prevSelectedIds) => prevSelectedIds.filter((selectedId) => selectedId !== id));
+    } else {
+      setSelectedIds((prevSelectedIds) => [...prevSelectedIds, id]);
+    }
+  };
 
-    const selectIds = (ids: number[]) => {
-        setSelectedIds((prevSelectedIds) =>
-            Array.from(new Set([...prevSelectedIds, ...ids])),
-        );
-    };
+  const selectAll = () => {
+    setSelectedIds(Array.from(Array(depths.length).keys()));
+  };
 
-    const deselectIds = (ids: number[]) => {
-        setSelectedIds((prevSelectedIds) =>
-            prevSelectedIds.filter((id) => !ids.includes(id)),
-        );
-    };
+  const selectIds = (ids: number[]) => {
+    setSelectedIds((prevSelectedIds) => Array.from(new Set([...prevSelectedIds, ...ids])));
+  };
 
-    const expandAll = () => {
-        setExpandedIds(Array.from(Array(depths.length).keys()));
-    };
+  const deselectIds = (ids: number[]) => {
+    setSelectedIds((prevSelectedIds) => prevSelectedIds.filter((id) => !ids.includes(id)));
+  };
 
-    const collapseAll = () => {
-        setExpandedIds([0]);
-    };
+  const expandAll = () => {
+    setExpandedIds(Array.from(Array(depths.length).keys()));
+  };
 
-    const expandNode = (itemIndex: number) => {
-        const initialDepth = depths[itemIndex];
-        const expandedNodeIds = depths
-            .map((depth, i) => {
-                if (
-                    i === itemIndex ||
-                    (i > itemIndex && depth > initialDepth)
-                ) {
-                    return i;
-                }
-                return -1;
-            })
-            .filter((nodeId) => nodeId !== -1);
-        setExpandedIds((prevExpandedIds) => [
-            ...prevExpandedIds,
-            ...expandedNodeIds,
-        ]);
-    };
+  const collapseAll = () => {
+    setExpandedIds([0]);
+  };
 
-    const collapseNode = (itemIndex: number) => {
-        const initialDepth = depths[itemIndex];
-        const collapsedNodeIds: number[] = [];
-        for (let i = itemIndex; i < depths.length; i++) {
-            if (i === itemIndex) collapsedNodeIds.push(i);
-            else if (depths[i] > initialDepth) collapsedNodeIds.push(i);
-            else if (depths[i] <= initialDepth) break;
+  const expandNode = (itemIndex: number) => {
+    const initialDepth = depths[itemIndex];
+    const expandedNodeIds = depths
+      .map((depth, i) => {
+        if (i === itemIndex || (i > itemIndex && depth > initialDepth)) {
+          return i;
         }
-        setExpandedIds((prevExpandedIds) =>
-            prevExpandedIds.filter((id) => !collapsedNodeIds.includes(id)),
-        );
-    };
+        return -1;
+      })
+      .filter((nodeId) => nodeId !== -1);
+    setExpandedIds((prevExpandedIds) => [...prevExpandedIds, ...expandedNodeIds]);
+  };
+
+  const collapseNode = (itemIndex: number) => {
+    const initialDepth = depths[itemIndex];
+    const collapsedNodeIds: number[] = [];
+    for (let i = itemIndex; i < depths.length; i++) {
+      if (i === itemIndex) collapsedNodeIds.push(i);
+      else if (depths[i] > initialDepth) collapsedNodeIds.push(i);
+      else if (depths[i] <= initialDepth) break;
+    }
+    setExpandedIds((prevExpandedIds) => prevExpandedIds.filter((id) => !collapsedNodeIds.includes(id)));
+  };
 
-    const resetSelection = () => {
-        setSelectedIds([]);
-    };
+  const resetSelection = () => {
+    setSelectedIds([]);
+  };
 
-    return (
-        <TreeContext.Provider
-            value={{
-                setDepths,
-                selectedIds,
-                expandedIds,
-                toggleSelectedId,
-                expandNode,
-                collapseNode,
-                expandAll,
-                collapseAll,
-                resetSelection,
-                selectAll,
-                selectIds,
-                deselectIds,
-            }}
-        >
-            {children}
-        </TreeContext.Provider>
-    );
+  return (
+    <TreeContext.Provider
+      value={{
+        setDepths,
+        selectedIds,
+        expandedIds,
+        toggleSelectedId,
+        expandNode,
+        collapseNode,
+        expandAll,
+        collapseAll,
+        resetSelection,
+        selectAll,
+        selectIds,
+        deselectIds,
+      }}
+    >
+      {children}
+    </TreeContext.Provider>
+  );
 };

package/src/contexts/WfoErrorMonitoringProvider.tsx

@@ -1,22 +1,20 @@
 import React, { FC, ReactNode, createContext } from 'react';
 
 export type WfoErrorMonitoring = {
-    reportError: (error: Error | string) => void;
-    reportMessage: (message: string) => void;
+  reportError: (error: Error | string) => void;
+  reportMessage: (message: string) => void;
 };
 
 export const emptyWfoErrorMonitoring: WfoErrorMonitoring = {
-    reportError: () => {},
-    reportMessage: () => {},
+  reportError: () => {},
+  reportMessage: () => {},
 };
 
-export const WfoErrorMonitoringContext = createContext<WfoErrorMonitoring>(
-    emptyWfoErrorMonitoring,
-);
+export const WfoErrorMonitoringContext = createContext<WfoErrorMonitoring>(emptyWfoErrorMonitoring);
 
 export type WfoErrorMonitoringProviderProps = {
-    errorMonitoringHandler?: WfoErrorMonitoring;
-    children: ReactNode;
+  errorMonitoringHandler?: WfoErrorMonitoring;
+  children: ReactNode;
 };
 
 /**
@@ -24,14 +22,13 @@ export type WfoErrorMonitoringProviderProps = {
  * @param errorMonitoringHandler for implementing the error monitoring. When not provided, all report calls are no-ops.
  * @param children
  */
-export const WfoErrorMonitoringProvider: FC<
-    WfoErrorMonitoringProviderProps
-> = ({ errorMonitoringHandler, children }) => {
-    return (
-        <WfoErrorMonitoringContext.Provider
-            value={errorMonitoringHandler ?? emptyWfoErrorMonitoring}
-        >
-            {children}
-        </WfoErrorMonitoringContext.Provider>
-    );
+export const WfoErrorMonitoringProvider: FC<WfoErrorMonitoringProviderProps> = ({
+  errorMonitoringHandler,
+  children,
+}) => {
+  return (
+    <WfoErrorMonitoringContext.Provider value={errorMonitoringHandler ?? emptyWfoErrorMonitoring}>
+      {children}
+    </WfoErrorMonitoringContext.Provider>
+  );
 };

package/src/hooks/useBackendAvailability.ts

@@ -3,70 +3,65 @@ import { GraphQLError } from 'graphql';
 import { SerializedError } from '@reduxjs/toolkit';
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
-import {
-    useCheckAgentAvailabilityQuery,
-    useCheckSearchAvailabilityQuery,
-} from '@/rtk/endpoints/availability';
+import { useCheckAgentAvailabilityQuery, useCheckSearchAvailabilityQuery } from '@/rtk/endpoints/availability';
 
 export interface BackendFeatureStatus {
-    isAvailable: boolean;
-    isLoading: boolean;
+  isAvailable: boolean;
+  isLoading: boolean;
 }
 
 type RTKQueryError = FetchBaseQueryError | SerializedError | GraphQLError[];
 
 const isNotFoundError = (error: RTKQueryError | undefined): boolean => {
-    if (error && 'status' in error) {
-        return error.status === 404;
-    }
-    return false;
+  if (error && 'status' in error) {
+    return error.status === 404;
+  }
+  return false;
 };
 
 export const useSearchAvailability = (): BackendFeatureStatus => {
-    const { isLoading, error } = useCheckSearchAvailabilityQuery();
+  const { isLoading, error } = useCheckSearchAvailabilityQuery();
 
-    if (isLoading) {
-        return {
-            isAvailable: false,
-            isLoading: true,
-        };
-    }
-
-    if (error) {
-        const isNotFound = isNotFoundError(error);
-        return {
-            isAvailable: !isNotFound,
-            isLoading: false,
-        };
-    }
+  if (isLoading) {
+    return {
+      isAvailable: false,
+      isLoading: true,
+    };
+  }
 
+  if (error) {
+    const isNotFound = isNotFoundError(error);
     return {
-        isAvailable: true,
-        isLoading: false,
+      isAvailable: !isNotFound,
+      isLoading: false,
     };
+  }
+
+  return {
+    isAvailable: true,
+    isLoading: false,
+  };
 };
 
 export const useAgentAvailability = (): BackendFeatureStatus => {
-    const { isLoading: agentLoading, error: agentError } =
-        useCheckAgentAvailabilityQuery();
+  const { isLoading: agentLoading, error: agentError } = useCheckAgentAvailabilityQuery();
 
-    const { isLoading: searchLoading, error: searchError } =
-        useCheckSearchAvailabilityQuery();
+  const { isLoading: searchLoading, error: searchError } = useCheckSearchAvailabilityQuery();
 
-    if (agentLoading || searchLoading) {
-        return {
-            isAvailable: false,
-            isLoading: true,
-        };
-    }
+  if (agentLoading || searchLoading) {
+    return {
+      isAvailable: false,
+      isLoading: true,
+    };
+  }
 
-    const agentNotFound = agentError ? isNotFoundError(agentError) : false;
-    const searchNotFound = searchError ? isNotFoundError(searchError) : false;
+  const agentNotFound = agentError ? isNotFoundError(agentError) : false;
+  const searchNotFound = searchError ? isNotFoundError(searchError) : false;
 
-    const isAvailable = !agentNotFound && !searchNotFound;
+  const isAvailable = !agentNotFound && !searchNotFound;
 
-    return {
-        isAvailable,
-        isLoading: false,
-    };
+  return {
+    isAvailable,
+    isLoading: false,
+  };
 };

package/src/hooks/useCheckEngineStatus.ts

@@ -5,27 +5,27 @@ import { useGetEngineStatusQuery } from '@/rtk/endpoints';
 import { EngineStatus, ToastTypes } from '@/types';
 
 export const useCheckEngineStatus = () => {
-    const { data, isLoading, refetch } = useGetEngineStatusQuery();
-    const { engineStatus } = data || {};
-    const tErrors = useTranslations('errors');
-    const { showToastMessage } = useShowToastMessage();
+  const { data, isLoading, refetch } = useGetEngineStatusQuery();
+  const { engineStatus } = data || {};
+  const tErrors = useTranslations('errors');
+  const { showToastMessage } = useShowToastMessage();
 
-    const isEngineRunningNow = async () => {
-        await refetch();
-        const isEngineRunning = engineStatus === EngineStatus.RUNNING;
+  const isEngineRunningNow = async () => {
+    await refetch();
+    const isEngineRunning = engineStatus === EngineStatus.RUNNING;
 
-        if (!isEngineRunning && !isLoading) {
-            showToastMessage(
-                ToastTypes.ERROR,
-                tErrors('notAllowedWhenEngineIsNotRunningMessage'),
-                tErrors('notAllowedWhenEngineIsNotRunningTitle'),
-            );
-        }
+    if (!isEngineRunning && !isLoading) {
+      showToastMessage(
+        ToastTypes.ERROR,
+        tErrors('notAllowedWhenEngineIsNotRunningMessage'),
+        tErrors('notAllowedWhenEngineIsNotRunningTitle'),
+      );
+    }
 
-        return isEngineRunning;
-    };
+    return isEngineRunning;
+  };
 
-    return {
-        isEngineRunningNow,
-    };
+  return {
+    isEngineRunningNow,
+  };
 };

package/src/hooks/useContentRef.ts

@@ -3,5 +3,5 @@ import { useContext } from 'react';
 import { ContentContext } from '../components/WfoPageTemplate';
 
 export const useContentRef = () => ({
-    contentRef: useContext(ContentContext)?.contentRef,
+  contentRef: useContext(ContentContext)?.contentRef,
 });

package/src/hooks/useDataDisplayParams.ts

@@ -1,63 +1,51 @@
-import {
-    NumberParam,
-    ObjectParam,
-    StringParam,
-    useQueryParams,
-    withDefault,
-} from 'use-query-params';
+import { NumberParam, ObjectParam, StringParam, useQueryParams, withDefault } from 'use-query-params';
 
 import { DEFAULT_PAGE_SIZE } from '../components';
 import { GraphQLSort } from '../types';
 
 export type DataDisplayParams<Type> = {
-    pageSize: number;
-    pageIndex: number;
-    sortBy: GraphQLSort<Type>;
-    queryString?: string; // The filter param is going to send to the backend as is for parsing
+  pageSize: number;
+  pageIndex: number;
+  sortBy: GraphQLSort<Type>;
+  queryString?: string; // The filter param is going to send to the backend as is for parsing
 };
 
 export interface DataDisplayReturnValues<Type> {
-    dataDisplayParams: DataDisplayParams<Type>;
-    setDataDisplayParam: <PropKey extends keyof DataDisplayParams<Type>>(
-        prop: PropKey,
-        value: DataDisplayParams<Type>[PropKey],
-    ) => void;
+  dataDisplayParams: DataDisplayParams<Type>;
+  setDataDisplayParam: <PropKey extends keyof DataDisplayParams<Type>>(
+    prop: PropKey,
+    value: DataDisplayParams<Type>[PropKey],
+  ) => void;
 }
 
 export const useDataDisplayParams = <Type>(
-    initialParams: Partial<DataDisplayParams<Type>>,
+  initialParams: Partial<DataDisplayParams<Type>>,
 ): DataDisplayReturnValues<Type> => {
-    const defaultParams = {
-        pageSize: DEFAULT_PAGE_SIZE,
-        pageIndex: 0,
-        ...initialParams,
-    };
+  const defaultParams = {
+    pageSize: DEFAULT_PAGE_SIZE,
+    pageIndex: 0,
+    ...initialParams,
+  };
 
-    const [dataDisplayParams, setDataDisplayParams] = useQueryParams({
-        pageSize: withDefault(NumberParam, defaultParams.pageSize),
-        pageIndex: withDefault(NumberParam, defaultParams.pageIndex),
-        sortBy: withDefault(
-            ObjectParam,
-            defaultParams.sortBy ? defaultParams.sortBy : {},
-        ),
-        queryString: withDefault(
-            StringParam,
-            defaultParams.queryString ? defaultParams.queryString : '',
-        ),
-    });
+  const [dataDisplayParams, setDataDisplayParams] = useQueryParams({
+    pageSize: withDefault(NumberParam, defaultParams.pageSize),
+    pageIndex: withDefault(NumberParam, defaultParams.pageIndex),
+    sortBy: withDefault(ObjectParam, defaultParams.sortBy ? defaultParams.sortBy : {}),
+    queryString: withDefault(StringParam, defaultParams.queryString ? defaultParams.queryString : ''),
+  });
 
-    const setDataDisplayParam = <PropKey extends keyof DataDisplayParams<Type>>(
-        prop: PropKey,
-        value: DataDisplayParams<Type>[PropKey],
-    ) => {
-        setDataDisplayParams((lastParams) => ({
-            ...lastParams,
-            [prop]: value,
-        }));
-    };
+  const setDataDisplayParam = <PropKey extends keyof DataDisplayParams<Type>>(
+    prop: PropKey,
+    value: DataDisplayParams<Type>[PropKey],
+  ) => {
+    setDataDisplayParams((lastParams) => ({
+      ...lastParams,
+      [prop]: value,
+    }));
+  };
 
-    return {
-        dataDisplayParams: dataDisplayParams as DataDisplayParams<Type>,
-        setDataDisplayParam,
-    };
+  return {
+    dataDisplayParams: dataDisplayParams as DataDisplayParams<Type>,
+    setDataDisplayParam,
+  };
 };

package/src/hooks/useDebounce.ts

@@ -1,21 +1,21 @@
 import { useEffect, useState } from 'react';
 
 export function useDebounce<T>(value: T, delay: number): T {
-    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
-    useEffect(() => {
-        if (delay <= 0) {
-            setDebouncedValue(value);
-            return;
-        }
-        const handler = setTimeout(() => {
-            setDebouncedValue(value);
-        }, delay);
+  useEffect(() => {
+    if (delay <= 0) {
+      setDebouncedValue(value);
+      return;
+    }
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
 
-        return () => {
-            clearTimeout(handler);
-        };
-    }, [value, delay]);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
 
-    return debouncedValue;
+  return debouncedValue;
 }

package/src/hooks/useGetOrchestratorConfig.ts

@@ -4,5 +4,5 @@ import { selectOrchestratorConfig } from '@/rtk/slices/orchestratorConfig';
 import { OrchestratorConfig } from '@/types';
 
 export const useGetOrchestratorConfig = (): OrchestratorConfig => {
-    return useSelector(selectOrchestratorConfig);
+  return useSelector(selectOrchestratorConfig);
 };