@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/infra/NavBar/NavBar.tsx

@@ -1,8 +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 { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import './NavBar.css';
+
 import {
   Drawer,
   List,
@@ -17,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';
@@ -30,23 +28,23 @@ 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 type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+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?: Array<any>,
-  caseTypes: Array<any>,
-  pConn?: any
+  appName?: string;
+  pages?: any[];
+  caseTypes: any[];
+  pConn?: any;
 }
 
-
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
   'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
@@ -118,13 +116,13 @@ export default function NavBar(props: NavBarProps) {
   const [bShowCaseTypes, setBShowCaseTypes] = useState(true);
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
+  const localeUtils = PCore.getLocaleUtils();
+  const localeReference = pConn.getValue('.pyLocaleReference');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'AppShell';
 
-  const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat(
-    'pzpega-logo-mark.svg'
-  );
+  const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
 
@@ -213,22 +211,12 @@ export default function NavBar(props: NavBarProps) {
         </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>
@@ -245,7 +233,7 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
-              <ListItemText primary={caseType.pyLabel} />
+              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
             </ListItem>
           ))}
         </List>
@@ -254,14 +242,14 @@ export default function NavBar(props: NavBarProps) {
         {navPages.map(page => (
           <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={page.pyLabel} />
+            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
           </ListItem>
         ))}
       </List>
       <Divider />
       <List className='marginTopAuto'>
         <>
-          <ListItem onClick={navPanelOperatorButtonClick}>
+          <ListItem onClick={navPanelOperatorButtonClick} style={{ cursor: 'pointer' }}>
             <ListItemIcon>
               <PersonOutlineIcon fontSize='large' />
             </ListItemIcon>
@@ -292,7 +280,7 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <ArrowBackIcon fontSize='large' />
               </ListItemIcon>
-              <Typography variant='inherit'>{localizedVal('Logout', localeCategory)}</Typography>
+              <Typography variant='inherit'>{localizedVal('Log off', localeCategory)}</Typography>
             </MenuItem>
           </Menu>
         </>

package/lib/infra/Reference/Reference.tsx

@@ -1,28 +1,25 @@
-import React from "react";
-
-// import type { PConnProps } from '../../../types/PConnProps';
-
-// ReferenceProps can't be used until getComponentConfig() is NOT private
-// interface ReferenceProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   visibility?: boolean,
-//   context?: string,
-//   readOnly?: boolean,
-//   displayMode?: string
-// }
-
+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 /*: ReferenceProps */) {
+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());
@@ -37,8 +34,9 @@ export default function Reference(props /*: ReferenceProps */) {
     }
   };
 
-  const viewComponent = pConnect.createComponent(viewObject, null, null, {
-    pageReference: context
+  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
+    pageReference: context && context.startsWith('@CLASS') ? '' : context
   });
 
   viewComponent.props.getPConnect().setInheritedConfig({
@@ -48,7 +46,7 @@ export default function Reference(props /*: ReferenceProps */) {
   });
 
   if (visibility !== false) {
-    return <React.Fragment>{viewComponent}</React.Fragment>;
+    return <>{viewComponent}</>;
   }
   return null;
 }

package/lib/infra/Region/Region.tsx

@@ -1,19 +1,17 @@
-import React from "react";
+import { PropsWithChildren } from 'react';
 
 // 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
-  children: Array<any>
 }
 
-
-export default function Region(props: RegionProps) {
+export default function Region(props: PropsWithChildren<RegionProps>) {
   const { children } = props;
 
-  return <React.Fragment>
+  return (
     <>
       {/* <div>Region</div> */}
       {children}
     </>
-  </React.Fragment>;
+  );
 }

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,28 +1,20 @@
-import React, { useMemo, useRef, useState, useEffect, useContext, createElement } from "react";
-// import { Banner, ModalManager } from "@pega/cosmos-react-core";
+import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import isEqual from 'lodash.isequal';
-// import ReAuthMessageModal from "../ReAuthenticationModal";
-import { Box, CircularProgress } from "@material-ui/core";
-import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
-import { LazyMap as LazyComponentMap } from "@pega/react-sdk-components/lib/components_map";
-import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";
-import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-
-// import type { PConnProps } from '../../../types/PConnProps';
-
-// Can't use RootContainerProps until getChildren() typedef is fixes to not return an array of 'never'
-// interface RootContainerProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   renderingMode?: string,
-//   routingInfo: { type: string, accessedOrder: Array<any>, items: any },
-//   children: Array<any>,
-//   skeleton: any,
-//   httpMessages: Array<any>
-// }
-
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
-declare const PCore: any;
+import { Box, CircularProgress } from '@material-ui/core';
 
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
+import { LazyMap as LazyComponentMap } from '@pega/react-sdk-components/lib/components_map';
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface RootContainerProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  renderingMode?: string;
+  routingInfo: { type: string; accessedOrder: any[]; items: any };
+  skeleton: any;
+  httpMessages: any[];
+}
 
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -30,8 +22,7 @@ declare const PCore: any;
 // is totally at your own risk.
 //
 
