@pega/react-sdk-overrides 24.2.11 → 25.1.11

package/lib/infra/NavBar/NavBar.tsx

@@ -7,9 +7,9 @@ import {
   Drawer,
   List,
   ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
-  ListItemSecondaryAction,
   Collapse,
   Divider,
   IconButton,
@@ -36,13 +36,13 @@ import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './NavBar.css';
 
 interface NavBarProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  // eslint-disable-next-line react/no-unused-prop-types
+
   appName?: string;
   pages?: any[];
   caseTypes: any[];
@@ -93,7 +93,8 @@ const useStyles = makeStyles(theme => ({
   },
   appListLogo: {
     marginRight: theme.spacing(2),
-    width: '3.6rem'
+    width: '3.6rem',
+    filter: 'var(--svg-color)'
   },
   appListIcon: {
     color: theme.palette.getContrastText(theme.palette.primary.light)
@@ -125,7 +126,6 @@ export default function NavBar(props: NavBarProps) {
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const localeUtils = PCore.getLocaleUtils();
-  const localeReference = pConn.getValue('.pyLocaleReference');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'AppShell';
@@ -133,20 +133,31 @@ export default function NavBar(props: NavBarProps) {
   const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
-
+  // @ts-ignore
+  const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || pConn.getValue('.pyLocaleReference');
   useEffect(() => {
-    setNavPages(JSON.parse(JSON.stringify(pages)));
+    const updatedPages = pages.map((page: any) => {
+      const destinationObject: any = {};
+      pConn.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      const name = localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      return { ...page, name };
+    });
+    setNavPages(updatedPages);
   }, [pages]);
 
   function navPanelButtonClick(oPageData: any) {
     const { pyClassName, pyRuleName } = oPageData;
-
     pConn
       .getActionsApi()
       .showPage(pyRuleName, pyClassName)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('showPage completed', localeCategory)}`);
+      })
+      .catch(error => {
+        console.error('Failed to navigate to page from NavBar', error);
       });
   }
 
@@ -156,13 +167,14 @@ export default function NavBar(props: NavBarProps) {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-
     pConn
       .getActionsApi()
       .createWork(sCaseType, actionInfo)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('createWork completed', localeCategory)}`);
+      })
+      .catch(error => {
+        console.error('Failed to create case from NavBar', error);
       });
   }
 
@@ -199,7 +211,14 @@ export default function NavBar(props: NavBarProps) {
     >
       {open ? (
         <List className={classes.appListItem}>
-          <ListItem onClick={handleDrawerOpen}>
+          <ListItem
+            onClick={handleDrawerOpen}
+            secondaryAction={
+              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
+                <ChevronLeftIcon className={classes.appListIcon} />
+              </IconButton>
+            }
+          >
             <ListItemIcon>
               <img src={portalLogoImage} className={classes.appListLogo} />
             </ListItemIcon>
@@ -210,11 +229,6 @@ export default function NavBar(props: NavBarProps) {
                 </Typography>
               }
             />
-            <ListItemSecondaryAction>
-              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
-                <ChevronLeftIcon className={classes.appListIcon} />
-              </IconButton>
-            </ListItemSecondaryAction>
           </ListItem>
         </List>
       ) : (
@@ -223,17 +237,16 @@ export default function NavBar(props: NavBarProps) {
         </div>
       )}
       <List>
-        <ListItem button onClick={handleCaseItemClick}>
+        <ListItemButton onClick={handleCaseItemClick}>
           <ListItemIcon>{bShowCaseTypes && open ? <ClearOutlinedIcon fontSize='large' /> : <AddIcon fontSize='large' />}</ListItemIcon>
           <ListItemText primary='Create' />
           {bShowCaseTypes ? <ExpandLess /> : <ExpandMore />}
-        </ListItem>
+        </ListItemButton>
       </List>
       <Collapse in={bShowCaseTypes && open} timeout='auto' unmountOnExit className='scrollable'>
         <List component='div' disablePadding>
           {caseTypes.map(caseType => (
-            <ListItem
-              button
+            <ListItemButton
               className={classes.nested}
               onClick={() => navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}
               key={caseType.pyLabel}
@@ -241,34 +254,36 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
-              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
-            </ListItem>
+              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))} />
+            </ListItemButton>
           ))}
         </List>
       </Collapse>
       <List>
         {navPages.map(page => (
-          <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
+          <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
-          </ListItem>
+            <ListItemText primary={page.name} />
+          </ListItemButton>
         ))}
       </List>
       <Divider />
       <List className='marginTopAuto'>
         <>
-          <ListItem onClick={navPanelOperatorButtonClick}>
+          <ListItem
+            onClick={navPanelOperatorButtonClick}
+            secondaryAction={
+              open ? (
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
+                  <ChevronRightIcon />
+                </IconButton>
+              ) : null
+            }
+          >
             <ListItemIcon id='person-icon'>
               <PersonOutlineIcon fontSize='large' />
             </ListItemIcon>
             <ListItemText primary={portalOperator} />
-            {open && (
-              <ListItemSecondaryAction>
-                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
-                  <ChevronRightIcon />
-                </IconButton>
-              </ListItemSecondaryAction>
-            )}
           </ListItem>
           <Menu
             anchorEl={anchorEl}

package/lib/infra/Reference/Reference.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ReferenceProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -12,8 +12,7 @@ export default function Reference(props: ReferenceProps) {
   const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
 
   const pConnect = getPConnect();
-  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
-  const referenceConfig = { ...pConnect.getComponentConfig() } || {};
+  const referenceConfig = { ...pConnect.getComponentConfig() };
 
   delete referenceConfig?.name;
   delete referenceConfig?.type;
@@ -34,11 +33,16 @@ export default function Reference(props: ReferenceProps) {
     }
   };
 
-  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  // @ts-expect-error - Argument of type 'null' is not assignable to parameter of type 'string'.
   const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
     pageReference: context && context.startsWith('@CLASS') ? '' : context
   });
 
