@pega/react-sdk-overrides 0.25.2 → 0.25.3

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';
@@ -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 });
 
@@ -104,7 +102,6 @@ export const FlowContainer = (props: FlowContainerProps) => {
   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;

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

@@ -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

@@ -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)) {
@@ -216,7 +216,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()}`,

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { createElement, useContext, useEffect, useState } from 'react';
 import { Box, CircularProgress } from '@mui/material';
 
@@ -5,6 +6,7 @@ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 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,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-shadow */
 import { forwardRef, type PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { TextField } from '@mui/material';
 import { debounce } from 'throttle-debounce';
@@ -109,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

@@ -115,14 +115,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) {
@@ -141,7 +140,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

@@ -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 {
@@ -80,7 +80,7 @@ mat-horizontal-stepper {
 .psdk-vertical-step-icon {
   margin-right: 12px;
   background-color: var(--app-neutral-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -93,13 +93,13 @@ mat-horizontal-stepper {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
+  color: var(--app-text-color);
 }
 
 .psdk-vertical-step-icon-selected {
   margin-right: 12px;
   background-color: var(--app-primary-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -108,7 +108,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -180,7 +180,7 @@ mat-horizontal-stepper {
 
 .psdk-horizontal-step-icon {
   background-color: var(--app-neutral-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -201,7 +201,7 @@ mat-horizontal-stepper {
 
 .psdk-horizontal-step-icon-selected {
   background-color: var(--app-primary-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;

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;
 }

package/lib/infra/NavBar/NavBar.tsx

@@ -42,7 +42,7 @@ import './NavBar.css';
 
 interface NavBarProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  // eslint-disable-next-line react/no-unused-prop-types
+
   appName?: string;
   pages?: any[];
   caseTypes: any[];
@@ -93,7 +93,8 @@ const useStyles = makeStyles(theme => ({
   },
   appListLogo: {
     marginRight: theme.spacing(2),
-    width: '3.6rem'
+    width: '3.6rem',
+    filter: 'var(--svg-color)'
   },
   appListIcon: {
     color: theme.palette.getContrastText(theme.palette.primary.light)
@@ -145,7 +146,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .showPage(pyRuleName, pyClassName)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('showPage completed', localeCategory)}`);
       });
   }
