@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,15 +1,20 @@
-import React, { useMemo, useRef, useState, useEffect, useContext, createElement } from "react";
-// import { Banner, ModalManager } from "@pega/cosmos-react-core";
-import PropTypes, { object } from "prop-types";
+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 Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
-
-declare const PCore;
+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
@@ -17,8 +22,7 @@ declare const PCore;
 // is totally at your own risk.
 //
 
-
-const renderingModes = ["portal", "view"];
+const renderingModes = ['portal', 'view'];
 
 function usePrevious(value) {
   const ref = useRef(null);
@@ -31,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 &&
-        !Utils.isEmptyObject(items[key].view)
-      ) {
+      if (items[key] && items[key].view && !isEmptyObject(items[key].view)) {
         viewConfigs.push(items[key]);
       }
     }
@@ -46,53 +46,43 @@ function getItemView(routingInfo, renderingMode) {
   return viewConfigs;
 }
 
-const RootContainer = (props) => {
-  const {
-    getPConnect,
-    renderingMode,
-    children,
-    skeleton,
-    httpMessages,
-    routingInfo
-  } = props;
-
-  const { displayOnlyFA, isMashup } = useContext(StoreContext);
+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" };
-  if (isMashup) {
-    options["context"] = "root";
-  }
+  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)}`);
 
   let hasBanner = false;
   let banners: any = null;
-  const messages = httpMessages
-    ? httpMessages.map((msg) => msg.message)
-    : httpMessages;
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+
+  const messages = httpMessages ? httpMessages.map(msg => localizedVal(msg.message, localeCategory)) : httpMessages;
 
   hasBanner = messages && messages.length > 0;
-  banners = hasBanner && (<div>RootContainer: trying to emit Banner with {messages}</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
@@ -100,15 +90,15 @@ const RootContainer = (props) => {
     );
   }, []);
 
-  // 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
@@ -116,29 +106,28 @@ const RootContainer = (props) => {
     );
   }, []);
 
-
   //
   function getNoPortalContent() {
     let noPortalContent: any;
 
     switch (componentName) {
-      case "View":
-        noPortalContent = <div>getNoPortalContent: RootContainer wants to render View in noPortal mode</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);
@@ -148,24 +137,22 @@ const RootContainer = (props) => {
       }
 
       default:
-        noPortalContent = <div>getNoPortalContent: RootContainer wants to render NO componentName in noPortal mode</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);
@@ -180,13 +167,8 @@ const RootContainer = (props) => {
   }
   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) {
@@ -199,86 +181,61 @@ const RootContainer = (props) => {
     };
 
     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(`RootContainer rendering in noPortal mode`);
+    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>RootContainer: Has children. Trying to show ModalManager with children, etc.</div>
+      <>
+        <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>RootContainer: Should be ModalManager, etc.</div>
+        <Box textAlign='center'>
+          <CircularProgress />
+        </Box>
       </div>
     );
   }
-};
-
-RootContainer.defaultProps = {
-  getPConnect: null,
-  renderingMode: null,
-  children: null,
-  routingInfo: object
-};
-
-RootContainer.propTypes = {
-  getPConnect: PropTypes.func,
-  renderingMode: PropTypes.string,
-  routingInfo: PropTypes.shape({
-    type: PropTypes.string,
-    accessedOrder: PropTypes.array,
-    items: PropTypes.object
-  }),
-  children: PropTypes.arrayOf(PropTypes.oneOfType( [PropTypes.object, PropTypes.string ]))
-};
-
-export default RootContainer;
+  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';

package/lib/infra/Stages/Stages.tsx

@@ -1,13 +1,16 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Breadcrumbs, Card, Typography } from "@material-ui/core";
+import { Breadcrumbs, Card, Typography } from '@material-ui/core';
 import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
 import DoneIcon from '@material-ui/icons/Done';
 import { makeStyles } from '@material-ui/core/styles';
 
-declare const PCore: any;
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-const useStyles = makeStyles((theme) => ({
+interface StagesProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  stages: any[];
+}
+
+const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),
@@ -16,25 +19,23 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(1)
   },
   completedStage: {
-    color: theme.palette.text.primary,
+    color: theme.palette.text.primary
   },
   currentStage: {
     color: theme.palette.info.dark,
-    fontWeight: 600,
+    fontWeight: 600
   },
   futureStage: {
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.secondary
   },
   separatorIcon: {
-    color: theme.palette.text.disabled,
+    color: theme.palette.text.disabled
   }
-
 }));
 
-
 /**
  * API to filter out the alternate stages which are not in active and return all other stages
  * @param {Array} stages - Stages of a case type
@@ -46,31 +47,28 @@ function getFilteredStages(stages) {
     return [];
   }
 
-  return stages.filter(
-    (stage) =>
-      stage.type !== "Alternate" ||
-      (stage.type === "Alternate" && stage.visited_status === "active")
-  );
+  return stages.filter(stage => stage.type !== 'Alternate' || (stage.type === 'Alternate' && stage.visited_status === 'active'));
 }
 
 /* TODO - this component should be refactored and not exposed as top level DX Component -
   the stages should be created as part of the CaseView */
-export default function Stages(props) {
+export default function Stages(props: StagesProps) {
   const classes = useStyles();
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
+  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
 
   const filteredStages = getFilteredStages(stages);
-  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID);
+  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: stage.name,
+      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
       id: theID,
-      complete: stage.visited_status === "completed",
-      current: (theID === currentStageID),
-      last: (index === arr.length - 1),
+      complete: stage.visited_status === 'completed',
+      current: theID === currentStageID,
+      last: index === arr.length - 1
     };
   });
 
@@ -89,31 +87,32 @@ export default function Stages(props) {
       theClass = classes.futureStage;
     }
 
-    return <span key={index}>
-        {stage.complete ? <DoneIcon color="disabled" fontSize="small" /> : null}
-        <Typography variant="h5" component="span" display="inline" className={theClass}>{stage.name}</Typography>
-      </span>;
+    return (
+      <span key={index}>
+        {stage.complete ? <DoneIcon color='disabled' fontSize='small' /> : null}
+        <Typography variant='h5' component='span' display='inline' className={theClass}>
+          {stage.name}
+        </Typography>
+      </span>
+    );
   }
 
   function getStages(inStages) {
-    return <Breadcrumbs aria-label="stages" separator={<DoubleArrowIcon className={classes.separatorIcon} />}>
-      {inStages.map((stage, index) => {
-        return getStage(stage, index);
-      })}
-    </Breadcrumbs>
+    return (
+      <Breadcrumbs aria-label='stages' separator={<DoubleArrowIcon className={classes.separatorIcon} />}>
+        {inStages.map((stage, index) => {
+          return getStage(stage, index);
+        })}
+      </Breadcrumbs>
+    );
   }
 
   return (
-    <Card id="Stages" className={classes.root}>
+    <Card id='Stages' className={classes.root}>
       {/* Stages<br />
       currentStageID: {currentStageID}<br />
       {JSON.stringify(stagesObj)}<br /><br /> */}
       {getStages(stagesObj)}
     </Card>
-  )
+  );
 }
-
-Stages.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  stages: PropTypes.arrayOf(PropTypes.object).isRequired
-};

package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -1,9 +1,11 @@
-import React from "react";
-import { withStyles } from '@material-ui/core/styles'
-import {
-  Tab,
-  Divider,
-} from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import { Tab, Divider } from '@material-ui/core';
+
+// LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface LeftAlignVerticalTabsProps {
+  // If any, enter additional props that only exist on this component
+}
 
 // LeftAlignVerticalTab is a specialized Tab that has styles to make it
 //  left aligned and full width of the container Tabs
@@ -16,12 +18,17 @@ import {
 const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
-    maxWidth: '100%',
+    maxWidth: '100%'
   },
   wrapper: {
     display: 'block',
-    textAlign: 'left',
-  },
-}))((props) => <div><Tab {...props} /><Divider /></div>);
+    textAlign: 'left'
+  }
+}))((props: LeftAlignVerticalTabsProps) => (
+  <div>
+    <Tab {...props} />
+    <Divider />
+  </div>
+));
 
 export default LeftAlignVerticalTabs;

package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx

@@ -1,26 +1,29 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { makeStyles } from '@material-ui/core/styles'
-
+import React, { useState, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
-import LeftAlignVerticalTab from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs';
 
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// VerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
+interface VerticalTabsProps {
+  // If any, enter additional props that only exist on this component
+  tabconfig: any[];
+}
 
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)
 //  So, we're going to make the selected vertical tab indicator use a color from our theme.
-const useStyles = makeStyles((theme) => (
-    {
-    tabs: {
-      '& div > span': {
-        backgroundColor: theme.palette.info.dark,
-        width: "3px"
-      },
-    },
+const useStyles = makeStyles(theme => ({
+  tabs: {
+    '& div > span': {
+      backgroundColor: theme.palette.info.dark,
+      width: '3px'
+    }
+  }
 }));
 
 // Implementation of custom event inspired by:
 //  https://betterprogramming.pub/master-your-react-skills-with-event-listeners-ebc01dde4fad
-const createCustomEvent = (eventName: string, additionalData: {[key: string]: string}): CustomEvent | null => {
+const createCustomEvent = (eventName: string, additionalData: { [key: string]: string }): CustomEvent | null => {
   if (window) {
     return new CustomEvent(eventName, {
       detail: { additionalData }
@@ -30,22 +33,22 @@ const createCustomEvent = (eventName: string, additionalData: {[key: string]: st
   return null;
 };
 
+export default function VerticalTabs(props: VerticalTabsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const LeftAlignVerticalTab = getComponentFromMap('LeftAlignVerticalTabs');
 
-export default function VerticalTabs(props) {
   // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig
-  const { tabconfig } = props;
+  const { tabconfig = [] } = props;
   const classes = useStyles();
   const [value, setValue] = useState(0);
 
   useEffect(() => {
-
-    const eventData = {"itemClicked": value.toString()};
+    const eventData = { itemClicked: value.toString() };
     const myEvent = createCustomEvent('VerticalTabClick', eventData);
 
     if (myEvent !== null) {
-      document.dispatchEvent( myEvent );
+      document.dispatchEvent(myEvent);
     }
-
   }, [value]);
 
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
@@ -53,23 +56,13 @@ export default function VerticalTabs(props) {
   };
 
   return (
-    <div id="VerticalTabs">
+    <div id='VerticalTabs'>
       {/* VerticalTabs: {JSON.stringify(tabconfig)} */}
-      <Tabs
-        className={classes.tabs}
-        orientation="vertical"
-        value={value}
-        onChange={handleChange}>
-        {tabconfig.map((tab) => <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />)}
+      <Tabs className={classes.tabs} orientation='vertical' value={value} onChange={handleChange}>
+        {tabconfig.map(tab => (
+          <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />
+        ))}
       </Tabs>
     </div>
-  )
+  );
 }
-
-VerticalTabs.defaultProps = {
-  tabconfig: []
-};
-
-VerticalTabs.propTypes = {
-  tabconfig: PropTypes.arrayOf(PropTypes.object)
-};