@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/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/templates/react-sdk-reference/src/components/widget/Attachment/index.tsx

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

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

@@ -0,0 +1,171 @@
+import { useEffect, useRef, useState } from 'react';
+import type { Theme } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import isDeepEqual from 'fast-deep-equal/react';
+
+import { Utils } from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface CaseHistoryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+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 @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: object[]): void {
+    const theRowData: 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: any, 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 }] } as any,
+      context
+    ) as Promise<any>;
+
+    historyData.then((historyJSON: any) => {
+      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: 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: 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: 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] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : ('---' as any)}</StyledTableCell>
+          </TableRow>
+        );
+      });
+    }
+
+    return theDataRows;
+  }
+
+  return (
+    <div id='CaseHistory'>
+      <TableContainer>
+        <Table>
+          <TableHead>{getTableHeader()}</TableHead>
+          <TableBody>{getTableData()}</TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/widget/CaseHistory/config-ext.json

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

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

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

package/templates/react-sdk-reference/src/components/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.css

@@ -0,0 +1,13 @@
+.psdk-actions {
+  height: 6.25rem;
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+}
+
+.psdk-action-buttons {
+  width: 50%;
+  justify-content: center;
+  display: flex;
+}

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

@@ -0,0 +1,32 @@
+import { Button } from '@mui/material';
+import type { PConnProps } from '@pega/sdk-react';
+import './ActionButtonsForFileUtil.css';
+
+interface ActionButtonsForFileUtilProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  arMainButtons: any[];
+  arSecondaryButtons: any[];
+  primaryAction: any;
+  secondaryAction: any;
+}
+
+export default function ActionButtonsForFileUtil(props: ActionButtonsForFileUtilProps) {
+  return (
+    <div className='psdk-actions'>
+      <div className='psdk-action-buttons'>
+        {props.arSecondaryButtons.map(file => (
+          <Button className='secondary-button' color='secondary' variant='contained' key={file.actionID} onClick={props.secondaryAction}>
+            {file.name}
+          </Button>
+        ))}
+      </div>
+      <div className='psdk-action-buttons'>
+        {props.arMainButtons.map(file => (
+          <Button className='primary-button' color='primary' variant='contained' key={file.actionID} onClick={props.primaryAction}>
+            {file.name}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/widget/FileUtility/ActionButtonsForFileUtil/index.tsx

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

package/templates/react-sdk-reference/src/components/widget/FileUtility/FileUtility/FileUtility.css

@@ -0,0 +1,118 @@
+.psdk-utility {
+  width: 100%;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  /* background-color: var(--utility-background-color); */
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+  position: relative;
+}
+
+.psdk-header {
+  display: flex;
+  align-items: center;
+}
+
+.psdk-file-utility-card-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  filter: var(--svg-color);
+}
+
+.header-text {
+  font-size: 1rem;
+  font-weight: bold;
+  padding: 0px 5px;
+}
+
+.psdk-utility-count {
+  background: var(--utility-count-background-color);
+  border-radius: calc(1.125 * 0.5rem);
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-align: center;
+  width: 1.25rem;
+}
+
+.psdk-dialog-background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--modal-background-color);
+  position: fixed;
+  z-index: 999;
+  top: 0px;
+  left: 0px;
+}
+
+.psdk-modal-file-top {
+  display: table;
+  margin: auto;
+  min-width: 650px;
+  background-color: var(--modal-top-color);
+  border: 1px solid var(--modal-border-color);
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
+}
+
+.psdk-modal-file-selector {
+  border: 1px dashed;
+  width: 100%;
+  padding: 0.3rem;
+  text-align: center;
+}
+
+.psdk-modal-links-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.psdk-links-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+  width: 83%;
+}
+
+.psdk-modal-link-data {
+  flex-grow: 3;
+}
+
+.psdk-modal-link-add {
+  flex-grow: 1;
+  margin-left: 10px;
+}
+
+.psdk-add-link-action {
+  text-transform: unset !important;
+  font-size: 14px;
+}
+
+.psdk-utility-view-all {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.psdk-view-all-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.psdk-close-button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.psdk-view-all-body {
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}