@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/infra/NavBar/NavBar.css

@@ -1,170 +1,168 @@
 .psdk-nav-divider {
-    border-bottom: 0.0625rem solid var(--app-nav-color);
-    width: 100%;
+  border-bottom: 0.0625rem solid var(--app-nav-color);
+  width: 100%;
 }
 
 .psdk-nav-header {
-    display: flex;
-    padding-top: 0.625rem;
+  display: flex;
+  padding-top: 0.625rem;
 }
 
 .psdk-nav-logo {
-    /* override vertical-align coming in from Bootstrap "reboot" */
-    vertical-align: baseline;
+  /* override vertical-align coming in from Bootstrap "reboot" */
+  vertical-align: baseline;
 
-    width: 3.5rem;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
+  width: 3.5rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
 
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 /* background color white */
 /* filter: var(--app-white-color-filter); */
 .psdk-nav-svg-icon {
-    width: 2.6rem;
-    /* padding-right: 0.625rem; */
-    -webkit-filter: invert(.75); /* safari 6.0 - 9.0 */
-    filter: invert(.75);
+  width: 2.6rem;
+  /* padding-right: 0.625rem; */
+  -webkit-filter: invert(0.75); /* safari 6.0 - 9.0 */
+  filter: invert(0.75);
 }
 
 .psdk-nav-portal-info {
-    margin-top: 0.15rem;
-    margin-bottom: 0.25rem;
-    padding-left: 0.15rem;
-    padding-right: 0.5rem;
-
+  margin-top: 0.15rem;
+  margin-bottom: 0.25rem;
+  padding-left: 0.15rem;
+  padding-right: 0.5rem;
 }
 
 .psdk-nav-portal-name {
-    font-size: 1rem;
+  font-size: 1rem;
 }
 
 .psdk-nav-portal-app {
-    font-size: 1.0rem;
+  font-size: 1rem;
 }
 
 .psdk-appshell-nav {
-    top: 0px;   /* JEA */
-    position: relative;    /* JEA was fixed */
-    z-index: 3;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    background: var(--app-nav-bg);
-    width: var(--app-nav-width);
-    height: 100%;
-    color: var(--app-nav-color);
-    /* overflow: hidden; */
-    white-space: nowrap;
-    transition: width var(--transition-medium) var(--natural-ease);
-    will-change: width;
-
+  top: 0px; /* JEA */
+  position: relative; /* JEA was fixed */
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 100%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
 }
 
 .psdk-appshell-nav:hover {
-    width: var(--app-nav-width-expanded);
+  width: var(--app-nav-width-expanded);
 }
 
 .psdk-appshell-topnav {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    background: var(--app-nav-bg);
-    width: var(--app-nav-width);
-    height: 15%;
-    color: var(--app-nav-color);
-    /* overflow: hidden; */
-    white-space: nowrap;
-    transition: width var(--transition-medium) var(--natural-ease);
-    will-change: width;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 15%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
 }
 
 .psdk-appshell-middlenav {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background: var(--app-nav-bg);
-    width: var(--app-nav-width);
-    height: 50%;
-    color: var(--app-nav-color);
-    /* overflow: hidden; */
-    white-space: nowrap;
-    transition: width var(--transition-medium) var(--natural-ease);
-    will-change: width;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 50%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
 }
 
 .psdk-appshell-bottom {
-    /* to make NavBar logout button stay fixed to bottom of window */
-    /* position: fixed; */
-    bottom: 0px;
-    background: var(--app-nav-bg);
-    width: var(--app-nav-width);    /* inherit; */
-    border-top: 0.0625rem solid var(--app-nav-color);
+  /* to make NavBar logout button stay fixed to bottom of window */
+  /* position: fixed; */
+  bottom: 0px;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width); /* inherit; */
+  border-top: 0.0625rem solid var(--app-nav-color);
 }
 
 /* Added for nav bar buttons to be like middlenav but with no additional flex direction and left justify */
 .psdk-appshell-buttonnav {
-    /* display: flex;
+  /* display: flex;
     flex-direction: row; */
-    border: none;
-    justify-content: left;
-    background: var(--app-nav-bg);
-    width: var(--app-nav-width);
-    height: 50%;
-    color: var(--app-nav-color);
-    /* overflow: hidden; */
-    white-space: nowrap;
-    transition: width var(--transition-medium) var(--natural-ease);
-    will-change: width;
+  border: none;
+  justify-content: left;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 50%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
 }
 
 .psdk-nav-ul-middle {
-    display: block;
-    list-style-type: none;
-    margin: 0rem;
-    padding-inline-start: 30px;
+  display: block;
+  list-style-type: none;
+  margin: 0rem;
+  padding-inline-start: 30px;
 }
 
 .psdk-nav-li-middle {
-    box-sizing: border-box;
-    text-align: left;
+  box-sizing: border-box;
+  text-align: left;
 }
 
 .psdk-icon {
-    padding: 0rem 0.125rem;
-    min-width: unset;
+  padding: 0rem 0.125rem;
+  min-width: unset;
 }
 
 .psdk-nav-button-span {
-    padding: 1rem;
+  padding: 1rem;
 }
 
 .psdk-nav-oper-avatar {
-    margin: 0rem;
-    padding: 0rem;
-    min-width: 2.5rem;
-    min-height: 2.5rem;
-    max-width: 2.5rem;
-    max-height: 2.5rem;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    display: inline-flex;
-    background: var(--app-neutral-color);
-    color: white;
-    font-weight: normal;
-    font-size: 1rem;
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: inline-flex;
+  background: var(--app-neutral-color);
+  color: white;
+  font-weight: normal;
+  font-size: 1rem;
 }
 
 .marginTopAuto {
-    margin-top: auto !important;
+  margin-top: auto !important;
 }
 
 .scrollable {
-    overflow-y: scroll !important;
+  overflow-y: scroll !important;
 }

