@pega/react-sdk-overrides 0.23.26 → 8.8.21

package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,14 +1,26 @@
 import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import { GridSize } from '@material-ui/core/Grid';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../../types/PConnProps';
+
+// Can't use PConnProps until PConnect.getChildren() type is ok
+// interface WideNarrowDetailsProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   showLabel?: boolean,
+//   label?: string,
+//   showHighlightedData?: boolean
+// }
 
 const COLUMN_WIDTHS = [8, 4];
 
-export default function WideNarrowDetails(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+export default function WideNarrowDetails(props /* : WideNarrowDetailsProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -19,13 +31,18 @@ export default function WideNarrowDetails(props) {
   getPConnect().setInheritedProp('readOnly', true);
   const children = getPConnect()
     .getChildren()
-    .map((configObject, index) =>
-      createElement(createPConnectComponent(), {
-        ...configObject,
+    ?.map((configObject, index) => {
+      let theConfigObject: object = configObject;
+      if (!theConfigObject) {
+        theConfigObject = {}
+      }
+
+      return createElement(createPConnectComponent(), {
+        ...theConfigObject,
         // eslint-disable-next-line react/no-array-index-key
         key: index.toString()
-      })
-    );
+      });
+    });
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
@@ -40,12 +57,18 @@ export default function WideNarrowDetails(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
+  let theName = '';
+  if (propsToUse?.showLabel && propsToUse.label ) {
+    theName = propsToUse.label;
+  }
+
   return (
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+    <FieldGroup name={theName}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
         <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
@@ -56,7 +79,7 @@ export default function WideNarrowDetails(props) {
         </Grid>
       )}
       <Grid container spacing={1}>
-        {children.map((child, i) => (
+        {children?.map((child, i) => (
           <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
             {child}
           </Grid>
@@ -65,16 +88,3 @@ export default function WideNarrowDetails(props) {
     </FieldGroup>
   );
 }
-
-WideNarrowDetails.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-WideNarrowDetails.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx

@@ -2,7 +2,13 @@ import React from "react";
 
 import './WideNarrowForm.css';
 
-export default function WideNarrowForm(props) {
+// WideNarrowForm does NOT have getPConnect. So, no need to extend from PConnProps
+interface WideNarrowFormProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+export default function WideNarrowForm(props: WideNarrowFormProps) {
   const {children} = props;
 
   return (

package/lib/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx

@@ -1,15 +1,25 @@
 import React, { Children } from "react";
-import PropTypes from "prop-types";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// WideNarrowPage does NOT have getPConnect. So, no need to extend from PConnProps
+interface WideNarrowPageProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  title: string,
+  templateCol?: string,
+  icon?: string
+}
 
-// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import WideNarrow from '@pega/react-sdk-components/lib/components/template/WideNarrow/WideNarrow';
 
 /*
  * The wrapper handles knowing how to take in just children and mapping
  * to the Cosmos template.
  */
-export default function WideNarrowPage(props) {
-  const { children, title, templateCol, icon } = props;
+export default function WideNarrowPage(props: WideNarrowPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WideNarrow = getComponentFromMap('WideNarrow');
+
+  const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
   const childArray = Children.toArray(children);
 
   return (
@@ -24,15 +34,3 @@ export default function WideNarrowPage(props) {
     </div>
   );
 }
-
-WideNarrowPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  title: PropTypes.string.isRequired,
-  templateCol: PropTypes.string,
-  icon: PropTypes.string
-};
-
-WideNarrowPage.defaultProps = {
-  templateCol: "1fr 1fr",
-  icon: ""
-};

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -11,6 +11,23 @@ import MenuIcon from '@material-ui/icons/Menu';
 import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
 import './WssNavBar.css';
 
+// WssNavBar does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface WssNavBarProps {
+  // If any, enter additional props that only exist on this component
+  appInfo: any,
+  navLinks: Array<any>
+  operator: { currentUserInitials: string },
+  navDisplayOptions: { alignment: string, position: string},
+  // eslint-disable-next-line react/no-unused-prop-types
+  portalName: string,
+  imageSrc: string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  fullImageSrc: string,
+   appName: any
+}
+
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex'
@@ -32,7 +49,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function WssNavBar(props) {
+export default function WssNavBar(props: WssNavBarProps) {
   const { appInfo, navLinks, operator, navDisplayOptions } = props;
   const { alignment, position } = navDisplayOptions;
   const classes = useStyles();
@@ -56,7 +73,7 @@ export default function WssNavBar(props) {
   };
 
   const navLinksContent = (
-    <Box
+    <Box id="nav-links"
       sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
       style={{ justifyContent: alignment }}
     >
@@ -73,7 +90,7 @@ export default function WssNavBar(props) {
       <AppBar position='static' color='primary'>
         <Container maxWidth='xl'>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
-            <Button style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
+            <Button id="appName" style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />
               <span className={classes.appName}>{appInfo.appName}</span>
             </Button>

package/lib/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,8 +1,18 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Card, CardContent, CardHeader, Typography, CardActions, Button } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 
+// AppAnnouncement is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface AppAnnouncementProps {
+  // If any, enter additional props that only exist on this component
+  header?: string,
+  description?: string,
+  datasource?: any,
+  whatsnewlink?: string
+}
+
+
 const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
@@ -12,8 +22,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const AppAnnouncement = (props) => {
-  const { header, description, datasource, whatsnewlink } = props;
+export default function AppAnnouncement(props: AppAnnouncementProps) {
+  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
   if (datasource && datasource.source) {
     details = datasource.source.map((item) => {
@@ -47,21 +57,3 @@ const AppAnnouncement = (props) => {
     </Card>
   );
 };
-
-AppAnnouncement.propTypes = {
-  header: PropTypes.string,
-  description: PropTypes.string,
-  datasource: PropTypes.instanceOf(Object),
-  whatsnewlink: PropTypes.string,
-  // image: PropTypes.string
-};
-
-AppAnnouncement.defaultProps = {
-  header: "",
-  description: "",
-  // image: "",
-  datasource: [],
-  whatsnewlink: ""
-};
-
-export default AppAnnouncement;

package/lib/widget/Attachment/Attachment.css

@@ -4,7 +4,15 @@
 }
 
 .file-div {
-  border: 1px dashed #262626;
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-color);
   width: 100%;
   padding: 0.5rem;
   text-align: center;
@@ -17,9 +25,13 @@
   left: 47%;
 }
 
-file-label::after {
+.file-label::after {
   display: inline;
   content: " *";
   vertical-align: top;
-  color: rgb(217, 28, 41);
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-color);
 }

package/lib/widget/Attachment/Attachment.tsx

@@ -4,18 +4,35 @@ 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 SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList'
 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;
 
-function getCurrentAttachmentsList(context) {
-  return PCore.getStoreValue('.attachmentsList', 'context_data', context) || [];
+// 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) {
-  const {value, getPConnect, label} = props;
+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(
@@ -31,12 +48,12 @@ export default function Attachment(props) {
     categoryName = value.pyCategoryName;
   }
 
-  let valueRef = pConn.getStateProps().value;
+  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(), 'attachmentsList', undefined, {
+    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), undefined, {
       pageReference: 'context_data',
       isArrayDeepMerge: false
     });
@@ -59,10 +76,11 @@ export default function Attachment(props) {
 
   function setNewFiles(arFiles) {
     let index = 0;
+    const maxAttachmentSize = 5;
     for (const item of arFiles) {
-      if (!validateMaxSize(item, 5)) {
+      if (!validateMaxSize(item, maxAttachmentSize.toString())) {
         item.error = true;
-        item.meta = "File is too big. Max allowed size is 5MB.";
+        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);
@@ -76,7 +94,7 @@ export default function Attachment(props) {
     return setNewFiles(arFiles);
   }
 
-  function getNewListUtilityItemProps({
+  function getNewListUtilityItemProps(this: any, {
     att,
     cancelFile,
     downloadFile,
@@ -88,7 +106,7 @@ export default function Attachment(props) {
       actions = [
         {
           id: `Cancel-${att.ID}`,
-          text: "Cancel",
+          text: pConn.getLocalizedValue('Cancel', '', ''),     // 2nd and 3rd args empty string until typedef marked correctly
           icon: "times",
           onClick: cancelFile
         }
@@ -101,7 +119,7 @@ export default function Attachment(props) {
           "download",
           {
             id: `download-${ID}`,
-            text: isFile ? "Download" : "Open",
+            text: isFile ? pConn.getLocalizedValue('Download', '', '') : pConn.getLocalizedValue('Open', '', ''),
             icon: isFile ? "download" : "open",
             onClick: downloadFile
           }
@@ -110,7 +128,7 @@ export default function Attachment(props) {
           "delete",
           {
             id: `Delete-${ID}`,
-            text: "Delete",
+            text: pConn.getLocalizedValue('Delete', '', ''),
             icon: "trash",
             onClick: deleteFile
           }
@@ -126,7 +144,7 @@ export default function Attachment(props) {
       actions = [
         {
           id: `Remove-${att.ID}`,
-          text: "Remove",
+          text: pConn.getLocalizedValue('Remove', '', ''),
           icon: "trash",
           onClick: removeFile
         }
@@ -135,7 +153,7 @@ export default function Attachment(props) {
     return  {
       id: att.ID,
       visual: {
-        icon: getIconForAttachment(att),
+        icon: getIconForAttachment(this, att),
         progress: att.progress === 100 ? undefined: att.progress,
       },
       primary: {
@@ -169,13 +187,13 @@ export default function Attachment(props) {
     const errorHandler = (isFetchCanceled) => {
       return (error) => {
         if (!isFetchCanceled(error)) {
-          let uploadFailMsg = pConn.getLocalizedValue('Something went wrong');
+          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);
+            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');
+          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,
@@ -211,7 +229,7 @@ export default function Attachment(props) {
       )
       .then((fileRes) => {
         let reqObj;
-        if (PCore.getPCoreVersion()?.includes('8.7')) {
+        if (PCoreVersion?.includes('8.7')) {
           reqObj = {
             type: "File",
             attachmentFieldName: valueRef,
@@ -227,12 +245,12 @@ export default function Attachment(props) {
             handle: fileRes.ID,
             ID: fileRes.clientFileID
           };
-          const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName()).filter(
+          const currentAttachmentList = getCurrentAttachmentsList( getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName()).filter(
             (f) => f.label !== valueRef
           );
           PCore.getStateUtils().updateState(
             pConn.getContextName(),
-            'attachmentsList',
+            getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
             [...currentAttachmentList, reqObj],
             {
               pageReference: 'context_data',
@@ -240,7 +258,7 @@ export default function Attachment(props) {
             }
           );
         }
-        const fieldName = pConn.getStateProps().value;
+        const fieldName = pConn.getStateProps()["value"];
         const context = pConn.getContextName();
 
         PCore.getMessageManager().clearMessages({
@@ -249,7 +267,7 @@ export default function Attachment(props) {
           pageReference: pConn.getPageReference(),
           context
         });
-        myFiles[0].meta = "Uploaded Successfully";
+        myFiles[0].meta = pConn.getLocalizedValue('Uploaded successfully', '', '');     // 2nd and 3rd args empty string until typedef marked correctly
 
         arFileList$ = myFiles.map((att) => {
           return getNewListUtilityItemProps({
@@ -283,7 +301,7 @@ export default function Attachment(props) {
   function _removeFileFromList(item: any, list) {
     const arFileList = file.props ? file.props.arFileList$ : list;
     const fileIndex = arFileList.findIndex(element => element?.id === item?.id);
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
+    if (PCoreVersion?.includes('8.7')) {
       if (value) {
         pConn.attachmentsInfo = {
           type: "File",
@@ -303,7 +321,7 @@ export default function Attachment(props) {
       });
     } else {
       const attachmentsList = [];
-      const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName()).filter(
+      const currentAttachmentList = getCurrentAttachmentsList( getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName()).filter(
         (f) => f.label !== valueRef
       );
       if (value && value.pxResults && +value.pyCount > 0) {
@@ -318,7 +336,7 @@ export default function Attachment(props) {
         // updating the redux store to help form-handler in passing the data to delete the file from server
         PCore.getStateUtils().updateState(
           pConn.getContextName(),
-          'attachmentsList',
+          getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
           [...currentAttachmentList, deletedFile],
           {
             pageReference: 'context_data',
@@ -328,7 +346,7 @@ export default function Attachment(props) {
       } else {
         PCore.getStateUtils().updateState(
           pConn.getContextName(),
-          'attachmentsList',
+          getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
           [...currentAttachmentList, ...attachmentsList],
           {
             pageReference: 'context_data',
@@ -372,12 +390,12 @@ export default function Attachment(props) {
         let oMenu: any = {};
 
         oMenu.icon = "download";
-        oMenu.text = "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 = "Delete";
+        oMenu.text = pConn.getLocalizedValue('Delete', '', '');     // 2nd and 3rd args empty string until typedef marked correctly
         oMenu.onClick = () => { _removeFileFromList(arFileList$[0], arFileList$)}
         arMenuList.push(oMenu);
 
@@ -405,7 +423,7 @@ export default function Attachment(props) {
       }
 
       if (fileTemp) {
-        const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName());
+        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) {
@@ -413,7 +431,7 @@ export default function Attachment(props) {
         }
         PCore.getStateUtils().updateState(
           pConn.getContextName(),
-          'attachmentsList',
+          getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''),
           [...currentAttachmentList, ...tempFiles],
           {
             pageReference: 'context_data',
@@ -434,7 +452,7 @@ export default function Attachment(props) {
   }, []);
 
   let content = (
-    <div className='file-div'>
+    <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}>
@@ -467,6 +485,7 @@ export default function Attachment(props) {
     <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/lib/widget/CaseHistory/CaseHistory.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
 import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -9,10 +8,17 @@ 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';
 
-declare const PCore;
+
+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: {
@@ -32,15 +38,15 @@ const StyledTableCell = withStyles((theme: Theme) =>
 )(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([]);
@@ -48,7 +54,7 @@ export default function CaseHistory(props) {
   const [waitingForData, setWaitingForData] = useState<boolean>(true);
 
 
-  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+  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();
 
@@ -163,7 +169,3 @@ export default function CaseHistory(props) {
     </div>
   )
 }
-
-CaseHistory.propTypes = {
-  getPConnect: PropTypes.func.isRequired
-};

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

@@ -2,7 +2,19 @@ import React from "react";
 import { Button } from '@material-ui/core';
 import './ActionButtonsForFileUtil.css';
 
-export default function ActionButtonsForFileUtil(props) {
+// ActionButtonsForFileUtil does NOT have getPConnect.
+//  So, no need to extend PConnProps
+
+interface ActionButtonsForFileUtilProps {
+  // If any, enter additional props that only exist on this component
+  arMainButtons: Array<any>,
+  arSecondaryButtons: Array<any>,
+  primaryAction: any,
+  secondaryAction: any
+}
+
+
+export default function ActionButtonsForFileUtil(props: ActionButtonsForFileUtilProps) {
 
   return (
     <div className="psdk-actions">