@pega/dx-component-builder-sdk 0.23.13 → 0.23.15

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

@@ -39,7 +39,6 @@ const StyledTableCell = withStyles((theme: Theme) =>
 // Case widget example is a "history table"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
   const { getPConnect } = props;
   const thePConn = getPConnect();
@@ -164,15 +163,15 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
   }
 
   return (
-  <StyledPegaDxilMyCaseWidgetWrapper>
-    <div id='CaseHistory'>
-      <TableContainer>
-        <Table>
-          <TableHead>{getTableHeader()}</TableHead>
-          <TableBody>{getTableData()}</TableBody>
-        </Table>
-      </TableContainer>
-    </div>
+    <StyledPegaDxilMyCaseWidgetWrapper>
+      <div id='CaseHistory'>
+        <TableContainer>
+          <Table>
+            <TableHead>{getTableHeader()}</TableHead>
+            <TableBody>{getTableData()}</TableBody>
+          </Table>
+        </TableContainer>
+      </div>
     </StyledPegaDxilMyCaseWidgetWrapper>
   );
-}
+}

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

@@ -14,7 +14,7 @@ window.PCore = {
       }
     };
   }
-}
+};
 
 const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
   title: 'PegaDxilMyPageCaseWidget',
@@ -25,21 +25,33 @@ const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
 
