From c3b1c2ff9bd5207a0bfeff7af69f34140db06ca7 Mon Sep 17 00:00:00 2001
From: Jesse Hallam <jesse.hallam@gmail.com>
Date: Tue, 27 Mar 2018 09:49:57 -0400
Subject: [PATCH] MM-9787: Transition [lr]hs open state to redux, fixing Safari
 race condition. (#991)

* move the [lr]hs open state into redux

This eliminates race conditions around toggling classes all over the
code base in an attempt to slide the various components around. It also
has the nice side effect of getting rid of doStrangeThings.

WebRTC remains in beta, and remains functional with these changes, but
the absolute minimum set of changes were made to integrate the old flux
store with the new state. This remains intentionally hacky, as the
medium-term vision is to rip this feature out and replace it as a
plugin.

* fix a rendering issue with PermalinkView

Now that opening the sidebar triggers a re-render (vs. just toggling
classes), the PermalinkView would incorrectly transition between valid
and invalid internal states even if the target permalink hadn't changed.
This resulted in a flashing when opening the sidebar, e.g. to view
flagged messages. This restricts the handling of a permalink event to
when the post id has actually changed.

* remove unused initTeamChangeActions in lhs actions
---
 actions/global_actions.jsx                    |   9 +-
 actions/views/lhs.js                          |  23 +-
 actions/views/rhs.js                          |  12 +
 actions/views/webrtc.js                       |  14 +
 .../center_channel/center_channel.jsx         |  13 +-
 .../channel_layout/center_channel/index.js    |   7 +
 .../channel_layout/channel_controller.jsx     |   4 +-
 components/create_post/create_post.jsx        |   2 +-
 components/navbar/index.js                    |  15 +-
 components/navbar/navbar.jsx                  |  23 +-
 components/permalink_view/permalink_view.jsx  |   4 +-
 components/search_bar/index.jsx               |   2 +
 components/search_bar/search_bar.jsx          |  11 +-
 components/sidebar/header/sidebar_header.jsx  |   9 +-
 components/sidebar/index.js                   |  11 +-
 components/sidebar/sidebar.jsx                |  10 +-
 components/sidebar/sidebar_channel/index.js   |   2 +
 .../sidebar_channel/sidebar_channel.jsx       |  13 +-
 components/sidebar/sidebar_tutorial_tip.jsx   |   2 +-
 components/sidebar_right/index.js             |   3 +-
 components/sidebar_right/sidebar_right.jsx    |  28 +-
 components/sidebar_right_menu/index.js        |   7 +-
 .../sidebar_right_menu/sidebar_right_menu.jsx |  46 +-
 components/team_sidebar/index.js              |   3 +
 .../team_sidebar/team_sidebar_controller.jsx  |   4 +-
 components/tutorial/menu_tutorial_tip.jsx     |  50 ++
 components/tutorial/tutorial_tip/index.js     |  16 +
 .../{ => tutorial_tip}/tutorial_tip.jsx       |  53 +-
 components/webrtc/controller/index.js         |  13 +-
 .../webrtc/controller/webrtc_controller.jsx   |   5 +-
 components/webrtc/notification/index.js       |  26 +
 .../webrtc_notification.jsx                   |  26 +-
 components/webrtc/sidebar/index.js            |  18 +
 components/webrtc/sidebar/webrtc_sidebar.jsx  |  96 ++++
 components/webrtc/webrtc_sidebar.jsx          | 128 -----
 reducers/views/index.js                       |   4 +
 reducers/views/lhs.js                         |  30 ++
 reducers/views/rhs.js                         |  44 +-
 reducers/views/webrtc.js                      |  30 ++
 selectors/lhs.jsx                             |   6 +
 selectors/rhs.jsx                             |   8 +
 selectors/webrtc.jsx                          |   6 +
 stores/webrtc_store.jsx                       |  17 +-
 .../__snapshots__/create_post.test.jsx.snap   | 141 ++++++
 .../create_post/create_post.test.jsx          |   2 +-
 .../sidebar_tutorial_tip.test.jsx.snap        |   8 +-
 .../sidebar/sidebar_channel.test.jsx          | 479 ++++++++----------
 tests/redux/actions/views/lhs.test.js         |  71 ++-
 tests/redux/actions/views/rhs.test.js         |  36 ++
 tests/redux/reducers/views/lhs.test.js        | 110 ++++
 tests/redux/reducers/views/rhs.test.js        | 108 +++-
 tests/redux/selectors/lhs.test.js             |  26 +
 tests/redux/selectors/rhs.test.js             |  24 +
 utils/constants.jsx                           |  12 +-
 54 files changed, 1260 insertions(+), 610 deletions(-)
 create mode 100644 actions/views/webrtc.js
 create mode 100644 components/tutorial/menu_tutorial_tip.jsx
 create mode 100644 components/tutorial/tutorial_tip/index.js
 rename components/tutorial/{ => tutorial_tip}/tutorial_tip.jsx (80%)
 create mode 100644 components/webrtc/notification/index.js
 rename components/webrtc/{ => notification}/webrtc_notification.jsx (95%)
 create mode 100644 components/webrtc/sidebar/index.js
 create mode 100644 components/webrtc/sidebar/webrtc_sidebar.jsx
 delete mode 100644 components/webrtc/webrtc_sidebar.jsx
 create mode 100644 reducers/views/lhs.js
 create mode 100644 reducers/views/webrtc.js
 create mode 100644 selectors/lhs.jsx
 create mode 100644 selectors/webrtc.jsx
 create mode 100644 tests/redux/reducers/views/lhs.test.js
 create mode 100644 tests/redux/selectors/lhs.test.js

diff --git a/actions/global_actions.jsx b/actions/global_actions.jsx
index dda4af5726da..91ea2fc45c94 100644
--- a/actions/global_actions.jsx
+++ b/actions/global_actions.jsx
@@ -24,7 +24,8 @@ import {loadChannelsForCurrentUser} from 'actions/channel_actions.jsx';
 import {handleNewPost} from 'actions/post_actions.jsx';
 import {stopPeriodicStatusUpdates} from 'actions/status_actions.jsx';
 import {loadNewDMIfNeeded, loadNewGMIfNeeded, loadProfilesForSidebar} from 'actions/user_actions.jsx';
-import {closeRightHandSide} from 'actions/views/rhs';
+import {closeRightHandSide, closeMenu as closeRhsMenu} from 'actions/views/rhs';
+import {close as closeLhs} from 'actions/views/lhs';
 import * as WebsocketActions from 'actions/websocket_actions.jsx';
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import BrowserStore from 'stores/browser_store.jsx';
@@ -472,10 +473,8 @@ export function clientLogout(redirectTo = '/') {
 
 export function toggleSideBarRightMenuAction() {
     dispatch(closeRightHandSide());
-
-    document.querySelector('.app__body .inner-wrap').classList.remove('move--right', 'move--left', 'move--left-small');
-    document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
-    document.querySelector('.app__body .sidebar--right').classList.remove('move--left');
+    dispatch(closeLhs());
+    dispatch(closeRhsMenu());
     document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
 }
 
diff --git a/actions/views/lhs.js b/actions/views/lhs.js
index d07e5b174924..def81cd5cfe9 100644
--- a/actions/views/lhs.js
+++ b/actions/views/lhs.js
@@ -1,15 +1,16 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
 
-import {fetchMyChannelsAndMembers} from 'mattermost-redux/actions/channels';
+import {ActionTypes} from 'utils/constants.jsx';
 
-import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
-import {loadStatusesForChannelAndSidebar} from 'actions/status_actions.jsx';
-import store from 'stores/redux_store.jsx';
+export const toggle = () => (dispatch) => dispatch({
+    type: ActionTypes.TOGGLE_LHS,
+});
 
-const dispatch = store.dispatch;
-const getState = store.getState;
+export const open = () => (dispatch) => dispatch({
+    type: ActionTypes.OPEN_LHS,
+});
 
-export async function initTeamChangeActions(teamId) {
-    await fetchMyChannelsAndMembers(teamId)(dispatch, getState);
-    loadStatusesForChannelAndSidebar();
-    loadProfilesForSidebar();
-}
+export const close = () => (dispatch) => dispatch({
+    type: ActionTypes.CLOSE_LHS,
+});
diff --git a/actions/views/rhs.js b/actions/views/rhs.js
index 34deb460fe5c..f10bc8b5f245 100644
--- a/actions/views/rhs.js
+++ b/actions/views/rhs.js
@@ -261,3 +261,15 @@ export function closeRightHandSide() {
         ]));
     };
 }
+
+export const toggleMenu = () => (dispatch) => dispatch({
+    type: ActionTypes.TOGGLE_RHS_MENU,
+});
+
+export const openMenu = () => (dispatch) => dispatch({
+    type: ActionTypes.OPEN_RHS_MENU,
+});
+
+export const closeMenu = () => (dispatch) => dispatch({
+    type: ActionTypes.CLOSE_RHS_MENU,
+});
diff --git a/actions/views/webrtc.js b/actions/views/webrtc.js
new file mode 100644
index 000000000000..231fb5fd73ed
--- /dev/null
+++ b/actions/views/webrtc.js
@@ -0,0 +1,14 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {ActionTypes} from 'utils/constants.jsx';
+
+export const initWebrtc = (userId, isCaller) => (dispatch) => dispatch({
+    type: ActionTypes.INIT_WEBRTC,
+    userId,
+    isCaller,
+});
+
+export const closeWebrtc = () => (dispatch) => dispatch({
+    type: ActionTypes.CLOSE_WEBRTC,
+});
diff --git a/components/channel_layout/center_channel/center_channel.jsx b/components/channel_layout/center_channel/center_channel.jsx
index ce1235ccd356..3cdde5a2e98e 100644
--- a/components/channel_layout/center_channel/center_channel.jsx
+++ b/components/channel_layout/center_channel/center_channel.jsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Route, Switch, Redirect} from 'react-router-dom';
+import classNames from 'classnames';
 
 import PermalinkView from 'components/permalink_view';
 import Navbar from 'components/navbar';
