@pega/dx-component-builder-sdk 0.24.3 → 0.24.4

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyForm/index.tsx

@@ -24,12 +24,14 @@ function PegaDxilMyForm(props: PegaDxilMyFormProps) {
   const nCols = parseInt(NumCols, 10);
 
 
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
     const numRegions = '1';
     const gridRepeat = 'repeat('.concat(numRegions).concat(', 1fr)');
     const gridContainer = { colGap: 0, 'margin-line-start': 0 };
     // @ts-ignore
     gridContainer.cols = gridRepeat;
+    // @ts-ignore
+    gridContainer.gap = 2;
 
     return (
       <StyledPegaDxilMyFormWrapper>

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx

@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
@@ -128,6 +128,30 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+  if (readOnly) {
+    return {
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return {};
+          },
+          resolveConfigProps: props => {
+            return props;
+          },
+          getConfigProps: () => {
+            return {
+              value: '',
+              label,
+              displayMode: 'LABELS_LEFT'
+            };
+          },
+          getComponent: () => {
+            return val;
+          }
+        };
+      }
+    };
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -141,7 +165,10 @@ const renderField = resolvedProps => {
 };
 
 export const BasePegaDxilMyTwoColumnForm: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -154,39 +181,92 @@ export const BasePegaDxilMyTwoColumnForm: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
           }
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
+  const regionAChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[0].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[0].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  const regionBChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[1].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[1].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
 
   return (
     <PegaDxilMyTwoColumnForm {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+      {[regionAChildren, regionBChildren]}
     </PegaDxilMyTwoColumnForm>
   );
 };
 
 BasePegaDxilMyTwoColumnForm.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form Region template',
 };

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnForm/index.tsx

