Fixed Tables & Attachments getting rendered as Editable in readonly s…

…cenarios
pegasystems · Dec 18, 2024 · d7f06f8 · d7f06f8
1 parent 3094a5a
commit d7f06f8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 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
@@ -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/...ages/react-sdk-components/src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx b/...ages/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/...dk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx b/...dk-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
@@ -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>