From 65205258d246724ce2f4de9e47948c7a1bfc6177 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Fri, 22 May 2020 15:39:15 -0400
Subject: [PATCH] MM-24932 Bold LHS active channel manually marked as unread
 (#4332)

---
 .../__snapshots__/channel_item.test.js.snap   | 102 ++++++++++++++++++
 .../channel_item/channel_item.js              |   4 +-
 .../channel_item/channel_item.test.js         |  13 +++
 .../main/channels_list/channel_item/index.js  |  16 +--
 4 files changed, 127 insertions(+), 8 deletions(-)

diff --git a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
index ef6206416..9aa94da83 100644
--- a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
+++ b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
@@ -642,6 +642,108 @@ exports[`ChannelItem should match snapshot for deactivated user and not searchRe
 </Component>
 `;
 
+exports[`ChannelItem should match snapshot for isManualUnread 1`] = `
+<Component
+  onPress={[Function]}
+  underlayColor="rgba(69,120,191,0.5)"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 44,
+        },
+        undefined,
+        null,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <ChannelIcon
+        channelId="channel_id"
+        hasDraft={false}
+        isActive={false}
+        isArchived={false}
+        isBot={false}
+        isInfo={false}
+        isUnread={true}
+        membersCount={1}
+        size={16}
+        status="online"
+        theme={
+          Object {
+            "awayIndicator": "#ffbc42",
+            "buttonBg": "#166de0",
+            "buttonColor": "#ffffff",
+            "centerChannelBg": "#ffffff",
+            "centerChannelColor": "#3d3c40",
+            "codeTheme": "github",
+            "dndIndicator": "#f74343",
+            "errorTextColor": "#fd5960",
+            "linkColor": "#2389d7",
+            "mentionBg": "#ffffff",
+            "mentionBj": "#ffffff",
+            "mentionColor": "#145dbf",
+            "mentionHighlightBg": "#ffe577",
+            "mentionHighlightLink": "#166de0",
+            "newMessageSeparator": "#ff8800",
+            "onlineIndicator": "#06d6a0",
+            "sidebarBg": "#145dbf",
+            "sidebarHeaderBg": "#1153ab",
+            "sidebarHeaderTextColor": "#ffffff",
+            "sidebarText": "#ffffff",
+            "sidebarTextActiveBorder": "#579eff",
+            "sidebarTextActiveColor": "#ffffff",
+            "sidebarTextHoverBg": "#4578bf",
+            "sidebarUnreadText": "#ffffff",
+            "type": "Mattermost",
+          }
+        }
+        type="O"
+      />
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "color": "rgba(255,255,255,0.6)",
+              "flex": 1,
+              "fontFamily": "Open Sans",
+              "fontSize": 16,
+              "lineHeight": 24,
+              "maxWidth": "80%",
+              "paddingRight": 10,
+            },
+            Object {
+              "color": "#ffffff",
+              "fontWeight": "500",
+            },
+          ]
+        }
+      >
+        display_name
+      </Text>
+    </View>
+  </View>
+</Component>
+`;
+
 exports[`ChannelItem should match snapshot for no displayName 1`] = `null`;
 
 exports[`ChannelItem should match snapshot for showUnreadForMsgs 1`] = `null`;
diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.js
index 3ca4df9ba..9ccafa76d 100644
--- a/app/components/sidebars/main/channels_list/channel_item/channel_item.js
+++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.js
@@ -25,6 +25,7 @@ export default class ChannelItem extends PureComponent {
         displayName: PropTypes.string.isRequired,
         isArchived: PropTypes.bool,
         isChannelMuted: PropTypes.bool,
+        isManualUnread: PropTypes.bool,
         currentUserId: PropTypes.string.isRequired,
         isUnread: PropTypes.bool,
         hasDraft: PropTypes.bool,
@@ -67,6 +68,7 @@ export default class ChannelItem extends PureComponent {
             displayName,
             isArchived,
             isChannelMuted,
+            isManualUnread,
             currentUserId,
             isUnread,
             hasDraft,
@@ -122,7 +124,7 @@ export default class ChannelItem extends PureComponent {
 
         if (isActive) {
             extraItemStyle = style.itemActive;
-            extraTextStyle = style.textActive;
+            extraTextStyle = isManualUnread ? style.textUnread : style.textActive;
 
             extraBorder = (
                 <View style={style.borderActive}/>
diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js
index 63664a50c..a317c1e5b 100644
--- a/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js
+++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js
@@ -28,6 +28,7 @@ describe('ChannelItem', () => {
         displayName: 'display_name',
         isChannelMuted: false,
         currentUserId: 'currentUser',
+        isManualUnread: false,
         isUnread: true,
         hasDraft: false,
         mentions: 0,
@@ -206,6 +207,18 @@ describe('ChannelItem', () => {
         expect(wrapper.getElement()).toMatchSnapshot();
     });
 
+    test('should match snapshot for isManualUnread', () => {
+        const wrapper = shallow(
+            <ChannelItem
+                {...baseProps}
+                isManualUnread={true}
+            />,
+            {context: {intl: {formatMessage: jest.fn()}}},
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
     test('Should call onPress', () => {
         const onSelectChannel = jest.fn();
 
diff --git a/app/components/sidebars/main/channels_list/channel_item/index.js b/app/components/sidebars/main/channels_list/channel_item/index.js
index 93258c711..aa8801932 100644
--- a/app/components/sidebars/main/channels_list/channel_item/index.js
+++ b/app/components/sidebars/main/channels_list/channel_item/index.js
@@ -6,8 +6,9 @@ import {connect} from 'react-redux';
 import {General} from '@mm-redux/constants';
 import {
     getCurrentChannelId,
-    makeGetChannel,
     getMyChannelMember,
+    isManuallyUnread,
+    makeGetChannel,
     shouldHideDefaultChannel,
 } from '@mm-redux/selectors/entities/channels';
 import {getTheme, getTeammateNameDisplaySetting} from '@mm-redux/selectors/entities/preferences';
@@ -74,19 +75,20 @@ function makeMapStateToProps() {
         return {
             channel,
             currentChannelId,
-            displayName,
-            isArchived,
-            isChannelMuted: isChannelMuted(member),
             currentUserId,
+            displayName,
             hasDraft: Boolean(channelDraft.draft.trim() || channelDraft?.files?.length),
+            isArchived,
+            isBot,
+            isChannelMuted: isChannelMuted(member),
+            isGuest,
+            isLandscape: isLandscape(state),
+            isManualUnread: isManuallyUnread(state, ownProps.channelId),
             mentions: member ? member.mention_count : 0,
             shouldHideChannel,
             showUnreadForMsgs,
             theme: getTheme(state),
             unreadMsgs,
-            isBot,
-            isLandscape: isLandscape(state),
-            isGuest,
         };
     };
 }