@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -1,29 +1,25 @@
-import React from "react";
 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?: Array<any>,
-  arSecondaryButtons?: Array<any>,
-  onButtonPress: any
+  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: ActionButtonsProps) {
   const { arMainButtons = [], arSecondaryButtons = [], onButtonPress } = props;
   const classes = useStyles();
@@ -31,35 +27,48 @@ export default function ActionButtons(props: ActionButtonsProps) {
   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")}} >{localizedVal(sButton.name, localeCategory)}</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")}} >{localizedVal(mButton.name, localeCategory)}</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>
-
-  )
+    </>
+  );
 }

package/lib/infra/ActionButtons/index.tsx

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

package/lib/infra/Assignment/Assignment.tsx

@@ -1,29 +1,25 @@
-import React, { useState, useEffect } from 'react';
+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';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-// import type { PConnProps } from '../../../types/PConnProps';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-// Can't use AssignmentProps until the following are NOT private
-//  getCaseInfo().isAssignmentInCreateStage()
-//  getCaseInfo().isLocalAction()
-// interface AssignmentProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   children: Array<any>,
-//   itemKey: string,
-//   isInModal: boolean,
-//   banners: Array<any>
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   actionButtons: Array<any>,
-// }
+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 /* : AssignmentProps */) {
+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");
+  const AssignmentCard = getComponentFromMap('AssignmentCard');
+  const MultiStep = getComponentFromMap('MultiStep');
 
   const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
   const thePConn = getPConnect();
@@ -31,8 +27,8 @@ export default function Assignment(props /* : AssignmentProps */) {
   const [bHasNavigation, setHasNavigation] = useState(false);
   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;
@@ -50,18 +46,14 @@ export default function Assignment(props /* : AssignmentProps */) {
   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';
@@ -78,16 +70,29 @@ export default function Assignment(props /* : AssignmentProps */) {
     return arIndicies;
   }
 
-  useEffect(() => {
-    if (children && children.length > 0) {
-      // debugger;
+  function getStepsInfo(steps, formedSteps: any = []) {
+    steps.forEach(step => {
+      if (step.name) {
+        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+      }
+      if (step.steps) {
+        formedSteps = getStepsInfo(step.steps, formedSteps);
+      } else {
+        formedSteps.push(step);
+      }
+    });
+    return formedSteps;
+  }
 
-      const oWorkItem = children[0].props.getPConnect();
+  useEffect(() => {
+    if (children) {
+      const firstChild = Array.isArray(children) ? children[0] : children;
+      const oWorkItem = firstChild.props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
-      const oData = thePConn.getDataObject('');  // 1st arg empty string until typedefs allow it to be optional
+      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"];
+        const oCaseInfo = oData.caseInfo;
 
         if (oCaseInfo && oCaseInfo.actionButtons) {
           setActionButtons(oCaseInfo.actionButtons);
@@ -97,28 +102,23 @@ export default function Assignment(props /* : AssignmentProps */) {
           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);
           }
-          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)
-          );
+
+          if (oCaseInfo?.navigation?.steps) {
+            const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
+            const formedSteps = getStepsInfo(steps);
+            setArNavigationSteps(formedSteps);
+          }
+
+          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
         }
       }
     }
@@ -141,10 +141,7 @@ export default function Assignment(props /* : AssignmentProps */) {
 
   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);
     });
   }
 
@@ -170,9 +167,7 @@ export default function Assignment(props /* : AssignmentProps */) {
 
           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(() => {
@@ -186,11 +181,12 @@ export default function Assignment(props /* : AssignmentProps */) {
           // 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, ''));// 2nd arg empty string until typedefs allow it to be optional
+            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
           if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
             const cancelPromise = cancelCreateStageAssignment(itemKey);
 
@@ -239,11 +235,50 @@ export default function Assignment(props /* : AssignmentProps */) {
     }
   }
 
+  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}
@@ -261,25 +296,15 @@ export default function Assignment(props /* : AssignmentProps */) {
             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
@@ -288,17 +313,12 @@ export default function Assignment(props /* : AssignmentProps */) {
             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>
   );

package/lib/infra/Assignment/index.tsx

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

package/lib/infra/AssignmentCard/AssignmentCard.tsx

@@ -1,27 +1,24 @@
-import React, { useState, useEffect } from "react";
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PropsWithChildren, useEffect, useState } from 'react';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 interface AssignmentCardProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  actionButtons: any,
-  onButtonPress: any,
-  // eslint-disable-next-line react/no-unused-prop-types
-  itemKey?: string
+  actionButtons: any;
+  onButtonPress: any;
 }
 
-
-export default function AssignmentCard(props: AssignmentCardProps) {
+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 ActionButtons = getComponentFromMap('ActionButtons');
 
-  const { children, actionButtons, onButtonPress} = props;
+  const { children, actionButtons, onButtonPress } = props;
 
   const [arMainButtons, setArMainButtons] = useState([]);
   const [arSecondaryButtons, setArSecondaryButtons] = useState([]);
 
-  useEffect( ()=> {
+  useEffect(() => {
     if (actionButtons) {
       setArMainButtons(actionButtons.main);
       setArSecondaryButtons(actionButtons.secondary);
@@ -35,9 +32,9 @@ export default function AssignmentCard(props: AssignmentCardProps) {
   return (
     <>
       {children}
-      {
-        arMainButtons && arSecondaryButtons && <ActionButtons arMainButtons={arMainButtons} arSecondaryButtons={arSecondaryButtons} onButtonPress={buttonPress}></ActionButtons>
-      }
+      {arMainButtons && arSecondaryButtons && (
+        <ActionButtons arMainButtons={arMainButtons} arSecondaryButtons={arSecondaryButtons} onButtonPress={buttonPress} />
+      )}
     </>
-  )
+  );
 }

package/lib/infra/AssignmentCard/index.tsx

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