@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/src/components/widget/Attachment/Attachment.tsx

@@ -11,7 +11,7 @@ import {
   insertAttachments,
   useDeepMemo,
   useFileDownload,
-  validateFileExtension
+  validateFileExtension,
 } from './AttachmentUtils';
 import { validateMaxSize } from '../../helpers/attachmentShared';
 import type { PageInstructionOptions } from './Attachment.types';
@@ -29,11 +29,21 @@ interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
 }
 
 export default function Attachment(props: AttachmentProps) {
-  const { value, getPConnect, label, validatemessage, extensions, displayMode, helperText, editMode, isTableFormatter } = props;
+  const {
+    value,
+    getPConnect,
+    label,
+    validatemessage,
+    extensions,
+    displayMode,
+    helperText,
+    editMode,
+    isTableFormatter,
+  } = props;
   /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
   let { required, disabled, allowMultiple } = props;
   [required, disabled, allowMultiple] = [required, disabled, allowMultiple].map(
-    prop => prop === true || (typeof prop === 'string' && prop === 'true')
+    (prop) => prop === true || (typeof prop === 'string' && prop === 'true'),
   );
   const pConn = getPConnect();
   const localizationService = pConn.getLocalizationService();
@@ -41,7 +51,9 @@ export default function Attachment(props: AttachmentProps) {
   const actionSequencer = useMemo(() => PCore.getActionsSequencer(), []);
   const rawValue = pConn.getComponentConfig().value;
   const isAttachmentAnnotationPresent = typeof rawValue === 'object' ? false : rawValue?.includes('@ATTACHMENT');
-  const { attachments, isOldAttachment } = isAttachmentAnnotationPresent ? value : PCore.getAttachmentUtils().prepareAttachmentData(value);
+  const { attachments, isOldAttachment } = isAttachmentAnnotationPresent
+    ? value
+    : PCore.getAttachmentUtils().prepareAttachmentData(value);
 
   let valueRef = (pConn.getStateProps() as any).value;
   valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
@@ -82,7 +94,9 @@ export default function Attachment(props: AttachmentProps) {
       }
 
       if (filesWithError.current.length > 0) {
-        filesWithError.current = filesWithError.current.filter(fileWithError => fileWithError.props.id !== file.props.id);
+        filesWithError.current = filesWithError.current.filter(
+          (fileWithError) => fileWithError.props.id !== file.props.id,
+        );
         if (filesWithError.current.length === 0) {
           clearFieldErrorMessages(pConn);
         }
@@ -92,8 +106,8 @@ export default function Attachment(props: AttachmentProps) {
         // @ts-ignore - Expected 1 arguments, but got 2.ts(2554)
         PCore.getAttachmentUtils().cancelRequest(file.props.id, contextName);
         actionSequencer.deRegisterBlockingAction(contextName).catch(() => {});
-        setFiles(localFiles => {
-          return localFiles.filter(localFile => localFile.props.id !== file.props.id);
+        setFiles((localFiles) => {
+          return localFiles.filter((localFile) => localFile.props.id !== file.props.id);
         });
       } else {
         deleteAttachments([file], pConn, multiAttachmentsInInlineEdit.current, {
@@ -101,16 +115,18 @@ export default function Attachment(props: AttachmentProps) {
           isOldAttachment,
           isMultiAttachmentInInlineEditTable,
           attachmentCount: attachmentCount.current,
-          deleteIndex: fileIndex
+          deleteIndex: fileIndex,
         } as any);
         // Filter out without deleted file and reset the file indexes
-        setFiles(localFiles => {
+        setFiles((localFiles) => {
           let tempLocalFiles = [...localFiles];
-          tempLocalFiles = tempLocalFiles.filter(localFile => localFile.props.id !== file.props.id);
-          tempLocalFiles.forEach(localFile => {
+          tempLocalFiles = tempLocalFiles.filter((localFile) => localFile.props.id !== file.props.id);
+          tempLocalFiles.forEach((localFile) => {
             if (!localFile.props.error && !file.props.error) {
               const updatedDeleteIndex =
-                localFile.responseProps.deleteIndex > fileIndex ? localFile.responseProps.deleteIndex - 1 : localFile.responseProps.deleteIndex;
+                localFile.responseProps.deleteIndex > fileIndex
+                  ? localFile.responseProps.deleteIndex - 1
+                  : localFile.responseProps.deleteIndex;
 
               localFile.props.onDelete = () => deleteFile(localFile, updatedDeleteIndex);
 
@@ -126,53 +142,53 @@ export default function Attachment(props: AttachmentProps) {
 
       setToggleUploadBegin(false);
     },
-    [pConn]
+    [pConn],
   );
 
   const onUploadProgress = (id, ev) => {
     const progress = Math.floor((ev.loaded / ev.total) * 100);
-    setFiles(localFiles => [
-      ...localFiles.map(localFile => {
+    setFiles((localFiles) => [
+      ...localFiles.map((localFile) => {
         if (localFile.props?.id === id) {
           localFile.inProgress = true;
           localFile.props.progress = progress;
         }
         return localFile;
-      })
+      }),
     ]);
   };
 
-  const populateErrorAndUpdateRedux = file => {
+  const populateErrorAndUpdateRedux = (file) => {
     const fieldName = (pConn.getStateProps() as any).value;
     // set errors to property to block submit even on errors in file upload
     PCore.getMessageManager().addMessages({
       messages: [
         {
           type: 'error',
-          message: localizationService.getLocalizedText('Error with one or more files')
-        }
+          message: localizationService.getLocalizedText('Error with one or more files'),
+        },
       ],
       property: fieldName,
       pageReference: pConn.getPageReference(),
-      context: contextName
+      context: contextName,
     });
     insertAttachments([file], pConn, multiAttachmentsInInlineEdit.current, {
       allowMultiple,
       isOldAttachment,
       isMultiAttachmentInInlineEditTable,
-      attachmentCount: attachmentCount.current
+      attachmentCount: attachmentCount.current,
     } as any);
   };
 
   const errorHandler = (isFetchCanceled, file) => {
-    return error => {
+    return (error) => {
       if (!isFetchCanceled(error)) {
         let uploadFailMsg = localizationService.getLocalizedText('Something went wrong');
         if (error.response && error.response.data && error.response.data.errorDetails) {
           uploadFailMsg = localizationService.getLocalizedText(error.response.data.errorDetails[0].localizedValue);
         }
 
-        setFiles(current => {
+        setFiles((current) => {
           return current.map((localFile, index) => {
             if (localFile.props.id === file.props.id) {
               localFile.props.meta = uploadFailMsg;
@@ -194,7 +210,7 @@ export default function Attachment(props: AttachmentProps) {
     };
   };
 
-  const onFileAdded = event => {
+  const onFileAdded = (event) => {
     let addedFiles = Array.from(event.target.files);
     addedFiles = allowMultiple ? addedFiles : [addedFiles[0]];
     const maxAttachmentSize = PCore.getEnvironmentInfo().getMaxAttachmentSize() || '5';
@@ -208,16 +224,18 @@ export default function Attachment(props: AttachmentProps) {
           format: f.name.split('.').pop(),
           icon: getIconFromFileType(f.type),
           onDelete: () => deleteFile(f, index),
-          thumbnail: window.URL.createObjectURL(f)
+          thumbnail: window.URL.createObjectURL(f),
         };
         if (!validateMaxSize(f, maxAttachmentSize)) {
           f.props.error = true;
-          f.props.meta = localizationService.getLocalizedText(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`);
+          f.props.meta = localizationService.getLocalizedText(
+            `File is too big. Max allowed size is ${maxAttachmentSize}MB.`,
+          );
         } else if (!validateFileExtension(f, extensions)) {
           f.props.error = true;
           f.props.meta = `${localizationService.getLocalizedText('File has invalid extension. Allowed extensions are:')} ${extensions.replaceAll(
             '.',
-            ''
+            '',
           )}`;
         }
         if (f.props.error) {
@@ -226,19 +244,19 @@ export default function Attachment(props: AttachmentProps) {
             messages: [
               {
                 type: 'error',
-                message: localizationService.getLocalizedText('Error with one or more files')
-              }
+                message: localizationService.getLocalizedText('Error with one or more files'),
+              },
             ],
             property: fieldName,
             pageReference: pConn.getPageReference(),
-            context: contextName
+            context: contextName,
           });
         }
         return f;
-      })
+      }),
     ];
 
-    const tempFilesWithError = tempFilesToBeUploaded.filter(f => f.props.error);
+    const tempFilesWithError = tempFilesToBeUploaded.filter((f) => f.props.error);
     if (tempFilesWithError.length > 0) {
       filesWithError.current = [...filesWithError.current, ...tempFilesWithError];
 
@@ -246,48 +264,50 @@ export default function Attachment(props: AttachmentProps) {
         allowMultiple,
         isOldAttachment,
         isMultiAttachmentInInlineEditTable,
-        attachmentCount: attachmentCount.current
+        attachmentCount: attachmentCount.current,
       } as PageInstructionOptions);
     }
-    setFiles(current => (!allowMultiple ? [...tempFilesToBeUploaded] : [...current, ...tempFilesToBeUploaded]));
+    setFiles((current) => (!allowMultiple ? [...tempFilesToBeUploaded] : [...current, ...tempFilesToBeUploaded]));
     setToggleUploadBegin(true);
   };
 
   const uploadFiles = useCallback(() => {
     const filesToBeUploaded = files
-      .filter(e => {
+      .filter((e) => {
         const isFileUploaded = e.props && e.props.progress === 100;
         const fileHasError = e.props && e.props.error;
         const isFileUploadedInLastStep = e.responseProps && e.responseProps.ID !== 'temp';
         const isFileUploadInProgress = e.inProgress;
         return !isFileUploadInProgress && !isFileUploaded && !fileHasError && !isFileUploadedInLastStep;
       })
-      .map(file =>
+      .map((file) =>
         PCore.getAttachmentUtils().uploadAttachment(
           file,
-          ev => {
+          (ev) => {
             onUploadProgress(file.props.id, ev);
           },
-          isFetchCanceled => {
+          (isFetchCanceled) => {
             return errorHandler(isFetchCanceled, file);
           },
-          contextName
-        )
+          contextName,
+        ),
       );
 
     // allow new files to be added when other files upload is still in progress
     setToggleUploadBegin(false);
     Promise.allSettled(filesToBeUploaded)
       .then((fileResponses: any) => {
-        fileResponses = fileResponses.filter(fr => fr.status !== 'rejected'); // in case of deleting an in progress file, promise gets cancelled but still enters then block
+        fileResponses = fileResponses.filter((fr) => fr.status !== 'rejected'); // in case of deleting an in progress file, promise gets cancelled but still enters then block
         if (fileResponses.length > 0) {
-          setFiles(localFiles => {
+          setFiles((localFiles) => {
             const tempFilesUploaded = [...localFiles];
-            tempFilesUploaded.forEach(localFile => {
+            tempFilesUploaded.forEach((localFile) => {
               // if attach field has multiple files & in bw any error files are present
               // Example : files = [properFile1, errFile, errFile, properFile2]
               // indexes for delete & preview should be for files [properFile1, properFile2] which is [1,2]
-              const index = fileResponses.findIndex(fileResponse => fileResponse.value.clientFileID === localFile.props.id);
+              const index = fileResponses.findIndex(
+                (fileResponse) => fileResponse.value.clientFileID === localFile.props.id,
+              );
               if (index >= 0) {
                 fileResponses[index].value.thumbnail = localFile.props.thumbnail;
                 localFile.inProgress = false;
@@ -297,7 +317,7 @@ export default function Attachment(props: AttachmentProps) {
                 localFile.handle = fileResponses[index].value.ID;
                 localFile.label = valueRef;
                 localFile.responseProps = {
-                  pzInsKey: 'temp'
+                  pzInsKey: 'temp',
                 };
               }
             });
@@ -309,7 +329,7 @@ export default function Attachment(props: AttachmentProps) {
             isOldAttachment,
             isMultiAttachmentInInlineEditTable,
             attachmentCount: attachmentCount.current,
-            insert: true
+            insert: true,
           } as any);
           attachmentCount.current += fileResponses.length;
 
@@ -319,7 +339,7 @@ export default function Attachment(props: AttachmentProps) {
         }
         actionSequencer.deRegisterBlockingAction(contextName).catch(() => {});
       })
-      .catch(error => {
+      .catch((error) => {
         console.log(error);
         setToggleUploadBegin(false);
       });
@@ -347,7 +367,7 @@ export default function Attachment(props: AttachmentProps) {
   const transformAttachments = () => {
     const transformedFiles = [...attachments];
     let deleteIndex = -1;
-    transformedFiles.forEach(attachment => {
+    transformedFiles.forEach((attachment) => {
       attachment.props.id = attachment.responseProps.ID;
       attachment.props.format = attachment.props.name.split('.').pop();
       if (attachment.props.error) {
@@ -365,25 +385,32 @@ export default function Attachment(props: AttachmentProps) {
   };
 
   useEffect(() => {
-    const caseID = PCore.getStoreValue(`.${getMappedValue('pyID')}`, PCore.getResolvedConstantValue('caseInfo.content'), contextName);
+    const caseID = PCore.getStoreValue(
+      `.${getMappedValue('pyID')}`,
+      PCore.getResolvedConstantValue('caseInfo.content'),
+      contextName,
+    );
     if (displayMode !== 'DISPLAY_ONLY') {
       PCore.getPubSubUtils().subscribe(
         PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
         () => {
           overrideLocalState.current = true;
         },
-        caseID
+        caseID,
       );
     }
 
     // When component mounts, only set local files state from redux.
     const serverFiles = transformAttachments();
     setFiles(serverFiles);
-    filesWithError.current = serverFiles.filter(file => file.props.error);
+    filesWithError.current = serverFiles.filter((file) => file.props.error);
 
     return () => {
       if (displayMode !== 'DISPLAY_ONLY') {
-        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+        PCore.getPubSubUtils().unsubscribe(
+          PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
+          caseID,
+        );
       }
     };
   }, []);
@@ -397,25 +424,26 @@ export default function Attachment(props: AttachmentProps) {
       setFiles(serverFiles);
     } else {
       // Determine whether refresh call has overridden any error files in redux, push error files back to redux from local state to perform client side validation during assignment submit
-      const errorFiles = attachments.filter(attachment => attachment.props.error);
+      const errorFiles = attachments.filter((attachment) => attachment.props.error);
       if (errorFiles.length === 0 && filesWithError.current.length > 0) {
         // Check if local file state contains error files and push those to redux
         const uniqueKey = getMappedValue('pzInsKey');
-        const transformedErrorFiles = filesWithError.current.map(errorFile => {
+        const transformedErrorFiles = filesWithError.current.map((errorFile) => {
           const filename = errorFile.props.name;
           return {
             [uniqueKey]: errorFile.props.id,
             FileName: filename,
             Category: '',
             FileExtension: filename.split('.').pop() ?? filename,
-            error: errorFile.props.error || null
+            error: errorFile.props.error || null,
           };
         });
         let key = '';
         let updatedAttachments: any = [];
         if (allowMultiple || isOldAttachment) {
           key = isOldAttachment ? `${valueRef}.pxResults` : valueRef;
-          const existingAttachments = PCore.getStoreValue(`.${key}`, pConn.getPageReference(), pConn.getContextName()) || [];
+          const existingAttachments =
+            PCore.getStoreValue(`.${key}`, pConn.getPageReference(), pConn.getContextName()) || [];
           updatedAttachments = [...existingAttachments, ...transformedErrorFiles];
         } else {
           key = valueRef;
@@ -424,13 +452,13 @@ export default function Attachment(props: AttachmentProps) {
         PCore.getStateUtils().updateState(pConn.getContextName(), key, updatedAttachments, {
           pageReference: pConn.getPageReference(),
           isArrayDeepMerge: false,
-          removePropertyFromChangedList: true
+          removePropertyFromChangedList: true,
         });
       }
     }
   }, [memoizedAttachments]);
 
-  const handleClick = event => {
+  const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -441,21 +469,21 @@ export default function Attachment(props: AttachmentProps) {
   const content = (
     <div style={{ marginBottom: '8px' }}>
       <div className={`${disabled ? 'file-disabled' : ''} ${validatemessage === '' ? 'file-div' : 'file-div-error'}`}>
-        <div hidden={true} id='attachment-ID'>
+        <div hidden={true} id="attachment-ID">
           {valueRef}
         </div>
         <label htmlFor={valueRef}>
           <input
             style={{ display: 'none' }}
             id={valueRef}
-            name='upload-photo'
-            type='file'
+            name="upload-photo"
+            type="file"
             multiple={allowMultiple}
             required={required}
             disabled={disabled}
             onChange={onFileAdded}
           />
-          <Button style={{ textTransform: 'none' }} variant='outlined' color='primary' component='span'>
+          <Button style={{ textTransform: 'none' }} variant="outlined" color="primary" component="span">
             {allowMultiple
               ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
                 ? 'Choose files'
@@ -475,41 +503,55 @@ export default function Attachment(props: AttachmentProps) {
         files.length > 0 &&
         files.map((item, index) => {
           return (
-            <div key={index} className='psdk-utility-card'>
-              <div className='psdk-utility-card-icon'>
-                {!item.inProgress && <img className='psdk-utility-card-svg-icon' src={srcImg} />}
+            <div key={index} className="psdk-utility-card">
+              <div className="psdk-utility-card-icon">
+                {!item.inProgress && <img className="psdk-utility-card-svg-icon" src={srcImg} />}
                 {item.inProgress && (
                   <div>
                     <CircularProgress />
                   </div>
                 )}
               </div>
-              <div className='psdk-utility-card-main'>
-                <div className='psdk-utility-card-main-primary-label'>{item.props.name}</div>
-                {item.props.meta && <div style={{ color: item.props.error ? 'red' : undefined }}>{item.props.meta}</div>}
+              <div className="psdk-utility-card-main">
+                <div className="psdk-utility-card-main-primary-label">{item.props.name}</div>
+                {item.props.meta && (
+                  <div style={{ color: item.props.error ? 'red' : undefined }}>{item.props.meta}</div>
+                )}
               </div>
-              <div className='psdk-utility-action'>
+              <div className="psdk-utility-action">
                 {item.ID && (
-                  <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={() => deleteFile(item, index)}>
-                    <img className='psdk-utility-card-action-svg-icon' src={deleteIcon} />
+                  <button
+                    type="button"
+                    className="psdk-utility-button"
+                    aria-label="Delete Attachment"
+                    onClick={() => deleteFile(item, index)}
+                  >
+                    <img className="psdk-utility-card-action-svg-icon" src={deleteIcon} />
                   </button>
                 )}
                 {!item.ID && (
                   <div>
                     <IconButton
-                      id='setting-button'
+                      id="setting-button"
                       aria-controls={open ? 'file-menu' : undefined}
                       aria-expanded={open ? 'true' : undefined}
-                      aria-haspopup='true'
+                      aria-haspopup="true"
                       onClick={handleClick}
-                      size='large'
+                      size="large"
                     >
                       <MoreVertIcon />
                     </IconButton>
-                    <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+                    <Menu
+                      style={{ marginTop: '3rem' }}
+                      id="file-menu"
+                      anchorEl={anchorEl}
+                      keepMounted
+                      open={Boolean(anchorEl)}
+                      onClose={handleClose}
+                    >
                       <MenuItem
                         style={{ fontSize: '14px' }}
-                        key='download'
+                        key="download"
                         onClick={() => {
                           setAnchorEl(null);
                           onFileDownload(item.responseProps ? item.responseProps : {});
@@ -517,7 +559,7 @@ export default function Attachment(props: AttachmentProps) {
                       >
                         Download
                       </MenuItem>
-                      <MenuItem style={{ fontSize: '14px' }} key='delete' onClick={() => deleteFile(item, index)}>
+                      <MenuItem style={{ fontSize: '14px' }} key="delete" onClick={() => deleteFile(item, index)}>
                         Delete
                       </MenuItem>
                     </Menu>
@@ -531,10 +573,14 @@ export default function Attachment(props: AttachmentProps) {
   );
 
   return (
-    <div className='file-upload-container'>
+    <div className="file-upload-container">
       <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
       {((files.length === 0 && !allowMultiple) || allowMultiple) && <section>{content}</section>}
-      {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : <span style={{ fontSize: '14px' }}>{helperText}</span>}
+      {validatemessage !== '' ? (
+        <span className="file-error">{validatemessage}</span>
+      ) : (
+        <span style={{ fontSize: '14px' }}>{helperText}</span>
+      )}
       {files && files.length > 0 && <section>{fileDisplay}</section>}
     </div>
   );