@pega/react-sdk-overrides 24.2.11 → 25.1.10

package/lib/helpers/utils.ts

@@ -48,7 +48,6 @@ export class Utils {
           // eslint-disable-next-line no-case-declarations
           const dataPage = configProps.datasource;
           if (typeof dataPage === 'string' && dataObject[dataPage]) {
-            // eslint-disable-next-line no-alert
             alert('need to handle data page');
           } else {
             let listSourceItems = configProps.listOutput;
@@ -337,6 +336,14 @@ export class Utils {
   static isObject(objValue) {
     return objValue && typeof objValue === 'object' && objValue.constructor === Object;
   }
+
+  static getMappedKey(key) {
+    const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
+    if (!mappedKey) {
+      return key;
+    }
+    return mappedKey;
+  }
 }
 
 export default Utils;

package/lib/helpers/versionHelpers.ts

@@ -10,6 +10,5 @@ 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,6 +1,6 @@
 import makeStyles from '@mui/styles/makeStyles';
 import Button from '@mui/material/Button';
-import { Grid, Divider } from '@mui/material';
+import { Grid2, Divider } from '@mui/material';
 
 // ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
 interface ActionButtonsProps {
@@ -10,13 +10,18 @@ interface ActionButtonsProps {
   onButtonPress: any;
 }
 
-const useStyles = makeStyles((/* theme */) => ({
-  button: {
-    padding: '0px 5px'
-  },
+const useStyles = makeStyles(theme => ({
   divider: {
     marginTop: '10px',
     marginBottom: '10px'
+  },
+  secondaryButton: {
+    backgroundColor: theme.actionButtons.secondary.backgroundColor,
+    color: theme.actionButtons.secondary.color
+  },
+  primaryButton: {
+    backgroundColor: theme.actionButtons.primary.backgroundColor,
+    color: theme.actionButtons.primary.color
   }
 }));
 
@@ -33,42 +38,44 @@ export default function ActionButtons(props: ActionButtonsProps) {
   return (
     <>
       <Divider className={classes.divider} />
-      <Grid container spacing={4} justifyContent='space-between'>
-        <Grid item>
-          <Grid container spacing={1}>
+      <Grid2 container spacing={4} justifyContent='space-between'>
+        <Grid2>
+          <Grid2 container spacing={1}>
             {arSecondaryButtons.map(sButton => (
-              <Grid item key={sButton.name}>
+              <Grid2 key={sButton.name}>
                 <Button
-                  variant='contained'
+                  className={classes.secondaryButton}
                   color='secondary'
+                  variant='contained'
                   onClick={() => {
                     _onButtonPress(sButton.jsAction, 'secondary');
                   }}
                 >
                   {localizedVal(sButton.name, localeCategory)}
                 </Button>
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
-        </Grid>
-        <Grid item>
-          <Grid container spacing={1}>
+          </Grid2>
+        </Grid2>
+        <Grid2>
+          <Grid2 container spacing={1}>
             {arMainButtons.map(mButton => (
-              <Grid item key={mButton.name}>
+              <Grid2 key={mButton.name}>
                 <Button
-                  variant='contained'
+                  className={classes.primaryButton}
                   color='primary'
+                  variant='contained'
                   onClick={() => {
                     _onButtonPress(mButton.jsAction, 'primary');
                   }}
                 >
                   {localizedVal(mButton.name, localeCategory)}
                 </Button>
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
-        </Grid>
-      </Grid>
+          </Grid2>
+        </Grid2>
+      </Grid2>
     </>
   );
 }

package/lib/infra/Assignment/Assignment.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
 import Snackbar from '@mui/material/Snackbar';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
@@ -6,14 +6,14 @@ import CloseIcon from '@mui/icons-material/Close';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { useFocusFirstField, useScrolltoTop } from '@pega/react-sdk-components/lib/hooks';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { 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[];
 }
 
@@ -33,8 +33,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   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);
@@ -76,7 +76,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   function getStepsInfo(steps, formedSteps: any = []) {
     steps.forEach(step => {
       if (step.name) {
-        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+        step.name = localizationService.getLocalizedText(step.name);
       }
       if (step.steps) {
         formedSteps = getStepsInfo(step.steps, formedSteps);
@@ -97,43 +97,50 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
       const oWorkItem = firstChild.props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
       const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
+      const caseInfo = oData?.caseInfo;
+      if (!oWorkData?.caseInfo || oWorkData.caseInfo.assignments === null || !caseInfo) {
+        return;
+      }
 
-      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData?.caseInfo;
+      // Set action buttons
+      if (caseInfo.actionButtons) {
+        setActionButtons(caseInfo.actionButtons);
+      }
 
-        if (oCaseInfo && oCaseInfo.actionButtons) {
-          setActionButtons(oCaseInfo.actionButtons);
-        }
+      // Handle navigation setup
+      const navigation = caseInfo.navigation;
+      if (!navigation) {
+        setHasNavigation(false);
+        return;
+      }
 
-        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
-          setHasNavigation(true);
+      const isStandardTemplate = navigation.template?.toLowerCase() === 'standard';
+      const hasSingleStep = navigation.steps?.length === 1;
+      const shouldHideNavigation = isStandardTemplate || hasSingleStep;
 
-          if (
-            (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') {
-            setIsVertical(true);
-          } else {
-            setIsVertical(false);
-          }
+      setHasNavigation(!shouldHideNavigation);
 
-          if (oCaseInfo?.navigation?.steps) {
-            const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
-            const formedSteps = getStepsInfo(steps);
-            setArNavigationSteps(formedSteps);
-          }
+      if (shouldHideNavigation) {
+        return;
+      }
 
-          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
-        }
+      // set vertical navigation
+      const isVerticalTemplate = navigation.template?.toLowerCase() === 'vertical';
+      setIsVertical(isVerticalTemplate);
+
+      if (navigation.steps) {
+        const steps = JSON.parse(JSON.stringify(navigation.steps));
+        const formedSteps = getStepsInfo(steps);
+        setArNavigationSteps(formedSteps);
       }
+
+      setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
     }
   }, [children]);
 
   function showToast(message: string) {
     const theMessage = `Assignment: ${message}`;
-    // eslint-disable-next-line no-console
+
     console.error(theMessage);
     setSnackbarMessage(message);
     setShowSnackbar(true);

package/lib/infra/AssignmentCard/AssignmentCard.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { type PropsWithChildren, useEffect, useState } from 'react';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { 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 {

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable no-nested-ternary */
-
 import { useState, useEffect, useContext } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import { Alert, Card, CardHeader, Avatar, Typography } from '@mui/material';
@@ -11,7 +9,7 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import { withSimpleViewContainerRenderer } from '@pega/react-sdk-components/lib/components/infra/Containers/SimpleView/SimpleView';
 
 import { addContainerItem, getToDoAssignments, showBanner, hasContainerItems } from './helpers';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
@@ -58,7 +56,6 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const AlertBanner = getComponentFromMap('AlertBanner');
 
   const pCoreConstants = PCore.getConstants();
-  const PCoreVersion = PCore.getPCoreVersion();
   const { TODO } = pCoreConstants;
   const todo_headerText = 'To do';
 
@@ -78,6 +75,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const getPConnect = getPConnectOfActiveContainerItem || getPConnectOfFlowContainer;
   const thePConn = getPConnect();
   const containerName = assignmentNames && assignmentNames.length > 0 ? assignmentNames[0] : '';
+  const bShowBanner = showBanner(getPConnect);
   // const [init, setInit] = useState(true);
   // const [fcState, setFCState] = useState({ hasError: false });
 
@@ -98,13 +96,12 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Messages';
 
-  const key = `${thePConn.getCaseInfo().getClassName()}!CASE!${thePConn.getCaseInfo().getName()}`.toUpperCase();
+  const key = getPConnect()?.getCaseLocaleReference();
   const classes = useStyles();
 
   function getBuildName(): string {
     const ourPConn = getPConnect();
 
-    // let { getPConnect, name } = this.pConn$.pConn;
     const context = ourPConn.getContextName();
     let viewContainerName = ourPConn.getContainerName();
 
@@ -113,7 +110,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   }
 
   function getTodoVisibility() {
-    const caseViewMode = getPConnect().getValue('context_data.caseViewMode', ''); // 2nd arg empty string until typedefs properly allow optional
+    const caseViewMode = getPConnect().getValue('context_data.caseViewMode');
     if (caseViewMode && caseViewMode === 'review') {
       return true;
     }
@@ -123,16 +120,6 @@ export const FlowContainer = (props: FlowContainerProps) => {
   function initComponent() {
     const ourPConn = getPConnect();
 
-    // debugging/investigation help
-    // console.log(`${ourPConn.getComponentName()}: children update for main draw`);
-
-    // const oData = ourPConn.getDataObject();
-
-    // const activeActionLabel = "";
-    // const child0_getPConnect = arNewChildren[0].getPConnect();
-
-    // this.templateName$ = this.configProps$["template"];
-
     // debugger;
     setShowTodo(getTodoVisibility());
 
@@ -148,7 +135,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   }, []);
 
   useEffect(() => {
-    // @ts-ignore - Property 'getMetadata' is private and only accessible within class 'C11nEnv'
+    // @ts-expect-error - Property 'getMetadata' is private and only accessible within class 'C11nEnv'
     if (isInitialized && pConnectOfFlowContainer.getMetadata().children && !hasItems) {
       // ensuring not to add container items, if container already has items
       // because during multi doc mode, we will have container items already in store
@@ -156,63 +143,6 @@ export const FlowContainer = (props: FlowContainerProps) => {
     }
   }, [isInitialized, hasItems]);
 
-  function isCaseWideLocalAction() {
-    const ourPConn = getPConnect();
-
-    const actionID = ourPConn.getValue(pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID, ''); // 2nd arg empty string until typedefs properly allow optional
-    const caseActions = ourPConn.getValue(pCoreConstants.CASE_INFO.AVAILABLEACTIONS, ''); // 2nd arg empty string until typedefs properly allow optional
-    let bCaseWideAction = false;
-    if (caseActions && actionID) {
-      const actionObj = caseActions.find(caseAction => caseAction.ID === actionID);
-      if (actionObj) {
-        bCaseWideAction = actionObj.type === 'Case';
-      }
-    }
-    return bCaseWideAction;
-  }
-
-  function hasChildCaseAssignments() {
-    const ourPConn = getPConnect();
-
-    const childCases = ourPConn.getValue(pCoreConstants.CASE_INFO.CHILD_ASSIGNMENTS, ''); // 2nd arg empty string until typedefs properly allow optional
-    // const allAssignments = [];
-    return !!(childCases && childCases.length > 0);
-  }
-
-  function hasAssignments() {
-    const ourPConn = getPConnect();
-
-    let bHasAssignments = false;
-    const assignmentsList: any[] = ourPConn.getValue(pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS, ''); // 2nd arg empty string until typedefs properly allow optional
-    const isEmbedded = window.location.href.includes('embedded');
-    let bAssignmentsForThisOperator = false;
-    // 8.7 includes assignments in Assignments List that may be assigned to
-    //  a different operator. So, see if there are any assignments for
-    //  the current operator
-    if (PCoreVersion?.includes('8.7') || isEmbedded) {
-      const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
-      for (const assignment of assignmentsList) {
-        if (assignment.assigneeInfo.ID === thisOperator) {
-          bAssignmentsForThisOperator = true;
-        }
-      }
-    } else {
-      bAssignmentsForThisOperator = true;
-    }
-    // Bail out if there isn't an assignmentsList
-    if (!assignmentsList) {
-      return bHasAssignments;
-    }
-
-    const bHasChildCaseAssignments = hasChildCaseAssignments();
-
-    if (bAssignmentsForThisOperator || bHasChildCaseAssignments || isCaseWideLocalAction()) {
-      bHasAssignments = true;
-    }
-
-    return bHasAssignments;
-  }
-
   // From SDK-WC updateSelf - so do this in useEffect that's run only when the props change...
   useEffect(() => {
     setBuildName(getBuildName());
@@ -222,29 +152,21 @@ export const FlowContainer = (props: FlowContainerProps) => {
 
     let loadingInfo: any;
     try {
-      loadingInfo = thePConn.getLoadingStatus(''); // 1st arg empty string until typedefs properly allow optional
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      loadingInfo = thePConn.getLoadingStatus();
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (ex) {
-      // eslint-disable-next-line no-console
       console.error(`${thePConn.getComponentName()}: loadingInfo catch block`);
     }
 
-    // let configProps = this.thePConn.resolveConfigProps(this.thePConn.getConfigProps());
-
-    if (!loadingInfo) {
-      // turn off spinner
-      // this.psService.sendMessage(false);
-    }
-
-    const caseViewMode = thePConn.getValue('context_data.caseViewMode', ''); // 2nd arg empty string until typedefs properly allow optional
+    const caseViewMode = thePConn.getValue('context_data.caseViewMode');
     const { CASE_INFO: CASE_CONSTS } = pCoreConstants;
     if (caseViewMode && caseViewMode === 'review') {
       setTimeout(() => {
         // updated for 8.7 - 30-Mar-2022
         const todoAssignments = getToDoAssignments(thePConn);
-        if (todoAssignments && todoAssignments.length > 0) {
-          setCaseInfoID(thePConn.getValue(CASE_CONSTS.CASE_INFO_ID, '')); // 2nd arg empty string until typedefs properly allow optional
-          setTodoDatasource({ source: todoAssignments });
-        }
+        setCaseInfoID(thePConn.getValue(CASE_CONSTS.CASE_INFO_ID));
+        setTodoDatasource({ source: todoAssignments });
         setShowTodo(true);
         setShowTodoList(false);
       }, 100);
@@ -255,11 +177,12 @@ export const FlowContainer = (props: FlowContainerProps) => {
     }
 
     // if have caseMessage show message and end
-    const theCaseMessages = localizedVal(thePConn.getValue('caseMessages', ''), localeCategory); // 2nd arg empty string until typedefs properly allow optional
+    const theCaseMessages = localizedVal(thePConn.getValue('caseMessages'), localeCategory);
+
+    const rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), itemKey);
+    const bConfirmView = rootInfo && bShowBanner;
 
-    // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
-    // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
-    if (!hasAssignments()) {
+    if (bConfirmView) {
       // Temp fix for 8.7 change: confirmationNote no longer coming through in caseMessages$.
       // So, if we get here and caseMessages$ is empty, use default value in DX API response
       setCaseMessages(theCaseMessages || localizedVal('Thank you! The next step in this case has been routed appropriately.', localeCategory));
@@ -279,8 +202,6 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const urgency = getPConnect().getCaseSummary().assignments ? getPConnect().getCaseSummary().assignments?.[0].urgency : '';
   const operatorInitials = Utils.getInitials(PCore.getEnvironmentInfo().getOperatorName() || '');
 
-  const bShowBanner = showBanner(getPConnect);
-
   const displayPageMessages = () => {
     let hasBanner = false;
     const messages = pageMessages ? pageMessages.map(msg => localizedVal(msg.message, 'Messages')) : pageMessages;
@@ -297,7 +218,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
               <CardHeader
                 id='assignment-header'
                 title={<Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>}
-                subheader={`${localizedVal('Task in', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
+                subheader={`${localizedVal('In', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
                 avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}

package/lib/infra/Containers/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import Button from '@mui/material/Button';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 const useStyles = makeStyles((/* theme */) => ({
   button: {
@@ -53,7 +53,6 @@ function ListViewActionButtons(props: ListViewActionButtonsProps) {
               closeActionsDialog();
             })
             .catch(err => {
-              // eslint-disable-next-line no-console
               console.log(err);
             })
             .finally(() => {

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -11,7 +11,7 @@ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react
 // Need to get correct implementation from component map for Assignment and CancelAlert
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ModalViewContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -43,7 +43,7 @@ function getKeyAndLatestItem(routinginfo, pConn, options) {
   if (PCore.getContainerUtils().hasContainerItems(buildName(pConn, containerName))) {
     const { accessedOrder, items } = routinginfo;
     let key;
-    // eslint-disable-next-line no-plusplus
+
     for (let i = accessedOrder.length - 1; i >= 0; i--) {
       const tempkey = accessedOrder[i];
       if ((acTertiary && items[tempkey].acTertiary) || (!acTertiary && !items[tempkey].acTertiary)) {
@@ -96,6 +96,7 @@ const useStyles = makeStyles(theme => ({
     marginBottom: theme.spacing(0)
   },
   dlgContent: {
+    paddingTop: `${theme.spacing(1)} !important`,
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(0),
@@ -130,7 +131,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
   const [cancelAlertProps, setCancelAlertProps] = useState({});
   const [isMultiRecordData, setMultiRecordData] = useState(false);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'Data Object';
+  const localeCategory = 'ModalContainer';
 
   const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
 
@@ -216,7 +217,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
       ERROR_WHILE_RENDERING,
       error => {
         // setError(true);
-        // eslint-disable-next-line no-console
+
         console.error(error);
       },
       `${ERROR_WHILE_RENDERING}-mc-${getPConnect().getContextName()}`,
@@ -254,7 +255,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         const headingValue =
           isDataObject || isMultiRecord
             ? getModalHeading(dataObjectAction)
-            : determineModalHeaderByAction(actionName, caseTypeName, ID, `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase());
+            : determineModalHeaderByAction(actionName, caseTypeName, ID, pConnect?.getCaseLocaleReference());
 
         let arChildrenAsReact: any[] = [];
 
@@ -309,7 +310,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
 
   return (
     <>
-      <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
+      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth={false}>
         <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
           {title}
         </DialogTitle>

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
@@ -131,10 +133,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}