Feature: support Todo Sidebar Buttons both in Team Sidebar and Sideba…

.gitignore

@@ -2,3 +2,4 @@ dist
 .DS_Store
 webapp/src/manifest.ts
 server/manifest.go
+bin

plugin.json

@@ -22,13 +22,13 @@
         "footer": "",
         "settings": [
             {
-                "key": "hide_team_sidebar",
-                "display_name": "Hide team sidebar buttons:",
+                "key": "hide_sidebar_buttons",
+                "display_name": "Hide sidebar buttons:",
                 "type": "bool",
-                "help_text": "When true, the buttons in the team sidebar on the left toolbar will be hidden.",
+                "help_text": "When true, the buttons in the sidebar header (or team sidebar when applicable) will be hidden.",
                 "placeholder": "",
                 "default": null
             }
         ]
     }
-}
+}

server/configuration.go

@@ -20,7 +20,7 @@ import (
 // If you add non-reference types to your configuration struct, be sure to rewrite Clone as a deep
 // copy appropriate for your types.
 type configuration struct {
-	HideTeamSidebar bool `json:"hide_team_sidebar"`
+	HideSidebarButtons bool `json:"hide_sidebar_buttons"`
 }
 
 // Clone shallow copies the configuration. Your implementation may require a deep copy if
@@ -77,7 +77,7 @@ func (p *Plugin) setConfiguration(configuration *configuration) {
 
 // Check whether client configuration are different
 func (p *Plugin) hasClientConfigChanged(prev *configuration, current *configuration) bool {
-	return prev == nil || prev.HideTeamSidebar != current.HideTeamSidebar
+	return prev == nil || prev.HideSidebarButtons != current.HideSidebarButtons
 }
 
 // OnConfigurationChange is invoked when configuration changes may have been made.

server/plugin.go

@@ -618,9 +618,9 @@ func (p *Plugin) handleConfig(w http.ResponseWriter, r *http.Request) {
 	if p.configuration != nil {
 		// retrieve client only configurations
 		clientConfig := struct {
-			HideTeamSidebar bool `json:"hide_team_sidebar"`
+			HideSidebarButtons bool `json:"hide_team_sidebar"`
 		}{
-			HideTeamSidebar: p.configuration.HideTeamSidebar,
+			HideSidebarButtons: p.configuration.HideSidebarButtons,
 		}
 
 		configJSON, err := json.Marshal(clientConfig)
@@ -649,7 +649,7 @@ func (p *Plugin) sendRefreshEvent(userID string, lists []string) {
 // Publish a WebSocket event to update the client config of the plugin on the webapp end.
 func (p *Plugin) sendConfigUpdateEvent() {
 	clientConfigMap := map[string]interface{}{
-		"hide_team_sidebar": p.configuration.HideTeamSidebar,
+		"hide_sidebar_buttons": p.configuration.HideSidebarButtons,
 	}
 
 	p.API.PublishWebSocketEvent(

webapp/src/action_types.js

@@ -17,4 +17,4 @@ export const GET_ALL_ISSUES = pluginId + '_get_all_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';
-export const SET_HIDE_TEAM_SIDEBAR_BUTTONS = pluginId + '_set_hide_team_sidebar';
+export const SET_HIDE_SIDEBAR_BUTTONS = pluginId + '_set_hide_sidebar_buttons';

webapp/src/actions.js

@@ -10,7 +10,7 @@ import {
     RECEIVED_SHOW_RHS_ACTION,
     UPDATE_RHS_STATE,
     SET_RHS_VISIBLE,
-    SET_HIDE_TEAM_SIDEBAR_BUTTONS,
+    SET_HIDE_SIDEBAR_BUTTONS,
     GET_ASSIGNEE,
     REMOVE_ASSIGNEE,
     OPEN_ADD_CARD,
@@ -194,9 +194,9 @@ export function autocompleteUsers(username) {
     };
 }
 
-export function setHideTeamSidebar(payload) {
+export function setHideSidebarButtons(payload) {
     return {
-        type: SET_HIDE_TEAM_SIDEBAR_BUTTONS,
+        type: SET_HIDE_SIDEBAR_BUTTONS,
         payload,
     };
 }
@@ -212,7 +212,7 @@ export const updateConfig = () => async (dispatch, getState) => {
         return {error};
     }
 
-    dispatch(setHideTeamSidebar(data.hide_team_sidebar));
+    dispatch(setHideSidebarButtons(data.hide_sidebar_buttons));
 
     return {data};
 };

webapp/src/components/sidebar_header/index.js

@@ -0,0 +1,18 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {isButtonSidebarVisible} from 'selectors';
+
+import SidebarHeader from './sidebar_header.jsx';
+
+function mapStateToProps(state) {
+    const members = state.entities.teams.myMembers || {};
+    return {
+        show: Object.keys(members).length > 1,
+        visible: isButtonSidebarVisible(state),
+    };
+}
+
+export default connect(mapStateToProps)(SidebarHeader);

webapp/src/components/sidebar_header/sidebar_header.jsx

@@ -0,0 +1,28 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import SidebarButtons from '../sidebar_buttons';
+
+export default class SidebarHeader extends React.PureComponent {
+    static propTypes = {
+        show: PropTypes.bool.isRequired,
+        theme: PropTypes.object.isRequired,
+        visible: PropTypes.bool.isRequired,
+    };
+
+    render() {
+        if (this.props.show || !this.props.visible) {
+            return null;
+        }
+
+        return (
+            <SidebarButtons
+                theme={this.props.theme}
+                isTeamSidebar={false}
+            />
+        );
+    }
+}

webapp/src/components/team_sidebar/index.js

@@ -3,15 +3,15 @@
 
 import {connect} from 'react-redux';
 
-import {isTeamSidebarVisible} from 'selectors';
+import {isButtonSidebarVisible} from 'selectors';
 
 import TeamSidebar from './team_sidebar.jsx';
 
 function mapStateToProps(state) {
     const members = state.entities.teams.myMembers || {};
     return {
         show: Object.keys(members).length > 1,
-        visible: isTeamSidebarVisible(state),
+        visible: isButtonSidebarVisible(state),
     };
 }
 

webapp/src/index.js

@@ -6,9 +6,10 @@ import Root from './components/root';
 import AssigneeModal from './components/assignee_modal';
 import SidebarRight from './components/sidebar_right';
 
-import {openAddCard, setShowRHSAction, telemetry, updateConfig, setHideTeamSidebar, fetchAllIssueLists} from './actions';
+import {openAddCard, setShowRHSAction, telemetry, updateConfig, setHideSidebarButtons, fetchAllIssueLists} from './actions';
 import reducer from './reducer';
 import PostTypeTodo from './components/post_type_todo';
+import SidebarHeader from './components/sidebar_header';
 import TeamSidebar from './components/team_sidebar';
 import ChannelHeaderButton from './components/channel_header_button';
 import {getPluginServerRoute} from './selectors';
@@ -25,7 +26,7 @@ export default class Plugin {
         registry.registerReducer(reducer);
         registry.registerRootComponent(Root);
         registry.registerRootComponent(AssigneeModal);
-
+        registry.registerLeftSidebarHeaderComponent(SidebarHeader);
         registry.registerBottomTeamSidebarComponent(TeamSidebar);
 
         registry.registerPostDropdownMenuAction(
@@ -65,7 +66,7 @@ export default class Plugin {
 
         // register websocket event to track config changes
         const configUpdate = ({data}) => {
-            store.dispatch(setHideTeamSidebar(data.hide_team_sidebar));
+            store.dispatch(setHideSidebarButtons(data.hide_sidebar_buttons));
         };
 
         registry.registerWebSocketEventHandler(`custom_${pluginId}_config_update`, configUpdate);

webapp/src/reducer.js

@@ -15,7 +15,7 @@ import {
     RECEIVED_SHOW_RHS_ACTION,
     UPDATE_RHS_STATE,
     SET_RHS_VISIBLE,
-    SET_HIDE_TEAM_SIDEBAR_BUTTONS,
+    SET_HIDE_SIDEBAR_BUTTONS,
 } from './action_types';
 
 const addCardVisible = (state = false, action) => {
@@ -120,9 +120,9 @@ function isRhsVisible(state = false, action) {
     }
 }
 
-function isTeamSidebarHidden(state = false, action) {
+function isButtonSidebarHidden(state = false, action) {
     switch (action.type) {
-    case SET_HIDE_TEAM_SIDEBAR_BUTTONS:
+    case SET_HIDE_SIDEBAR_BUTTONS:
         return action.payload;
     default:
         return state;
@@ -140,5 +140,5 @@ export default combineReducers({
     rhsState,
     rhsPluginAction,
     isRhsVisible,
-    isTeamSidebarHidden,
+    isButtonSidebarHidden,
 });

webapp/src/selectors.js

@@ -58,4 +58,4 @@ export const getPluginServerRoute = (state) => {
 };
 
 export const isRhsVisible = (state) => getPluginState(state).isRhsVisible;
-export const isTeamSidebarVisible = (state) => !getPluginState(state).isTeamSidebarHidden;
+export const isButtonSidebarVisible = (state) => !getPluginState(state).isButtonSidebarHidden;