@pega/react-sdk-overrides 0.23.26 → 0.23.27

package/lib/widget/Attachment/index.tsx

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

package/lib/widget/CaseHistory/CaseHistory.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
+import { useEffect, useRef, useState } 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';
@@ -8,68 +7,81 @@ 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';
 
-declare const PCore;
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+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",
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver',
       backgroundColor: theme.palette.text.disabled,
-      color: theme.palette.getContrastText(theme.palette.text.disabled),
+      color: theme.palette.getContrastText(theme.palette.text.disabled)
     },
     body: {
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: "silver",
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver'
       // fontSize: 14,
-    },
-  }),
+    }
+  })
 )(TableCell);
 
-
-export default function CaseHistory(props) {
+export default function CaseHistory(props: CaseHistoryProps) {
   const { getPConnect } = props;
   const thePConn = getPConnect();
   // let waitingForData = true;
 
   const displayedColumns = [
-    { label: "Date", type: "DateTime", fieldName: "pxTimeCreated" },
-    { label: "Description", type: "TextInput", fieldName: "pyMessageKey" },
-    { label: "User", type: "TextInput", fieldName: "pyPerformer" }
-   ];
+    {
+      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
+  // 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);
-  const dataViewName = "D_pyWorkHistory";
+  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> = [];
+  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: Object, rowValIndex) => {
-        const theType = column["type"];
-        const theFieldName = column["fieldName"];
-        const theValue = ((theType === "Date" || theType === "DateTime")) ? Utils.generateDateTime(row[theFieldName], "DateTime-Short") : row[theFieldName];
+      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)
@@ -78,18 +90,17 @@ export default function CaseHistory(props) {
   }
 
   // Get the case history data when component mounted/initialized
-  useEffect( () => {
-
+  useEffect(() => {
     let bCallSetWaitingForData = true;
 
     const historyData = PCore.getDataApiUtils().getData(
-      dataViewName,  `{"dataViewParameters":[{"CaseInstanceKey":"${caseID}"}]}`,
+      dataViewName,
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
       context
-      );
-
-    historyData.then( (historyJSON: Object) => {
+    ) as Promise<any>;
 
-      const tableDataResults = historyJSON["data"].data;
+    historyData.then((historyJSON: any) => {
+      const tableDataResults = historyJSON.data.data;
 
       // compute the rowData using the tableDataResults
       computeRowData(tableDataResults);
@@ -99,7 +110,6 @@ export default function CaseHistory(props) {
       if (bCallSetWaitingForData) {
         setWaitingForData(false);
       }
-
     });
 
     return () => {
@@ -110,38 +120,36 @@ export default function CaseHistory(props) {
       //  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 theRowKey = 'CaseHistory.TableHeader';
 
-    const theHeaderCells: Array<any> = displayedColumns.map((headerCol, index) => {
+    const theHeaderCells: any[] = displayedColumns.map((headerCol, index) => {
       const theCellKey = `${theRowKey}.${index}`;
-      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>
-    })
+      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>;
+    });
 
     return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
   }
 
-
   function getTableData() {
-    const theDataRows: Array<any> = [];
+    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: Array<Object>, index) => {
+      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] : "---"}</StyledTableCell>
-          <StyledTableCell>{dataRow[1] ? dataRow[1] : "---"}</StyledTableCell>
-          <StyledTableCell>{dataRow[2] ? dataRow[2] : "---"}</StyledTableCell>
-        </TableRow>
-        )
+        theDataRows.push(
+          <TableRow key={theKey}>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : '---'}</StyledTableCell>
+          </TableRow>
+        );
       });
     }
 
@@ -149,21 +157,13 @@ export default function CaseHistory(props) {
   }
 
   return (
-    <div id="CaseHistory">
+    <div id='CaseHistory'>
       <TableContainer>
         <Table>
-          <TableHead>
-            {getTableHeader()}
-          </TableHead>
-          <TableBody>
-            {getTableData()}
-          </TableBody>
+          <TableHead>{getTableHeader()}</TableHead>
+          <TableBody>{getTableData()}</TableBody>
         </Table>
       </TableContainer>
     </div>
-  )
+  );
 }
-
-CaseHistory.propTypes = {
-  getPConnect: PropTypes.func.isRequired
-};

package/lib/widget/CaseHistory/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Case history widget",
   "type": "Widget",
   "subtype": "CASE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/widget/CaseHistory/index.tsx

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

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

@@ -1,22 +1,32 @@
-import React from "react";
 import { Button } from '@material-ui/core';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './ActionButtonsForFileUtil.css';
 
-export default function ActionButtonsForFileUtil(props) {
+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">
+    <div className='psdk-actions'>
+      <div className='psdk-action-buttons'>
         {props.arSecondaryButtons.map(file => (
-          <Button className="secondary-button" key={file.actionID} onClick={props.secondaryAction}>{file.name}</Button>
+          <Button className='secondary-button' key={file.actionID} onClick={props.secondaryAction}>
+            {file.name}
+          </Button>
         ))}
       </div>
-      <div className="psdk-action-buttons">
+      <div className='psdk-action-buttons'>
         {props.arMainButtons.map(file => (
-          <Button className="primary-button" key={file.actionID} onClick={props.primaryAction}>{file.name}</Button>
+          <Button className='primary-button' key={file.actionID} onClick={props.primaryAction}>
+            {file.name}
+          </Button>
         ))}
       </div>
     </div>
-  )
-
+  );
 }

package/lib/widget/FileUtility/FileUtility/FileUtility.css

@@ -40,7 +40,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100,100,100, 0.4);
+  background-color: rgba(100, 100, 100, 0.4);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -62,7 +62,7 @@
   border: 1px dashed;
   width: 100%;
   padding: 0.3rem;
-  text-align: center;;
+  text-align: center;
 }
 
 .psdk-modal-links-row {