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"

4 files changed, 64 insertions, 37 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
 };
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 051d68f34..e6edcb86a 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -210,6 +210,14 @@ export default class RhsRootPost extends React.Component {
             />
         );
 
+        const messageWrapper = (
+            <div
+                ref='message_holder'
+                onClick={TextFormatting.handleClick}
+                dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}}
+            />
+        );
+
         return (
             <div className={'post post--root ' + userCss + ' ' + systemMessageClass}>
                 <div className='post-right-channel__name'>{channelName}</div>
@@ -241,13 +249,9 @@ export default class RhsRootPost extends React.Component {
                             </li>
                         </ul>
                         <div className='post__body'>
-                            <div
-                                ref='message_holder'
-                                onClick={TextFormatting.handleClick}
-                                dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}}
-                            />
                             <PostBodyAdditionalContent
                                 post={post}
+                                message={messageWrapper}
                             />
                             {fileAttachment}
                         </div>
diff --git a/webapp/components/youtube_video.jsx b/webapp/components/youtube_video.jsx
index dc2d368d7..42b193612 100644
--- a/webapp/components/youtube_video.jsx
+++ b/webapp/components/youtube_video.jsx
@@ -144,9 +144,22 @@ export default class YoutubeVideo extends React.Component {
             return <div className='video-loading'/>;
         }
 
-        let header = 'Youtube';
+        let header;
         if (this.state.title) {
-            header = header + ' - ';
+            header = (
+                <h4>
+                    <span className='video-type'>{'Youtube - '}</span>
+                    <span className='video-title'>
+                        <a
+                            href={this.props.link}
+                            target='blank'
+                            rel='noopener noreferrer'
+                        >
+                            {this.state.title}
+                        </a>
+                    </span>
+                </h4>
+            );
         }
 
         let content;
@@ -190,18 +203,7 @@ export default class YoutubeVideo extends React.Component {
 
         return (
             <div>
-                <h4>
-                    <span className='video-type'>{header}</span>
-                    <span className='video-title'>
-                        <a
-                            href={this.props.link}
-                            target='blank'
-                            rel='noopener noreferrer'
-                        >
-                            {this.state.title}
-                        </a>
-                    </span>
-                </h4>
+                {header}
                 <div
                     className='video-div embed-responsive-item'
                     onClick={this.play}