@pega/react-sdk-overrides 0.23.20 → 0.23.22

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
+import Toolbar from '@material-ui/core/Toolbar';
+import Container from '@material-ui/core/Container';
+import { IconButton, Menu, MenuItem, Typography } from '@material-ui/core';
+import { Button } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import MenuIcon from '@material-ui/icons/Menu';
+import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
+import './WssNavBar.css';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex'
+  },
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2)
+  },
+  appListLogo: {
+    width: '3.6rem'
+  },
+  appName: {
+    color: 'white',
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(4),
+    fontSize: '1.5rem'
+  }
+}));
+
+export default function WssNavBar(props) {
+  const { appInfo, navLinks, operator, navDisplayOptions } = props;
+  const { alignment } = navDisplayOptions;
+  const classes = useStyles();
+
+  const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
+  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <div id='NavBar'>
+      <AppBar position='static' color='primary'>
+        <Container maxWidth='xl'>
+          <Toolbar disableGutters>
+            <Button style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
+              <img src={appInfo.imageSrc} className={classes.appListLogo} />
+              <span className={classes.appName}>{appInfo.appName}</span>
+            </Button>
+            <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+              <IconButton
+                size='small'
+                aria-label='account of current user'
+                aria-controls='menu-appbar'
+                aria-haspopup='true'
+                onClick={handleOpenNavMenu}
+                color='inherit'
+              >
+                <MenuIcon />
+              </IconButton>
+              <Menu
+                id='menu-appbar'
+                anchorEl={anchorElNav}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left'
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'left'
+                }}
+                open={Boolean(anchorElNav)}
+                onClose={handleCloseNavMenu}
+              >
+                {navLinks.map(link => (
+                  <MenuItem key={link.text} onClick={link.onClick}>
+                    <Typography>{link.text}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+
+            <Box
+              sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
+              style={{ justifyContent: alignment }}
+            >
+              {navLinks.map(link => (
+                <Button className='link-style' key={link.text} onClick={link.onClick}>
+                  {link.text}
+                </Button>
+              ))}
+            </Box>
+
+            <Box sx={{ flexGrow: 0 }}>
+              <IconButton onClick={handleOpenUserMenu}>
+                <Avatar>{operator.currentUserInitials}</Avatar>
+              </IconButton>
+              <Menu
+                id='menu-appbar'
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right'
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right'
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+              >
+                <MenuItem onClick={logout}>
+                  <Typography>Logout</Typography>
+                </MenuItem>
+              </Menu>
+            </Box>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </div>
+  );
+}

package/lib/template/WssNavBar/index.tsx

@@ -0,0 +1 @@
+export { default } from './WssNavBar';

package/lib/widget/Attachment/Attachment.tsx

@@ -421,17 +421,16 @@ export default function Attachment(props) {
           }
         );
       }
-
-      PCore.getPubSubUtils().subscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
-        resetAttachmentStoredState,
-        caseID
-      );
-      return () => {
-        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
-      };
     }
-  }
+    }
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
+      resetAttachmentStoredState,
+      caseID
+    );
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+    };
   }, []);
 
   let content = (

package/lib/widget/ToDo/ToDo.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-shadow */
 /* eslint-disable @typescript-eslint/no-shadow */
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import {
@@ -30,7 +30,7 @@ import './ToDo.css';
 
 declare const PCore: any;
 
-const isChildCase = (assignment) => {
+const isChildCase = assignment => {
   return assignment.isChild;
 };
 
@@ -60,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();
 
@@ -203,6 +209,47 @@ export default function ToDo(props) {
     );
   };
 
+  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>
+                </div>
+              )}
+            </div>
+          </>
+        ))}
+      </List>
+    </>
+  );
+
   return (
     <React.Fragment>
       {type === CONSTS.WORKLIST && (
@@ -230,72 +277,33 @@ export default function ToDo(props) {
                     primary={getAssignmentName(assignment)}
                     secondary={getListItemComponent(assignment)}
                   />
-                  {type === CONSTS.WORKLIST && (
-                    <ListItemSecondaryAction>
-                      <IconButton onClick={() => clickGo(assignment)}>
-                        <ArrowForwardIosOutlinedIcon />
-                      </IconButton>
-                    </ListItemSecondaryAction>
-                  )}
+                  <ListItemSecondaryAction>
+                    <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>
       )}
 
-      {type === CONSTS.TODO && (
-        <>
-          {showTodoList && (
-            <>
-              <Badge badgeContent={assignmentCount} color='primary'>
-                <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
-              </Badge>
-            </>
-          )}
-          <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>
-                </div>
-              </>
-            ))}
-          </List>
-          {assignmentCount > 3 && (
-            <Box display='flex' justifyContent='center'>
-              {bShowMore ? (
-                <Button color='primary' onClick={_showMore}>
-                  Show more
-                </Button>
-              ) : (
-                <Button onClick={_showLess}>Show less</Button>
-              )}
-            </Box>
+      {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
@@ -328,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 = {
@@ -343,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.20",
+  "version": "0.23.22",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [