@pega/dx-component-builder-sdk 23.1.11 → 23.1.13

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

@@ -1,491 +0,0 @@
-/* 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 { CircularProgress } from "@material-ui/core";
-import download from "downloadjs";
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
-// 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 */) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const SummaryList = getComponentFromMap('SummaryList');
-
-  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/createAll/override-sdk/widget/Attachment/index.tsx

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

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

@@ -1,171 +0,0 @@
-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/createAll/override-sdk/widget/CaseHistory/index.tsx

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