PLT-3782 Do not move the "@" sign and flag icon to the left of search bar when opening the right hand sidebar (#4850)

* do not move the mention & flag button to the left of the search box when in search mode

* fixed the margin & padding issues of the search box

* fixed the member icon positioning issue and the expanded sidebar toggle issue

* fixed remaining bugs when sidebar is in expanded mode

* changed propTypes from func to bool

webapp/components/channel_header.jsx

@@ -728,12 +728,12 @@ export default class ChannelHeader extends React.Component {
                                     </OverlayTrigger>
                                 </div>
                             </th>
-                            <th>
+                            <th className='header-list__members'>
                                 {popoverListMembers}
                             </th>
-                            <th className='search-bar__container'><NavbarSearchBox/></th>
+                            <th className='search-bar__container'><NavbarSearchBox showMentionFlagBtns={false}/></th>
                             <th>
-                                <div className='dropdown channel-header__links'>
+                                <div className='dropdown channel-header__links search-btns'>
                                     <OverlayTrigger
                                         delayShow={Constants.OVERLAY_TIME_DELAY}
                                         placement='bottom'
@@ -750,7 +750,7 @@ export default class ChannelHeader extends React.Component {
                                 </div>
                             </th>
                             <th>
-                                <div className='dropdown channel-header__links'>
+                                <div className='dropdown channel-header__links search-btns'>
                                     <OverlayTrigger
                                         delayShow={Constants.OVERLAY_TIME_DELAY}
                                         placement='bottom'

webapp/components/search_bar.jsx

@@ -5,7 +5,9 @@ import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import Client from 'client/web_client.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
+import * as GlobalActions from 'actions/global_actions.jsx';
 import SearchStore from 'stores/search_store.jsx';
+import UserStore from 'stores/user_store.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import SuggestionBox from './suggestion/suggestion_box.jsx';
 import SearchChannelProvider from './suggestion/search_channel_provider.jsx';
@@ -13,12 +15,12 @@ import SearchSuggestionList from './suggestion/search_suggestion_list.jsx';
 import SearchUserProvider from './suggestion/search_user_provider.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
-import {loadProfilesForPosts} from 'actions/post_actions.jsx';
+import {loadProfilesForPosts, getFlaggedPosts} from 'actions/post_actions.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 var ActionTypes = Constants.ActionTypes;
-import {Popover} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap';
 
 import React from 'react';
 
@@ -33,6 +35,8 @@ export default class SearchBar extends React.Component {
         this.handleUserBlur = this.handleUserBlur.bind(this);
         this.performSearch = this.performSearch.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.searchMentions = this.searchMentions.bind(this);
+        this.getFlagged = this.getFlagged.bind(this);
 
         const state = this.getSearchTermStateFromStores();
         state.focused = false;
@@ -148,7 +152,28 @@ export default class SearchBar extends React.Component {
         this.clearFocus();
     }
 
+    searchMentions(e) {
+        e.preventDefault();
+        const user = UserStore.getCurrentUser();
+        if (SearchStore.isMentionSearch) {
+            // Close
+            GlobalActions.toggleSideBarAction(false);
+        } else {
+            GlobalActions.emitSearchMentionsEvent(user);
+        }
+    }
+
+    getFlagged(e) {
+        e.preventDefault();
+        if (SearchStore.isFlaggedPosts) {
+            GlobalActions.toggleSideBarAction(false);
+        } else {
+            getFlaggedPosts();
+        }
+    }
+
     render() {
+        const flagIcon = Constants.FLAG_ICON_SVG;
         var isSearching = null;
         if (this.state.isSearching) {
             isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
@@ -159,6 +184,73 @@ export default class SearchBar extends React.Component {
             helpClass += ' visible';
         }
 
+        const recentMentionsTooltip = (
+            <Tooltip id='recentMentionsTooltip'>
+                <FormattedMessage
+                    id='channel_header.recentMentions'
+                    defaultMessage='Recent Mentions'
+                />
+            </Tooltip>
+        );
+
+        const flaggedTooltip = (
+            <Tooltip id='flaggedTooltip'>
+                <FormattedMessage
+                    id='channel_header.flagged'
+                    defaultMessage='Flagged Posts'
+                />
+            </Tooltip>
+        );
+
+        let mentionBtn;
+        let flagBtn;
+        if (this.props.showMentionFlagBtns) {
+            mentionBtn = (
+                <div
+                    className='dropdown channel-header__links'
+                    style={{float: 'left', marginTop: '1px'}}
+                >
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        placement='bottom'
+                        overlay={recentMentionsTooltip}
+                    >
+                        <a
+                            href='#'
+                            type='button'
+                            onClick={this.searchMentions}
+                        >
+                            {'@'}
+                        </a>
+                    </OverlayTrigger>
+                </div>
+            );
+
+            flagBtn = (
+                <div
+                    className='dropdown channel-header__links'
+                    style={{float: 'left', marginTop: '1px'}}
+                >
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        placement='bottom'
+                        overlay={flaggedTooltip}
+                    >
+                        <a
+                            href='#'
+                            type='button'
+                            onClick={this.getFlagged}
+                        >
+                            <span
+                                className='icon icon__flag'
+                                dangerouslySetInnerHTML={{__html: flagIcon}}
+                            />
+                        </a>
+                    </OverlayTrigger>
+                </div>
+            );
+        }
+
         return (
             <div>
                 <div
@@ -208,7 +300,18 @@ export default class SearchBar extends React.Component {
                         />
                     </Popover>
                 </form>
+
+                {mentionBtn}
+                {flagBtn}
             </div>
         );
     }
 }
+
+SearchBar.defaultProps = {
+    showMentionFlagBtns: true
+};
+
+SearchBar.propTypes = {
+    showMentionFlagBtns: React.PropTypes.bool
+};

webapp/components/sidebar_right.jsx

@@ -74,6 +74,12 @@ export default class SidebarRight extends React.Component {
         if (isOpen !== willOpen) {
             PostStore.jumpPostsViewSidebarOpen();
         }
+
+        if (!isOpen && willOpen) {
+            this.setState({
+                expanded: false
+            });
+        }
     }
 
     doStrangeThings() {
@@ -191,6 +197,10 @@ export default class SidebarRight extends React.Component {
             );
         }
 
+        if (!content) {
+            expandedClass = '';
+        }
+
         return (
             <div
                 className={'sidebar--right ' + expandedClass}

webapp/sass/components/_search.scss

@@ -74,7 +74,10 @@
     }
 
     .sidebar--right & {
-        width: 100%;
+        width: 300px;
+        float: left;
+        margin-left: 17px;
+        margin-right: 9px;
     }
 
     .search-bar {

webapp/sass/components/_webrtc.scss

@@ -347,4 +347,8 @@
     #videos.small {
         position: relative;
     }
+
+    .search__form {
+        width: calc(100% - 92px);
+    }
 }

webapp/sass/layout/_content.scss

@@ -6,12 +6,28 @@
         .search-bar__container {
             display: none;
         }
+        .search-btns {
+            display: none;
+        }
+        .header-list__members {
+            margin-right: -18px;
+            float: right;
+            padding-right: 0px !important;
+        }
     }
 
     &.move--right {
         .search-bar__container {
             display: none;
         }
+        .search-btns {
+            display: none;
+        }
+        .header-list__members {
+            margin-right: -18px;
+            float: right;
+            padding-right: 0px !important;
+        }
     }
 }
 

webapp/sass/layout/_headers.scss

@@ -25,6 +25,9 @@
 
         th {
             font-weight: normal !important;
+            &.header-list__members {
+                padding-right: 4px;
+            }
         }
 
         td {

webapp/sass/responsive/_mobile.scss

@@ -911,6 +911,9 @@
             height: 45px;
             padding: 7px 20px 0 49px;
             position: relative;
+            width: 100%;
+            margin-left: 0px;
+            margin-right: 0px;
 
             .icon--refresh {
                 @include opacity(.6);
@@ -927,6 +930,10 @@
                 padding: 0 10px 0 31px;
             }
         }
+
+        .channel-header__links {
+            display: none;
+        }
     }
 
     .sidebar--menu {

webapp/sass/responsive/_tablet.scss

@@ -20,6 +20,12 @@
         }
     }
 
+    .search__form {
+        .sidebar--right & {
+            width: 300px;
+        }
+    }
+
     .post-create__container {
         form {
             padding: .5em 0;