-export const BasePegaDxilMyPageCaseWidget: Story = (args) => {
+export const BasePegaDxilMyPageCaseWidget: Story = args => {
 
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };
@@ -49,4 +61,4 @@ export const BasePegaDxilMyPageCaseWidget: Story = (args) => {
 
 BasePegaDxilMyPageCaseWidget.args = {
   ...caseOpConfig
-}
+};

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

@@ -13,13 +13,13 @@ import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface PegaDxilMyPageCaseWidgetProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-    label: string;
-    createDateTime: string;
-    createLabel: string;
-    createOperator: { userName: string; userId: string };
-    updateDateTime: string;
-    updateLabel: string;
-    updateOperator: { userName: string; userId: string };
+  label: string;
+  createDateTime: string;
+  createLabel: string;
+  createOperator: { userName: string; userId: string };
+  updateDateTime: string;
+  updateLabel: string;
+  updateOperator: { userName: string; userId: string };
 }
 
 const useStyles = makeStyles(theme => ({
@@ -38,7 +38,6 @@ const useStyles = makeStyles(theme => ({
 // Page Case Widget example
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidgetProps) {
   // const componentName = "Operator";
   const classes = useStyles();
@@ -192,31 +191,32 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
   // End of popover-related
 
   return (
-  <StyledPegaDxilMyPageCaseWidgetWrapper><>
-      <TextField
-        defaultValue={caseOpName}
-        label={caseOpLabel}
-        onClick={showOperatorDetails}
-        InputProps={{
-          readOnly: true,
-          disableUnderline: true,
-          inputProps: { style: { cursor: 'pointer' } }
-        }}
-      />
-      <br />
-      {Utils.generateDateTime(caseTime, 'DateTime-Since')}
-      <Popover
-        id={popoverId}
-        open={popoverOpen}
-        anchorEl={popoverAnchorEl}
-        onClose={handlePopoverClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-        PaperProps={{ style: { maxWidth: '45ch' } }}
-      >
-        {getPopoverGrid()}
-      </Popover>
-    </>
+    <StyledPegaDxilMyPageCaseWidgetWrapper>
+      <>
+        <TextField
+          defaultValue={caseOpName}
+          label={caseOpLabel}
+          onClick={showOperatorDetails}
+          InputProps={{
+            readOnly: true,
+            disableUnderline: true,
+            inputProps: { style: { cursor: 'pointer' } }
+          }}
+        />
+        <br />
+        {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+        <Popover
+          id={popoverId}
+          open={popoverOpen}
+          anchorEl={popoverAnchorEl}
+          onClose={handlePopoverClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+          PaperProps={{ style: { maxWidth: '45ch' } }}
+        >
+          {getPopoverGrid()}
+        </Popover>
+      </>
     </StyledPegaDxilMyPageCaseWidgetWrapper>
   );
-}
+}

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

@@ -12,8 +12,7 @@ const meta: Meta<typeof PegaDxilMyPageWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 
-export const BasePegaDxilMyPageWidget: Story = (args) => {
-  
+export const BasePegaDxilMyPageWidget: Story = args => {
   const props = {
     datasource: configProps.datasource,
     whatsnewlink: configProps.whatsnewlink
@@ -24,5 +23,5 @@ export const BasePegaDxilMyPageWidget: Story = (args) => {
 
 BasePegaDxilMyPageWidget.args = {
   header: configProps.header,
-  description: configProps.description,
-}
+  description: configProps.description
+};

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

@@ -25,7 +25,6 @@ const useStyles = makeStyles(theme => ({
 // Page Widget example is the "App Announcment"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
@@ -42,28 +41,28 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   };
 
   return (
-  <StyledPegaDxilMyPageWidgetWrapper>
-    <Card title='AppAnnouncement' className={classes.root}>
-      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
-      <CardContent>
-        <Typography variant='body1' gutterBottom>
-          {description}
-        </Typography>
-        {details.map((itm, idx) => {
-          const theKey = `AppAnn-item-${idx}`;
-          return (
-            <Typography key={theKey} variant='body2'>
-              - {itm}
-            </Typography>
-          );
-        })}
-      </CardContent>
-      <CardActions>
-        <Button color='primary' onClick={handleClick} size='small'>
-          See what&apos;s new
-        </Button>
-      </CardActions>
-    </Card>
+    <StyledPegaDxilMyPageWidgetWrapper>
+      <Card title='AppAnnouncement' className={classes.root}>
+        <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
+        <CardContent>
+          <Typography variant='body1' gutterBottom>
+            {description}
+          </Typography>
+          {details.map((itm, idx) => {
+            const theKey = `AppAnn-item-${idx}`;
+            return (
+              <Typography key={theKey} variant='body2'>
+                - {itm}
+              </Typography>
+            );
+          })}
+        </CardContent>
+        <CardActions>
+          <Button color='primary' onClick={handleClick} size='small'>
+            See what&apos;s new
+          </Button>
+        </CardActions>
+      </Card>
     </StyledPegaDxilMyPageWidgetWrapper>
   );
-}
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,12 +1,16 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 
 // FieldGroupProps is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
 interface FieldGroupProps {
   // If any, enter additional props that only exist on this component
-  name: string | object;
+  name?: string;
+  collapsible?: boolean;
+  instructions?: string;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -23,12 +27,22 @@ const useStyles = makeStyles(theme => ({
   },
   fullWidth: {
     width: '100%'
+  },
+  fieldGroupHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+    cursor: collapsible => (collapsible ? 'pointer' : 'auto')
+  },
+  instructionText: {
+    padding: '5px 0'
   }
 }));
 
 export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
-  const { children, name } = props;
-  const classes = useStyles();
+  const { children, name, collapsible = false, instructions } = props;
+  const classes = useStyles(collapsible);
+  const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
     <Grid container>
@@ -36,15 +50,30 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
     </Grid>
   );
 
+  const headerClickHandler = () => {
+    setCollapsed(current => !current);
+  };
+
   return (
     <Grid container spacing={4} justifyContent='space-between'>
       <Grid item style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
-            <b>{props.name}</b>
+            {collapsible ? (
+              <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>
+                {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
+                <b>{name}</b>
+              </span>
+            ) : (
+              <b>{name}</b>
+            )}
           </div>
         )}
-        {descAndChildren}
+        {instructions && instructions !== 'none' && (
+          // eslint-disable-next-line react/no-danger
+          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+        )}
+        {!collapsed && descAndChildren}
       </Grid>
     </Grid>
   );

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Checkbox/Checkbox.tsx

@@ -10,6 +10,8 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   value?: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 export default function CheckboxComponent(props: CheckboxProps) {
@@ -18,7 +20,6 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
   const {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
@@ -28,7 +29,9 @@ export default function CheckboxComponent(props: CheckboxProps) {
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -45,11 +48,11 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Group/Group.tsx

@@ -0,0 +1,37 @@
+import { ReactElement, useMemo } from 'react';
+import { Grid } from '@material-ui/core';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface GroupProps extends PConnFieldProps {
+  children: ReactElement[];
+  heading: string;
+  showHeading: boolean;
+  instructions?: string;
+  collapsible: boolean;
+  type: string;
+}
+
+export default function Group(props: GroupProps) {
+  const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
+
+  const isReadOnly = displayMode === 'LABELS_LEFT';
+
+  const content = useMemo(() => {
+    return (
+      <Grid container spacing={2}>
+        {children?.map(child => (
+          <Grid item xs={12} key={child.key}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    );
+  }, [children, type, isReadOnly]);
+
+  return (
+    <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
+      {content}
+    </FieldGroup>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Group/config-ext.json

@@ -0,0 +1,8 @@
+{
+    "componentKey": "Group",
+    "name": "Group",
+    "label": "Field Group",
+    "description": "Field Group",
+    "type": "Group",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Group/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -46,6 +46,15 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     handleClose();
   }
 
+  function _actionMenuProcessClick(process) {
+    const actionsAPI = thePConn.getActionsApi();
+    const openProcessAction = actionsAPI.openProcessAction.bind(actionsAPI);
+    openProcessAction(process.ID, {
+      ...process
+    });
+    handleClose();
+  }
+
   availableActions.forEach(action => {
     arMenuItems.push(
       <MenuItem key={action.ID} onClick={() => _actionMenuActionsClick(action)}>
@@ -55,7 +64,11 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
   });
 
   availableProcesses.forEach(process => {
-    arMenuItems.push(<MenuItem onClick={handleClose}>{process.name}</MenuItem>);
+    arMenuItems.push(
+      <MenuItem key={process.ID} onClick={() => _actionMenuProcessClick(process)}>
+        {localizedVal(process.name, '', localeKey)}
+      </MenuItem>
+    );
   });
 
   return (

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DefaultForm/DefaultForm.css

@@ -16,12 +16,16 @@
   gap: calc(1rem);
 }
 
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
 .psdk-default-form-instruction-text {

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

@@ -30,6 +30,7 @@ import { getReferenceList } from '@pega/react-sdk-components/lib/components/help
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import { buildFieldsForTable, filterData, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 interface SimpleTableManualProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -171,6 +172,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
   const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
 
+  const fieldsWithPropNames = rawFields.map((field, index) => {
+    return { ...resolvedFields[index], propName: field.config.value.replace('@P .', '') };
+  });
+
   useEffect(() => {
     if (editableMode && !allowEditingInModal) {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -197,6 +202,19 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     return field.name ? field.name : field.cellRenderer;
   });
 
+  const getFormattedValue = (val, key) => {
+    const rawField = fieldsWithPropNames.find(item => item.propName === key);
+    let options = {};
+    if (rawField && ['Boolean', 'Checkbox'].includes(rawField.type)) {
+      const { trueLabel, falseLabel } = rawField.config;
+      options = {
+        trueLabel,
+        falseLabel
+      };
+    }
+    return rawField ? format(val, rawField.type, options) : val;
+  };
+
   // console.log(`SimpleTable displayedColumns:`);
   // console.log(displayedColumns);
 
@@ -209,7 +227,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     for (const key of refKeys) {
       valBuilder = valBuilder[key];
     }
-    return valBuilder;
+    return getFormattedValue(valBuilder, inColKey);
   }
 
   const formatRowsData = data => {

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

@@ -346,23 +346,29 @@ export default function FileUtility(props: FileUtilityProps) {
     if (fileData.attachedFiles && fileData.attachedFiles.length > 0) {
       setProgress(true);
     }
-    for (const file of fileData.attachedFiles) {
-      attachmentUtils
-        .uploadAttachment(file, onUploadProgress, errorHandler, thePConn.getContextName())
-        .then((fileResponse: any) => {
-          if (fileResponse.type === 'File') {
-            (attachmentUtils.linkAttachmentsToCase(caseID, [fileResponse], 'File', thePConn.getContextName()) as Promise<any>)
-              .then(() => {
-                setFileData(current => {
-                  return { ...current, fileList: [], attachedFiles: [] };
-                });
-                getAttachments();
-              })
-              .catch();
+
+    Promise.allSettled(
+      fileData.attachedFiles.map(file => attachmentUtils.uploadAttachment(file, onUploadProgress, errorHandler, thePConn.getContextName()))
+    )
+      .then((fileResponses: any) => {
+        const uploadedFiles: any = [];
+        fileResponses.forEach(fileResponse => {
+          if (fileResponse.status === 'fulfilled') {
+            uploadedFiles.push(fileResponse.value);
           }
-        })
-        .catch();
-    }
+        });
+        if (uploadedFiles.length > 0) {
+          (attachmentUtils.linkAttachmentsToCase(caseID, uploadedFiles, 'File', thePConn.getContextName()) as Promise<any>)
+            .then(() => {
+              setFileData(current => {
+                return { ...current, fileList: [], attachedFiles: [] };
+              });
+              getAttachments();
+            })
+            .catch();
+        }
+      })
+      .catch();
   }
 
   function onAddLinksClick() {