@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/field/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
+import isDeepEqual from 'fast-deep-equal/react';
+
+import Utils from '../../helpers/utils';
+import { getDataPage } from '../../helpers/data_page';
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface IOption {
+  key: string;
+  value: string;
+}
+
+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 metaDataObj: any = { key: '', primary: '', secondary: [] };
+  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') {
+      metaDataObj.primary = displayColumns[index].value;
+    } else {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    }
+  }
+  return metaDataObj;
+};
+
+interface AutoCompleteProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on AutoComplete here'
+  displayMode?: string;
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  status?: string;
+  onRecordChange?: any;
+  additionalProps?: object;
+  listType: string;
+  parameters?: any;
+  datasource: any;
+  columns: any[];
+}
+
+export default function AutoComplete(props: AutoCompleteProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextInput = getComponentFromRegistry('TextInput');
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    placeholder,
+    value = '',
+    validatemessage,
+    readOnly,
+    testId,
+    displayMode,
+    deferDatasource,
+    datasourceMetadata,
+    status,
+    helperText,
+    hideLabel,
+    onRecordChange
+  } = props;
+
+  const context = getPConnect().getContextName();
+  let { listType, parameters, datasource = [], columns = [] } = props;
+  const [inputValue, setInputValue] = useState('');
+  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() as any).value;
+
+  if (!isDeepEqual(datasource, theDatasource)) {
+    // inbound datasource is different, so update theDatasource (to trigger useEffect)
+    setDatasource(datasource);
+  }
+
+  const flattenParameters = (params = {}) => {
+    const flatParams = {};
+    Object.keys(params).forEach(key => {
+      const { name, value: theVal } = params[key];
+      flatParams[name] = theVal;
+    });
+
+    return flatParams;
+  };
+
+  // convert associated to datapage listtype and transform props
+  // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+  if (deferDatasource && datasourceMetadata?.datasource?.name) {
+    listType = 'datapage';
+    datasource = datasourceMetadata.datasource.name;
+    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',
+        setProperty: 'Associated property',
+        value: valueProp
+      },
+      {
+        display: 'true',
+        primary: 'true',
+        useForSearch: true,
+        value: displayProp
+      }
+    ];
+  }
+  columns = preProcessColumns(columns);
+
+  useEffect(() => {
+    if (listType === 'associated') {
+      setOptions(Utils.getOptionList(props, getPConnect().getDataObject('')));
+    }
+  }, [theDatasource]);
+
+  useEffect(() => {
+    if (!displayMode && listType !== 'associated') {
+      getDataPage(datasource, parameters, context).then((results: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        results?.forEach(element => {
+          const val = element[displayColumn.primary]?.toString();
+          const obj = {
+            key: element[displayColumn.key] || element.pyGUID,
+            value: val
+          };
+          optionsData.push(obj);
+        });
+        setOptions(optionsData);
+      });
+    }
+  }, []);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (value) {
+    const index = options?.findIndex(element => element.key === value);
+    if (index > -1) {
+      selectedValue = options[index].value;
+    } else {
+      selectedValue = value;
+    }
+  }
+
+  const handleChange = (event: object, newValue) => {
+    const val = newValue ? newValue.key : '';
+    handleEvent(actionsApi, 'changeNblur', propName, val);
+    if (onRecordChange) {
+      onRecordChange(event);
+    }
+  };
+
+  const handleInputValue = (event, newInputValue) => {
+    setInputValue(newInputValue);
+  };
+
+  if (readOnly) {
+    const theValAsString = options?.find(opt => opt.key === value)?.value;
+    return <TextInput {...props} value={theValAsString} />;
+  }
+  // Need to use both getOptionLabel and getOptionSelected to map our
+  //  key/value structure to what Autocomplete expects
+  return (
+    <Autocomplete
+      options={options}
+      getOptionLabel={(option: IOption) => {
+        return option.value ? option.value : '';
+      }}
+      isOptionEqualToValue={(option: any) => {
+        return option.value ? option.value : '';
+      }}
+      fullWidth
+      onChange={handleChange}
+      value={selectedValue}
+      inputValue={inputValue || selectedValue}
+      onInputChange={handleInputValue}
+      renderInput={params => (
+        <TextField
+          {...params}
+          fullWidth
+          variant='outlined'
+          helperText={helperTextToDisplay}
+          placeholder={placeholder}
+          size='small'
+          required={required}
+          error={status === 'error'}
+          label={label}
+          data-test-id={testId}
+        />
+      )}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/AutoComplete/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "AutoComplete",
+  "label": "Search box",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "componentKey": "AutoComplete",
+  "icon": "",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/AutoComplete/index.tsx

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

package/templates/react-sdk-reference/src/components/field/CancelAlert/CancelAlert.css

@@ -0,0 +1,24 @@
+.cancel-alert-background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--modal-background-color);
+  position: fixed;
+  z-index: 9999;
+  top: 0px;
+  left: 0px;
+}
+
+.cancel-alert-top {
+  display: table;
+  margin: auto;
+  min-width: 550px;
+  background-color: var(--modal-top-color);
+  border: 1px solid var(--modal-border-color);
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
+}

