From ada8d4863b2c04b932a16a74d84d956d147c90b5 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Mon, 26 Aug 2019 16:19:17 +0200
Subject: [PATCH] Re-render MainSidebar on theme change (#3194)

---
 app/components/sidebars/main/main_sidebar.js  |  3 ++-
 .../sidebars/main/main_sidebar.test.js        | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/components/sidebars/main/main_sidebar.js b/app/components/sidebars/main/main_sidebar.js
index 8fcefd25b..ed92bc04d 100644
--- a/app/components/sidebars/main/main_sidebar.js
+++ b/app/components/sidebars/main/main_sidebar.js
@@ -105,7 +105,7 @@ export default class ChannelSidebar extends Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        const {currentTeamId, deviceWidth, isLandscape, teamsCount} = this.props;
+        const {currentTeamId, deviceWidth, isLandscape, teamsCount, theme} = this.props;
         const {openDrawerOffset, isSplitView, permanentSidebar, show, searching} = this.state;
 
         if (nextState.openDrawerOffset !== openDrawerOffset || nextState.show !== show || nextState.searching !== searching) {
@@ -115,6 +115,7 @@ export default class ChannelSidebar extends Component {
         return nextProps.currentTeamId !== currentTeamId ||
             nextProps.isLandscape !== isLandscape || nextProps.deviceWidth !== deviceWidth ||
             nextProps.teamsCount !== teamsCount ||
+            nextProps.theme !== theme ||
             nextState.isSplitView !== isSplitView ||
             nextState.permanentSidebar !== permanentSidebar;
     }
diff --git a/app/components/sidebars/main/main_sidebar.test.js b/app/components/sidebars/main/main_sidebar.test.js
index 8e6d48f66..da42e1eed 100644
--- a/app/components/sidebars/main/main_sidebar.test.js
+++ b/app/components/sidebars/main/main_sidebar.test.js
@@ -57,5 +57,28 @@ describe('MainSidebar', () => {
         await wrapper.instance().handlePermanentSidebar();
 
         expect(wrapper.state('permanentSidebar')).toBeDefined();
+
+        // Reset to false for subsequent tests
+        DeviceTypes.IS_TABLET = false;
+    });
+
+    test('should re-render when the theme changes', () => {
+        const theme = Preferences.THEMES.default;
+        const newTheme = Preferences.THEMES.organization;
+        const props = {
+            ...baseProps,
+            theme,
+        };
+
+        const wrapper = shallow(
+            <MainSidebar {...props}/>
+        );
+
+        const instance = wrapper.instance();
+        instance.render = jest.fn();
+
+        expect(instance.render).toHaveBeenCalledTimes(0);
+        wrapper.setProps({theme: newTheme});
+        expect(instance.render).toHaveBeenCalledTimes(1);
     });
 });