@pega/react-sdk-overrides 0.23.16 → 0.23.18

package/lib/infra/NavBar/NavBar.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import clsx from 'clsx';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-
 import './NavBar.css';
-
 import {
   Drawer,
   List,
@@ -34,145 +32,118 @@ import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-import { useNavBar } from "@pega/react-sdk-components/lib/components/helpers/reactContextHelpers";
+import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
 
 declare const PCore;
 
 const iconMap = {
-  "pi pi-headline" : <HomeOutlinedIcon fontSize="large"/>,
-  "pi pi-flag-solid": <FlagOutlinedIcon fontSize="large"/>
-}
+  'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
+  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />
+};
 
 const drawerWidth = 300;
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   drawerPaper: {
     position: 'relative',
     whiteSpace: 'nowrap',
     width: drawerWidth,
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
+      duration: theme.transitions.duration.enteringScreen
     }),
-    height: "100vh"
+    height: '100vh'
   },
   drawerPaperClose: {
     overflowX: 'hidden',
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
+      duration: theme.transitions.duration.leavingScreen
     }),
     width: theme.spacing(7),
     [theme.breakpoints.up('md')]: {
-      width: theme.spacing(9),
+      width: theme.spacing(9)
     },
-    height: "100vh"
+    height: '100vh'
   },
   nested: {
-    paddingLeft: theme.spacing(4),
+    paddingLeft: theme.spacing(4)
   },
   appListItem: {
     backgroundColor: theme.palette.primary.light,
-    color: theme.palette.getContrastText(theme.palette.primary.light),
+    color: theme.palette.getContrastText(theme.palette.primary.light)
   },
   appListLogo: {
     marginRight: theme.spacing(2),
-    width: "3.6rem",
+    width: '3.6rem'
   },
   appListIcon: {
-    color: theme.palette.getContrastText(theme.palette.primary.light),
+    color: theme.palette.getContrastText(theme.palette.primary.light)
   },
   appListDiv: {
     backgroundColor: theme.palette.primary.light,
     color: theme.palette.getContrastText(theme.palette.primary.light),
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  applicationLabel: {
+    whiteSpace: 'initial'
   }
 }));
 
 export default function NavBar(props) {
-  const {
-    pConn,
-    pages,
-    caseTypes
-  } = props;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [navIcon, setNavIcon] = useState((PCore.getAssetLoader().getStaticServerUrl()).concat("pzpega-logo-mark.svg"));
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [navExpandCollapse, setNavExpandCollapse] = useState(Utils.getImageSrc("plus", PCore.getAssetLoader().getStaticServerUrl()));
-  const [navPages, setNavPages] = useState(JSON.parse(JSON.stringify(pages)));
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [portalLogoImage, setPortalLogoImage] = useState(Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat("pzpega-logo-mark.svg"));
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [portalOperator, setPortalOperator] = useState(PCore.getEnvironmentInfo().getOperatorName());
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [portalOperatorInitials, setPortalOperatorInitials] = useState(Utils.getInitials(portalOperator));
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [portalApp, setPortalApp] = useState(PCore.getEnvironmentInfo().getApplicationLabel());
-  const [bShowCaseTypes, setBShowCaseTypes] = useState(true);
-  const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false)
-  const {open, setOpen} = useNavBar();
-  const [anchorEl, setAnchorEl] = useState(null);
+  const { pConn, pages, caseTypes } = props;
 
   const classes = useStyles();
   const theme = useTheme();
   const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
 
-  useEffect( () => {
-    setNavPages(JSON.parse(JSON.stringify(pages)));
-  },
-  [pages]);
+  const { open, setOpen } = useNavBar();
+  const [navPages, setNavPages] = useState(JSON.parse(JSON.stringify(pages)));
+  const [bShowCaseTypes, setBShowCaseTypes] = useState(true);
+  const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
 
