@pega/react-sdk-overrides 0.23.26 → 0.23.27

package/lib/helpers/versionHelpers.ts

@@ -5,15 +5,11 @@
  * PCore/PConnect is being run
  */
 
-declare const PCore;
-
-export const sdkVersion = "8.7";
+export const sdkVersion = '8.7';
 
 export function compareSdkPCoreVersions() {
-
   // const theConstellationVersion = PCore.getPCoreVersion();
 
   // eslint-disable-next-line no-console
   console.warn(`Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`);
-
 }

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -1,70 +1,74 @@
-import React from "react";
-import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles';
-
 import Button from '@material-ui/core/Button';
-import { Grid, Divider } from "@material-ui/core";
-
+import { Grid, Divider } from '@material-ui/core';
 
+// ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
+interface ActionButtonsProps {
+  // If any, enter additional props that only exist on this component
+  arMainButtons?: any[];
+  arSecondaryButtons?: any[];
+  onButtonPress: any;
+}
 
 const useStyles = makeStyles((/* theme */) => ({
   button: {
-    padding: "0px 5px",
+    padding: '0px 5px'
   },
   divider: {
-    marginTop: "10px",
-    marginBottom: "10px"
+    marginTop: '10px',
+    marginBottom: '10px'
   }
 }));
 
-
-export default function ActionButtons(props) {
-  const { arMainButtons, arSecondaryButtons, onButtonPress } = props;
+export default function ActionButtons(props: ActionButtonsProps) {
+  const { arMainButtons = [], arSecondaryButtons = [], onButtonPress } = props;
   const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
 
   function _onButtonPress(sAction: string, sButtonType: string) {
-
     onButtonPress(sAction, sButtonType);
   }
 
   return (
-    <React.Fragment>
-      <Divider className={classes.divider}/>
-      <Grid container spacing={4} justifyContent="space-between">
+    <>
+      <Divider className={classes.divider} />
+      <Grid container spacing={4} justifyContent='space-between'>
         <Grid item>
           <Grid container spacing={1}>
-          {arSecondaryButtons.map((sButton) => (
-                  <Grid item key={sButton.name}>
-                    <Button variant="contained" color="secondary" onClick={() => { _onButtonPress(sButton.jsAction, "secondary")}} >{sButton.name}</Button>
-                  </Grid>
-                ))}
+            {arSecondaryButtons.map(sButton => (
+              <Grid item key={sButton.name}>
+                <Button
+                  variant='contained'
+                  color='secondary'
+                  onClick={() => {
+                    _onButtonPress(sButton.jsAction, 'secondary');
+                  }}
+                >
+                  {localizedVal(sButton.name, localeCategory)}
+                </Button>
+              </Grid>
+            ))}
           </Grid>
         </Grid>
         <Grid item>
           <Grid container spacing={1}>
-          {arMainButtons.map((mButton) => (
-                  <Grid item key={mButton.name}>
-                    <Button variant="contained" color="primary" onClick={() => { _onButtonPress(mButton.jsAction, "primary")}} >{mButton.name}</Button>
-                  </Grid>
-                ))}
+            {arMainButtons.map(mButton => (
+              <Grid item key={mButton.name}>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  onClick={() => {
+                    _onButtonPress(mButton.jsAction, 'primary');
+                  }}
+                >
+                  {localizedVal(mButton.name, localeCategory)}
+                </Button>
+              </Grid>
+            ))}
           </Grid>
         </Grid>
       </Grid>
-
-    </React.Fragment>
-
-  )
+    </>
+  );
 }
-
-ActionButtons.propTypes = {
-  arMainButtons: PropTypes.array,
-  arSecondaryButtons: PropTypes.array,
-  onButtonPress: PropTypes.func
-  // buildName: PropTypes.string
-};
-
-ActionButtons.defaultProps = {
-  arMainButtons: [],
-  arSecondaryButtons: []
-  // buildName: null
-};

package/lib/infra/ActionButtons/index.tsx

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

package/lib/infra/Assignment/Assignment.tsx

@@ -1,25 +1,39 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-import AssignmentCard from '@pega/react-sdk-components/lib/components/infra/AssignmentCard';
-import MultiStep from '@pega/react-sdk-components/lib/components/infra/MultiStep';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
-declare const PCore: any;
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface AssignmentProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  itemKey: string;
+  isInModal: boolean;
+  banners: any[];
+  // eslint-disable-next-line react/no-unused-prop-types
+  actionButtons: any[];
+}
+
+export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AssignmentCard = getComponentFromMap('AssignmentCard');
+  const MultiStep = getComponentFromMap('MultiStep');
 
