@pega/react-sdk-overrides 0.23.17 → 0.23.19

package/lib/infra/MultiStep/MultiStep.css

@@ -34,7 +34,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-sub-step-current {
-  padding-left: 0.625rem; 
+  padding-left: 0.625rem;
   font-weight: bold;
   color: rgba(0,0,0,.87);
 }
@@ -53,7 +53,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-sub-step-list {
-  list-style: none; 
+  list-style: none;
   padding-bottom: 0.625rem;
 }
 
@@ -219,35 +219,21 @@ mat-horizontal-stepper {
 .psdk-horizontal-step-label {
   color: rgba(0,0,0,.54);
   display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   min-width: 50px;
   vertical-align: middle;
   font-size: 14px;
   font-weight: 500;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  white-space: initial;
 }
 
 .psdk-horizontal-step-label-selected {
   color: rgba(0,0,0,.87);
   display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   min-width: 50px;
   vertical-align: middle;
   font-size: 14px;
   font-weight: 500;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.psdk-horizontal-step-text-label {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: block;
+  white-space: initial;
 }
 
 .psdk-horizontal-step-line {

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/RootContainer/RootContainer.tsx

@@ -66,8 +66,6 @@ const RootContainer = (props) => {
     options["context"] = "root";
   }
 
-  // Used for embedded mode
-  // let newPConn: any;
   const [componentName, setComponentName] = useState("");
 
   useEffect( () => {
@@ -78,7 +76,6 @@ const RootContainer = (props) => {
   // debugging/investigation help
   // console.log(`RootContainer props.routingInfo: ${JSON.stringify(routingInfo)}`);
 
-  // const bannerRef = useRef(null);
   let hasBanner = false;
   let banners: any = null;
   const messages = httpMessages
@@ -87,21 +84,6 @@ const RootContainer = (props) => {
 
   hasBanner = messages && messages.length > 0;
   banners = hasBanner && (<div>RootContainer: trying to emit Banner with {messages}</div>);
-    // && (
-    // <Banner
-    //   ref={bannerRef}
-    //   id="appShellBanner"
-    //   variant="urgent"
-    //   heading="Error"
-    //   onDismiss={() =>
-    //     pConn.clearErrorMessages({
-    //       category: "HTTP",
-    //       context: "root"
-    //     })
-    //   }
-    //   messages={messages}
-    // />
-    // );
 
   const MemoizedModalViewContainer = useMemo(() => {
     return createElement(
@@ -175,7 +157,6 @@ const RootContainer = (props) => {
   }
 
 
-  // const rootViewRef: any = useRef(null);
   let rootView : any;
   let rootViewConfig: any = null;
 
@@ -187,7 +168,6 @@ const RootContainer = (props) => {
     PCore.getContainerUtils().getContainerAPI().addContainerItems(items);
   }, [routingInfo]);
 
-  // const { store } = useConstellationContext();
   const items: any = getItemView(routingInfo, renderingMode);
 
   if (items.length > 0) {
@@ -225,14 +205,6 @@ const RootContainer = (props) => {
         );
     }
 
-    // interior was
-    // <ModalManager>
-    //   {rootViewRef.current}
-    //   {MemoisedModalViewContainer}
-    //   {MemoizedPreviewViewContainer}
-    //   <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    // </ModalManager> */}
-
     // debugging/investigation help
     // console.log(`rootView.props.getPConnect().getComponentName(): ${rootView.props.getPConnect().getComponentName()}`);
 
@@ -252,10 +224,7 @@ const RootContainer = (props) => {
 
     const theChildren = pConn.getChildren();
     if (theChildren && (theChildren.length === 1)) {
-      // this.createdPConnect =  theChildren[0];
-      // this.createdPConnect = null;
       const localPConn = theChildren[0].getPConnect();
-      // newPConn = pConn;
       const localCompName = localPConn.getComponentName()
       if (componentName !== localCompName) {
         setComponentName(localCompName);
@@ -267,15 +236,6 @@ const RootContainer = (props) => {
     return noPortalContent;
   }
   else if (children && children.length > 0) {
-    // interior was
-    // <ModalManager>
-    //       {httpMessages ? <div id="root-container">{banners}</div> : ""}
-    //       {children}
-    //       {MemoizedModalViewContainer}
-    //       <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    //       {MemoizedPreviewViewContainer}
-    //     </ModalManager>
-
     return (
       <React.Fragment>
         <div>RootContainer: Has children. Trying to show ModalManager with children, etc.</div>
@@ -285,14 +245,8 @@ const RootContainer = (props) => {
 
     );
   } else if (skeleton) {
-    // TODO: need to update once skeletons are available
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const LoadingComponent = LazyComponentMap[skeleton];
-    // interior was
-    // <ModalManager>
-    //   <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    //   <LoadingComponent />
-    // </ModalManager>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    const LoadingComponent = LazyComponentMap[skeleton];
 
     return (
       <div id="root-container">
@@ -301,12 +255,6 @@ const RootContainer = (props) => {
       </div>
     );
   } else {
-    // interior was
-    // <ModalManager>
-    //   {MemoisedModalViewContainer}
-    //   {MemoizedPreviewViewContainer}
-    //   <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    // </ModalManager>
     return (
       <div id="root-container">
         <div>RootContainer: Should be ModalManager, etc.</div>