Distinguish between static embeds and toggleable embeds (#3333)

webapp/components/post_view/components/post_body_additional_content.jsx

@@ -18,7 +18,8 @@ export default class PostBodyAdditionalContent extends React.Component {
 
         this.getSlackAttachment = this.getSlackAttachment.bind(this);
         this.getOEmbedProvider = this.getOEmbedProvider.bind(this);
-        this.generateEmbed = this.generateEmbed.bind(this);
+        this.generateToggleableEmbed = this.generateToggleableEmbed.bind(this);
+        this.generateStaticEmbed = this.generateStaticEmbed.bind(this);
         this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this);
 
         this.state = {
@@ -69,29 +70,12 @@ export default class PostBodyAdditionalContent extends React.Component {
         return null;
     }
 
-    generateEmbed() {
+    generateToggleableEmbed() {
-        if (this.props.post.type === 'slack_attachment') {
-            return this.getSlackAttachment();
-        }
-
         const link = Utils.extractFirstLink(this.props.post.message);
         if (!link) {
             return null;
         }
 
-        if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMBED_PREVIEW)) {
-            const provider = this.getOEmbedProvider(link);
-
-            if (provider) {
-                return (
-                    <PostAttachmentOEmbed
-                        provider={provider}
-                        link={link}
-                    />
-                );
-            }
-        }
-
         if (YoutubeVideo.isYoutubeLink(link)) {
             return (
                 <YoutubeVideo
@@ -117,10 +101,47 @@ export default class PostBodyAdditionalContent extends React.Component {
         return null;
     }
 
-    render() {
+    generateStaticEmbed() {
-        const generateEmbed = this.generateEmbed();
+        if (this.props.post.type === Constants.POST_TYPE_ATTACHMENT) {
+            return this.getSlackAttachment();
+        }
 
-        if (generateEmbed) {
+        const link = Utils.extractFirstLink(this.props.post.message);
+        if (!link) {
+            return null;
+        }
+
+        if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMBED_PREVIEW)) {
+            const provider = this.getOEmbedProvider(link);
+
+            if (provider) {
+                return (
+                    <PostAttachmentOEmbed
+                        provider={provider}
+                        link={link}
+                    />
+                );
+            }
+        }
+
+        return null;
+    }
+
+    render() {
+        const staticEmbed = this.generateStaticEmbed();
+
+        if (staticEmbed) {
+            return (
+                <div>
+                    {this.props.message}
+                    {staticEmbed}
+                </div>
+            );
+        }
+
+        const toggleableEmbed = this.generateToggleableEmbed();
+
+        if (toggleableEmbed) {
             let messageWithToggle = [];
 
             // if message has only one line and starts with a link place toggle in this only line
@@ -148,7 +169,7 @@ export default class PostBodyAdditionalContent extends React.Component {
                         className='post__embed-container'
                         hidden={!this.state.embedVisible}
                     >
-                    {generateEmbed}
+                    {toggleableEmbed}
                     </div>
                 </div>
             );

webapp/utils/constants.jsx

@@ -237,6 +237,7 @@ export default {
     POST_DELETED: 'deleted',
     POST_TYPE_EPHEMERAL: 'system_ephemeral',
     POST_TYPE_JOIN_LEAVE: 'system_join_leave',
+    POST_TYPE_ATTACHMENT: 'slack_attachment',
     SYSTEM_MESSAGE_PREFIX: 'system_',
     SYSTEM_MESSAGE_PROFILE_NAME: 'System',
     SYSTEM_MESSAGE_PROFILE_IMAGE: logoImage,