@pega/react-sdk-overrides 24.2.11 → 25.1.10

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -1,8 +1,10 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 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 CaseSummaryProps extends PConnProps {
+  arPrimaryFields: any[];
+  arSecondaryFields: any[];
   // If any, enter additional props that only exist on this component
 }
 
@@ -11,26 +13,16 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
   const { getPConnect, children } = props;
+  let { arPrimaryFields = [], arSecondaryFields = [] } = props;
 
-  const thePConn = getPConnect();
-  const theConfigProps: any = thePConn.getConfigProps();
-  // const { status, showStatus } = theConfigProps;
-  const status = theConfigProps.status;
-  const showStatus = theConfigProps.showStatus;
+  const thePConn = getPConnect && getPConnect();
+  const theConfigProps: any = thePConn?.getConfigProps();
+
+  const status = theConfigProps?.status;
+  const showStatus = theConfigProps?.showStatus;
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'ModalContainer';
-  // from Constellation DX Components
-  // get the primary and secondary fields with the raw data (which has the non-resolved property values)
-  // const regionsRaw = getPConnect().getRawMetadata().children;
-  // const primaryFieldsRaw = regionsRaw[0].children;
-  // const secondaryFieldsRaw = regionsRaw[1].children;
-
-  // From other SDKs
-  // may want to move these into useEffect/useState combo
-  let arPrimaryFields: any[] = [];
-  let arSecondaryFields: any[] = [];
 
-  /* eslint-disable @typescript-eslint/no-shadow */
   function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
     const { config, children } = pConnectMeta;
     const pConnect = getPConnect();
@@ -62,32 +54,27 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
     return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
   }
 
-  for (const child of children as ReactElement[]) {
-    const childPConn = (child as ReactElement).props.getPConnect();
-    const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
-    if (childPConnData.name.toLowerCase() === 'primary fields') {
-      arPrimaryFields = childPConnData.children;
-      arPrimaryFields.forEach(field => {
-        if (field.config?.value && typeof field.config?.value === 'string') {
-          field.config.value = localizedVal(field.config.value, localeCategory);
-        }
-      });
-    } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
-      const secondarySummaryFields = prepareCaseSummaryData(childPConn);
-      arSecondaryFields = childPConnData.children;
-      arSecondaryFields.forEach((field, index) => {
-        field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
-      });
+  if (arPrimaryFields.length === 0 && arSecondaryFields.length === 0) {
+    for (const child of children as ReactElement[]) {
+      const childPConn = (child as ReactElement).props.getPConnect();
+      const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
+      if (childPConnData.name.toLowerCase() === 'primary fields') {
+        arPrimaryFields = childPConnData.children;
+        arPrimaryFields.forEach(field => {
+          if (field.config?.value && typeof field.config?.value === 'string') {
+            field.config.value = localizedVal(field.config.value, localeCategory);
+          }
+        });
+      } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
+        const secondarySummaryFields = prepareCaseSummaryData(childPConn);
+        arSecondaryFields = childPConnData.children;
+        arSecondaryFields.forEach((field, index) => {
+          field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
+        });
+      }
     }
   }
 
-  // At this point, should hand off to another component for layout and rendering
-  //  of primary and secondary fields in the Case Summary
-
-  // debugging/investigation help
-  // console.log(`CaseSummary: arPrimaryFields: ${JSON.stringify(arPrimaryFields)}`);
-  // console.log(`CaseSummary: arSecondaryFields: ${JSON.stringify(arSecondaryFields)}`);
-
   return (
     <div id='CaseSummary'>
       <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />

package/lib/template/CaseView/CaseView.tsx

@@ -1,16 +1,14 @@
-/* eslint-disable react/jsx-boolean-value */
-
-import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
+import { type PropsWithChildren, type ReactElement, useContext, useEffect, useState } from 'react';
 import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 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 CaseViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -43,9 +41,6 @@ const useStyles = makeStyles(theme => ({
     width: theme.spacing(8),
     height: theme.spacing(8),
     padding: theme.spacing(1)
-  },
-  caseViewIconImage: {
-    filter: 'invert(100%)'
   }
 }));
 
