@pega/react-sdk-overrides 24.2.11 → 25.1.11

package/lib/template/HierarchicalForm/hooks.ts

@@ -0,0 +1,224 @@
+import { useState, useEffect, useMemo, useCallback, useRef, Children, type PropsWithChildren, type SyntheticEvent } from 'react';
+
+import useGetTabsCount from '@pega/react-sdk-components/lib/hooks/useGetTabsCount';
+import { searchtabsClick as tabClick, getActiveTabId, getFirstVisibleTabId } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
+import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+const ComponentName = 'HierarchicalForm';
+
+const getLandingPageViewName = (contextName: string) => {
+  const target = contextName.substring(0, contextName.lastIndexOf('_'));
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(target);
+  const containerItemData = PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
+  return containerItemData?.view?.config?.name;
+};
+
+export interface HierarchicalFormProps extends PConnProps {
+  tabsVisibility?: Record<string, boolean>;
+  template?: string;
+  instructions?: string;
+  lastUpdateCaseTime?: string | number;
+}
+
+export function useHierarchicalForm(props: PropsWithChildren<HierarchicalFormProps>) {
+  const { children = [], getPConnect, tabsVisibility = {}, template } = props;
+  const [tabErrors, setTabErrors] = useState<Record<string, any>>({});
+  const tabErrorsRef = useRef<Record<string, any>>({});
+  const submitAttemptedRef = useRef(false);
+  const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
+  const fullCaseId = getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+
+  const deferLoadedTabs: any = Children.toArray(children)[0];
+  deferLoadedTabs.props.getPConnect().setInheritedProp('template', template);
+
+  const navigationKey = useMemo(() => {
+    const parentNavKey = `${
+      getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID) || getLandingPageViewName(getPConnect().getContextName())
+    }`;
+    return `${parentNavKey}-${getPConnect().getMetadata()?.name}-${ComponentName}`;
+  }, []);
+
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  const storedTab = (PCore.getNavigationUtils().getComponentState(navigationKey) as any)?.activeTab;
+
+  const tabsFromChildren = deferLoadedTabs.props.getPConnect().getChildren();
+
+  const firstTabId = getFirstVisibleTabId(deferLoadedTabs, undefined);
+
+  const [currentTabId, setCurrentTabId] = useState(getActiveTabId(tabsFromChildren, storedTab || firstTabId));
+  const [tabVisibilityStr, setTabVisibilityStr] = useState('');
+  const { data: tabData, refreshTabData } = useGetTabsCount(deferLoadedTabs, 'hierarchical', currentTabId, template);
+
+  const handleCaseRefresh = (message: any) => {
+    if (message.subtype === 'tab') {
+      refreshTabData();
+    }
+  };
+
+  useEffect(() => {
+    let index = 0;
+    let caseSubId = '';
+    deferLoadedTabs.props
+      .getPConnect()
+      .getChildren()
+      ?.forEach((child: any) => {
+        const rawConfigProps = child.getPConnect().getRawConfigProps();
+        if ('visibility' in rawConfigProps) {
+          tabsVisibility[`${index}`] = rawConfigProps.visibility;
+        }
+        index += 1;
+      });
+
+    getPConnect().registerAdditionalProps({ tabsVisibility });
+    getPConnect().registerAdditionalProps({ lastUpdateCaseTime: '@P caseInfo.lastUpdateTime' });
+
+    if (fullCaseId) {
+      caseSubId = PCore.getMessagingServiceManager().getCaseSubscription(fullCaseId).subscribe({ caseId: fullCaseId }, handleCaseRefresh);
+    }
+
+    return () => {
+      if (fullCaseId) PCore.getMessagingServiceManager().getCaseSubscription(fullCaseId).unsubscribe(caseSubId);
+    };
+  }, []);
+
+  useEffect(() => {
+    refreshTabData();
+  }, [lastUpdateCaseTime]);
+
+  useEffect(() => {
+    const isVisibilityAvailable =
+      Object.values(tabsVisibility).length > 0 && Object.values(tabsVisibility).every(visibility => typeof visibility === 'boolean');
+    if (isVisibilityAvailable) {
+      let str = '';
+      Object.keys(tabsVisibility).forEach(key => {
+        str += key + tabsVisibility[key];
+      });
+      setTabVisibilityStr(str);
+    }
+  }, [tabsVisibility]);
+
+  useEffect(() => {
+    if (tabData && tabData.length) {
+      const activeTabId = getActiveTabId(tabData, currentTabId);
+      if (activeTabId !== currentTabId) {
+        setCurrentTabId(activeTabId);
+      }
+    }
+  }, [tabVisibilityStr, tabData]);
+
+  useEffect(() => {
+    PCore.getNavigationUtils().setComponentState(navigationKey, { activeTab: currentTabId });
+    const activeTabNavKey = `${getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID)}-CaseView-ActiveTab`;
+    PCore.getNavigationUtils().setComponentState(activeTabNavKey, { id: currentTabId });
+
+    return () => {
+      if (getPConnect().getContextName()?.includes('/modal')) {
+        PCore.getNavigationUtils().setComponentState(navigationKey, { activeTab: firstTabId });
+      }
+    };
+  }, [currentTabId, children]);
+
+  const handleTabClick = useCallback(
+    (event: SyntheticEvent, id: string) => {
+      tabClick(id, tabData, currentTabId, setCurrentTabId);
+    },
+    [tabData, currentTabId]
+  );
+
+  const tabItems = useMemo(() => tabData?.filter((tab: any) => tab.visibility()) ?? [], [tabData, tabVisibilityStr]);
+
+  const tabsRef = useRef(tabItems);
+  tabsRef.current = tabItems;
+
+  const updateTabErrorsOnViewMutate = useCallback((messageObject: any, tab: any) => {
+    if (!messageObject.type) {
+      return;
+    }
+    const previousTabErrors = tabErrorsRef.current;
+    let currentTabState = previousTabErrors[tab.id] || {};
+    const { MESSAGES_TYPE_ERROR } = PCore.getConstants().MESSAGES;
+    if (messageObject.type !== MESSAGES_TYPE_ERROR) {
+      delete currentTabState[messageObject.fieldName];
+      currentTabState = Object.keys(currentTabState).length > 0 ? currentTabState : undefined;
+    } else {
+      currentTabState = { ...currentTabState, [messageObject.fieldName]: messageObject.messages };
+    }
+    const newErrors = { ...previousTabErrors, [tab.id]: currentTabState };
+    tabErrorsRef.current = newErrors;
+    setTabErrors(newErrors);
+  }, []);
+
+  useEffect(() => {
+    const rawConfig = '_rawConfig';
+    tabItems.forEach((tab: any) => {
+      PCore.getContextTreeManager().onViewMutate(
+        tab.getPConnect().getContextName(),
+        tab.getPConnect().getPageReference(),
+        tab.getPConnect()[rawConfig].config?.name,
+        (messageObject: any) => updateTabErrorsOnViewMutate(messageObject, tab)
+      );
+    });
+  }, [tabItems, updateTabErrorsOnViewMutate]);
+
+  const navigateToFirstErrorTab = useCallback(() => {
+    const currentErrors = tabErrorsRef.current;
+    const firstTabWithError = tabsRef.current.find((tab: any) => {
+      const tabErrorState = currentErrors[tab.id];
+      return tabErrorState && Object.keys(tabErrorState).length > 0;
+    });
+    if (firstTabWithError) {
+      submitAttemptedRef.current = false;
+      setCurrentTabId(firstTabWithError.id);
+    }
+  }, []);
+
+  const highlightFirstErrorTab = useCallback(() => {
+    submitAttemptedRef.current = true;
+    navigateToFirstErrorTab();
+  }, [navigateToFirstErrorTab]);
+
+  useEffect(() => {
+    const { CURRENT_ASSIGNMENT_UPDATED } = PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
+    PCore.getPubSubUtils().subscribe(
+      CURRENT_ASSIGNMENT_UPDATED,
+      () => {
+        tabErrorsRef.current = {};
+        submitAttemptedRef.current = false;
+        setTabErrors({});
+      },
+      'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm'
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.ERROR_ON_FINISH_ASSIGNMENT,
+      highlightFirstErrorTab,
+      'ERROR_ON_FINISH_ASSIGNMENT-HierarchicalForm'
+    );
+
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(CURRENT_ASSIGNMENT_UPDATED, 'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm');
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.ERROR_ON_FINISH_ASSIGNMENT,
+        'ERROR_ON_FINISH_ASSIGNMENT-HierarchicalForm'
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (submitAttemptedRef.current) {
+      navigateToFirstErrorTab();
+    }
+  }, [tabErrors, navigateToFirstErrorTab]);
+
+  const processedTabs = useMemo(() => {
+    return tabItems.map(tab => {
+      const errorKeys = Object.keys(tabErrors[tab.id] ?? {});
+      const errors = errorKeys.length > 0 ? errorKeys.reduce((sum, fieldName) => sum + tabErrors[tab.id][fieldName].length, 0) : undefined;
+      return { ...tab, errors };
+    });
+  }, [tabItems, tabErrors]);
+
+  return { currentTabId, handleTabClick, processedTabs, instructions };
+}