-
-const renderingModes = ["portal", "view"];
+const renderingModes = ['portal', 'view'];
 
 function usePrevious(value) {
   const ref = useRef(null);
@@ -44,14 +35,10 @@ function usePrevious(value) {
 function getItemView(routingInfo, renderingMode) {
   const viewConfigs: any = [];
   if (routingInfo && renderingModes.includes(renderingMode)) {
-    const { accessedOrder, items }: {accessedOrder: any, items:any } = routingInfo;
+    const { accessedOrder, items }: { accessedOrder: any; items: any } = routingInfo;
     if (accessedOrder && items) {
       const key = accessedOrder[accessedOrder.length - 1];
-      if (
-        items[key] &&
-        items[key].view &&
-        !isEmptyObject(items[key].view)
-      ) {
+      if (items[key] && items[key].view && !isEmptyObject(items[key].view)) {
         viewConfigs.push(items[key]);
       }
     }
@@ -59,29 +46,21 @@ function getItemView(routingInfo, renderingMode) {
   return viewConfigs;
 }
 
-export default function RootContainer(props /* : RootContainerProps */) {
-  const {
-    getPConnect,
-    renderingMode = '',
-    children = [],
-    skeleton,
-    httpMessages = [],
-    routingInfo
-  } = props;
+export default function RootContainer(props: PropsWithChildren<RootContainerProps>) {
+  const { getPConnect, renderingMode = '', children, skeleton, httpMessages = [], routingInfo } = props;
 
   const { displayOnlyFA } = useContext<any>(StoreContext);
 
-
   const pConn = getPConnect();
 
-  const options = { "context": "app" };
+  const options = { context: 'app' };
 
-  const [componentName, setComponentName] = useState("");
+  const [componentName, setComponentName] = useState('');
 
-  useEffect( () => {
+  useEffect(() => {
     // debugging/investigation help
     // console.log(`componentName change: ${componentName} triggering a re-render`);
-  }, [componentName] );
+  }, [componentName]);
 
   // debugging/investigation help
   // console.log(`RootContainer props.routingInfo: ${JSON.stringify(routingInfo)}`);
@@ -91,21 +70,19 @@ export default function RootContainer(props /* : RootContainerProps */) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Messages';
 
-  const messages = httpMessages
-    ? httpMessages.map((msg) => localizedVal(msg.message, localeCategory))
-    : httpMessages;
+  const messages = httpMessages ? httpMessages.map(msg => localizedVal(msg.message, localeCategory)) : httpMessages;
 
   hasBanner = messages && messages.length > 0;
-  banners = hasBanner && (<div>{localizedVal(`RootContainer: trying to emit Banner with ${messages}`, localeCategory)}</div>);
+  banners = hasBanner && <div>{localizedVal(`RootContainer: trying to emit Banner with ${messages}`, localeCategory)}</div>;
 
   const MemoizedModalViewContainer = useMemo(() => {
     return createElement(
       createPConnectComponent(),
       PCore.createPConnect({
         meta: {
-          type: "ModalViewContainer",
+          type: 'ModalViewContainer',
           config: {
-            name: "modal"
+            name: 'modal'
           }
         },
         options
@@ -113,15 +90,15 @@ export default function RootContainer(props /* : RootContainerProps */) {
     );
   }, []);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const MemoizedPreviewViewContainer = useMemo(() => {
     return createElement(
       createPConnectComponent(),
       PCore.createPConnect({
         meta: {
-          type: "PreviewViewContainer",
+          type: 'PreviewViewContainer',
           config: {
-            name: "preview"
+            name: 'preview'
           }
         },
         options
@@ -129,29 +106,28 @@ export default function RootContainer(props /* : RootContainerProps */) {
     );
   }, []);
 
-
   //
   function getNoPortalContent() {
     let noPortalContent: any;
 
     switch (componentName) {
-      case "View":
-        noPortalContent = <div>{localizedVal('getNoPortalContent: RootContainer wants to render View in noPortal mode', localeCategory)}</div>
+      case 'View':
+        noPortalContent = <div>{localizedVal('getNoPortalContent: RootContainer wants to render View in noPortal mode', localeCategory)}</div>;
         break;
 
-      case "ViewContainer": {
+      case 'ViewContainer': {
         const configProps = pConn.getConfigProps();
         const viewContConfig = {
-          "meta": {
-            "type": "ViewContainer",
-            "config": configProps
+          meta: {
+            type: 'ViewContainer',
+            config: configProps
           },
-        options
+          options
         };
-        const theViewCont = PCore.createPConnect(viewContConfig);
+        const theViewCont: any = PCore.createPConnect(viewContConfig);
         // Add in displayOnlyFA if prop is on RootContainer
         if (displayOnlyFA) {
-          theViewCont["displayOnlyFA"] = true;
+          theViewCont.displayOnlyFA = true;
         }
 
         const theViewContainerAsReact = createElement(createPConnectComponent(), theViewCont);
@@ -161,24 +137,22 @@ export default function RootContainer(props /* : RootContainerProps */) {
       }
 
       default:
-        noPortalContent = <div>{localizedVal('getNoPortalContent: RootContainer wants to render NO componentName in noPortal mode', localeCategory)}</div>
+        noPortalContent = (
+          <div>{localizedVal('getNoPortalContent: RootContainer wants to render NO componentName in noPortal mode', localeCategory)}</div>
+        );
         break;
-
     }
 
     return noPortalContent;
   }
 
-
-  let rootView : any;
+  let rootView: any;
   let rootViewConfig: any = null;
 
   useEffect(() => {
     const { containers } = PCore.getStore().getState();
-    const items = Object.keys(containers).filter((item) =>
-      item.includes("root")
-    );
-    PCore.getContainerUtils().getContainerAPI().addContainerItems(items);
+    const items = Object.keys(containers).filter(item => item.includes('root'));
+    (PCore.getContainerUtils().getContainerAPI() as any).addContainerItems(items);
   }, [routingInfo]);
 
   const items: any = getItemView(routingInfo, renderingMode);
@@ -193,13 +167,8 @@ export default function RootContainer(props /* : RootContainerProps */) {
   }
   const prevRootConfig = usePrevious(rootViewConfig);
 
-  if (
-    renderingModes.includes(renderingMode) &&
-    messages &&
-    routingInfo &&
-    routingInfo?.accessedOrder.length === 0
-  ) {
-    return <div id="root-container">{banners}</div>;
+  if (renderingModes.includes(renderingMode) && messages && routingInfo && routingInfo?.accessedOrder.length === 0) {
+    return <div id='root-container'>{banners}</div>;
   }
 
   if (items.length > 0) {
@@ -212,66 +181,61 @@ export default function RootContainer(props /* : RootContainerProps */) {
     };
 
     if (!isEqual(currentRootConfig, prevRootConfig)) {
-      rootView = createElement(
-          createPConnectComponent(),
-          PCore.createPConnect(currentRootConfig)
-        );
+      rootView = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig));
     }
 
     // debugging/investigation help
     // console.log(`rootView.props.getPConnect().getComponentName(): ${rootView.props.getPConnect().getComponentName()}`);
 
     return (
-      <div id="ModalManager">
-          {rootView}
-          {MemoizedModalViewContainer}
-          <div id="MemoizedPreviewViewContainer"></div>
-          <div id="ReAuthMessageModal"></div>
+      <div id='ModalManager'>
+        {rootView}
+        {MemoizedModalViewContainer}
+        <div id='MemoizedPreviewViewContainer' />
+        <div id='ReAuthMessageModal' />
       </div>
     );
-
   }
-  else if (renderingMode === "noPortal") {
+  if (renderingMode === 'noPortal') {
     // eslint-disable-next-line no-console
     console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
 
-    const theChildren = pConn.getChildren();
-    if (theChildren && (theChildren.length === 1)) {
+    const theChildren = pConn.getChildren() as any[];
+    if (theChildren && theChildren.length === 1) {
       const localPConn = theChildren[0].getPConnect();
-      const localCompName = localPConn.getComponentName()
+      const localCompName = localPConn.getComponentName();
       if (componentName !== localCompName) {
         setComponentName(localCompName);
       }
     }
 
-    const noPortalContent = getNoPortalContent();
-
-    return noPortalContent;
+    return getNoPortalContent();
   }
-  else if (children && children.length > 0) {
+  if (children && Children.count(children) > 0) {
     return (
-      <React.Fragment>
+      <>
         <div>{localizedVal('RootContainer: Has children. Trying to show ModalManager with children, etc.', localeCategory)}</div>
         {children}
         {MemoizedModalViewContainer}
-      </React.Fragment>
-
+      </>
     );
-  } else if (skeleton) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  }
+  if (skeleton) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const LoadingComponent = LazyComponentMap[skeleton];
 
     return (
-      <div id="root-container">
+      <div id='root-container'>
         {/* <div>RootContainer: Trying to show skeleton</div> */}
-        <Box textAlign="center"><CircularProgress /></Box>
-      </div>
-    );
-  } else {
-    return (
-      <div id="root-container">
-        <div>{localizedVal('RootContainer: Should be ModalManager, etc.', localeCategory)}</div>
+        <Box textAlign='center'>
+          <CircularProgress />
+        </Box>
       </div>
     );
   }
-};
+  return (
+    <div id='root-container'>
+      <div>{localizedVal('RootContainer: Should be ModalManager, etc.', localeCategory)}</div>
+    </div>
+  );
+}

package/lib/infra/RootContainer/index.tsx

@@ -1 +1 @@
-export { default } from './RootContainer';
+export { default } from './RootContainer';