Bug 1497931 - Finish bootstrap to reactstrap conversion (#5852)

convert Login menu to reactstrap
mozilla · Jan 21, 2020 · 2e75310 · 2e75310
1 parent 23fa73f
commit 2e75310
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 93 deletions.
diff --git a/ui/css/treeherder-navbar.css b/ui/css/treeherder-navbar.css
@@ -30,7 +30,8 @@
   min-width: inherit;
 }
 
-.dropdown-menu > li > a {
+.dropdown-menu > li > a,
+.dropdown-menu a {
   font-weight: normal;
   line-height: 1.42857143;
   color: #333;
@@ -91,17 +92,6 @@ label.dropdown-item {
   padding-right: 8px;
 }
 
-.nav-user-icon {
-  padding: 1px 3px 2px 4px;
-  background: linear-gradient(#44adf3, #287cc2);
-}
-
-.nav-user-icon span:first-child {
-  margin: 0 auto;
-  font-size: 12px;
-  color: #fff;
-}
-
 .th-context-navbar {
   background-color: #354048;
   overflow: visible;

diff --git a/ui/shared/HelpMenu.jsx b/ui/shared/HelpMenu.jsx
@@ -12,6 +12,12 @@ import {
   faQuestion,
   faQuestionCircle,
 } from '@fortawesome/free-solid-svg-icons';
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';
 
 const menuItems = [
   {
@@ -58,46 +64,33 @@ const menuItems = [
   },
 ];
 
-export default function HelpMenu() {
-  return (
-    <span id="help-menu" className="dropdown">
-      <button
-        id="helpLabel"
-        type="button"
+const HelpMenu = () => (
+  <UncontrolledDropdown>
+    <DropdownToggle className="btn-view-nav nav-menu-btn" nav caret>
+      <FontAwesomeIcon
+        icon={faQuestionCircle}
+        className="lightgray mr-1"
         title="Treeherder help"
-        aria-label="Treeherder help"
-        data-toggle="dropdown"
-        className="btn btn-view-nav nav-help-btn dropdown-toggle"
-      >
-        <FontAwesomeIcon
-          icon={faQuestionCircle}
-          className="lightgray mr-1"
-          title="Treeherder help"
-        />
-      </button>
-      <ul
-        className="dropdown-menu nav-dropdown-menu-right icon-menu"
-        role="menu"
-        aria-labelledby="helpLabel"
-      >
-        {menuItems.map(item => (
-          <li key={item.text}>
-            <a
-              href={item.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="dropdown-item"
-            >
-              <FontAwesomeIcon
-                icon={item.icon}
-                fixedWidth
-                className="midgray mr-2"
-              />
-              {item.text}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </span>
-  );
-}
+      />
+    </DropdownToggle>
+    <DropdownMenu right className="icon-menu">
+      {menuItems.map(item => (
+        <DropdownItem
+          tag="a"
+          target="_blank"
+          rel="noopener noreferrer"
+          href={item.href}
+        >
+          <FontAwesomeIcon
+            icon={item.icon}
+            fixedWidth
+            className="midgray mr-2"
+          />
+          {item.text}
+        </DropdownItem>
+      ))}
+    </DropdownMenu>
+  </UncontrolledDropdown>
+);
+
+export default HelpMenu;
diff --git a/ui/shared/auth/Login.jsx b/ui/shared/auth/Login.jsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import {
+  Button,
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';
 import isEqual from 'lodash/isEqual';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
@@ -99,45 +105,30 @@ class Login extends React.Component {
 
     return (
       <React.Fragment>
-        {user.isLoggedIn && (
-          <span className="dropdown">
-            <Button
-              id="logoutLabel"
-              title={`Logged in as: ${user.email}`}
-              data-toggle="dropdown"
-              className="btn btn-view-nav"
+        {user && user.isLoggedIn ? (
+          <UncontrolledDropdown>
+            <DropdownToggle
+              color="transparent"
+              className="navbar-link nav-menu-btn"
+              nav
+              caret
             >
-              <div className="dropdown-toggle">
-                <span className="nav-user-icon mr-1 rounded">
-                  <FontAwesomeIcon icon={faUser} size="xs" title="User" />
-                </span>
-                <span>{user.fullName}</span>
-              </div>
-            </Button>
-            <ul
-              className="dropdown-menu nav-dropdown-menu-right"
-              role="menu"
-              aria-labelledby="logoutLabel"
-            >
-              <li>
-                <Button
-                  onClick={this.logout}
-                  className="dropdown-item"
-                  type="submit"
-                >
-                  Logout
-                </Button>
-              </li>
-            </ul>
-          </span>
-        )}
-        {!user.isLoggedIn && (
-          <Button
-            className="btn btn-view-nav nav-menu-btn"
-            onClick={this.login}
-            type="submit"
-          >
-            {' '}
+              <span
+                className="bg-info px-1 mr-1 rounded text-light"
+                aria-label={`Logged in as: ${user.email}`}
+              >
+                <FontAwesomeIcon icon={faUser} size="xs" />
+              </span>
+              <span>{user.fullName}</span>
+            </DropdownToggle>
+            <DropdownMenu right>
+              <DropdownItem tag="a" onClick={this.logout}>
+                Logout
+              </DropdownItem>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        ) : (
+          <Button onClick={this.login} className="btn-view-nav nav-menu-btn">
             Login / Register
           </Button>
         )}