@pega/react-sdk-overrides 0.23.19 → 0.23.21

package/lib/widget/ToDo/ToDo.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+/* 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 {
@@ -28,7 +30,7 @@ import './ToDo.css';
 
 declare const PCore: any;
 
-const isChildCase = (assignment) => {
+const isChildCase = assignment => {
   return assignment.isChild;
 };
 
@@ -58,11 +60,17 @@ const useStyles = makeStyles(theme => ({
   avatar: {
     backgroundColor: theme.palette.primary.light,
     color: theme.palette.getContrastText(theme.palette.primary.light)
+  },
+  todoWrapper: {
+    borderLeft: '6px solid',
+    borderLeftColor: theme.palette.primary.light,
+    padding: theme.spacing(1),
+    margin: theme.spacing(1)
   }
 }));
 
 export default function ToDo(props) {
-  const { datasource, getPConnect, headerText, showTodoList, myWorkList, type } = props;
+  const { datasource, getPConnect, headerText, showTodoList, myWorkList, type, isConfirm } = props;
 
   const CONSTS = PCore.getConstants();
 
@@ -167,14 +175,28 @@ export default function ToDo(props) {
       });
   }
 
+  const renderTaskId = (type, getPConnect, showTodoList, assignment) => {
+    const displayID = getID(assignment);
+
+    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 displayID;
+  };
+
   const getListItemComponent = assignment => {
     if (isDesktop) {
       return (
         <>
           Task in
-          <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
-          {` \u2022 `}
-          <span className='psdk-todo-assignment-status'>{assignment.status}</span>
+          {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)}`}
         </>
       );
@@ -187,53 +209,102 @@ export default function ToDo(props) {
     );
   };
 
-  return (
-    <React.Fragment>
-      <Card className={classes.root}>
-        {showTodoList && (
-          <CardHeader
-            title={
-              <Badge badgeContent={assignmentCount} color='primary'>
-                <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
-              </Badge>
-            }
-            avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
-          ></CardHeader>
-        )}
-        <CardContent>
-          <List>
-            {assignments.map(assignment => (
-              <ListItem
-                key={getAssignmentId(assignment)}
-                dense
-                divider
-                onClick={() => clickGo(assignment)}
-              >
-                <ListItemText
-                  primary={getAssignmentName(assignment)}
-                  secondary={getListItemComponent(assignment)}
-                />
-                <ListItemSecondaryAction>
+  const toDoContent = (
+    <>
+      {showTodoList && (
+        <CardHeader
+          title={
+            <Badge badgeContent={assignmentCount} 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>
-                </ListItemSecondaryAction>
-              </ListItem>
-            ))}
-          </List>
-        </CardContent>
-        {assignmentCount > 3 && (
-          <Box display='flex' justifyContent='center'>
-            {bShowMore ? (
-              <Button color='primary' onClick={_showMore}>
-                Show more
-              </Button>
-            ) : (
-              <Button onClick={_showLess}>Show less</Button>
-            )}
-          </Box>
-        )}
-      </Card>
+                </div>
+              )}
+            </div>
+          </>
+        ))}
+      </List>
+    </>
+  );
+
+  return (
+    <React.Fragment>
+      {type === CONSTS.WORKLIST && (
+        <Card className={classes.root}>
+          {showTodoList && (
+            <CardHeader
+              title={
+                <Badge badgeContent={assignmentCount} color='primary'>
+                  <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+                </Badge>
+              }
+              avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
+            ></CardHeader>
+          )}
+          <CardContent>
+            <List>
+              {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 />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              ))}
+            </List>
+          </CardContent>
+        </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'>
+          {bShowMore ? (
+            <Button color='primary' onClick={_showMore}>
+              Show more
+            </Button>
+          ) : (
+            <Button onClick={_showLess}>Show less</Button>
+          )}
+        </Box>
+      )}
 
       <Snackbar
         open={showSnackbar}
@@ -265,8 +336,9 @@ ToDo.propTypes = {
   type: PropTypes.string,
   // pageMessages: PropTypes.arrayOf(PropTypes.any),
   // eslint-disable-next-line react/no-unused-prop-types
-  context: PropTypes.string
+  context: PropTypes.string,
   // hideActionButtons: PropTypes.bool
+  isConfirm: PropTypes.bool
 };
 
 ToDo.defaultProps = {
@@ -280,6 +352,7 @@ ToDo.defaultProps = {
   // target: "",
   type: 'worklist',
   // pageMessages: null,
-  context: ''
+  context: '',
   // hideActionButtons: false
+  isConfirm: false
 };

package/package.json

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