@@ -32,7 +32,7 @@ function PegaDxilMyTwoColumnForm(props: PegaDxilMyTwoColumnFormProps) {
   // @ts-ignore
   flexContainer.gap = 2;
 
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
     return (
       <StyledPegaDxilMyTwoColumnFormWrapper>
         <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>

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

@@ -1,7 +1,9 @@
 import MuiPhoneNumber from 'material-ui-phone-number';
+import { useEffect, useState } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 import StyledPegaDxilMyPhoneWrapper from './styles';
 
@@ -17,6 +19,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
@@ -24,7 +27,6 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     validatemessage,
     status,
     onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,6 +34,14 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
   const helperTextToDisplay = validatemessage || helperText;
 
   let testProp = {};
@@ -76,15 +86,14 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
   }
 
   const handleChange = inputVal => {
-    let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
-    phoneValue = `+${phoneValue}`;
-    onChange({ value: phoneValue });
+    setInputValue(inputVal);
   };
 
   const handleBlur = event => {
     const phoneValue = event?.target?.value;
-    event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
-    onBlur(event);
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
   };
 
   return (
@@ -102,7 +111,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
         onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         InputProps={{ ...testProp }}
       />
     </StyledPegaDxilMyPhoneWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/mock.ts

@@ -190,7 +190,24 @@ export const pyReviewRaw = {
           value: '+16397975093',
           label: 'Phone',
           displayMode: 'LABELS_LEFT',
-          hasSuggestions: false
+          hasSuggestions: false,
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
+                };
+              },
+              getStateProps: () => {
+                return { value: '' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/demo.stories.tsx

@@ -182,6 +182,19 @@ export const BasePegaDxilMyForm: Story = args => {
                           return {
                             getComputedVisibility: () => {
                               return true;
+                            },
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '' };
                             }
                           };
                         }

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/demo.stories.tsx

@@ -3,26 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PegaDxilMyCaseWidget from './index';
 import { historyData } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getDataApiUtils: (): any => {
-    return {
-      getData: (): any => {
-        return new Promise(resolve => {
-          resolve(historyData);
-        });
-      }
-    };
-  },
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        CASE_INFO_ID: 'caseInfo.ID'
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof PegaDxilMyCaseWidget> = {
   title: 'PegaDxilMyCaseWidget',
   component: PegaDxilMyCaseWidget,
@@ -33,6 +13,26 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyCaseWidget>;
 
 export const BasePegaDxilMyCaseWidget: Story = args => {
+  window.PCore = {
+    ...window.PCore,
+    getDataApiUtils: (): any => {
+      return {
+        getData: (): any => {
+          return new Promise(resolve => {
+            resolve(historyData);
+          });
+        }
+      };
+    },
+    getConstants: (): any => {
+      return {
+        CASE_INFO: {
+          CASE_INFO_ID: 'caseInfo.ID'
+        }
+      };
+    }
+  };
+
   const props = {
     label: 'Case history',
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -3,26 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PegaDxilMyPageCaseWidget from './index';
 import { caseOpConfig, operatorDetails } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: (): any => {
-    return {
-      getOperatorDetails: () => {
-        return new Promise(resolve => {
-          resolve(operatorDetails);
-        });
-      }
-    };
-  },
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
   title: 'PegaDxilMyPageCaseWidget',
   component: PegaDxilMyPageCaseWidget,
@@ -33,6 +13,26 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
 
 export const BasePegaDxilMyPageCaseWidget: Story = args => {
+  window.PCore = {
+    ...window.PCore,
+    getUserApi: (): any => {
+      return {
+        getOperatorDetails: () => {
+          return new Promise(resolve => {
+            resolve(operatorDetails);
+          });
+        }
+      };
+    },
+    getLocaleUtils: (): any => {
+      return {
+        getLocaleValue: val => {
+          return val;
+        }
+      };
+    }
+  };
+  
   const props = {
     getPConnect: () => {
       return {

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyPageWidget from './index';
-import { configProps } from './mock';
+import { configProps, worklistData } from './mock';
 
 const meta: Meta<typeof PegaDxilMyPageWidget> = {
   title: 'PegaDxilMyPageWidget',
@@ -13,9 +13,52 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 
 export const BasePegaDxilMyPageWidget: Story = args => {
+    window.PCore = {
+    ...window.PCore,
+    getDataApiUtils: (): any => {
+      return {
+        getData: () => {
+          return new Promise(resolve => {
+            resolve(worklistData);
+          });
+        }
+      };
+    },
+    getConstants: (): any => {
+      return {
+        CASE_INFO: {
+          INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
+        }
+      };
+    },
+  };
+
   const props = {
     datasource: configProps.datasource,
-    whatsnewlink: configProps.whatsnewlink
+    whatsnewlink: configProps.whatsnewlink,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        }
+      };
+    }
   };
 
   return <PegaDxilMyPageWidget {...props} {...args} />;

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -1,7 +1,26 @@
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
+import { 
+  Card, 
+  CardContent, 
+  CardHeader, 
+  Typography,
+  CardActions, 
+  Button,
+  TableContainer,
+  Table,
+  TableBody,
+  TableHead,
+  withStyles,
+  createStyles,
+  Theme,
+  TableCell,
+  TableRow 
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import StyledPegaDxilMyPageWidgetWrapper from './styles';
+import isDeepEqual from 'fast-deep-equal/react';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { useRef, useEffect, useState } from 'react';
 
 interface PegaDxilMyPageWidgetProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -20,13 +39,29 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-// Duplicated runtime code from React SDK
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver',
+      backgroundColor: theme.palette.text.disabled,
+      color: theme.palette.getContrastText(theme.palette.text.disabled)
+    },
+    body: {
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver'
+      // fontSize: 14,
+    }
+  })
+)(TableCell);
 
 // Page Widget example is the "App Announcment"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
-  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
+  const { header = '', description = '', datasource = [], whatsnewlink = '', getPConnect } = props;
   let details = [];
   if (datasource && datasource.source) {
     details = datasource.source.map(item => {
@@ -34,12 +69,136 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
     });
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [waitingForData, setWaitingForData] = useState<boolean>(true);
+  const thePConn = getPConnect();
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
+  const dataViewName = 'D_pyWorkHistory';
+  const context = thePConn.getContextName();
+
+  const rowData: any = useRef([]);
+
   const classes = useStyles();
 
+  const displayedColumns = [
+    {
+      label: thePConn.getLocalizedValue('Case type', '', ''),
+      type: 'TextInput',
+      fieldName: 'pxProcessName'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Key', '', ''),
+      type: 'TextInput',
+      fieldName: 'pxRefObjectInsName'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Status', '', ''),
+      type: 'TextInput',
+      fieldName: 'pyAssignmentStatus'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Stage', '', ''),
+      type: 'TextInput',
+      fieldName: 'pxTaskLabel'
+    } // 2nd and 3rd args empty string until typedef marked correctly
+  ];
+
+  function computeRowData(rows: Object[]): void {
+    const theRowData: Object[] = [];
+
+    rows.forEach((row: any, rowIndex: number) => {
+      // Now, for each property in the index of row properties (displayedColumns), add an object
+      //  to a new array of values
+      const rowDisplayValues: any = [];
+
+      displayedColumns.forEach((column: any, rowValIndex) => {
+        const theType = column.type;
+        const theFieldName = column.fieldName;
+        const theValue =
+          theType === 'Date' || theType === 'DateTime' ? Utils.generateDateTime(row[theFieldName], 'DateTime-Short') : row[theFieldName];
+        rowDisplayValues[rowValIndex] = theValue;
+      });
+
+      theRowData[rowIndex] = rowDisplayValues;
+    });
+
+    if (!isDeepEqual(theRowData, rowData.current)) {
+      // Only update rowData.current when it actually changes (to prevent infinite loop)
+      rowData.current = theRowData;
+    }
+  }
+
   const handleClick = () => {
     window.open(whatsnewlink);
   };
 
+  // Get the case history data when component mounted/initialized
+  useEffect(() => {
+    let bCallSetWaitingForData = true;
+
+    const worklistData = PCore.getDataApiUtils().getData(
+      dataViewName,
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
+      context
+    ) as Promise<any>;
+
+    worklistData.then((worklistJSON: any) => {
+      const tableDataResults = worklistJSON.data.data;
+
+      // compute the rowData using the tableDataResults
+      computeRowData(tableDataResults);
+
+      // At this point, if we have data ready to render and haven't been asked
+      //  to NOT call setWaitingForData, we can stop progress indicator
+      if (bCallSetWaitingForData) {
+        setWaitingForData(false);
+      }
+    });
+
+    return () => {
+      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+      // The useEffect closure lets us have access to the bCallSetWaitingForData
+      //  variable inside the useEffect and inside the "then" clause of the
+      //  historyData promise
+      //  So, if this cleanup code gets run before the promise .then is called,
+      //  we can avoid calling the useState setter which would otherwise show a warning
+      bCallSetWaitingForData = false;
+    };
+  }, []);
+
+  function getTableHeader() {
+    const theRowKey = 'CaseHistory.TableHeader';
+
+    const theHeaderCells: any[] = displayedColumns.map((headerCol, index) => {
+      const theCellKey = `${theRowKey}.${index}`;
+      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>;
+    });
+
+    return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
+  }
+
+  function getTableData() {
+    const theDataRows: any[] = [];
+
+    // Note: using rowData.current since we're using useRef as a mutatable
+    //  value that's only updated when it changes.
+    if (rowData.current.length > 0) {
+      rowData.current.forEach((dataRow: Object[], index) => {
+        // using dataRow[0]-dataRow[1] as the array key since it's a unique value
+        const theKey = `CaseHistory-${index}`;
+        theDataRows.push(
+          <TableRow key={theKey}>
+            <StyledTableCell>{dataRow[0] ? (dataRow[0] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? (dataRow[1] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? (dataRow[2] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[3] ? (dataRow[3] as any) : '---'}</StyledTableCell>
+          </TableRow>
+        );
+      });
+    }
+    return theDataRows;
+  }
+
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
       <Card title='AppAnnouncement' className={classes.root}>
@@ -63,6 +222,12 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
           </Button>
         </CardActions>
       </Card>
+      <TableContainer>
+        <Table>
+          <TableHead>{getTableHeader()}</TableHead>
+          <TableBody>{getTableData()}</TableBody>
+        </Table>
+      </TableContainer>
     </StyledPegaDxilMyPageWidgetWrapper>
   );
 }