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

package/tests/assets/sdk-a/components/createAll/override-sdk/template/app-shell/app-shell.component.ts

@@ -143,7 +143,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
           this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
 
           if (this.bOkDisplayError) {
-            const config = { panelClass: ['snackbar-newline'] };
+            const config = { panelClass: ['snackbar-newline'], duration: 5000 };
             this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
           }
         }
@@ -159,7 +159,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
         this.bOkDisplayError = true;
 
         if (this.bOkDisplayError) {
-          const config = { panelClass: ['snackbar-newline'] };
+          const config = { panelClass: ['snackbar-newline'], duration: 5000 };
           this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
         }
         // this.snackBarRef.afterDismissed().subscribe( info => {

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.ts

@@ -223,7 +223,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
     const actionsAPI = this.pConn$.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
-    openLocalAction(editAction.ID, { ...editAction });
+    openLocalAction(editAction.ID, { ...editAction, containerName: 'modal', type: 'express' });
   }
 
   _menuActionClick(data) {

package/tests/assets/sdk-a/components/createAll/override-sdk/template/default-form/default-form.component.scss

@@ -1,27 +1,31 @@
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-two-column {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-three-column {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: calc(1rem);
+  column-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;
 }
 
 .template-title-container {

package/tests/assets/sdk-a/components/createAll/override-sdk/template/details/details.component.ts

@@ -76,7 +76,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
       fields?.forEach(field => {
         const thePConn = field.getPConnect();
         const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference') {
+        if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
           configProps.displayMode = 'LABELS_LEFT';
@@ -89,6 +89,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
           };
           const viewContConfig = {
             meta: {
+              ...thePConn.getMetadata(),
               type: theCompType,
               config: configProps
             },

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.ts

@@ -149,24 +149,30 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       this.lu_bLoading$ = true;
     }
 
-    // const uploadedFiles = [];
-
-    for (const file of files) {
-      attachmentUtils
-        .uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName())
-        .then((fileResponse: any) => {
-          if (fileResponse.type === 'File') {
-            (attachmentUtils.linkAttachmentsToCase(caseID, [fileResponse], 'File', this.pConn$.getContextName()) as Promise<any>)
-              .then(() => {
-                this.refreshAttachments();
-              })
-              .catch(console.error);
+    const arFiles: any = Array.from(files);
+
+    Promise.allSettled(
+      arFiles.map(file => attachmentUtils.uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName()))
+    )
+      .then((fileResponses: any) => {
+        const uploadedFiles: any = [];
+        fileResponses.forEach(fileResponse => {
+          if (fileResponse.status === 'fulfilled') {
+            uploadedFiles.push(fileResponse.value);
           }
-        })
-        .catch(console.error);
-    }
+        });
+        if (uploadedFiles.length > 0) {
+          (attachmentUtils.linkAttachmentsToCase(caseID, uploadedFiles, 'File', this.pConn$.getContextName()) as Promise<any>)
+            .then(() => {
+              this.refreshAttachments();
+            })
+            .catch();
+        }
+      })
+      .catch();
 
     this.arFileList$ = [];
+    this.lu_bLoading$ = false;
   }
 
   refreshAttachments() {

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof PegaDxilMyTestText> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyTestText>;
 
-export const BasePegaDxilMyTestText: Story = (args) => {
+export const BasePegaDxilMyTestText: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -34,8 +34,12 @@ export const BasePegaDxilMyTestText: Story = (args) => {
         }
       };
     },
-    onChange: (event) => { setValue(event.target.value); },
-    onBlur: () => { return configProps.value; }
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
   };
 
   return <PegaDxilMyTestText {...props} {...args} />;
@@ -51,5 +55,5 @@ BasePegaDxilMyTestText.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/index.tsx

@@ -14,7 +14,6 @@ interface PegaDxilMyTestTextProps extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // 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 PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
@@ -81,21 +80,21 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
 
   return (
     <StyledPegaDxilMyTestTextWrapper>
-    <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={handleChange}
-      onBlur={!readOnly ? handleBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={inputValue}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-    />
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={inputValue}
+        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+      />
     </StyledPegaDxilMyTestTextWrapper>
   );
 }

package/tests/assets/sdk-r/components/create/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/create/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/create/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/create/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/create/override-sdk/field/Group/index.tsx

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

package/tests/assets/sdk-r/components/create/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/create/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/create/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/create/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() {

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

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

@@ -0,0 +1,54 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock';
+
+import PegaDxilMyTestText from './index';
+
+export default {
+  title: 'PegaDxilMyTestText',
+  decorators: [withKnobs],
+  component: PegaDxilMyTestText
+};
+
+export const BasePegaDxilMyTestText = () => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} />
+    </>
+  );
+};