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, 74 insertions, 21 deletions

diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 1915b22b7..e1de927b9 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -15,6 +15,71 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 export default class SuggestionBox extends React.Component {
+    static propTypes = {
+
+        /**
+         * The list component to render, usually SuggestionList
+         */
+        listComponent: PropTypes.func.isRequired,
+
+        /**
+         * The HTML input box type
+         */
+        type: PropTypes.oneOf(['input', 'textarea', 'search']).isRequired,
+
+        /**
+         * The value of in the input
+         */
+        value: PropTypes.string.isRequired,
+
+        /**
+         * Array of suggestion providers
+         */
+        providers: PropTypes.arrayOf(PropTypes.object),
+
+        /**
+         * Where the list will be displayed relative to the input box, defaults to 'top'
+         */
+        listStyle: PropTypes.string,
+
+        /**
+         * Set to true to draw dividers between types of list items, defaults to false
+         */
+        renderDividers: PropTypes.bool,
+
+        /**
+         * Set to allow TAB to select an item in the list, defaults to true
+         */
+        completeOnTab: PropTypes.bool,
+
+        /**
+         * Function called when input box loses focus
+         */
+        onBlur: PropTypes.func,
+
+        /**
+         * Function called when input box value changes
+         */
+        onChange: PropTypes.func,
+
+        /**
+         * Function called when a key is pressed and the input box is in focus
+         */
+        onKeyDown: PropTypes.func,
+
+        /**
+         * Function called when an item is selected
+         */
+        onItemSelected: PropTypes.func
+    }
+
+    static defaultProps = {
+        type: 'input',
+        listStyle: 'top',
+        renderDividers: false,
+        completeOnTab: true
+    }
+
     constructor(props) {
         super(props);
 
@@ -46,6 +111,14 @@ export default class SuggestionBox extends React.Component {
         SuggestionStore.unregisterSuggestionBox(this.suggestionId);
     }
 
+    componentDidUpdate(prevProps) {
+        if (this.props.providers !== prevProps.providers) {
+            const textbox = this.getTextbox();
+            const pretext = textbox.value.substring(0, textbox.selectionEnd);
+            GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext);
+        }
+    }
+
     getTextbox() {
         if (this.props.type === 'textarea') {
             return this.refs.textbox.getDOMNode();
@@ -171,7 +244,7 @@ export default class SuggestionBox extends React.Component {
             } else if (e.which === KeyCodes.DOWN) {
                 GlobalActions.emitSelectNextSuggestion(this.suggestionId);
                 e.preventDefault();
-            } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB) {
+            } else if (e.which === KeyCodes.ENTER || (this.props.completeOnTab && e.which === KeyCodes.TAB)) {
                 this.handleCompleteWord(SuggestionStore.getSelection(this.suggestionId), SuggestionStore.getSelectedMatchedPretext(this.suggestionId));
                 this.props.onKeyDown(e);
                 e.preventDefault();
@@ -281,23 +354,3 @@ export default class SuggestionBox extends React.Component {
         return '';
     }
 }
-
-SuggestionBox.defaultProps = {
-    type: 'input',
-    listStyle: 'top'
-};
-
-SuggestionBox.propTypes = {
-    listComponent: PropTypes.func.isRequired,
-    type: PropTypes.oneOf(['input', 'textarea', 'search']).isRequired,
-    value: PropTypes.string.isRequired,
-    providers: PropTypes.arrayOf(PropTypes.object),
-    listStyle: PropTypes.string,
-    renderDividers: PropTypes.bool,
-
-    // explicitly name any input event handlers we override and need to manually call
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    onItemSelected: PropTypes.func
-};