@@ -61,12 +56,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     header,
     subheader,
     children = [],
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    showIconInHeader = true,
-    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
+    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '', caseTypeIcon }
   } = props;
   const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
-
   const currentCaseID = props.caseInfo.ID;
   let isComponentMounted = true;
   const { displayOnlyFA } = useContext<any>(StoreContext);
@@ -78,17 +70,17 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'CaseView';
-  const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
+
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
    */
   function getChildRegionByName(inName: string): any {
     for (const child of children as ReactElement[]) {
-      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type.toLowerCase();
-      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name.toLowerCase();
-
+      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type?.toLowerCase();
+      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name?.toLowerCase();
       if (theMetadataType === 'region' && theMetadataName === inName) {
         return child;
       }
@@ -103,7 +95,12 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const theUtilitiesRegion = getChildRegionByName('utilities');
   const theTabsRegion = getChildRegionByName('tabs');
 
-  const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
+  let iconForCaseType = caseTypeIcon ? caseTypeIcon.replace('pi pi-', '') : icon;
+
+  if (!iconForCaseType || iconForCaseType.includes('.')) {
+    iconForCaseType = 'polaris-solid';
+  }
+  const caseSvgIconUrl = Utils.getImageSrc(iconForCaseType, Utils.getSDKStaticConentUrl());
 
   const [activeVertTab, setActiveVertTab] = useState(0);
 
@@ -111,10 +108,10 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
 
   // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
-  const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
+  const theTabsRegionChildren = theTabsRegion?.props.getPConnect().getChildren();
 
   // vertTabInfo is sent to VerticalTabs component
-  const vertTabInfo: Object[] = [];
+  const vertTabInfo: object[] = [];
 
   // deferLoadInfo is sent to DeferLoad component (currently selected entry)
   const deferLoadInfo: any[] = [];
@@ -208,8 +205,8 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     if (!displayOnlyFA) {
       // show full portal
       return (
-        <Grid container>
-          <Grid item xs={3}>
+        <Grid2 container>
+          <Grid2 size={{ xs: 3 }}>
             <div hidden={true} id='current-caseID'>
               {currentCaseID}
             </div>
@@ -218,7 +215,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
                 className={classes.caseViewHeader}
                 title={
                   <Typography variant='h6' component='div' id='case-name'>
-                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                    {localizationService.getLocalizedText(header)}
                   </Typography>
                 }
                 subheader={
@@ -228,7 +225,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
                 }
                 avatar={
                   <Avatar className={classes.caseViewIconBox} variant='square'>
-                    <img src={svgCase} className={classes.caseViewIconImage} />
+                    <img src={caseSvgIconUrl} />
                   </Avatar>
                 }
               />
@@ -238,29 +235,25 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={6}>
+          <Grid2 size={{ xs: 6 }}>
             {theStagesRegion}
             {theTodoRegion}
             {deferLoadInfo.length > 0 && (
               <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
             )}
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={3}>
-            {theUtilitiesRegion}
-          </Grid>
-        </Grid>
+          <Grid2 size={{ xs: 3 }}>{theUtilitiesRegion}</Grid2>
+        </Grid2>
       );
     }
     // displayOnlyFA - only show the "todo" region
     return (
-      <Grid container>
-        <Grid item xs={12}>
-          {theTodoRegion}
-        </Grid>
-      </Grid>
+      <Grid2 container>
+        <Grid2 size={{ xs: 12 }}>{theTodoRegion}</Grid2>
+      </Grid2>
     );
   }
 

package/lib/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import Snackbar from '@mui/material/Snackbar';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';

package/lib/template/Confirmation/Confirmation.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable no-nested-ternary */
-import { PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren, useState } from 'react';
 import { Button, Card } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
 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 ConfirmationProps extends PConnProps {
   // If any, enter additional props that only exist on this component