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 aec9d130..947429bc 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 @@ -226,7 +226,8 @@ export default function SimpleTableManual(props: PropsWithChildren item.name).map(item => item.name) + // Temporary filter for attachments to align with constellation payload behavior. + fieldDefs.filter(item => item.name && item.meta?.type !== 'Attachment').map(item => item.name) ); } else { // @ts-expect-error - An argument for 'fields' was not provided @@ -261,7 +262,7 @@ export default function SimpleTableManual(props: PropsWithChildren { - const transformedFiles = [...attachments]; let deleteIndex = -1; - transformedFiles.forEach(attachment => { - attachment.props.id = attachment.responseProps.ID; - attachment.props.format = attachment.props.name.split('.').pop(); - if (attachment.props.error) { - attachment.responseProps.deleteIndex = deleteIndex; + const transformedFiles = attachments.map(attachment => { + const newProps = { + ...attachment.props, + id: attachment.responseProps.ID, + format: attachment.props.name.split('.').pop() + }; + const newResponseProps = { ...attachment.responseProps }; + if (newProps.error) { + newResponseProps.deleteIndex = deleteIndex; } else { deleteIndex += 1; - attachment.responseProps.deleteIndex = deleteIndex; + newResponseProps.deleteIndex = deleteIndex; } - if (attachment.props.thumbnail) { - thumbnailURLs.current.push(attachment.props.thumbnail); + if (newProps.thumbnail) { + thumbnailURLs.current.push(newProps.thumbnail); } + return { ...attachment, props: newProps, responseProps: newResponseProps }; }); return transformedFiles; @@ -427,11 +431,15 @@ export default function Attachment(props: AttachmentProps) { isArrayDeepMerge: false, removePropertyFromChangedList: true }); - } else { - const serverFiles = transformAttachments(); - attachmentCount.current = attachments.length; - filesWithError.current = []; - setFiles(serverFiles); + } else if (filesWithError.current.length === 0) { + // Sync local state from server when attachments genuinely changed (e.g., table remount after modal submit) + const hasActiveUpload = files.some(f => f.inProgress); + if (!hasActiveUpload) { + const serverFiles = transformAttachments(); + attachmentCount.current = attachments.length; + filesWithError.current = []; + setFiles(serverFiles); + } } } }, [memoizedAttachments]); @@ -546,6 +554,70 @@ export default function Attachment(props: AttachmentProps) { ); + const displayOnlyFileDisplay = ( +
+ {files && + files.length > 0 && + files.map((item, index) => { + return ( +
+
+ +
+
+
{item.props.name}
+ {item.props.meta &&
{item.props.meta}
} +
+
+
+ handleClick(event, index)} + size='large' + > + + + + { + handleClose(); + onFileDownload(item.responseProps ? item.responseProps : {}); + }} + > + Download + + +
+
+
+ ); + })} +
+ ); + + if (displayMode === 'DISPLAY_ONLY') { + return ( +
+ {label} + {validatemessage !== '' ? {validatemessage} : {helperText}} + {files && files.length > 0 ?
{displayOnlyFileDisplay}
: ---} +
+ ); + } + return (
{label} diff --git a/packages/react-sdk-components/tests/e2e/Digv2/FormFields/Attachment.spec.js b/packages/react-sdk-components/tests/e2e/Digv2/FormFields/Attachment.spec.js index 23df2d62..a5b52bb2 100644 --- a/packages/react-sdk-components/tests/e2e/Digv2/FormFields/Attachment.spec.js +++ b/packages/react-sdk-components/tests/e2e/Digv2/FormFields/Attachment.spec.js @@ -126,8 +126,8 @@ test.describe('E2E test', () => { /** Delete attachment */ await menuSelector.locator('li >> text="Delete"').click(); - await expect(page.locator('div >> text="cableinfo.jpg"')).toBeVisible(); - await expect(page.locator('div >> text="cablechat.jpg"')).toBeHidden(); + await expect(page.locator('div >> text="cableinfo.jpg"')).toBeHidden(); + await expect(page.locator('div >> text="cablechat.jpg"')).toBeVisible(); }, 10000); });