From 304e3674c8d4bfe75b3f182f9242de0e36d4f151 Mon Sep 17 00:00:00 2001
From: Miguel Alatzar <migbot@users.noreply.github.com>
Date: Tue, 11 Aug 2020 09:34:38 -0700
Subject: [PATCH] [MM-27139] Use file preview URL for images in post (#4656)

* Use file preview URL for images in post

* Use getFilePreviewUrl for gallery as well

* But use getFileUrl for GIFs in gallery
---
 .../file_attachment_image.test.js.snap        | 38 ++++++++++++
 .../file_attachment_image.js                  |  3 +-
 .../file_attachment_image.test.js             | 62 +++++++++++++++++++
 .../file_attachment_list.js                   |  2 +-
 4 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 app/components/file_attachment_list/__snapshots__/file_attachment_image.test.js.snap
 create mode 100644 app/components/file_attachment_list/file_attachment_image.test.js

diff --git a/app/components/file_attachment_list/__snapshots__/file_attachment_image.test.js.snap b/app/components/file_attachment_list/__snapshots__/file_attachment_image.test.js.snap
new file mode 100644
index 000000000..e9210b9a6
--- /dev/null
+++ b/app/components/file_attachment_list/__snapshots__/file_attachment_image.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileAttachmentImage should match snapshot 1`] = `
+<View
+  style={
+    Object {
+      "borderRadius": 5,
+      "overflow": "hidden",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "paddingBottom": "100%",
+      }
+    }
+  />
+  <Connect(ProgressiveImage)
+    onError={[Function]}
+    resizeMethod="resize"
+    resizeMode="cover"
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    tintDefaultSource={true}
+  />
+</View>
+`;
diff --git a/app/components/file_attachment_list/file_attachment_image.js b/app/components/file_attachment_list/file_attachment_image.js
index 7f4390397..824738036 100644
--- a/app/components/file_attachment_list/file_attachment_image.js
+++ b/app/components/file_attachment_list/file_attachment_image.js
@@ -11,7 +11,6 @@ import {
 import brokenImageIcon from '@assets/images/icons/brokenimage.png';
 import ProgressiveImage from '@components/progressive_image';
 import {Client4} from '@mm-redux/client';
-import {isGif} from '@utils/file';
 import {changeOpacity} from '@utils/theme';
 
 const SMALL_IMAGE_MAX_HEIGHT = 48;
@@ -81,7 +80,7 @@ export default class FileAttachmentImage extends PureComponent {
             imageProps.defaultSource = {uri: file.localPath};
         } else if (file.id) {
             imageProps.thumbnailUri = Client4.getFileThumbnailUrl(file.id);
-            imageProps.imageUri = isGif(file) ? Client4.getFilePreviewUrl(file.id) : Client4.getFileUrl(file.id);
+            imageProps.imageUri = Client4.getFilePreviewUrl(file.id);
         }
         return imageProps;
     };
diff --git a/app/components/file_attachment_list/file_attachment_image.test.js b/app/components/file_attachment_list/file_attachment_image.test.js
new file mode 100644
index 000000000..6f11b2315
--- /dev/null
+++ b/app/components/file_attachment_list/file_attachment_image.test.js
@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {Client4} from '@mm-redux/client';
+import brokenImageIcon from '@assets/images/icons/brokenimage.png';
+
+import FileAttachmentImage from './file_attachment_image.js';
+
+describe('FileAttachmentImage', () => {
+    const baseProps = {
+        file: {},
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <FileAttachmentImage {...baseProps}/>,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    describe('imageProps', () => {
+        const wrapper = shallow(
+            <FileAttachmentImage {...baseProps}/>,
+        );
+        const instance = wrapper.instance();
+
+        it('should have brokenImageIcon as defaultSource if state.failed is true', () => {
+            wrapper.setState({failed: true});
+            const file = {};
+            const imageProps = instance.imageProps(file);
+            expect(imageProps.defaultSource).toStrictEqual(brokenImageIcon);
+            expect(imageProps.thumbnailUri).toBeUndefined();
+            expect(imageProps.imageUri).toBeUndefined();
+        });
+
+        it('should have file.localPath as defaultSource if localPath is set', () => {
+            wrapper.setState({failed: false});
+            const file = {localPath: '/localPath.png'};
+            const imageProps = instance.imageProps(file);
+            expect(imageProps.defaultSource).toStrictEqual({uri: file.localPath});
+            expect(imageProps.thumbnailUri).toBeUndefined();
+            expect(imageProps.imageUri).toBeUndefined();
+        });
+
+        it('should have thumbnailUri and imageUri if the file has an ID', () => {
+            const getFileThumbnailUrl = jest.spyOn(Client4, 'getFileThumbnailUrl');
+            const getFilePreviewUrl = jest.spyOn(Client4, 'getFilePreviewUrl');
+
+            wrapper.setState({failed: false});
+            const file = {id: 'id'};
+            const imageProps = instance.imageProps(file);
+            expect(getFileThumbnailUrl).toHaveBeenCalled();
+            expect(getFilePreviewUrl).toHaveBeenCalled();
+            expect(imageProps.defaultSource).toBeUndefined();
+            expect(imageProps.thumbnailUri).toBeDefined();
+            expect(imageProps.imageUri).toBeDefined();
+        });
+    });
+});
diff --git a/app/components/file_attachment_list/file_attachment_list.js b/app/components/file_attachment_list/file_attachment_list.js
index 1837b29d2..6ac9f90dc 100644
--- a/app/components/file_attachment_list/file_attachment_list.js
+++ b/app/components/file_attachment_list/file_attachment_list.js
@@ -86,7 +86,7 @@ export default class FileAttachmentList extends ImageViewPort {
                 if (file.localPath) {
                     uri = file.localPath;
                 } else {
-                    uri = Client4.getFileUrl(file.id);
+                    uri = isGif(file) ? Client4.getFileUrl(file.id) : Client4.getFilePreviewUrl(file.id);
                 }
 
                 results.push({