fix empty space on link preview when title and URL is not present in open graph meta (#2197)

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

@@ -129,6 +129,59 @@ exports[`PostAttachmentOpenGraph should match snapshot, without site_name 1`] =
 </Component>
 `;
 
+exports[`PostAttachmentOpenGraph should match snapshot, without title and url 1`] = `
+<Component
+  style={
+    Object {
+      "borderColor": "rgba(61,60,64,0.2)",
+      "borderRadius": 3,
+      "borderWidth": 1,
+      "flex": 1,
+      "marginTop": 10,
+      "padding": 10,
+    }
+  }
+>
+  <Component
+    style={
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <TouchableOpacity
+      activeOpacity={0.2}
+      onPress={[Function]}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Component
+        ellipsizeMode="tail"
+        numberOfLines={3}
+        style={
+          Array [
+            Object {
+              "color": "#2389d7",
+              "fontSize": 14,
+              "marginBottom": 10,
+            },
+            Object {
+              "marginRight": 0,
+            },
+          ]
+        }
+      >
+        https://mattermost.com/
+      </Component>
+    </TouchableOpacity>
+  </Component>
+</Component>
+`;
+
 exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescription 1`] = `null`;
 
 exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescription 2`] = `

app/components/post_attachment_opengraph/post_attachment_opengraph.js

@@ -226,7 +226,12 @@ export default class PostAttachmentOpenGraph extends PureComponent {
     }
 
     render() {
-        const {isReplyPost, openGraphData, theme} = this.props;
+        const {
+            isReplyPost,
+            link,
+            openGraphData,
+            theme,
+        } = this.props;
 
         if (!openGraphData) {
             return null;
@@ -234,9 +239,9 @@ export default class PostAttachmentOpenGraph extends PureComponent {
 
         const style = getStyleSheet(theme);
 
-        let siteTitle;
+        let siteName;
         if (openGraphData.site_name) {
-            siteTitle = (
+            siteName = (
                 <View style={style.flex}>
                     <Text
                         style={style.siteTitle}
@@ -249,9 +254,10 @@ export default class PostAttachmentOpenGraph extends PureComponent {
             );
         }
 
-        return (
-            <View style={style.container}>
-                {siteTitle}
+        const title = openGraphData.title || openGraphData.url || link;
+        let siteTitle;
+        if (title) {
+            siteTitle = (
                 <View style={style.wrapper}>
                     <TouchableOpacity
                         style={style.flex}
@@ -262,10 +268,17 @@ export default class PostAttachmentOpenGraph extends PureComponent {
                             numberOfLines={3}
                             ellipsizeMode='tail'
                         >
-                            {openGraphData.title || openGraphData.url}
+                            {title}
                         </Text>
                     </TouchableOpacity>
                 </View>
+            );
+        }
+
+        return (
+            <View style={style.container}>
+                {siteName}
+                {siteTitle}
                 {this.renderDescription()}
                 {this.renderImage()}
             </View>

app/components/post_attachment_opengraph/post_attachment_opengraph.test.js

@@ -58,6 +58,16 @@ describe('PostAttachmentOpenGraph', () => {
         expect(wrapper.getElement()).toMatchSnapshot();
     });
 
+    test('should match snapshot, without title and url', () => {
+        const wrapper = shallow(
+            <PostAttachmentOpenGraph
+                {...baseProps}
+                openGraphData={{}}
+            />
+        );
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
     test('should match state and snapshot, on renderImage', () => {
         const wrapper = shallow(
             <PostAttachmentOpenGraph {...baseProps}/>