@@ -161,7 +161,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .createWork(sCaseType, actionInfo)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('createWork completed', localeCategory)}`);
       });
   }

package/lib/infra/Reference/Reference.tsx

@@ -12,8 +12,7 @@ export default function Reference(props: ReferenceProps) {
   const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
 
   const pConnect = getPConnect();
-  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
-  const referenceConfig = { ...pConnect.getComponentConfig() } || {};
+  const referenceConfig = { ...pConnect.getComponentConfig() };
 
   delete referenceConfig?.name;
   delete referenceConfig?.type;
@@ -34,7 +33,7 @@ export default function Reference(props: ReferenceProps) {
     }
   };
 
-  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  // @ts-expect-error - Argument of type 'null' is not assignable to parameter of type 'string'.
   const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
     pageReference: context && context.startsWith('@CLASS') ? '' : context
   });

package/lib/infra/RootContainer/RootContainer.tsx

@@ -196,7 +196,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     );
   }
   if (renderingMode === 'noPortal') {
-    // eslint-disable-next-line no-console
     console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
 
     const theChildren = pConn.getChildren() as any[];

package/lib/template/AdvancedSearch/AdvancedSearch.tsx

@@ -42,7 +42,6 @@ export default function AdvancedSearch(props) {
   const [firstChildMeta] = rawViewMetadata.children;
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  // @ts-ignore
   const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
 
   const editableFieldComp = firstChildPConnect().createComponent({

package/lib/template/AdvancedSearch/SearchGroup/persistUtils.ts

@@ -1,16 +1,10 @@
-const SKIP_CACHE_KEY = '';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
-export function getMappedKey(key) {
-  const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
-  if (!mappedKey) {
-    return key;
-  }
-  return mappedKey;
-}
+const SKIP_CACHE_KEY = '';
 
 const getComponentStateKey = (getPConnect, propertyName: string) => {
   const pConnect = getPConnect();
-  const caseID = `.${getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
+  const caseID = `.${Utils.getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
   const resolvedCaseID = pConnect.getValue(caseID);
 
   if (!resolvedCaseID) {

package/lib/template/AdvancedSearch/SearchGroups/SearchGroups.tsx

@@ -1,5 +1,5 @@
 import React, { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Grid, Select, MenuItem, Box } from '@mui/material';
+import { Button, Grid2, Select, MenuItem, Box } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import TemplateContext from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/TemplateContext';
@@ -173,7 +173,7 @@ export default function SearchGroups(props) {
   useCacheWhenListViewReady(cache, viewName, useCache, getFilterData, searchSelectCacheKey);
 
   const searchDropdown = groups.length > 1 && (
-    <Grid container spacing={2}>
+    <Grid2 container spacing={2}>
       <Select value={activeGroupId} onChange={e => setActiveGroupId(e.target.value)} ref={searchByRef} fullWidth>
         {groups.map(group => (
           <MenuItem key={group.config.id} value={group.config.id}>
@@ -181,7 +181,7 @@ export default function SearchGroups(props) {
           </MenuItem>
         ))}
       </Select>
-    </Grid>
+    </Grid2>
   );
 
   const actionButtons = (
@@ -237,7 +237,6 @@ export default function SearchGroups(props) {
   return (
     <Box display='flex' flexDirection='column' gap={2}>
       {childrenToRender.map((child, index) => (
-        // eslint-disable-next-line react/no-array-index-key
         <React.Fragment key={index}>{child}</React.Fragment>
       ))}
     </Box>

package/lib/template/AdvancedSearch/SearchGroups/hooks.ts

@@ -9,7 +9,7 @@ const listViewConstants = {
  * This hook registers a callback for the whenever list view component is ready
  * then makes a call to get the data using the search fields pre-filled with cache data.
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function useCacheWhenListViewReady(
   cache: { searchFields: unknown },
   viewName: string,

package/lib/template/AppShell/AppShell.css

@@ -22,7 +22,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: whitesmoke;
+  background-color: 'var(--app-background-color)';
   position: fixed;
   z-index: 999;
   top: 0rem;

package/lib/template/AppShell/AppShell.tsx

@@ -29,9 +29,7 @@ interface AppShellProps extends PConnProps {
 }
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex'
-  },
+  root: {},
   content: {
     flexGrow: 1,
     height: '100vh',
@@ -117,7 +115,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   }, []);
 
   useEffect(() => {
-    // @ts-ignore
+    // @ts-expect-error
     const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
     if (caseTypesAvailableToCreateDP) {
       const portalID = pConn.getValue('.pyOwner');
@@ -159,7 +157,6 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           setFullIconURL(data);
         })
         .catch(() => {
-          // eslint-disable-next-line no-console
           console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
@@ -213,7 +210,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
 
   if (portalTemplate === 'wss') {
     return (
-      <div id='AppShell'>
+      <div id='AppShell' className={classes.root}>
         <WssNavBar
           portalName={portalName}
           imageSrc={iconURL}
@@ -239,9 +236,8 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   }
 
   return (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
     <NavContext.Provider value={{ open, setOpen }}>
-      <div id='AppShell' className={classes.root}>
+      <div id='AppShell' className={classes.root} style={{ display: 'flex' }}>
         <NavBar
           getPConnect={getPConnect}
           pConn={getPConnect()}

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -30,7 +30,6 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   let arPrimaryFields: any[] = [];
   let arSecondaryFields: any[] = [];
 
-  /* eslint-disable @typescript-eslint/no-shadow */
   function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
     const { config, children } = pConnectMeta;
     const pConnect = getPConnect();