add border to image of link preview and not allow such image width to exceed the view port width (#2189)

app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap

@@ -6,7 +6,8 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
 <Component
   style={
     Object {
-      "borderColor": "rgba(170,170,170,0.2)",
+      "borderColor": "rgba(61,60,64,0.2)",
+      "borderRadius": 3,
       "borderWidth": 1,
       "flex": 1,
       "marginTop": 10,
@@ -26,7 +27,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
       numberOfLines={1}
       style={
         Object {
-          "color": "rgba(170,170,170,0.5)",
+          "color": "rgba(61,60,64,0.5)",
           "fontSize": 12,
           "marginBottom": 10,
         }
@@ -58,7 +59,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
         style={
           Array [
             Object {
-              "color": undefined,
+              "color": "#2389d7",
               "fontSize": 14,
               "marginBottom": 10,
             },
@@ -90,7 +91,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescr
     numberOfLines={5}
     style={
       Object {
-        "color": "rgba(170,170,170,0.7)",
+        "color": "rgba(61,60,64,0.7)",
         "fontSize": 13,
         "marginBottom": 10,
       }
@@ -108,6 +109,10 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
   style={
     Object {
       "alignItems": "center",
+      "borderColor": "rgba(61,60,64,0.2)",
+      "borderRadius": 3,
+      "borderWidth": 1,
+      "marginTop": 5,
     }
   }
 >
@@ -116,7 +121,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
     style={
       Object {
         "height": 150,
-        "width": 312,
+        "width": 307,
       }
     }
   >
@@ -129,7 +134,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
           },
           Object {
             "height": 150,
-            "width": 312,
+            "width": 307,
           },
         ]
       }

app/components/post_attachment_opengraph/post_attachment_opengraph.js

@@ -19,7 +19,7 @@ import {getNearestPoint} from 'app/utils/opengraph';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 const MAX_IMAGE_HEIGHT = 150;
-const VIEWPORT_IMAGE_OFFSET = 88;
+const VIEWPORT_IMAGE_OFFSET = 93;
 const VIEWPORT_IMAGE_REPLY_OFFSET = 13;
 
 export default class PostAttachmentOpenGraph extends PureComponent {
@@ -216,7 +216,6 @@ export default class PostAttachmentOpenGraph extends PureComponent {
                     style={{width, height}}
                 >
                     <Image
-                        ref='image'
                         style={[style.image, {width, height}]}
                         source={source}
                         resizeMode='contain'
@@ -273,6 +272,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             flex: 1,
             borderColor: changeOpacity(theme.centerChannelColor, 0.2),
             borderWidth: 1,
+            borderRadius: 3,
             marginTop: 10,
             padding: 10,
         },
@@ -300,6 +300,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         imageContainer: {
             alignItems: 'center',
+            borderColor: changeOpacity(theme.centerChannelColor, 0.2),
+            borderWidth: 1,
+            borderRadius: 3,
+            marginTop: 5,
         },
         image: {
             borderRadius: 3,

app/components/post_attachment_opengraph/post_attachment_opengraph.test.js

@@ -9,6 +9,8 @@ import {
     TouchableOpacity,
 } from 'react-native';
 
+import Preferences from 'mattermost-redux/constants/preferences';
+
 import PostAttachmentOpenGraph from './post_attachment_opengraph';
 
 describe('PostAttachmentOpenGraph', () => {
@@ -26,9 +28,7 @@ describe('PostAttachmentOpenGraph', () => {
         isReplyPost: false,
         link: 'https://mattermost.com/',
         navigator: {},
-        theme: {
-            centerChannelColor: '#aaa',
-        },
+        theme: Preferences.THEMES.default,
     };
 
     test('should match snapshot, without image and description', () => {

app/utils/images.js

@@ -28,7 +28,10 @@ export const calculateDimensions = (height, width, viewPortWidth = 0, viewPortHe
     ) {
         imageHeight = viewPortHeight || IMAGE_MAX_HEIGHT;
         imageWidth = imageHeight * heightRatio;
-    } else if (imageHeight < IMAGE_MIN_DIMENSION) {
+    } else if (
+        imageHeight < IMAGE_MIN_DIMENSION &&
+        IMAGE_MIN_DIMENSION * heightRatio <= viewPortWidth
+    ) {
         imageHeight = IMAGE_MIN_DIMENSION;
         imageWidth = imageHeight * heightRatio;
     }

app/utils/images.test.js

@@ -56,4 +56,10 @@ describe('Images calculateDimensions', () => {
         const {height} = calculateDimensions(1920, 1080, PORTRAIT_VIEWPORT, 340);
         expect(height).toEqual(340);
     });
+
+    it('images with height below 50 but setting to 50 will make the width exceed the view port width should remain as is', () => {
+        const {height, width} = calculateDimensions(45, 310, PORTRAIT_VIEWPORT);
+        expect(height).toEqual(45);
+        expect(width).toEqual(310);
+    });
 });