@pega/dx-component-builder-sdk 0.23.1 → 0.23.3

package/tests/assets/components/SDK-React/create/override-sdk/widget/Attachment/Attachment.tsx

@@ -0,0 +1,487 @@
+/* eslint-disable react/jsx-boolean-value */
+
+import { Button } from '@material-ui/core';
+import React, { useState, useEffect } from 'react';
+import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize, getIconForAttachment } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import './Attachment.css';
+import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList'
+import { CircularProgress } from "@material-ui/core";
+import download from "downloadjs";
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
+
+// NOTE: we can't use PConnProps in this file because the
+//  PConnect type is missing a number of expected properties
+//  such as attachmentsInfo and incorrect type for our use of clearMessages,
+// interface AttachmentProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+// }
+
+
+const getAttachmentKey = (name='') => name ? `attachmentsList.${name}` : 'attachmentsList';
+
+function getCurrentAttachmentsList(key, context) {
+  return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
+}
+
+export default function Attachment(props /* :AttachmentProps */) {
+  const PCoreVersion = PCore.getPCoreVersion();
+  const {value, getPConnect, label, validatemessage} = props;
+  /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
+  let { required, disabled } = props;
+  [required, disabled] = [required, disabled].map(
+    prop => prop === true || (typeof prop === 'string' && prop === 'true')
+  );
+  let arFileList$: Array<any> = [];
+  const pConn = getPConnect();
+  const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
+  let fileTemp: any = {};
+
+  let categoryName = '';
+  if (value && value.pyCategoryName) {
+    categoryName = value.pyCategoryName;
+  }
+
+  let valueRef = pConn.getStateProps()["value"];
+  valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const [file, setFile] = useState(fileTemp);
+
+  const resetAttachmentStoredState = () => {
+    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), undefined, {
+      pageReference: 'context_data',
+      isArrayDeepMerge: false
+    });
+  };
+
+  const fileDownload = (data, fileName, ext) => {
+    const fileData = ext ? `${fileName}.${ext}` : fileName;
+    download(atob(data), fileData);
+  };
+
+  function _downloadFileFromList(fileObj: any) {
+    PCore.getAttachmentUtils()
+      .downloadAttachment(fileObj.pzInsKey, pConn.getContextName())
+      .then((content) => {
+        const extension = fileObj.pyAttachName.split(".").pop();
+        fileDownload(content.data, fileObj.pyFileName, extension);
+      })
+      .catch(() => {});
+  }
+
+  function setNewFiles(arFiles) {
+    let index = 0;
+    const maxAttachmentSize = 5;
+    for (const item of arFiles) {
+      if (!validateMaxSize(item, maxAttachmentSize.toString())) {
+        item.error = true;
+        item.meta = pConn.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', '');     // 2nd and 3rd args empty string until typedef marked correctly
+      }
+      item.mimeType = item.type;
+      item.icon = getIconFromFileType(item.type);
+      item.ID = `${new Date().getTime()}I${index}`;
+      index+=1;
+    }
+    return arFiles;
+  }
+
+  function getFiles(arFiles: Array<any>) {
+    return setNewFiles(arFiles);
+  }
+
+  function getNewListUtilityItemProps(this: any, {
+    att,
+    cancelFile,
+    downloadFile,
+    deleteFile,
+    removeFile
+  }) {
+    let actions;
+    if (att.progress && att.progress !== 100) {
+      actions = [
+        {
+          id: `Cancel-${att.ID}`,
+          text: pConn.getLocalizedValue('Cancel', '', ''),     // 2nd and 3rd args empty string until typedef marked correctly
+          icon: "times",
+          onClick: cancelFile
+        }
+      ];
+    } else if (att.links) {
+      const isFile = att.type === "FILE";
+      const ID = att.ID.replace(/\s/gi, "");
+      const actionsMap = new Map([
+        [
+          "download",
+          {
+            id: `download-${ID}`,
+            text: isFile ? pConn.getLocalizedValue('Download', '', '') : pConn.getLocalizedValue('Open', '', ''),
+            icon: isFile ? "download" : "open",
+            onClick: downloadFile
+          }
+        ],
+        [
+          "delete",
+          {
+            id: `Delete-${ID}`,
+            text: pConn.getLocalizedValue('Delete', '', ''),
+            icon: "trash",
+            onClick: deleteFile
+          }
+        ]
+      ]);
+      actions = [];
+      actionsMap.forEach((action, actionKey) => {
+        if (att.links[actionKey]) {
+          actions.push(action);
+        }
+      });
+    } else if (att.error) {
+      actions = [
+        {
+          id: `Remove-${att.ID}`,
+          text: pConn.getLocalizedValue('Remove', '', ''),
+          icon: "trash",
+          onClick: removeFile
+        }
+      ];
+    }
+    return  {
+      id: att.ID,
+      visual: {
+        icon: getIconForAttachment(this, att),
+        progress: att.progress === 100 ? undefined: att.progress,
+      },
+      primary: {
+        type: att.type,
+        name: att.error ? att.fileName : att.name,
+        icon: "trash",
+        click: removeFile,
+      },
+      secondary: {
+        text: att.meta,
+        error: att.error
+      },
+      actions
+    };
+  };
+
+  const onFileAdded = (event) => {
+   const addedFile = event.target.files[0];
+    setFile({
+      props: {
+        name: addedFile.name,
+        icon: getIconFromFileType(addedFile.type),
+      },
+      inProgress: true
+    });
+    const arFiles$ = getFiles(event.target.files);
+    const myFiles: any = Array.from(arFiles$);
+
+    const onUploadProgress = () => {};
+
+    const errorHandler = (isFetchCanceled) => {
+      return (error) => {
+        if (!isFetchCanceled(error)) {
+          let uploadFailMsg = pConn.getLocalizedValue('Something went wrong', '', '');     // 2nd and 3rd args empty string until typedef marked correctly
+          if (error.response && error.response.data && error.response.data.errorDetails) {
+            uploadFailMsg = pConn.getLocalizedValue(error.response.data.errorDetails[0].localizedValue, '', '');     // 2nd and 3rd args empty string until typedef marked correctly
+          }
+          myFiles[0].meta = uploadFailMsg;
+          myFiles[0].error = true;
+          myFiles[0].fileName = pConn.getLocalizedValue('Unable to upload file', '', '');     // 2nd and 3rd args empty string until typedef marked correctly
+          arFileList$ = myFiles.map((att) => {
+            return getNewListUtilityItemProps({
+              att,
+              downloadFile: null,
+              cancelFile: null,
+              deleteFile: null,
+              removeFile: null
+            });
+          });
+          setFile((current) => {
+            return {
+              ...current,
+              props: {
+                ...current.props,
+                arFileList$
+              },
+              inProgress: false,
+              attachmentUploaded: true,
+              showMenuIcon: false
+            };
+          });
+        }
+        throw error;
+      };
+    };
+
+    PCore.getAttachmentUtils()
+      .uploadAttachment(
+        myFiles[0],
+        onUploadProgress,
+        errorHandler,
+        pConn.getContextName()
+      )
+      .then((fileRes) => {
+        let reqObj;
+        if (PCoreVersion?.includes('8.7')) {
+          reqObj = {
+            type: "File",
+            attachmentFieldName: valueRef,
+            category: categoryName,
+            ID: fileRes.ID
+          };
+          pConn.attachmentsInfo = reqObj;
+        } else {
+          reqObj = {
+            type: "File",
+            label: valueRef,
+            category: categoryName,
+            handle: fileRes.ID,
+            ID: fileRes.clientFileID
+          };
+          const currentAttachmentList = getCurrentAttachmentsList( getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName()).filter(
+            (f) => f.label !== valueRef
+          );
+          PCore.getStateUtils().updateState(
+            pConn.getContextName(),
+            getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
+            [...currentAttachmentList, reqObj],
+            {
+              pageReference: 'context_data',
+              isArrayDeepMerge: false
+            }
+          );
+        }
+        const fieldName = pConn.getStateProps()["value"];
+        const context = pConn.getContextName();
+
+        PCore.getMessageManager().clearMessages({
+          type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
+          property: fieldName,
+          pageReference: pConn.getPageReference(),
+          context
+        });
+        myFiles[0].meta = pConn.getLocalizedValue('Uploaded successfully', '', '');     // 2nd and 3rd args empty string until typedef marked correctly
+
+        arFileList$ = myFiles.map((att) => {
+          return getNewListUtilityItemProps({
+            att,
+            downloadFile: null,
+            cancelFile: null,
+            deleteFile: null,
+            removeFile: null
+          });
+        });
+        setFile((current) => {
+          return {
+            ...current,
+            props: {
+              ...current.props,
+              arFileList$
+            },
+            inProgress: false,
+            attachmentUploaded: true,
+            showMenuIcon: false
+          };
+        });
+      })
+
+      .catch(() => {
+        // just catching the rethrown error at uploadAttachment
+        // to handle Unhandled rejections
+      });
+  };
+
+  function _removeFileFromList(item: any, list) {
+    const arFileList = file.props ? file.props.arFileList$ : list;
+    const fileIndex = arFileList.findIndex(element => element?.id === item?.id);
+    if (PCoreVersion?.includes('8.7')) {
+      if (value) {
+        pConn.attachmentsInfo = {
+          type: "File",
+          attachmentFieldName: valueRef,
+          delete: true
+        };
+      }
+      if (fileIndex > -1) { arFileList.splice(parseInt(fileIndex, 10), 1) };
+      setFile((current) => {
+        return {
+          ...current,
+          props: {
+            ...current.props,
+            arFileList
+          },
+        };
+      });
+    } else {
+      const attachmentsList = [];
+      const currentAttachmentList = getCurrentAttachmentsList( getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName()).filter(
+        (f) => f.label !== valueRef
+      );
+      if (value && value.pxResults && +value.pyCount > 0) {
+        const deletedFile = {
+          type: "File",
+          label: valueRef,
+          delete: true,
+          responseProps: {
+            pzInsKey: arFileList[fileIndex].id
+          },
+        };
+        // updating the redux store to help form-handler in passing the data to delete the file from server
+        PCore.getStateUtils().updateState(
+          pConn.getContextName(),
+          getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
+          [...currentAttachmentList, deletedFile],
+          {
+            pageReference: 'context_data',
+            isArrayDeepMerge: false
+          }
+        );
+      } else {
+        PCore.getStateUtils().updateState(
+          pConn.getContextName(),
+          getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
+          [...currentAttachmentList, ...attachmentsList],
+          {
+            pageReference: 'context_data',
+            isArrayDeepMerge: false
+          }
+        );
+      }
+      if (fileIndex > -1) { arFileList.splice(parseInt(fileIndex, 10), 1) };
+      setFile((current) => {
+        return {
+          ...current,
+          props: {
+            ...current.props,
+            arFileList
+          },
+        };
+      });
+    }
+  }
+
+  useEffect(() => {
+    if (value && value.pxResults && +value.pyCount > 0) {
+    fileTemp = buildFilePropsFromResponse(value.pxResults[0]);
+
+    if (fileTemp.responseProps) {
+      if (!pConn.attachmentsInfo) {
+        pConn.attachmentsInfo = {
+          type: "File",
+          attachmentFieldName: valueRef,
+          category: categoryName
+        };
+      }
+
+      if (fileTemp.responseProps.pzInsKey && !fileTemp.responseProps.pzInsKey.includes("temp")) {
+
+        fileTemp.props.type = fileTemp.responseProps.pyMimeFileExtension;
+        fileTemp.props.mimeType = fileTemp.responseProps.pyMimeFileExtension;
+        fileTemp.props.ID = fileTemp.responseProps.pzInsKey;
+        // create the actions for the "more" menu on the attachment
+        const arMenuList: Array<any> = [];
+        let oMenu: any = {};
+
+        oMenu.icon = "download";
+        oMenu.text = pConn.getLocalizedValue('Download', '', '');     // 2nd and 3rd args empty string until typedef marked correctly
+        oMenu.onClick = () => { _downloadFileFromList(value.pxResults[0])}
+        arMenuList.push(oMenu);
+        oMenu = {};
+        oMenu.icon = "trash";
+        oMenu.text = pConn.getLocalizedValue('Delete', '', '');     // 2nd and 3rd args empty string until typedef marked correctly
+        oMenu.onClick = () => { _removeFileFromList(arFileList$[0], arFileList$)}
+        arMenuList.push(oMenu);
+
+        arFileList$.push(getNewListUtilityItemProps({
+          att: fileTemp.props,
+          downloadFile: null,
+          cancelFile: null,
+          deleteFile: null,
+          removeFile: null
+        }));
+        arFileList$[0].actions = arMenuList;
+
+        setFile((current) => {
+          return {
+            ...current,
+            props: {
+              ...current.props,
+              arFileList$
+            },
+            inProgress: false,
+            attachmentUploaded: true,
+            showMenuIcon: true
+          };
+        });
+      }
+
+      if (fileTemp) {
+        const currentAttachmentList = getCurrentAttachmentsList( getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName());
+        const index = currentAttachmentList.findIndex(element => element.props.ID === fileTemp.props.ID);
+        let tempFiles: any = [];
+        if (index < 0) {
+          tempFiles = [fileTemp];
+        }
+        PCore.getStateUtils().updateState(
+          pConn.getContextName(),
+          getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
+          [...currentAttachmentList, ...tempFiles],
+          {
+            pageReference: 'context_data',
+            isArrayDeepMerge: false
+          }
+        );
+      }
+    }
+    }
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
+      resetAttachmentStoredState,
+      caseID
+    );
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+    };
+  }, []);
+
+  let content = (
+    <div className={`${validatemessage === '' ? 'file-div' : 'file-div-error'}`}>
+        {file.inProgress && (<div className="progress-div"><CircularProgress /></div>)}
+        <div hidden={true} id="attachment-ID">{valueRef}</div>
+        <label htmlFor={valueRef}>
+          <input
+            style={{ display: 'none' }}
+            id={valueRef}
+            name='upload-photo'
+            type='file'
+            required={required}
+            onChange={onFileAdded}
+          />
+          <Button variant='outlined' color='primary' component="span">
+            Upload file
+          </Button>
+        </label>
+    </div>
+  );
+
+  if (file && file.attachmentUploaded && file.props.arFileList$ && file.props.arFileList$.length > 0) {
+    content = (
+      <div>
+         {file.showMenuIcon && (<SummaryList arItems$={file.props.arFileList$} menuIconOverrideAction$={_removeFileFromList}></SummaryList>)}
+         {!file.showMenuIcon && (<SummaryList menuIconOverride$='trash' arItems$={file.props.arFileList$} menuIconOverrideAction$={_removeFileFromList}></SummaryList>)}
+      </div>
+
+    );
+  }
+
+  return (
+    <div className='file-upload-container'>
+      <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
+      <section>{content}</section>
+      {validatemessage !== "" ? <span className='file-error'>{validatemessage}</span> : ''}
+    </div>
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/widget/Attachment/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/widget/CaseHistory/CaseHistory.tsx

@@ -0,0 +1,171 @@
+import React, { useState, useRef, useEffect } from "react";
+import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import isDeepEqual from 'fast-deep-equal/react';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface CaseHistoryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
+
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "silver",
+      backgroundColor: theme.palette.text.disabled,
+      color: theme.palette.getContrastText(theme.palette.text.disabled),
+    },
+    body: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "silver",
+      // fontSize: 14,
+    },
+  }),
+)(TableCell);
+
+
+export default function CaseHistory(props:CaseHistoryProps) {
+  const { getPConnect } = props;
+  const thePConn = getPConnect();
+  // let waitingForData = true;
+
+  const displayedColumns = [
+    { label: thePConn.getLocalizedValue('Date', '', ''), type: "DateTime", fieldName: "pxTimeCreated" },  // 2nd and 3rd args empty string until typedef marked correctly
+    { label: thePConn.getLocalizedValue('Description', '', ''), type: "TextInput", fieldName: "pyMessageKey" },  // 2nd and 3rd args empty string until typedef marked correctly
+    { label: thePConn.getLocalizedValue('Performed by', '', ''), type: "TextInput", fieldName: "pyPerformer" }  // 2nd and 3rd args empty string until typedef marked correctly
+   ];
+
+  const rowData: any = useRef([]);
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const [waitingForData, setWaitingForData] = useState<boolean>(true);
+
+
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');  // 2nd arg empty string until typedef marked correctly
+  const dataViewName = "D_pyWorkHistory";
+  const context = thePConn.getContextName();
+
+
+  function computeRowData(rows: Array<Object>): void {
+    const theRowData: Array<Object> = [];
+
+    rows.forEach((row: any, rowIndex: number) => {
+      // Now, for each property in the index of row properties (displayedColumns), add an object
+      //  to a new array of values
+      const rowDisplayValues: any = [];
+
+      displayedColumns.forEach((column: Object, rowValIndex) => {
+        const theType = column["type"];
+        const theFieldName = column["fieldName"];
+        const theValue = ((theType === "Date" || theType === "DateTime")) ? Utils.generateDateTime(row[theFieldName], "DateTime-Short") : row[theFieldName];
+        rowDisplayValues[rowValIndex] = theValue;
+      });
+
+      theRowData[rowIndex] = rowDisplayValues;
+    })
+
+    if (!isDeepEqual(theRowData, rowData.current)) {
+      // Only update rowData.current when it actually changes (to prevent infinite loop)
+      rowData.current = theRowData;
+    }
+  }
+
+  // Get the case history data when component mounted/initialized
+  useEffect( () => {
+
+    let bCallSetWaitingForData = true;
+
+    const historyData = PCore.getDataApiUtils().getData(
+      dataViewName,  `{"dataViewParameters":[{"CaseInstanceKey":"${caseID}"}]}`,
+      context
+      );
+
+    historyData.then( (historyJSON: Object) => {
+
+      const tableDataResults = historyJSON["data"].data;
+
+      // compute the rowData using the tableDataResults
+      computeRowData(tableDataResults);
+
+      // At this point, if we have data ready to render and haven't been asked
+      //  to NOT call setWaitingForData, we can stop progress indicator
+      if (bCallSetWaitingForData) {
+        setWaitingForData(false);
+      }
+
+    });
+
+    return () => {
+      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+      // The useEffect closure lets us have access to the bCallSetWaitingForData
+      //  variable inside the useEffect and inside the "then" clause of the
+      //  historyData promise
+      //  So, if this cleanup code gets run before the promise .then is called,
+      //  we can avoid calling the useState setter which would otherwise show a warning
+      bCallSetWaitingForData = false;
+    }
+
+  }, []);
+
+
+  function getTableHeader() {
+    const theRowKey = "CaseHistory.TableHeader";
+
+    const theHeaderCells: Array<any> = displayedColumns.map((headerCol, index) => {
+      const theCellKey = `${theRowKey}.${index}`;
+      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>
+    })
+
+    return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
+  }
+
+
+  function getTableData() {
+    const theDataRows: Array<any> = [];
+
+    // Note: using rowData.current since we're using useRef as a mutatable
+    //  value that's only updated when it changes.
+    if (rowData.current.length > 0) {
+      rowData.current.forEach((dataRow: Array<Object>, index) => {
+        // using dataRow[0]-dataRow[1] as the array key since it's a unique value
+        const theKey = `CaseHistory-${index}`;
+        theDataRows.push( <TableRow key={theKey}>
+          <StyledTableCell>{dataRow[0] ? dataRow[0] : "---"}</StyledTableCell>
+          <StyledTableCell>{dataRow[1] ? dataRow[1] : "---"}</StyledTableCell>
+          <StyledTableCell>{dataRow[2] ? dataRow[2] : "---"}</StyledTableCell>
+        </TableRow>
+        )
+      });
+    }
+
+    return theDataRows;
+  }
+
+  return (
+    <div id="CaseHistory">
+      <TableContainer>
+        <Table>
+          <TableHead>
+            {getTableHeader()}
+          </TableHead>
+          <TableBody>
+            {getTableData()}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  )
+}

package/tests/assets/components/SDK-React/create/override-sdk/widget/CaseHistory/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "CaseHistory",
+    "name": "CaseHistory",
+    "label": "Case history",
+    "description": "Case history widget",
+    "type": "Widget",
+    "subtype": "CASE",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/widget/CaseHistory/index.tsx

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