PLT-2321 Move the toggle icon next to the link being previewed (#3071)

* PLT-2321 Move the toggle icon next to the link being previewed
only applicable to one-line messages started with link

* remove useless "Youtube" header when no title is available

* allow breaking long links instead of toggle

* simplify "/" to "/<wbr />" replacing
fix empty post without additional content body

* discard buggy "simplification"

2 files changed, 39 insertions, 18 deletions

diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx
index 3c57db0cd..75ba30f23 100644
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -136,7 +136,6 @@ export default class PostBody extends React.Component {
         }
 
         let message;
-        let additionalContent = null;
         if (this.props.post.state === Constants.POST_DELETED) {
             message = (
                 <FormattedMessage
@@ -151,9 +150,28 @@ export default class PostBody extends React.Component {
                     dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message)}}
                 />
             );
+        }
+
+        let messageWrapper = (
+            <div
+                key={`${post.id}_message`}
+                id={`${post.id}_message`}
+                className={postClass}
+            >
+                {loading}
+                {message}
+            </div>
+        );
 
-            additionalContent = (
-                <PostBodyAdditionalContent post={this.props.post}/>
+        let messageWithAdditionalContent;
+        if (this.props.post.state === Constants.POST_DELETED) {
+            messageWithAdditionalContent = messageWrapper;
+        } else {
+            messageWithAdditionalContent = (
+                <PostBodyAdditionalContent
+                    post={this.props.post}
+                    message={messageWrapper}
+                />
             );
         }
 
@@ -161,16 +179,8 @@ export default class PostBody extends React.Component {
             <div>
                 {comment}
                 <div className='post__body'>
-                    <div
-                        key={`${post.id}_message`}
-                        id={`${post.id}_message`}
-                        className={postClass}
-                    >
-                        {loading}
-                        {message}
-                    </div>
+                    {messageWithAdditionalContent}
                     {fileAttachmentHolder}
-                    {additionalContent}
                 </div>
             </div>
         );
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx
index deabaaa9b..89941f5b2 100644
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -117,21 +117,31 @@ export default class PostBodyAdditionalContent extends React.Component {
         const generateEmbed = this.generateEmbed();
 
         if (generateEmbed) {
-            let toggle;
+            let messageWithToggle = [];
             if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMBED_TOGGLE)) {
-                toggle = (
+                // if message has only one line and starts with a link place toggle in this only line
+                // else - place it in new line between message and embed
+                const prependToggle = (/^\s*https?:\/\/.*$/).test(this.props.post.message);
+                messageWithToggle.push(
                     <a
-                        className='post__embed-visibility'
+                        className={`post__embed-visibility ${prependToggle ? 'pull-left' : ''}`}
                         data-expanded={this.state.embedVisible}
                         aria-label='Toggle Embed Visibility'
                         onClick={this.toggleEmbedVisibility}
                     />
                 );
+                if (prependToggle) {
+                    messageWithToggle.push(this.props.message);
+                } else {
+                    messageWithToggle.unshift(this.props.message);
+                }
+            } else {
+                messageWithToggle.push(this.props.message);
             }
 
             return (
                 <div>
-                    {toggle}
+                    {messageWithToggle}
                     <div
                         className='post__embed-container'
                         hidden={!this.state.embedVisible}
@@ -142,10 +152,11 @@ export default class PostBodyAdditionalContent extends React.Component {
             );
         }
 
-        return null;
+        return this.props.message;
     }
 }
 
 PostBodyAdditionalContent.propTypes = {
-    post: React.PropTypes.object.isRequired
+    post: React.PropTypes.object.isRequired,
+    message: React.PropTypes.element.isRequired
 };