@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/SearchGroups.tsx

@@ -1,12 +1,4 @@
-import React, {
-  createElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Grid, Select, MenuItem, Box } from '@mui/material';
 
 import { PConnectComponent } from '@pega/sdk-react';
@@ -48,12 +40,7 @@ export const initializeSearchFields = (
       let currentClassID = referenceListClassID;
       valueSplit.forEach((item) => {
         path = path.length ? `${path}.${item}` : item;
-        currentClassID = (
-          PCore.getMetadataUtils().getPropertyMetadata(
-            item,
-            currentClassID,
-          ) as any
-        ).pageClass;
+        currentClassID = (PCore.getMetadataUtils().getPropertyMetadata(item, currentClassID) as any).pageClass;
         if (currentClassID) {
           filtersProperties[`${path}.classID`] = currentClassID;
         }
@@ -82,22 +69,13 @@ const flattenObj = (obj) => {
 
 export default function SearchGroups(props) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const {
-    getPConnect,
-    editableField,
-    localeReference,
-    setShowRecords,
-    searchSelectCacheKey,
-    cache,
-  } = props;
+  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 options = componentCachePersistUtils.getComponentStateOptions(getPConnect);
 
-  const { searchGroups: groups, referenceList } =
-    getPConnect().getConfigProps();
+  const { searchGroups: groups, referenceList } = getPConnect().getConfigProps();
   const { useCache, initialActiveGroupId } = getCacheInfo(cache, groups);
   const [activeGroupId, setActiveGroupId] = useState(initialActiveGroupId);
   const [transientItemID, setTransientItemID] = useState<any>(null);
@@ -105,11 +83,8 @@ export default function SearchGroups(props) {
   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 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 },
@@ -118,8 +93,7 @@ export default function SearchGroups(props) {
   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 { classID: referenceListClassID } = PCore.getMetadataUtils().getDataPageMetadata(referenceList) as any;
 
   const initialSearchFields = useMemo(
     () =>
@@ -127,9 +101,7 @@ export default function SearchGroups(props) {
         searchFields,
         getPConnect,
         referenceListClassID,
-        useCache && cache.activeGroupId === activeGroupId
-          ? cache.searchFields
-          : {},
+        useCache && cache.activeGroupId === activeGroupId ? cache.searchFields : {},
       ),
     [activeGroupId, getPConnect, cache.searchFields],
   );
@@ -170,10 +142,7 @@ export default function SearchGroups(props) {
       includeDisabledFields: true,
     });
 
-    if (
-      Object.keys(cache.searchFields ?? {}).length > 0 &&
-      Object.keys(changes).length === 1
-    ) {
+    if (Object.keys(cache.searchFields ?? {}).length > 0 && Object.keys(changes).length === 1) {
       changes = cache.searchFields;
     }
 
@@ -192,14 +161,11 @@ export default function SearchGroups(props) {
       }
       setPreviousFormValues(formValues);
       setShowRecords(true);
-      PCore.getPubSubUtils().publish(
-        PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS,
-        {
-          payload: formValues,
-          showRecords: true,
-          viewName,
-        },
-      );
+      PCore.getPubSubUtils().publish(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, {
+        payload: formValues,
+        showRecords: true,
+        viewName,
+      });
     }
 
     state.activeGroupId = activeGroupId;
@@ -211,46 +177,25 @@ export default function SearchGroups(props) {
       state,
       options,
     });
-  }, [
-    transientItemID,
-    setShowRecords,
-    viewName,
-    activeGroupId,
-    previousFormValues,
-  ]);
+  }, [transientItemID, setShowRecords, viewName, activeGroupId, previousFormValues]);
 
   const resetFilterData = useCallback(() => {
     // @ts-ignore
     PCore.getNavigationUtils().resetComponentCache(searchSelectCacheKey);
     const resetPayload = {
       transientItemID,
-      data: initializeSearchFields(
-        searchFields,
-        getPConnect,
-        referenceListClassID,
-      ),
+      data: initializeSearchFields(searchFields, getPConnect, referenceListClassID),
       options: { reset: true },
     };
     // @ts-ignore
     PCore.getContainerUtils().updateTransientData(resetPayload);
   }, [transientItemID, initialSearchFields]);
 