-  // const caseTypesMap = caseTypes.map((caseType, index) => {
-  //   const theKey = `caseType.${index}`;
-  //   return <li key={theKey}>{caseType.pyLabel}</li>;
-  // });
+  const portalLogoImage = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat(
+    'pzpega-logo-mark.svg'
+  );
+  const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
+  const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
 
-  // const pagesMap = pages.map((page, index) => {
-  //   const theKey = `page.${index}`;
-  //   return <li key={theKey}>{page.pyLabel}</li>;
-  // });
+  useEffect(() => {
+    setNavPages(JSON.parse(JSON.stringify(pages)));
+  }, [pages]);
 
   function navPanelButtonClick(oPageData: any) {
-    const {
-      pyClassName,
-      pyRuleName
-    } = oPageData;
-
-    pConn.getActionsApi().showPage(pyRuleName, pyClassName).then(() => {
-      // eslint-disable-next-line no-console
-      console.log(`showPage completed`);
-    });
+    const { pyClassName, pyRuleName } = oPageData;
+
+    pConn
+      .getActionsApi()
+      .showPage(pyRuleName, pyClassName)
+      .then(() => {
+        // eslint-disable-next-line no-console
+        console.log(`showPage completed`);
+      });
   }
 
-  // function navPanelCreateButtonClick() {
-  //   if (navExpandCollapse.indexOf("plus") > 0) {
-  //    setNavExpandCollapse(Utils.getImageSrc("times", PCore.getAssetLoader().getStaticServerUrl()));
-  //    setBShowCaseTypes(true);
-  //   }
-  //   else {
-  //     setNavExpandCollapse(Utils.getImageSrc("plus", PCore.getAssetLoader().getStaticServerUrl()));
-  //     setBShowCaseTypes(false);
-  //   }
-  // }
-
   function navPanelCreateCaseType(sCaseType: string, sFlowType: string) {
     setOpen(false);
     const actionInfo = {
-      containerName: "primary",
-      flowType: sFlowType || "pyStartCase"
+      containerName: 'primary',
+      flowType: sFlowType || 'pyStartCase'
     };
 
-    pConn.getActionsApi().createWork(sCaseType, actionInfo).then(() => {
-      // eslint-disable-next-line no-console
-      console.log(`createWork completed`);
-    });
-
+    pConn
+      .getActionsApi()
+      .createWork(sCaseType, actionInfo)
+      .then(() => {
+        // eslint-disable-next-line no-console
+        console.log(`createWork completed`);
+      });
   }
 
   // Toggle showing the Operator buttons
@@ -182,52 +153,6 @@ export default function NavBar(props) {
     else setAnchorEl(null);
   }
 
-  function navPanelLogoutClick() {
-
-    try {
-      // eslint-disable-next-line no-console
-      console.log(`--> navPanelLogoutClick clicked`);
-      // Commenting out until revokeToken API is available
-      // pConn.getActionsApi().logout().then(() => {
-      //   // eslint-disable-next-line no-console
-      //   console.log(`logout completed`);
-      // },
-      // error => {
-      //   // eslint-disable-next-line no-console
-      //   console.error(`onRejected function called: ${error.message}`);
-      // })
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.log(`--> Attempt to call logout api failed: ${err}`);
-    }
-    finally {
-      // authLogout();
-      logout();
-    }
-  }
-
-  // const theCaseTypeButtons = caseTypes.map((caseType) => <div style={{display: "flex"}}>
-  //   <button className="btn btn-link text-white"
-  //     onClick={() => { navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}}>{caseType.pyLabel}</button></div>
-  // );
-
-  // const theOperatorButtons = <button className="btn btn-link text-white" style={{marginLeft: "-0.05rem"}} onClick={navPanelLogoutClick}>Logoff</button>;
-
-
-  // return <div id="NavBar" style={{border: "solid 1px silver", margin: "1px"}} >
-  //     NavBar for <strong>{appName}</strong>
-  //     <br></br>
-  //     caseTypes:
-  //     <ul>
-  //       {caseTypesMap}
-  //     </ul>
-  //     Pages:
-  //     <ul>
-  //       {pagesMap}
-  //     </ul>
-  //   </div>;
-
-
   const handleDrawerOpen = () => {
     setOpen(!open);
   };