package/lib/infra/NavBar/NavBar.tsx

@@ -1,9 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import './NavBar.css';
+
 import {
   Drawer,
   List,
@@ -18,7 +16,6 @@ import {
   MenuItem,
   Typography
 } from '@material-ui/core';
-
 import PersonOutlineIcon from '@material-ui/icons/PersonOutlineOutlined';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -31,15 +28,27 @@ import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
 import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
-import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare const PCore;
+import './NavBar.css';
+
+interface NavBarProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  // eslint-disable-next-line react/no-unused-prop-types
+  appName?: string;
+  pages?: any[];
+  caseTypes: any[];
+  pConn?: any;
+}
 
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
-  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />
+  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
+  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />
 };
 
 const drawerWidth = 300;
@@ -95,8 +104,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function NavBar(props) {
-  const { pConn, pages, caseTypes } = props;
+export default function NavBar(props: NavBarProps) {
+  const { pConn, pages = [], caseTypes = [] } = props;
 
   const classes = useStyles();
   const theme = useTheme();
@@ -108,9 +117,10 @@ export default function NavBar(props) {
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
 
-  const portalLogoImage = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat(
-    'pzpega-logo-mark.svg'
-  );
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
+  const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
 
@@ -126,7 +136,7 @@ export default function NavBar(props) {
       .showPage(pyRuleName, pyClassName)
       .then(() => {
         // eslint-disable-next-line no-console
-        console.log(`showPage completed`);
+        console.log(`${localizedVal('showPage completed', localeCategory)}`);
       });
   }
 
@@ -142,7 +152,7 @@ export default function NavBar(props) {
       .createWork(sCaseType, actionInfo)
       .then(() => {
         // eslint-disable-next-line no-console
-        console.log(`createWork completed`);
+        console.log(`${localizedVal('createWork completed', localeCategory)}`);
       });
   }
 
@@ -199,22 +209,12 @@ export default function NavBar(props) {
         </List>
       ) : (
         <div className={classes.appListDiv} onClick={handleDrawerOpen}>
-          <ChevronRightIcon
-            className={classes.appListIcon}
-            id='chevron-right-icon'
-            fontSize='large'
-          />
+          <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' />
-            )}
-          </ListItemIcon>
+          <ListItemIcon>{bShowCaseTypes && open ? <ClearOutlinedIcon fontSize='large' /> : <AddIcon fontSize='large' />}</ListItemIcon>
           <ListItemText primary='Create' />
           {bShowCaseTypes ? <ExpandLess /> : <ExpandMore />}
         </ListItem>
@@ -278,7 +278,7 @@ export default function NavBar(props) {
               <ListItemIcon>
                 <ArrowBackIcon fontSize='large' />
               </ListItemIcon>
-              <Typography variant='inherit'>Logout</Typography>
+              <Typography variant='inherit'>{localizedVal('Logout', localeCategory)}</Typography>
             </MenuItem>
           </Menu>
         </>
@@ -286,18 +286,3 @@ export default function NavBar(props) {
     </Drawer>
   );
 }
-
-NavBar.defaultProps = {
-  pConn: null,
-  appName: '',
-  pages: [],
-  caseTypes: []
-};
-
-NavBar.propTypes = {
-  pConn: PropTypes.object,
-  // eslint-disable-next-line react/no-unused-prop-types
-  appName: PropTypes.string,
-  pages: PropTypes.arrayOf(PropTypes.object),
-  caseTypes: PropTypes.arrayOf(PropTypes.object)
-};

package/lib/infra/Reference/Reference.tsx

@@ -1,17 +1,25 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  visibility?: boolean;
+  context?: string;
+  readOnly?: boolean;
+  displayMode?: string;
+}
 
-export default function Reference(props) {
-  const { visibility, context, getPConnect, readOnly, displayMode } = props;
+export default function Reference(props: ReferenceProps) {
+  const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
 
   const pConnect = getPConnect();
+  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
   const referenceConfig = { ...pConnect.getComponentConfig() } || {};
 
   delete referenceConfig?.name;
   delete referenceConfig?.type;
   delete referenceConfig?.visibility;
 
-  const viewMetadata = pConnect.getReferencedView();
+  const viewMetadata: any = pConnect.getReferencedView();
 
   if (!viewMetadata) {
     // console.log("View not found ", pConnect.getComponentConfig());
@@ -26,7 +34,8 @@ export default function Reference(props) {
     }
   };
 
-  const viewComponent = pConnect.createComponent(viewObject, null, null, {
+  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
     pageReference: context
   });
 
@@ -37,22 +46,7 @@ export default function Reference(props) {
   });
 
   if (visibility !== false) {
-    return <React.Fragment>{viewComponent}</React.Fragment>;
+    return <>{viewComponent}</>;
   }
   return null;
 }
-
-Reference.defaultProps = {
-  visibility: true,
-  context: null,
-  readOnly: false,
-  displayMode: null
-};
-
-Reference.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  visibility: PropTypes.bool,
-  context: PropTypes.string,
-  readOnly: PropTypes.bool,
-  displayMode: PropTypes.string
-};

package/lib/infra/Region/Region.tsx

@@ -1,17 +1,17 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { PropsWithChildren } from 'react';
 
-export default function Region(props) {
+// Region does NOT have getPConnect. So, no need to extend from PConnProps
+interface RegionProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function Region(props: PropsWithChildren<RegionProps>) {
   const { children } = props;
 
-  return <React.Fragment>
+  return (
     <>
       {/* <div>Region</div> */}
       {children}
     </>
-  </React.Fragment>;
+  );
 }
-
-Region.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired
-};