From 2ea7e9d3f9bc21fef14d13473c3dd5e2cb205c03 Mon Sep 17 00:00:00 2001
From: Anant Bhasin <38764067+aKn1ghtOut@users.noreply.github.com>
Date: Thu, 18 Mar 2021 20:14:09 +0530
Subject: [PATCH] [FIX] Attachment not rendering markdown (#2924)

* [FIX] Render markdown in Fields content

* Added stories

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 .../__snapshots__/Storyshots.test.js.snap     | 306 ++++++++++++++++--
 app/containers/message/Reply.js               |  21 +-
 storybook/stories/Message.js                  |   6 +-
 3 files changed, 307 insertions(+), 26 deletions(-)

diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index be964795e..84c23537a 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -39301,17 +39301,44 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 1
+                        <Text
+                          accessibilityLabel="Value 1"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 1
+                        </Text>
                       </Text>
                     </View>
                     <View
@@ -39351,17 +39378,44 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 2
+                        <Text
+                          accessibilityLabel="Value 2"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 2
+                        </Text>
                       </Text>
                     </View>
                     <View
@@ -39401,17 +39455,44 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 3
+                        <Text
+                          accessibilityLabel="Value 3"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 3
+                        </Text>
                       </Text>
                     </View>
                     <View
@@ -39451,17 +39532,44 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 4
+                        <Text
+                          accessibilityLabel="Value 4"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 4
+                        </Text>
                       </Text>
                     </View>
                     <View
@@ -39501,17 +39609,44 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 5
+                        <Text
+                          accessibilityLabel="Value 5"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 5
+                        </Text>
                       </Text>
                     </View>
                   </View>
@@ -39541,7 +39676,7 @@ exports[`Storyshots Message list message 1`] = `
         ]
       }
     >
-      Two short custom fields
+      Two short custom fields with markdown
     </Text>
     <View
       accessible={true}
@@ -39951,17 +40086,44 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 1
+                        <Text
+                          accessibilityLabel="Value 1"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 1
+                        </Text>
                       </Text>
                     </View>
                     <View
@@ -40001,17 +40163,66 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 2
+                        <Text
+                          onLongPress={[Function]}
+                          onPress={[Function]}
+                          style={
+                            Object {
+                              "backgroundColor": "transparent",
+                              "color": "#1d74f5",
+                              "fontFamily": "System",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            }
+                          }
+                        >
+                          <Text
+                            accessibilityLabel="Value 2"
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "System",
+                                  "fontSize": 16,
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                Array [
+                                  Object {},
+                                  Object {
+                                    "alignItems": "flex-start",
+                                    "flexDirection": "row",
+                                    "flexWrap": "wrap",
+                                    "justifyContent": "flex-start",
+                                    "marginBottom": 0,
+                                    "marginTop": 0,
+                                  },
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "System",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                ],
+                              ]
+                            }
+                          >
+                            Value 2
+                          </Text>
+                        </Text>
                       </Text>
                     </View>
                   </View>
@@ -40191,17 +40402,44 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 1
+                        <Text
+                          accessibilityLabel="Value 1"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 1
+                        </Text>
                       </Text>
                     </View>
                     <View
@@ -40241,17 +40479,47 @@ exports[`Storyshots Message list message 1`] = `
                             Object {
                               "backgroundColor": "transparent",
                               "fontFamily": "System",
-                              "fontSize": 14,
+                              "fontSize": 16,
                               "fontWeight": "400",
                               "textAlign": "left",
                             },
+                            undefined,
                             Object {
                               "color": "#2f343d",
                             },
                           ]
                         }
                       >
-                        Value 2
+                        <Text
+                          accessibilityLabel="Value 2"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "System",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "textAlign": "left",
+                              },
+                              Array [
+                                Object {},
+                                Object {
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginBottom": 0,
+                                  "marginTop": 0,
+                                },
+                                Object {
+                                  "fontWeight": "bold",
+                                },
+                              ],
+                            ]
+                          }
+                        >
+                          Value 2
+                        </Text>
                       </Text>
                     </View>
                   </View>
diff --git a/app/containers/message/Reply.js b/app/containers/message/Reply.js
index d05668ddb..caa80039a 100644
--- a/app/containers/message/Reply.js
+++ b/app/containers/message/Reply.js
@@ -112,16 +112,24 @@ const Description = React.memo(({
 	return true;
 });
 
-const Fields = React.memo(({ attachment, theme }) => {
+const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
 	if (!attachment.fields) {
 		return null;
 	}
+
+	const { baseUrl, user } = useContext(MessageContext);
 	return (
 		<View style={styles.fieldsContainer}>
 			{attachment.fields.map(field => (
 				<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
 					<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
-					<Text style={[styles.fieldValue, { color: themes[theme].bodyText }]}>{field.value}</Text>
+					<Markdown
+						msg={field.value}
+						baseUrl={baseUrl}
+						username={user.username}
+						getCustomEmoji={getCustomEmoji}
+						theme={theme}
+					/>
 				</View>
 			))}
 		</View>
@@ -176,7 +184,11 @@ const Reply = React.memo(({
 						getCustomEmoji={getCustomEmoji}
 						theme={theme}
 					/>
-					<Fields attachment={attachment} theme={theme} />
+					<Fields
+						attachment={attachment}
+						getCustomEmoji={getCustomEmoji}
+						theme={theme}
+					/>
 				</View>
 			</Touchable>
 			<Markdown
@@ -215,7 +227,8 @@ Description.displayName = 'MessageReplyDescription';
 
 Fields.propTypes = {
 	attachment: PropTypes.object,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	getCustomEmoji: PropTypes.func
 };
 Fields.displayName = 'MessageReplyFields';
 
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index da1517a99..ac5181d8c 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -706,7 +706,7 @@ export default ({ theme }) => {
 				}]}
 			/>
 
-			<Separator title='Two short custom fields' theme={theme} />
+			<Separator title='Two short custom fields with markdown' theme={theme} />
 			<Message
 				msg='Message'
 				attachments={[{
@@ -720,7 +720,7 @@ export default ({ theme }) => {
 						short: true
 					}, {
 						title: 'Field 2',
-						value: 'Value 2',
+						value: '[Value 2](https://google.com/)',
 						short: true
 					}]
 				}, {
@@ -734,7 +734,7 @@ export default ({ theme }) => {
 						short: true
 					}, {
 						title: 'Field 2',
-						value: 'Value 2',
+						value: '**Value 2**',
 						short: true
 					}]
 				}]}