From d7f06f8252311ebde4154c0eb804f186d1169468 Mon Sep 17 00:00:00 2001
From: Vishal <vishal.sharma@in.pega.com>
Date: Wed, 18 Dec 2024 15:21:30 +0530
Subject: [PATCH 1/2] Fixed Tables & Attachments getting rendered as Editable
 in readonly scenarios

---
 .../components/field/ScalarList/ScalarList.tsx   |  2 +-
 .../SimpleTable/SimpleTable/SimpleTable.tsx      |  2 +-
 .../SimpleTableManual/SimpleTableManual.tsx      |  8 ++++----
 .../components/widget/Attachment/Attachment.tsx  | 16 ++++++++++------
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx b/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx
index 3a299573..5b02844c 100644
--- a/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx
+++ b/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx
@@ -49,7 +49,7 @@ export default function ScalarList(props: ScalarListProps) {
     ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
   });
 
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'LABELS_LEFT'].includes(displayMode)) {
     return (
       <div>
         <CommaSeparatedList items={items} />
diff --git a/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx b/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx
index ccea3033..2f77a5b3 100644
--- a/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx
+++ b/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx
@@ -69,7 +69,7 @@ export default function SimpleTable(props: SimpleTableProps) {
 
   const label = labelProp || propertyLabel;
   const propsToUse = { label, ...getPConnect().getInheritedProps() };
-  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
+  const isDisplayModeEnabled = displayMode === 'LABELS_LEFT';
 
   if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {
     const {
diff --git a/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx b/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx
index d495e90b..2b73bd66 100644
--- a/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx
+++ b/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx
@@ -92,7 +92,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const classes = useStyles();
   const {
     getPConnect,
-    referenceList = [], // if referenceList not in configProps$, default to empy list
+    referenceList = [], // if referenceList not in configProps$, default to empty list
     children,
     renderMode,
     presets,
@@ -160,9 +160,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   const rawConfig = rawMetadata?.config;
   const rawFields = rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
-  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-  const readOnlyMode = renderMode === 'ReadOnly';
-  const editableMode = renderMode === 'Editable';
+  const isDisplayModeEnabled = displayMode === 'LABELS_LEFT';
+  const readOnlyMode = renderMode === 'ReadOnly' || isDisplayModeEnabled;
+  const editableMode = renderMode === 'Editable' && !isDisplayModeEnabled;
   const showAddRowButton = !readOnlyMode && !hideAddRow;
   const allowEditingInModal =
     (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
diff --git a/packages/react-sdk-components/src/components/widget/Attachment/Attachment.tsx b/packages/react-sdk-components/src/components/widget/Attachment/Attachment.tsx
index d3e6535c..9802afd5 100644
--- a/packages/react-sdk-components/src/components/widget/Attachment/Attachment.tsx
+++ b/packages/react-sdk-components/src/components/widget/Attachment/Attachment.tsx
@@ -316,7 +316,7 @@ export default function Attachment(props: AttachmentProps) {
   }, [toggleUploadBegin]);
 
   useEffect(() => {
-    if (files.length > 0 && displayMode !== 'DISPLAY_ONLY') {
+    if (files.length > 0 && displayMode !== 'LABELS_LEFT') {
       const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
       // block duplicate files to redux store when added 1 after another to prevent multiple duplicates being added to the case on submit
       const tempFiles = files.filter(f => currentAttachmentList.findIndex(fr => fr.ID === f.ID) === -1 && !f.inProgress && f.responseProps);
@@ -416,7 +416,7 @@ export default function Attachment(props: AttachmentProps) {
                 {item.props.meta && <div style={{ color: item.props.error ? 'red' : undefined }}>{item.props.meta}</div>}
               </div>
               <div className='psdk-utility-action'>
-                {item.ID && (
+                {item.ID && displayMode !== 'LABELS_LEFT' && (
                   <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={() => deleteFile(item)}>
                     <img className='psdk-utility-card-action-svg-icon' src={deleteIcon} />
                   </button>
@@ -440,9 +440,11 @@ export default function Attachment(props: AttachmentProps) {
                       >
                         Download
                       </MenuItem>
-                      <MenuItem style={{ fontSize: '14px' }} key='delete' onClick={() => deleteFile(item)}>
-                        Delete
-                      </MenuItem>
+                      {displayMode !== 'LABELS_LEFT' && (
+                        <MenuItem style={{ fontSize: '14px' }} key='delete' onClick={() => deleteFile(item)}>
+                          Delete
+                        </MenuItem>
+                      )}
                     </Menu>
                   </div>
                 )}
@@ -456,7 +458,9 @@ export default function Attachment(props: AttachmentProps) {
   return (
     <div className='file-upload-container'>
       <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
-      {((files.length === 0 && allowMultiple !== 'true') || allowMultiple === 'true') && <section>{content}</section>}
+      {((files.length === 0 && allowMultiple !== 'true') || allowMultiple === 'true') && displayMode !== 'LABELS_LEFT' && (
+        <section>{content}</section>
+      )}
       {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : ''}
       {files && files.length > 0 && <section>{fileDisplay}</section>}
     </div>

From 6324b39904fa9b8c88bf442b68358316412c1f1e Mon Sep 17 00:00:00 2001
From: Vishal <vishal.sharma@in.pega.com>
Date: Wed, 18 Dec 2024 15:36:18 +0530
Subject: [PATCH 2/2] Removed extra entry in the array

---
 .../src/components/field/ScalarList/ScalarList.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx b/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx
index 5b02844c..03563c46 100644
--- a/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx
+++ b/packages/react-sdk-components/src/components/field/ScalarList/ScalarList.tsx
@@ -49,7 +49,7 @@ export default function ScalarList(props: ScalarListProps) {
     ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
   });
 
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'LABELS_LEFT'].includes(displayMode)) {
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode)) {
     return (
       <div>
         <CommaSeparatedList items={items} />