@pega/react-sdk-overrides 0.24.4 → 0.25.1

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-template */
 /** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
 
-import { Grid, Link } from '@material-ui/core';
+import { Grid, Link } from '@mui/material';
 
 import DashboardFilter from './DashboardFilter';
 
@@ -46,7 +46,6 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
   }
   let propInfo: any = PCore.getMetadataUtils().getPropertyMetadata(cleanedName, filterMeta.config.ruleClass);
   if (!propInfo) {
-    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
     propInfo = PCore.getMetadataUtils().getPropertyMetadata(cleanedName);
   }
   const { type: propertyType } = propInfo || { type: 'Text' };
@@ -78,13 +77,13 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
   const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
   if (filterComponents && filterComponents.length > 0) {
     filterComponents.push(
-      <Grid>
+      <Grid style={{ display: 'flex', alignItems: 'center' }}>
         <Link
           style={{ cursor: 'pointer' }}
           onClick={() => {
-            // @ts-ignore - second parameter “payload” for publish method should be optional
             PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
           }}
+          underline='hover'
         >
           Clear All
         </Link>

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, createElement } from 'react';
-import { Box, Card, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Card, CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
@@ -12,6 +12,7 @@ interface DeferLoadProps extends PConnProps {
   isChildDeferLoad?: boolean;
   isTab: boolean;
   deferLoadId: string;
+  lastUpdateCaseTime: any;
 }
 
 //
@@ -34,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function DeferLoad(props: DeferLoadProps) {
-  const { getPConnect, name, deferLoadId, isTab } = props;
+  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
   const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
@@ -69,8 +70,8 @@ export default function DeferLoad(props: DeferLoadProps) {
   const getViewOptions = () => ({
     viewContext: resourceType,
     pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal.classID, // 2nd arg empty string until typedef allows optional
-    container: isContainerPreview ? 'preview' : null,
-    containerName: isContainerPreview ? 'preview' : null,
+    container: isContainerPreview ? 'preview' : undefined,
+    containerName: isContainerPreview ? 'preview' : undefined,
     updateData: isContainerPreview
   });
 
@@ -95,7 +96,7 @@ export default function DeferLoad(props: DeferLoadProps) {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
       setContent(createElement(createPConnectComponent(), configObject));
       if (deferLoadId) {
         PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
@@ -113,7 +114,6 @@ export default function DeferLoad(props: DeferLoadProps) {
         getPConnect()
           .getActionsApi()
           .showData(name, dataContext, dataContextParameters, {
-            // @ts-ignore - Type 'boolean' is not assignable to type 'string'
             skipSemanticUrl: true,
             // @ts-ignore
             isDeferLoaded: true
@@ -145,7 +145,7 @@ export default function DeferLoad(props: DeferLoadProps) {
           console.log(`deferload: ${error}`);
         });
     }
-  }, [name, getPConnect, currentLoadedAssignment]);
+  }, [name, getPConnect, currentLoadedAssignment, lastUpdateCaseTime]);
   /* TODO Cosmos need to handle for now added a wrapper div with pos relative */
   let deferLoadContent;
   if (isLoading) {

package/lib/infra/MultiStep/MultiStep.tsx

@@ -11,7 +11,7 @@ interface MultiStepProps extends PConnProps {
   actionButtons: any[];
   onButtonPress: any;
   bIsVertical: boolean;
-  arNavigationSteps: any[];
+  arNavigationSteps: any;
 }
 
 export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
@@ -21,6 +21,12 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
   const { bIsVertical, arNavigationSteps } = props;
 
+  let currentStep = arNavigationSteps.find(({ visited_status: vs }) => vs === 'current');
+  if (!currentStep) {
+    const lastActiveStepIndex = arNavigationSteps.findLastIndex(({ visited_status: vs }) => vs === 'success');
+    currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
+  }
+
   // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
   // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
 
@@ -48,16 +54,16 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     return 'psdk-vertical-step-body';
   }
 
