@pega/react-sdk-overrides 24.2.11 → 25.1.11

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

@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { createElement, useContext, useEffect, useState } from 'react';
 import { Box, CircularProgress } from '@mui/material';
 
 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';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { configureBrowserBookmark } from '@pega/react-sdk-components/lib/components/infra/Containers/container-helpers';
 
 interface ViewContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -15,14 +17,10 @@ interface ViewContainerProps extends PConnProps {
   limit?: number;
 }
 
-// ViewContainer can emit View
-// import View from '../View';
-
-//
-// 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.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 export default function ViewContainer(props: ViewContainerProps) {
   // const { getPConnect, children, routingInfo, name } = props;
@@ -131,10 +129,7 @@ export default function ViewContainer(props: ViewContainerProps) {
 
     if (!displayOnlyFA) {
       // configureForBrowserBookmark not applicable in Embedded mode
-      PCore.configureForBrowserBookmark({
-        ...objectForAddContainer,
-        defaultViewLabel
-      });
+      configureBrowserBookmark(pConn);
     }
   }, []);
 

package/lib/infra/Containers/container-helpers.ts

@@ -1,6 +1,52 @@
-// 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);
 };
+
+export const configureBrowserBookmark = pConnect => {
+  const context = pConnect.getContextName();
+  const containerName = pConnect.getContainerName();
+  const envInfo = PCore.getEnvironmentInfo();
+  const { APP } = PCore.getConstants();
+
+  const navPages = pConnect.getValue('pyPortal.pyPrimaryNavPages');
+  let ruleName = '';
+  let className = '';
+  let defaultViewLabel = '';
+
+  const isNextGenLandingPageRouting = (envInfo?.environmentInfoObject as any)?.pyExecutionRuntimeName === (APP as any).INFINITY_RUNTIME;
+
+  if (Array.isArray(navPages) && navPages.length > 0) {
+    const firstNavPage = navPages[0];
+    const nestedNavPage = firstNavPage.NavigationPages?.[0];
+
+    if (isNextGenLandingPageRouting) {
+      if (nestedNavPage?.pyRuleName) {
+        ruleName = nestedNavPage.pyRuleName;
+        className = nestedNavPage.pyClassName || '';
+      } else if (firstNavPage?.pyRuleName) {
+        ruleName = firstNavPage.pyRuleName;
+        className = firstNavPage.pyClassName || '';
+      } else if (nestedNavPage?.pyLabel) {
+        defaultViewLabel = nestedNavPage.pyLabel;
+      } else if (firstNavPage?.pyLabel) {
+        defaultViewLabel = firstNavPage.pyLabel;
+      }
+    } else if (nestedNavPage?.pyLabel) {
+      defaultViewLabel = nestedNavPage.pyLabel;
+    } else if (firstNavPage?.pyLabel) {
+      defaultViewLabel = firstNavPage.pyLabel;
+    }
+  }
+
+  PCore.configureForBrowserBookmark({
+    context,
+    containerName,
+    acName: containerName,
+    semanticURL: '',
+    defaultViewLabel,
+    ruleName,
+    className
+  });
+};

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -1,12 +1,10 @@
-/* eslint-disable @typescript-eslint/no-shadow */
-import { forwardRef, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { forwardRef, type PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { TextField } from '@mui/material';
-import { v4 as uuidv4 } from 'uuid';
 import { debounce } from 'throttle-debounce';
 import DatePicker from 'react-datepicker';
 
 import { createFilter, combineFilters, getFormattedDate, getFilterExpression } from './filterUtils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
@@ -20,7 +18,7 @@ interface DashboardFilterProps extends PConnProps {
 
 export default function DashboardFilter(props: PropsWithChildren<DashboardFilterProps>) {
   const { children, name, filterProp, type = '', metadata = null, getPConnect } = props;
-  const { current: filterId } = useRef(uuidv4());
+  const { current: filterId } = useRef(crypto.randomUUID());
 
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
@@ -110,7 +108,6 @@ export default function DashboardFilter(props: PropsWithChildren<DashboardFilter
 
   const label = metadata.config.label.substring(3);
 
-  // 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}

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable prefer-template */
 /** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
 
-import { Grid, Link } from '@mui/material';
+import { Grid2, Link } from '@mui/material';
 
 import DashboardFilter from './DashboardFilter';
 
@@ -77,7 +76,7 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
   const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
   if (filterComponents && filterComponents.length > 0) {
     filterComponents.push(
-      <Grid style={{ display: 'flex', alignItems: 'center' }}>
+      <Grid2 style={{ display: 'flex', alignItems: 'center' }}>
         <Link
           style={{ cursor: 'pointer' }}
           onClick={() => {
@@ -87,7 +86,7 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
         >
           Clear All
         </Link>
-      </Grid>
+      </Grid2>
     );
   }
   return filterComponents;

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -4,7 +4,7 @@ import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DeferLoadProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -13,13 +13,13 @@ interface DeferLoadProps extends PConnProps {
   isTab: boolean;
   deferLoadId: string;
   lastUpdateCaseTime: any;
+  template?: string;
 }
 
-//
-// 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.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -35,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function DeferLoad(props: DeferLoadProps) {
-  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime } = props;
+  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime, template } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
   const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
@@ -75,7 +75,7 @@ export default function DeferLoad(props: DeferLoadProps) {
     updateData: isContainerPreview
   });
 
-  const onResponse = data => {
+  const onResponse = (data: any, isEditable = false) => {
     setLoading(false);
     if (deferLoadId) {
       PCore.getDeferLoadManager().start(
@@ -92,11 +92,16 @@ export default function DeferLoad(props: DeferLoadProps) {
         meta: data,
         options: {
           context: pConnect.getContextName(),
-          pageReference: pConnect.getPageReference()
+          pageReference: pConnect.getPageReference(),
+          target: pConnect.getTarget(),
+          hasForm: true,
+          viewName: (pConnect as any).viewName
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+      if (!isEditable) {
+        configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+      }
       setContent(createElement(createPConnectComponent(), configObject));
       if (deferLoadId) {
         PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
@@ -115,14 +120,13 @@ export default function DeferLoad(props: DeferLoadProps) {
           .getActionsApi()
           .showData(name, dataContext, dataContextParameters, {
             skipSemanticUrl: true,
-            // @ts-ignore
+            // @ts-expect-error
             isDeferLoaded: true
           })
           .then(data => {
             onResponse(data);
           });
       } else {
-        // eslint-disable-next-line no-console
         console.error('Cannot load the defer loaded view without container information');
       }
     } else if (resourceType === PAGE) {
@@ -133,6 +137,16 @@ export default function DeferLoad(props: DeferLoadProps) {
         .then(data => {
           onResponse(data);
         });
+    } else if (template === 'HierarchicalForm') {
+      const root = {
+        config: {
+          context: pConnect.getPageReference(),
+          name,
+          type: 'view'
+        },
+        type: 'reference'
+      };
+      onResponse(root, true);
     } else {
       getPConnect()
         .getActionsApi()
@@ -141,7 +155,6 @@ export default function DeferLoad(props: DeferLoadProps) {
           onResponse(data.root);
         })
         .catch(error => {
-          // eslint-disable-next-line no-console
           console.log(`deferload: ${error}`);
         });
     }

package/lib/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ErrorBoundaryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +23,6 @@ export default function ErrorBoundary(props: ErrorBoundaryProps) {
   const pConn = getPConnect();
 
   if (!isInternalError) {
-    // eslint-disable-next-line no-console
     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)}
@@ -37,7 +36,6 @@ export default function ErrorBoundary(props: ErrorBoundaryProps) {
 
   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;
   }

package/lib/infra/MultiStep/MultiStep.css

@@ -17,7 +17,7 @@
 
 .psdk-current-svg-icon {
   width: 1rem;
-  filter: var(--app-primary-color-filter);
+  filter: var(--svg-color);
 }
 
 .psdk-not-current-svg-icon {
@@ -40,7 +40,7 @@ mat-horizontal-stepper {
 
 .psdk-sub-step-not-current {
   padding-left: 0.625rem;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
 }
 
 .psdk-flow-container-top {
@@ -79,36 +79,37 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: #fff;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
 }
 
+.success .psdk-vertical-step-icon {
+  background-color: var(--stepper-completed-bg-color);
+  color: var(--app-text-color);
+}
+
+.future .psdk-vertical-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-vertical-step-icon {
+  background-color: var(--app-primary-color);
+  color: var(--app-text-color);
+  flex-shrink: 0;
+}
+
 .psdk-vertical-step-icon-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
-}
-
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
-  background-color: var(--app-primary-color);
-  color: #fff;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
+.current .psdk-vertical-step-label {
+  color: var(--text-primary-color);
 }
 
 .psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-neutral-color);
 }
 
 .psdk-horizontal-stepper {
@@ -162,33 +155,39 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
-  overflow: hidden;
   outline: none;
   cursor: pointer;
   position: relative;
   box-sizing: content-box;
   display: flex;
   height: 72px;
-  overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: #fff;
+  color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
+}
+
+.future .psdk-horizontal-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -199,45 +198,24 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: #fff;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
+  color: var(--text-secondary-color);
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
-.psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
+.current .psdk-horizontal-step-label {
+  color: var(--text-primary-color);
+  margin-left: 8px;
 }
 
-.psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+.flex-auto {
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
+}
+
+.psdk-horizontal-step-line {
+  border-top: 1px solid var(--app-neutral-color);
   min-width: 32px;
+  margin: 0px 8px;
 }

package/lib/infra/MultiStep/MultiStep.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './MultiStep.css';
 
@@ -27,51 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
   }
 
-  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-
-  function _getVIconClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-icon-selected';
-    }
-
-    return 'psdk-vertical-step-icon';
-  }
-
-  function _getVLabelClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-label-selected';
-    }
-
-    return 'psdk-vertical-step-label';
-  }
-
   function _getVBodyClass(index: number): string {
-    if (index < arNavigationSteps.length - 1) {
-      return 'psdk-vertical-step-body psdk-vertical-step-line';
-    }
+    const baseClass = 'psdk-vertical-step-body';
+    const isNotLastStep = index < arNavigationSteps.length - 1;
 
-    return 'psdk-vertical-step-body';
+    return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
   }
 
-  function _getHIconClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-icon-selected';
-    }
-
-    return 'psdk-horizontal-step-icon';
-  }
+  function _getAutoFlexClass(currentStep): string {
+    const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
+    const totalSteps = arNavigationSteps.length;
+    const lastStep = arNavigationSteps[totalSteps - 1];
 
-  function _getHLabelClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-label-selected';
-    }
+    // Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
+    const isCurrentStepActive = currentStep.visited_status === 'current';
+    const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
 
-    return 'psdk-horizontal-step-label';
+    return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
   }
 
-  function _showHLine(index: number): boolean {
-    return index < arNavigationSteps.length - 1;
+  function isLastStep(index: number): boolean {
+    return index === arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -86,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             return (
               <React.Fragment key={mainStep.actionID}>
                 <div className='psdk-vertical-step'>
-                  <div className='psdk-vertical-step-header'>
-                    <div className={_getVIconClass(mainStep.visited_status)}>
+                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                    <div className={`psdk-vertical-step-icon`}>
                       <div className='psdk-vertical-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   <div className={_getVBodyClass(index)}>
                     {mainStep?.steps && (
@@ -122,9 +98,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </ul>
                     )}
                     {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                        {children}
-                      </AssignmentCard>
+                      <div style={{ paddingLeft: 20 }}>
+                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                          {children}
+                        </AssignmentCard>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -138,19 +116,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             {arNavigationSteps.map((mainStep, index) => {
               return (
                 <React.Fragment key={mainStep.actionID}>
-                  <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep)}>
+                  <div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
+                    <div className='psdk-horizontal-step-icon'>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep)}>
-                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
-                        {mainStep.name}
-                      </div>
-                    </div>
+                    <div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
-                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                  {!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
                 </React.Fragment>
               );
             })}

package/lib/infra/NavBar/NavBar.css

@@ -154,7 +154,7 @@
   text-align: center;
   display: inline-flex;
   background: var(--app-neutral-color);
-  color: white;
+  color: var(--app-text-color);
   font-weight: normal;
   font-size: 1rem;
 }