From d6200745c028dd47b4ce0f11eb396c8f2a4cf807 Mon Sep 17 00:00:00 2001
From: Anant Bhasin <38764067+aKn1ghtOut@users.noreply.github.com>
Date: Fri, 2 Apr 2021 02:31:58 +0530
Subject: [PATCH] [FIX] Make attachment validation compatible with web client
 (#2927)

* [FIX] Make attachment validation compatible with web client

* Added stories

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 .../__snapshots__/Storyshots.test.js.snap     | 275 ++++++++++++++++++
 app/containers/message/Attachments.js         |   6 +-
 storybook/stories/Message.js                  |  31 +-
 3 files changed, 301 insertions(+), 11 deletions(-)

diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index d5d1d912ef..0327976068 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -29093,6 +29093,281 @@ exports[`Storyshots Message list message 1`] = `
         </View>
       </View>
     </View>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "column",
+                "paddingHorizontal": 14,
+                "paddingVertical": 4,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 4,
+                    "height": 36,
+                    "width": 36,
+                  },
+                  Object {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "overflow": "hidden",
+                      },
+                      Object {
+                        "borderRadius": 4,
+                        "height": 36,
+                        "width": 36,
+                      },
+                    ]
+                  }
+                >
+                  <FastImageView
+                    resizeMode="cover"
+                    source={
+                      Object {
+                        "headers": undefined,
+                        "priority": "high",
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=36",
+                      }
+                    }
+                    style={
+                      Object {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "marginLeft": 46,
+                  },
+                  Object {
+                    "marginLeft": 10,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <View
+                  accessible={true}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "opacity": 1,
+                    }
+                  }
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "500",
+                          "lineHeight": 22,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "#0d0e12",
+                        },
+                      ]
+                    }
+                  >
+                    diego.mello
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "System",
+                        "fontSize": 12,
+                        "fontWeight": "400",
+                        "marginLeft": 8,
+                        "textAlign": "left",
+                      },
+                      Object {
+                        "color": "#9ca2a8",
+                      },
+                    ]
+                  }
+                >
+                  10:00 AM
+                </Text>
+              </View>
+              <View>
+                <Text
+                  numberOfLines={0}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "System",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      Object {
+                        "color": "#2f343d",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    accessibilityLabel="Image should not render"
+                    numberOfLines={0}
+                    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,
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    Image should not render
+                  </Text>
+                </Text>
+              </View>
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "#f3f4f5",
+                    "borderColor": "#e1e5e8",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "marginTop": 6,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "padding": 15,
+                    }
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
     <Text
       style={
         Array [
diff --git a/app/containers/message/Attachments.js b/app/containers/message/Attachments.js
index 0d068e9fdf..b94883b8b2 100644
--- a/app/containers/message/Attachments.js
+++ b/app/containers/message/Attachments.js
@@ -15,13 +15,13 @@ const Attachments = React.memo(({
 	}
 
 	return attachments.map((file, index) => {
-		if (file.image_url) {
+		if (file.type === 'file' && file.image_url) {
 			return <Image key={file.image_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
 		}
-		if (file.audio_url) {
+		if (file.type === 'file' && file.audio_url) {
 			return <Audio key={file.audio_url} file={file} getCustomEmoji={getCustomEmoji} theme={theme} />;
 		}
-		if (file.video_url) {
+		if (file.type === 'file' && file.video_url) {
 			return <Video key={file.video_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
 		}
 
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index 6108cb7776..f33f69cfde 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -346,13 +346,21 @@ export default ({ theme }) => {
 				attachments={[{
 					title: 'This is a title',
 					description: 'This is a description',
-					image_url: '/dummypath'
+					image_url: '/dummypath',
+					type: 'file'
 				}]}
 			/>
 			<Message
 				attachments={[{
 					title: 'This is a title',
 					description: 'This is a description :nyan_rocket:',
+					image_url: '/dummypath',
+					type: 'file'
+				}]}
+			/>
+			<Message
+				msg='Image should not render'
+				attachments={[{
 					image_url: '/dummypath'
 				}]}
 			/>
@@ -362,13 +370,15 @@ export default ({ theme }) => {
 				attachments={[{
 					title: 'This is a title',
 					description: 'This is a description :nyan_rocket:',
-					video_url: '/dummypath'
+					video_url: '/dummypath',
+					type: 'file'
 				}]}
 			/>
 			<Message
 				attachments={[{
 					title: 'This is a title',
-					video_url: '/dummypath'
+					video_url: '/dummypath',
+					type: 'file'
 				}]}
 			/>
 
@@ -377,7 +387,8 @@ export default ({ theme }) => {
 				attachments={[{
 					title: 'This is a title',
 					description: 'This is a description :nyan_rocket:',
-					audio_url: '/dummypath'
+					audio_url: '/dummypath',
+					type: 'file'
 				}]}
 			/>
 			<Message msg='First message' isHeader={false} />
@@ -385,21 +396,24 @@ export default ({ theme }) => {
 				attachments={[{
 					title: 'This is a title',
 					description: 'This is a description',
-					audio_url: '/dummypath'
+					audio_url: '/dummypath',
+					type: 'file'
 				}]}
 				isHeader={false}
 			/>
 			<Message
 				attachments={[{
 					title: 'This is a title',
-					audio_url: '/dummypath'
+					audio_url: '/dummypath',
+					type: 'file'
 				}]}
 				isHeader={false}
 			/>
 			<Message
 				attachments={[{
 					title: 'This is a title',
-					audio_url: '/dummypath'
+					audio_url: '/dummypath',
+					type: 'file'
 				}]}
 				isHeader={false}
 			/>
@@ -563,7 +577,8 @@ export default ({ theme }) => {
 				attachments={[{
 					title: 'This is a title',
 					description: 'This is a description',
-					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
+					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac',
+					type: 'file'
 				}]}
 				tmid='1'
 				isThreadSequential