@pega/dx-component-builder-sdk 24.2.13 → 25.1.10

package/tests/assets/sdk-r/components/createAll/override-sdk/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
@@ -19,6 +17,7 @@ interface CaseViewProps extends PConnProps {
   header: string;
   showIconInHeader: boolean;
   caseInfo: any;
+  lastUpdateCaseTime: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -42,9 +41,6 @@ const useStyles = makeStyles(theme => ({
     width: theme.spacing(8),
     height: theme.spacing(8),
     padding: theme.spacing(1)
-  },
-  caseViewIconImage: {
-    filter: 'invert(100%)'
   }
 }));
 
@@ -60,14 +56,11 @@ 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);
 
   const thePConn = getPConnect();
@@ -78,17 +71,15 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'CaseView';
-  const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
-
+  const localeKey = thePConn?.getCaseLocaleReference();
   /**
    *
    * @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 +94,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 +107,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[] = [];
@@ -169,7 +165,6 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   useEffect(() => {
     if (hasNewAttachments) {
-      // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
       PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
     }
   }, [hasNewAttachments]);
@@ -209,8 +204,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>
@@ -229,7 +224,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>
                 }
               />
@@ -239,27 +234,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 />}
-          </Grid>
+            {deferLoadInfo.length > 0 && (
+              <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
+            )}
+          </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/tests/assets/sdk-r/components/createAll/override-sdk/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/tests/assets/sdk-r/components/createAll/override-sdk/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
@@ -41,7 +40,7 @@ export default function Confirmation(props: PropsWithChildren<ConfirmationProps>
   // Not using whatsNext at the moment, need to figure out the use of it
   // const whatsNext = datasource?.source;
   // const items = whatsNext.length > 0 ? whatsNext.map(item => item.label) : '';
-  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget());
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget() || '');
   const rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), activeContainerItemID);
   const onConfirmViewClose = () => {
     setShowConfirmView(false);