@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/field/AutoComplete/AutoComplete.tsx

@@ -1,30 +1,31 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { TextField } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import isDeepEqual from 'fast-deep-equal/react';
+
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IOption {
   key: string;
   value: string;
 }
 
-const preProcessColumns = (columnList) => {
-  return columnList.map((col) => {
+const preProcessColumns = columnList => {
+  return columnList.map(col => {
     const tempColObj = { ...col };
     tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
     return tempColObj;
   });
 };
 
-const getDisplayFieldsMetaData = (columnList) => {
-  const displayColumns = columnList.filter((col) => col.display === 'true');
+const getDisplayFieldsMetaData = columnList => {
+  const displayColumns = columnList.filter(col => col.display === 'true');
   const metaDataObj: any = { key: '', primary: '', secondary: [] };
-  const keyCol = columnList.filter((col) => col.key === 'true');
+  const keyCol = columnList.filter(col => col.key === 'true');
   metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
   for (let index = 0; index < displayColumns.length; index += 1) {
     if (displayColumns[index].primary === 'true') {
@@ -47,7 +48,7 @@ interface AutoCompleteProps extends PConnFieldProps {
   listType: string;
   parameters?: any;
   datasource: any;
-  columns: Array<any>;
+  columns: any[];
 }
 
 export default function AutoComplete(props: AutoCompleteProps) {
@@ -76,14 +77,14 @@ export default function AutoComplete(props: AutoCompleteProps) {
   const context = getPConnect().getContextName();
   let { listType, parameters, datasource = [], columns = [] } = props;
   const [inputValue, setInputValue] = useState('');
-  const [options, setOptions] = useState<Array<IOption>>([]);
+  const [options, setOptions] = useState<IOption[]>([]);
   const [theDatasource, setDatasource] = useState(null);
   let selectedValue: any = '';
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps()["value"];
+  const propName = (thePConn.getStateProps() as any).value;
 
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
@@ -92,7 +93,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
 
   const flattenParameters = (params = {}) => {
     const flatParams = {};
-    Object.keys(params).forEach((key) => {
+    Object.keys(params).forEach(key => {
       const { name, value: theVal } = params[key];
       flatParams[name] = theVal;
     });
@@ -105,13 +106,10 @@ export default function AutoComplete(props: AutoCompleteProps) {
   if (deferDatasource && datasourceMetadata?.datasource?.name) {
     listType = 'datapage';
     datasource = datasourceMetadata.datasource.name;
-    parameters = flattenParameters(datasourceMetadata?.datasource?.parameters);
-    const displayProp = datasourceMetadata.datasource.propertyForDisplayText.startsWith('@P')
-      ? datasourceMetadata.datasource.propertyForDisplayText.substring(3)
-      : datasourceMetadata.datasource.propertyForDisplayText;
-    const valueProp = datasourceMetadata.datasource.propertyForValue.startsWith('@P')
-      ? datasourceMetadata.datasource.propertyForValue.substring(3)
-      : datasourceMetadata.datasource.propertyForValue;
+    const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+    parameters = flattenParameters(dataSourceParameters);
+    const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+    const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
     columns = [
       {
         key: 'true',
@@ -137,9 +135,9 @@ export default function AutoComplete(props: AutoCompleteProps) {
   useEffect(() => {
     if (!displayMode && listType !== 'associated') {
       getDataPage(datasource, parameters, context).then((results: any) => {
-        const optionsData: Array<any> = [];
+        const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
-        results?.forEach((element) => {
+        results?.forEach(element => {
           const val = element[displayColumn.primary]?.toString();
           const obj = {
             key: element[displayColumn.key] || element.pyGUID,
@@ -157,11 +155,11 @@ export default function AutoComplete(props: AutoCompleteProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (value) {
-    const index = options?.findIndex((element) => element.key === value);
+    const index = options?.findIndex(element => element.key === value);
     if (index > -1) {
       selectedValue = options[index].value;
     } else {
@@ -182,7 +180,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
   };
 
   if (readOnly) {
-    const theValAsString = options?.find((opt) => opt.key === value)?.value;
+    const theValAsString = options?.find(opt => opt.key === value)?.value;
     return <TextInput {...props} value={theValAsString} />;
   }
   // Need to use both getOptionLabel and getOptionSelected to map our
@@ -201,14 +199,14 @@ export default function AutoComplete(props: AutoCompleteProps) {
       value={selectedValue}
       inputValue={inputValue || selectedValue}
       onInputChange={handleInputValue}
-      renderInput={(params) => (
+      renderInput={params => (
         <TextField
           {...params}
           fullWidth
-          variant="outlined"
+          variant='outlined'
           helperText={helperTextToDisplay}
           placeholder={placeholder}
-          size="small"
+          size='small'
           required={required}
           error={status === 'error'}
           label={label}

package/lib/field/AutoComplete/config-ext.json

@@ -4,8 +4,7 @@
   "description": "Picklist",
   "type": "Field",
   "subtype": "Picklist",
-  "componentKey" : "AutoComplete",
+  "componentKey": "AutoComplete",
   "icon": "",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/CancelAlert/CancelAlert.tsx

@@ -1,44 +1,91 @@
 import React, { useState } from 'react';
 import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import './CancelAlert.css';
-
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
-declare const PCore: any;
 
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './CancelAlert.css';
 
 interface CancelAlertProps extends PConnFieldProps {
   // If any, enter additional props that only exist on CancelAlert here
-  pConn: any,
-  updateAlertState: any
+  heading: string;
+  content: string;
+  itemKey: string;
+  hideDelete: boolean;
+  isDataObject: boolean;
+  skipReleaseLockRequest: any;
+  dismiss: Function;
 }
 
-
 export default function CancelAlert(props: CancelAlertProps) {
-  const { pConn, updateAlertState } = props;
-  const [showSnackbar, setShowSnackbar] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
-
-  const itemKey = pConn.getContextName();
-  const caseInfo = pConn.getCaseInfo();
-  const caseName = caseInfo.getName();
-  const ID = caseInfo.getID();
+  const { heading, content, getPConnect, itemKey: containerItemID, hideDelete, isDataObject, skipReleaseLockRequest, dismiss } = props;
+  const actionsAPI = getPConnect().getActionsApi();
+  const containerManagerAPI = getPConnect().getContainerManager();
+  const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+  const isBulkAction = getPConnect()?.options?.isBulkAction;
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const broadCastUtils: any = PCore.getCoexistenceManager().getBroadcastUtils();
+  const isReverseCoexistence = broadCastUtils.isReverseCoexistenceCaseLoaded();
   const localeCategory = 'ModalContainer';
+  const btnIds = {
+    SAVE_AND_CLOSE: 'saveAndClose',
+    CONTINUE_WORKING: 'continueWorking',
+    DELETE: 'delete'
+  };
 
-  function showToast(message: string) {
-    setSnackbarMessage(message);
-    setShowSnackbar(true);
+  const [buttonsState, setButtonsState] = useState({
+    [btnIds.SAVE_AND_CLOSE]: false,
+    [btnIds.DELETE]: false
+  });
+
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  function disableButton(id) {
+    setButtonsState(prevState => ({
+      ...prevState,
+      [id]: true
+    }));
   }
 
-  const dismissCancelAlertOnly = () => {
-    updateAlertState(true);
-  };
+  function enableButton(id) {
+    setButtonsState(prevState => ({
+      ...prevState,
+      [id]: false
+    }));
+  }
 
-  const dismissModal = () => {
-    updateAlertState(false);
-  };
+  function cancelHandler() {
+    if (isReverseCoexistence) {
+      dismiss(true);
+      // @ts-ignore - An argument for 'payload' was not provided.
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);
+    } else if (!isDataObject && !isLocalAction && !isBulkAction) {
+      disableButton(btnIds.DELETE);
+      actionsAPI
+        .deleteCaseInCreateStage(containerItemID, hideDelete)
+        .then(() => {
+          // @ts-ignore - An argument for 'payload' was not provided.
+          PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
+        })
+        .catch(() => {
+          setSnackbarMessage(localizedVal('Delete failed.', localeCategory));
+          setShowSnackbar(true);
+        })
+        .finally(() => {
+          enableButton(btnIds.DELETE);
+          dismiss(true);
+        });
+    } else if (isLocalAction) {
+      dismiss(true);
+      actionsAPI.cancelAssignment(containerItemID);
+    } else if (isBulkAction) {
+      dismiss(true);
+      actionsAPI.cancelBulkAction(containerItemID);
+    } else {
+      dismiss(true);
+      containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
+    }
+  }
 
   function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
     if (reason === 'clickaway') {
@@ -47,74 +94,41 @@ export default function CancelAlert(props: CancelAlertProps) {
     setShowSnackbar(false);
   }
 
-  const buttonClick = action => {
-    const actionsAPI = pConn.getActionsApi();
-
-    switch (action) {
-      case 'save':
-        // eslint-disable-next-line no-case-declarations
-        const savePromise = actionsAPI.saveAndClose(itemKey);
-
-        savePromise
-          .then(() => {
-            dismissModal();
-
-            PCore.getPubSubUtils().publish(
-              PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED
-            );
-          })
-          .catch(() => {
-            showToast(localizedVal('Save failed', localeCategory));
-          });
-        break;
-
-      case 'continue':
-        dismissCancelAlertOnly();
-        break;
-
-      case 'delete':
-        // eslint-disable-next-line no-case-declarations
-        const deletePromise = actionsAPI.deleteCaseInCreateStage(itemKey);
-
-        deletePromise
-          .then(() => {
-            dismissModal();
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
-          })
-          .catch(() => {
-            showToast(localizedVal('Delete failed.', localeCategory));
-          });
-        break;
+  const leftButton = (
+    <Button
+      name={btnIds.CONTINUE_WORKING}
+      variant='contained'
+      color='secondary'
+      onClick={() => {
+        dismiss();
+        if (isReverseCoexistence) {
+          broadCastUtils.setCallBackFunction(null);
+          broadCastUtils.setIsDirtyDialogActive(false);
+        }
+      }}
+    >
+      {localizedVal('Go back', localeCategory)}
+    </Button>
+  );
 
-      default:
-        break;
-    }
-  };
+  const rightButton = (
+    <Button name={btnIds.DELETE} variant='contained' color='primary' disabled={buttonsState[btnIds.DELETE]} onClick={cancelHandler}>
+      {localizedVal('Discard', localeCategory)}
+    </Button>
+  );
 
   return (
     <>
       <div className='cancel-alert-background'>
         <div className='cancel-alert-top'>
-          <h3>{`Delete ${caseName}(${ID})`}</h3>
+          <h3>{localizedVal(heading, localeCategory)}</h3>
           <div>
-            <p>{`${localizedVal('Are you sure you want to delete', localeCategory)} ${caseName} (${ID})?`}</p>
-            <p>{localizedVal('Alternatively, you can continue working or save your work for later.', localeCategory)}</p>
+            <p>{localizedVal(content, localeCategory)}</p>
           </div>
           <div className='action-controls'>
             <Grid container spacing={4} justifyContent='space-between'>
-              <Grid item>
-                <Button variant='outlined' color='primary' onClick={() => buttonClick('save')}>
-                  {localizedVal('Save for later', localeCategory)}
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
-                  {localizedVal('Continue Working', localeCategory)}
-                </Button>
-                <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
-                  {localizedVal('Delete', localeCategory)}
-                </Button>
-              </Grid>
+              <Grid item>{leftButton}</Grid>
+              <Grid item>{rightButton}</Grid>
             </Grid>
           </div>
         </div>
@@ -132,4 +146,4 @@ export default function CancelAlert(props: CancelAlertProps) {
       />
     </>
   );
-};
+}

package/lib/field/CancelAlert/index.tsx

@@ -1 +1 @@
-export { default } from './CancelAlert';
+export { default } from './CancelAlert';

package/lib/field/Checkbox/Checkbox.tsx

@@ -1,49 +1,44 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  FormHelperText
-} from '@material-ui/core';
+/* eslint-disable react/no-array-index-key */
+import { useState, useEffect } from 'react';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-// import type { PConnProps } from '../../../types/PConnProps';
+import { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { makeStyles } from '@material-ui/core/styles';
 
-// Checkbox passes in 'value' as a boolean. So can't use the default
-//  PConnFieldProps since it expects value to be a string.
-// But can't use CheckBoxProps until getValidationApi() knows about validate method
-//  Currently just thinks that returns an "object"
-// interface CheckboxProps extends PConnProps {
-//   // If any, enter additional props that only exist on Checkbox here
-//   // Everything from PConnFieldProps except value and change type of value to boolean
+interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on Checkbox here
+  value?: boolean;
+  caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  readonlyContextList: any;
+  referenceList: string;
+}
 
-//   value?: boolean,
-//   label: string,
-//   required: boolean,
-//   disabled: boolean,
-//   validatemessage: string,
-//   status?: string,
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   onChange: any,
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   onBlur?: any,
-//   readOnly: boolean,
-//   testId: string,
-//   helperText: string,
-//   displayMode?: string,
-//   hideLabel: boolean,
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   placeholder?: string
-// }
-export default function CheckboxComponent(props /* : CheckboxProps */) {
+const useStyles = makeStyles(() => ({
+  checkbox: {
+    display: 'flex',
+    flexDirection: 'column'
+  }
+}));
+
+export default function CheckboxComponent(props: CheckboxProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     getPConnect,
     label,
-    value = false,
+    caption,
+    value,
     readOnly,
     testId,
     required,
@@ -52,30 +47,42 @@ export default function CheckboxComponent(props /* : CheckboxProps */) {
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel,
+    selectionMode,
+    datasource,
+    selectionKey,
+    selectionList,
+    primaryField,
+    referenceList,
+    readonlyContextList: selectedvalues
   } = props;
+  const classes = useStyles();
   const helperTextToDisplay = validatemessage || helperText;
-
   const thePConn = getPConnect();
-  const theConfigProps = thePConn.getConfigProps();
-  const caption = theConfigProps['caption'];
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps()['value'];
+  const propName = (thePConn.getStateProps() as any).value;
 
-  const [checked, setChecked] = useState(false);
+  const [checked, setChecked] = useState<any>(false);
   useEffect(() => {
     // This update theSelectedButton which will update the UI to show the selected button correctly
     setChecked(value);
   }, [value]);
 
+  useEffect(() => {
+    if (referenceList?.length > 0) {
+      thePConn.setReferenceList(selectionList);
+      updateNewInstuctions(thePConn, selectionList);
+    }
+  }, [thePConn]);
+
   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 => {
@@ -83,30 +90,80 @@ export default function CheckboxComponent(props /* : CheckboxProps */) {
   };
 
   const handleBlur = event => {
-    thePConn.getValidationApi().validate(event.target.checked, ''); // 2nd arg empty string until typedef marked correctly as optional
+    thePConn.getValidationApi().validate(event.target.checked);
   };
 
-  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
-
-  if (readOnly) {
-    // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043
-    //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!
-    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;
-  }
+  const handleChangeMultiMode = (event, element) => {
+    if (event.target.checked) {
+      insertInstruction(thePConn, selectionList, selectionKey, primaryField, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    } else {
+      deleteInstruction(thePConn, selectionList, selectionKey, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    }
+    thePConn.clearErrorMessages({
+      property: selectionList,
+      category: '',
+      context: ''
+    });
+  };
 
-  return (
-    <FormControl required={required} error={status === 'error'}>
-      <FormGroup>
+  let theCheckbox;
+  const listOfCheckboxes: any = [];
+  if (selectionMode === 'multi') {
+    const listSourceItems = datasource?.source ?? [];
+    const dataField: any = selectionKey?.split?.('.')[1];
+    listSourceItems.forEach((element, index) => {
+      listOfCheckboxes.push(
         <FormControlLabel
-          control={theCheckbox}
-          checked={checked}
-          onChange={!readOnly ? handleChange : undefined}
-          onBlur={!readOnly ? handleBlur : undefined}
-          label={caption}
+          control={
+            <Checkbox
+              key={index}
+              checked={selectedvalues?.some?.(data => data[dataField] === element.key)}
+              onChange={event => handleChangeMultiMode(event, element)}
+              onBlur={() => {
+                thePConn.getValidationApi().validate(selectedvalues, selectionList);
+              }}
+              data-testid={`${testId}:${element.value}`}
+            />
+          }
+          key={index}
+          label={element.text ?? element.value}
           labelPlacement='end'
           data-test-id={testId}
         />
-      </FormGroup>
+      );
+    });
+    theCheckbox = <div className={classes.checkbox}>{listOfCheckboxes}</div>;
+  } else {
+    theCheckbox = (
+      <FormControlLabel
+        control={
+          <Checkbox
+            color='primary'
+            checked={checked}
+            onChange={!readOnly ? handleChange : undefined}
+            onBlur={!readOnly ? handleBlur : undefined}
+            value={value}
+            disabled={disabled}
+            readOnly={readOnly}
+          />
+        }
+        label={caption}
+        labelPlacement='end'
+        data-test-id={testId}
+      />
+    );
+  }
+
+  return (
+    <FormControl required={required} error={status === 'error'}>
+      {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
+      <FormGroup>{theCheckbox}</FormGroup>
       <FormHelperText>{helperTextToDisplay}</FormHelperText>
     </FormControl>
   );

package/lib/field/Checkbox/config-ext.json

@@ -4,7 +4,6 @@
   "description": "Boolean",
   "type": "Field",
   "subtype": "Boolean",
-  "componentKey" : "Checkbox",
-  "properties": [
-  ]
+  "componentKey": "Checkbox",
+  "properties": []
 }