package/lib/template/HierarchicalForm/index.tsx

@@ -0,0 +1 @@
+export { default } from './HierarchicalForm';

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, Typography } from '@mui/material';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { Grid2, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface InlineDashboardProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -50,24 +50,22 @@ export default function InlineDashboard(props: PropsWithChildren<InlineDashboard
       </Typography>
 
       {filterPosition === 'block-start' && (
-        <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>
-          <Grid item xs={12} className={classes.colStyles}>
+        <Grid2 container spacing={2} direction='column-reverse' className={classes.containerStyles}>
+          <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
             {childrenToRender[0]}
-          </Grid>
-          <Grid id='filters' item xs={12} className={classes.filterContainerStyles}>
+          </Grid2>
+          <Grid2 id='filters' size={{ xs: 12 }} className={classes.filterContainerStyles}>
             {childrenToRender[1]}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       )}
       {filterPosition !== 'block-start' && (
-        <Grid container spacing={2} direction={direction} className={classes.containerStyles}>
-          <Grid item xs={9}>
-            {childrenToRender[0]}
-          </Grid>
-          <Grid id='filters' item xs={3} className={classes.inlineStyles}>
+        <Grid2 container spacing={2} direction={direction} className={classes.containerStyles}>
+          <Grid2 size={{ xs: 9 }}>{childrenToRender[0]}</Grid2>
+          <Grid2 id='filters' size={{ xs: 3 }} className={classes.inlineStyles}>
             {childrenToRender[1]}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       )}
     </>
   );

package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -1,8 +1,8 @@
-import { useMemo, Children, useEffect, useState, PropsWithChildren } from 'react';
+import { useMemo, Children, useEffect, useState, type PropsWithChildren } from 'react';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface InlineDashboardPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/ListPage/ListPage.tsx

@@ -1,5 +1,5 @@
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ListPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component