@pega/react-sdk-overrides 0.23.26 → 8.8.20

package/lib/widget/FileUtility/FileUtility/FileUtility.tsx

@@ -2,18 +2,33 @@ import React, { useEffect, useState } from "react";
 import TextField from '@material-ui/core/TextField';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import download from "downloadjs";
-import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList';
-import ActionButtonsForFileUtil from '@pega/react-sdk-components/lib/components/widget/FileUtility/ActionButtonsForFileUtil';
+// import SummaryList from '../../SummaryList';
+// import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { Button } from '@material-ui/core';
 import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { CircularProgress } from "@material-ui/core";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-declare const PCore;
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface FileUtilityProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 5 errors)
+declare const PCore: any;
+
+
+export default function FileUtility(props:FileUtilityProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryList = getComponentFromMap('SummaryList');
+  const ActionButtonsForFileUtil = getComponentFromMap('ActionButtonsForFileUtil');
 
-export default function FileUtility(props) {
   const { getPConnect } = props;
   const thePConn = getPConnect();
   const required = true;
@@ -22,8 +37,8 @@ export default function FileUtility(props) {
     count: 0
   };
   const [list, setList] = useState(listTemp);
-  const headerSvgIcon$ = Utils.getImageSrc('paper-clip', PCore.getAssetLoader().getStaticServerUrl());
-  const closeSvgIcon = Utils.getImageSrc("times", PCore.getAssetLoader().getStaticServerUrl());
+  const headerSvgIcon$ = Utils.getImageSrc('paper-clip', Utils.getSDKStaticConentUrl());
+  const closeSvgIcon = Utils.getImageSrc("times", Utils.getSDKStaticConentUrl());
   const configProps: any = thePConn.resolveConfigProps(thePConn.getConfigProps());
 
   const header = configProps.label;
@@ -31,16 +46,16 @@ export default function FileUtility(props) {
     showfileModal: false,
     fileList: [],
     attachedFiles: [],
-    fileMainButtons: [{ actionID: "attach", jsAction: "attachFiles", name: "Attach files"}],
-    fileSecondaryButtons: [{ actionID: "cancel", jsAction: "cancel", name: "Cancel"}]
+    fileMainButtons: [{ actionID: "attach", jsAction: "attachFiles", name: thePConn.getLocalizedValue('Attach files', '', '')}],     // 2nd and 3rd args empty string until typedef marked correctly
+    fileSecondaryButtons: [{ actionID: "cancel", jsAction: "cancel", name: thePConn.getLocalizedValue('Cancel', '', '')}]     // 2nd and 3rd args empty string until typedef marked correctly
   };
   const [fileData, setFileData] = useState(fileTemp);
   const linkTemp = {
     showLinkModal: false,
     linksList: [],
     attachedLinks: [],
-    linkMainButtons: [{ actionID: "attach", jsAction: "attachLinks", name: "Attach links"}],
-    linkSecondaryButtons: [{ actionID: "cancel", jsAction: "cancel", name: "Cancel"}]
+    linkMainButtons: [{ actionID: "attach", jsAction: "attachLinks", name: thePConn.getLocalizedValue('Attach links', '', '')}],   // 2nd and 3rd args empty string until typedef marked correctly
+    linkSecondaryButtons: [{ actionID: "cancel", jsAction: "cancel", name: thePConn.getLocalizedValue('Cancel', '', '')}]   // 2nd and 3rd args empty string until typedef marked correctly
   };
   const [linkData, setLinkData] = useState(linkTemp);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -75,12 +90,11 @@ export default function FileUtility(props) {
   }) {
     let actions;
 
-
     if (att.progress && att.progress !== 100) {
       actions = [
         {
           id: `Cancel-${att.ID}`,
-          text: "Cancel",
+          text: thePConn.getLocalizedValue('Cancel', '', ''),   // 2nd and 3rd args empty string until typedef marked correctly
           icon: "times",
           onClick: cancelFile
         }
@@ -93,7 +107,7 @@ export default function FileUtility(props) {
           "download",
           {
             id: `download-${ID}`,
-            text: isFile ? "Download" : "Open",
+            text: isFile ? thePConn.getLocalizedValue('Download', '', '') : thePConn.getLocalizedValue('Open', '', ''),   // 2nd and 3rd args empty string until typedef marked correctly
             icon: isFile ? "download" : "open",
             onClick: downloadFile
           }
@@ -102,7 +116,7 @@ export default function FileUtility(props) {
           "delete",
           {
             id: `Delete-${ID}`,
-            text: "Delete",
+            text: thePConn.getLocalizedValue('Delete', '', ''),   // 2nd and 3rd args empty string until typedef marked correctly
             icon: "trash",
             onClick: deleteFile
           }
@@ -118,7 +132,7 @@ export default function FileUtility(props) {
       actions = [
         {
           id: `Remove-${att.ID}`,
-          text: "Remove",
+          text: thePConn.getLocalizedValue('Remove', '', ''),   // 2nd and 3rd args empty string until typedef marked correctly
           icon: "trash",
           onClick: removeFile
         }
@@ -186,7 +200,7 @@ export default function FileUtility(props) {
   const getAttachments = () => {
 
     const attachmentUtils = PCore.getAttachmentUtils();
-    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');  // 2nd arg empty string until typedef marked correctly
 
     if (caseID && caseID !== "") {
       const attPromise = attachmentUtils.getCaseAttachments(caseID, thePConn.getContextName());
@@ -245,7 +259,7 @@ export default function FileUtility(props) {
   function setNewFiles(arFiles) {
     let index = 0;
     for (const file of arFiles) {
-      if (!validateMaxSize(file, 5)) {
+      if (!validateMaxSize(file, '5')) {
         file.error = true;
         file.meta = "File is too big. Max allowed size is 5MB.";
       }
@@ -318,7 +332,7 @@ export default function FileUtility(props) {
 
   function onAttachFiles() {
     const attachmentUtils = PCore.getAttachmentUtils();
-    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');  // 2nd arg empty string until typedef marked correctly
     const onUploadProgress = () => {};
     const errorHandler = () => {};
     closeFilePopup()
@@ -443,7 +457,7 @@ export default function FileUtility(props) {
 
   function onAttachLinks() {
     const attachmentUtils = PCore.getAttachmentUtils();
-    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');  // 2nd arg empty string until typedef marked correctly
     const links = linkData.attachedLinks;
     closeAddLinksPopup();
     const linksToAttach = links.map((item: any) => ({
@@ -492,8 +506,8 @@ export default function FileUtility(props) {
             open={Boolean(anchorEl)}
             onClose={handleClose}
           >
-            <MenuItem style={{fontSize: '14px'}} onClick={onAddFilesClick}>Add Files</MenuItem>
-            <MenuItem style={{fontSize: '14px'}} onClick={onAddLinksClick}>Add Links</MenuItem>
+            <MenuItem style={{fontSize: '14px'}} onClick={onAddFilesClick}>{thePConn.getLocalizedValue('Add files', '', '')}</MenuItem> {/* 2nd and 3rd args empty string until typedef marked correctly */}
+            <MenuItem style={{fontSize: '14px'}} onClick={onAddLinksClick}>{thePConn.getLocalizedValue('Add links', '', '')}</MenuItem> {/* 2nd and 3rd args empty string until typedef marked correctly */}
           </Menu>
         </div>
       </div>
@@ -506,12 +520,12 @@ export default function FileUtility(props) {
       {fileData.showfileModal && (
         <div className="psdk-dialog-background">
         <div className="psdk-modal-file-top">
-          <h3>Add local files</h3>
+          <h3>{thePConn.getLocalizedValue('Add local files', '', '')}</h3>
           <div className="psdk-modal-body">
             <div className="psdk-modal-file-selector">
               <label htmlFor='upload-files'>
                 <input style={{ display: 'none' }} id='upload-files' name='upload-files' type='file' multiple onChange={uploadMyFiles}/>
-                <Button variant='outlined' color='primary' component="span">Upload file(s)</Button>
+                <Button variant='outlined' color='primary' component="span">{thePConn.getLocalizedValue('Attach files', '', '')}</Button>  {/* 2nd and 3rd args empty string until typedef marked correctly */}
               </label>
             </div>
             {fileData.fileList.length > 0 && (<div style={{marginTop: '1rem'}}>
@@ -527,7 +541,7 @@ export default function FileUtility(props) {
       {linkData.showLinkModal && (
         <div className="psdk-dialog-background">
           <div className="psdk-modal-file-top">
-            <h3>Add links</h3>
+            <h3>{thePConn.getLocalizedValue('Add links', '', '')}</h3> {/* 2nd and 3rd args empty string until typedef marked correctly */}
             <div className="psdk-modal-body">
               <div className="psdk-modal-links-row">
                   <div className="psdk-links-two-column">
@@ -539,7 +553,7 @@ export default function FileUtility(props) {
                     </div>
                   </div>
                   <div className="psdk-modal-link-add">
-                    <Button className="psdk-add-link-action" color="primary" variant="contained" component="span" onClick={addLink} disabled={link.disable}>Add Link</Button>
+                    <Button className="psdk-add-link-action" color="primary" variant="contained" component="span" onClick={addLink} disabled={link.disable}>{thePConn.getLocalizedValue('Add link', '', '')}</Button> {/* 2nd and 3rd args empty string until typedef marked correctly */}
                   </div>
                 </div>
                 {linkData.linksList.length > 0 && (<div style={{marginTop: '1rem'}}>
@@ -554,7 +568,7 @@ export default function FileUtility(props) {
       {showViewAllModal && (<div className="psdk-dialog-background">
         <div className="psdk-modal-file-top">
           <div className="psdk-view-all-header">
-              <h3>Attachments</h3>
+              <h3>{thePConn.getLocalizedValue('Attachments', '', '')}</h3> {/* 2nd and 3rd args empty string until typedef marked correctly */}
               {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
               <button type="button" className="psdk-close-button" onClick = {() => setViewAll(false)}><img className="psdk-utility-card-actions-svg-icon" src={closeSvgIcon}></img></button>
           </div>

package/lib/widget/Followers/Followers.tsx

@@ -1,9 +1,15 @@
 import React from "react";
-// import PropTypes from "prop-types";
 import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 // import { green } from "@material-ui/core/colors";
 
+// Followers does NOT have getPConnect. So, no need to extend from PConnProps
+interface FollowersProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
 const useStyles = makeStyles((theme) => ({
   root: {
     paddingRight: theme.spacing(1),
@@ -19,9 +25,10 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function Followers(/* props */) {
+export default function Followers(props: FollowersProps) {
   const componentName = "Followers";
-  // const { children } = props;
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const { children } = props;
   const classes = useStyles();
 
   return (
@@ -33,11 +40,3 @@ export default function Followers(/* props */) {
       </Card>
     );
 }
-
-Followers.defaultProps = {
-  // children: []
-}
-
-Followers.propTypes = {
-  // children: PropTypes.arrayOf(PropTypes.node)
-};

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -1,16 +1,25 @@
 import React from "react";
-import WssQuickCreate from '@pega/react-sdk-components/lib/components/designSystemExtension/WssQuickCreate';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+// import type { PConnProps } from '../../../types/PConnProps';
 
-declare const PCore: any;
+// Can't add PConnTypes until we can resolve type problems with
+//  2nd arg to createWork
+// interface QuickCreateProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+// }
+
+
+export default function QuickCreate(props /* : QuickCreateProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WssQuickCreate = getComponentFromMap('WssQuickCreate');
 
-export default function QuickCreate(props) {
   const { getPConnect, heading, showCaseIcons, classFilter } = props;
   const pConn = getPConnect();
   const createCase = (className) => {
     pConn
       .getActionsApi()
-      .createWork(className, {})
+      .createWork(className, { })
       .catch((error) => {
         // eslint-disable-next-line no-console
         console.log('Error in case creation: ', error?.message)
@@ -26,11 +35,11 @@ export default function QuickCreate(props) {
     envInfo.environmentInfoObject.pyCaseTypeList.length > 0
   ) {
     classFilter.forEach((item) => {
-      let icon = Utils.getImageSrc('polaris-solid', PCore.getAssetLoader().getStaticServerUrl());
+      let icon = Utils.getImageSrc('polaris-solid', Utils.getSDKStaticConentUrl());
       let label = '';
       envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype) => {
         if (casetype.pyWorkTypeImplementationClassName === item) {
-          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, PCore.getAssetLoader().getStaticServerUrl());
+          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl());
           label = casetype.pyWorkTypeName ?? '';
         }
       });

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -4,19 +4,27 @@ import './SummaryItem.css'
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-declare const PCore: any;
+// SummaryItem does NOT have getPConnect. So, no need to extend from PConnProps
 
-export default function SummaryItem(props) {
+interface SummaryItemProps {
+  // If any, enter additional props that only exist on this component
+  menuIconOverride$: string,
+  menuIconOverrideAction$: any,
+  arItems$: Array<any> | any
+}
+
+
+export default function SummaryItem(props:SummaryItemProps) {
   let imagePath$ = "";
   let menuIconOverride$;
   menuIconOverride$ = props.menuIconOverride$
-  imagePath$ = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl());
+  imagePath$ = Utils.getIconPath(Utils.getSDKStaticConentUrl());
   const item = props.arItems$;
   const srcImg = `${imagePath$}${item.visual.icon}.svg`
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   if (menuIconOverride$) {
-    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$ , PCore.getAssetLoader().getStaticServerUrl());
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$ , Utils.getSDKStaticConentUrl());
   }
 
   function removeAttachment() {

package/lib/widget/SummaryList/SummaryList.tsx

@@ -1,11 +1,25 @@
 import React from "react";
-import SummaryItem from '@pega/react-sdk-components/lib/components/widget/SummaryItem/index'
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-export default function SummaryList(props) {
+// SummaryList does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface SummaryListProps {
+  // If any, enter additional props that only exist on this component
+  arItems$: Array<any>,
+  menuIconOverride$?: string,
+  menuIconOverrideAction$?: any
+}
+
+
+export default function SummaryList(props: SummaryListProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryItem = getComponentFromMap('SummaryItem');
+
+  const { menuIconOverride$: menuOverride = ""} = props;
   return (
     <div>
       {props.arItems$.map(file => (
-        <SummaryItem key={file.id} menuIconOverride$={props.menuIconOverride$} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$}></SummaryItem>
+        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$}></SummaryItem>
       ))}
     </div>
   );

package/lib/widget/ToDo/ToDo.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-shadow */
 /* eslint-disable @typescript-eslint/no-shadow */
 import React, { Fragment, useState } from 'react';
-import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import {
   Box,
@@ -28,9 +27,25 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 import './ToDo.css';
 
-declare const PCore: any;
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-const isChildCase = assignment => {
+interface ToDoProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  datasource?: any;
+  myWorkList?: any;
+  // eslint-disable-next-line react/no-unused-prop-types
+  caseInfoID?: string;
+  headerText?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  itemKey?: string;
+  showTodoList?: boolean;
+  type?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  context?: string;
+  isConfirm?: boolean;
+}
+
+const isChildCase = (assignment) => {
   return assignment.isChild;
 };
 
@@ -49,7 +64,7 @@ function getID(assignment: any) {
   }
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
@@ -69,8 +84,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function ToDo(props) {
-  const { datasource, getPConnect, headerText, showTodoList, myWorkList, type, isConfirm } = props;
+export default function ToDo(props: ToDoProps) {
+  const { getPConnect, datasource = [], headerText = 'To do', showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false } = props;
 
   const CONSTS = PCore.getConstants();
 
@@ -90,6 +105,10 @@ export default function ToDo(props) {
   const classes = useStyles();
   const theme = useTheme();
   const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Todo';
+  const showlessLocalizedValue = localizedVal('show_less', 'CosmosFields');
+  const showMoreLocalizedValue = localizedVal('show_more', 'CosmosFields');
   // const { setOpen } = useNavBar();
 
   function initAssignments(): Array<any> {
@@ -102,15 +121,15 @@ export default function ToDo(props) {
     }
   }
 
-  const getAssignmentId = assignment => {
+  const getAssignmentId = (assignment) => {
     return type === CONSTS.TODO ? assignment.ID : assignment.id;
   };
 
-  const getPriority = assignment => {
+  const getPriority = (assignment) => {
     return type === CONSTS.TODO ? assignment.urgency : assignment.priority;
   };
 
-  const getAssignmentName = assignment => {
+  const getAssignmentName = (assignment) => {
     return type === CONSTS.TODO ? assignment.name : assignment.stepName;
   };
 
@@ -145,7 +164,7 @@ export default function ToDo(props) {
     const sTarget = thePConn.getContainerName();
     const sTargetContainerName = sTarget;
 
-    const options = { containerName: sTargetContainerName };
+    const options = { containerName: sTargetContainerName, channelName: '' };
 
     if (classname === null || classname === '') {
       classname = thePConn.getCaseInfo().getClassName();
@@ -180,31 +199,27 @@ export default function ToDo(props) {
 
     if ((showTodoList && type !== CONSTS.TODO) || assignment.isChild === true) {
       /* Supress link for todo inside flow step */
-      return (
-        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
-      );
+      return <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>;
     }
     return displayID;
   };
 
-  const getListItemComponent = assignment => {
+  const getListItemComponent = (assignment) => {
     if (isDesktop) {
       return (
         <>
-          Task in
+          {localizedVal('Task in', localeCategory)}
           {renderTaskId(type, getPConnect, showTodoList, assignment)}
           {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
-          {type === CONSTS.WORKLIST && assignment.status ? (
-            <span className='psdk-todo-assignment-status'>{assignment.status}</span>
-          ) : undefined}
-          {` \u2022  Urgency  ${getPriority(assignment)}`}
+          {type === CONSTS.WORKLIST && assignment.status ? <span className="psdk-todo-assignment-status">{assignment.status}</span> : undefined}
+          {` \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
         </>
       );
     }
     return (
       <>
-        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
-        {` \u2022  Urgency  ${getPriority(assignment)}`}
+        <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>
+        {` \u2022 ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
       </>
     );
   };
@@ -214,37 +229,33 @@ export default function ToDo(props) {
       {showTodoList && (
         <CardHeader
           title={
-            <Badge badgeContent={assignmentCount} color='primary'>
-              <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+            <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
+              <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
         ></CardHeader>
       )}
       <List>
-        {assignments.map(assignment => (
-          <>
-            <div className='psdk-todo-avatar-header'>
-              <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
-                {currentUserInitials}
-              </Avatar>
-              <div style={{ display: 'block' }}>
-                <Typography variant='h6'>{assignment?.name}</Typography>
-                {`Task in ${renderTaskId(
-                  type,
-                  getPConnect,
-                  showTodoList,
-                  assignment
-                )} \u2022  Urgency  ${getPriority(assignment)}`}
-              </div>
-              {!isConfirm && (
-                <div style={{ marginLeft: 'auto' }}>
-                  <IconButton onClick={() => clickGo(assignment)}>
-                    <ArrowForwardIosOutlinedIcon />
-                  </IconButton>
-                </div>
-              )}
+        {assignments.map((assignment) => (
+          <div className="psdk-todo-avatar-header" key={getAssignmentId(assignment)}>
+            <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
+              {currentUserInitials}
+            </Avatar>
+            <div style={{ display: 'block' }}>
+              <Typography variant="h6">{assignment?.name}</Typography>
+              {`${localizedVal('Task in', localeCategory)} ${renderTaskId(type, getPConnect, showTodoList, assignment)} \u2022  ${localizedVal(
+                'Urgency',
+                localeCategory
+              )}  ${getPriority(assignment)}`}
             </div>
-          </>
+            {!isConfirm && (
+              <div style={{ marginLeft: 'auto' }}>
+                <IconButton onClick={() => clickGo(assignment)}>
+                  <ArrowForwardIosOutlinedIcon />
+                </IconButton>
+              </div>
+            )}
+          </div>
         ))}
       </List>
     </>
@@ -257,8 +268,8 @@ export default function ToDo(props) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge badgeContent={assignmentCount} color='primary'>
-                  <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+                <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
+                  <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
               avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
@@ -266,17 +277,9 @@ export default function ToDo(props) {
           )}
           <CardContent>
             <List>
-              {assignments.map(assignment => (
-                <ListItem
-                  key={getAssignmentId(assignment)}
-                  dense
-                  divider
-                  onClick={() => clickGo(assignment)}
-                >
-                  <ListItemText
-                    primary={getAssignmentName(assignment)}
-                    secondary={getListItemComponent(assignment)}
-                  />
+              {assignments.map((assignment) => (
+                <ListItem key={getAssignmentId(assignment)} dense divider onClick={() => clickGo(assignment)}>
+                  <ListItemText primary={getAssignmentName(assignment)} secondary={getListItemComponent(assignment)} />
                   <ListItemSecondaryAction>
                     <IconButton onClick={() => clickGo(assignment)}>
                       <ArrowForwardIosOutlinedIcon />
@@ -289,19 +292,17 @@ export default function ToDo(props) {
         </Card>
       )}
 
-      {type === CONSTS.TODO && !isConfirm && (
-        <Card className={classes.todoWrapper}>{toDoContent}</Card>
-      )}
+      {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
       {type === CONSTS.TODO && isConfirm && <Fragment>{toDoContent}</Fragment>}
 
       {assignmentCount > 3 && (
-        <Box display='flex' justifyContent='center'>
+        <Box display="flex" justifyContent="center">
           {bShowMore ? (
-            <Button color='primary' onClick={_showMore}>
-              Show more
+            <Button color="primary" onClick={_showMore}>
+              {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}
             </Button>
           ) : (
-            <Button onClick={_showLess}>Show less</Button>
+            <Button onClick={_showLess}>{showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue}</Button>
           )}
         </Box>
       )}
@@ -312,47 +313,11 @@ export default function ToDo(props) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />
     </React.Fragment>
   );
 }
-
-ToDo.propTypes = {
-  datasource: PropTypes.instanceOf(Object),
-  myWorkList: PropTypes.instanceOf(Object),
-  // eslint-disable-next-line react/no-unused-prop-types
-  caseInfoID: PropTypes.string,
-  // buildName: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  headerText: PropTypes.string,
-  // eslint-disable-next-line react/no-unused-prop-types
-  itemKey: PropTypes.string,
-  showTodoList: PropTypes.bool,
-  // target: PropTypes.string,
-  type: PropTypes.string,
-  // pageMessages: PropTypes.arrayOf(PropTypes.any),
-  // eslint-disable-next-line react/no-unused-prop-types
-  context: PropTypes.string,
-  // hideActionButtons: PropTypes.bool
-  isConfirm: PropTypes.bool
-};
-
-ToDo.defaultProps = {
-  caseInfoID: '',
-  datasource: [],
-  myWorkList: {},
-  // buildName: "",
-  headerText: 'To do',
-  itemKey: '',
-  showTodoList: true,
-  // target: "",
-  type: 'worklist',
-  // pageMessages: null,
-  context: '',
-  // hideActionButtons: false
-  isConfirm: false
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.26",
+  "version": "8.8.20",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [