@pega/react-sdk-overrides 0.23.6

package/lib/designSystemExtensions/Operator/Operator.tsx

@@ -0,0 +1,195 @@
+import React, {useState} from "react";
+import PropTypes from "prop-types";
+import TextField from '@material-ui/core/TextField';
+import Popover from '@material-ui/core/Popover';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+declare const PCore: any;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  },
+  popover: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  }
+}));
+
+export default function Operator(props) {
+  // const componentName = "Operator";
+  const { caseOpConfig } = props;
+  const classes = useStyles();
+
+  const fieldLabel = caseOpConfig.label.toLowerCase();
+  let caseOpLabel = "---";
+  let caseOpName = "---";
+  let caseOpId = "";
+  let caseTime = null;
+
+  if (fieldLabel === "create operator") {
+    caseOpLabel = caseOpConfig.createLabel;
+    caseOpName = caseOpConfig.createOperator.userName;
+    caseTime = caseOpConfig.createDateTime;
+    caseOpId = caseOpConfig.createOperator.userId;
+  } else if (fieldLabel === "update operator") {
+    caseOpLabel = caseOpConfig.updateLabel;
+    caseOpName = caseOpConfig.updateOperator.userName;
+    caseTime = caseOpConfig.updateDateTime;
+    caseOpId = caseOpConfig.updateOperator.userId;
+  }
+
+  // Popover-related
+  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+  const [popoverFields, setPopoverFields] = useState<Array<any>>([]);
+
+  const popoverOpen = Boolean(popoverAnchorEl);
+  const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
+
+  const handlePopoverClose = (() => {
+    setPopoverAnchorEl(null);
+  })
+
+  function showOperatorDetails(event) {
+
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+
+    operatorPreviewPromise.then((res) => {
+      const fillerString = "---";
+      let fields: any = [];
+      if (
+        res.data &&
+        res.data.pyOperatorInfo &&
+        res.data.pyOperatorInfo.pyUserName
+      ) {
+        fields = [
+          {
+            id: "pyPosition",
+            name: "Position",
+            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: "Organization",
+            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: "Reports to",
+            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: "Telephone",
+            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: "Email address",
+            value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
+          }
+        ];
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
+        fields = [
+          {
+            id: "pyPosition",
+            name: "Position",
+            value: fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: "Organization",
+            value: fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: "Reports to",
+            value: fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: "Telephone",
+            value: fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: "Email address",
+            value: fillerString
+          }
+        ];
+      }
+      // Whatever the fields are, update the component's popoverFields
+      setPopoverFields(fields);
+    });
+
+    setPopoverAnchorEl(event.currentTarget);
+  }
+
+  function getPopoverGrid() {
+    // return popoverFields.map((field) => {
+    //   return <div className={classes.popover}>{field.name}: {field.value}</div>
+    // })
+
+    if (popoverFields.length === 0) {
+      return;
+    }
+
+    // There are fields, so build the grid.
+    return <Grid container className={classes.popover} spacing={1}>
+      <Grid item xs={12}><Typography variant="h6">{caseOpName}</Typography></Grid>
+      {popoverFields.map((field) => {
+        return <React.Fragment key={field.id}>
+          <Grid container item xs={12} spacing={1}>
+            <Grid item xs={6}><Typography variant="caption">{field.name}</Typography></Grid>
+            <Grid item xs={6}><Typography variant="subtitle2">{field.value}</Typography></Grid>
+          </Grid>
+        </React.Fragment>
+      })}
+    </Grid>
+
+  }
+
+  // End of popover-related
+
+  return <React.Fragment>
+      <TextField
+        defaultValue={caseOpName}
+        label={caseOpLabel}
+        onClick={showOperatorDetails}
+        InputProps={{
+          readOnly: 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>
+    </React.Fragment>;
+
+}
+
+Operator.defaultProps = {
+}
+
+Operator.propTypes = {
+  caseOpConfig: PropTypes.object.isRequired,
+};

package/lib/designSystemExtensions/Operator/index.tsx

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

package/lib/designSystemExtensions/Pulse/Pulse.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+// import PropTypes from "prop-types";
+import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    borderLeft: "6px solid",
+    borderLeftColor: theme.palette.primary.light
+  },
+}));
+
+export default function Pulse(/* props */) {
+  // const { children } = props;
+  const classes = useStyles();
+
+  return (
+      <Card className={classes.root}>
+        <CardHeader title={<Typography variant="h6">Pulse</Typography>} />
+        <CardContent>
+          <Typography>Pulse</Typography>
+        </CardContent>
+      </Card>
+    );
+}
+
+// Pulse.propTypes = {
+//   children: PropTypes.arrayOf(PropTypes.node).isRequired
+// };

