@pega/react-sdk-overrides 0.25.4 → 0.25.5

package/lib/infra/View/View.tsx

@@ -38,7 +38,8 @@ const NO_HEADER_TEMPLATES = [
   'WideNarrowDetails',
   'Confirmation',
   'DynamicTabs',
-  'DetailsSubTabs'
+  'DetailsSubTabs',
+  'ListView'
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {

package/lib/template/AppShell/AppShell.tsx

@@ -81,7 +81,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   const classes = useStyles();
   const actionsAPI = pConn.getActionsApi();
   const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
-  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | Blob | null>(null);
   // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [appName, setAppName] = useState('');
@@ -133,8 +133,8 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     }
   }, []);
 
-  const [iconURL, setIconURL] = useState('');
-  const [fullIconURL, setFullIconURL] = useState('');
+  const [iconURL, setIconURL] = useState<string | Blob>('');
+  const [fullIconURL, setFullIconURL] = useState<string | Blob>('');
   useEffect(() => {
     // using the default icon then fetch it from the static folder (not auth involved)
     if (
@@ -150,8 +150,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     // not using default icon to fetch it using the way which uses authentication
     else {
       PCore.getAssetLoader()
-        .getSvcImage(portalLogo)
-        .then(blob => window.URL.createObjectURL(blob))
+        .getSvcImageUrl(portalLogo)
         .then(data => {
           setIconURL(data);
           setFullIconURL(data);
@@ -165,8 +164,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   useEffect(() => {
     if (imageKey && portalTemplate === 'wss') {
       PCore.getAssetLoader()
-        .getSvcImage(imageKey)
-        .then(blob => window.URL.createObjectURL(blob))
+        .getSvcImageUrl(imageKey)
         .then(imagePath => setImageBlobUrl(imagePath));
     }
   }, []);

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -1,95 +1,22 @@
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CaseSummaryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
+  arPrimaryFields: any[];
+  arSecondaryFields: any[];
 }
 
 export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
-  const { getPConnect, children } = props;
-
-  const thePConn = getPConnect();
-  const theConfigProps: any = thePConn.getConfigProps();
-  // const { status, showStatus } = theConfigProps;
-  const status = theConfigProps.status;
-  const showStatus = theConfigProps.showStatus;
-  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'ModalContainer';
-  // from Constellation DX Components
-  // get the primary and secondary fields with the raw data (which has the non-resolved property values)
-  // const regionsRaw = getPConnect().getRawMetadata().children;
-  // const primaryFieldsRaw = regionsRaw[0].children;
-  // const secondaryFieldsRaw = regionsRaw[1].children;
-
-  // From other SDKs
-  // may want to move these into useEffect/useState combo
-  let arPrimaryFields: any[] = [];
-  let arSecondaryFields: any[] = [];
-
-  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
-    const { config, children } = pConnectMeta;
-    const pConnect = getPConnect();
-
-    const caseSummaryComponentObject: any = {};
-
-    const { type } = pConnectMeta;
-    const createdComponent = pConnect.createComponent({
-      type,
-      children: children ? [...children] : [],
-      config: {
-        ...config
-      }
-    });
-
-    caseSummaryComponentObject.value = createdComponent;
-    return caseSummaryComponentObject;
-  }
-
-  function prepareCaseSummaryData(summaryFieldChildren) {
-    const convertChildrenToSummaryData = kid => {
-      return kid?.map((childItem, index) => {
-        const childMeta = childItem.getPConnect().meta;
-        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
-        caseSummaryComponentObject.id = index + 1;
-        return caseSummaryComponentObject;
-      });
-    };
-    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
-  }
-
-  for (const child of children as ReactElement[]) {
-    const childPConn = (child as ReactElement).props.getPConnect();
-    const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
-    if (childPConnData.name.toLowerCase() === 'primary fields') {
-      arPrimaryFields = childPConnData.children;
-      arPrimaryFields.forEach(field => {
-        if (field.config?.value && typeof field.config?.value === 'string') {
-          field.config.value = localizedVal(field.config.value, localeCategory);
-        }
-      });
-    } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
-      const secondarySummaryFields = prepareCaseSummaryData(childPConn);
-      arSecondaryFields = childPConnData.children;
-      arSecondaryFields.forEach((field, index) => {
-        field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
-      });
-    }
-  }
-
-  // At this point, should hand off to another component for layout and rendering
-  //  of primary and secondary fields in the Case Summary
-
-  // debugging/investigation help
-  // console.log(`CaseSummary: arPrimaryFields: ${JSON.stringify(arPrimaryFields)}`);
-  // console.log(`CaseSummary: arSecondaryFields: ${JSON.stringify(arSecondaryFields)}`);
+  const { arPrimaryFields, arSecondaryFields } = props;
 
   return (
     <div id='CaseSummary'>
-      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
+      <CaseSummaryFields theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>
   );

package/lib/template/CaseView/CaseView.tsx

@@ -9,6 +9,7 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { prepareCaseSummaryData } from '@pega/react-sdk-components/lib/components/template/utils';
 
 interface CaseViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -41,9 +42,6 @@ const useStyles = makeStyles(theme => ({
     width: theme.spacing(8),
     height: theme.spacing(8),
     padding: theme.spacing(1)
-  },
-  caseViewIconImage: {
-    filter: 'var(--svg-color)'
   }
 }));
 
@@ -52,6 +50,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
   const VerticalTabs = getComponentFromMap('VerticalTabs');
   const DeferLoad = getComponentFromMap('DeferLoad');
+  const CaseSummary = getComponentFromMap('CaseSummary');
 
   const {
     getPConnect,
@@ -59,12 +58,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     header,
     subheader,
     children = [],
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    showIconInHeader = true,
-    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
+    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '', caseTypeIcon }
   } = props;
   const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
-
   const currentCaseID = props.caseInfo.ID;
   let isComponentMounted = true;
   const { displayOnlyFA } = useContext<any>(StoreContext);
@@ -84,9 +80,8 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
    */
   function getChildRegionByName(inName: string): any {
     for (const child of children as ReactElement[]) {
-      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type.toLowerCase();
-      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name.toLowerCase();
-
+      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type?.toLowerCase();
+      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name?.toLowerCase();
       if (theMetadataType === 'region' && theMetadataName === inName) {
         return child;
       }
@@ -95,13 +90,23 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     return null;
   }
 
-  const theSummaryRegion = getChildRegionByName('summary');
+  const theSummaryRegion = children && children[0];
+
+  const data = prepareCaseSummaryData(theSummaryRegion);
+  const primarySummaryFields = data.primarySummaryFields;
+  const secondarySummaryFields = data.secondarySummaryFields;
+
   const theStagesRegion = getChildRegionByName('stages');
   const theTodoRegion = getChildRegionByName('todo');
   const theUtilitiesRegion = getChildRegionByName('utilities');
   const theTabsRegion = getChildRegionByName('tabs');
 
-  const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
+  let iconForCaseType = caseTypeIcon ? caseTypeIcon.replace('pi pi-', '') : icon;
+
+  if (!iconForCaseType || iconForCaseType.includes('.')) {
+    iconForCaseType = 'polaris-solid';
+  }
+  const caseSvgIconUrl = Utils.getImageSrc(iconForCaseType, Utils.getSDKStaticConentUrl());
 
   const [activeVertTab, setActiveVertTab] = useState(0);
 
@@ -109,7 +114,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
 
   // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
-  const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
+  const theTabsRegionChildren = theTabsRegion?.props.getPConnect().getChildren();
 
   // vertTabInfo is sent to VerticalTabs component
   const vertTabInfo: object[] = [];
@@ -226,13 +231,13 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
                 }
                 avatar={
                   <Avatar className={classes.caseViewIconBox} variant='square'>
-                    <img src={svgCase} className={classes.caseViewIconImage} />
+                    <img src={caseSvgIconUrl} />
                   </Avatar>
                 }
               />
               {getActionButtonsHtml()}
               <Divider />
-              {theSummaryRegion}
+              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>

package/lib/template/DefaultPage/DefaultPage.tsx

@@ -1,6 +1,7 @@
 import { useMemo, Children } from 'react';
 import type { ReactNode } from 'react';
-import Banner from '@pega/react-sdk-components/lib/components/designSystemExtension/Banner';
+import { Grid2 } from '@mui/material';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 export interface CommonPageProps {
   /** Page title */
@@ -53,6 +54,13 @@ interface DefaultPageProps extends CommonPageProps {
   // layoutModel?: GridLayoutModel | undefined;
 }
 
+const COLUMNS_WIDTHS = {
+  'one-column': [12],
+  'two-column': [6, 6],
+  'narrow-wide': [4, 8],
+  'wide-narrow': [8, 4]
+};
+
 export default function DefaultPage({
   layout = 'one-column',
   children,
@@ -64,6 +72,8 @@ export default function DefaultPage({
   backgroundColor = '',
   tintImage
 }: DefaultPageProps) {
+  const Banner = getComponentFromMap('Banner');
+
   const childArray = useMemo(() => {
     return Children.toArray(children);
   }, [children]);
@@ -85,4 +95,14 @@ export default function DefaultPage({
       />
     );
   }
+
+  return (
+    <Grid2 container spacing={1}>
+      {childArray.map((child, index) => (
+        <Grid2 key={index} size={COLUMNS_WIDTHS[layout][index]}>
+          {child}
+        </Grid2>
+      ))}
+    </Grid2>
+  );
 }

package/lib/template/ListView/ListView.tsx

@@ -157,10 +157,9 @@ export default function ListView(props: ListViewProps) {
         width: '100%',
         marginTop: theme.spacing(2),
         marginBottom: theme.spacing(2),
-        display: 'grid'
-      },
-      search: {
-        padding: '5px 5px'
+        display: 'grid',
+        borderRadius: 16,
+        padding: 20
       },
       table: {
         minWidth: 750
@@ -189,10 +188,6 @@ export default function ListView(props: ListViewProps) {
         position: 'absolute',
         top: 20,
         width: 1
-      },
-      title: {
-        marginTop: theme.spacing(1),
-        marginLeft: theme.spacing(1)
       }
     })
   );
@@ -1065,162 +1060,162 @@ export default function ListView(props: ListViewProps) {
     <>
       {arColumns && arColumns.length > 0 && (
         <Paper className={classes.paper}>
-          <Typography className={classes.title} variant='h6' color='textPrimary' gutterBottom>
-            {_listTitle()}
-          </Typography>
-          {globalSearch && (
-            <Grid2 container spacing={1} alignItems='flex-end' className={classes.search}>
-              <Grid2>
-                <SearchIcon />
-              </Grid2>
-              <Grid2>
-                <TextField
-                  label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
-                  fullWidth
-                  variant='outlined'
-                  placeholder=''
-                  size='small'
-                  id='search'
-                  onChange={_onSearch}
-                />
+          <Grid2 container justifyContent='space-between'>
+            <Typography variant='h6' color='textPrimary' gutterBottom>
+              {_listTitle()}
+            </Typography>
+            {globalSearch && (
+              <Grid2 container spacing={1} alignItems='flex-end'>
+                <Grid2>
+                  <SearchIcon />
+                </Grid2>
+                <Grid2>
+                  <TextField
+                    label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
+                    fullWidth
+                    variant='outlined'
+                    placeholder=''
+                    size='small'
+                    id='search'
+                    onChange={_onSearch}
+                  />
+                </Grid2>
               </Grid2>
-            </Grid2>
-          )}
-          <>
-            {!bInForm ? (
-              <TableContainer id='list-view' className={classes.tableInForm}>
-                <Table stickyHeader aria-label='sticky table'>
-                  <TableHead>
-                    <TableRow>
-                      {arColumns.map(column => {
+            )}
+          </Grid2>
+          {!bInForm ? (
+            <TableContainer id='list-view' className={classes.tableInForm}>
+              <Table stickyHeader aria-label='sticky table'>
+                <TableHead>
+                  <TableRow>
+                    {arColumns.map(column => {
+                      return (
+                        <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
+                          <TableSortLabel
+                            active={orderBy === column.id}
+                            direction={orderBy === column.id ? order : 'asc'}
+                            onClick={createSortHandler(column.id)}
+                          >
+                            {column.label}
+                            {_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
+                            {orderBy === column.id ? (
+                              <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
+                            ) : null}
+                          </TableSortLabel>
+                          <MoreIcon
+                            className={classes.moreIcon}
+                            onClick={event => {
+                              _menuClick(event, column.id, column.type, column.label);
+                            }}
+                          />
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {arRows &&
+                    stableSort(arRows, getComparator(order, orderBy))
+                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                      .map(row => {
                         return (
-                          <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
-                            <TableSortLabel
-                              active={orderBy === column.id}
-                              direction={orderBy === column.id ? order : 'asc'}
-                              onClick={createSortHandler(column.id)}
-                            >
-                              {column.label}
-                              {_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
-                              {orderBy === column.id ? (
-                                <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
-                              ) : null}
-                            </TableSortLabel>
-                            <MoreIcon
-                              className={classes.moreIcon}
-                              onClick={event => {
-                                _menuClick(event, column.id, column.type, column.label);
-                              }}
-                            />
-                          </TableCell>
+                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
+                            {arColumns.map(column => {
+                              const value = row[column.id];
+                              return (
+                                <TableCell key={column.id} align={column.align} className={classes.cell}>
+                                  {_showButton(column.id, row) || column.displayAsLink ? (
+                                    <Link
+                                      component='button'
+                                      onClick={() => {
+                                        _listViewClick(row, column);
+                                      }}
+                                      underline='hover'
+                                    >
+                                      {column.format && typeof value === 'number' ? column.format(value) : value}
+                                    </Link>
+                                  ) : (
+                                    <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
                         );
                       })}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {arRows &&
-                      stableSort(arRows, getComparator(order, orderBy))
-                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                        .map(row => {
-                          return (
-                            <TableRow key={row.pxRefObjectInsName || row.pyID}>
-                              {arColumns.map(column => {
-                                const value = row[column.id];
-                                return (
-                                  <TableCell key={column.id} align={column.align} className={classes.cell}>
-                                    {_showButton(column.id, row) || column.displayAsLink ? (
-                                      <Link
-                                        component='button'
-                                        onClick={() => {
-                                          _listViewClick(row, column);
-                                        }}
-                                        underline='hover'
-                                      >
-                                        {column.format && typeof value === 'number' ? column.format(value) : value}
-                                      </Link>
-                                    ) : (
-                                      <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
-                                    )}
-                                  </TableCell>
-                                );
-                              })}
-                            </TableRow>
-                          );
-                        })}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            ) : (
-              <TableContainer id='list-view'>
-                <Table>
-                  <TableHead>
-                    <TableRow>
-                      {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
-                      {arColumns.map(column => {
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <TableContainer id='list-view'>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
+                    {arColumns.map(column => {
+                      return (
+                        <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
+                          <TableSortLabel
+                            active={orderBy === column.id}
+                            direction={orderBy === column.id ? order : 'asc'}
+                            onClick={createSortHandler(column.id)}
+                          >
+                            {column.label}
+                            {orderBy === column.id ? (
+                              <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
+                            ) : null}
+                          </TableSortLabel>
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {arRows &&
+                    arRows.length > 0 &&
+                    stableSort(arRows, getComparator(order, orderBy))
+                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                      .map(row => {
                         return (
-                          <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
-                            <TableSortLabel
-                              active={orderBy === column.id}
-                              direction={orderBy === column.id ? order : 'asc'}
-                              onClick={createSortHandler(column.id)}
-                            >
-                              {column.label}
-                              {orderBy === column.id ? (
-                                <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
-                              ) : null}
-                            </TableSortLabel>
-                          </TableCell>
+                          <TableRow key={row[rowID]}>
+                            {selectionMode === SELECTION_MODE.SINGLE && (
+                              <TableCell>
+                                <Radio
+                                  onChange={handleChange}
+                                  value={row[rowID]}
+                                  name='radio-buttons'
+                                  inputProps={{ 'aria-label': 'A' }}
+                                  checked={selectedValue === row[rowID]}
+                                />
+                              </TableCell>
+                            )}
+                            {selectionMode === SELECTION_MODE.MULTI && (
+                              <TableCell>
+                                <Checkbox
+                                  onChange={onCheckboxClick}
+                                  checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
+                                  value={row[rowID]}
+                                />
+                              </TableCell>
+                            )}
+                            {arColumns.map(column => {
+                              const value = row[column.id];
+                              return (
+                                <TableCell className={classes.cell} key={column.id} align={column.align}>
+                                  {processColumnValue(column, value)}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
                         );
                       })}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {arRows &&
-                      arRows.length > 0 &&
-                      stableSort(arRows, getComparator(order, orderBy))
-                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                        .map(row => {
-                          return (
-                            <TableRow key={row[rowID]}>
-                              {selectionMode === SELECTION_MODE.SINGLE && (
-                                <TableCell>
-                                  <Radio
-                                    onChange={handleChange}
-                                    value={row[rowID]}
-                                    name='radio-buttons'
-                                    inputProps={{ 'aria-label': 'A' }}
-                                    checked={selectedValue === row[rowID]}
-                                  />
-                                </TableCell>
-                              )}
-                              {selectionMode === SELECTION_MODE.MULTI && (
-                                <TableCell>
-                                  <Checkbox
-                                    onChange={onCheckboxClick}
-                                    checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
-                                    value={row[rowID]}
-                                  />
-                                </TableCell>
-                              )}
-                              {arColumns.map(column => {
-                                const value = row[column.id];
-                                return (
-                                  <TableCell className={classes.cell} key={column.id} align={column.align}>
-                                    {processColumnValue(column, value)}
-                                  </TableCell>
-                                );
-                              })}
-                            </TableRow>
-                          );
-                        })}
-                  </TableBody>
-                </Table>
-                {(!arRows || arRows.length === 0) && (
-                  <div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
-                )}
-              </TableContainer>
-            )}
-          </>
+                </TableBody>
+              </Table>
+              {(!arRows || arRows.length === 0) && (
+                <div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
+              )}
+            </TableContainer>
+          )}
           {arRows && arRows.length > 0 && (
             <TablePagination
               id='pagination'