[MM-10017] Added support to override right-hand sidebar (#31)

* Added RHS component that is triggered by the channel header action button

* Added plugin name as title for RHS and passed plugin id to RHS action

* Updated Readme with RHS Component documentation

* Update typo webapp/README.md

Co-Authored-By: Christopher Speller <crspeller@gmail.com>

* Added binding to RHS plug action

* Receive RHS action from registry function

* Updated name of action received for RHS

* Removed unused import

webapp/README.md

@@ -88,7 +88,7 @@ This plugin registers a bottom team sidebar component displaying a plugin icon:
 
 ## Channel Header Button Action
 
-This plugin registers a channel header button action displaying a plugin icon that, when clicked, triggers the root component:
+This plugin registers a channel header button action displaying a plugin icon that, when clicked, triggers the right-hand sidebar component:
 
 ![channel header button](docs/channel_header_button.png)
 
@@ -119,4 +119,10 @@ This plugin registers a file upload action that, when clicked, triggers the root
 ## Link Tooltip
 
 This plugin registers a link tooltip component, whose content is fully customizable. It is displayed when the mouse cursor hovers over a link in a post.
-![link tooltip](docs/link_tooltip.png)
+![link tooltip](docs/link_tooltip.png)
+
+## Right-Hand Sidebar
+
+This plugin registers a right-hand sidebar component, whose content is fully customizable and it is triggered by calling an action where required. In this demo plugin, it is triggered by the Channel Header Action Button.
+
+![right-hand sidebar](docs/right_hand_sidebar.png)

webapp/i18n/en.json

@@ -4,6 +4,7 @@
   "plugin.upload": "Upload using Demo Plugin",
   "root.clicktoclose": "Click anywhere to close.",
   "root.triggered": "You have triggered the root component of the demo plugin.",
+  "rhs.triggered": "You have triggered the right-hand sidebar component of the demo plugin.",
   "sidebar.demo": "Demo Plugin:",
   "sidebar.disabled": "Disabled",
   "sidebar.enabled": "Enabled",

webapp/i18n/es.json

@@ -4,6 +4,7 @@
   "plugin.upload": "Subir usando el plugin demo",
   "root.clicktoclose": "Haga clic en cualquier lugar para cerrar.",
   "root.triggered": "Has activado el componente raíz del complemento de demostración.",
+  "rhs.triggered": "Has activado el componente del panel derecho del complemento de demostración",
   "sidebar.demo": "Complemento de Demostración:",
   "sidebar.disabled": "Discapacitado",
   "sidebar.enabled": "Habilitado",

webapp/src/actions.js

@@ -16,7 +16,6 @@ export const closeRootModal = () => (dispatch) => {
 };
 
 export const mainMenuAction = openRootModal;
-export const channelHeaderButtonAction = openRootModal;
 export const fileUploadMethodAction = openRootModal;
 export const postDropdownMenuAction = openRootModal;
 

webapp/src/components/right_hand_sidebar/index.js

@@ -0,0 +1,11 @@
+import {connect} from 'react-redux';
+
+import {isEnabled} from 'selectors';
+
+import RHSView from './rhs_view';
+
+const mapStateToProps = (state) => ({
+    enabled: isEnabled(state),
+});
+
+export default connect(mapStateToProps)(RHSView);

webapp/src/components/right_hand_sidebar/rhs_view.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {FormattedMessage} from 'react-intl';
+
+export default class RHSView extends React.PureComponent {
+    render() {
+        return (
+            <div style={style.rhs}>
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <FormattedMessage
+                    id='rhs.triggered'
+                    defaultMessage='You have triggered the right-hand sidebar component of the demo plugin.'
+                />
+                <br/>
+                <br/>
+                <br/>
+                <br/>
+                <FormattedMessage
+                    id='demo.testintl'
+                    defaultMessage='This is the default string'
+                />
+            </div>
+        );
+    }
+}
+
+const style = {
+    rhs: {
+        padding: '10px',
+    },
+};

webapp/src/plugin.jsx

@@ -14,6 +14,8 @@ import LeftSidebarHeader from './components/left_sidebar_header';
 import LinkTooltip from './components/link_tooltip';
 import UserAttributes from './components/user_attributes';
 import UserActions from './components/user_actions';
+import RHSView from './components/right_hand_sidebar';
+
 import PostType from './components/post_type';
 import {
     MainMenuMobileIcon,
@@ -22,7 +24,6 @@ import {
 } from './components/icons';
 import {
     mainMenuAction,
-    channelHeaderButtonAction,
     fileUploadMethodAction,
     postDropdownMenuAction,
     websocketStatusChange,
@@ -50,10 +51,16 @@ export default class DemoPlugin {
         registry.registerBottomTeamSidebarComponent(
             BottomTeamSidebar,
         );
+        const {showRHSPlugin} = registry.registerRightHandSidebarComponent(
+            RHSView,
+            <FormattedMessage
+                id='plugin.name'
+                defaultMessage='Demo Plugin'
+            />);
 
         registry.registerChannelHeaderButtonAction(
             <ChannelHeaderButtonIcon/>,
-            () => store.dispatch(channelHeaderButtonAction()),
+            () => store.dispatch(showRHSPlugin),
             <FormattedMessage
                 id='plugin.name'
                 defaultMessage='Demo Plugin'