@@ -237,118 +162,103 @@ export default function NavBar(props) {
       setOpen(true);
       setBShowCaseTypes(true);
     } else setBShowCaseTypes(!bShowCaseTypes);
-  }
-
-//  const handlePopoverOpen = (event) => {
-//     setAnchorEl(event.currentTarget);
-//   };
-
-  // const handlePopoverClose = () => {
-  //   setAnchorEl(null);
-  // };
-
+  };
 
   useEffect(() => {
     if (!isDesktop) setOpen(false);
     else setOpen(true);
-  }, [isDesktop])
-
+  }, [isDesktop]);
 
   return (
     <Drawer
-      variant="permanent"
+      variant='permanent'
       classes={{
-        paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+        paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose)
       }}
       open={open && isDesktop}
     >
-      {
-        open ? (
-          <List className={classes.appListItem}>
-            <ListItem onClick={handleDrawerOpen}>
-              <ListItemIcon>
-                  <img src={portalLogoImage} className={classes.appListLogo}/>
-              </ListItemIcon>
-              <ListItemText
-                primary={<Typography variant="h6">{portalApp}</Typography>}
-              />
-              <ListItemSecondaryAction>
-                <IconButton edge="end" onClick={handleDrawerOpen}>
-                  <ChevronLeftIcon className={classes.appListIcon} />
-                </IconButton>
-                      </ListItemSecondaryAction>
-            </ListItem>
-          </List>
-          ) : (
-            <div className={classes.appListDiv} onClick={handleDrawerOpen} >
-              <ChevronRightIcon className={classes.appListIcon} id="chevron-right-icon" fontSize="large" />
-            </div>
-          )
-      }
+      {open ? (
+        <List className={classes.appListItem}>
+          <ListItem onClick={handleDrawerOpen}>
+            <ListItemIcon>
+              <img src={portalLogoImage} className={classes.appListLogo} />
+            </ListItemIcon>
+            <ListItemText
+              primary={
+                <Typography variant='h6' className={classes.applicationLabel}>
+                  {portalApp}
+                </Typography>
+              }
+            />
+            <ListItemSecondaryAction>
+              <IconButton edge='end' onClick={handleDrawerOpen}>
+                <ChevronLeftIcon className={classes.appListIcon} />
+              </IconButton>
+            </ListItemSecondaryAction>
+          </ListItem>
+        </List>
+      ) : (
+        <div className={classes.appListDiv} onClick={handleDrawerOpen}>
+          <ChevronRightIcon
+            className={classes.appListIcon}
+            id='chevron-right-icon'
+            fontSize='large'
+          />
+        </div>
+      )}
       <List>
         <ListItem button onClick={handleCaseItemClick}>
           <ListItemIcon>
-            {
-              bShowCaseTypes && open ? <ClearOutlinedIcon fontSize="large" /> : <AddIcon fontSize="large" />
-            }
+            {bShowCaseTypes && open ? (
+              <ClearOutlinedIcon fontSize='large' />
+            ) : (
+              <AddIcon fontSize='large' />
+            )}
           </ListItemIcon>
-          <ListItemText primary="Create" />
+          <ListItemText primary='Create' />
           {bShowCaseTypes ? <ExpandLess /> : <ExpandMore />}
         </ListItem>
       </List>
