@pega/react-sdk-overrides 0.25.4 → 0.25.6

package/lib/widget/Attachment/Attachment.types.ts

@@ -0,0 +1,96 @@
+import type { ReactElement, Ref } from 'react';
+
+export interface ResponseProps {
+  ID: string;
+  extension: string;
+  createDateTime?: Date | string | number;
+  createUser?: string;
+  name: string;
+}
+
+export interface AttachmentActions {
+  rel: string;
+  href: string;
+  title: string;
+  type: string;
+}
+
+export interface AttachmentLinks {
+  delete: AttachmentActions;
+  download: AttachmentActions;
+  edit: AttachmentActions;
+}
+export interface FileObject extends File {
+  icon?: string;
+  ID: string;
+  fileName: string;
+  category: string;
+  responseType: string;
+  fileType: string;
+  mimeType: string;
+  extension: string;
+  thumbnail?: string;
+  nameWithExt: string;
+  inProgress?: boolean;
+  progress?: number;
+  handle: string;
+  label: string;
+  delete?: boolean;
+  error?: boolean;
+  description: string;
+
+  props: {
+    icon?: string;
+
+    ref?: Ref<HTMLDivElement>;
+    id: string;
+    error?: string;
+    format?: string;
+    name: string;
+    thumbnail?: string;
+    onPreview?: () => void;
+    onDelete?: () => void;
+    onOpen?: () => void;
+    onEdit?: () => void;
+    onCancel?: () => void;
+  };
+  responseProps: ResponseProps;
+  value?: {
+    filename: string;
+    ID: string;
+    thumbnail: string;
+  };
+  categoryName: string;
+  createTime: string;
+  createdBy: string;
+  createdByName: string;
+  links: AttachmentLinks;
+  name: string;
+  meta?: ReactElement;
+}
+
+export interface ReduxAttachments {
+  ID?: string;
+  pzInsKey?: string;
+  FileName: string;
+  Category: string;
+  MimeType?: string;
+  FileExtension: string;
+  error: string | null;
+  localAttachment: boolean;
+  thumbnail?: string;
+  fileIndex?: number;
+  instruction?: string;
+}
+
+export interface PageInstructionOptions {
+  allowMultiple: boolean;
+  isMultiAttachmentInInlineEditTable: boolean;
+  attachmentCount: number;
+  insertPageInstruction: boolean;
+  deletePageInstruction: boolean;
+  deleteIndex: number;
+  insertRedux: boolean;
+  isOldAttachment: boolean;
+  deleteRedux: boolean;
+}

package/lib/widget/Attachment/AttachmentUtils.ts

