Add pluggable component in mobile channel header (mattermost#412)

* Add pluggable component in mobile channel header

* Fix styling

* Update snapshot

Author: jwilander

components/navbar/navbar.jsx

@@ -40,6 +40,8 @@ import RenameChannelModal from 'components/rename_channel_modal';
 import StatusIcon from 'components/status_icon.jsx';
 import ToggleModalButton from 'components/toggle_modal_button.jsx';
 
+import Pluggable from 'plugins/pluggable';
+
 import NavbarInfoButton from './navbar_info_button.jsx';
 
 export default class Navbar extends React.Component {
@@ -914,6 +916,7 @@ export default class Navbar extends React.Component {
                                 channel={channel}
                                 showEditChannelHeaderModal={this.showEditChannelHeaderModal}
                             />
+                            <Pluggable pluggableName='MobileChannelHeaderButton'/>
                             {channelMenuDropdown}
                         </div>
                     </div>

plugins/docs.json

@@ -33,5 +33,9 @@
     "ChannelHeaderButton": {
         "desc": "A component on the right side of the channel header, beside buttons such as the pinned posts button.",
         "props": {}
+    },
+    "MobileChannelHeaderButton": {
+        "desc": "Same as ChannelHeaderButton, except shown in mobile view when the screen is less than 768 pixels wide.",
+        "props": {}
     }
 }

tests/components/navbar/__snapshots__/navbar.test.jsx.snap

@@ -81,6 +81,9 @@ exports[`components/navbar/Navbar should match snapshot, for private channel 1`]
           }
           showEditChannelHeaderModal={[Function]}
         />
+        <Connect(Pluggable)
+          pluggableName="MobileChannelHeaderButton"
+        />
         <div
           className="navbar-brand"
         >
@@ -442,6 +445,9 @@ exports[`components/navbar/Navbar should match snapshot, if WebRTC is not enable
           }
           showEditChannelHeaderModal={[Function]}
         />
+        <Connect(Pluggable)
+          pluggableName="MobileChannelHeaderButton"
+        />
         <div
           className="navbar-brand"
         >
@@ -804,6 +810,9 @@ exports[`components/navbar/Navbar should match snapshot, if enabled WebRTC and D
           }
           showEditChannelHeaderModal={[Function]}
         />
+        <Connect(Pluggable)
+          pluggableName="MobileChannelHeaderButton"
+        />
         <div
           className="navbar-brand"
         >
@@ -1000,6 +1009,9 @@ exports[`components/navbar/Navbar should match snapshot, if not licensed 1`] = `
           }
           showEditChannelHeaderModal={[Function]}
         />
+        <Connect(Pluggable)
+          pluggableName="MobileChannelHeaderButton"
+        />
         <div
           className="navbar-brand"
         >
@@ -1363,6 +1375,9 @@ exports[`components/navbar/Navbar should match snapshot, valid state 1`] = `
           }
           showEditChannelHeaderModal={[Function]}
         />
+        <Connect(Pluggable)
+          pluggableName="MobileChannelHeaderButton"
+        />
         <div
           className="navbar-brand"
         >