@pega/dx-component-builder-sdk 24.1.12 → 24.2.11

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -1,28 +1,28 @@
 /* eslint-disable no-nested-ternary */
 import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import makeStyles from '@mui/styles/makeStyles';
+import Link from '@mui/material/Link';
 import { createElement } from 'react';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Select from '@material-ui/core/Select';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -698,7 +698,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
-          <Link style={{ cursor: 'pointer' }} onClick={addRecord}>
+          <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline='hover'>
             + Add
           </Link>
         </div>
@@ -716,7 +716,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         <DialogContent>
           {containsDateOrTime ? (
             <>
-              <Select value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
+              <Select variant='standard' value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
                 <MenuItem value='notequal'>is not equal to</MenuItem>
                 <MenuItem value='equal'>is equal to</MenuItem>
                 <MenuItem value='after'>after</MenuItem>
@@ -726,6 +726,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -737,6 +738,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -748,6 +750,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -760,12 +763,13 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
             </>
           ) : (
             <>
-              <Select id='filter' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
+              <Select variant='standard' id='filter' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
                 <MenuItem value='contains'>Contains</MenuItem>
                 <MenuItem value='equals'>Equals</MenuItem>
                 <MenuItem value='startswith'>Starts with</MenuItem>
               </Select>
               <TextField
+                variant='standard'
                 autoFocus
                 margin='dense'
                 id='containsFilter'

package/tests/assets/sdk-r/components/create/override-sdk/template/SubTabs/SubTabs.tsx

@@ -1,6 +1,6 @@
 import { Children, PropsWithChildren, useEffect, useState } from 'react';
-import { Tab, Tabs } from '@material-ui/core';
-import { TabContext, TabPanel } from '@material-ui/lab';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
 
 import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumn/TwoColumn.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, GridSize } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnProps extends PConnProps {

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnTab/TwoColumnTab.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, GridSize } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnTabProps extends PConnProps {

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@material-ui/core/Grid';
+import Grid, { GridSize } from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -26,7 +26,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[])?.map((configObject, index) => {
     let theConfigObject: object = configObject;

package/tests/assets/sdk-r/components/create/override-sdk/template/WssNavBar/WssNavBar.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Box from '@material-ui/core/Box';
-import Toolbar from '@material-ui/core/Toolbar';
-import Container from '@material-ui/core/Container';
-import { IconButton, Menu, MenuItem, Typography, Button } from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import MenuIcon from '@material-ui/icons/Menu';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Container from '@mui/material/Container';
+import { IconButton, Menu, MenuItem, Typography, Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import MenuIcon from '@mui/icons-material/Menu';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WssNavBar.css';
@@ -128,7 +128,7 @@ export default function WssNavBar(props: WssNavBarProps) {
             {position === 'inline' && <>{navLinksContent}</>}
 
             <Box sx={{ flexGrow: 0 }}>
-              <IconButton onClick={handleOpenUserMenu}>
+              <IconButton onClick={handleOpenUserMenu} size='large'>
                 <Avatar>{operator.currentUserInitials}</Avatar>
               </IconButton>
               <Menu

package/tests/assets/sdk-r/components/create/override-sdk/widget/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './ActionButtonsForFileUtil.css';
 

package/tests/assets/sdk-r/components/create/override-sdk/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,5 +1,5 @@
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface AppAnnouncementProps extends PConnProps {

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.tsx

@@ -2,8 +2,8 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 import { useState, useEffect, useCallback } from 'react';
-import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import download from 'downloadjs';
 
 import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
@@ -217,9 +217,11 @@ export default function Attachment(props: AttachmentProps) {
         };
         if (!validateMaxSize(f, maxAttachmentSize)) {
           f.props.error = true;
+          f.inProgress = false;
           f.props.meta = pConn.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', '');
         } else if (!validateFileExtension(f, extensions)) {
           f.props.error = true;
+          f.inProgress = false;
           f.props.meta = `${pConn.getLocalizedValue('File has invalid extension. Allowed extensions are:', '', '')} ${extensions.replaceAll(
             '.',
             ''
@@ -430,6 +432,7 @@ export default function Attachment(props: AttachmentProps) {
                       aria-expanded={open ? 'true' : undefined}
                       aria-haspopup='true'
                       onClick={handleClick}
+                      size='large'
                     >
                       <MoreVertIcon />
                     </IconButton>

package/tests/assets/sdk-r/components/create/override-sdk/widget/CaseHistory/CaseHistory.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
-import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
+import { Theme } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -145,9 +147,9 @@ export default function CaseHistory(props: CaseHistoryProps) {
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? dataRow[0] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? dataRow[1] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? dataRow[2] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : ('---' as any)}</StyledTableCell>
           </TableRow>
         );
       });

package/tests/assets/sdk-r/components/create/override-sdk/widget/FileUtility/FileUtility.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -7,8 +7,8 @@ import download from 'downloadjs';
 // import SummaryList from '../../SummaryList';
 // import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
-import { IconButton, Menu, MenuItem, Button, CircularProgress } from '@material-ui/core';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { IconButton, Menu, MenuItem, Button, CircularProgress } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -508,6 +508,7 @@ export default function FileUtility(props: FileUtilityProps) {
             aria-expanded={open ? 'true' : undefined}
             aria-haspopup='true'
             onClick={handleClick}
+            size='large'
           >
             <MoreVertIcon />
           </IconButton>

package/tests/assets/sdk-r/components/create/override-sdk/widget/Followers/Followers.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FollowersProps extends PConnProps {

package/tests/assets/sdk-r/components/create/override-sdk/widget/QuickCreate/config-ext.json

@@ -0,0 +1,10 @@
+{
+    "componentKey": "QuickCreate",
+    "name": "QuickCreate",
+    "label": "Quick create",
+    "description": "Quick create widget",
+    "type": "Widget",
+    "subtype": "PAGE",
+    "properties": [],
+    "defaultConfig": {}
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/SummaryItem/SummaryItem.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { IconButton, Menu, MenuItem } from '@material-ui/core';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -69,6 +69,7 @@ export default function SummaryItem(props: SummaryItemProps) {
               aria-expanded={open ? 'true' : undefined}
               aria-haspopup='true'
               onClick={handleClick}
+              size='large'
             >
               <MoreVertIcon />
             </IconButton>

package/tests/assets/sdk-r/components/create/override-sdk/widget/ToDo/ToDo.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-shadow */
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Box,
   Button,
@@ -13,19 +13,53 @@ import {
   ListItem,
   ListItemText,
   ListItemSecondaryAction
-} from '@material-ui/core';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import ArrowForwardIosOutlinedIcon from '@material-ui/icons/ArrowForwardIosOutlined';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+} from '@mui/material';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './ToDo.css';
 
+const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
+  return PCore.getDataPageUtils()
+    .getDataAsync(
+      datapage,
+      context,
+      {},
+      {
+        pageNumber: 1,
+        pageSize: numberOfRecords
+      },
+      {
+        select: Object.keys(fields).map(key => ({ field: PCore.getAnnotationUtils().getPropertyName(fields[key]) }))
+      },
+      {
+        invalidateCache: true,
+        additionalApiParams: {
+          includeTotalCount
+        }
+      }
+    )
+    .then(response => {
+      return {
+        ...response,
+        data: (Array.isArray(response?.data) ? response.data : []).map(row =>
+          Object.keys(fields).reduce((obj, key) => {
+            obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
+            return obj;
+          }, {})
+        )
+      };
+    });
+};
+
 interface ToDoProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   datasource?: any;
@@ -37,7 +71,7 @@ interface ToDoProps extends PConnProps {
   itemKey?: string;
   showTodoList?: boolean;
   type?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   context?: string;
   isConfirm?: boolean;
 }
@@ -81,12 +115,20 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ToDo(props: ToDoProps) {
-  const { getPConnect, datasource = [], headerText = 'To do', showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false } = props;
+  const {
+    getPConnect,
+    context,
+    datasource = [],
+    headerText = 'To do',
+    showTodoList = true,
+    myWorkList = {},
+    type = 'worklist',
+    isConfirm = false
+  } = props;
 
   const CONSTS = PCore.getConstants();
 
   const bLogging = true;
-  let assignmentCount = 0;
   const currentUser = PCore.getEnvironmentInfo().getOperatorName();
   const currentUserInitials = Utils.getInitials(currentUser);
   const assignmentsSource = datasource?.source || myWorkList?.source;
@@ -106,17 +148,36 @@ export default function ToDo(props: ToDoProps) {
   const showlessLocalizedValue = localizedVal('show_less', 'CosmosFields');
   const showMoreLocalizedValue = localizedVal('show_more', 'CosmosFields');
   const canPerform = assignments?.[0]?.canPerform === 'true' || assignments?.[0]?.canPerform === true;
-  // const { setOpen } = useNavBar();
+  const [count, setCount] = useState(0);
+
+  const {
+    WORK_BASKET: { MY_WORK_LIST }
+  } = PCore.getConstants();
 
   function initAssignments(): any[] {
     if (assignmentsSource) {
-      assignmentCount = assignmentsSource.length;
       return topThreeAssignments(assignmentsSource);
     }
     // turn off todolist
     return [];
   }
 
+  const deferLoadWorklistItems = useCallback(
+    responseData => {
+      setCount(responseData.totalCount);
+      setAssignments(responseData.data);
+    },
+    [MY_WORK_LIST]
+  );
+
+  useEffect(() => {
+    if (Object.keys(myWorkList).length && myWorkList.datapage) {
+      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, 3, true, context).then(responseData => {
+        deferLoadWorklistItems(responseData);
+      });
+    }
+  }, []);
+
   const getAssignmentId = assignment => {
     return type === CONSTS.TODO ? assignment.ID : assignment.id;
   };
@@ -137,7 +198,7 @@ export default function ToDo(props: ToDoProps) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -146,12 +207,18 @@ export default function ToDo(props: ToDoProps) {
 
   function _showMore() {
     setBShowMore(false);
-    setAssignments(assignmentsSource);
+    if (type === CONSTS.WORKLIST && count && count > assignments.length && !assignmentsSource) {
+      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, count, false, context).then(response => {
+        setAssignments(response.data);
+      });
+    } else {
+      setAssignments(assignmentsSource);
+    }
   }
 
   function _showLess() {
     setBShowMore(true);
-    setAssignments(topThreeAssignments(assignmentsSource));
+    setAssignments(assignments => assignments.slice(0, 3));
   }
 
   function clickGo(assignment) {
@@ -223,12 +290,15 @@ export default function ToDo(props: ToDoProps) {
     );
   };
 
+  // eslint-disable-next-line no-nested-ternary
+  const getCount = () => (assignmentsSource ? assignmentsSource.length : type === CONSTS.WORKLIST ? count : 0);
+
   const toDoContent = (
     <>
       {showTodoList && (
         <CardHeader
           title={
-            <Badge badgeContent={assignmentCount} overlap='rectangular' color='primary'>
+            <Badge badgeContent={getCount()} overlap='rectangular' color='primary'>
               <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
@@ -249,7 +319,7 @@ export default function ToDo(props: ToDoProps) {
             </div>
             {(!isConfirm || canPerform) && (
               <div style={{ marginLeft: 'auto' }}>
-                <IconButton id='go-btn' onClick={() => clickGo(assignment)}>
+                <IconButton id='go-btn' onClick={() => clickGo(assignment)} size='large'>
                   <ArrowForwardIosOutlinedIcon />
                 </IconButton>
               </div>
@@ -267,7 +337,7 @@ export default function ToDo(props: ToDoProps) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge badgeContent={assignmentCount} overlap='rectangular' color='primary'>
+                <Badge badgeContent={getCount()} overlap='rectangular' color='primary'>
                   <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
@@ -280,7 +350,7 @@ export default function ToDo(props: ToDoProps) {
                 <ListItem key={getAssignmentId(assignment)} dense divider onClick={() => clickGo(assignment)}>
                   <ListItemText primary={getAssignmentName(assignment)} secondary={getListItemComponent(assignment)} />
                   <ListItemSecondaryAction>
-                    <IconButton onClick={() => clickGo(assignment)}>
+                    <IconButton onClick={() => clickGo(assignment)} size='large'>
                       <ArrowForwardIosOutlinedIcon />
                     </IconButton>
                   </ListItemSecondaryAction>
@@ -294,7 +364,7 @@ export default function ToDo(props: ToDoProps) {
       {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
       {type === CONSTS.TODO && isConfirm && <>{toDoContent}</>}
 
-      {assignmentCount > 3 && (
+      {getCount() > 3 && (
         <Box display='flex' justifyContent='center'>
           {bShowMore ? (
             <Button color='primary' onClick={_showMore}>

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +16,7 @@ const meta: Meta<typeof PegaDxilMyBoolean> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyBoolean>;
 
-export const BasePegaDxilMyBoolean: Story = args => {
+export const BasePegaDxilMyBoolean: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -31,7 +30,7 @@ export const BasePegaDxilMyBoolean: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => { /* nothing */}

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/index.tsx

@@ -87,7 +87,6 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
         handleEvent(actions, "changeNblur", propName, event.target.checked);
       }}
       onBlur={(event: { target: { checked: any; }; }) => {
-        // @ts-ignore
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}
@@ -98,15 +97,17 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
       <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
+    return (
+      <StyledPegaDxilMyBooleanWrapper>
+       {displayComponent}
+      </StyledPegaDxilMyBooleanWrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/mock.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: true,
   label: 'Boolean label',

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/index.tsx

@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from 'react';
 import {
   CurrencyInput as CosmosCurrency,
@@ -262,9 +261,8 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
         });
       }}
       onBlur={(enteredValue) => {
-        const parsedValue = enteredValue !== '' ? Number(enteredValue) : enteredValue;
+        const parsedValue = enteredValue !== '' ? Number(enteredValue).toString() : enteredValue;
         if (!readOnly && (!value || value !== parsedValue)) {
-           // @ts-ignore
           handleEvent(actions, 'changeNblur', propName, parsedValue);
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');