-      <Collapse in={bShowCaseTypes && open} timeout="auto" unmountOnExit className='scrollable'>
-        <List component="div" disablePadding>
-          {
-            caseTypes.map(caseType => (
-              <ListItem
-                button
-                className={classes.nested}
-                onClick={() => navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}
-                key={caseType.pyLabel}
-              >
-                <ListItemIcon>
-                  <WorkOutlineIcon fontSize="large" />
-                </ListItemIcon>
-                <ListItemText primary={caseType.pyLabel} />
-              </ListItem>
-            ))
-          }
+      <Collapse in={bShowCaseTypes && open} timeout='auto' unmountOnExit className='scrollable'>
+        <List component='div' disablePadding>
+          {caseTypes.map(caseType => (
+            <ListItem
+              button
+              className={classes.nested}
+              onClick={() => navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}
+              key={caseType.pyLabel}
+            >
+              <ListItemIcon>
+                <WorkOutlineIcon fontSize='large' />
+              </ListItemIcon>
+              <ListItemText primary={caseType.pyLabel} />
+            </ListItem>
+          ))}
         </List>
       </Collapse>
       <List>
-        {
-          navPages.map(page => (
-              <ListItem
-                button
-                onClick={() => navPanelButtonClick(page)}
-                key={page.pyLabel}
-              >
-                <ListItemIcon>
-                  {iconMap[page.pxPageViewIcon]}
-                </ListItemIcon>
-                <ListItemText primary={page.pyLabel} />
-            </ListItem>
-          ))
-        }
+        {navPages.map(page => (
+          <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
+            <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
+            <ListItemText primary={page.pyLabel} />
+          </ListItem>
+        ))}
       </List>
       <Divider />
       <List className='marginTopAuto'>
         <>
           <ListItem onClick={navPanelOperatorButtonClick}>
             <ListItemIcon>
-              <PersonOutlineIcon fontSize="large" />
+              <PersonOutlineIcon fontSize='large' />
             </ListItemIcon>
             <ListItemText primary={portalOperator} />
-            {
-              open && (
-                <ListItemSecondaryAction>
-                  <IconButton edge="end" onClick={navPanelOperatorButtonClick}>
-                    <ChevronRightIcon/>
-                  </IconButton>
-                </ListItemSecondaryAction>
-              )
-            }
-
+            {open && (
+              <ListItemSecondaryAction>
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick}>
+                  <ChevronRightIcon />
+                </IconButton>
+              </ListItemSecondaryAction>
+            )}
           </ListItem>
           <Menu
             anchorEl={anchorEl}