@@ -0,0 +1,316 @@
+import { useCallback, useRef } from 'react';
+import download from 'downloadjs';
+import equal from 'fast-deep-equal';
+
+import type { FileObject, PageInstructionOptions, ReduxAttachments } from './Attachment.types';
+
+export const isContentBinary = (headers: Record<string, string>) => {
+  return headers && headers['content-transfer-encoding'] === 'binary';
+};
+
+export const isContentBase64 = (headers: Record<string, string>) => {
+  return headers && headers['content-transfer-encoding'] === 'base64';
+};
+
+export const validateFileExtension = (fileObj: Record<string, string>, allowedExtensions: string) => {
+  if (!allowedExtensions) {
+    return true;
+  }
+  const allowedExtensionList = allowedExtensions
+    .toLowerCase()
+    .split(',')
+    .map(item => item.replaceAll('.', '').trim());
+  const extension = fileObj.name.split('.').pop()?.toLowerCase() || '';
+  return allowedExtensionList.includes(extension);
+};
+
+export const fileDownload = (data: string | Blob, fileName: string, ext: string | null, headers: Record<string, string>) => {
+  const name = ext ? `${fileName}.${ext}` : fileName;
+  // Temp fix: downloading EMAIl type attachment as html file
+  if (ext === 'html') {
+    download(isContentBase64(headers) ? atob(data as string) : data, name, 'text/html');
+  } else if (isContentBinary(headers)) {
+    download(data, name);
+  } else {
+    download(atob(data as string), name);
+  }
+};
+
+export const getIconFromFileType = (fileType: string) => {
+  let icon = 'document-doc';
+  if (!fileType) return icon;
+  if (fileType.startsWith('audio')) {
+    icon = 'audio';
+  } else if (fileType.startsWith('video')) {
+    icon = 'video';
+  } else if (fileType.startsWith('image')) {
+    icon = 'picture';
+  } else if (fileType.includes('pdf')) {
+    icon = 'document-pdf';
+  } else {
+    const [, subtype] = fileType.split('/');
+    const foundMatch = (sources: string[]) => {
+      return sources.some(key => subtype.includes(key));
+    };
+
+    if (foundMatch(['excel', 'spreadsheet'])) {
+      icon = 'document-xls';
+    } else if (foundMatch(['zip', 'compressed', 'gzip', 'rar', 'tar'])) {
+      icon = 'document-compress';
+    }
+  }
+
+  return icon;
+};
+
+export const fileDownloadVar = (content: { data: string; headers: Record<string, string> }, type: string, name: string, extension: string) => {
+  if (type === 'FILE' || type === undefined) {
+    fileDownload(content.data, name, extension, content.headers);
+  } else if (type === 'URL') {
+    let { data } = content;
+    if (!/^(http|https):\/\//.test(data)) {
+      data = `//${data}`;
+    }
+    window.open(content.data, '_blank');
+  } else if (type === 'EMAIL') {
+    // Temp Fix: for EMAIL type attachment
+    fileDownload(content.data, name, 'html', content.headers);
+  }
+};
+
+export const getMappedValue = (value: string): string => {
+  return PCore.getEnvironmentInfo().getKeyMapping(value) ?? value;
+};
+
+const generateInstructions = (
+  files: FileObject[],
+  pConn: typeof PConnect,
+  attachmentsInModal: ReduxAttachments[] | Pick<ReduxAttachments, 'instruction' | 'fileIndex'>[],
+  options: {
+    allowMultiple: boolean;
+    isMultiAttachmentInInlineEditTable: boolean;
+    attachmentCount: number;
+    insertPageInstruction: boolean;
+    deletePageInstruction: boolean;
+    deleteIndex: number;
+  }
+) => {
+  const { allowMultiple, isMultiAttachmentInInlineEditTable, attachmentCount, insertPageInstruction, deletePageInstruction, deleteIndex } = options;
+  const transformedAttachments: ReduxAttachments[] = [];
+  let valueRef = pConn.getStateProps().value;
+  valueRef = valueRef?.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const uniqueKey = getMappedValue('pzInsKey');
+  files.forEach((file, index) => {
+    const filename = file.value?.filename || file.props?.name || '';
+    const payload = {
+      [uniqueKey]: file.value?.ID || file.props?.id,
+      FileName: filename,
+      Category: '',
+      // MimeType: getMimeTypeFromFile(filename),
+      FileExtension: filename.split('.').pop() ?? filename,
+      error: file.props?.error || null,
+      localAttachment: true,
+      thumbnail: file.value?.thumbnail
+    };
+    transformedAttachments.push(payload);
+    if (payload.error) {
+      return; // Don't process page instructions for error files, skip current iteration
+    }
+    if (allowMultiple) {
+      if (isMultiAttachmentInInlineEditTable) {
+        if (insertPageInstruction) {
+          attachmentsInModal.push({ ...payload, instruction: 'insert' } as any);
+        } else if (deletePageInstruction) {
+          (attachmentsInModal as Pick<ReduxAttachments, 'instruction' | 'fileIndex'>[]).push({
+            instruction: 'delete',
+            fileIndex: deleteIndex
+          });
+        }
+      } else if (insertPageInstruction) {
+        pConn.getListActions().insert({ ID: payload[uniqueKey] }, attachmentCount + index, undefined, {
+          skipStateUpdate: true
+        });
+      } else if (deletePageInstruction) {
+        pConn.getListActions().deleteEntry(deleteIndex, undefined, { skipStateUpdate: true });
+      }
+    } else if (insertPageInstruction) {
+      pConn.getListActions().replacePage(`.${valueRef}`, { ID: payload[uniqueKey] }, { skipStateUpdate: true });
+    } else if (deletePageInstruction) {
+      pConn.getListActions().deletePage(`.${valueRef}`, { skipStateUpdate: true });
+    }
+  });
+  return transformedAttachments;
+};
+
+export const updateReduxState = (
+  transformedAttachments: ReduxAttachments[],
+  pConn: typeof PConnect,
+  valueRef: string,
+  options: PageInstructionOptions
+) => {
+  const { allowMultiple, isOldAttachment, insertRedux, deleteRedux } = options;
+  let deleteIndex = -1;
+
+  if (allowMultiple || isOldAttachment) {
+    transformedAttachments.forEach(attachment => {
+      const key = isOldAttachment ? `${valueRef}.pxResults` : valueRef;
+      const existingAttachments: ReduxAttachments[] = PCore.getStoreValue(`.${key}`, pConn.getPageReference(), pConn.getContextName()) || [];
+
+      if (insertRedux) {
+        const actionPayLoad = {
+          type: 'LIST_ACTION',
+          payload: {
+            instruction: 'INSERT',
+            context: pConn.getContextName(),
+            referenceList: `${pConn.getPageReference()}.${key}`,
+            listIndex: existingAttachments.length,
+            content: attachment
+          }
+        };
+        PCore.getStore()?.dispatch(actionPayLoad);
+      } else if (deleteRedux) {
+        const uniqueKey = getMappedValue('pzInsKey');
+        deleteIndex = existingAttachments.findIndex(
+          existingAttachment =>
+            existingAttachment[uniqueKey as keyof ReduxAttachments] === transformedAttachments[0][uniqueKey as keyof ReduxAttachments]
+        );
+        const actionPayLoad = {
+          type: 'LIST_ACTION',
+          payload: {
+            instruction: 'DELETE',
+            context: pConn.getContextName(),
+            referenceList: `${pConn.getPageReference()}.${key}`,
+            listIndex: deleteIndex
+          }
+        };
+        PCore.getStore()?.dispatch(actionPayLoad);
+      }
+    });
+  } else if (insertRedux) {
+    const actionPayLoad = {
+      type: 'LIST_ACTION',
+      payload: {
+        instruction: 'REPLACE',
+        context: pConn.getContextName(),
+        referenceList: `${pConn.getPageReference()}.${valueRef}`,
+        content: transformedAttachments[0]
+      }
+    };
+    PCore.getStore()?.dispatch(actionPayLoad);
+  } else if (deleteRedux) {
+    const actionPayLoad = {
+      type: 'LIST_ACTION',
+      payload: {
+        instruction: 'DELETEPAGE',
+        context: pConn.getContextName(),
+        referenceList: `${pConn.getPageReference()}.${valueRef}`
+      }
+    };
+    PCore.getStore()?.dispatch(actionPayLoad);
+  }
+};
+
+export const insertAttachments = (
+  files: FileObject[],
+  pConn: typeof PConnect,
+  attachmentsInModal: ReduxAttachments[],
+  options: PageInstructionOptions
+) => {
+  const { isMultiAttachmentInInlineEditTable } = options;
+  let valueRef = pConn.getStateProps().value;
+  valueRef = valueRef?.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const transformedAttachments = generateInstructions(files, pConn, attachmentsInModal, {
+    ...options,
+    insertPageInstruction: true
+  });
+
+  if (isMultiAttachmentInInlineEditTable) {
+    return; // For attachments within modal, redux update is not necessary yet, as modal isn't submitted at this stage
+  }
+  updateReduxState(transformedAttachments, pConn, valueRef, { ...options, insertRedux: true });
+};
+
+export const deleteAttachments = (
+  files: FileObject[],
+  pConn: typeof PConnect,
+  attachmentsInModal: Pick<ReduxAttachments, 'instruction' | 'fileIndex'>[],
+  options: PageInstructionOptions
+) => {
+  const { isMultiAttachmentInInlineEditTable } = options;
+  let valueRef = pConn.getStateProps().value;
+  valueRef = valueRef?.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const transformedAttachments = generateInstructions(files, pConn, attachmentsInModal, {
+    ...options,
+    deletePageInstruction: true
+  });
+
+  if (isMultiAttachmentInInlineEditTable) {
+    return; // For attachments within modal, redux update is not necessary yet, as modal isn't submitted at this stage
+  }
+  updateReduxState(transformedAttachments, pConn, valueRef, { ...options, deleteRedux: true });
+};
+
+export const clearFieldErrorMessages = (pConn: typeof PConnect) => {
+  const fieldName = pConn.getStateProps().value;
+  PCore.getMessageManager().clearMessages({
+    type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
+    property: fieldName,
+    pageReference: pConn.getPageReference(),
+    context: pConn.getContextName()
+  });
+};
+
+export const useFileDownload = (context: string) => {
+  return useCallback(
+    ({
+      ID,
+      name,
+      extension,
+      type,
+      category,
+      responseType
+    }: {
+      ID: string;
+      name: string;
+      extension: string;
+      type: string;
+      category: string;
+      responseType: string;
+    }) => {
+      if (category !== 'pxDocument') {
+        (
+          PCore.getAttachmentUtils().downloadAttachment(ID, context, responseType) as Promise<{
+            data: string;
+            headers: Record<string, string>;
+          }>
+        )
+          .then(content => {
+            fileDownloadVar(content, type, name, extension);
+          })
+
+          .catch(console.error);
+      } else {
+        (
+          PCore.getAttachmentUtils().downloadDocument(ID, context) as Promise<{
+            data: string;
+            headers: Record<string, string>;
+          }>
+        )
+          .then(content => {
+            fileDownloadVar(content, type, name, extension);
+          })
+
+          .catch(console.error);
+      }
+    },
+    [context]
+  );
+};
+
+export const useDeepMemo = (memoFn, key) => {
+  const ref: any = useRef();
+  if (!ref.current || !equal(key, ref.current.key)) {
+    ref.current = { key, value: memoFn() };
+  }
+  return ref.current.value;
+};