package/lib/designSystemExtensions/Pulse/index.tsx

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

package/lib/forms/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from 'react';
+import { TextField } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import isDeepEqual from 'fast-deep-equal/react';
+import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
+
+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;
+};
+
+export default function AutoComplete(props) {
+  const {
+    getPConnect,
+    label,
+    required,
+    placeholder,
+    value = '',
+    validatemessage,
+    onChange,
+    readOnly,
+    testId,
+    displayMode,
+    deferDatasource,
+    datasourceMetadata,
+    status,
+    helperText
+  } = props;
+  let parameters = datasourceMetadata?.datasource?.parameters;
+  const context = getPConnect().getContextName();
+  let { listType, datasource = [], columns = [] } = props;
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState<Array<IOption>>([]);
+  const [theDatasource, setDatasource] = useState(null);
+  let selectedValue: any = '';
+  const helperTextToDisplay = validatemessage || helperText;
+
+  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;
+    parameters = flattenParameters(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;
+    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: Array<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 (value) {
+    const index = options?.findIndex(element => element.key === value);
+    if (index > -1) {
+      selectedValue = options[index].value;
+    } else {
+      selectedValue = value;
+    }
+  }
+
+  const handleChange = (event: object, newValue) => {
+    onChange({ value: newValue ? newValue.key : '' });
+  };
+
+  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 : '';
+      }}
+      getOptionSelected={(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/lib/forms/AutoComplete/index.tsx

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

package/lib/forms/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: rgba(100, 100, 100, 0.4);
+  position: fixed;
+  z-index: 9999;
+  top: 0px;
+  left: 0px;
+}
+
+.cancel-alert-top {
+  display: table;
+  margin: auto;
+  min-width: 550px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px #777;
+}

package/lib/forms/CancelAlert/CancelAlert.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+import './CancelAlert.css';
+
+declare const PCore;
+
+const CancelAlert = props => {
+  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();
+
+  function showToast(message: string) {
+    setSnackbarMessage(message);
+    setShowSnackbar(true);
+  }
+
+  const dismissCancelAlertOnly = () => {
+    updateAlertState(true);
+  };
+
+  const dismissModal = () => {
+    updateAlertState(false);
+  };
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    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('Save failed');
+          });
+        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('Delete failed.');
+          });
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <div className='cancel-alert-background'>
+        <div className='cancel-alert-top'>
+          <h3>{`Delete ${caseName}(${ID})`}</h3>
+          <div>
+            <p>{`Are you sure you want to delete ${caseName} (${ID})?`}</p>
+            <p>Alternatively, you can continue working or save your work for later.</p>
+          </div>
+          <div className='action-controls'>
+            <Grid container spacing={4} justifyContent='space-between'>
+              <Grid item>
+                <Button variant='outlined' color='primary' onClick={() => buttonClick('save')}>
+                  Save for later
+                </Button>
+              </Grid>
+              <Grid item>
+                <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
+                  Continue Working
+                </Button>
+                <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
+                  Delete
+                </Button>
+              </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>
+        }
+      />
+    </>
+  );
+};
+
+export default CancelAlert;

package/lib/forms/CancelAlert/index.tsx

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

package/lib/forms/Checkbox/Checkbox.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText
+} from '@material-ui/core';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+
+export default function CheckboxComponent(props) {
+  const {
+    getPConnect,
+    value = false,
+    readOnly,
+    testId,
+    required,
+    status,
+    helperText,
+    validatemessage
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const thePConn = getPConnect();
+  const theConfigProps = thePConn.getConfigProps();
+  const { caption } = theConfigProps;
+  const actionsApi = thePConn.getActionsApi();
+  const propName = thePConn.getStateProps().value;
+
+  const [checked, setChecked] = useState(false);
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setChecked(value);
+  }, [value]);
+
+  const handleChange = event => {
+    handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
+  };
+
+  const handleBlur = event => {
+    thePConn.getValidationApi().validate(event.target.checked);
+  };
+
+  let theCheckbox = <Checkbox color='primary' />;
+
+  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} onChange={handleChange} readOnly={readOnly} />;
+  }
+
+  return (
+    <FormControl required={required} error={status === 'error'}>
+      <FormGroup>
+        <FormControlLabel
+          control={theCheckbox}
+          checked={checked}
+          onChange={!readOnly ? handleChange : undefined}
+          onBlur={!readOnly ? handleBlur : undefined}
+          label={caption}
+          labelPlacement='end'
+          data-test-id={testId}
+        />
+      </FormGroup>
+      <FormHelperText>{helperTextToDisplay}</FormHelperText>
+    </FormControl>
+  );
+}

package/lib/forms/Checkbox/index.tsx

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