package/templates/react-sdk-reference/src/components/field/CancelAlert/CancelAlert.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { Button, Grid, IconButton, Snackbar } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+import type { PConnFieldProps } from '@pega/sdk-react';
+import './CancelAlert.css';
+
+interface CancelAlertProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on CancelAlert here
+  heading: string;
+  content: string;
+  itemKey: string;
+  hideDelete: boolean;
+  isDataObject: boolean;
+  skipReleaseLockRequest: any;
+  dismiss: Function;
+}
+
+export default function CancelAlert(props: CancelAlertProps) {
+  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);
+  // @ts-ignore - Property 'options' is private and only accessible within class 'C11nEnv'.
+  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'
+  };
+
+  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
+    }));
+  }
+
+  function enableButton(id) {
+    setButtonsState(prevState => ({
+      ...prevState,
+      [id]: false
+    }));
+  }
+
+  function cancelHandler() {
+    if (isReverseCoexistence) {
+      dismiss(true);
+      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(() => {
+          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, false);
+    } else if (isBulkAction) {
+      dismiss(true);
+      actionsAPI.cancelBulkAction(containerItemID);
+    } else {
+      dismiss(true);
+      containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
+    }
+  }
+
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
+  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>
+  );
+
+  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>{localizedVal(heading, localeCategory)}</h3>
+          <div>
+            <p>{localizedVal(content, localeCategory)}</p>
+          </div>
+          <div className='action-controls'>
+            <Grid container spacing={4} justifyContent='space-between'>
+              <Grid>{leftButton}</Grid>
+              <Grid>{rightButton}</Grid>
+            </Grid>
+          </div>
+        </div>
+      </div>
+      <Snackbar
+        open={showSnackbar}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+        action={
+          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        }
+      />
+    </>
+  );
+}

package/templates/react-sdk-reference/src/components/field/CancelAlert/index.tsx

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

package/templates/react-sdk-reference/src/components/field/Checkbox/Checkbox.tsx

@@ -0,0 +1,263 @@
+import { useState, useEffect } from 'react';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import { insertInstruction, deleteInstruction, updateNewInstuctions } from '../../helpers/instructions-utils';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+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;
+  variant?: string;
+  hideFieldLabels: boolean;
+  additionalProps: any;
+  imagePosition: string;
+  imageSize: string;
+  showImageDescription: string;
+  renderMode: string;
+  image: string;
+}
+
+const useStyles = makeStyles(() => ({
+  checkbox: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  selectableCard: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))',
+    gridAutoRows: '1fr',
+    gap: '0.5rem'
+  }
+}));
+
+export default function CheckboxComponent(props: CheckboxProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+  const SelectableCard = getComponentFromRegistry('SelectableCard');
+
+  const {
+    getPConnect,
+    label,
+    caption,
+    value,
+    readOnly,
+    testId,
+    required,
+    disabled,
+    status,
+    helperText,
+    validatemessage,
+    displayMode,
+    hideLabel,
+    trueLabel,
+    falseLabel,
+    selectionMode,
+    datasource,
+    selectionKey,
+    selectionList,
+    primaryField,
+    referenceList,
+    readonlyContextList: selectedvalues,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    imagePosition,
+    imageSize,
+    showImageDescription,
+    renderMode,
+    image
+  } = props;
+  const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [theSelectedButton, setSelectedButton] = useState(value);
+  const classes = useStyles();
+  const helperTextToDisplay = validatemessage || helperText;
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+
+  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 && !readOnlyMode) {
+      thePConn.setReferenceList(selectionList);
+      updateNewInstuctions(thePConn, selectionList);
+    }
+  }, [thePConn]);
+
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setSelectedButton(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
+  }
+
+  const handleChange = event => {
+    handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
+  };
+
+  const handleBlur = event => {
+    thePConn.getValidationApi().validate(event.target.checked);
+  };
+
+  const handleCheckboxChange = (event, item) => {
+    if (event.target.checked) {
+      insertInstruction(thePConn, selectionList, selectionKey, primaryField, item);
+    } else {
+      deleteInstruction(thePConn, selectionList, selectionKey, item);
+    }
+    thePConn.clearErrorMessages({ property: selectionList });
+  };
+
+  const actions = thePConn.getActionsApi();
+
+  const commonProps = {
+    ...additionalProps,
+    className: 'standard',
+    disabled,
+    readOnly,
+    onClick: (actions as any).onClick
+  };
+
+  if (variant === 'card') {
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div className={classes.selectableCard}>
+          <SelectableCard
+            {...commonProps}
+            testId={testId}
+            displayMode={displayMode}
+            dataSource={datasource}
+            getPConnect={getPConnect}
+            readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}
+            onChange={e => {
+              e.stopPropagation();
+              const recordKey = selectionKey?.split('.').pop();
+              const selectedItem = datasource?.source?.find(item => item[recordKey as any] === e.target.id) ?? {};
+              handleCheckboxChange(e, {
+                id: selectedItem[recordKey as any],
+                primary: selectedItem[recordKey as any]
+              });
+            }}
+            onBlur={() => {
+              thePConn.getValidationApi().validate(selectedvalues, selectionList);
+            }}
+            hideFieldLabels={hideFieldLabels}
+            recordKey={selectionKey?.split('.').pop()}
+            cardLabel={primaryField.split('.').pop()}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: image?.split('.').pop(),
+              imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
+            }}
+            readOnlyList={selectedvalues}
+            type='checkbox'
+            showNoValue={(renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  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: ''
+    });
+  };
+
+  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={
+            <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}
+        />
+      );
+    });
+    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 variant='standard' required={required} error={status === 'error'}>
+      {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
+      <FormGroup>{theCheckbox}</FormGroup>
+      <FormHelperText>{helperTextToDisplay}</FormHelperText>
+    </FormControl>
+  );
+}

package/templates/react-sdk-reference/src/components/field/Checkbox/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Checkbox",
+  "label": "Checkbox",
+  "description": "Boolean",
+  "type": "Field",
+  "subtype": "Boolean",
+  "componentKey": "Checkbox",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/Checkbox/index.tsx

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