package/lib/widget/FileUtility/FileUtility/FileUtility.tsx

@@ -7,15 +7,17 @@ import download from 'downloadjs';
 // import SummaryList from '../../SummaryList';
 // import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
-import { IconButton, Menu, MenuItem, Button, CircularProgress, Card } from '@mui/material';
+import { IconButton, Menu, MenuItem, Button, CircularProgress, Card, debounce } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
-import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentShared';
+import { getResolvedConstantValue } from '@pega/react-sdk-components/lib/components/helpers/object-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FileUtilityProps extends PConnProps {
   // If any, enter additional props that only exist on this component
+  caseId?: string;
 }
 
 export default function FileUtility(props: FileUtilityProps) {
@@ -23,8 +25,9 @@ export default function FileUtility(props: FileUtilityProps) {
   const SummaryList = getComponentFromMap('SummaryList');
   const ActionButtonsForFileUtil = getComponentFromMap('ActionButtonsForFileUtil');
 
-  const { getPConnect } = props;
+  const { getPConnect, caseId } = props;
   const thePConn = getPConnect();
+  const caseID = caseId ?? getResolvedConstantValue(thePConn, PCore.getConstants().CASE_INFO.CASE_INFO_ID);
   const required = true;
   const listTemp = {
     data: [],
@@ -210,7 +213,6 @@ export default function FileUtility(props: FileUtilityProps) {
 
   const getAttachments = () => {
     const attachmentUtils = PCore.getAttachmentUtils();
-    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
 
     if (caseID && caseID !== '') {
       const attPromise = attachmentUtils.getCaseAttachments(caseID, thePConn.getContextName());
@@ -245,25 +247,32 @@ export default function FileUtility(props: FileUtilityProps) {
     }
   };
 
+  const debouncedGetAttachments = debounce(getAttachments, 1000);
+
   useEffect(() => {
-    getAttachments();
+    debouncedGetAttachments();
   }, []);
 
   useEffect(() => {
-    PCore.getPubSubUtils().subscribe(
-      (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
-      getAttachments,
-      'caseAttachmentsUpdateFromCaseview'
-    );
-
-    return () => {
-      PCore.getPubSubUtils().unsubscribe(
-        (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
-        'caseAttachmentsUpdateFromCaseview'
-      );
+    const attachSubObject = {
+      matcher: 'ATTACHMENTS',
+      criteria: {
+        ID: caseID
+      }
+    };
+    const attachSubId = PCore.getMessagingServiceManager().subscribe(attachSubObject, debouncedGetAttachments, getPConnect().getContextName());
+
+    return function cleanup() {
+      PCore.getMessagingServiceManager().unsubscribe(attachSubId);
     };
   }, []);
 
+  useEffect(() => {
+    thePConn.registerAdditionalProps({
+      lastRefreshTime: `@P ${PCore.getConstants().SUMMARY_OF_ATTACHMENTS_LAST_REFRESH_TIME}`
+    });
+  }, [thePConn]);
+
   function setNewFiles(arFiles) {
     let index = 0;
     for (const file of arFiles) {

package/lib/widget/ToDo/ToDo.tsx

@@ -82,19 +82,15 @@ function getID(assignment: any) {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
     paddingBottom: theme.spacing(1),
-    borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light
+    borderRadius: 16
   },
   avatar: {
     backgroundColor: theme.palette.primary.light,
     color: theme.palette.getContrastText(theme.palette.primary.light)
   },
   todoWrapper: {
-    borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light,
     padding: theme.spacing(1),
     margin: theme.spacing(1)
   },
@@ -307,7 +303,7 @@ export default function ToDo(props: ToDoProps) {
             </Avatar>
             <div style={{ display: 'block' }}>
               <Typography variant='h6'>{assignment?.name}</Typography>
-              {`${localizedVal('Task in', localeCategory)} ${renderTaskId(type, getPConnect, showTodoList, assignment)} \u2022  ${localizedVal(
+              {`${localizedVal('Task in', localeCategory)} ${getID(assignment)} \u2022  ${localizedVal(
                 'Urgency',
                 localeCategory
               )}  ${getPriority(assignment)}`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.25.4",
+  "version": "0.25.6",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

package/lib/helpers/attachmentHelpers.ts

@@ -1,97 +0,0 @@
-import { useCallback } from 'react';
-import download from 'downloadjs';
-
-export const isContentBinary = headers => {
-  return headers && headers['content-transfer-encoding'] === 'binary';
-};
-
-export const isContentBase64 = headers => {
-  return headers && headers['content-transfer-encoding'] === 'base64';
-};
-
-export const fileDownload = (data, fileName, ext, headers) => {
-  const name = ext ? `${fileName}.${ext}` : fileName;
-  // Temp fix: downloading EMAIl type attachment as html file
-  if (ext === 'html') {
-    download(isContentBase64(headers) ? atob(data) : data, name, 'text/html');
-  } else if (isContentBinary(headers)) {
-    download(data, name);
-  } else {
-    download(atob(data), name);
-  }
-};
-
-export const fileDownloadVar = (content, type, name, extension) => {
-  if (type === 'FILE' || type === undefined) {
-    fileDownload(content.data, name, extension, content.headers);
-  } else if (type === 'URL') {
-    let { data } = content;
-    if (!/^(http|https):\/\//.test(data)) {
-      data = `//${data}`;
-    }
-    window.open(content.data, '_blank');
-  } else if (type === 'EMAIL') {
-    // Temp Fix: for EMAIL type attachment
-    fileDownload(content.data, name, 'html', content.headers);
-  }
-};
-
-export const useFileDownload = context => {
-  return useCallback(
-    ({ ID, name, extension, type, category, responseType }) => {
-      if (category !== 'pxDocument') {
-        PCore.getAttachmentUtils()
-          .downloadAttachment(ID, context, responseType)
-          .then(content => {
-            fileDownloadVar(content, type, name, extension);
-          })
-
-          .catch(console.error);
-      } else {
-        PCore.getAttachmentUtils()
-          // @ts-expect-error
-          .downloadDocument(ID, context, responseType)
-          .then(content => {
-            fileDownloadVar(content, type, name, extension);
-          })
-
-          .catch(console.error);
-      }
-    },
-    [context]
-  );
-};
-
-export const getIconFromFileType = (fileType): string => {
-  let icon = 'document-doc';
-  if (!fileType) return icon;
-  if (fileType.startsWith('audio')) {
-    icon = 'audio';
-  } else if (fileType.startsWith('video')) {
-    icon = 'video';
-  } else if (fileType.startsWith('image')) {
-    icon = 'picture';
-  } else if (fileType.includes('pdf')) {
-    icon = 'document-pdf';
-  } else {
-    const [, subtype] = fileType.split('/');
-    const foundMatch = sources => {
-      return sources.some(key => subtype.includes(key));
-    };
-
-    if (foundMatch(['excel', 'spreadsheet'])) {
-      icon = 'document-xls';
-    } else if (foundMatch(['zip', 'compressed', 'gzip', 'rar', 'tar'])) {
-      icon = 'document-compress';
-    }
-  }
-
-  return icon;
-};
-
-export const validateMaxSize = (fileObj: any, maxSizeInMB: string): boolean => {
-  const fileSize = (fileObj.size / 1048576).toFixed(2);
-  return parseFloat(fileSize) < parseFloat(maxSizeInMB);
-};
-
-export const isFileUploadedToServer = file => file.responseProps && !file.responseProps.ID?.includes('temp');