@@ -14,6 +15,10 @@ export default class CenterChannel extends React.PureComponent {
         match: PropTypes.object.isRequired,
         location: PropTypes.object.isRequired,
         lastChannelPath: PropTypes.string.isRequired,
+        lhsOpen: PropTypes.bool.isRequired,
+        rhsOpen: PropTypes.bool.isRequired,
+        rhsMenuOpen: PropTypes.bool.isRequired,
+        webRtcOpen: PropTypes.bool.isRequired,
     };
 
     constructor(props) {
@@ -34,9 +39,13 @@ export default class CenterChannel extends React.PureComponent {
         const url = this.props.match.url;
         return (
             <div
-                id='inner-wrap-webrtc'
                 key='inner-wrap'
-                className='inner-wrap channel__wrap'
+                className={classNames('inner-wrap', 'channel__wrap', {
+                    'webrtc--show': this.props.webRtcOpen,
+                    'move--right': this.props.lhsOpen,
+                    'move--left': this.props.rhsOpen || this.props.webRtcOpen,
+                    'move--left-small': this.props.rhsMenuOpen,
+                })}
             >
                 <div className='row header'>
                     <div id='navbar'>
diff --git a/components/channel_layout/center_channel/index.js b/components/channel_layout/center_channel/index.js
index 4ddebba0b788..922dda0182dc 100644
--- a/components/channel_layout/center_channel/index.js
+++ b/components/channel_layout/center_channel/index.js
@@ -6,6 +6,9 @@ import {getTeamByName} from 'mattermost-redux/selectors/entities/teams';
 
 import Constants from 'utils/constants';
 import {getGlobalItem} from 'selectors/storage';
+import {getIsRhsOpen, getIsRhsMenuOpen} from 'selectors/rhs';
+import {getIsLhsOpen} from 'selectors/lhs';
+import {getIsWebrtcOpen} from 'selectors/webrtc';
 
 import CenterChannel from './center_channel';
 
@@ -20,6 +23,10 @@ const getLastChannelPath = (state, teamName) => {
 
 const mapStateToProps = (state, ownProps) => ({
     lastChannelPath: `${ownProps.match.url}/channels/${getLastChannelPath(state, ownProps.match.params.team)}`,
+    lhsOpen: getIsLhsOpen(state),
+    rhsOpen: getIsRhsOpen(state),
+    rhsMenuOpen: getIsRhsMenuOpen(state),
+    webRtcOpen: getIsWebrtcOpen(state),
 });
 
 export default connect(mapStateToProps)(CenterChannel);
diff --git a/components/channel_layout/channel_controller.jsx b/components/channel_layout/channel_controller.jsx
index f2badeced736..63b93cbbd886 100644
--- a/components/channel_layout/channel_controller.jsx
+++ b/components/channel_layout/channel_controller.jsx
@@ -22,8 +22,8 @@ import SidebarRightMenu from 'components/sidebar_right_menu';
 import TeamSettingsModal from 'components/team_settings_modal.jsx';
 import ImportThemeModal from 'components/user_settings/import_theme_modal.jsx';
 import UserSettingsModal from 'components/user_settings/modal';
-import WebrtcNotification from 'components/webrtc/webrtc_notification.jsx';
-import WebrtcSidebar from 'components/webrtc/webrtc_sidebar.jsx';
+import WebrtcNotification from 'components/webrtc/notification';
+import WebrtcSidebar from 'components/webrtc/sidebar';
 import ModalController from 'components/modal_controller';
 import TeamSidebar from 'components/team_sidebar';
 import Sidebar from 'components/sidebar';
diff --git a/components/create_post/create_post.jsx b/components/create_post/create_post.jsx
index 5ee4a8ea2887..4ff4603564cb 100644
--- a/components/create_post/create_post.jsx
+++ b/components/create_post/create_post.jsx
@@ -23,7 +23,7 @@ import MsgTyping from 'components/msg_typing';
 import PostDeletedModal from 'components/post_deleted_modal.jsx';
 import EmojiIcon from 'components/svg/emoji_icon';
 import Textbox from 'components/textbox.jsx';
-import TutorialTip from 'components/tutorial/tutorial_tip.jsx';
+import TutorialTip from 'components/tutorial/tutorial_tip';
 
 const KeyCodes = Constants.KeyCodes;
 
diff --git a/components/navbar/index.js b/components/navbar/index.js
index 19d2c9a77478..1d2b313a0fa4 100644
--- a/components/navbar/index.js
+++ b/components/navbar/index.js
@@ -5,7 +5,14 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
-import {closeRightHandSide, updateRhsState, showPinnedPosts} from 'actions/views/rhs';
+import {
+    closeRightHandSide as closeRhs,
+    updateRhsState,
+    showPinnedPosts,
+    toggleMenu as toggleRhsMenu,
+    closeMenu as closeRhsMenu,
+} from 'actions/views/rhs';
+import {toggle as toggleLhs, close as closeLhs} from 'actions/views/lhs';
 import {getRhsState} from 'selectors/rhs';
 import {RHSStates} from 'utils/constants.jsx';
 
@@ -26,9 +33,13 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
-            closeRightHandSide,
             updateRhsState,
             showPinnedPosts,
+            toggleLhs,
+            closeLhs,
+            closeRhs,
+            toggleRhsMenu,
+            closeRhsMenu,
         }, dispatch),
     };
 }
diff --git a/components/navbar/navbar.jsx b/components/navbar/navbar.jsx
index 527cd63b7b23..49c9be405389 100644
--- a/components/navbar/navbar.jsx
+++ b/components/navbar/navbar.jsx
@@ -45,9 +45,13 @@ export default class Navbar extends React.Component {
         isPinnedPosts: PropTypes.bool,
         enableWebrtc: PropTypes.bool.isRequired,
         actions: PropTypes.shape({
-            closeRightHandSide: PropTypes.func,
             updateRhsState: PropTypes.func,
             showPinnedPosts: PropTypes.func,
+            toggleLhs: PropTypes.func.isRequired,
+            closeLhs: PropTypes.func.isRequired,
+            closeRhs: PropTypes.func.isRequired,
+            toggleRhsMenu: PropTypes.func.isRequired,
+            closeRhsMenu: PropTypes.func.isRequired,
         }),
     };
 
@@ -137,27 +141,22 @@ export default class Navbar extends React.Component {
     hideSidebars = (e) => {
         var windowWidth = $(window).outerWidth();
         if (windowWidth <= 768) {
-            this.props.actions.closeRightHandSide();
+            this.props.actions.closeRhs();
 
             if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
-                $('.app__body .inner-wrap').removeClass('move--right move--left move--left-small');
-                $('.app__body .sidebar--left').removeClass('move--right');
-                $('.multi-teams .team-sidebar').removeClass('move--right');
-                $('.app__body .sidebar--right').removeClass('move--left');
-                $('.app__body .sidebar--menu').removeClass('move--left');
+                this.props.actions.closeLhs();
+                this.props.actions.closeRhs();
+                this.props.actions.closeRhsMenu();
             }
         }
     }
 
     toggleLeftSidebar = () => {
-        $('.app__body .inner-wrap').toggleClass('move--right');
-        $('.app__body .sidebar--left').toggleClass('move--right');
-        $('.multi-teams .team-sidebar').toggleClass('move--right');
+        this.props.actions.toggleLhs();
     }
 
     toggleRightSidebar = () => {
-        $('.app__body .inner-wrap').toggleClass('move--left-small');
-        $('.app__body .sidebar--menu').toggleClass('move--left');
+        this.props.actions.toggleRhsMenu();
     }
 
     showSearch = () => {
diff --git a/components/permalink_view/permalink_view.jsx b/components/permalink_view/permalink_view.jsx
index b2c8fa06cdee..7c22495187b6 100644
--- a/components/permalink_view/permalink_view.jsx
+++ b/components/permalink_view/permalink_view.jsx
@@ -42,7 +42,9 @@ export default class PermalinkView extends React.PureComponent {
     }
 
     componentWillReceiveProps(nextProps) {
-        this.doPermalinkEvent(nextProps);
+        if (this.props.match.params.postid !== nextProps.match.params.postid) {
+            this.doPermalinkEvent(nextProps);
+        }
     }
 
     doPermalinkEvent = async (props) => {
diff --git a/components/search_bar/index.jsx b/components/search_bar/index.jsx
index ebd8eb701835..ecdbb985cdb7 100644
--- a/components/search_bar/index.jsx
+++ b/components/search_bar/index.jsx
@@ -11,6 +11,7 @@ import {
     showFlaggedPosts,
     closeRightHandSide,
 } from 'actions/views/rhs';
+import {closeWebrtc} from 'actions/views/webrtc';
 import {getRhsState, getSearchTerms, getIsSearchingTerm} from 'selectors/rhs';
 import {RHSStates} from 'utils/constants.jsx';
 
@@ -35,6 +36,7 @@ function mapDispatchToProps(dispatch) {
             showMentions,
             showFlaggedPosts,
             closeRightHandSide,
+            closeWebrtc,
         }, dispatch),
     };
 }
diff --git a/components/search_bar/search_bar.jsx b/components/search_bar/search_bar.jsx
index eea2c674bf9c..ce7139b93759 100644
--- a/components/search_bar/search_bar.jsx
+++ b/components/search_bar/search_bar.jsx
@@ -31,6 +31,7 @@ export default class SearchBar extends React.Component {
             showMentions: PropTypes.func,
             showFlaggedPosts: PropTypes.func,
             closeRightHandSide: PropTypes.func,
+            closeWebrtc: PropTypes.func,
         }),
     };
 
@@ -64,15 +65,7 @@ export default class SearchBar extends React.Component {
     }
 
     handleClose = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .sidebar--menu').classList.add('visible');
-                document.querySelector('#sidebar-webrtc').classList.remove('webrtc--show');
-                document.querySelector('#inner-wrap-webrtc').classList.remove('webrtc--show');
-                document.querySelector('#inner-wrap-webrtc').classList.remove('move--left');
-            });
-        }
-
+        this.props.actions.closeWebrtc();
         this.props.actions.closeRightHandSide();
     }
 
diff --git a/components/sidebar/header/sidebar_header.jsx b/components/sidebar/header/sidebar_header.jsx
index 318505f39ffa..13a91375abdb 100644
--- a/components/sidebar/header/sidebar_header.jsx
+++ b/components/sidebar/header/sidebar_header.jsx
@@ -9,7 +9,7 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import {Constants, Preferences, TutorialSteps} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import StatusDropdown from 'components/status_dropdown/index.jsx';
-import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
+import MenuTutorialTip from 'components/tutorial/menu_tutorial_tip';
 
 import SidebarHeaderDropdown from './dropdown';
 
