Implementing Permalinks and jumping to post from search. Performance

improvements.

web/react/components/post_info.jsx

@@ -3,20 +3,28 @@
 
 import DeletePostModal from './delete_post_modal.jsx';
 import UserStore from '../stores/user_store.jsx';
-import * as utils from '../utils/utils.jsx';
+import TeamStore from '../stores/team_store.jsx';
+import * as Utils from '../utils/utils.jsx';
 import TimeSince from './time_since.jsx';
 
 import Constants from '../utils/constants.jsx';
 
+const OverlayTrigger = ReactBootstrap.OverlayTrigger;
+const Popover = ReactBootstrap.Popover;
+
 export default class PostInfo extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {};
+        this.state = {
+            copiedLink: false
+        };
+
+        this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this);
     }
     createDropdown() {
         var post = this.props.post;
         var isOwner = UserStore.getCurrentId() === post.user_id;
-        var isAdmin = utils.isAdmin(UserStore.getCurrentUser().roles);
+        var isAdmin = Utils.isAdmin(UserStore.getCurrentUser().roles);
 
         if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING || post.state === Constants.POST_DELETED) {
             return '';
@@ -113,6 +121,21 @@ export default class PostInfo extends React.Component {
             </div>
         );
     }
+    handlePermalinkCopy() {
+        const textBox = $(ReactDOM.findDOMNode(this.refs.permalinkbox));
+        textBox.select();
+
+        try {
+            const successful = document.execCommand('copy');
+            if (successful) {
+                this.setState({copiedLink: true});
+            } else {
+                this.setState({copiedLink: false});
+            }
+        } catch (err) {
+            this.setState({copiedLink: false});
+        }
+    }
     render() {
         var post = this.props.post;
         var comments = '';
@@ -143,6 +166,37 @@ export default class PostInfo extends React.Component {
 
         var dropdown = this.createDropdown();
 
+        const permalink = TeamStore.getCurrentTeamUrl() + '/pl/' + post.id;
+        const copyButtonText = this.state.copiedLink ? (<div>{'Copy '}<i className='fa fa-check'/></div>) : 'Copy';
+        const permalinkOverlay = (
+            <Popover
+                id='permalink-overlay'
+                className='permalink-popover'
+                placement='left'
+                title=''
+            >
+                <div className='form-inline'>
+                    <input
+                        type='text'
+                        readOnly='true'
+                        ref='permalinkbox'
+                        className='permalink-text form-control no-resize min-height input-large'
+                        rows='1'
+                        value={permalink}
+                    />
+                    <button
+                        data-copy-btn='true'
+                        type='button'
+                        className='btn btn-primary'
+                        onClick={this.handlePermalinkCopy}
+                        data-clipboard-text={permalink}
+                    >
+                        {copyButtonText}
+                    </button>
+                </div>
+            </Popover>
+        );
+
         return (
             <ul className='post__header post__header--info'>
                 <li className='col'>
@@ -152,6 +206,15 @@ export default class PostInfo extends React.Component {
                 </li>
                 <li className='col col__reply'>
                     {comments}
+                    <OverlayTrigger
+                        trigger='click'
+                        placement='left'
+                        rootClose={true}
+                        overlay={permalinkOverlay}
+                    >
+                        <i className={'permalink-icon fa fa-link ' + showCommentClass}/>
+                    </OverlayTrigger>
+
                     <div className='dropdown'>
                         {dropdown}
                     </div>