-export default function Assignment(props) {
-  const { getPConnect, children, itemKey, isInModal } = props;
+  const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
   const thePConn = getPConnect();
 
   const [bHasNavigation, setHasNavigation] = useState(false);
-  const [actionButtons, setActionButtons] = useState({});
+  const [actionButtons, setActionButtons] = useState([]);
   const [bIsVertical, setIsVertical] = useState(false);
-  const [arCurrentStepIndicies, setArCurrentStepIndicies] = useState<Array<any>>([]);
-  const [arNavigationSteps, setArNavigationSteps] = useState<Array<any>>([]);
+  const [arCurrentStepIndicies, setArCurrentStepIndicies] = useState<any[]>([]);
+  const [arNavigationSteps, setArNavigationSteps] = useState<any[]>([]);
 
   const actionsAPI = thePConn.getActionsApi();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
+  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
@@ -32,18 +46,14 @@ export default function Assignment(props) {
   const [showSnackbar, setShowSnackbar] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState('');
 
-  function findCurrentIndicies(
-    arStepperSteps: Array<any>,
-    arIndicies: Array<number>,
-    depth: number
-  ): Array<number> {
+  function findCurrentIndicies(arStepperSteps: any[], arIndicies: number[], depth: number): number[] {
     let count = 0;
     arStepperSteps.forEach(step => {
       if (step.visited_status === 'current') {
         arIndicies[depth] = count;
 
         // add in
-        step['step_status'] = '';
+        step.step_status = '';
       } else if (step.visited_status === 'success') {
         count += 1;
         step.step_status = 'completed';
@@ -61,12 +71,11 @@ export default function Assignment(props) {
   }
 
   useEffect(() => {
-    if (children && children.length > 0) {
-      // debugger;
-
-      const oWorkItem = children[0].props.getPConnect();
+    if (children) {
+      const firstChild = Array.isArray(children) ? children[0] : children;
+      const oWorkItem = firstChild.props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
-      const oData = thePConn.getDataObject();
+      const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
 
       if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
         const oCaseInfo = oData.caseInfo;
@@ -79,23 +88,23 @@ export default function Assignment(props) {
           setHasNavigation(true);
 
           if (
-            oCaseInfo.navigation.template &&
-            oCaseInfo.navigation.template.toLowerCase() === 'standard'
+            (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') ||
+            oCaseInfo?.navigation?.steps?.length === 1
           ) {
             setHasNavigation(false);
-          } else if (
-            oCaseInfo.navigation.template &&
-            oCaseInfo.navigation.template.toLowerCase() === 'vertical'
-          ) {
+          } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
             setIsVertical(true);
           } else {
             setIsVertical(false);
           }
-
-          setArNavigationSteps(JSON.parse(JSON.stringify(oCaseInfo.navigation.steps)));
-          setArCurrentStepIndicies(
-            findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0)
-          );
+          const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
+          steps.forEach(step => {
+            if (step.name) {
+              step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+            }
+          });
+          setArNavigationSteps(steps);
+          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
         }
       }
     }
@@ -118,10 +127,7 @@ export default function Assignment(props) {
 
   function onSaveActionSuccess(data) {
     actionsAPI.cancelAssignment(itemKey).then(() => {
-      PCore.getPubSubUtils().publish(
-        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED,
-        data
-      );
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
     });
   }
 
@@ -134,7 +140,7 @@ export default function Assignment(props) {
           navigatePromise
             .then(() => {})
             .catch(() => {
-              showToast(`Navigation failed!`);
+              showToast(`${localizedVal('Navigation failed!', localeCategory)}`);
             });
 
           break;
@@ -147,13 +153,11 @@ export default function Assignment(props) {
 
           savePromise
             .then(() => {
-              const caseType = thePConn
-                .getCaseInfo()
-                .c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
+              const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
               onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
             .catch(() => {
-              showToast('Save failed');
+              showToast(`${localizedVal('Save failed', localeCategory)}`);
             });
 
           break;
@@ -163,11 +167,12 @@ export default function Assignment(props) {
           // check if create stage (modal)
           const { PUB_SUB_EVENTS } = PCore.getConstants();
           const { publish } = PCore.getPubSubUtils();
+          // @ts-ignore - Property 'isAssignmentInCreateStage' is private and only accessible within class 'CaseInfo'
           const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
           const isLocalAction =
+            // @ts-ignore - Property 'isLocalAction' is private and only accessible within class 'CaseInfo'.
             thePConn.getCaseInfo().isLocalAction() ||
-            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION &&
-              getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
+            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
           if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
             const cancelPromise = cancelCreateStageAssignment(itemKey);
 
@@ -176,7 +181,7 @@ export default function Assignment(props) {
                 publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
               })
               .catch(() => {
-                showToast(`Cancel failed!`);
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
               });
           } else {
             const cancelPromise = cancelAssignment(itemKey);
@@ -186,7 +191,7 @@ export default function Assignment(props) {
                 publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
               })
               .catch(() => {
-                showToast(`Cancel failed!`);
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
               });
           }
           break;
@@ -204,7 +209,7 @@ export default function Assignment(props) {
           finishPromise
             .then(() => {})
             .catch(() => {
-              showToast(`Submit failed!`);
+              showToast(`${localizedVal('Submit failed!', localeCategory)}`);
             });
 
           break;
@@ -216,10 +221,50 @@ export default function Assignment(props) {
     }
   }
 
+  function getRefreshProps(refreshConditions) {
+    // refreshConditions cuurently supports only "Changes" event
+    if (!refreshConditions) {
+      return [];
+    }
+    return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+  }
+
+  // expected format of refreshConditions : [{field: ".Name", event: "Changes"}]
+  // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
+  const refreshConditions = thePConn.getCaseInfo()?.getActionRefreshConditions();
+  const context = thePConn.getContextName();
+  const pageReference = thePConn.getPageReference();
+
+  // refresh api de-registration
+  PCore.getRefreshManager().deRegisterForRefresh(context);
+
+  // refresh api registration
+  const refreshProps = getRefreshProps(refreshConditions);
+  const caseKey = thePConn.getCaseInfo().getKey();
+  const refreshOptions = {
+    autoDetectRefresh: true,
+    preserveClientChanges: false
+  };
+  if (refreshProps.length > 0) {
+    refreshProps.forEach(prop => {
+      PCore.getRefreshManager().registerForRefresh(
+        'PROP_CHANGE',
+        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, null, pageReference, {
+          ...refreshOptions,
+          refreshFor: prop[0]
+        }),
+        `${pageReference}.${prop[1]}`,
+        `${context}/${pageReference}`,
+        context
+      );
+    });
+  }
+
   return (
     <div id='Assignment'>
+      {banners}
       {bHasNavigation ? (
-        <React.Fragment>
+        <>
           <MultiStep
             getPConnect={getPConnect}
             itemKey={itemKey}
@@ -237,25 +282,15 @@ export default function Assignment(props) {
             onClose={handleSnackbarClose}
             message={snackbarMessage}
             action={
-              <IconButton
-                size='small'
-                aria-label='close'
-                color='inherit'
-                onClick={handleSnackbarClose}
-              >
+              <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
                 <CloseIcon fontSize='small' />
               </IconButton>
             }
           />
-        </React.Fragment>
+        </>
       ) : (
-        <React.Fragment>
-          <AssignmentCard
-            getPConnect={getPConnect}
-            itemKey={itemKey}
-            actionButtons={actionButtons}
-            onButtonPress={buttonPress}
-          >
+        <>
+          <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
             {children}
           </AssignmentCard>
           <Snackbar
@@ -264,17 +299,12 @@ export default function Assignment(props) {
             onClose={handleSnackbarClose}
             message={snackbarMessage}
             action={
-              <IconButton
-                size='small'
-                aria-label='close'
-                color='inherit'
-                onClick={handleSnackbarClose}
-              >
+              <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
                 <CloseIcon fontSize='small' />
               </IconButton>
             }
           />
-        </React.Fragment>
+        </>
       )}
     </div>
   );
@@ -303,18 +333,3 @@ export default function Assignment(props) {
 //         <lit-toast></lit-toast>
 //     </div>`}
 // `;
-
-Assignment.propTypes = {
-  children: PropTypes.node.isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  itemKey: PropTypes.string,
-  isInModal: PropTypes.bool
-  // actionButtons: PropTypes.object
-  // buildName: PropTypes.string
-};
-
-Assignment.defaultProps = {
-  itemKey: null,
-  isInModal: false
-  // buildName: null
-};

package/lib/infra/Assignment/index.tsx

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

package/lib/infra/AssignmentCard/AssignmentCard.tsx

@@ -1,15 +1,24 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import { PropsWithChildren, useEffect, useState } from 'react';
 
-import ActionButtons from "@pega/react-sdk-components/lib/components/infra/ActionButtons";
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-export default function AssignmentCard(props) {
-  const { children, actionButtons, onButtonPress} = props;
+interface AssignmentCardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  actionButtons: any;
+  onButtonPress: any;
+}
+
+export default function AssignmentCard(props: PropsWithChildren<AssignmentCardProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ActionButtons = getComponentFromMap('ActionButtons');
+
+  const { children, actionButtons, onButtonPress } = props;
 
   const [arMainButtons, setArMainButtons] = useState([]);
   const [arSecondaryButtons, setArSecondaryButtons] = useState([]);
 
-  useEffect( ()=> {
+  useEffect(() => {
     if (actionButtons) {
       setArMainButtons(actionButtons.main);
       setArSecondaryButtons(actionButtons.secondary);
@@ -23,25 +32,9 @@ export default function AssignmentCard(props) {
   return (
     <>
       {children}
-      {
-        arMainButtons && arSecondaryButtons && <ActionButtons arMainButtons={arMainButtons} arSecondaryButtons={arSecondaryButtons} onButtonPress={buttonPress}></ActionButtons>
-      }
+      {arMainButtons && arSecondaryButtons && (
+        <ActionButtons arMainButtons={arMainButtons} arSecondaryButtons={arSecondaryButtons} onButtonPress={buttonPress} />
+      )}
     </>
-  )
+  );
 }
-
-AssignmentCard.propTypes = {
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line react/no-unused-prop-types
-  getPConnect: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/no-unused-prop-types
-  itemKey: PropTypes.string,
-  actionButtons: PropTypes.object,
-  onButtonPress: PropTypes.func
-  // buildName: PropTypes.string
-};
-
-AssignmentCard.defaultProps = {
-  itemKey: null,
-  // buildName: null
-};

package/lib/infra/AssignmentCard/index.tsx

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