Mm 91 add active status to header icon (#96)

* MM-91/add active status to header icon

* #MM-91/add active class to span tag inside button wrap

* MM-91/Response to reviewer comments

* MM-91/Response to second reviewer comments

* MM-91/Response to reviewer comment

* MM-91/Response to PR review comment, naming adjustment and incorporate selectors in mapping state

webapp/src/action_types.js

@@ -7,3 +7,4 @@ export const GET_OUT_ISSUES = pluginId + '_get_out_issues';
 export const GET_IN_ISSUES = pluginId + '_get_in_issues';
 export const RECEIVED_SHOW_RHS_ACTION = pluginId + '_show_rhs';
 export const UPDATE_RHS_STATE = pluginId + '_update_rhs_state';
+export const SET_RHS_VISIBLE = pluginId + '_set_rhs_visible';

webapp/src/actions.js

@@ -3,7 +3,7 @@ import {Client4} from 'mattermost-redux/client';
 import * as UserActions from 'mattermost-redux/actions/users';
 
 import {id as pluginId} from './manifest';
-import {OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL, RECEIVED_SHOW_RHS_ACTION, GET_ISSUES, GET_IN_ISSUES, GET_OUT_ISSUES, UPDATE_RHS_STATE} from './action_types';
+import {OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL, RECEIVED_SHOW_RHS_ACTION, GET_ISSUES, GET_IN_ISSUES, GET_OUT_ISSUES, UPDATE_RHS_STATE, SET_RHS_VISIBLE} from './action_types';
 
 export const openRootModal = (postID) => (dispatch) => {
     dispatch({
@@ -29,6 +29,13 @@ export function setShowRHSAction(showRHSPluginAction) {
     };
 }
 
+export function setRhsVisible(payload) {
+    return {
+        type: SET_RHS_VISIBLE,
+        payload,
+    };
+}
+
 export function updateRhsState(rhsState) {
     return {
         type: UPDATE_RHS_STATE,
@@ -142,4 +149,4 @@ export function autocompleteUsers(username) {
         const {data} = await doDispatch(UserActions.autocompleteUsers(username));
         return data;
     };
-}
+}

webapp/src/components/channel_header_button/channel_header_button.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+type Props = {
+    shouldHighlight: boolean,
+};
+
+export default function ChannelHeaderButton(props: Props) {
+    return (
+        <span className={props.shouldHighlight ? 'channel-header__icon--active' : ''} >
+            <i className='icon fa fa-list '/>
+        </span>
+    );
+}

webapp/src/components/channel_header_button/index.js

@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { isRhsVisible } from 'selectors';
+
+import {showRHSPlugin} from 'actions';
+
+import ChannelHeaderButton from './channel_header_button';
+
+function mapStateToProps(state) {
+    return {
+        shouldHighlight: isRhsVisible(state),
+    };
+}
+
+function mapDispatchToProp(dispatch) {
+    return {
+        actions: bindActionCreators({
+            showRHSPlugin,
+        }, dispatch),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProp)(ChannelHeaderButton);

webapp/src/components/sidebar_right/index.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
 import {getIssues, getInIssues, getOutIssues, getSiteURL} from '../../selectors';
-import {remove, list, openRootModal, complete, bump, accept} from '../../actions';
+import {remove, list, openRootModal, complete, bump, accept, setRhsVisible} from '../../actions';
 
 import SidebarRight from './sidebar_right.jsx';
 
@@ -28,6 +28,7 @@ function mapDispatchToProps(dispatch) {
             bump,
             list,
             openRootModal,
+            setVisible: setRhsVisible,
         }, dispatch),
     };
 }

webapp/src/components/sidebar_right/sidebar_right.jsx

@@ -52,6 +52,7 @@ export default class SidebarRight extends React.PureComponent {
             bump: PropTypes.func.isRequired,
             list: PropTypes.func.isRequired,
             openRootModal: PropTypes.func.isRequired,
+            setVisible: PropTypes.func.isRequired,
         }).isRequired,
     };
 
@@ -83,6 +84,11 @@ export default class SidebarRight extends React.PureComponent {
         this.props.actions.list(false, 'my');
         this.props.actions.list(false, 'in');
         this.props.actions.list(false, 'out');
+        this.props.actions.setVisible(true);
+    }
+
+    componentWillUnmount() {
+        this.props.actions.setVisible(false);
     }
 
     componentDidUpdate(prevProps) {

webapp/src/index.js

@@ -9,6 +9,7 @@ import { openRootModal, list, setShowRHSAction } from './actions';
 import reducer from './reducer';
 import PostTypeTodo from './components/post_type_todo';
 import TeamSidebar from './components/team_sidebar';
+import ChannelHeaderButton from './components/channel_header_button';
 
 let activityFunc;
 let lastActivityTime = Number.MAX_SAFE_INTEGER;
@@ -28,8 +29,7 @@ export default class Plugin {
 
         const { showRHSPlugin } = registry.registerRightHandSidebarComponent(SidebarRight, 'Todo List');
         store.dispatch(setShowRHSAction(() => store.dispatch(showRHSPlugin)));
-
-        registry.registerChannelHeaderButtonAction(<i className='icon fa fa-list'/>, () => store.dispatch(showRHSPlugin), 'Todo', 'Open your list of Todo issues.');
+        registry.registerChannelHeaderButtonAction(<ChannelHeaderButton/>, () => store.dispatch(showRHSPlugin), 'Todo', 'Open your list of Todo issues.');
 
         const refresh = () => {
             store.dispatch(list(false, 'my'));

webapp/src/reducer.js

@@ -1,6 +1,6 @@
 import {combineReducers} from 'redux';
 
-import {OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL, GET_ISSUES, GET_IN_ISSUES, GET_OUT_ISSUES, RECEIVED_SHOW_RHS_ACTION, UPDATE_RHS_STATE} from './action_types';
+import {OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL, GET_ISSUES, GET_IN_ISSUES, GET_OUT_ISSUES, RECEIVED_SHOW_RHS_ACTION, UPDATE_RHS_STATE, SET_RHS_VISIBLE} from './action_types';
 
 const rootModalVisible = (state = false, action) => {
     switch (action.type) {
@@ -69,6 +69,15 @@ function rhsState(state = '', action) {
     }
 }
 
+function isRhsVisible(state = false, action) {
+    switch (action.type) {
+    case SET_RHS_VISIBLE:
+        return action.payload;
+    default:
+        return state;
+    }
+}
+
 export default combineReducers({
     rootModalVisible,
     postID,
@@ -77,4 +86,5 @@ export default combineReducers({
     outIssues,
     rhsState,
     rhsPluginAction,
+    isRhsVisible,
 });

webapp/src/selectors.js

@@ -46,3 +46,5 @@ export const getSiteURL = () => {
 
     return siteURL;
 };
+
+export const isRhsVisible = (state) => getPluginState(state).isRhsVisible;