@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/infra/Containers/ViewContainer/ViewContainer.tsx

@@ -1,60 +1,69 @@
-import React, { useEffect, useState, useContext, createElement } from "react";
-import PropTypes from "prop-types";
-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 Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import React, { createElement, useContext, useEffect, useState } from 'react';
+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 { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ViewContainerProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  name?: string;
+  loadingInfo?: any; // can't be boolean until setDispatchObjState expects loadingInfo to be type null
+  routingInfo?: any;
+  mode?: string;
+  limit?: number;
+}
 
 // ViewContainer can emit View
 // import View from '../View';
 
-declare const PCore;
-
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
 // Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
 // is totally at your own risk.
 //
 
-
-export default function ViewContainer(props) {
+export default function ViewContainer(props: ViewContainerProps) {
   // const { getPConnect, children, routingInfo, name } = props;
-  const { getPConnect, name, mode, limit, loadingInfo, routingInfo } = props;
-
-  const { displayOnlyFA } = useContext(StoreContext);
+  const { getPConnect, name = '', mode = 'single', limit = 16, loadingInfo = false, routingInfo = null } = props;
 
+  const { displayOnlyFA } = useContext<any>(StoreContext);
 
   const { CONTAINER_TYPE, APP } = PCore.getConstants();
   const pConn = getPConnect();
   const containerMgr: any = pConn.getContainerManager();
 
   const [dispatchObjState, setDispatchObjState] = useState({
-    dispatchObject: {semanticURL: "", context: "", acName: ""},
+    dispatchObject: { semanticURL: '', context: '', acName: '' },
     visible: false,
     loadingInfo: null,
     isLoadingInfoChange: false
-  });   // was this.state in class-based ViewContainer avoiding use of just "state" as the name
+  }); // was this.state in class-based ViewContainer avoiding use of just "state" as the name
 
   let root;
 
