MM-37456 "Threads" item in the sidebar should not scroll (#5575) (#5577)

* Made threads item as static

* Updated snapshot

* Moved from Text to FormattedText

* Updated snapshot .. AGAIN

* Removed 8px margin bottom from threads sidebar item

(cherry picked from commit 2a641afc66)

Co-authored-by: Anurag Shivarathri <anurag6713@gmail.com>

app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap

@@ -4,6 +4,7 @@ exports[`ChannelsList List should match snapshot 1`] = `
 <View
   onLayout={[Function]}
 >
+  <Connect(ThreadsEntry) />
   <SectionList
     contentContainerStyle={
       Object {
@@ -44,6 +45,7 @@ exports[`ChannelsList List should match snapshot with collapsed threads enabled
 <View
   onLayout={[Function]}
 >
+  <Connect(ThreadsEntry) />
   <SectionList
     contentContainerStyle={
       Object {
@@ -79,6 +81,14 @@ exports[`ChannelsList List should match snapshot with collapsed threads enabled
   />
   <UnreadIndicatorIOS
     onPress={[Function]}
+    style={
+      Array [
+        undefined,
+        Object {
+          "marginTop": 70,
+        },
+      ]
+    }
     theme={
       Object {
         "awayIndicator": "#ffbc42",

app/components/sidebars/main/channels_list/list/index.js

@@ -50,7 +50,6 @@ function mapStateToProps(state) {
         sidebarPrefs.sorting,
         true, // The mobile app should always display the Unreads section regardless of user settings (MM-13420)
         sidebarPrefs.favorite_at_top === 'true' && favoriteChannelIds.length,
-        collapsedThreadsEnabled,
     ));
 
     let canJoinPublicChannels = true;

app/components/sidebars/main/channels_list/list/list.js

@@ -41,6 +41,7 @@ export default class List extends PureComponent {
         canJoinPublicChannels: PropTypes.bool.isRequired,
         canCreatePrivateChannels: PropTypes.bool.isRequired,
         canCreatePublicChannels: PropTypes.bool.isRequired,
+        collapsedThreadsEnabled: PropTypes.bool,
         favoriteChannelIds: PropTypes.array.isRequired,
         onSelectChannel: PropTypes.func.isRequired,
         unreadChannelIds: PropTypes.array.isRequired,
@@ -153,12 +154,6 @@ export default class List extends PureComponent {
                 id: t('mobile.channel_list.channels'),
                 defaultMessage: 'CHANNELS',
             };
-        case SidebarSectionTypes.THREADS: // Used only to identity the threads, hence not translating "id: t('...')"
-            return {
-                data: [''],
-                id: 'sidebar.threads',
-                defaultMessage: '',
-            };
         default:
             return {
                 action: this.showCreateChannelOptions,
@@ -321,12 +316,7 @@ export default class List extends PureComponent {
         );
     };
 
-    renderItem = ({item, section}) => {
-        if (section.id === 'sidebar.threads') {
-            return (
-                <ThreadsSidebarEntry/>
-            );
-        }
+    renderItem = ({item}) => {
         const {testID, favoriteChannelIds, unreadChannelIds} = this.props;
         const channelItemTestID = `${testID}.channel_item`;
 
@@ -346,10 +336,6 @@ export default class List extends PureComponent {
         const {intl} = this.context;
         const {action, defaultMessage, id} = section;
 
-        if (id === 'sidebar.threads') {
-            return null;
-        }
-
         const anchor = (id === 'sidebar.types.recent' || id === 'mobile.channel_list.channels');
 
         return (
@@ -414,16 +400,24 @@ export default class List extends PureComponent {
     };
 
     render() {
+        const collapsedThreadsEnabled = true;
         const {testID, styles, theme} = this.props;
         const {sections, showIndicator} = this.state;
 
         const paddingBottom = this.listContentPadding();
+        const indicatorStyle = [styles.above];
+        if (collapsedThreadsEnabled) {
+            indicatorStyle.push({marginTop: 70});
+        }
 
         return (
             <View
                 style={styles.container}
                 onLayout={this.onLayout}
             >
+                {collapsedThreadsEnabled && (
+                    <ThreadsSidebarEntry/>
+                )}
                 <SectionList
                     ref={this.setListRef}
                     sections={sections}
@@ -444,7 +438,7 @@ export default class List extends PureComponent {
                 <UnreadIndicator
                     onPress={this.scrollToTop}
                     theme={theme}
-                    style={styles.above}
+                    style={indicatorStyle}
                     visible={showIndicator}
                 />
                 }

app/components/sidebars/main/threads_entry/threads_entry.tsx

@@ -2,11 +2,11 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect} from 'react';
-import {injectIntl, intlShape} from 'react-intl';
-import {TouchableHighlight, Text, View} from 'react-native';
+import {TouchableHighlight, View} from 'react-native';
 
 import Badge from '@components/badge';
 import CompassIcon from '@components/compass_icon';
+import FormattedText from '@components/formatted_text';
 import {getStyleSheet} from '@components/sidebars/main/channels_list/channel_item/channel_item';
 import {NavigationTypes} from '@constants';
 import EventEmitter from '@mm-redux/utils/event_emitter';
@@ -27,10 +27,9 @@ type Props = {
     };
     currentTeamId: $ID<Team>;
     currentUserId: $ID<UserProfile>;
-    intl: typeof intlShape;
     isUnreadSelected: boolean;
     theme: Theme;
-    threadCount: ThreadsState['counts'];
+    threadCount: ThreadsState['counts'][$ID<Team>];
     viewingGlobalThreads: boolean;
 };
 
@@ -38,7 +37,6 @@ const ThreadsEntry = ({
     actions,
     currentTeamId,
     currentUserId,
-    intl,
     isUnreadSelected,
     theme,
     threadCount,
@@ -97,40 +95,41 @@ const ThreadsEntry = ({
     }, [extraStyle, style, threadCount?.total_unread_mentions, threadCount?.total_unread_threads, viewingGlobalThreads]);
 
     return (
-        <TouchableHighlight
-            underlayColor={changeOpacity(theme.sidebarTextHoverBg, 0.5)}
-            onPress={onPress}
-        >
-            <View style={[style.container, extraStyle.container]}>
-                {border}
-                <View style={itemStyle} >
-                    <View style={extraStyle.iconContainer}>
-                        <CompassIcon
-                            name='message-text-outline'
-                            style={iconStyle}
+        <View style={extraStyle.baseContainer}>
+            <TouchableHighlight
+                underlayColor={changeOpacity(theme.sidebarTextHoverBg, 0.5)}
+                onPress={onPress}
+            >
+                <View style={[style.container, extraStyle.container]}>
+                    {border}
+                    <View style={itemStyle} >
+                        <View style={extraStyle.iconContainer}>
+                            <CompassIcon
+                                name='message-text-outline'
+                                style={iconStyle}
+                            />
+                        </View>
+                        <FormattedText
+                            id='threads'
+                            defaultMessage='Threads'
+                            style={textStyle}
                         />
+                        {badge}
                     </View>
-                    <Text
-                        style={textStyle}
-                        ellipsizeMode='tail'
-                        numberOfLines={1}
-                    >
-                        {intl.formatMessage({
-                            id: 'threads',
-                            defaultMessage: 'Threads',
-                        })}
-                    </Text>
-                    {badge}
                 </View>
-            </View>
-        </TouchableHighlight>
+            </TouchableHighlight>
+        </View>
     );
 };
 
 const getExtraStyleSheet = makeStyleFromTheme((theme: Theme) => {
     return {
-        container: {
+        baseContainer: {
             marginTop: 16,
+            marginBottom: 4,
+        },
+        container: {
+            flex: 0, // Override the existing flex: 1
         },
         iconContainer: {
             alignItems: 'center',
@@ -145,4 +144,4 @@ const getExtraStyleSheet = makeStyleFromTheme((theme: Theme) => {
     };
 });
 
-export default injectIntl(ThreadsEntry);
+export default ThreadsEntry;

app/constants/view.js

@@ -16,7 +16,6 @@ export const SidebarSectionTypes = {
     DIRECT: 'direct',
     RECENT_ACTIVITY: 'recent',
     ALPHA: 'alpha',
-    THREADS: 'threads',
 };
 
 export const NotificationLevels = {

app/mm-redux/selectors/entities/channels.ts

@@ -842,7 +842,7 @@ const hasChannelsChanged = (channels: {type: string;name: string;items: string[]
     return false;
 };
 
-export const getOrderedChannelIds = (state: GlobalState, lastUnreadChannel: Channel|null, grouping: 'by_type' | 'none', sorting: SortingType, unreadsAtTop: boolean, favoritesAtTop: boolean, collapsedThreadsEnabled: boolean) => {
+export const getOrderedChannelIds = (state: GlobalState, lastUnreadChannel: Channel|null, grouping: 'by_type' | 'none', sorting: SortingType, unreadsAtTop: boolean, favoritesAtTop: boolean) => {
     const channels: {type: string;name: string;items: string[]}[] = [];
 
     if (grouping === 'by_type') {
@@ -894,14 +894,6 @@ export const getOrderedChannelIds = (state: GlobalState, lastUnreadChannel: Chan
         });
     }
 
-    if (collapsedThreadsEnabled) {
-        channels.unshift(({
-            type: 'threads',
-            name: 'THREADS',
-            items: [''],
-        }));
-    }
-
     if (hasChannelsChanged(channels)) {
         lastChannels = channels;
     }