-  useCacheWhenListViewReady(
-    cache,
-    viewName,
-    useCache,
-    getFilterData,
-    searchSelectCacheKey,
-  );
+  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
-      >
+      <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}
@@ -261,11 +206,11 @@ export default function SearchGroups(props) {
   );
 
   const actionButtons = (
-    <Box display='flex' gap={2}>
-      <Button variant='outlined' onClick={resetFilterData}>
+    <Box display="flex" gap={2}>
+      <Button variant="outlined" onClick={resetFilterData}>
         {localizedVal('Reset', 'SimpleTable')}
       </Button>
-      <Button variant='contained' onClick={getFilterData}>
+      <Button variant="contained" onClick={getFilterData}>
         {localizedVal('Search', 'SimpleTable')}
       </Button>
     </Box>
@@ -300,27 +245,18 @@ export default function SearchGroups(props) {
   });
 
   const templateContext = useContext(TemplateContext);
-  const templateContextValue = useMemo(
-    () => ({ ...templateContext, outerColumnCount: undefined }),
-    [],
-  );
+  const templateContextValue = useMemo(() => ({ ...templateContext, outerColumnCount: undefined }), []);
 
   const searchFieldsViewComp = transientItemID ? (
     <TemplateContext.Provider value={templateContextValue}>
-      <div ref={searchFieldsRef}>
-        {createElement(PConnectComponent, { ...searchFieldsC11nEnv })}
-      </div>
+      <div ref={searchFieldsRef}>{createElement(PConnectComponent, { ...searchFieldsC11nEnv })}</div>
     </TemplateContext.Provider>
   ) : null;
 
