@pega/react-sdk-overrides 0.23.18 → 0.23.20

package/lib/template/ListView/ListView.tsx

@@ -53,11 +53,6 @@ let menuColumnLabel = '';
 
 let sortColumnId: any;
 
-// let dialogContainsFilter: string = "contains";
-// let dialogContainsValue: string = "";
-// let dialogDateFilter: string = "notequal";
-// let dialogDateValue: string = "";
-
 const filterByColumns: Array<any> = [];
 
 export default function ListView(props) {
@@ -217,19 +212,6 @@ export default function ListView(props) {
     setPage(0);
   };
 
-  // function getDisplayColumns(fields = []) {
-  //   let arReturn = fields.map(( field: any, colIndex) => {
-  //     let theField = field.config.value.substring(field.config.value.indexOf(" ")+1);
-  //     if (theField.indexOf(".") == 0) {
-  //       theField = theField.substring(1);
-  //     }
-
-  //     return theField;
-  //   });
-  //   return arReturn;
-
-  // }
-
   const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
   function getHeaderCells(colFields, fields, presetFields) {
     const arReturn = colFields.map((field: any, index) => {
@@ -345,10 +327,6 @@ export default function ListView(props) {
       myColList.push(col.id);
     });
 
-    // for (const col of arCols) {
-    //   myColList.push(col.id);
-    // }
-
     return myColList;
   }
 
@@ -381,7 +359,7 @@ export default function ListView(props) {
 
     let field = getFieldFromFilter(filterExpression, isDateRange);
     selectParam = [];
-    // Constructing the select parameters list( will be sent in dashboardFilterPayload)
+    // Constructing the select parameters list (will be sent in dashboardFilterPayload)
     columnList.forEach(col => {
       selectParam.push({
         field: col
@@ -417,7 +395,7 @@ export default function ListView(props) {
       // If we reach here that implies we've at least one valid filter, hence setting the flag
       validFilter = true;
       /** Below are the 2 cases for- Text & Date-Range filter types where we'll construct filter data which will be sent in the dashboardFilterPayload
-       * In Nebula, through Repeating Structures they might be using several APIs to do it, we're doing it here
+       * In Constellation DX Components, through Repeating Structures they might be using several APIs to do it. We're doing it here
       */
       if (isDateRange) {
         const dateRelationalOp = filter?.AND ? 'AND' : 'OR';
@@ -518,7 +496,8 @@ export default function ListView(props) {
         field: field.name
       });
     } else {
-      // NOTE: If we ever decide to not set up all the `fieldDefs` on select, ensure that the fields corresponding to `state.groups` are set up. Needed in Client-mode grouping/pagination.
+      // NOTE: If we ever decide to not set up all the `fieldDefs` on select, ensure that the fields
+      //  corresponding to `state.groups` are set up. Needed in Client-mode grouping/pagination.
       fieldDefs.forEach(field => {
         if (!listFields.find(f => f.field === field.name)) {
           listFields.push({
@@ -868,26 +847,6 @@ export default function ListView(props) {
     // move data to array and then sort
     setRows(theData);
     createSortHandler(sortColumnId);
-
-    // grouping here
-
-    // let reGroupData = this.addGroups(theData, this.groupByColumns$);
-
-    // this.repeatList$.data = [];
-    // this.repeatList$.data.push( ...reGroupData);
-
-    // if (this.searchFilter && this.searchFilter != "") {
-    //   this.repeatList$.filter = this.searchFilter;
-    // }
-    // else {
-    //   this.perfFilter = performance.now().toString();
-    //   this.repeatList$.filter = this.perfFilter;
-    // }
-    // this.repeatList$.filter = "";
-
-    // if (this.repeatList$.paginator) {
-    //   this.repeatList$.paginator.firstPage();
-    // }
   }
 
   function _dialogContainsFilter(event) {
@@ -1349,10 +1308,8 @@ export default function ListView(props) {
 }
 
 ListView.defaultProps = {
-  // parameters: undefined
 };
 
 ListView.propTypes = {
   getPConnect: PropTypes.func.isRequired
-  // parameters: PropTypes.objectOf(PropTypes.any)
 };

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -147,14 +147,12 @@ export default function SimpleTableManual(props) {
     }
   }, [referenceList.length]);
 
-  // Nebula has other handling for isReadOnlyMode but has Cosmos-specific code
-  //  so ignoring that for now...
   // fieldDefs will be an array where each entry will have a "name" which will be the
   //  "resolved" property name (that we can use as the colId) though it's not really
   //  resolved. The buildFieldsForTable helper just removes the "@P " (which is what
-  //  Nebula does). It will also have the "label", and "meta" contains the original,
+  //  Constellation DX Components do). It will also have the "label", and "meta" contains the original,
   //  unchanged config info. For now, much of the info here is carried over from
-  //  Nebula and we may not end up using it all.
+  //  Constellation DX Components.
   const fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
   const displayedColumns = fieldDefs.map(field => {
@@ -164,18 +162,6 @@ export default function SimpleTableManual(props) {
   // console.log(`SimpleTable displayedColumns:`);
   // console.log(displayedColumns);
 
-  // And now we can process the resolvedFields to add in the "name"
-  //  from from the fieldDefs. This "name" is the value that
-  //  we'll share to connect things together in the table.
-
-  // const processedFields = resolvedFields.map((field, i) => {
-  //   field.config['name'] = displayedColumns[i]; // .config["value"].replace(/ ./g,"_");   // replace space dot with underscore
-  //   return field;
-  // });
-
-  // console.log("SimpleTable processedFields:");
-  // console.log(processedFields);
-
   // return the value that should be shown as the contents for the given row data
   //  of the given row field
   function getRowValue(inRowData: Object, inColKey: string): any {
@@ -226,25 +212,18 @@ export default function SimpleTableManual(props) {
     }
   }
 
+  // May be useful for debugging or understanding how it works.
   // These are the data structures referred to in the html file.
   //  These are the relationships that make the table work
   //  displayedColumns: key/value pairs where key is order of column and
   //    value is the property shown in that column. Ex: 1: "FirstName"
-  //  processedFields: key/value pairs where each key is order of column
-  //    and each value is an object of more detailed information about that
-  //    column.
   //  rowData: array of each row's key/value pairs. Inside each row,
   //    each key is an entry in displayedColumns: ex: "FirstName": "Charles"
   //    Ex: { 1: {config: {label: "First Name", readOnly: true: name: "FirstName"}}, type: "TextInput" }
   //    The "type" indicates the type of component that should be used for editing (when editing is enabled)
   //
-  //  Note that the "property" shown in the column ("FirstName" in the above examples) is what
-  //  ties the 3 data structures together.
-
   // console.log("SimpleTable displayedColumns:");
   // console.log(displayedColumns);
-  // console.log("SimpleTable processedFields:");
-  // console.log(processedFields);
   // console.log(`SimpleTable rowData (${rowData.length} row(s)):`);
   // console.log(JSON.stringify(rowData));
 

package/lib/widget/ToDo/ToDo.css

@@ -34,7 +34,7 @@
   min-width: 2.5rem;
   min-height: 2.5rem;
   max-width: 2.5rem;
-  max-height: 2.5rem; 
+  max-height: 2.5rem;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
@@ -47,8 +47,8 @@
 }
 
 .psdk-todo-assignment {
-  display: inline-flex; 
-  width:100%; 
+  display: inline-flex;
+  width:100%;
   padding: 0.625rem 0rem;
 }
 
@@ -77,7 +77,7 @@
 }
 
 .psdk-todo-card {
-  width: 100%; 
+  width: 100%;
   padding-left: 0.625rem;
 }
 
@@ -85,3 +85,9 @@
   width: 100%;
   text-align: center;
 }
+
+.psdk-todo-avatar-header{
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}

package/lib/widget/ToDo/ToDo.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-shadow */
+/* eslint-disable @typescript-eslint/no-shadow */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -167,14 +169,28 @@ export default function ToDo(props) {
       });
   }
 
+  const renderTaskId = (type, getPConnect, showTodoList, assignment) => {
+    const displayID = getID(assignment);
+
+    if ((showTodoList && type !== CONSTS.TODO) || assignment.isChild === true) {
+      /* Supress link for todo inside flow step */
+      return (
+        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
+      );
+    }
+    return displayID;
+  };
+
   const getListItemComponent = assignment => {
     if (isDesktop) {
       return (
         <>
           Task in
-          <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
-          {` \u2022 `}
-          <span className='psdk-todo-assignment-status'>{assignment.status}</span>
+          {renderTaskId(type, getPConnect, showTodoList, assignment)}
+          {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
+          {type === CONSTS.WORKLIST && assignment.status ? (
+            <span className='psdk-todo-assignment-status'>{assignment.status}</span>
+          ) : undefined}
           {` \u2022  Urgency  ${getPriority(assignment)}`}
         </>
       );
@@ -189,51 +205,98 @@ export default function ToDo(props) {
 
   return (
     <React.Fragment>
-      <Card className={classes.root}>
-        {showTodoList && (
-          <CardHeader
-            title={
+      {type === CONSTS.WORKLIST && (
+        <Card className={classes.root}>
+          {showTodoList && (
+            <CardHeader
+              title={
+                <Badge badgeContent={assignmentCount} color='primary'>
+                  <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+                </Badge>
+              }
+              avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
+            ></CardHeader>
+          )}
+          <CardContent>
+            <List>
+              {assignments.map(assignment => (
+                <ListItem
+                  key={getAssignmentId(assignment)}
+                  dense
+                  divider
+                  onClick={() => clickGo(assignment)}
+                >
+                  <ListItemText
+                    primary={getAssignmentName(assignment)}
+                    secondary={getListItemComponent(assignment)}
+                  />
+                  {type === CONSTS.WORKLIST && (
+                    <ListItemSecondaryAction>
+                      <IconButton onClick={() => clickGo(assignment)}>
+                        <ArrowForwardIosOutlinedIcon />
+                      </IconButton>
+                    </ListItemSecondaryAction>
+                  )}
+                </ListItem>
+              ))}
+            </List>
+          </CardContent>
+          {assignmentCount > 3 && (
+            <Box display='flex' justifyContent='center'>
+              {bShowMore ? (
+                <Button color='primary' onClick={_showMore}>
+                  Show more
+                </Button>
+              ) : (
+                <Button onClick={_showLess}>Show less</Button>
+              )}
+            </Box>
+          )}
+        </Card>
+      )}
+
+      {type === CONSTS.TODO && (
+        <>
+          {showTodoList && (
+            <>
               <Badge badgeContent={assignmentCount} color='primary'>
                 <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
               </Badge>
-            }
-            avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
-          ></CardHeader>
-        )}
-        <CardContent>
+            </>
+          )}
           <List>
             {assignments.map(assignment => (
-              <ListItem
-                key={getAssignmentId(assignment)}
-                dense
-                divider
-                onClick={() => clickGo(assignment)}
-              >
-                <ListItemText
-                  primary={getAssignmentName(assignment)}
-                  secondary={getListItemComponent(assignment)}
-                />
-                <ListItemSecondaryAction>
-                  <IconButton onClick={() => clickGo(assignment)}>
-                    <ArrowForwardIosOutlinedIcon />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              </ListItem>
+              <>
+                <div className='psdk-todo-avatar-header'>
+                  <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
+                    {currentUserInitials}
+                  </Avatar>
+                  <div style={{ display: 'block' }}>
+                    <Typography variant='h6'>{assignment?.name}</Typography>
+                    {`Task in ${renderTaskId(
+                      type,
+                      getPConnect,
+                      showTodoList,
+                      assignment
+                    )} \u2022  Urgency  ${getPriority(assignment)}`}
+                  </div>
+                </div>
+              </>
             ))}
           </List>
-        </CardContent>
-        {assignmentCount > 3 && (
-          <Box display='flex' justifyContent='center'>
-            {bShowMore ? (
-              <Button color='primary' onClick={_showMore}>
-                Show more
-              </Button>
-            ) : (
-              <Button onClick={_showLess}>Show less</Button>
-            )}
-          </Box>
-        )}
-      </Card>
+          {assignmentCount > 3 && (
+            <Box display='flex' justifyContent='center'>
+              {bShowMore ? (
+                <Button color='primary' onClick={_showMore}>
+                  Show more
+                </Button>
+              ) : (
+                <Button onClick={_showLess}>Show less</Button>
+              )}
+            </Box>
+          )}
+        </>
+      )}
 
       <Snackbar
         open={showSnackbar}

package/package.json

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