Bug 1514668 - Use shared LogoMenu across IFV and Perfherder (#4435)

Also convert LogoMenu.jsx to Reactstrap dropdown and use it in IFV navbar

tests/selenium/pages/base.py

@@ -14,7 +14,7 @@ class Base(Page):
         _root_locator = (By.ID, 'th-global-navbar')
         _app_menu_locator = (By.ID, 'th-logo')
         _app_logo_locator = (By.CSS_SELECTOR, '#th-logo img')
-        _switch_app_locator = (By.CSS_SELECTOR, '#th-logo + ul > li a')
+        _switch_app_locator = (By.CSS_SELECTOR, '#th-logo + div > a')
 
         @property
         def active_app(self):

ui/intermittent-failures/Navigation.jsx

@@ -8,6 +8,8 @@ import {
   DropdownToggle,
 } from 'reactstrap';
 
+import LogoMenu from '../shared/LogoMenu';
+
 import DropdownMenuItems from './DropdownMenuItems';
 import { treeOptions } from './constants';
 
@@ -25,7 +27,10 @@ export default class Navigation extends React.Component {
     const { updateState, tree } = this.props;
     return (
       <Navbar expand fixed="top" className="top-navbar">
-        <span className="lightorange">Intermittent Failures View </span>
+        <LogoMenu
+          menuText="Intermittent Failures View"
+          colorClass="lightorange"
+        />
         <Collapse isOpen={this.state.isOpen} navbar>
           <Nav navbar />
           <UncontrolledDropdown>

ui/intermittent-failures/index.jsx

@@ -5,6 +5,7 @@ import 'font-awesome/css/font-awesome.css';
 import 'react-table/react-table.css';
 
 import '../css/treeherder-global.css';
+import '../css/treeherder-navbar.css';
 import '../css/intermittent-failures.css';
 import App from './App';
 

ui/js/perf.js

@@ -6,6 +6,7 @@ import 'ng-text-truncate-2';
 import { react2angular } from 'react2angular/index.es2015';
 
 import Login from '../shared/auth/Login';
+import LogoMenu from '../shared/LogoMenu';
 
 import treeherderModule from './treeherder';
 
@@ -18,5 +19,6 @@ const perf = angular.module('perf', [
 ]);
 
 perf.component('login', react2angular(Login, ['user', 'setUser'], []));
+perf.component('logoMenu', react2angular(LogoMenu, ['menuText'], []));
 
 export default perf;

ui/perf.html

@@ -14,16 +14,7 @@
   <nav id="th-global-navbar" class="navbar navbar-inverse" role="navigation" ng-cloak>
     <div id="th-global-navbar-top" class="navbar navbar-collapse">
       <span class="navbar-left">
-        <span class="dropdown">
-          <button id="th-logo"
-                  title="Treeherder services" role="button"
-                  class="btn btn-view-nav dropdown-toggle"
-                  data-toggle="dropdown">Perfherder
-          </button>
-          <ul class="dropdown-menu" role="menu" aria-labelledby="perf-logo">
-            <li><a href="/#/jobs?repo=mozilla-inbound" class="dropdown-item">Treeherder</a></li>
-          </ul>
-        </span>
+        <logo-menu menu-text="'Perfherder'"></logo-menu>
         <a ng-class="{active: $state.includes('graphs')}" class="btn btn-view-nav" ui-sref="graphs">Graphs</a>
         <a ng-class="{active: $state.current.name.startsWith('compare')}" class="btn btn-view-nav" ui-sref="comparechooser">Compare</a>
         <a ng-class="{active: $state.current.name.indexOf('alerts') >= 0}" class="btn btn-view-nav" ui-sref="alerts({id: null, status: null, framework: null, filter: null, hideImprovements: null, hideDwnToInv: 1})">Alerts</a>

ui/shared/LogoMenu.jsx

@@ -1,46 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from 'reactstrap';
 
 const choices = [
   { url: '/', text: 'Treeherder' },
   { url: '/perf.html', text: 'Perfherder' },
-  { url: '/intermittent-failures.html', text: 'Intermittent Failures' },
+  { url: '/intermittent-failures.html', text: 'Intermittent Failures View' },
 ];
 
-export default function LogoMenu(props) {
-  const { menuText, menuImage } = props;
+export default class LogoMenu extends React.PureComponent {
+  render() {
+    const { menuText, menuImage, colorClass } = this.props;
 
-  const menuChoices = choices.filter(choice => choice.text !== menuText);
-
-  return (
-    <span className="dropdown">
-      <button
-        id="th-logo"
-        title="Treeherder services"
-        data-toggle="dropdown"
-        className="btn btn-view-nav dropdown-toggle"
-        type="button"
-      >
-        <img src={menuImage} alt={menuText} />
-      </button>
-      <ul className="dropdown-menu" role="menu" aria-labelledby="th-logo">
-        {menuChoices.map(choice => (
-          <li key={choice.text}>
-            <a href={choice.url} className="dropdown-item">
+    const menuChoices = choices.filter(choice => choice.text !== menuText);
+    return (
+      <UncontrolledDropdown>
+        <DropdownToggle
+          className="btn-view-nav"
+          id="th-logo"
+          caret
+          title="Treeherder services"
+        >
+          {menuImage ? (
+            <img src={menuImage} alt={menuText} />
+          ) : (
+            <span className={colorClass}>{menuText}</span>
+          )}
+        </DropdownToggle>
+        <DropdownMenu>
+          {menuChoices.map(choice => (
+            <DropdownItem key={choice.text} tag="a" href={choice.url}>
               {choice.text}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </span>
-  );
+            </DropdownItem>
+          ))}
+        </DropdownMenu>
+      </UncontrolledDropdown>
+    );
+  }
 }
 
 LogoMenu.propTypes = {
   menuText: PropTypes.string.isRequired,
   menuImage: PropTypes.string,
+  colorClass: PropTypes.string,
 };
 
 LogoMenu.defaultProps = {
   menuImage: null,
+  colorClass: 'white',
 };