PLT-5699 Improvements to channel switcher (#6486)

* Refactor channel switcher to not wait on server results

* Change channel switcher to quick switcher and include team switching

* Add sections, update ordering and add discoverability button

* Fix styling error

* Use CMD in text if on mac

* Clean yarn cache on every install

* Various UX updates per feedback

* Add shortcut help text for team switcher

* Couple more updates per feedback

* Some minor fixes for GM and autocomplete race

* Updating UI for channel switcher (#6504)

* Updating channel switcher button (#6506)

* Updating switcher modal on mobile (#6507)

* Removed jQuery usage

* Rename function to toggleQuickSwitchModal

1 files changed, 25 insertions, 0 deletions

diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index f8b3616f3..a802c2f4f 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -17,6 +17,7 @@ import TeamStore from 'stores/team_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import ModalStore from 'stores/modal_store.jsx';
 
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import {sortTeamsByDisplayName} from 'utils/team_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -424,6 +425,13 @@ export default class Sidebar extends React.Component {
         }
     }
 
+    openQuickSwitcher(e) {
+        e.preventDefault();
+        AppDispatcher.handleViewAction({
+            type: ActionTypes.TOGGLE_QUICK_SWITCH_MODAL
+        });
+    }
+
     createTutorialTip() {
         const screens = [];
 
@@ -790,6 +798,11 @@ export default class Sidebar extends React.Component {
             );
         }
 
+        let quickSwitchText = 'sidebar.switch_channels';
+        if (Utils.isMac()) {
+            quickSwitchText += '.mac';
+        }
+
         return (
             <div
                 className='sidebar--left'
@@ -890,6 +903,18 @@ export default class Sidebar extends React.Component {
                         {directMessageMore}
                     </ul>
                 </div>
+                <div style={{height: '20px', width: '100%'}}>
+                    <a
+                        href='#'
+                        className='sidebar__switcher'
+                        onClick={this.openQuickSwitcher}
+                    >
+                        <FormattedMessage
+                            id={quickSwitchText}
+                            defaultMessage='Switch Channels (CTRL + K)'
+                        />
+                    </a>
+                </div>
             </div>
         );
     }