@@ -89,7 +89,12 @@ export default class SidebarHeader extends React.Component {
 
         let tutorialTip = null;
         if (this.state.showTutorialTip) {
-            tutorialTip = createMenuTip(this.showDropdown);
+            tutorialTip = (
+                <MenuTutorialTip
+                    toggleFunc={this.showDropdown}
+                    onBottom={false}
+                />
+            );
         }
 
         let teamNameWithToolTip = null;
diff --git a/components/sidebar/index.js b/components/sidebar/index.js
index 98142b7530d8..f73a097f2ba6 100644
--- a/components/sidebar/index.js
+++ b/components/sidebar/index.js
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 
 import {Preferences} from 'mattermost-redux/constants/index';
 import {
@@ -25,6 +26,8 @@ import {getCurrentTeam, isCurrentUserCurrentTeamAdmin} from 'mattermost-redux/se
 import {goToChannelById} from 'actions/channel_actions.jsx';
 import {showCreateOption} from 'utils/channel_utils.jsx';
 import {GroupUnreadChannels, Constants} from 'utils/constants.jsx';
+import {close} from 'actions/views/lhs';
+import {getIsLhsOpen} from 'selectors/lhs';
 
 import Sidebar from './sidebar.jsx';
 
@@ -65,6 +68,7 @@ function mapStateToProps(state) {
 
     return {
         config,
+        isOpen: getIsLhsOpen(state),
         showUnreadSection,
         publicChannelIds,
         privateChannelIds,
@@ -81,11 +85,12 @@ function mapStateToProps(state) {
     };
 }
 
-function mapDispatchToProps() {
+function mapDispatchToProps(dispatch) {
     return {
-        actions: {
+        actions: bindActionCreators({
             goToChannelById,
-        },
+            close,
+        }, dispatch),
     };
 }
 
diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx
index f84868e2801c..78f5f8489a39 100644
--- a/components/sidebar/sidebar.jsx
+++ b/components/sidebar/sidebar.jsx
@@ -7,6 +7,7 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
 import {PropTypes} from 'prop-types';
+import classNames from 'classnames';
 
 import {browserHistory} from 'utils/browser_history';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
@@ -33,6 +34,8 @@ export default class Sidebar extends React.PureComponent {
          */
         config: PropTypes.object.isRequired,
 
+        isOpen: PropTypes.bool.isRequired,
+
         /**
          * List of public channels (ids)
          */
@@ -100,6 +103,7 @@ export default class Sidebar extends React.PureComponent {
 
         actions: PropTypes.shape({
             goToChannelById: PropTypes.func.isRequired,
+            close: PropTypes.func.isRequired,
         }).isRequired,
     };
 
@@ -162,9 +166,7 @@ export default class Sidebar extends React.PureComponent {
             if (this.closedDirectChannel) {
                 this.closedDirectChannel = false;
             } else {
-                $('.app__body .inner-wrap').removeClass('move--right');
-                $('.app__body .sidebar--left').removeClass('move--right');
-                $('.multi-teams .team-sidebar').removeClass('move--right');
+                this.props.actions.close();
             }
         }
 
@@ -657,7 +659,7 @@ export default class Sidebar extends React.PureComponent {
 
         return (
             <div
-                className='sidebar--left'
+                className={classNames('sidebar--left', {'move--right': this.props.isOpen && Utils.isMobile()})}
                 id='sidebar-left'
                 key='sidebar-left'
             >
diff --git a/components/sidebar/sidebar_channel/index.js b/components/sidebar/sidebar_channel/index.js
index 38064e491c8d..632937e0d59b 100644
--- a/components/sidebar/sidebar_channel/index.js
+++ b/components/sidebar/sidebar_channel/index.js
@@ -12,6 +12,7 @@ import {leaveChannel} from 'mattermost-redux/actions/channels';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 import {Constants, NotificationLevels} from 'utils/constants.jsx';
+import {open as openLhs} from 'actions/views/lhs.js';
 
 import SidebarChannel from './sidebar_channel.jsx';
 
@@ -87,6 +88,7 @@ function mapDispatchToProps(dispatch) {
         actions: bindActionCreators({
             savePreferences,
             leaveChannel,
+            openLhs,
         }, dispatch),
     };
 }
diff --git a/components/sidebar/sidebar_channel/sidebar_channel.jsx b/components/sidebar/sidebar_channel/sidebar_channel.jsx
index b72fc1feb2ae..60801af7bd2b 100644
--- a/components/sidebar/sidebar_channel/sidebar_channel.jsx
+++ b/components/sidebar/sidebar_channel/sidebar_channel.jsx
@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 
 import {browserHistory} from 'utils/browser_history';
 import {Constants} from 'utils/constants.jsx';
-import * as Utils from 'utils/utils.jsx';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import SidebarChannelButtonOrLink from '../sidebar_channel_button_or_link/sidebar_channel_button_or_link.jsx';
@@ -124,20 +123,12 @@ export default class SidebarChannel extends React.PureComponent {
         actions: PropTypes.shape({
             savePreferences: PropTypes.func.isRequired,
             leaveChannel: PropTypes.func.isRequired,
+            openLhs: PropTypes.func.isRequired,
         }).isRequired,
     }
 
     isLeaving = false;
 
-    openLeftSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.add('move--right');
-                document.querySelector('.app__body .sidebar--left').classList.add('move--right');
-            });
-        }
-    }
-
     handleLeavePublicChannel = () => {
         this.props.actions.leaveChannel(this.props.channelId);
         trackEvent('ui', 'ui_public_channel_x_button_clicked');
@@ -228,7 +219,7 @@ export default class SidebarChannel extends React.PureComponent {
                     offTopicDisplayName={this.props.offTopicDisplayName}
                 />
             );
-            this.openLeftSidebar();
+            this.props.actions.openLhs();
         }
 
         let link = '';
diff --git a/components/sidebar/sidebar_tutorial_tip.jsx b/components/sidebar/sidebar_tutorial_tip.jsx
index a390e7ee5c8c..841aa6e6c8a2 100644
--- a/components/sidebar/sidebar_tutorial_tip.jsx
+++ b/components/sidebar/sidebar_tutorial_tip.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {FormattedHTMLMessage} from 'react-intl';
 
 import {Constants} from 'utils/constants.jsx';
-import TutorialTip from 'components/tutorial/tutorial_tip.jsx';
+import TutorialTip from 'components/tutorial/tutorial_tip';
 
 export default class SidebarTutorialTip extends React.PureComponent {
     static propTypes = {
diff --git a/components/sidebar_right/index.js b/components/sidebar_right/index.js
index edcdeb15b873..01c0c0a98406 100644
--- a/components/sidebar_right/index.js
+++ b/components/sidebar_right/index.js
@@ -9,7 +9,7 @@ import {getPost} from 'mattermost-redux/selectors/entities/posts';
 
 import PostStore from 'stores/post_store';
 import {getPinnedPosts, getFlaggedPosts} from 'actions/views/rhs';
-import {getRhsState, getSelectedPostId, getSelectedChannelId, getPreviousRhsState} from 'selectors/rhs';
+import {getRhsState, getSelectedPostId, getSelectedChannelId, getPreviousRhsState, getIsRhsOpen} from 'selectors/rhs';
 import {RHSStates} from 'utils/constants.jsx';
 
 import SidebarRight from './sidebar_right.jsx';
@@ -35,6 +35,7 @@ function mapStateToProps(state) {
     }
 
     return {
+        isOpen: getIsRhsOpen(state),
         channel,
         currentUser: getCurrentUser(state),
         postRightVisible: Boolean(getSelectedPostId(state)),
diff --git a/components/sidebar_right/sidebar_right.jsx b/components/sidebar_right/sidebar_right.jsx
index 09cbbb21e33f..23b9b7a5d943 100644
--- a/components/sidebar_right/sidebar_right.jsx
+++ b/components/sidebar_right/sidebar_right.jsx
@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {postListScrollChange} from 'actions/global_actions.jsx';
@@ -19,6 +19,7 @@ import SearchResults from 'components/search_results';
 
 export default class SidebarRight extends React.Component {
     static propTypes = {
+        isOpen: PropTypes.bool.isRequired,
         currentUser: PropTypes.object,
         channel: PropTypes.object,
         postRightVisible: PropTypes.bool,
@@ -47,7 +48,6 @@ export default class SidebarRight extends React.Component {
     componentDidMount() {
         PostStore.addPostPinnedChangeListener(this.onPostPinnedChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
-        this.doStrangeThings();
     }
 
     componentWillUnmount() {
@@ -70,30 +70,8 @@ export default class SidebarRight extends React.Component {
         }
     }
 
-    doStrangeThings = () => {
-        // We should have a better way to do this stuff
-        // Hence the function name.
-        $('.app__body .inner-wrap').removeClass('.move--right');
-        $('.app__body .inner-wrap').addClass('move--left');
-        $('.app__body .sidebar--left').removeClass('move--right');
-        $('.multi-teams .team-sidebar').removeClass('move--right');
-        $('.app__body .sidebar--right').addClass('move--left');
-
-        if (!this.props.searchVisible && !this.props.postRightVisible) {
-            $('.app__body .inner-wrap').removeClass('move--left').removeClass('move--right');
-            $('.app__body .sidebar--right').removeClass('move--left');
-            return (
-                <div/>
-            );
-        }
-
-        return null;
-    }
-
     componentDidUpdate(prevProps) {
         const isOpen = this.props.searchVisible || this.props.postRightVisible;
-        WebrtcStore.emitRhsChanged(isOpen);
-        this.doStrangeThings();
 
         const wasOpen = prevProps.searchVisible || prevProps.postRightVisible;
 
@@ -197,7 +175,7 @@ export default class SidebarRight extends React.Component {
 
         return (
             <div
-                className={'sidebar--right ' + expandedClass}
+                className={classNames('sidebar--right', expandedClass, {'move--left': this.props.isOpen})}
                 id='sidebar-right'
             >
                 <div
diff --git a/components/sidebar_right_menu/index.js b/components/sidebar_right_menu/index.js
index 56225629e445..bfe935ec60a9 100644
--- a/components/sidebar_right_menu/index.js
+++ b/components/sidebar_right_menu/index.js
@@ -7,8 +7,8 @@ import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {getInt} from 'mattermost-redux/selectors/entities/preferences';
 
-import {showMentions, showFlaggedPosts, closeRightHandSide} from 'actions/views/rhs';
-import {getRhsState} from 'selectors/rhs';
+import {showMentions, showFlaggedPosts, closeRightHandSide, openMenu as openRhsMenu, closeMenu as closeRhsMenu} from 'actions/views/rhs';
+import {getRhsState, getIsRhsMenuOpen} from 'selectors/rhs';
 import {RHSStates, Preferences, TutorialSteps} from 'utils/constants.jsx';
 import {isMobile} from 'utils/utils.jsx';
 
@@ -33,6 +33,7 @@ function mapStateToProps(state) {
     const siteName = config.SiteName;
 
     return {
+        isOpen: getIsRhsMenuOpen(state),
         isMentionSearch: rhsState === RHSStates.MENTION,
         showTutorialTip: enableTutorial && isMobile() && tutorialStep === TutorialSteps.MENU_POPOVER,
         isLicensed,
@@ -53,6 +54,8 @@ function mapDispatchToProps(dispatch) {
             showMentions,
             showFlaggedPosts,
             closeRightHandSide,
+            openRhsMenu,
+            closeRhsMenu,
         }, dispatch),
     };
 }
diff --git a/components/sidebar_right_menu/sidebar_right_menu.jsx b/components/sidebar_right_menu/sidebar_right_menu.jsx
index aa2a76b3a9f6..10abf8be3e41 100644
--- a/components/sidebar_right_menu/sidebar_right_menu.jsx
+++ b/components/sidebar_right_menu/sidebar_right_menu.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
+import classNames from 'classnames';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
@@ -24,10 +25,11 @@ import LeaveTeamIcon from 'components/svg/leave_team_icon';
 import TeamMembersModal from 'components/team_members_modal';
 import ToggleModalButton from 'components/toggle_modal_button.jsx';
 import TeamSettingsModal from 'components/team_settings_modal.jsx';
-import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
+import MenuTutorialTip from 'components/tutorial/menu_tutorial_tip';
 
 export default class SidebarRightMenu extends React.Component {
     static propTypes = {
+        isOpen: PropTypes.bool.isRequired,
         teamType: PropTypes.string,
         teamDisplayName: PropTypes.string,
         isMentionSearch: PropTypes.bool,
@@ -44,7 +46,9 @@ export default class SidebarRightMenu extends React.Component {
         actions: PropTypes.shape({
             showMentions: PropTypes.func,
             showFlaggedPosts: PropTypes.func,
-            closeRightHandSide: PropTypes.func,
+            closeRightHandSide: PropTypes.func.isRequired,
+            openRhsMenu: PropTypes.func.isRequired,
+            closeRhsMenu: PropTypes.func.isRequired,
         }),
     };
 
@@ -115,7 +119,7 @@ export default class SidebarRightMenu extends React.Component {
     getFlagged = (e) => {
         e.preventDefault();
         this.props.actions.showFlaggedPosts();
-        this.closeRightSidebar();
+        this.props.actions.closeRhsMenu();
     }
 
     getStateFromStores = () => {
@@ -136,38 +140,11 @@ export default class SidebarRightMenu extends React.Component {
         if (this.props.isMentionSearch) {
             this.props.actions.closeRightHandSide();
         } else {
-            this.closeRightSidebar();
+            this.props.actions.closeRhsMenu();
             this.props.actions.showMentions();
         }
     }
 
-    closeLeftSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.remove('move--right');
-                document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
-            });
-        }
-    }
-
-    openRightSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.add('move--left-small');
-                document.querySelector('.app__body .sidebar--menu').classList.add('move--left');
-            });
-        }
-    }
-
-    closeRightSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.remove('move--left-small');
-                document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
-            });
-        }
-    }
-
     showAccountSettingsModal = () => {
         GlobalActions.showAccountSettingsModal();
     }
@@ -428,9 +405,8 @@ export default class SidebarRightMenu extends React.Component {
 
         let tutorialTip = null;
         if (this.props.showTutorialTip) {
-            tutorialTip = createMenuTip((e) => e.preventDefault(), true);
-            this.closeLeftSidebar();
-            this.openRightSidebar();
+            tutorialTip = <MenuTutorialTip onBottom={true}/>;
+            this.props.actions.openRhsMenu();
         }
 
         let nativeAppLink = null;
@@ -473,7 +449,7 @@ export default class SidebarRightMenu extends React.Component {
 
         return (
             <div
-                className='sidebar--menu'
+                className={classNames('sidebar--menu', {'move--left': this.props.isOpen && Utils.isMobile()})}
                 id='sidebar-menu'
             >
                 <div className='team__header theme'>
diff --git a/components/team_sidebar/index.js b/components/team_sidebar/index.js
index 790a75579672..cc0bc18ffaf2 100644
--- a/components/team_sidebar/index.js
+++ b/components/team_sidebar/index.js
@@ -7,6 +7,8 @@ import {getTeams} from 'mattermost-redux/actions/teams';
 import {withRouter} from 'react-router-dom';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import {getIsLhsOpen} from 'selectors/lhs';
+
 import TeamSidebar from './team_sidebar_controller.jsx';
 
 function mapStateToProps(state) {
@@ -16,6 +18,7 @@ function mapStateToProps(state) {
     const enableTeamCreation = config.EnableTeamCreation === 'true';
 
     return {
+        isOpen: getIsLhsOpen(state),
         experimentalPrimaryTeam,
         enableTeamCreation,
     };
diff --git a/components/team_sidebar/team_sidebar_controller.jsx b/components/team_sidebar/team_sidebar_controller.jsx
index d5e6e0849478..e4d1d37febd8 100644
--- a/components/team_sidebar/team_sidebar_controller.jsx
+++ b/components/team_sidebar/team_sidebar_controller.jsx
@@ -5,6 +5,7 @@ import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -16,6 +17,7 @@ import TeamButton from './components/team_button.jsx';
 
 export default class TeamSidebar extends React.Component {
     static propTypes = {
+        isOpen: PropTypes.bool.isRequired,
         experimentalPrimaryTeam: PropTypes.string,
         enableTeamCreation: PropTypes.bool.isRequired,
         actions: PropTypes.shape({
@@ -176,7 +178,7 @@ export default class TeamSidebar extends React.Component {
         }
 
         return (
-            <div className='team-sidebar'>
+            <div className={classNames('team-sidebar', {'move--right': this.props.isOpen})}>
                 <div className='team-wrapper'>
                     {teams}
                 </div>
diff --git a/components/tutorial/menu_tutorial_tip.jsx b/components/tutorial/menu_tutorial_tip.jsx
new file mode 100644
index 000000000000..a28f6207924f
--- /dev/null
+++ b/components/tutorial/menu_tutorial_tip.jsx
@@ -0,0 +1,50 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+//
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedHTMLMessage} from 'react-intl';
+
+import TutorialTip from './tutorial_tip';
+
+const MenuTutorialTip = ({toggleFunc, onBottom}) => {
+    const screens = [];
+
+    screens.push(
+        <div>
+            <FormattedHTMLMessage
+                id='sidebar_header.tutorial'
+                defaultMessage='<h4>Main Menu</h4>
+                <p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p>
+                <p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>'
+            />
+        </div>
+    );
+
+    let placement = 'right';
+    let arrow = 'left';
+    if (onBottom) {
+        placement = 'bottom';
+        arrow = 'up';
+    }
+
+    return (
+        <div
+            onClick={toggleFunc}
+        >
+            <TutorialTip
+                placement={placement}
+                screens={screens}
+                overlayClass={'tip-overlay--header--' + arrow}
+                diagnosticsTag='tutorial_tip_3_main_menu'
+            />
+        </div>
+    );
+};
+
+MenuTutorialTip.propTypes = {
+    toggleFunc: PropTypes.func,
+    onBottom: PropTypes.bool.isRequired,
+};
+
+export default MenuTutorialTip;
diff --git a/components/tutorial/tutorial_tip/index.js b/components/tutorial/tutorial_tip/index.js
new file mode 100644
index 000000000000..48641b2f48e1
--- /dev/null
+++ b/components/tutorial/tutorial_tip/index.js
@@ -0,0 +1,16 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {closeMenu as closeRhsMenu} from 'actions/views/rhs';
+
+import TutorialTip from './tutorial_tip.jsx';
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            closeRhsMenu,
+        }, dispatch),
+    };
+}
+
+export default connect(null, mapDispatchToProps)(TutorialTip);
diff --git a/components/tutorial/tutorial_tip.jsx b/components/tutorial/tutorial_tip/tutorial_tip.jsx
similarity index 80%
rename from components/tutorial/tutorial_tip.jsx
rename to components/tutorial/tutorial_tip/tutorial_tip.jsx
index 55196accd5d8..4f0ccfaf2f31 100644
--- a/components/tutorial/tutorial_tip.jsx
+++ b/components/tutorial/tutorial_tip/tutorial_tip.jsx
@@ -4,14 +4,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Overlay} from 'react-bootstrap';
-import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {savePreference} from 'actions/user_actions.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import Constants from 'utils/constants.jsx';
-import * as Utils from 'utils/utils.jsx';
 import tutorialGif from 'images/tutorialTip.gif';
 import tutorialGifWhite from 'images/tutorialTipWhite.gif';
 
@@ -55,7 +54,7 @@ export default class TutorialTip extends React.Component {
             trackEvent('tutorial', tag);
         }
 
-        this.closeRightSidebar();
+        this.props.actions.closeRhsMenu();
         this.hide();
 
         const step = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 0);
@@ -66,15 +65,6 @@ export default class TutorialTip extends React.Component {
         );
     }
 
-    closeRightSidebar() {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.remove('move--left-small');
-                document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
-            });
-        }
-    }
-
     skipTutorial = (e) => {
         e.preventDefault();
 
@@ -214,40 +204,7 @@ TutorialTip.propTypes = {
     placement: PropTypes.string.isRequired,
     overlayClass: PropTypes.string,
     diagnosticsTag: PropTypes.string,
+    actions: PropTypes.shape({
+        closeRhsMenu: PropTypes.func.isRequired,
+    }),
 };
-
-export function createMenuTip(toggleFunc, onBottom) {
-    const screens = [];
-
-    screens.push(
-        <div>
-            <FormattedHTMLMessage
-                id='sidebar_header.tutorial'
-                defaultMessage='<h4>Main Menu</h4>
-                <p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p>
-                <p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>'
-            />
-        </div>
-    );
-
-    let placement = 'right';
-    let arrow = 'left';
-    if (onBottom) {
-        placement = 'bottom';
-        arrow = 'up';
-    }
-
-    return (
-        <div
-            onClick={toggleFunc}
-        >
-            <TutorialTip
-                ref='tip'
-                placement={placement}
-                screens={screens}
-                overlayClass={'tip-overlay--header--' + arrow}
-                diagnosticsTag='tutorial_tip_3_main_menu'
-            />
-        </div>
-    );
-}
diff --git a/components/webrtc/controller/index.js b/components/webrtc/controller/index.js
index f95bda1a88a7..34cb0ef9e53c 100644
--- a/components/webrtc/controller/index.js
+++ b/components/webrtc/controller/index.js
@@ -2,8 +2,11 @@
 // See License.txt for license information.
 
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import {closeRightHandSide as closeRhs} from 'actions/views/rhs';
+
 import WebrtcController from './webrtc_controller.jsx';
 
 function mapStateToProps(state) {
@@ -15,4 +18,12 @@ function mapStateToProps(state) {
     };
 }
 
-export default connect(mapStateToProps)(WebrtcController);
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            closeRhs,
+        }, dispatch),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(WebrtcController);
diff --git a/components/webrtc/controller/webrtc_controller.jsx b/components/webrtc/controller/webrtc_controller.jsx
index 26e1767bc145..ac02166edf77 100644
--- a/components/webrtc/controller/webrtc_controller.jsx
+++ b/components/webrtc/controller/webrtc_controller.jsx
@@ -768,7 +768,7 @@ export default class WebrtcController extends React.Component {
         }
 
         WebrtcStore.setVideoCallWith(null);
-        WebrtcStore.emitRhsChanged(false);
+        this.props.actions.closeRhs();
 
         if (manual) {
             return this.close();
@@ -1240,4 +1240,7 @@ WebrtcController.propTypes = {
     expanded: PropTypes.bool.isRequired,
     toggleSize: PropTypes.func,
     enableDeveloper: PropTypes.bool.isRequired,
+    actions: PropTypes.shape({
+        closeRhs: PropTypes.func.isRequired,
+    }).isRequired,
 };
diff --git a/components/webrtc/notification/index.js b/components/webrtc/notification/index.js
new file mode 100644
index 000000000000..7b0d4f7f52d2
--- /dev/null
+++ b/components/webrtc/notification/index.js
@@ -0,0 +1,26 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {closeRightHandSide as closeRhs} from 'actions/views/rhs';
+import {getIsRhsOpen} from 'selectors/rhs';
+
+import WebrtcNotification from './webrtc_notification';
+
+function mapStateToProps(state) {
+    return {
+        isRhsOpen: getIsRhsOpen(state),
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            closeRhs,
+        }, dispatch),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(WebrtcNotification);
diff --git a/components/webrtc/webrtc_notification.jsx b/components/webrtc/notification/webrtc_notification.jsx
similarity index 95%
rename from components/webrtc/webrtc_notification.jsx
rename to components/webrtc/notification/webrtc_notification.jsx
index 036ef567e2dd..f5fe71736208 100644
--- a/components/webrtc/webrtc_notification.jsx
+++ b/components/webrtc/notification/webrtc_notification.jsx
@@ -1,8 +1,8 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import React from 'react';
+import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
@@ -17,6 +17,13 @@ import ring from 'images/ring.mp3';
 const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 
 export default class WebrtcNotification extends React.Component {
+    static propTypes = {
+        isRhsOpen: PropTypes.bool.isRequired,
+        actions: PropTypes.shape({
+            closeRhs: PropTypes.func.isRequired,
+        }).isRequired,
+    }
+
     constructor() {
         super();
 
@@ -25,30 +32,25 @@ export default class WebrtcNotification extends React.Component {
         this.closeNotification = this.closeNotification.bind(this);
         this.onIncomingCall = this.onIncomingCall.bind(this);
         this.onCancelCall = this.onCancelCall.bind(this);
-        this.onRhs = this.onRhs.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.handleAnswer = this.handleAnswer.bind(this);
         this.handleTimeout = this.handleTimeout.bind(this);
         this.stopRinging = this.stopRinging.bind(this);
-        this.closeRightHandSide = this.closeRightHandSide.bind(this);
 
         this.state = {
             userCalling: null,
-            rhsOpened: false,
         };
     }
 
     componentDidMount() {
         WebrtcStore.addNotifyListener(this.onIncomingCall);
         WebrtcStore.addChangedListener(this.onCancelCall);
-        WebrtcStore.addRhsChangedListener(this.onRhs);
         this.mounted = true;
     }
 
     componentWillUnmount() {
         WebrtcStore.removeNotifyListener(this.onIncomingCall);
         WebrtcStore.removeChangedListener(this.onCancelCall);
-        WebrtcStore.removeRhsChangedListener(this.onRhs);
         if (this.refs.ring) {
             this.refs.ring.removeListener('ended', this.handleTimeout);
         }
@@ -75,12 +77,10 @@ export default class WebrtcNotification extends React.Component {
         this.setState({userCalling: null});
     }
 
-    closeRightHandSide(e) {
+    closeRightHandSide = (e) => {
         e.preventDefault();
         GlobalActions.emitCloseRightHandSide();
-        setTimeout(() => {
-            $('.app__body .inner-wrap').addClass('move--left');
-        }, 0);
+        this.props.actions.closeRhs();
     }
 
     onIncomingCall(incoming) {
@@ -140,10 +140,6 @@ export default class WebrtcNotification extends React.Component {
         this.closeNotification();
     }
 
-    onRhs(rhsOpened) {
-        this.setState({rhsOpened});
-    }
-
     handleTimeout() {
         WebSocketClient.sendMessage('webrtc', {
             action: WebrtcActionTypes.NO_ANSWER,
@@ -320,7 +316,7 @@ export default class WebrtcNotification extends React.Component {
                     {msg}
                 </div>
             );
-        } else if (this.state.rhsOpened && WebrtcStore.isBusy()) {
+        } else if (this.props.isRhsOpen && WebrtcStore.isBusy()) {
             return (
                 <div
                     className='webrtc__notification--rhs'
diff --git a/components/webrtc/sidebar/index.js b/components/webrtc/sidebar/index.js
new file mode 100644
index 000000000000..debf1fd4208c
--- /dev/null
+++ b/components/webrtc/sidebar/index.js
@@ -0,0 +1,18 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+
+import {getIsWebrtcOpen} from 'selectors/webrtc';
+
+import WebrtcSidebar from './webrtc_sidebar';
+
+function mapStateToProps(state) {
+    return {
+        isOpen: getIsWebrtcOpen(state),
+        currentUser: getCurrentUser(state),
+    };
+}
+
+export default connect(mapStateToProps)(WebrtcSidebar);
diff --git a/components/webrtc/sidebar/webrtc_sidebar.jsx b/components/webrtc/sidebar/webrtc_sidebar.jsx
new file mode 100644
index 000000000000..775c9b7c02ac
--- /dev/null
+++ b/components/webrtc/sidebar/webrtc_sidebar.jsx
@@ -0,0 +1,96 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import WebrtcStore from 'stores/webrtc_store.jsx';
+
+import WebrtcController from '../controller';
+
+export default class WebrtcSidebar extends React.Component {
+    static propTypes = {
+        currentUser: PropTypes.object,
+        isOpen: PropTypes.bool.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            expanded: false,
+            videoCallVisible: false,
+            isCaller: false,
+            userId: null,
+        };
+    }
+
+    componentDidMount() {
+        WebrtcStore.addInitListener(this.onInitializeVideoCall);
+    }
+
+    componentWillUnmount() {
+        WebrtcStore.removeInitListener(this.onInitializeVideoCall);
+    }
+
+    onShrink = () => {
+        this.setState({expanded: false});
+    }
+
+    toggleSize = (e) => {
+        if (e) {
+            e.preventDefault();
+        }
+        this.setState((prevState) => {
+            return {expanded: !prevState.expanded};
+        });
+    }
+
+    onInitializeVideoCall = (userId, isCaller) => {
+        let expanded = this.state.expanded;
+        if (userId === null) {
+            expanded = false;
+        }
+        this.setState({
+            videoCallVisible: (userId !== null),
+            isCaller,
+            userId,
+            expanded,
+        });
+    }
+
+    render() {
+        let content = null;
+
+        if (this.state.videoCallVisible) {
+            content = (
+                <WebrtcController
+                    currentUser={this.state.currentUser}
+                    userId={this.state.userId}
+                    isCaller={this.state.isCaller}
+                    expanded={this.state.expanded}
+                    toggleSize={this.toggleSize}
+                />
+            );
+        }
+
+        return (
+            <div
+                className={classNames('sidebar--right', 'webrtc', {
+                    'webrtc--show': this.props.isOpen,
+                    'sidebar--right--expanded': this.state.expanded,
+                    'move--left': this.props.isOpen,
+                })}
+            >
+                <div
+                    onClick={this.onShrink}
+                    className='sidebar--right__bg'
+                />
+                <div className='sidebar-right-container'>
+                    {content}
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/components/webrtc/webrtc_sidebar.jsx b/components/webrtc/webrtc_sidebar.jsx
deleted file mode 100644
index fe1ef436f24b..000000000000
--- a/components/webrtc/webrtc_sidebar.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import $ from 'jquery';
-import React from 'react';
-
-import UserStore from 'stores/user_store.jsx';
-import WebrtcStore from 'stores/webrtc_store.jsx';
-import * as Utils from 'utils/utils.jsx';
-
-import WebrtcController from './controller';
-
-export default class SidebarRight extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.onShrink = this.onShrink.bind(this);
-        this.toggleSize = this.toggleSize.bind(this);
-        this.onInitializeVideoCall = this.onInitializeVideoCall.bind(this);
-
-        this.state = {
-            expanded: false,
-            currentUser: UserStore.getCurrentUser(),
-            videoCallVisible: false,
-            isCaller: false,
-            videoCallWithUserId: null,
-        };
-    }
-
-    componentDidMount() {
-        WebrtcStore.addInitListener(this.onInitializeVideoCall);
-        this.doStrangeThings();
-    }
-
-    componentWillUnmount() {
-        WebrtcStore.removeInitListener(this.onInitializeVideoCall);
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return !Utils.areObjectsEqual(nextState, this.state);
-    }
-
-    doStrangeThings = () => {
-        // We should have a better way to do this stuff
-        // Hence the function name.
-        $('.app__body .inner-wrap').removeClass('move--right');
-        $('.app__body .inner-wrap').addClass('webrtc--show move--left');
-        $('.app__body .sidebar--left').removeClass('move--right');
-        $('.multi-teams .team-sidebar').removeClass('move--right');
-        $('.app__body .webrtc').addClass('webrtc--show');
-
-        //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
-        if (!this.state.videoCallVisible) {
-            $('.app__body .inner-wrap').removeClass('webrtc--show move--left move--right');
-            $('.app__body .webrtc').removeClass('webrtc--show');
-            return (
-                <div/>
-            );
-        }
-        return null;
-    }
-
-    componentDidUpdate() {
-        this.doStrangeThings();
-    }
-
-    onShrink() {
-        this.setState({expanded: false});
-    }
-
-    toggleSize(e) {
-        if (e) {
-            e.preventDefault();
-        }
-        this.setState((prevState) => {
-            return {expanded: !prevState.expanded};
-        });
-    }
-
-    onInitializeVideoCall(userId, isCaller) {
-        let expanded = this.state.expanded;
-        if (userId === null) {
-            expanded = false;
-        }
-        this.setState({
-            videoCallVisible: (userId !== null),
-            isCaller,
-            videoCallWithUserId: userId,
-            expanded,
-        });
-    }
-
-    render() {
-        let content = null;
-        let expandedClass = '';
-
-        if (this.state.expanded) {
-            expandedClass = 'sidebar--right--expanded';
-        }
-
-        if (this.state.videoCallVisible) {
-            content = (
-                <WebrtcController
-                    currentUser={this.state.currentUser}
-                    userId={this.state.videoCallWithUserId}
-                    isCaller={this.state.isCaller}
-                    expanded={this.state.expanded}
-                    toggleSize={this.toggleSize}
-                />
-            );
-        }
-
-        return (
-            <div
-                className={'sidebar--right webrtc ' + expandedClass}
-                id='sidebar-webrtc'
-            >
-                <div
-                    onClick={this.onShrink}
-                    className='sidebar--right__bg'
-                />
-                <div className='sidebar-right-container'>
-                    {content}
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/reducers/views/index.js b/reducers/views/index.js
index 5f8db20e3b44..438727328a05 100644
--- a/reducers/views/index.js
+++ b/reducers/views/index.js
@@ -9,6 +9,8 @@ import rhs from './rhs';
 import posts from './posts';
 import modals from './modals';
 import emoji from './emoji';
+import lhs from './lhs';
+import webrtc from './webrtc';
 
 export default combineReducers({
     admin,
@@ -17,4 +19,6 @@ export default combineReducers({
     posts,
     modals,
     emoji,
+    lhs,
+    webrtc,
 });
diff --git a/reducers/views/lhs.js b/reducers/views/lhs.js
new file mode 100644
index 000000000000..9dc6f55e4bea
--- /dev/null
+++ b/reducers/views/lhs.js
@@ -0,0 +1,30 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {combineReducers} from 'redux';
+import {TeamTypes} from 'mattermost-redux/action_types';
+
+import {ActionTypes} from 'utils/constants.jsx';
+
+function isOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.TOGGLE_LHS:
+        return !state;
+    case ActionTypes.OPEN_LHS:
+        return true;
+    case ActionTypes.CLOSE_LHS:
+        return false;
+    case ActionTypes.TOGGLE_RHS_MENU:
+        return false;
+    case ActionTypes.OPEN_RHS_MENU:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
+export default combineReducers({
+    isOpen,
+});
diff --git a/reducers/views/rhs.js b/reducers/views/rhs.js
index f4ce256b98f8..21e4d4c764f0 100644
--- a/reducers/views/rhs.js
+++ b/reducers/views/rhs.js
@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 import {combineReducers} from 'redux';
-import {PostTypes, SearchTypes} from 'mattermost-redux/action_types';
+import {PostTypes, SearchTypes, TeamTypes} from 'mattermost-redux/action_types';
 
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
 
@@ -104,6 +104,46 @@ function isSearchingPinnedPost(state = false, action) {
     }
 }
 
+function isSidebarOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.UPDATE_RHS_STATE:
+        return Boolean(action.state);
+    case ActionTypes.SELECT_POST:
+        return Boolean(action.postId);
+    case ActionTypes.TOGGLE_RHS_MENU:
+        return false;
+    case ActionTypes.OPEN_RHS_MENU:
+        return false;
+    case ActionTypes.TOGGLE_LHS:
+        return false;
+    case ActionTypes.OPEN_LHS:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
+function isMenuOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.TOGGLE_RHS_MENU:
+        return !state;
+    case ActionTypes.OPEN_RHS_MENU:
+        return true;
+    case ActionTypes.CLOSE_RHS_MENU:
+        return false;
+    case ActionTypes.TOGGLE_LHS:
+        return false;
+    case ActionTypes.OPEN_LHS:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
 export default combineReducers({
     selectedPostId,
     selectedChannelId,
@@ -113,4 +153,6 @@ export default combineReducers({
     isSearchingTerm,
     isSearchingFlaggedPost,
     isSearchingPinnedPost,
+    isSidebarOpen,
+    isMenuOpen,
 });
diff --git a/reducers/views/webrtc.js b/reducers/views/webrtc.js
new file mode 100644
index 000000000000..0690ff0a588f
--- /dev/null
+++ b/reducers/views/webrtc.js
@@ -0,0 +1,30 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {combineReducers} from 'redux';
+import {TeamTypes} from 'mattermost-redux/action_types';
+
+import {ActionTypes} from 'utils/constants.jsx';
+
+function isOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.INIT_WEBRTC:
+        return Boolean(action.userId);
+    case ActionTypes.CLOSE_WEBRTC:
+        return false;
+    case ActionTypes.CLOSE_RHS:
+        return false;
+    case ActionTypes.TOGGLE_LHS:
+        return false;
+    case ActionTypes.OPEN_LHS:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
+export default combineReducers({
+    isOpen,
+});
diff --git a/selectors/lhs.jsx b/selectors/lhs.jsx
new file mode 100644
index 000000000000..f09a04a195ea
--- /dev/null
+++ b/selectors/lhs.jsx
@@ -0,0 +1,6 @@
+// Copyright (c) 2018 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export function getIsLhsOpen(state) {
+    return state.views.lhs.isOpen;
+}
diff --git a/selectors/rhs.jsx b/selectors/rhs.jsx
index 3476d334980a..5ead3c08644a 100644
--- a/selectors/rhs.jsx
+++ b/selectors/rhs.jsx
@@ -97,3 +97,11 @@ export function makeGetPostsEmbedVisibleObj() {
         }
     );
 }
+
+export function getIsRhsOpen(state) {
+    return state.views.rhs.isSidebarOpen;
+}
+
+export function getIsRhsMenuOpen(state) {
+    return state.views.rhs.isMenuOpen;
+}
diff --git a/selectors/webrtc.jsx b/selectors/webrtc.jsx
new file mode 100644
index 000000000000..e5e17859fd29
--- /dev/null
+++ b/selectors/webrtc.jsx
@@ -0,0 +1,6 @@
+// Copyright (c) 2018 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export function getIsWebrtcOpen(state) {
+    return state.views.webrtc.isOpen;
+}
diff --git a/stores/webrtc_store.jsx b/stores/webrtc_store.jsx
index 571a321a111b..25e7c0175d29 100644
--- a/stores/webrtc_store.jsx
+++ b/stores/webrtc_store.jsx
@@ -5,6 +5,10 @@ import EventEmitter from 'events';
 
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import {WebrtcActionTypes} from 'utils/constants.jsx';
+import {initWebrtc} from 'actions/views/webrtc';
+import store from 'stores/redux_store.jsx';
+
+const dispatch = store.dispatch;
 
 class WebrtcStoreClass extends EventEmitter {
     constructor() {
@@ -28,6 +32,7 @@ class WebrtcStoreClass extends EventEmitter {
 
     emitInit(userId, isCaller) {
         this.emit(WebrtcActionTypes.INITIALIZE, userId, isCaller);
+        dispatch(initWebrtc(userId, isCaller));
     }
 
     addInitListener(callback) {
@@ -73,18 +78,6 @@ class WebrtcStoreClass extends EventEmitter {
     removeChangedListener(callback) {
         this.removeListener(WebrtcActionTypes.CHANGED, callback);
     }
-
-    emitRhsChanged(isOpen) {
-        this.emit(WebrtcActionTypes.RHS, isOpen);
-    }
-
-    addRhsChangedListener(callback) {
-        this.on(WebrtcActionTypes.RHS, callback);
-    }
-
-    removeRhsChangedListener(callback) {
-        this.removeListener(WebrtcActionTypes.RHS, callback);
-    }
 }
 
 var WebrtcStore = new WebrtcStoreClass();
diff --git a/tests/components/create_post/__snapshots__/create_post.test.jsx.snap b/tests/components/create_post/__snapshots__/create_post.test.jsx.snap
index de9b6d6b69f1..332b875fca61 100644
--- a/tests/components/create_post/__snapshots__/create_post.test.jsx.snap
+++ b/tests/components/create_post/__snapshots__/create_post.test.jsx.snap
@@ -1,5 +1,146 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/create_post Show tutorial 1`] = `
+<form
+  className=""
+  id="create_post"
+  onSubmit={[Function]}
+  role="form"
+>
+  <div
+    className="post-create"
+  >
+    <div
+      className="post-create-body"
+    >
+      <div
+        className="post-body__cell"
+      >
+        <Textbox
+          channelId="owsyt8n43jfxjpzh9np93mx1wa"
+          characterLimit={4000}
+          createMessage="Write a message..."
+          disabled={false}
+          emojiEnabled={true}
+          handlePostError={[Function]}
+          id="post_textbox"
+          isRHS={false}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          popoverMentionKeyClick={true}
+          supportsCommands={true}
+          value=""
+        />
+        <span
+          className="post-body__actions"
+        >
+          <Connect(FileUpload)
+            fileCount={0}
+            getTarget={[Function]}
+            onFileUpload={[Function]}
+            onFileUploadChange={[Function]}
+            onUploadError={[Function]}
+            onUploadStart={[Function]}
+            postType="post"
+          />
+          <span
+            className="emoji-picker__container"
+          >
+            <EmojiPickerOverlay
+              onEmojiClick={[Function]}
+              onHide={[Function]}
+              rightOffset={15}
+              show={false}
+              spaceRequiredAbove={422}
+              spaceRequiredBelow={436}
+              target={[Function]}
+              topOffset={-7}
+            />
+            <EmojiIcon
+              className="icon icon--emoji "
+              id="emojiPickerButton"
+              onClick={[Function]}
+            />
+          </span>
+          <a
+            className="send-button theme disabled"
+            onClick={[Function]}
+          >
+            <i
+              className="fa fa-paper-plane"
+            />
+          </a>
+        </span>
+      </div>
+      <Connect(TutorialTip)
+        diagnosticsTag="tutorial_tip_1_sending_messages"
+        id="postTextboxTipMessage"
+        overlayClass="tip-overlay--chat"
+        placement="top"
+        screens={
+          Array [
+            <div>
+              <FormattedHTMLMessage
+                defaultMessage="<h4>Sending Messages</h4><p>Type here to write a message and press <strong>Enter</strong> to post it.</p><p>Click the <strong>Attachment</strong> button to upload an image or a file.</p>"
+                id="create_post.tutorialTip"
+                values={Object {}}
+              />
+            </div>,
+          ]
+        }
+      />
+    </div>
+    <div
+      className="post-create-footer"
+      id="postCreateFooter"
+    >
+      <Connect(MsgTyping)
+        channelId="owsyt8n43jfxjpzh9np93mx1wa"
+        postId=""
+      />
+    </div>
+  </div>
+  <PostDeletedModal
+    onHide={[Function]}
+    show={false}
+  />
+  <ConfirmModal
+    confirmButtonClass="btn btn-primary"
+    confirmButtonText={
+      <FormattedMessage
+        defaultMessage="Confirm"
+        id="notify_all.confirm"
+        values={Object {}}
+      />
+    }
+    message={
+      <FormattedMessage
+        defaultMessage="By using @all or @channel you are about to send notifications to {totalMembers} people. Are you sure you want to do this?"
+        id="notify_all.question"
+        values={
+          Object {
+            "totalMembers": 8,
+          }
+        }
+      />
+    }
+    modalClass=""
+    onCancel={[Function]}
+    onConfirm={[Function]}
+    show={false}
+    title={
+      <FormattedMessage
+        defaultMessage="Confirm sending notifications to entire channel"
+        id="notify_all.title.confirm"
+        values={Object {}}
+      />
+    }
+  />
+</form>
+`;
+
 exports[`components/create_post should match snapshot for center textbox 1`] = `
 <form
   className="center"
diff --git a/tests/components/create_post/create_post.test.jsx b/tests/components/create_post/create_post.test.jsx
index 228e042836dc..98412c79b05c 100644
--- a/tests/components/create_post/create_post.test.jsx
+++ b/tests/components/create_post/create_post.test.jsx
@@ -606,7 +606,7 @@ describe('components/create_post', () => {
         const wrapper = shallow(createPost({
             showTutorialTip: true,
         }));
-        expect(wrapper.find('TutorialTip').length).toBe(1);
+        expect(wrapper).toMatchSnapshot();
     });
 
     it('Toggle showPostDeletedModal state', () => {
diff --git a/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap b/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap
index 916ac88dc156..861c67ed021d 100644
--- a/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap
+++ b/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSquare and with offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
@@ -39,7 +39,7 @@ exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSq
 `;
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSquare and without offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
@@ -77,7 +77,7 @@ exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSq
 `;
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, without townSquare and with offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
@@ -115,7 +115,7 @@ exports[`component/sidebar/SidebarTutorialTip should match snapshot, without tow
 `;
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, without townSquare and without offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
diff --git a/tests/components/sidebar/sidebar_channel.test.jsx b/tests/components/sidebar/sidebar_channel.test.jsx
index 76bd55ab7b7d..3c08db0906f3 100644
--- a/tests/components/sidebar/sidebar_channel.test.jsx
+++ b/tests/components/sidebar/sidebar_channel.test.jsx
@@ -64,14 +64,21 @@ describe('component/sidebar/sidebar_channel/SidebarChannel', () => {
         actions: {
             savePreferences: jest.fn(),
             leaveChannel: jest.fn(),
+            openLhs: jest.fn(),
         },
     };
 
+    beforeEach(() => {
+        defaultProps.actions.openLhs = jest.fn();
+    });
+
     test('should match snapshot, on channel show', () => {
+        const props = defaultProps;
         const wrapper = shallow(
-            <SidebarChannel {...defaultProps}/>
+            <SidebarChannel {...props}/>
         );
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on fake channel show', () => {
@@ -83,367 +90,331 @@ describe('component/sidebar/sidebar_channel/SidebarChannel', () => {
             status: 'test',
             fake: true,
         };
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: channel.display_name,
-                    channelName: channel.name,
-                    channelType: channel.type,
-                    channelId: channel.id,
-                    channelStatus: channel.status,
-                    channelFake: true,
-                    channelStringified: JSON.stringify(channel),
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: channel.display_name,
+            channelName: channel.name,
+            channelType: channel.type,
+            channelId: channel.id,
+            channelStatus: channel.status,
+            channelFake: true,
+            channelStringified: JSON.stringify(channel),
+        };
+
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on active channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    active: true,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            active: true,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on myself channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    currentUserId: 'myself',
-                    channelTeammateId: 'myself',
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            currentUserId: 'myself',
+            channelTeammateId: 'myself',
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on channel show with tutorial tip', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    showTutorialTip: true,
-                    channelId: 'test',
-                    channelName: Constants.DEFAULT_CHANNEL,
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelDisplayName: 'Town Square',
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            showTutorialTip: true,
+            channelId: 'test',
+            channelName: Constants.DEFAULT_CHANNEL,
+            channelType: Constants.OPEN_CHANNEL,
+            channelDisplayName: 'Town Square',
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).toBeCalled();
     });
 
     test('should match snapshot, on channel show with unread mentions (must have mentions badge)', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    membership: {mention_count: 3},
-                    unreadMentions: 4,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            membership: {mention_count: 3},
+            unreadMentions: 4,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on channel show without unread mentions (must have no badge)', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    membership: {mention_count: 3},
-                    unreadMentions: 0,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            membership: {mention_count: 3},
+            unreadMentions: 0,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on public channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on private channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on group channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on default channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: Constants.DEFAULT_CHANNEL,
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: Constants.DEFAULT_CHANNEL,
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on public channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on private channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on group channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on default channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: Constants.DEFAULT_CHANNEL,
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: Constants.DEFAULT_CHANNEL,
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the direct channel', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.DM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelType: Constants.DM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+            },
+        };
+
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeaveDirectChannel();
         expect(savePreferences).toBeCalledWith('user-id', [{user_id: 'user-id', category: Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, name: 'teammate-id', value: 'false'}]);
         expect(trackEvent).toBeCalledWith('ui', 'ui_direct_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the group channel', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
+        const props = {
+            ...defaultProps,
+            channelType: Constants.GM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+                leaveChannel: jest.fn(),
+            },
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.GM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeaveDirectChannel();
         expect(savePreferences).toBeCalledWith('user-id', [{user_id: 'user-id', category: Constants.Preferences.CATEGORY_GROUP_CHANNEL_SHOW, name: 'test-channel-id', value: 'false'}]);
         expect(trackEvent).toBeCalledWith('ui', 'ui_direct_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the active channel', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
         const browserHistory = require('utils/browser_history').browserHistory;
+        const props = {
+            ...defaultProps,
+            channelType: Constants.GM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+                leaveChannel: jest.fn(),
+            },
+            active: true,
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.GM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                    active: true,
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeaveDirectChannel();
         expect(savePreferences).toBeCalledWith('user-id', [{user_id: 'user-id', category: Constants.Preferences.CATEGORY_GROUP_CHANNEL_SHOW, name: 'test-channel-id', value: 'false'}]);
         expect(trackEvent).toBeCalledWith('ui', 'ui_direct_channel_x_button_clicked');
         expect(browserHistory.push).toBeCalledWith('/current-team/channels/town-square');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('do not leave the channel if it is already leaving', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
+        const props = {
+            ...defaultProps,
+            channelType: Constants.GM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+            },
+            active: true,
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.GM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                    active: true,
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         const instance = wrapper.instance();
         instance.isLeaving = true;
         instance.handleLeaveDirectChannel();
         expect(savePreferences).not.toBeCalled();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the public channel', () => {
         const leaveChannel = jest.fn();
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
+        const props = {
+            ...defaultProps,
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                leaveChannel,
+            },
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences: jest.fn(),
-                        leaveChannel,
-                    },
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeavePublicChannel();
         expect(leaveChannel).toBeCalledWith('test-channel-id');
         expect(trackEvent).toBeCalledWith('ui', 'ui_public_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the private channel', () => {
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
         const showLeavePrivateChannelModal = require('actions/global_actions.jsx').showLeavePrivateChannelModal;
+        const props = {
+            ...defaultProps,
+            channelId: 'test-channel-id',
+            channelDisplayName: 'Channel display name',
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelId: 'test-channel-id',
-                    channelDisplayName: 'Channel display name',
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeavePrivateChannel();
         expect(showLeavePrivateChannelModal).toBeCalledWith({id: 'test-channel-id', display_name: 'Channel display name'});
         expect(trackEvent).toBeCalledWith('ui', 'ui_private_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 });
diff --git a/tests/redux/actions/views/lhs.test.js b/tests/redux/actions/views/lhs.test.js
index cb5fe66fff41..089e251deb19 100644
--- a/tests/redux/actions/views/lhs.test.js
+++ b/tests/redux/actions/views/lhs.test.js
@@ -1,18 +1,63 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
 
-import {initTeamChangeActions} from 'actions/views/lhs';
-import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
-import {loadStatusesForChannelAndSidebar} from 'actions/status_actions.jsx';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 
-jest.mock('actions/status_actions.jsx', () => ({
-    loadStatusesForChannelAndSidebar: jest.fn(),
-}));
+import {
+    toggle,
+    open,
+    close,
+} from 'actions/views/lhs';
+import {ActionTypes} from 'utils/constants.jsx';
 
-jest.mock('actions/user_actions.jsx', () => ({
-    loadProfilesForSidebar: jest.fn(),
-}));
+const mockStore = configureStore([thunk]);
 
-it('Check for sidebar init actions', async () => {
-    await initTeamChangeActions();
-    expect(loadStatusesForChannelAndSidebar).toHaveBeenCalled();
-    expect(loadProfilesForSidebar).toHaveBeenCalled();
+describe('lhs view actions', () => {
+    const initialState = {
+        views: {
+            lhs: {
+                isOpen: false,
+            },
+        },
+    };
+
+    let store;
+
+    beforeEach(() => {
+        store = mockStore(initialState);
+    });
+
+    it('toggle dispatches the right action', () => {
+        store.dispatch(toggle());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.TOGGLE_LHS,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('open dispatches the right action', () => {
+        store.dispatch(open());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.OPEN_LHS,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('close dispatches the right action', () => {
+        store.dispatch(close());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.CLOSE_LHS,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
 });
diff --git a/tests/redux/actions/views/rhs.test.js b/tests/redux/actions/views/rhs.test.js
index 86b767e26ee8..f81acbb384a2 100644
--- a/tests/redux/actions/views/rhs.test.js
+++ b/tests/redux/actions/views/rhs.test.js
@@ -21,6 +21,9 @@ import {
     showPinnedPosts,
     showMentions,
     closeRightHandSide,
+    toggleMenu,
+    openMenu,
+    closeMenu,
 } from 'actions/views/rhs';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
@@ -411,4 +414,37 @@ describe('rhs view actions', () => {
             expect(store.getActions()).toEqual(compareStore.getActions());
         });
     });
+
+    it('toggleMenu dispatches the right action', () => {
+        store.dispatch(toggleMenu());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.TOGGLE_RHS_MENU,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('openMenu dispatches the right action', () => {
+        store.dispatch(openMenu());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.OPEN_RHS_MENU,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('closeMenu dispatches the right action', () => {
+        store.dispatch(closeMenu());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.CLOSE_RHS_MENU,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
 });
diff --git a/tests/redux/reducers/views/lhs.test.js b/tests/redux/reducers/views/lhs.test.js
new file mode 100644
index 000000000000..ef575eff449f
--- /dev/null
+++ b/tests/redux/reducers/views/lhs.test.js
@@ -0,0 +1,110 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {TeamTypes} from 'mattermost-redux/action_types';
+
+import lhsReducer from 'reducers/views/lhs';
+import {ActionTypes} from 'utils/constants.jsx';
+
+describe('Reducers.LHS', () => {
+    const initialState = {
+        isOpen: false,
+    };
+
+    test('Initial state', () => {
+        const nextState = lhsReducer(
+            {},
+            {}
+        );
+
+        expect(nextState).toEqual(initialState);
+    });
+
+    test(`should close on ${ActionTypes.TOGGLE_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: true,
+            },
+            {
+                type: ActionTypes.TOGGLE_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: false,
+        });
+    });
+
+    test(`should open on ${ActionTypes.TOGGLE_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: false,
+            },
+            {
+                type: ActionTypes.TOGGLE_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: true,
+        });
+    });
+
+    test(`should open on ${ActionTypes.OPEN_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: false,
+            },
+            {
+                type: ActionTypes.OPEN_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: true,
+        });
+    });
+
+    test(`should close on ${ActionTypes.CLOSE_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: true,
+            },
+            {
+                type: ActionTypes.CLOSE_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: false,
+        });
+    });
+
+    describe('should close', () => {
+        [
+            ActionTypes.TOGGLE_RHS_MENU,
+            ActionTypes.OPEN_RHS_MENU,
+            TeamTypes.SELECT_TEAM,
+        ].forEach((action) => {
+            it(`on ${action}`, () => {
+                const nextState = lhsReducer(
+                    {
+                        isOpen: true,
+                    },
+                    {
+                        type: action,
+                    }
+                );
+
+                expect(nextState).toEqual({
+                    ...initialState,
+                    isOpen: false,
+                });
+            });
+        });
+    });
+});
diff --git a/tests/redux/reducers/views/rhs.test.js b/tests/redux/reducers/views/rhs.test.js
index a481d230cdb9..5a070b05699c 100644
--- a/tests/redux/reducers/views/rhs.test.js
+++ b/tests/redux/reducers/views/rhs.test.js
@@ -1,7 +1,7 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import {SearchTypes} from 'mattermost-redux/action_types';
+import {SearchTypes, TeamTypes} from 'mattermost-redux/action_types';
 
 import rhsReducer from 'reducers/views/rhs';
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
@@ -16,6 +16,8 @@ describe('Reducers.RHS', () => {
         isSearchingTerm: false,
         isSearchingFlaggedPost: false,
         isSearchingPinnedPost: false,
+        isMenuOpen: false,
+        isSidebarOpen: false,
     };
 
     test('Initial state', () => {
@@ -41,6 +43,7 @@ describe('Reducers.RHS', () => {
             ...initialState,
             selectedChannelId: '123',
             rhsState: RHSStates.PIN,
+            isSidebarOpen: true,
         });
     });
 
@@ -59,6 +62,7 @@ describe('Reducers.RHS', () => {
             ...initialState,
             selectedPostId: '',
             rhsState: RHSStates.SEARCH,
+            isSidebarOpen: true,
         });
     });
 
@@ -165,6 +169,7 @@ describe('Reducers.RHS', () => {
             ...initialState,
             selectedPostId: '123',
             selectedChannelId: '321',
+            isSidebarOpen: true,
         });
 
         const nextState2 = rhsReducer(
@@ -184,6 +189,7 @@ describe('Reducers.RHS', () => {
             selectedPostId: '123',
             selectedChannelId: '321',
             previousRhsState: RHSStates.SEARCH,
+            isSidebarOpen: true,
         });
 
         const nextState3 = rhsReducer(
@@ -204,6 +210,7 @@ describe('Reducers.RHS', () => {
             selectedPostId: '123',
             selectedChannelId: '321',
             previousRhsState: RHSStates.FLAG,
+            isSidebarOpen: true,
         });
     });
 
@@ -226,6 +233,105 @@ describe('Reducers.RHS', () => {
             selectedPostId: '123',
             selectedChannelId: '321',
             previousRhsState: RHSStates.PIN,
+            isSidebarOpen: true,
+        });
+    });
+
+    test(`should open menu, closing sidebar on ${ActionTypes.TOGGLE_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: true,
+                isMenuOpen: false,
+            },
+            {
+                type: ActionTypes.TOGGLE_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: true,
+        });
+    });
+
+    test(`should close menu on ${ActionTypes.TOGGLE_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: false,
+                isMenuOpen: true,
+            },
+            {
+                type: ActionTypes.TOGGLE_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: false,
+        });
+    });
+
+    test(`should open menu, closing sidebar on ${ActionTypes.OPEN_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: true,
+                isMenuOpen: false,
+            },
+            {
+                type: ActionTypes.OPEN_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: true,
+        });
+    });
+
+    test(`should close menu on ${ActionTypes.CLOSE_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: false,
+                isMenuOpen: true,
+            },
+            {
+                type: ActionTypes.CLOSE_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: false,
+        });
+    });
+
+    describe('should close menu and sidebar', () => {
+        [
+            ActionTypes.TOGGLE_LHS,
+            ActionTypes.OPEN_LHS,
+            TeamTypes.SELECT_TEAM,
+        ].forEach((action) => {
+            it(`on ${action}`, () => {
+                const nextState = rhsReducer(
+                    {
+                        isSidebarOpen: true,
+                        isMenuOpen: true,
+                    },
+                    {
+                        type: action,
+                    }
+                );
+
+                expect(nextState).toEqual({
+                    ...initialState,
+                    isSidebarOpen: false,
+                    isMenuOpen: false,
+                });
+            });
         });
     });
 });
diff --git a/tests/redux/selectors/lhs.test.js b/tests/redux/selectors/lhs.test.js
new file mode 100644
index 000000000000..2f4d6e49e351
--- /dev/null
+++ b/tests/redux/selectors/lhs.test.js
@@ -0,0 +1,26 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import * as Selectors from 'selectors/lhs';
+
+describe('Selectors.makeGetPostsEmbedVisibleObj', () => {
+    let state;
+
+    beforeEach(() => {
+        state = {};
+    });
+
+    describe('should return the open state of the sidebar menu', () => {
+        [true, false].forEach((expected) => {
+            it(`when open is ${expected}`, () => {
+                state = {views: {lhs: {
+                    isOpen: expected,
+                }}};
+
+                assert.deepEqual(expected, Selectors.getIsLhsOpen(state));
+            });
+        });
+    });
+});
diff --git a/tests/redux/selectors/rhs.test.js b/tests/redux/selectors/rhs.test.js
index 33922e84cae3..9fd7628016b5 100644
--- a/tests/redux/selectors/rhs.test.js
+++ b/tests/redux/selectors/rhs.test.js
@@ -190,4 +190,28 @@ describe('Selectors.makeGetPostsEmbedVisibleObj', () => {
         assert.notEqual(now2, previous2);
         assert.deepEqual(now2, previous2);
     });
+
+    describe('should return the open state of the sidebar', () => {
+        [true, false].forEach((expected) => {
+            it(`when open is ${expected}`, () => {
+                state = {views: {rhs: {
+                    isSidebarOpen: expected,
+                }}};
+
+                assert.deepEqual(expected, Selectors.getIsRhsOpen(state));
+            });
+        });
+    });
+
+    describe('should return the open state of the sidebar menu', () => {
+        [true, false].forEach((expected) => {
+            it(`when open is ${expected}`, () => {
+                state = {views: {rhs: {
+                    isMenuOpen: expected,
+                }}};
+
+                assert.deepEqual(expected, Selectors.getIsRhsMenuOpen(state));
+            });
+        });
+    });
 });
diff --git a/utils/constants.jsx b/utils/constants.jsx
index 5f128495e058..30029582308d 100644
--- a/utils/constants.jsx
+++ b/utils/constants.jsx
@@ -243,6 +243,17 @@ export const ActionTypes = keyMirror({
     SELECT_CHANNEL_WITH_MEMBER: null,
 
     INCREMENT_EMOJI_PICKER_PAGE: null,
+
+    TOGGLE_LHS: null,
+    OPEN_LHS: null,
+    CLOSE_LHS: null,
+
+    TOGGLE_RHS_MENU: null,
+    OPEN_RHS_MENU: null,
+    CLOSE_RHS_MENU: null,
+
+    INIT_WEBRTC: null,
+    CLOSE_WEBRTC: null,
 });
 
 export const WebrtcActionTypes = keyMirror({
@@ -259,7 +270,6 @@ export const WebrtcActionTypes = keyMirror({
     MUTED: null,
     IN_PROGRESS: null,
     DISABLED: null,
-    RHS: null,
 });
 
 export const ModalIdentifiers = {