-  const childrenToRender = [
-    searchDropdown,
-    searchFieldsViewComp,
-    actionButtons,
-  ];
+  const childrenToRender = [searchDropdown, searchFieldsViewComp, actionButtons];
 
   return (
-    <Box display='flex' flexDirection='column' gap={2}>
+    <Box display="flex" flexDirection="column" gap={2}>
       {childrenToRender.map((child, index) => (
         <React.Fragment key={index}>{child}</React.Fragment>
       ))}

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/hooks.ts

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 
 const listViewConstants = {
   EVENTS: {
-    LIST_VIEW_READY: 'LIST_VIEW_READY'
-  }
+    LIST_VIEW_READY: 'LIST_VIEW_READY',
+  },
 };
 /**
  * This hook registers a callback for the whenever list view component is ready
@@ -15,7 +15,7 @@ export function useCacheWhenListViewReady(
   viewName: string,
   useCache: boolean,
   getFilterData: (params: { isCalledFromCache: boolean }) => void,
-  searchSelectCacheKey: string
+  searchSelectCacheKey: string,
 ) {
   useEffect(() => {
     if (Object.keys(cache.searchFields ?? {}).length > 0) {
@@ -26,12 +26,15 @@ export function useCacheWhenListViewReady(
             getFilterData({ isCalledFromCache: true });
           }
         },
-        `${searchSelectCacheKey}-listview-ready`
+        `${searchSelectCacheKey}-listview-ready`,
       );
     }
 
     return () => {
-      PCore.getPubSubUtils().unsubscribe(listViewConstants.EVENTS.LIST_VIEW_READY, `${searchSelectCacheKey}-listview-ready`);
+      PCore.getPubSubUtils().unsubscribe(
+        listViewConstants.EVENTS.LIST_VIEW_READY,
+        `${searchSelectCacheKey}-listview-ready`,
+      );
     };
   }, []);
 }

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/utils.ts

@@ -10,13 +10,17 @@ function isEmpty(value: any): boolean {
 }
 
 export function getCacheInfo(
-  cache: { selectedCategory: string; activeGroupId: string; searchFields: unknown },
-  groups: { config: { id: string } }[]
+  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)) {
+  if (cache.activeGroupId && groups?.find((group) => group.config.id === cache.activeGroupId)) {
     initialActiveGroupId = cache.activeGroupId;
     useCache = true;
   }
@@ -25,5 +29,5 @@ export function getCacheInfo(
 }
 
 export function isValidInput(input: { [s: string]: unknown }) {
-  return Object.values(input).some(value => !isEmpty(value));
+  return Object.values(input).some((value) => !isEmpty(value));
 }

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/TemplateContext.ts

@@ -6,6 +6,6 @@ const TemplateContext = createContext({
   outerColumnCount: undefined,
   templateOverrideMode: undefined,
   inheritParentLayout: undefined,
-  lastContainerItem: undefined
+  lastContainerItem: undefined,
 });
 export default TemplateContext;

package/templates/react-sdk-reference/src/components/template/AppShell/AppShell.tsx

@@ -28,21 +28,21 @@ interface AppShellProps extends PConnProps {
   pageMessages: string[];
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {},
   content: {
     flexGrow: 1,
     height: '100vh',
     overflow: 'auto',
     marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
+    marginRight: theme.spacing(2),
   },
   wsscontent: {
     flexGrow: 1,
     height: '100vh',
     marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1)
-  }
+    marginRight: theme.spacing(1),
+  },
 }));
 
 export default function AppShell(props: PropsWithChildren<AppShellProps>) {
@@ -62,7 +62,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     portalTemplate,
     portalName,
     portalLogo,
-    navDisplayOptions
+    navDisplayOptions,
   } = props;
 
   const [open, setOpen] = useState(true);
@@ -94,7 +94,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   let banners: any = null;
   banners = hasBanner && (
     <div style={{ display: 'flex', flexDirection: 'column', padding: '1em 0' }}>
-      <AlertBanner id='AppShell' variant='urgent' messages={messages} />
+      <AlertBanner id="AppShell" variant="urgent" messages={messages} />
     </div>
   );
   // Initial setting of appName and mapChildren
@@ -115,23 +115,27 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
 
     /* TODO: We're setting the `pyPortalTemplate` for now, this would be handled by the CoreJS in the future releases */
     if (portalTemplate === 'wss') {
-      PCore.getEnvironmentInfo().setEnvironmentInfo({ ...PCore.getEnvironmentInfo().environmentInfoObject, pyPortalTemplate: 'wss' } as any);
+      PCore.getEnvironmentInfo().setEnvironmentInfo({
+        ...PCore.getEnvironmentInfo().environmentInfoObject,
+        pyPortalTemplate: 'wss',
+      } as any);
     }
   }, []);
 
   useEffect(() => {
     // @ts-expect-error
-    const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
+    const caseTypesAvailableToCreateDP =
+      PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
     if (caseTypesAvailableToCreateDP) {
       const portalID = pConn.getValue('.pyOwner');
       PCore.getDataPageUtils()
         .getPageDataAsync(caseTypesAvailableToCreateDP, pConn.getContextName(), {
-          PortalName: portalID
+          PortalName: portalID,
         })
         .then((response: { pyCaseTypesAvailableToCreate?: any }) => {
           if (response?.pyCaseTypesAvailableToCreate) {
             pConn.replaceState('.pyCaseTypesAvailableToCreate', response.pyCaseTypesAvailableToCreate, {
-              skipDirtyValidation: true
+              skipDirtyValidation: true,
             });
           }
         });
@@ -156,12 +160,14 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     else {
       PCore.getAssetLoader()
         .getSvcImageUrl(portalLogo)
-        .then(data => {
+        .then((data) => {
           setIconURL(data);
           setFullIconURL(data);
         })
         .catch(() => {
-          console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
+          console.error(
+            `${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`,
+          );
         });
     }
   }, [portalLogo]);
@@ -170,7 +176,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     if (imageKey && portalTemplate === 'wss') {
       PCore.getAssetLoader()
         .getSvcImageUrl(imageKey)
-        .then(imagePath => setImageBlobUrl(imagePath));
+        .then((imagePath) => setImageBlobUrl(imagePath));
     }
   }, []);
 
@@ -178,7 +184,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     return {
       avatar: portalTemplate !== 'wss' ? <Avatar /> : { name: userName, imageSrc: imageBlobUrl },
       name: userName,
-      currentUserInitials
+      currentUserInitials,
     };
   };
 