-  function _getHIconClass(status): string {
-    if (status === 'current') {
+  function _getHIconClass(step): string {
+    if (step.ID === currentStep?.ID) {
       return 'psdk-horizontal-step-icon-selected';
     }
 
     return 'psdk-horizontal-step-icon';
   }
 
-  function _getHLabelClass(status): string {
-    if (status === 'current') {
+  function _getHLabelClass(step): string {
+    if (step.ID === currentStep?.ID) {
       return 'psdk-horizontal-step-label-selected';
     }
 
@@ -65,12 +71,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   }
 
   function _showHLine(index: number): boolean {
-    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-    if (index < arNavigationSteps.length - 1) {
-      return true;
-    }
-
-    return false;
+    return index < arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -138,12 +139,12 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
               return (
                 <React.Fragment key={mainStep.actionID}>
                   <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep.visited_status)}>
+                    <div className={_getHIconClass(mainStep)}>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep.visited_status)}>
+                    <div className={_getHLabelClass(mainStep)}>
                       <div className='psdk-horizontal-step-text-label' id='selected-label'>
                         {mainStep.name}
                       </div>
@@ -176,7 +177,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                     ))}
                   </ul>
                 )}
-                {!mainStep?.steps && mainStep.visited_status === 'current' && (
+                {!mainStep?.steps && mainStep.ID === currentStep?.ID && (
                   <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
                     {children}
                   </AssignmentCard>

package/lib/infra/NavBar/NavBar.css

@@ -165,4 +165,5 @@
 
 .scrollable {
   overflow-y: scroll !important;
+  min-height: 200px !important;
 }

package/lib/infra/NavBar/NavBar.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import clsx from 'clsx';
 
 import {
@@ -15,19 +16,22 @@ import {
   Menu,
   MenuItem,
   Typography
-} from '@material-ui/core';
-import PersonOutlineIcon from '@material-ui/icons/PersonOutlineOutlined';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
-import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
-import ExpandLess from '@material-ui/icons/ExpandLess';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import AddIcon from '@material-ui/icons/Add';
-import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
-import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+} from '@mui/material';
+import PersonOutlineIcon from '@mui/icons-material/PersonOutlineOutlined';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import TabletAndroidOutlineIcon from '@mui/icons-material/TabletAndroidOutlined';
+import AirportShuttleOutlinedIcon from '@mui/icons-material/AirportShuttleOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import AddIcon from '@mui/icons-material/Add';
+import WorkOutlineIcon from '@mui/icons-material/WorkOutline';
+import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
@@ -48,7 +52,11 @@ interface NavBarProps extends PConnProps {
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
   'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
-  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />
+  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />,
+  'pi pi-tablet': <TabletAndroidOutlineIcon fontSize='large' />,
+  'pi pi-ambulance': <AirportShuttleOutlinedIcon fontSize='large' />,
+  'pi pi-ink-solid': <EditOutlinedIcon fontSize='large' />,
+  'pi pi-columns': <HomeOutlinedIcon fontSize='large' />
 };
 
 const drawerWidth = 300;
@@ -203,7 +211,7 @@ export default function NavBar(props: NavBarProps) {
               }
             />
             <ListItemSecondaryAction>
-              <IconButton edge='end' onClick={handleDrawerOpen}>
+              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
                 <ChevronLeftIcon className={classes.appListIcon} />
               </IconButton>
             </ListItemSecondaryAction>
@@ -256,7 +264,7 @@ export default function NavBar(props: NavBarProps) {
             <ListItemText primary={portalOperator} />
             {open && (
               <ListItemSecondaryAction>
-                <IconButton edge='end' onClick={navPanelOperatorButtonClick}>
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
                   <ChevronRightIcon />
                 </IconButton>
               </ListItemSecondaryAction>

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,6 +1,5 @@
 import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import isEqual from 'lodash.isequal';
-import { Box, CircularProgress } from '@material-ui/core';
+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';
@@ -54,6 +53,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
   const pConn = getPConnect();
 
   const options = { context: 'app' };
+  const rootView = useRef(null);
 
   const [componentName, setComponentName] = useState('');
 
@@ -146,7 +146,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     return noPortalContent;
   }
 
-  let rootView: any;
   let rootViewConfig: any = null;
 
   useEffect(() => {
@@ -180,8 +179,8 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
       }
     };
 
-    if (!isEqual(currentRootConfig, prevRootConfig)) {
-      rootView = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig));
+    if (prevRootConfig === null || !PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
+      rootView.current = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig)) as any;
     }
 
     // debugging/investigation help
@@ -189,7 +188,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
 
     return (
       <div id='ModalManager'>
-        {rootView}
+        {rootView.current}
         {MemoizedModalViewContainer}
         <div id='MemoizedPreviewViewContainer' />
         <div id='ReAuthMessageModal' />

package/lib/infra/Stages/Stages.tsx

@@ -1,7 +1,7 @@
-import { Breadcrumbs, Card, Typography } from '@material-ui/core';
-import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
-import DoneIcon from '@material-ui/icons/Done';
-import { makeStyles } from '@material-ui/core/styles';
+import { Breadcrumbs, Card, Typography } from '@mui/material';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import DoneIcon from '@mui/icons-material/Done';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 

package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -1,5 +1,5 @@
-import { withStyles } from '@material-ui/core/styles';
-import { Tab, Divider } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
+import { Tab, Divider } from '@mui/material';
 
 // LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
 
@@ -18,7 +18,8 @@ interface LeftAlignVerticalTabsProps {
 const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
-    maxWidth: '100%'
+    maxWidth: '100%',
+    alignItems: 'flex-start'
   },
   wrapper: {
     display: 'block',

package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Tabs from '@material-ui/core/Tabs';
+import makeStyles from '@mui/styles/makeStyles';
+import Tabs from '@mui/material/Tabs';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 

package/lib/infra/View/View.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
@@ -18,6 +18,7 @@ interface ViewProps extends PConnProps {
   visibility?: boolean;
   name?: string;
   bInForm?: boolean;
+  type?: any;
 }
 
 //
@@ -36,12 +37,14 @@ const NO_HEADER_TEMPLATES = [
   'NarrowWideDetails',
   'WideNarrowDetails',
   'Confirmation',
-  'DynamicTabs'
+  'DynamicTabs',
+  'DetailsSubTabs'
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {
-  const { children, template, getPConnect, mode, visibility, name: pageName } = props;
+  const { children, template, getPConnect, mode, visibility, name: pageName, type, title } = props;
   let { label = '', showLabel = false } = props;
+  const { PAGE_TYPES: { PAGE, LANDINGPAGE, LISTPAGE } = {}, MODAL } = PCore.getConstants();
 
   // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
   // Putting this logic here instead of copy/paste in every Form template index.js
@@ -49,12 +52,43 @@ export default function View(props: PropsWithChildren<ViewProps>) {
   const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
   label = inheritedProps.label || label;
   showLabel = inheritedProps.showLabel || showLabel;
+  const localeUtils = PCore.getLocaleUtils();
 
   const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
   if (isEmbeddedDataView && showLabel === undefined) {
     showLabel = true;
   }
 
+  useEffect(() => {
+    // Get the localized application label
+    let applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
+    applicationLabel = localeUtils.getLocaleValue(`${applicationLabel}`, '', '');
+    const caseInfo = getPConnect().getCaseInfo();
+    const isAssignmentInCreateStage = caseInfo && caseInfo.isAssignmentInCreateStage();
+    const isRenderingInModal = getPConnect().getContainerName().includes(MODAL);
+    const isRenderingInPreviewPanel = getPConnect().getContainerName().includes('preview');
+
+    /* If assignment is in create stage and rendering in modal don't update the title.
+      Title will be updated on completion of create stage and when the assignment is rendered inline to the page.
+    */
+    const canUpdateTitle =
+      !isRenderingInPreviewPanel &&
+      (type === PAGE || type === LANDINGPAGE || type === LISTPAGE) &&
+      !(isRenderingInModal && isAssignmentInCreateStage) &&
+      PCore.getEnvironmentInfo().getRenderingMode() === 'FULL_PORTAL';
+    // Incase of home route title is same as applicationLabel so setting to empty to just show applicationLabel
+    let titleVar = title === applicationLabel ? '' : title;
+
+    if (canUpdateTitle) {
+      if (caseInfo) {
+        const name = caseInfo.getName();
+        const id = caseInfo.getBusinessID();
+        titleVar = name && id ? `${name} (${id})` : titleVar;
+      }
+      document.title = titleVar ? `${titleVar} - ${applicationLabel}` : applicationLabel;
+    }
+  }, [type, title, getPConnect, PAGE, LANDINGPAGE, LISTPAGE]);
+
   const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
   // As long as the template is defined in the dependencies of the view
   // it will be loaded, otherwise fall back to single column

package/lib/template/AdvancedSearch/AdvancedSearch.tsx

@@ -0,0 +1,87 @@
+import { useContext, useState } from 'react';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import DataReferenceAdvancedSearchContext from '@pega/react-sdk-components/lib/components/template/DataReference/DataReferenceAdvancedSearchContext';
+import { getFirstChildConfig } from '@pega/react-sdk-components/lib/components/template/DataReference/utils';
+
+export default function AdvancedSearch(props) {
+  const { getPConnect, targetObjectClass, localeReference } = props;
+  const SearchGroups = getComponentFromMap('SearchGroups');
+  const { dataReferenceConfigToChild, isCreateNewReferenceEnabled, disableStartingFieldsForReference, pyID, searchSelectCacheKey } = useContext(
+    DataReferenceAdvancedSearchContext
+  ) as any;
+
+  const { selectionMode, value: singleSelectFieldValue, readonlyContextList: multiSelectField } = dataReferenceConfigToChild;
+
+  let isSelectionExist = false;
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  if (selectionMode === MULTI) {
+    isSelectionExist = getPConnect().getValue(multiSelectField)?.length || false;
+  } else {
+    isSelectionExist = getPConnect().getValue(singleSelectFieldValue) || false;
+  }
+
+  const [showRecords, setShowRecords] = useState(isSelectionExist);
+
+  const pConn = getPConnect();
+  const rawViewMetadata = pConn.getRawMetadata();
+
+  const searchFieldsSet = new Set();
+  const searchFields: any = [];
+  rawViewMetadata.config.searchGroups.forEach(group => {
+    group.children.forEach(child => {
+      if (!searchFieldsSet.has(child.config.value) && !child.config.validator) {
+        searchFields.push(child);
+        searchFieldsSet.add(child.config.value);
+      }
+    });
+  });
+
+  const firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+  const [firstChildMeta] = rawViewMetadata.children;
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  // @ts-ignore
+  const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+
+  const editableFieldComp = firstChildPConnect().createComponent({
+    type: firstChildMeta.type,
+    config: {
+      ...getFirstChildConfig({
+        firstChildMeta,
+        getPConnect,
+        rawViewMetadata,
+        contextClass: targetObjectClass,
+        dataReferenceConfigToChild,
+        isCreateNewReferenceEnabled,
+        disableStartingFieldsForReference,
+        pyID
+      }),
+      searchFields,
+      showRecords,
+      label: localizedVal('Search results', 'DataReference'),
+      searchSelectCacheKey,
+      cache
+    }
+  });
+
+  const { selectionList, dataRelationshipContext } = editableFieldComp.props.getPConnect().getConfigProps();
+  const editableField = selectionMode === MULTI ? selectionList.substring(1) : dataRelationshipContext;
+
+  const searchGroupsProps = {
+    getPConnect,
+    editableField,
+    localeReference,
+    setShowRecords,
+    searchSelectCacheKey,
+    cache
+  };
+
+  return (
+    <>
+      <SearchGroups {...searchGroupsProps} />
+      {editableFieldComp}
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+const SKIP_CACHE_KEY = '';
+
+export function getMappedKey(key) {
+  const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
+  if (!mappedKey) {
+    return key;
+  }
+  return mappedKey;
+}
+
+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 resolvedCaseID = pConnect.getValue(caseID);
+
+  if (!resolvedCaseID) {
+    return SKIP_CACHE_KEY;
+  }
+
+  return `Search-${resolvedCaseID}-${pConnect.getPageReference()}-${propertyName}-${pConnect.getCurrentView()}`;
+};
+
+const getComponentStateOptions = getPConnect => {
+  return { clearOnCancelForContext: getPConnect().getContextName() };
+};
+
+interface SearchCategory {
+  // tabId of search category selected
+  selectedCategory: string;
+}
+
+interface SearchGroup {
+  // searchFields can be any object based on what fields are authored.
+  searchFields: unknown;
+  activeGroupId: string;
+}
+
+const setComponentCache = ({
+  cacheKey,
+  state,
+  options
+}: {
+  cacheKey: string;
+  state: SearchCategory | SearchGroup;
+  options: ReturnType<typeof getComponentStateOptions>;
+}) => {
+  if (cacheKey !== SKIP_CACHE_KEY) {
+    (PCore.getNavigationUtils() as any).setComponentCache(cacheKey, state, options);
+  }
+};
+
+const componentCachePersistUtils = {
+  getComponentStateKey,
+  getComponentStateOptions,
+  setComponentCache
+};
+
+export default componentCachePersistUtils;