MM-15652 Render header plugin correctly in mobile view

[hmhealey]

This seems to be a regression caused by #2933. Originally, it rendered the button in both the header and dropdown, then it rendered the text item in both places. Now, it'll render the button in the header and the text in the dropdown.

Ticket Link

https://mattermost.atlassian.net/browse/MM-15652

[jespino]

LGTM

[lieut-data]

@hmhealey, this basically looks like a revert of the original PR, but maybe with some differences? Is there a way to highlight the net changes?

[hmhealey]

Here's the diff from before Jesús's changes. Basically, the original version rendered a single item as a button and multiple items as a list. It now renders multiple items the same, but a single item is a button if it's in the header or a list if it's in the dropdown.

harrison-mm2:mattermost-webapp harrison$ git diff 2e6c8150f17d23f7d3fe19121170de70a777b432^ -- plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx
diff --git a/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx b/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx
index 410facf28..038195572 100644
--- a/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx
+++ b/plugins/mobile_channel_header_plug/mobile_channel_header_plug.jsx
@@ -26,38 +26,43 @@ export default class MobileChannelHeaderPlug extends React.PureComponent {
         theme: PropTypes.object.isRequired,
     }
 
-    createButton(plug) {
-        return (
-            <li className='flex-parent--center'>
-                <button
-                    className='navbar-toggle navbar-right__icon'
-                    onClick={() => this.fireAction(plug)}
-                >
-                    <span className='icon navbar-plugin-button'>
-                        {plug.icon}
-                    </span>
-                </button>
-            </li>
-        );
-    }
+    createButton = (plug) => {
+        const onClick = () => this.fireAction(plug);
 
-    createList(plugs) {
-        return plugs.map((plug) => {
+        if (this.props.isDropdown) {
             return (
                 <li
                     key={'mobileChannelHeaderItem' + plug.id}
                     role='presentation'
+                    className='MenuItem'
                 >
                     <a
                         role='menuitem'
                         href='#'
-                        onClick={() => this.fireAction(plug)}
+                        onClick={onClick}
                     >
                         {plug.dropdownText}
                     </a>
                 </li>
             );
-        });
+        }
+
+        return (
+            <li className='flex-parent--center'>
+                <button
+                    className='navbar-toggle navbar-right__icon'
+                    onClick={onClick}
+                >
+                    <span className='icon navbar-plugin-button'>
+                        {plug.icon}
+                    </span>
+                </button>
+            </li>
+        );
+    }
+
+    createList(plugs) {
+        return plugs.map(this.createButton);
     }
 
     fireAction(plug) {

This reverts Jesús's changes when you have a single item outside of the dropdown, but it keeps them for a single item inside of the dropdown

[lieut-data]

Thanks, @hmhealey!