@pega/react-sdk-overrides 0.24.4 → 0.25.1

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

@@ -0,0 +1,245 @@
+import React, { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Grid, 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';
+import componentCachePersistUtils from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/SearchGroup/persistUtils';
+
+import { getCacheInfo, isValidInput } from './utils';
+import { useCacheWhenListViewReady } from './hooks';
+
+export const initializeSearchFields = (searchFields, getPConnect, referenceListClassID, searchFieldRestoreValues = {}) => {
+  const filtersProperties = {};
+  searchFields.forEach(field => {
+    let val = '';
+    const { value, defaultValue = '' } = field.config;
+    const propPath = PCore.getAnnotationUtils().getPropertyName(value);
+
+    if (searchFieldRestoreValues[propPath]) {
+      val = searchFieldRestoreValues[propPath];
+    } else if (PCore.getAnnotationUtils().isProperty(defaultValue)) {
+      val = getPConnect().getValue(defaultValue.split(' ')[1]);
+    } else if (defaultValue.startsWith('@L')) {
+      val = defaultValue.split(' ')[1];
+    } else {
+      val = defaultValue;
+    }
+
+    filtersProperties[propPath] = val;
+
+    const valueSplit = value.split('@P ')[1]?.split('.').filter(Boolean) ?? [];
+    valueSplit.pop();
+
+    if (valueSplit.length) {
+      let path = '';
+      let currentClassID = referenceListClassID;
+      valueSplit.forEach(item => {
+        path = path.length ? `${path}.${item}` : item;
+        currentClassID = (PCore.getMetadataUtils().getPropertyMetadata(item, currentClassID) as any).pageClass;
+        if (currentClassID) {
+          filtersProperties[`${path}.classID`] = currentClassID;
+        }
+      });
+    }
+  });
+  return filtersProperties;
+};
+
+const flattenObj = obj => {
+  const result = {};
+  Object.keys(obj).forEach(key => {
+    if (!['context_data', 'pageInstructions'].includes(key)) {
+      if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+        const temp = flattenObj(obj[key]);
+        Object.keys(temp).forEach(nestedKey => {
+          result[`${key}.${nestedKey}`] = temp[nestedKey];
+        });
+      } else {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+};
+
+export default function SearchGroups(props) {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const { getPConnect, editableField, localeReference, setShowRecords, searchSelectCacheKey, cache } = props;
+  const referenceFieldName = editableField.replaceAll('.', '_');
+
+  const state: any = useRef({ searchFields: {}, activeGroupId: '' }).current;
+  const options = componentCachePersistUtils.getComponentStateOptions(getPConnect);
+
+  const { searchGroups: groups, referenceList } = getPConnect().getConfigProps();
+  const { useCache, initialActiveGroupId } = getCacheInfo(cache, groups);
+  const [activeGroupId, setActiveGroupId] = useState(initialActiveGroupId);
+  const [transientItemID, setTransientItemID] = useState<any>(null);
+  const [previousFormValues, setPreviousFormValues] = useState<any>(null);
+  const viewName = getPConnect().getCurrentView();
+
+  const rawGroupsConfig = getPConnect().getRawConfigProps().searchGroups;
+  const activeGroupIndex = groups.findIndex(group => group.config.id === activeGroupId);
+  const { children: searchFieldsChildren = [] } = activeGroupIndex !== -1 ? rawGroupsConfig[activeGroupIndex] : {};
+  const searchFields = searchFieldsChildren.map(field => ({
+    ...field,
+    config: { ...field.config, isSearchField: true }
+  }));
+
+  const searchByRef = useRef(null);
+  const searchFieldsRef = useRef(null);
+  const isValidatorField = searchFields.some(field => field.config.validator);
+  const { classID: referenceListClassID } = PCore.getMetadataUtils().getDataPageMetadata(referenceList) as any;
+
+  const initialSearchFields = useMemo(
+    () =>
+      initializeSearchFields(
+        searchFields,
+        getPConnect,
+        referenceListClassID,
+        useCache && cache.activeGroupId === activeGroupId ? cache.searchFields : {}
+      ),
+    [activeGroupId, getPConnect, cache.searchFields]
+  );
+
+  useEffect(() => {
+    if (transientItemID) {
+      const filtersWithClassID = {
+        ...initialSearchFields,
+        classID: referenceListClassID
+      };
+      // @ts-ignore
+      PCore.getContainerUtils().replaceTransientData({ transientItemID, data: filtersWithClassID });
+    }
+  }, [activeGroupId]);
+
+  useEffect(() => {
+    const filtersWithClassID = {
+      ...initialSearchFields,
+      classID: referenceListClassID
+    };
+
+    const transientId = getPConnect()
+      .getContainerManager()
+      .addTransientItem({ id: `${referenceFieldName}-${viewName}`, data: filtersWithClassID });
+    setTransientItemID(transientId);
+  }, []);
+
+  const getFilterData = useCallback(() => {
+    // @ts-ignore
+    let changes = PCore.getFormUtils().getSubmitData(transientItemID, {
+      isTransientContext: true,
+      includeDisabledFields: true
+    });
+
+    if (Object.keys(cache.searchFields ?? {}).length > 0 && Object.keys(changes).length === 1) {
+      changes = cache.searchFields;
+    }
+
+    const formValues = flattenObj(changes);
+
+    if (!PCore.isDeepEqual(previousFormValues, formValues) && PCore.getFormUtils().isFormValid(transientItemID) && isValidInput(formValues)) {
+      if (isValidatorField) {
+        // @ts-ignore
+        PCore.getMessageManager().clearContextMessages({ context: transientItemID });
+      }
+      setPreviousFormValues(formValues);
+      setShowRecords(true);
+      PCore.getPubSubUtils().publish(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, {
+        payload: formValues,
+        showRecords: true,
+        viewName
+      });
+    }
+
+    state.activeGroupId = activeGroupId;
+    state.searchFields = changes;
+    state.selectedCategory = viewName;
+
+    componentCachePersistUtils.setComponentCache({ cacheKey: searchSelectCacheKey, state, options });
+  }, [transientItemID, setShowRecords, viewName, activeGroupId, previousFormValues]);
+
+  const resetFilterData = useCallback(() => {
+    // @ts-ignore
+    PCore.getNavigationUtils().resetComponentCache(searchSelectCacheKey);
+    const resetPayload = {
+      transientItemID,
+      data: initializeSearchFields(searchFields, getPConnect, referenceListClassID),
+      options: { reset: true }
+    };
+    // @ts-ignore
+    PCore.getContainerUtils().updateTransientData(resetPayload);
+  }, [transientItemID, initialSearchFields]);
+
+  useCacheWhenListViewReady(cache, viewName, useCache, getFilterData, searchSelectCacheKey);
+
+  const searchDropdown = groups.length > 1 && (
+    <Grid 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}>
+            {group.config.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </Grid>
+  );
+
+  const actionButtons = (
+    <Box display='flex' gap={2}>
+      <Button variant='outlined' onClick={resetFilterData}>
+        {localizedVal('Reset', 'SimpleTable')}
+      </Button>
+      <Button variant='contained' onClick={getFilterData}>
+        {localizedVal('Search', 'SimpleTable')}
+      </Button>
+    </Box>
+  );
+
+  const searchFieldsViewConfig = {
+    name: 'SearchFields',
+    type: 'View',
+    config: {
+      template: 'DefaultForm',
+      NumCols: '3',
+      contextName: transientItemID,
+      readOnly: false,
+      context: transientItemID,
+      localeReference
+    },
+    children: [
+      {
+        name: 'Fields',
+        type: 'Region',
+        children: searchFields
+      }
+    ]
+  };
+
+  const searchFieldsC11nEnv = PCore.createPConnect({
+    meta: searchFieldsViewConfig,
+    options: {
+      hasForm: true,
+      contextName: transientItemID
+    }
+  });
+
+  const templateContext = useContext(TemplateContext);
+  const templateContextValue = useMemo(() => ({ ...templateContext, outerColumnCount: undefined }), []);
+
+  const searchFieldsViewComp = transientItemID ? (
+    <TemplateContext.Provider value={templateContextValue}>
+      <div ref={searchFieldsRef}>{createElement(createPConnectComponent(), { ...searchFieldsC11nEnv })}</div>
+    </TemplateContext.Provider>
+  ) : null;
+
+  const childrenToRender = [searchDropdown, searchFieldsViewComp, actionButtons];
+
+  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

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+const listViewConstants = {
+  EVENTS: {
+    LIST_VIEW_READY: 'LIST_VIEW_READY'
+  }
+};
+/**
+ * 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,
+  useCache: boolean,
+  getFilterData: (params: { isCalledFromCache: boolean }) => void,
+  searchSelectCacheKey: string
+) {
+  useEffect(() => {
+    if (Object.keys(cache.searchFields ?? {}).length > 0) {
+      PCore.getPubSubUtils().subscribe(
+        listViewConstants.EVENTS.LIST_VIEW_READY,
+        ({ viewName: viewNameFromListView }: { viewName: string }) => {
+          if (viewNameFromListView === viewName && useCache) {
+            getFilterData({ isCalledFromCache: true });
+          }
+        },
+        `${searchSelectCacheKey}-listview-ready`
+      );
+    }
+
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(listViewConstants.EVENTS.LIST_VIEW_READY, `${searchSelectCacheKey}-listview-ready`);
+    };
+  }, []);
+}

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

@@ -0,0 +1 @@
+export { default } from './SearchGroups';

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

@@ -0,0 +1,29 @@
+function isEmpty(value: any): boolean {
+  return (
+    // null or undefined
+    value === null ||
+    value === undefined ||
+    ((Array.isArray(value) || typeof value === 'string') && value.length === 0) ||
+    // is an Object and has no keys
+    (value.constructor === Object && Object.keys(value).length === 0)
+  );
+}
+
+export function getCacheInfo(
+  cache: { selectedCategory: string; activeGroupId: string; searchFields: unknown },
+  groups: { config: { id: string } }[]
+) {
+  let initialActiveGroupId = groups.length ? groups[0].config.id : '';
+
+  let useCache = false;
+  if (cache.activeGroupId && groups?.find(group => group.config.id === cache.activeGroupId)) {
+    initialActiveGroupId = cache.activeGroupId;
+    useCache = true;
+  }
+
+  return { useCache, initialActiveGroupId };
+}
+
+export function isValidInput(input: { [s: string]: unknown }) {
+  return Object.values(input).some(value => !isEmpty(value));
+}

package/lib/template/AdvancedSearch/TemplateContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+const TemplateContext = createContext({
+  depth: 0,
+  columnCount: 1,
+  outerColumnCount: undefined,
+  templateOverrideMode: undefined,
+  inheritParentLayout: undefined,
+  lastContainerItem: undefined
+});
+export default TemplateContext;

package/lib/template/AdvancedSearch/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "AdvancedSearch",
+  "label": "Advanced search",
+  "type": "Template",
+  "icon": "AdvancedSearch.svg",
+  "subtype": "SEARCH",
+  "hideTemplateEdit": true,
+  "properties": []
+}

package/lib/template/AdvancedSearch/index.tsx

@@ -0,0 +1 @@
+export { default } from './AdvancedSearch';

package/lib/template/AppShell/AppShell.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
+import makeStyles from '@mui/styles/makeStyles';
+import Avatar from '@mui/material/Avatar';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
@@ -24,6 +24,8 @@ interface AppShellProps extends PConnProps {
   portalName: string;
   portalLogo: string;
   navDisplayOptions: { alignment: string; position: string };
+  httpMessages: string[];
+  pageMessages: string[];
 }
 
 const useStyles = makeStyles(theme => ({
@@ -49,8 +51,21 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const NavBar = getComponentFromMap('NavBar');
   const WssNavBar = getComponentFromMap('WssNavBar');
+  const AlertBanner = getComponentFromMap('AlertBanner');
 
-  const { pages = [], caseTypes = [], showAppName, children = [], getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
+  const {
+    pages = [],
+    caseTypes = [],
+    showAppName,
+    children = [],
+    getPConnect,
+    httpMessages = [],
+    pageMessages = [],
+    portalTemplate,
+    portalName,
+    portalLogo,
+    navDisplayOptions
+  } = props;
 
   const [open, setOpen] = useState(true);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -58,7 +73,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   const pConn = getPConnect();
   const envInfo = PCore.getEnvironmentInfo();
   const imageKey = envInfo.getOperatorImageInsKey();
-  const userName = envInfo.getOperatorName();
+  const userName = envInfo.getOperatorName() || '';
   const currentUserInitials = Utils.getInitials(userName);
   const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
   const portalClass = pConn.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
@@ -75,9 +90,18 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [mapChildren, setMapChildren] = useState([]);
 
+  const messages = [...httpMessages, ...pageMessages];
+
+  const hasBanner = messages && messages.length ? messages.length > 0 : false;
+  let banners: any = null;
+  banners = hasBanner && (
+    <div style={{ display: 'flex', flexDirection: 'column', padding: '1em 0' }}>
+      <AlertBanner id='AppShell' variant='urgent' messages={messages} />
+    </div>
+  );
   // Initial setting of appName and mapChildren
   useEffect(() => {
-    setAppName(PCore.getEnvironmentInfo().getApplicationName());
+    setAppName(PCore.getEnvironmentInfo().getApplicationName() || '');
 
     const tempMap: any = (pConn.getChildren() as any)?.map((child: any, index) => {
       const theChildComp = child.getPConnect().getComponentName();
@@ -92,6 +116,25 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     setMapChildren(tempMap);
   }, []);
 
+  useEffect(() => {
+    // @ts-ignore
+    const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
+    if (caseTypesAvailableToCreateDP) {
+      const portalID = pConn.getValue('.pyOwner');
+      PCore.getDataPageUtils()
+        .getPageDataAsync(caseTypesAvailableToCreateDP, pConn.getContextName(), {
+          PortalName: portalID
+        })
+        .then((response: { pyCaseTypesAvailableToCreate?: any }) => {
+          if (response?.pyCaseTypesAvailableToCreate) {
+            pConn.replaceState('.pyCaseTypesAvailableToCreate', response.pyCaseTypesAvailableToCreate, {
+              skipDirtyValidation: true
+            });
+          }
+        });
+    }
+  }, []);
+
   const [iconURL, setIconURL] = useState('');
   const [fullIconURL, setFullIconURL] = useState('');
   useEffect(() => {
@@ -175,10 +218,10 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           portalName={portalName}
           imageSrc={iconURL}
           fullImageSrc={fullIconURL}
-          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          appName={localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           appInfo={{
             imageSrc: iconURL,
-            appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
+            appName: localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
             onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
           }}
           navLinks={links.filter((link, index) => {
@@ -187,7 +230,10 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           operator={getOperator()}
           navDisplayOptions={navDisplayOptions}
         />
-        <div className={classes.wsscontent}>{children}</div>
+        <div className={classes.wsscontent}>
+          {banners}
+          {children}
+        </div>
       </div>
     );
   }
@@ -199,11 +245,15 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
         <NavBar
           getPConnect={getPConnect}
           pConn={getPConnect()}
-          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          appName={localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           pages={pages}
           caseTypes={caseTypes}
         />
-        <div className={classes.content}>{children}</div>
+
+        <div className={classes.content}>
+          {banners}
+          {children}
+        </div>
       </div>
     </NavContext.Provider>
   );

package/lib/template/BannerPage/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "BannerPage",
+  "label": "Banner",
+  "description": "Banner Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "BannerPage.svg",
+  "properties": []
+}

package/lib/template/CaseView/CaseView.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/jsx-boolean-value */
 
 import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
-import { Avatar, Card, CardHeader, Divider, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
+import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
@@ -19,6 +19,7 @@ interface CaseViewProps extends PConnProps {
   header: string;
   showIconInHeader: boolean;
   caseInfo: any;
+  lastUpdateCaseTime: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -64,10 +65,10 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     showIconInHeader = true,
     caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
   } = props;
+  const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
 
   const currentCaseID = props.caseInfo.ID;
   let isComponentMounted = true;
-
   const { displayOnlyFA } = useContext<any>(StoreContext);
 
   const thePConn = getPConnect();
@@ -79,7 +80,6 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'CaseView';
   const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
-
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
@@ -169,7 +169,6 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   useEffect(() => {
     if (hasNewAttachments) {
-      // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
       PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
     }
   }, [hasNewAttachments]);
@@ -244,7 +243,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
           <Grid item xs={6}>
             {theStagesRegion}
             {theTodoRegion}
-            {deferLoadInfo.length > 0 && <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab />}
+            {deferLoadInfo.length > 0 && (
+              <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
+            )}
           </Grid>
 
           <Grid item xs={3}>

package/lib/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 
 interface CaseViewActionsMenuProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -44,7 +44,7 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }

package/lib/template/Confirmation/Confirmation.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { PropsWithChildren, useState } from 'react';
-import { Button, Card, makeStyles } from '@material-ui/core';
+import { Button, Card } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -40,7 +41,7 @@ export default function Confirmation(props: PropsWithChildren<ConfirmationProps>
   // Not using whatsNext at the moment, need to figure out the use of it
   // const whatsNext = datasource?.source;
   // const items = whatsNext.length > 0 ? whatsNext.map(item => item.label) : '';
-  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget());
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget() || '');
   const rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), activeContainerItemID);
   const onConfirmViewClose = () => {
     setShowConfirmView(false);