PLT-4167 Team Sidebar (#4569)

* PLT-4167 Team Sidebar

* Address feedback from PM

* change route from my_members to members

* bug fixes

* Updating styles for teams sidebar (#4681)

* Added PM changes

* Fix corner cases

* Addressing feedback

* use two different endpoints

* Bug fixes

* Rename model and client functions, using preferences to store last team and channel viewed

* Fix mobile notification count and closing the team sidebar

* unit test, fixed bad merge and retrieve from cached when available

* bug fixes

* use id for last channel in preferences, query optimization

* Updating multi team css (#4830)

2 files changed, 42 insertions, 66 deletions

diff --git a/webapp/components/select_team/components/select_team_listing.jsx b/webapp/components/select_team/components/select_team_listing.jsx
deleted file mode 100644
index e69de29bb..000000000
--- a/webapp/components/select_team/components/select_team_listing.jsx
+++ /dev/null
diff --git a/webapp/components/select_team/select_team.jsx b/webapp/components/select_team/select_team.jsx
index eef3b7931..361c95c49 100644
--- a/webapp/components/select_team/select_team.jsx
+++ b/webapp/components/select_team/select_team.jsx
@@ -24,6 +24,7 @@ export default class SelectTeam extends React.Component {
         super(props);
         this.onTeamChange = this.onTeamChange.bind(this);
         this.handleTeamClick = this.handleTeamClick.bind(this);
+        this.teamContentsCompare = this.teamContentsCompare.bind(this);
 
         const state = this.getStateFromStores(false);
         state.loadingTeamId = '';
@@ -61,33 +62,15 @@ export default class SelectTeam extends React.Component {
     }
 
     render() {
-        let content = null;
-        let teamContents = [];
+        let openTeamContents = [];
         const isAlreadyMember = new Map();
         const isSystemAdmin = Utils.isSystemAdmin(UserStore.getCurrentUser().roles);
-        let teamMembersCount = 0;
 
         for (const teamMember of this.state.teamMembers) {
             const teamId = teamMember.team_id;
-            const team = this.state.teams[teamId];
             isAlreadyMember[teamId] = true;
-            teamMembersCount++;
-
-            teamContents.push(
-                <SelectTeamItem
-                    key={'team_' + team.name}
-                    team={team}
-                    url={'/' + team.name + '/channels/town-square'}
-                    onTeamClick={this.handleTeamClick}
-                    loading={this.state.loadingTeamId === teamId}
-                />
-            );
         }
 
-        teamContents = teamContents.sort(this.teamContentsCompare);
-
-        var openTeamContents = [];
-
         for (const id in this.state.teamListings) {
             if (this.state.teamListings.hasOwnProperty(id) && !isAlreadyMember[id]) {
                 const openTeam = this.state.teamListings[id];
@@ -103,8 +86,8 @@ export default class SelectTeam extends React.Component {
             }
         }
 
-        if (teamMembersCount === 0 && teamContents.length === 0 && openTeamContents.length === 0 && (global.window.mm_config.EnableTeamCreation === 'true' || isSystemAdmin)) {
-            teamContents = (
+        if (openTeamContents.length === 0 && (global.window.mm_config.EnableTeamCreation === 'true' || isSystemAdmin)) {
+            openTeamContents = (
                 <div className='signup-team-dir-err'>
                     <div>
                         <FormattedMessage
@@ -114,8 +97,8 @@ export default class SelectTeam extends React.Component {
                     </div>
                 </div>
             );
-        } else if (teamMembersCount === 0 && teamContents.length === 0 && openTeamContents.length === 0) {
-            teamContents = (
+        } else if (openTeamContents.length === 0) {
+            openTeamContents = (
                 <div className='signup-team-dir-err'>
                     <div>
                         <FormattedMessage
@@ -125,42 +108,25 @@ export default class SelectTeam extends React.Component {
                     </div>
                 </div>
             );
-        } else if (teamContents.length === 0 && openTeamContents.length > 0) {
-            teamContents = null;
         }
 
-        if (teamContents) {
-            content = (
-                <div className='signup__content'>
-                    <h4>
-                        <FormattedMessage
-                            id='signup_team.choose'
-                            defaultMessage='Your teams:'
-                        />
-                    </h4>
-                    <div className='signup-team-all'>
-                        {teamContents}
-                    </div>
-                </div>
-            );
+        if (Array.isArray(openTeamContents)) {
+            openTeamContents = openTeamContents.sort(this.teamContentsCompare);
         }
 
-        var openContent;
-        if (openTeamContents.length > 0) {
-            openContent = (
-                <div className='signup__content'>
-                    <h4>
-                        <FormattedMessage
-                            id='signup_team.join_open'
-                            defaultMessage='Teams you can join: '
-                        />
-                    </h4>
-                    <div className='signup-team-all'>
-                        {openTeamContents.sort(this.teamContentsCompare)}
-                    </div>
+        let openContent = (
+            <div className='signup__content'>
+                <h4>
+                    <FormattedMessage
+                        id='signup_team.join_open'
+                        defaultMessage='Teams you can join: '
+                    />
+                </h4>
+                <div className='signup-team-all'>
+                    {openTeamContents}
                 </div>
-            );
-        }
+            </div>
+        );
 
         if (!this.state.loaded) {
             openContent = <LoadingScreen/>;
@@ -177,7 +143,7 @@ export default class SelectTeam extends React.Component {
         }
 
         let teamSignUp;
-        if (isSystemAdmin || (global.window.mm_config.EnableTeamCreation === 'true' && !UserAgent.isMobileApp())) {
+        if (isSystemAdmin || global.window.mm_config.EnableTeamCreation === 'true') {
             teamSignUp = (
                 <div className='margin--extra'>
                     <Link
@@ -197,7 +163,7 @@ export default class SelectTeam extends React.Component {
         }
 
         let adminConsoleLink;
-        if (isSystemAdmin) {
+        if (isSystemAdmin && !UserAgent.isMobileApp()) {
             adminConsoleLink = (
                 <div className='margin--extra hidden-xs'>
                     <Link
@@ -225,19 +191,30 @@ export default class SelectTeam extends React.Component {
             );
         }
 
+        let headerButton;
+        if (this.state.teamMembers.length) {
+            headerButton = (
+                <Link to='/'>
+                    <span className='fa fa-chevron-left'/>
+                    <FormattedMessage id='web.header.back'/>
+                </Link>
+            );
+        } else {
+            headerButton = (
+                <a
+                    href='#'
+                    onClick={GlobalActions.emitUserLoggedOutEvent}
+                >
+                    <span className='fa fa-chevron-left'/>
+                    <FormattedMessage id='web.header.logout'/>
+                </a>
+            );
+        }
         return (
             <div>
                 <ErrorBar/>
                 <div className='signup-header'>
-                    <a
-                        href='#'
-                        onClick={GlobalActions.emitUserLoggedOutEvent}
-                    >
-                        <span className='fa fa-chevron-left'/>
-                        <FormattedMessage
-                            id='navbar_dropdown.logout'
-                        />
-                    </a>
+                    {headerButton}
                 </div>
                 <div className='col-sm-12'>
                     <div className={'signup-team__container'}>
@@ -249,7 +226,6 @@ export default class SelectTeam extends React.Component {
                         <h4 className='color--light'>
                             {description}
                         </h4>
-                        {content}
                         {openContent}
                         {teamSignUp}
                         {adminConsoleLink}