[FIX] Broken message fields attachment handling (#21069)

client/components/Message/Attachments/DefaultAttachment.tsx

@@ -18,6 +18,8 @@ export type DefaultAttachmentProps = {
 	author_link?: string;
 	author_name?: string;
 
+	// TODO: replace this component props type with a payload-based type because
+	// `value` comes as `string` and is passed as `ReactNode`
 	fields: FieldsAttachmentProps;
 
 	// footer
@@ -57,7 +59,13 @@ export const DefaultAttachment: FC<DefaultAttachmentProps> = (attachment) => {
 			{!collapsed && <>
 				{attachment.text && <Attachment.Text>{applyMardownFor('text', attachment.text)}</Attachment.Text>}
 				{/* {attachment.fields && <FieldsAttachment fields={attachment.mrkdwn_in?.includes('fields') ? attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText withRichContent={null} content={value} /> })) : attachment.fields} />} */}
-				{attachment.fields && <FieldsAttachment fields={attachment.fields.map(({ value, ...rest }) => {
+				{attachment.fields && <FieldsAttachment fields={attachment.fields.map((field) => {
+					if (!field.value) {
+						return field;
+					}
+
+					const { value, ...rest } = field;
+
 					const cleanValue = (value as string).replace(/(.*)/g, (line: string) => {
 						if (line.trim() === '') {
 							return `${ line }  <br/>`;

client/components/Message/Attachments/FieldsAttachment.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { Box, BoxProps } from '@rocket.chat/fuselage';
 
 type FieldProp = {
 	short?: boolean;
 	title: string;
-	value: JSX.Element | string;
+	value: ReactNode;
 }
 
 const Field: FC<BoxProps | FieldProp> = ({ title, value, ...props }) => <Box mb='x4' pi='x4' width='full' flexBasis={100} flexShrink={0} {...props}>