@@ -357,18 +267,18 @@ export default function NavBar(props) {
             onClick={navPanelOperatorButtonClick}
             anchorOrigin={{
               vertical: 'top',
-              horizontal: 'right',
+              horizontal: 'right'
             }}
             transformOrigin={{
               vertical: 'top',
-              horizontal: 'left',
+              horizontal: 'left'
             }}
           >
-            <MenuItem onClick={navPanelLogoutClick}>
+            <MenuItem onClick={logout}>
               <ListItemIcon>
-                <ArrowBackIcon fontSize="large" />
+                <ArrowBackIcon fontSize='large' />
               </ListItemIcon>
-              <Typography variant="inherit">Logout</Typography>
+              <Typography variant='inherit'>Logout</Typography>
             </MenuItem>
           </Menu>
         </>
@@ -379,9 +289,9 @@ export default function NavBar(props) {
 
 NavBar.defaultProps = {
   pConn: null,
-  appName: "",
+  appName: '',
   pages: [],
-  caseTypes: [],
+  caseTypes: []
 };
 
 NavBar.propTypes = {

package/lib/infra/View/View.tsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { SdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import ErrorBoundary from '@pega/react-sdk-components/lib/components/infra/ErrorBoundary';
 
-import { getAllFields } from '@pega/react-sdk-components/lib/components/template/utils';
+import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 
 // Need to import any templates that we might render
 
@@ -18,6 +18,15 @@ import './View.css';
 //
 
 const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails'
+];
 
 export default function View(props) {
   const { children, template, getPConnect, mode } = props;
@@ -45,35 +54,33 @@ export default function View(props) {
     if (SdkComponentMap) {
       // This is the node_modules version of react_pconnect!
       const theLocalComponent = SdkComponentMap.getLocalComponentMap()[template];
-      if ( theLocalComponent !== undefined) {
-          // eslint-disable-next-line no-console
-          console.log(`View component found ${template}: Local`);
-          ViewTemplate = theLocalComponent
+      if (theLocalComponent !== undefined) {
+        // eslint-disable-next-line no-console
+        console.log(`View component found ${template}: Local`);
+        ViewTemplate = theLocalComponent;
       } else {
-          const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[template];
-          if ( thePegaProvidedComponent !== undefined) {
-            // console.log(`View component found ${template}: Pega-provided`);
-            ViewTemplate = thePegaProvidedComponent;
-          } else {
-              // eslint-disable-next-line no-console
-              console.error(`View component can't find template type ${template}`);
-              ViewTemplate = ErrorBoundary;
-          }
+        const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[template];
+        if (thePegaProvidedComponent !== undefined) {
+          // console.log(`View component found ${template}: Pega-provided`);
+          ViewTemplate = thePegaProvidedComponent;
+        } else {
+          // eslint-disable-next-line no-console
+          console.error(`View component can't find template type ${template}`);
+          ViewTemplate = ErrorBoundary;
+        }
       }
 
-      if (template === "ListView") {
+      if (template === 'ListView') {
         // special case for ListView - add in a prop
         const bInForm = true;
-        props = { ...props, bInForm};
+        props = { ...props, bInForm };
       }
     } else {
-
       // eslint-disable-next-line no-console
-      console.warn(`View: SdkComponentMap expected but not found.`)
+      console.warn(`View: SdkComponentMap expected but not found.`);
 
       // eslint-disable-next-line no-console
       console.error(`View: Trying to render an unknown template: ${template}`);
-
     }
 
     // for debugging/investigation
@@ -104,7 +111,7 @@ export default function View(props) {
 
     return (
       <div className='grid-column'>
-        {showLabel && template !== 'SubTabs' && template !== 'SimpleTable' && template !== 'Details' && (
+        {showLabel && !NO_HEADER_TEMPLATES.includes(template) && (
           <div className='template-title-container'>
             <span>{label}</span>
           </div>

package/lib/template/CaseView/CaseView.tsx

@@ -62,6 +62,7 @@ export default function CaseView(props) {
 
   const classes = useStyles();
 
+  const editAction = availableActions.find((action) => action.ID === 'pyUpdateCaseDetails');
 
   /**
    *
@@ -163,9 +164,6 @@ export default function CaseView(props) {
 
   function _editClick() {
 
-    const editAction = availableActions.find(
-      (action) => action.ID === "pyUpdateCaseDetails"
-    );
     const actionsAPI = thePConn.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
@@ -176,8 +174,7 @@ export default function CaseView(props) {
   function getActionButtonsHtml(): any {
 
     const aBHtml = <Box>
-            <Button onClick={() => {_editClick()}}>Edit</Button>
-            &nbsp;
+            {editAction && (<Button onClick={() => {_editClick()}}>Edit</Button>)}
             <CaseViewActionsMenu getPConnect={getPConnect} availableActions={availableActions} availableProcesses={availableProcesses} />
         </Box>;
 

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,12 +1,15 @@
 import React, { createElement } from "react";
 import PropTypes from "prop-types";
 
+import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
 import './DefaultForm.css';
 
 export default function DefaultForm(props) {
   const { getPConnect, NumCols } = props;
+  const instructions = getInstructions(getPConnect(), props.instructions);
+  const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, '');
 
   let divClass: string;
 
@@ -37,6 +40,7 @@ export default function DefaultForm(props) {
 
   return (
     <div className={divClass}>
+      <div>{instructionText}</div>
       {dfChildren}
     </div>
   )