+  if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
+    const inheritedProps = pConnect.getInheritedProps();
+    referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
+  }
+
   viewComponent.props.getPConnect().setInheritedConfig({
     ...referenceConfig,
     readOnly,

package/lib/infra/Region/Region.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 
 // Region does NOT have getPConnect. So, no need to extend from PConnProps
 interface RegionProps {

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,11 +1,11 @@
-import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, createElement, type PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { LazyMap as LazyComponentMap } from '@pega/react-sdk-components/lib/components_map';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface RootContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -15,11 +15,10 @@ interface RootContainerProps extends PConnProps {
   httpMessages: any[];
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const renderingModes = ['portal', 'view'];
 
@@ -196,7 +195,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     );
   }
   if (renderingMode === 'noPortal') {
-    // eslint-disable-next-line no-console
     console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
 
     const theChildren = pConn.getChildren() as any[];

package/lib/infra/Stages/Stages.tsx

@@ -3,7 +3,7 @@ import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import DoneIcon from '@mui/icons-material/Done';
 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 StagesProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -57,14 +57,13 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
-
+  const localizationService = pConn.getLocalizationService();
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
+      name: localizationService.getLocalizedText(stage.name),
       id: theID,
       complete: stage.visited_status === 'completed',
       current: theID === currentStageID,

package/lib/infra/View/View.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useEffect } from 'react';
+import { type PropsWithChildren, useEffect } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Need to import any templates that we might render
 
@@ -21,13 +21,12 @@ interface ViewProps extends PConnProps {
   type?: any;
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
-const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];
+const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide', 'HierarchicalForm'];
 const NO_HEADER_TEMPLATES = [
   'SubTabs',
   'SimpleTable',
@@ -38,7 +37,8 @@ const NO_HEADER_TEMPLATES = [
   'WideNarrowDetails',
   'Confirmation',
   'DynamicTabs',
-  'DetailsSubTabs'
+  'DetailsSubTabs',
+  'ListView'
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {

package/lib/template/AdvancedSearch/AdvancedSearch.tsx

@@ -0,0 +1,86 @@
+import { useContext, useState } from 'react';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import DataReferenceAdvancedSearchContext from '@pega/react-sdk-components/lib/components/template/DataReference/DataReferenceAdvancedSearchContext';
+import { getFirstChildConfig } from '@pega/react-sdk-components/lib/components/template/DataReference/utils';
+
+export default function AdvancedSearch(props) {
+  const { getPConnect, targetObjectClass, localeReference } = props;
+  const SearchGroups = getComponentFromMap('SearchGroups');
+  const { dataReferenceConfigToChild, isCreateNewReferenceEnabled, disableStartingFieldsForReference, pyID, searchSelectCacheKey } = useContext(
+    DataReferenceAdvancedSearchContext
+  ) as any;
+
+  const { selectionMode, value: singleSelectFieldValue, readonlyContextList: multiSelectField } = dataReferenceConfigToChild;
+
+  let isSelectionExist = false;
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  if (selectionMode === MULTI) {
+    isSelectionExist = getPConnect().getValue(multiSelectField)?.length || false;
+  } else {
+    isSelectionExist = getPConnect().getValue(singleSelectFieldValue) || false;
+  }
+
+  const [showRecords, setShowRecords] = useState(isSelectionExist);
+
+  const pConn = getPConnect();
+  const rawViewMetadata = pConn.getRawMetadata();
+
+  const searchFieldsSet = new Set();
+  const searchFields: any = [];
+  rawViewMetadata.config.searchGroups.forEach(group => {
+    group.children.forEach(child => {
+      if (!searchFieldsSet.has(child.config.value) && !child.config.validator) {
+        searchFields.push(child);
+        searchFieldsSet.add(child.config.value);
+      }
+    });
+  });
+
+  const firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+  const [firstChildMeta] = rawViewMetadata.children;
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+
+  const editableFieldComp = firstChildPConnect().createComponent({
+    type: firstChildMeta.type,
+    config: {
+      ...getFirstChildConfig({
+        firstChildMeta,
+        getPConnect,
+        rawViewMetadata,
+        contextClass: targetObjectClass,
+        dataReferenceConfigToChild,
+        isCreateNewReferenceEnabled,
+        disableStartingFieldsForReference,
+        pyID
+      }),
+      searchFields,
+      showRecords,
+      label: localizedVal('Search results', 'DataReference'),
+      searchSelectCacheKey,
+      cache
+    }
+  });
+
+  const { selectionList, dataRelationshipContext } = editableFieldComp.props.getPConnect().getConfigProps();
+  const editableField = selectionMode === MULTI ? selectionList.substring(1) : dataRelationshipContext;
+
+  const searchGroupsProps = {
+    getPConnect,
+    editableField,
+    localeReference,
+    setShowRecords,
+    searchSelectCacheKey,
+    cache
+  };
+
+  return (
+    <>
+      <SearchGroups {...searchGroupsProps} />
+      {editableFieldComp}
+    </>
+  );
+}

package/lib/template/AdvancedSearch/SearchGroup/persistUtils.ts

@@ -0,0 +1,52 @@
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+const SKIP_CACHE_KEY = '';
+
+const getComponentStateKey = (getPConnect, propertyName: string) => {
+  const pConnect = getPConnect();
+  const caseID = `.${Utils.getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
+  const resolvedCaseID = pConnect.getValue(caseID);
+
+  if (!resolvedCaseID) {
+    return SKIP_CACHE_KEY;
+  }
+
+  return `Search-${resolvedCaseID}-${pConnect.getPageReference()}-${propertyName}-${pConnect.getCurrentView()}`;
+};
+
+const getComponentStateOptions = getPConnect => {
+  return { clearOnCancelForContext: getPConnect().getContextName() };
+};
+
+interface SearchCategory {
+  // tabId of search category selected
+  selectedCategory: string;
+}
+
+interface SearchGroup {
+  // searchFields can be any object based on what fields are authored.
+  searchFields: unknown;
+  activeGroupId: string;
+}
+
+const setComponentCache = ({
+  cacheKey,
+  state,
+  options
+}: {
+  cacheKey: string;
+  state: SearchCategory | SearchGroup;
+  options: ReturnType<typeof getComponentStateOptions>;
+}) => {
+  if (cacheKey !== SKIP_CACHE_KEY) {
+    (PCore.getNavigationUtils() as any).setComponentCache(cacheKey, state, options);
+  }
+};
+
+const componentCachePersistUtils = {
+  getComponentStateKey,
+  getComponentStateOptions,
+  setComponentCache
+};
+
+export default componentCachePersistUtils;