Re-render MainSidebar on theme change (#3194)

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;
     }

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);
     });
 });