@pega/react-sdk-overrides 8.23.10 → 8.23.11-debug2

package/lib/template/Confirmation/Confirmation.tsx

@@ -9,7 +9,10 @@ import ToDo from '@pega/react-sdk-components/lib/components/widget/ToDo';
 import Details from '@pega/react-sdk-components/lib/components/template/Details/Details';
 import { Button, Card, makeStyles } from '@material-ui/core';
 
-declare const PCore;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 const useStyles = makeStyles(theme => ({
   root: {

package/lib/template/DataReference/DataReference.tsx

@@ -5,8 +5,10 @@ import MultiReferenceReadonly from '@pega/react-sdk-components/lib/components/te
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows ~7 errors)
 declare const PCore: any;
 
+
 export default function DataReference(props) {
   const {
     children,

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,15 +1,21 @@
 import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
-
 import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
+import { getKeyForMappedField, mapStateToProps } from './utils';
 
 import './DefaultForm.css';
 
+const Child = connectToState(mapStateToProps)(props => {
+  const { key, visibility, ...rest } = props;
+
+  return createElement(createPConnectComponent(), { ...rest, key, visibility });
+});
+
 export default function DefaultForm(props) {
   const { getPConnect, NumCols } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
-  const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, '');
 
   let divClass: string;
 
@@ -35,15 +41,16 @@ export default function DefaultForm(props) {
   // to take the children and create components for them, put in an array and pass as the
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
-  const dfChildren = arChildren.map((kid, idx) =>
-    // eslint-disable-next-line react/no-array-index-key
-    createElement(createPConnectComponent(), { ...kid, key: idx })
-  );
+  const dfChildren = arChildren.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
   return (
     <>
-      {instructionText && (
-        <div className='psdk-default-form-instruction-text'>{instructionText}</div>
+      {instructions && (
+        <div className='psdk-default-form-instruction-text'>
+          {/* server performs sanitization method for instructions html content */}
+          { /* eslint-disable react/no-danger */ }
+          <div key="instructions" id="instruction-text" dangerouslySetInnerHTML={{ __html: instructions }} />
+        </div>
       )}
       <div className={divClass}>{dfChildren}</div>
     </>

package/lib/template/DefaultForm/utils/index.ts

@@ -0,0 +1,33 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export const mapStateToProps: any = (_, ownProps) => {
+  const { getPConnect } = ownProps;
+
+  return {
+    visibility: getPConnect().getComputedVisibility(),
+    getPConnect
+  };
+};
+
+export const getKeyForMappedField = field => {
+  if (Array.isArray(field)) {
+    return field
+      .map(item => {
+        return getKeyForMappedField(item);
+      })
+      .join('__');
+  }
+
+  const pConnect = field?.getPConnect?.();
+
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.name) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.name}`;
+  }
+
+  // Using label as a fallback if name is not defined.
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.label) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.label}`;
+  }
+
+  return uuidv4();
+};

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -6,7 +6,10 @@ import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemEx
 import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroupList';
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 
-declare const PCore: any;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 export default function FieldGroupTemplate(props) {
   const {
@@ -38,7 +41,7 @@ export default function FieldGroupTemplate(props) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+      pConn.getListActions().insert({}, referenceList.length);
     }
   };
 

package/lib/template/ListView/ListView.tsx

@@ -42,6 +42,8 @@ import './ListView.css';
 import useInit from './hooks'
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 3 errors)
 declare const PCore: any;
 
 let myRows: Array<any>;
@@ -1002,7 +1004,7 @@ export default function ListView(props) {
               </Grid>
               <Grid item>
                 <TextField
-                  label='Search'
+                  label={ PCore.getLocaleUtils().getLocaleValue('Search', 'Search') }
                   fullWidth
                   variant='outlined'
                   placeholder=''

package/lib/template/ListView/{hooks.js → hooks.ts}

@@ -1,8 +1,10 @@
 import { useEffect } from 'react';
 import { getContext, readContextResponse } from './utils';
 
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
+declare const PCore: any;
+
 export default function useInit(props) {
-  const PCore = window.PCore;
   const {
     referenceList,
     getPConnect,

package/lib/template/ListView/{utils.js → utils.ts}

@@ -1,6 +1,8 @@
-/* eslint-disable no-undef */
 import getDefaultViewMeta from './DefaultViewMeta';
 
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 5 errors)
+declare const PCore: any;
+
 const USER_REFERENCE = 'UserReference';
 const PAGE = '!P!';
 const PAGELIST = '!PL!';
@@ -72,7 +74,7 @@ export const isEmbeddedField = (field) => {
  * @returns {Array}           Metadata of configured embedded fields
  */
 export function getConfigEmbeddedFieldsMeta(configFields, classID) {
-  const configEmbeddedFieldsMeta = [];
+  const configEmbeddedFieldsMeta:Array<any> = [];
   configFields.forEach((field) => {
     let value = field;
     if (isEmbeddedField(value)) {
@@ -172,9 +174,9 @@ function getPresetMetaAttribute(attribute) {
       (primaryField) =>
         !presetConfigFields.some((presetConfigField) => presetConfigField.config.value.split('.')[1] === primaryField)
     );
-    const uncommonFieldsRawMeta = [];
+    const uncommonFieldsRawMeta:Array<any> = [];
     uncommonFieldsList.forEach((uncommonField) => {
-      const uncommonFieldMeta = metaFields.find((metaField) => metaField.fieldID === uncommonField);
+      const uncommonFieldMeta= metaFields.find((metaField) => metaField.fieldID === uncommonField);
       if (uncommonFieldMeta) uncommonFieldsRawMeta.push(uncommonFieldMeta);
     });
     const uncommonFieldsConfigMeta = generateViewMetaData(uncommonFieldsRawMeta, classID, true);
@@ -444,8 +446,8 @@ function populateRenderingOptions(name, config, field) {
   }
 }
 export function initializeColumns(
-  fields = [],
-  getMappedProperty
+  fields:Array<any> = [],
+  getMappedProperty:any = null
 ) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -495,9 +497,9 @@ export const getItemKey = (fields) => {
 };
 
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '') {
-  const queryFields = [];
+  const queryFields:Array<any> = [];
   fields.forEach((field) => {
-    const patchFields = [];
+    const patchFields:Array<any> = [];
     if (field.cellRenderer === 'WorkLink') {
       if (field.customObject && field.customObject.isAssignmentLink) {
         const associationName = field.name.includes(':') ? `${field.name.split(':')[0]}:` : '';
@@ -542,7 +544,7 @@ export const readContextResponse = async (context, params) => {
   } = params;
   const { promisesResponseArray, apiContext: otherContext } = context;
   // eslint-disable-next-line sonarjs/no-unused-collection
-  const listOfComponents = [];
+  const listOfComponents:Array<any> = [];
   const {
     data: { fields: metaFields, classID, isQueryable }
   } = promisesResponseArray[0];
@@ -562,7 +564,7 @@ export const readContextResponse = async (context, params) => {
 
 
   if (isDataObject) {
-    const compositeKeys = [];
+    const compositeKeys:Array<any> = [];
     const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach((item) =>

package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -1,7 +1,11 @@
 import PropTypes from "prop-types";
 import React from "react";
 
-declare const PCore;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
+
 export default function MultiReferenceReadOnly(props) {
   const { getPConnect, label, hideLabel, config } = props;
   const { referenceList, readonlyContextList } = config;

package/lib/template/PromotedFilters/PromotedFilters.tsx

@@ -4,10 +4,14 @@ import Button from '@material-ui/core/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
-import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 import './PromotedFilters.css';
 
-declare const PCore;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
+
 const localeCategory = 'SimpleTable';
 const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
   'TextInput',
@@ -112,7 +116,7 @@ export default function PromotedFilters(props) {
           dataViewParameters: parameters
         };
 
-        if (!Utils.isEmptyObject(promotedFilters)) {
+        if (!isEmptyObject(promotedFilters)) {
           Query.query = { filter: { filterConditions: promotedFilters } };
         }
         setPayload(Query);
@@ -135,10 +139,10 @@ export default function PromotedFilters(props) {
       </div>
       <div>
         <Button key='1' type='button' onClick={clearFilterData} data-testid='clear' variant='contained' color='primary'>
-            {localizedVal('Clear', localeCategory)}
+          {localizedVal('Clear', localeCategory)}
         </Button>
         <Button style={{float: 'right'}} key='2' type='submit' onClick={getFilterData} data-testid='search' variant='contained' color='primary'>
-            {localizedVal('Search', localeCategory)}
+          {localizedVal('Search', localeCategory)}
         </Button>
       </div>
       {initTable && <ListView {...listViewProps} title='' payload={payload}

package/lib/template/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import FieldGroupTemplate from '@pega/react-sdk-components/lib/components/template/FieldGroupTemplate';
 import SimpleTableManual from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTableManual';
 
-declare const PCore: any;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 export default function SimpleTable(props) {
   const { getPConnect, multiRecordDisplayAs, allowTableEdit } = props;

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -31,6 +31,11 @@ import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
+
 const useStyles = makeStyles((/* theme */) => ({
   label: {
     margin: '8px'
@@ -58,7 +63,6 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-declare const PCore: any;
 
 let menuColumnId = '';
 let menuColumnType = '';
@@ -113,7 +117,7 @@ export default function SimpleTableManual(props) {
   const resolvedList = getReferenceList(pConn);
   const pageReference = `${pConn.getPageReference()}${resolvedList}`;
   pConn.setReferenceList(resolvedList);
-  const menuIconOverride$ = Utils.getImageSrc('trash', PCore.getAssetLoader().getStaticServerUrl());
+  const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
   const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
   // NOTE: props has each child.config with datasource and value undefined
@@ -186,8 +190,8 @@ export default function SimpleTableManual(props) {
   };
 
   function generateRowsData() {
-    // if dataPageName property value exists then make a datapage fetch call and get the list of data.
-    if (dataPageName) {
+    // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
+    if (!referenceList.length && dataPageName) {
       getDataPage(dataPageName, parameters, context).then(listData => {
         const data = formatRowsData(listData);
         myRows = data;

package/lib/template/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -5,11 +5,16 @@ import SimpleTable from '@pega/react-sdk-components/lib/components/template/Simp
 
 import PromotedFilters from '@pega/react-sdk-components/lib/components/template/PromotedFilters';
 
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
+
 const isSelfReferencedProperty = (param, referenceProp) => {
   const [, parentPropName] = param.split('.');
   return parentPropName === referenceProp;
 };
-declare const PCore;
+
 /**
  * SimpleTable react component
  * @param {*} props - props

package/lib/template/SubTabs/tabUtils.ts

@@ -1,5 +1,7 @@
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
 
-declare const PCore;
 
 export const getDeferFriendlyTabs = allTabs => {
   return allTabs.map(tab => {

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -56,7 +56,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 +73,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/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

@@ -8,14 +8,19 @@ import SummaryList from '@pega/react-sdk-components/lib/components/widget/Summar
 import { CircularProgress } from "@material-ui/core";
 import download from "downloadjs";
 
+// 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) || [];
+
+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;
+  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(
@@ -36,7 +41,7 @@ export default function Attachment(props) {
   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 +64,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)) {
         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.`);
       }
       item.mimeType = item.type;
       item.icon = getIconFromFileType(item.type);
@@ -76,7 +82,7 @@ export default function Attachment(props) {
     return setNewFiles(arFiles);
   }
 
-  function getNewListUtilityItemProps({
+  function getNewListUtilityItemProps(this: any, {
     att,
     cancelFile,
     downloadFile,
@@ -88,7 +94,7 @@ export default function Attachment(props) {
       actions = [
         {
           id: `Cancel-${att.ID}`,
-          text: "Cancel",
+          text: pConn.getLocalizedValue('Cancel'),
           icon: "times",
           onClick: cancelFile
         }
@@ -101,7 +107,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 +116,7 @@ export default function Attachment(props) {
           "delete",
           {
             id: `Delete-${ID}`,
-            text: "Delete",
+            text: pConn.getLocalizedValue('Delete'),
             icon: "trash",
             onClick: deleteFile
           }
@@ -126,7 +132,7 @@ export default function Attachment(props) {
       actions = [
         {
           id: `Remove-${att.ID}`,
-          text: "Remove",
+          text: pConn.getLocalizedValue('Remove'),
           icon: "trash",
           onClick: removeFile
         }
@@ -135,7 +141,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: {
@@ -211,7 +217,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 +233,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',
@@ -249,7 +255,7 @@ export default function Attachment(props) {
           pageReference: pConn.getPageReference(),
           context
         });
-        myFiles[0].meta = "Uploaded Successfully";
+        myFiles[0].meta = pConn.getLocalizedValue('Uploaded successfully');
 
         arFileList$ = myFiles.map((att) => {
           return getNewListUtilityItemProps({
@@ -283,7 +289,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 +309,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 +324,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 +334,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 +378,12 @@ export default function Attachment(props) {
         let oMenu: any = {};
 
         oMenu.icon = "download";
-        oMenu.text = "Download";
+        oMenu.text = pConn.getLocalizedValue('Download');
         oMenu.onClick = () => { _downloadFileFromList(value.pxResults[0])}
         arMenuList.push(oMenu);
         oMenu = {};
         oMenu.icon = "trash";
-        oMenu.text = "Delete";
+        oMenu.text = pConn.getLocalizedValue('Delete');
         oMenu.onClick = () => { _removeFileFromList(arFileList$[0], arFileList$)}
         arMenuList.push(oMenu);
 
@@ -405,7 +411,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 +419,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 +440,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 +473,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

@@ -10,8 +10,8 @@ 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;
-
+// 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({
@@ -38,9 +38,9 @@ export default function CaseHistory(props) {
   // 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" },
+    { label: thePConn.getLocalizedValue('Description'), type: "TextInput", fieldName: "pyMessageKey" },
+    { label: thePConn.getLocalizedValue('Performed by'), type: "TextInput", fieldName: "pyPerformer" }
    ];
 
   const rowData: any = useRef([]);