-
-  const thePConn = ((typeof getPConnect) === 'function') ? getPConnect() : null;
+  const thePConn = typeof getPConnect === 'function' ? getPConnect() : null;
 
   // beginning of functions for use by ViewContainer
 
   function buildName() {
-    const context = thePConn.getContextName();
+    const context = thePConn?.getContextName();
     let viewContainerName = name;
-    if (!viewContainerName) viewContainerName = "";
-    return `${context.toUpperCase()}/${viewContainerName.toUpperCase()}`;
+    if (!viewContainerName) viewContainerName = '';
+    return `${context?.toUpperCase()}/${viewContainerName.toUpperCase()}`;
   }
 
   function prepareDispatchObject() {
     const baseContext = pConn.getContextName();
-    const { acName = "primary" } = pConn.getContainerName();
+    // const { acName = "primary" } = pConn.getContainerName(); // doesn't work with 8.23 typings
+    let acName = pConn.getContainerName();
+    if (!acName) {
+      acName = 'primary';
+    }
 
     return {
-      semanticURL: "",
+      semanticURL: '',
       context: baseContext,
       acName
     };
@@ -72,7 +81,6 @@ export default function ViewContainer(props) {
 
   // set the root component that is retrieved by PConnectHOC
   function setRootComponent(configObject) {
-
     const { isLoadingInfoChange } = dispatchObjState;
     if (!isLoadingInfoChange) {
       root = createElement(createPConnectComponent(), configObject);
@@ -83,13 +91,9 @@ export default function ViewContainer(props) {
 
   // useEffect on [] -> code that should be run once (as in old constructor and in componentDidMount)
   useEffect(() => {
-
     // This is adapted from the class-based ViewContainer constructor
     containerMgr.initializeContainers({
-      type:
-        mode === CONTAINER_TYPE.MULTIPLE
-          ? CONTAINER_TYPE.MULTIPLE
-          : CONTAINER_TYPE.SINGLE
+      type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
     });
 
     if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
@@ -98,7 +102,7 @@ export default function ViewContainer(props) {
     }
 
     const dispatchObject = prepareDispatchObject();
-    setDispatchObjState( {
+    setDispatchObjState({
       dispatchObject,
       // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore
       visible: !PCore.checkIfSemanticURL(),
@@ -119,9 +123,8 @@ export default function ViewContainer(props) {
     }
 
     // Getting default view label
-    const navPages = pConn.getValue("pyPortal.pyPrimaryNavPages");
-    const defaultViewLabel =
-      Array.isArray(navPages) && navPages[0] ? navPages[0].pyLabel : "";
+    const navPages = pConn.getValue('pyPortal.pyPrimaryNavPages', ''); // 2nd arg empty string until typedefs allow optional
+    const defaultViewLabel = Array.isArray(navPages) && navPages[0] ? navPages[0].pyLabel : '';
     // TODO: Plan is to rename window.constellationCore to window.pega (or similar)
     //    And expose less via ui-bootstrap.js
     // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore
@@ -132,11 +135,8 @@ export default function ViewContainer(props) {
         ...objectForAddContainer,
         defaultViewLabel
       });
-
     }
-
-  },
-  []);
+  }, []);
 
   // This code (that's run every time the ViewContainer is called) is adapted from the class-based ViewContainer's render
 
@@ -154,11 +154,7 @@ export default function ViewContainer(props) {
       let componentVisible = accessedOrder.length > 0;
       const { visible } = dispatchObjState;
       componentVisible = visible || componentVisible;
-      if (
-        items[key] &&
-        items[key].view &&
-        !Utils.isEmptyObject(items[key].view)
-      ) {
+      if (items[key] && items[key].view && !isEmptyObject(items[key].view)) {
         const latestItem = items[key];
         const rootView = latestItem.view;
         const { context, name: viewName } = rootView.config;
@@ -170,18 +166,22 @@ export default function ViewContainer(props) {
           containerItemName: key,
           hasForm: viewName === CREATE_DETAILS_VIEW_NAME
         };
-        const configObject = PCore.createPConnect(config);
+        const configObject: any = PCore.createPConnect(config);
 
         // Add in displayOnlyFA if prop is on ViewContainer
         if (displayOnlyFA) {
-          configObject["displayOnlyFA"] = true;
+          configObject.displayOnlyFA = true;
         }
 
         setRootComponent(configObject);
         return (
           <React.Fragment key={theBuildName}>
             {componentVisible && root}
-            {loadingInfo && <Box textAlign="center"><CircularProgress /></Box>}
+            {loadingInfo && (
+              <Box textAlign='center'>
+                <CircularProgress />
+              </Box>
+            )}
           </React.Fragment>
         );
       }
@@ -191,26 +191,11 @@ export default function ViewContainer(props) {
   // fall through return if insufficient routingInfo
   return (
     <React.Fragment key={theBuildName}>
-      {loadingInfo && <Box textAlign="center"><CircularProgress /></Box>}
+      {loadingInfo && (
+        <Box textAlign='center'>
+          <CircularProgress />
+        </Box>
+      )}
     </React.Fragment>
   );
-
 }
-
-ViewContainer.defaultProps = {
-  getPConnect: null,
-  name: "",
-  loadingInfo: false,
-  routingInfo: null,
-  mode: "single",
-  limit: 16
-};
-
-ViewContainer.propTypes = {
-  getPConnect: PropTypes.func,
-  name: PropTypes.string,
-  loadingInfo: PropTypes.bool,
-  routingInfo: PropTypes.objectOf(PropTypes.any),
-  mode: PropTypes.string,
-  limit: PropTypes.number
-};

package/lib/infra/Containers/helpers.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/prefer-default-export
+export const isContainerInitialized = pConnect => {
+  const context = pConnect.getContextName();
+  const containerName = pConnect.getContainerName();
+  return PCore.getContainerUtils().isContainerInitialized(context, containerName);
+};

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -1,21 +1,26 @@
-/* eslint-disable no-shadow */
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable operator-assignment */
-import { useRef, useEffect, useState, Fragment, forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import { forwardRef, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { TextField } from '@material-ui/core';
 import { v4 as uuidv4 } from 'uuid';
 import { debounce } from 'throttle-debounce';
-import { createFilter, combineFilters, getFormattedDate } from './filterUtils';
-import { getFilterExpression } from './filterUtils';
-import { TextField } from '@material-ui/core';
-import React from 'react';
 import DatePicker from 'react-datepicker';
+
+import { createFilter, combineFilters, getFormattedDate, getFilterExpression } from './filterUtils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import 'react-datepicker/dist/react-datepicker.css';
 
-declare const PCore: any;
+interface DashboardFilterProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  name: string;
+  filterProp: string;
+  type?: string;
+  metadata?: any;
+}
 
-export default function DashboardFilter(props) {
-  const { children, name, filterProp, type, metadata, getPConnect } = props;
+export default function DashboardFilter(props: PropsWithChildren<DashboardFilterProps>) {
+  const { children = [], name, filterProp, type = '', metadata = null, getPConnect } = props;
   const { current: filterId } = useRef(uuidv4());
 
   const [startDate, setStartDate] = useState(null);
@@ -64,10 +69,7 @@ export default function DashboardFilter(props) {
       filterExpression: getFilterExpression(filterValue, name, metadata)
     };
 
-    PCore.getPubSubUtils().publish(
-      PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
-      filterData
-    );
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
   };
 
   const fireFilterChangeDebounced = debounce(500, fireFilterChange);
@@ -87,10 +89,7 @@ export default function DashboardFilter(props) {
         filterId,
         filterExpression: combineFilters([startFilter, endFilter], null)
       };
-      PCore.getPubSubUtils().publish(
-        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
-        filterData
-      );
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
     }
   };
 
@@ -98,7 +97,7 @@ export default function DashboardFilter(props) {
     metadata.config.onRecordChange = e => {
       fireFilterChange(e.id);
     };
-    return getPConnect().createComponent(metadata);
+    return getPConnect().createComponent(metadata, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
   };
 
   const onChange = dates => {
@@ -112,24 +111,15 @@ export default function DashboardFilter(props) {
 
   const label = metadata.config.label.substring(3);
 
-  const CustomDateInput = forwardRef<HTMLInputElement, TextProps>(
-    ({ value, onClick }, ref: any) => (
-      <TextField
-        label={label}
-        variant='outlined'
-        fullWidth
-        value={value}
-        size='small'
-        onClick={onClick}
-        ref={ref}
-      >
-        {value}
-      </TextField>
-    )
-  );
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CustomDateInput = forwardRef<HTMLInputElement, TextProps>(({ value, onClick }, ref: any) => (
+    <TextField label={label} variant='outlined' fullWidth value={value} size='small' onClick={onClick} ref={ref}>
+      {value}
+    </TextField>
+  ));
 
   return (
-    <Fragment>
+    <>
       {type === 'DateTime' && (
         <DatePicker
           onChange={onChange}
@@ -160,21 +150,6 @@ export default function DashboardFilter(props) {
           {children}
         </span>
       )}
-    </Fragment>
+    </>
   );
 }
-
-DashboardFilter.defaultProps = {
-  children: null,
-  type: null,
-  metadata: null
-};
-
-DashboardFilter.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  children: PropTypes.object,
-  name: PropTypes.string.isRequired,
-  filterProp: PropTypes.string.isRequired,
-  type: PropTypes.string,
-  metadata: PropTypes.objectOf(PropTypes.any)
-};

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -2,10 +2,8 @@
 /** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
 
 import { Grid, Link } from '@material-ui/core';
-import React from 'react';
-import DashboardFilter from './DashboardFilter';
 
-declare const PCore: any;
+import DashboardFilter from './DashboardFilter';
 
 export const createFilter = (value, fieldId, comparator = 'EQ') => {
   return {
@@ -46,11 +44,9 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
   if (name.indexOf('.') !== -1) {
     cleanedName = name.substring(name.indexOf('.') + 1);
   }
-  let propInfo = PCore.getMetadataUtils().getPropertyMetadata(
-    cleanedName,
-    filterMeta.config.ruleClass
-  );
+  let propInfo: any = PCore.getMetadataUtils().getPropertyMetadata(cleanedName, filterMeta.config.ruleClass);
   if (!propInfo) {
+    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
     propInfo = PCore.getMetadataUtils().getPropertyMetadata(cleanedName);
   }
   const { type: propertyType } = propInfo || { type: 'Text' };
@@ -60,16 +56,7 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
   const type = filterType || filterMeta.type;
   const filterProp = `.pyDashboardFilter${index}`;
   if (type === 'DateTime') {
-    return (
-      <DashboardFilter
-        key={name}
-        getPConnect={getPConnect}
-        name={name}
-        filterProp={filterProp}
-        metadata={filterMeta}
-        type={filterMeta.type}
-      ></DashboardFilter>
-    );
+    return <DashboardFilter key={name} getPConnect={getPConnect} name={name} filterProp={filterProp} metadata={filterMeta} type={filterMeta.type} />;
   }
   if (datasource && datasource.fields) {
     datasource.fields.key = datasource.fields.value;
@@ -81,32 +68,22 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
   filterMeta.type = filterMeta.config.displayAs || type;
   filterMeta.config.placeholder = 'ALL';
   return (
-    <DashboardFilter
-      key={name}
-      getPConnect={getPConnect}
-      name={name}
-      filterProp={filterProp}
-      metadata={filterMeta}
-      type={filterMeta.type}
-    >
-      {getPConnect().createComponent(filterMeta)}
+    <DashboardFilter key={name} getPConnect={getPConnect} name={name} filterProp={filterProp} metadata={filterMeta} type={filterMeta.type}>
+      {getPConnect().createComponent(filterMeta, '', '', {})}
     </DashboardFilter>
   );
 };
 
 export const buildFilterComponents = (getPConnect, allFilters) => {
-  const filterComponents = allFilters.children.map((filter, index) =>
-    createFilterComponent(getPConnect, filter, index)
-  );
+  const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
   if (filterComponents && filterComponents.length > 0) {
     filterComponents.push(
       <Grid>
         <Link
           style={{ cursor: 'pointer' }}
           onClick={() => {
-            PCore.getPubSubUtils().publish(
-              PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL
-            );
+            // @ts-ignore - second parameter “payload” for publish method should be optional
+            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
           }}
         >
           Clear All
@@ -134,7 +111,7 @@ export const getFilterExpression = (filterValue, name, metadata) => {
   if (metadata.config.filterType && metadata.config.filterType === 'RelativeDates') {
     const fieldSource = metadata.config.datasource.filter(source => source.key === filterValue)[0];
     const relativeDateExpression = JSON.parse(fieldSource.json);
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const fields = [
       {
         name: relativeDateExpression.condition.lhs.field,
@@ -165,9 +142,7 @@ export function getLayoutDataFromRegion(regionData) {
       const itemPConnect = item?.getPConnect();
 
       return {
-        id: itemPConnect?.getComponentName()
-          ? `${itemPConnect.getComponentName()}--${index}`
-          : `item--${index}`,
+        id: itemPConnect?.getComponentName() ? `${itemPConnect.getComponentName()}--${index}` : `item--${index}`,
         content: itemPConnect?.getComponent(),
         layoutConfig: {
           ...defaultLayoutConfig,
@@ -181,8 +156,5 @@ export const getFormattedDate = date => {
   if (!date) {
     return date;
   }
-  const formattedDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${(
-    '0' + date.getDate()
-  ).slice(-2)}`;
-  return formattedDate;
+  return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
 };

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -1,11 +1,18 @@
-import React, { useState, useEffect, createElement } from 'react';
-import PropTypes from 'prop-types';
+import { useState, useEffect, createElement } from 'react';
 import { Box, Card, CircularProgress } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
-declare const PCore;
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface DeferLoadProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  name: string;
+  isChildDeferLoad?: boolean;
+  isTab: boolean;
+  deferLoadId: string;
+}
 
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -26,26 +33,25 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function DeferLoad(props) {
+export default function DeferLoad(props: DeferLoadProps) {
   const { getPConnect, name, deferLoadId, isTab } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
-  const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState("");
+  const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
 
   const classes = useStyles();
 
   const pConnect = getPConnect();
   const constants = PCore.getConstants();
 
-  const theRequestedAssignment = pConnect.getValue( PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
-  if (theRequestedAssignment !== currentLoadedAssignment)  {
+  const theRequestedAssignment = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL, ''); // 2nd arg empty string until typedef allows optional
+  if (theRequestedAssignment !== currentLoadedAssignment) {
     // console.log(`DeferLoad: currentLoadedAssignment about to change from ${currentLoadedAssignment} to ${theRequestedAssignment}`);
     setCurrentLoadedAssignment(theRequestedAssignment);
   }
 
   const { CASE, PAGE, DATA } = constants.RESOURCE_TYPES;
-  const loadViewCaseID =
-    pConnect.getValue(constants.PZINSKEY) || pConnect.getValue(constants.CASE_INFO.CASE_INFO_ID);
+  const loadViewCaseID = pConnect.getValue(constants.PZINSKEY, '') || pConnect.getValue(constants.CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef allows optional
   let containerName;
   let containerItemData;
   const targetName = pConnect.getTarget();
@@ -62,7 +68,7 @@ export default function DeferLoad(props) {
 
   const getViewOptions = () => ({
     viewContext: resourceType,
-    pageClass: loadViewCaseID ? '' : pConnect.getDataObject().pyPortal.classID,
+    pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal.classID, // 2nd arg empty string until typedef allows optional
     container: isContainerPreview ? 'preview' : null,
     containerName: isContainerPreview ? 'preview' : null,
     updateData: isContainerPreview
@@ -102,16 +108,14 @@ export default function DeferLoad(props) {
       // Rendering defer loaded tabs in data context
       if (containerName) {
         const dataContext = PCore.getStoreValue('.dataContext', 'dataInfo', containerName);
-        const dataContextParameters = PCore.getStoreValue(
-          '.dataContextParameters',
-          'dataInfo',
-          containerName
-        );
+        const dataContextParameters = PCore.getStoreValue('.dataContextParameters', 'dataInfo', containerName);
 
         getPConnect()
           .getActionsApi()
           .showData(name, dataContext, dataContextParameters, {
+            // @ts-ignore - Type 'boolean' is not assignable to type 'string'
             skipSemanticUrl: true,
+            // @ts-ignore
             isDeferLoaded: true
           })
           .then(data => {
@@ -132,7 +136,7 @@ export default function DeferLoad(props) {
     } else {
       getPConnect()
         .getActionsApi()
-        .refreshCaseView(encodeURI(loadViewCaseID), name)
+        .refreshCaseView(encodeURI(loadViewCaseID), name, '') // 3rd arg empty string until typedef allows optional
         .then(data => {
           onResponse(data.root);
         });
@@ -150,26 +154,13 @@ export default function DeferLoad(props) {
     );
   } else {
     deferLoadContent = !isTab ? (
-      <div className={classes.root}>
-        <React.Fragment>{content}</React.Fragment>
-      </div>
+      <div className={classes.root}>{content}</div>
     ) : (
       <Card id='DeferLoad' className={classes.root}>
-        <React.Fragment>{content}</React.Fragment>
+        <>{content}</>
       </Card>
     );
   }
 
   return deferLoadContent;
 }
-
-DeferLoad.defaultProps = {
-  isChildDeferLoad: false
-};
-
-DeferLoad.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  isChildDeferLoad: PropTypes.bool,
-  isTab: PropTypes.bool
-};

package/lib/infra/DeferLoad/index.tsx

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

package/lib/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -1,59 +1,46 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare const PCore;
+interface ErrorBoundaryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  isInternalError?: boolean;
+}
 
-function ErrorBoundary(props) {
-  const ERROR_TEXT = PCore.getErrorHandler().getGenericFailedMessage();
-  const WORK_AREA = "workarea";
-  const ERROR_WHILE_RENDERING = "ERROR_WHILE_RENDERING";
-  const { getPConnect, isInternalError } = props;
+export default function ErrorBoundary(props: ErrorBoundaryProps) {
+  const errorMsg = PCore.getErrorHandler().getGenericFailedMessage();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+  const ERROR_TEXT = localizedVal(errorMsg, localeCategory);
+  const WORK_AREA = 'workarea';
+  const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
+  const { getPConnect, isInternalError = false } = props;
 
-  const theErrorDiv = <div>{ERROR_TEXT}</div>
+  const theErrorDiv = <div>{ERROR_TEXT}</div>;
 
   if (!getPConnect) {
-    return (
-      theErrorDiv
-    );
+    return theErrorDiv;
   }
 
   const pConn = getPConnect();
 
   if (!isInternalError) {
     // eslint-disable-next-line no-console
-    console.error(`Unable to load the component ${pConn.getComponentName()}
-    This might be due to the view meta data getting corrupted or the component file missing.
-    Raw meta data for the component: ${JSON.stringify(pConn.getRawMetadata())}`);
+    console.error(`
+  ${localizedVal('Unable to load the component', localeCategory)} ${pConn.getComponentName()}
+  ${localizedVal('This might be due to the view metadata getting corrupted or the component file missing.', localeCategory)}
+  Raw metadata for the component: ${JSON.stringify(pConn.getRawMetadata())}
+`);
   }
 
-  if (pConn.getConfigProps().type === "page") {
-    return (
-      theErrorDiv
-    );
+  if ((pConn.getConfigProps() as any).type === 'page') {
+    return theErrorDiv;
   }
 
-  if (
-    pConn.getContainerName() === WORK_AREA ||
-    pConn.isInsideList() === true ||
-    pConn.getContainerName() === "modal"
-  ) {
+  if (pConn.getContainerName() === WORK_AREA || pConn.isInsideList() === true || pConn.getContainerName() === 'modal') {
     const { publish } = PCore.getPubSubUtils();
+    // @ts-ignore - second parameter “payload” for publish method should be optional
     publish(ERROR_WHILE_RENDERING);
     return null;
   }
 
-  return (
-    theErrorDiv
-  );
+  return theErrorDiv;
 }
-ErrorBoundary.propTypes = {
-  getPConnect: PropTypes.func,
-  isInternalError: PropTypes.bool
-};
-
-ErrorBoundary.defaultProps = {
-  getPConnect: null,
-  isInternalError: false
-};
-
-export default ErrorBoundary;