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, 96 insertions, 0 deletions

diff --git a/webapp/components/suggestion/switch_team_provider.jsx b/webapp/components/suggestion/switch_team_provider.jsx
new file mode 100644
index 000000000..ff2a8f24b
--- /dev/null
+++ b/webapp/components/suggestion/switch_team_provider.jsx
@@ -0,0 +1,96 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Suggestion from './suggestion.jsx';
+import Provider from './provider.jsx';
+
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
+import {ActionTypes} from 'utils/constants.jsx';
+import LocalizationStore from 'stores/localization_store.jsx';
+
+import React from 'react';
+
+// Redux actions
+import store from 'stores/redux_store.jsx';
+const getState = store.getState;
+
+import * as Selectors from 'mattermost-redux/selectors/entities/teams';
+
+class SwitchTeamSuggestion extends Suggestion {
+    render() {
+        const {item, isSelection} = this.props;
+
+        let className = 'mentions__name';
+        if (isSelection) {
+            className += ' suggestion--selected';
+        }
+
+        return (
+            <div
+                onClick={this.handleClick}
+                className={className}
+            >
+                <div className='status'><i className='fa fa-group'/></div>
+                {item.display_name}
+            </div>
+        );
+    }
+}
+
+let prefix = '';
+
+function quickSwitchSorter(a, b) {
+    const aDisplayName = a.display_name.toLowerCase();
+    const bDisplayName = b.display_name.toLowerCase();
+    const aStartsWith = aDisplayName.startsWith(prefix);
+    const bStartsWith = bDisplayName.startsWith(prefix);
+
+    if (aStartsWith && bStartsWith) {
+        const locale = LocalizationStore.getLocale();
+
+        if (aDisplayName !== bDisplayName) {
+            return aDisplayName.localeCompare(bDisplayName, locale, {numeric: true});
+        }
+
+        return a.name.localeCompare(b.name, locale, {numeric: true});
+    } else if (aStartsWith) {
+        return -1;
+    }
+
+    return 1;
+}
+
+export default class SwitchTeamProvider extends Provider {
+    handlePretextChanged(suggestionId, teamPrefix) {
+        if (teamPrefix) {
+            prefix = teamPrefix;
+            this.startNewRequest(suggestionId, teamPrefix);
+
+            const allTeams = Selectors.getMyTeams(getState());
+
+            const teams = allTeams.filter((team) => {
+                return team.display_name.toLowerCase().indexOf(teamPrefix) !== -1 ||
+                    team.name.indexOf(teamPrefix) !== -1;
+            });
+
+            const teamNames = teams.
+                sort(quickSwitchSorter).
+                map((team) => team.name);
+
+            setTimeout(() => {
+                AppDispatcher.handleServerAction({
+                    type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
+                    id: suggestionId,
+                    matchedPretext: teamPrefix,
+                    terms: teamNames,
+                    items: teams,
+                    component: SwitchTeamSuggestion
+                });
+            }, 0);
+
+            return true;
+        }
+
+        return false;
+    }
+}