@@ -192,14 +198,17 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
 
   const links = !pages
     ? []
-    : pages.map(page => {
+    : pages.map((page) => {
         const name = localizedVal(page.pyLabel, '', localeReference);
         return {
           text: name,
           name,
           icon: page.pxPageViewIcon.replace('pi pi-', ''),
           active: page.pyRuleName === activeTab,
-          onClick: () => (!page.pyURLContent || page.pyURLContent === '' ? showPage(page.pyRuleName, page.pyClassName) : openURL(page.pyURLContent))
+          onClick: () =>
+            !page.pyURLContent || page.pyURLContent === ''
+              ? showPage(page.pyRuleName, page.pyClassName)
+              : openURL(page.pyURLContent),
         };
       });
 
@@ -213,7 +222,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
 
   if (portalTemplate === 'wss') {
     return (
-      <div id='AppShell' className={classes.root}>
+      <div id="AppShell" className={classes.root}>
         <WssNavBar
           portalName={portalName}
           imageSrc={iconURL}
@@ -222,7 +231,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           appInfo={{
             imageSrc: iconURL,
             appName: localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
-            onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
+            onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */,
           }}
           navLinks={links.filter((link, index) => {
             return index !== 0;
@@ -240,7 +249,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
 
   return (
     <NavContext.Provider value={{ open, setOpen }}>
-      <div id='AppShell' className={classes.root} style={{ display: 'flex' }}>
+      <div id="AppShell" className={classes.root} style={{ display: 'flex' }}>
         <NavBar
           getPConnect={getPConnect}
           pConn={getPConnect()}

package/templates/react-sdk-reference/src/components/template/BannerPage/BannerPage.tsx

@@ -29,7 +29,7 @@ export default function BannerPage(props: PropsWithChildren<BannerPageProps>) {
     imageTheme = 'light',
     backgroundImage = '',
     backgroundColor = '',
-    tintImage = false
+    tintImage = false,
   } = props;
 
   const childArray = useMemo(() => {
@@ -47,7 +47,7 @@ export default function BannerPage(props: PropsWithChildren<BannerPageProps>) {
         title: heading,
         message,
         backgroundImage,
-        tintImage
+        tintImage,
       }}
     />
   );

package/templates/react-sdk-reference/src/components/template/CaseSummary/CaseSummary.tsx

@@ -29,8 +29,8 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
       type,
       children: children ? [...children] : [],
       config: {
-        ...config
-      }
+        ...config,
+      },
     });
 
     caseSummaryComponentObject.value = createdComponent;
@@ -38,7 +38,7 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   }
 
   function prepareCaseSummaryData(summaryFieldChildren) {
-    const convertChildrenToSummaryData = kid => {
+    const convertChildrenToSummaryData = (kid) => {
       return kid?.map((childItem, index) => {
         const childMeta = childItem.getPConnect().meta;
         const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
@@ -55,7 +55,7 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
       const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
       if (childPConnData.name.toLowerCase() === 'primary fields') {
         arPrimaryFields = childPConnData.children;
-        arPrimaryFields.forEach(field => {
+        arPrimaryFields.forEach((field) => {
           if (field.config?.value && typeof field.config?.value === 'string') {
             field.config.value = localizedVal(field.config.value, localeCategory);
           }
@@ -71,7 +71,7 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   }
 
   return (
-    <div id='CaseSummary'>
+    <div id="CaseSummary">
       <CaseSummaryFields theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>

package/templates/react-sdk-reference/src/components/template/CaseView/CaseView.tsx

@@ -20,7 +20,7 @@ interface CaseViewProps extends PConnProps {
   lastUpdateCaseTime: any;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),
@@ -29,19 +29,19 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
+    marginBottom: theme.spacing(1),
   },
   caseViewHeader: {
     backgroundColor: theme.palette.info.light,
     color: theme.palette.getContrastText(theme.palette.info.light),
-    borderRadius: 'inherit'
+    borderRadius: 'inherit',
   },
   caseViewIconBox: {
     backgroundColor: theme.palette.info.dark,
     width: theme.spacing(8),
     height: theme.spacing(8),
-    padding: theme.spacing(1)
-  }
+    padding: theme.spacing(1),
+  },
 }));
 
 export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
@@ -56,7 +56,14 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     header,
     subheader,
     children = [],
-    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '', caseTypeIcon }
+    caseInfo: {
+      availableActions = [],
+      availableProcesses = [],
+      hasNewAttachments,
+      caseTypeID = '',
+      caseTypeName = '',
+      caseTypeIcon,
+    },
   } = props;
   const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
   const currentCaseID = props.caseInfo.ID;
@@ -67,7 +74,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   const classes = useStyles();
 
-  const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
+  const editAction = availableActions.find((action) => action.ID === 'pyUpdateCaseDetails');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localizationService = thePConn.getLocalizationService();
@@ -124,7 +131,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
       let { label, inheritedProps } = theTabCompConfig;
       // For some tabs, "label" property is not avaialable in theTabCompConfig, so will get them from inheritedProps
       if (!label) {
-        inheritedProps.forEach(inheritedProp => {
+        inheritedProps.forEach((inheritedProp) => {
           if (inheritedProp.prop === 'label') {
             label = inheritedProp.value;
           }
@@ -166,7 +173,10 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   useEffect(() => {
     if (hasNewAttachments) {
-      PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+      PCore.getPubSubUtils().publish(
+        (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
+        true,
+      );
     }
   }, [hasNewAttachments]);
 
@@ -174,7 +184,11 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     const actionsAPI = thePConn.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
-    openLocalAction(editAction.ID, { ...editAction, containerName: 'modal', type: 'express' });
+    openLocalAction(editAction.ID, {
+      ...editAction,
+      containerName: 'modal',
+      type: 'express',
+    });
   }
 
   function getActionButtonsHtml(): any {
@@ -182,7 +196,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
       <Box>
         {editAction && (
           <Button
-            id='edit'
+            id="edit"
             onClick={() => {
               _editClick();
             }}
@@ -207,24 +221,24 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
       return (
         <Grid container>
           <Grid size={{ xs: 3 }}>
-            <div hidden={true} id='current-caseID'>
+            <div hidden={true} id="current-caseID">
               {currentCaseID}
             </div>
             <Card className={classes.root}>
               <CardHeader
                 className={classes.caseViewHeader}
                 title={
-                  <Typography variant='h6' component='div' id='case-name'>
+                  <Typography variant="h6" component="div" id="case-name">
                     {localizationService.getLocalizedText(header)}
                   </Typography>
                 }
                 subheader={
-                  <Typography variant='body1' component='div' id='caseId'>
+                  <Typography variant="body1" component="div" id="caseId">
                     {subheader}
                   </Typography>
                 }
                 avatar={
-                  <Avatar className={classes.caseViewIconBox} variant='square'>
+                  <Avatar className={classes.caseViewIconBox} variant="square">
                     <img src={caseSvgIconUrl} />
                   </Avatar>
                 }
@@ -241,7 +255,12 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
             {theStagesRegion}
             {theTodoRegion}
             {deferLoadInfo.length > 0 && (
-              <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
+              <DeferLoad
+                getPConnect={getPConnect}
+                name={deferLoadInfo[activeVertTab].config.name}
+                isTab
+                lastUpdateCaseTime={lastUpdateCaseTime}
+              />
             )}
           </Grid>