@pega/react-sdk-overrides 0.25.3 → 0.25.5

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'

package/lib/template/SelfServiceCaseView/SelfServiceCaseView.tsx

@@ -0,0 +1,145 @@
+import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import Grid2 from '@mui/material/Grid2';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { prepareCaseSummaryData, filterUtilities } from '@pega/react-sdk-components/lib/components/template/utils';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  caseViewHeader: {
+    backgroundColor: theme.palette.info.light,
+    color: theme.palette.getContrastText(theme.palette.info.light),
+    borderRadius: 'inherit'
+  },
+  caseViewIconBox: {
+    backgroundColor: theme.palette.info.dark,
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+    padding: theme.spacing(1)
+  },
+  caseViewIconImage: {
+    filter: 'var(--svg-color)'
+  }
+}));
+
+export default function SelfServiceCaseView(props) {
+  const classes = useStyles();
+  const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
+  const CaseSummary = getComponentFromMap('CaseSummary');
+  const {
+    icon = '',
+    getPConnect,
+    header,
+    subheader,
+    showCaseLifecycle = true,
+    showSummaryRegion = true,
+    showUtilitiesRegion = true,
+    showCaseActions = true,
+    children,
+    caseClass,
+    caseInfo: { availableActions = [], availableProcesses = [], caseTypeID = '', caseTypeName = '' }
+  } = props;
+  const pConnect = getPConnect();
+  const [bShowCaseLifecycle, bShowSummaryRegion, bShowUtilitiesRegion, bShowCaseActions] = [
+    showCaseLifecycle,
+    showSummaryRegion,
+    showUtilitiesRegion,
+    showCaseActions
+  ].map((prop: boolean | string) => prop === true || prop === 'true');
+  const isObjectType: boolean = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+  const localeKey = pConnect?.getCaseLocaleReference();
+  const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
+  const renderedRegions: any = isObjectType
+    ? {
+        caseSummary: children[0],
+        utilities: filterUtilities(children[2])
+      }
+    : {
+        caseSummary: children[0],
+        stages: children[1],
+        todo: children[2],
+        utilities: filterUtilities(children[4])
+      };
+  const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+    renderedRegions.caseSummary,
+    (config: any) => config?.availableInChannel?.selfService === true
+  );
+
+  const isUtilitiesRegionNotEmpty: () => boolean = () => {
+    const utilitiesElement = renderedRegions.utilities;
+    if (utilitiesElement?.props?.getPConnect()?.getChildren()?.length > 0) {
+      return utilitiesElement.props
+        .getPConnect()
+        .getChildren()
+        .some((prop: { getPConnect: () => any }) => prop.getPConnect().getConfigProps().visibility !== false);
+    }
+    return false;
+  };
+
+  return (
+    <div>
+      {bShowCaseActions && (
+        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', margin: '10px' }}>
+          <div>{PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}</div>
+          <CaseViewActionsMenu
+            getPConnect={getPConnect}
+            availableActions={availableActions}
+            availableProcesses={availableProcesses}
+            caseTypeName={caseTypeName}
+            caseTypeID={caseTypeID}
+          />
+        </div>
+      )}
+      <div>
+        <Grid2 container>
+          <Grid2 size={{ xs: 3 }}>
+            {bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0) && (
+              <div>
+                <Card className={classes.root}>
+                  <CardHeader
+                    className={classes.caseViewHeader}
+                    title={
+                      <Typography variant='h6' component='div' id='case-name'>
+                        {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                      </Typography>
+                    }
+                    subheader={
+                      <Typography variant='body1' component='div' id='caseId'>
+                        {subheader}
+                      </Typography>
+                    }
+                    avatar={
+                      <Avatar className={classes.caseViewIconBox} variant='square'>
+                        <img src={svgCase} className={classes.caseViewIconImage} />
+                      </Avatar>
+                    }
+                  />
+                  <Divider />
+                  <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+                  <Divider />
+                </Card>
+              </div>
+            )}
+          </Grid2>
+
+          <Grid2 size={{ xs: 6 }}>
+            {bShowCaseLifecycle && renderedRegions.stages}
+            {renderedRegions.todo}
+          </Grid2>
+
+          {bShowUtilitiesRegion && isUtilitiesRegionNotEmpty() && <Grid2 size={{ xs: 3 }}>{renderedRegions.utilities}</Grid2>}
+        </Grid2>
+      </div>
+    </div>
+  );
+}

package/lib/template/SelfServiceCaseView/index.tsx

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

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -36,8 +36,8 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   appListLogo: {
-    width: '3.6rem',
-    filter: 'var(--svg-color)'
+    maxWidth: '100%',
+    height: '3rem'
   },
   appName: {
     marginLeft: theme.spacing(2),
@@ -85,7 +85,7 @@ export default function WssNavBar(props: WssNavBarProps) {
   return (
     <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
-        <Container maxWidth='xl'>
+        <Container maxWidth={false}>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
             <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />

package/lib/template/utils.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { isValidElement } from 'react';
+
+export function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibilityChecker?) {
+  const filterVisibleChildren = children => {
+    return children
+      ?.getPConnect()
+      ?.getChildren()
+      ?.filter(child => {
+        const configProps = child.getPConnect().getConfigProps();
+        const defaultVisibilityCn = !('visibility' in configProps) || configProps.visibility === true;
+        return defaultVisibilityCn && (portalSpecificVisibilityChecker?.(configProps) ?? true);
+      });
+  };
+  const convertChildrenToSummaryData = children => {
+    return children?.map(childItem => {
+      const childPConnData = childItem.getPConnect().resolveConfigProps(childItem.getPConnect().getRawMetadata());
+      return childPConnData;
+    });
+  };
+
+  const summaryFieldChildren = caseSummaryRegion.props
+    .getPConnect()
+    .getChildren()[0]
+    ?.getPConnect()
+    ?.getReferencedViewPConnect()
+    ?.getPConnect()
+    ?.getChildren();
+
+  const primarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 0
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[0]))
+      : undefined;
+  const secondarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 1
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[1]))
+      : undefined;
+
+  return {
+    primarySummaryFields,
+    secondarySummaryFields
+  };
+}
+
+export const filterUtilities = (utils: ReactNode) => {
+  let utilsMeta;
+  if (isValidElement(utils)) {
+    const pConnect = utils.props.getPConnect();
+    utilsMeta = pConnect.getRawMetadata?.();
+    if (!utilsMeta?.children?.length) return;
+    utilsMeta = {
+      ...utilsMeta,
+      children: utilsMeta.children.filter((child: any) => child.config?.availableInChannel?.selfService === true)
+    };
+    return utilsMeta.children?.length ? pConnect.createComponent(utilsMeta) : undefined;
+  }
+  return utilsMeta;
+};

package/lib/widget/ToDo/ToDo.tsx

@@ -82,19 +82,15 @@ function getID(assignment: any) {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
     paddingBottom: theme.spacing(1),
-    borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light
+    borderRadius: 16
   },
   avatar: {
     backgroundColor: theme.palette.primary.light,
     color: theme.palette.getContrastText(theme.palette.primary.light)
   },
   todoWrapper: {
-    borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light,
     padding: theme.spacing(1),
     margin: theme.spacing(1)
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.25.3",
+  "version": "0.25.5",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [