fix(core): make nav category headings clickable in Firefox (#5136)

app/scripts/modules/core/src/application/nav/CategoryDropdown.tsx

@@ -1,3 +1,4 @@
+import { MenuTitle } from 'core/application/nav/MenuTitle';
 import * as React from 'react';
 import { UIRouterContext } from '@uirouter/react-hybrid';
 import { UISref, UISrefActive } from '@uirouter/react';
@@ -105,24 +106,6 @@ export class CategoryDropdown extends React.Component<ICategoryDropdownProps, IC
     )
   }
 
-  private createMenuTitle(isActive: boolean): JSX.Element {
-    const { runningCount, tags } = this.state;
-    const { category, application } = this.props;
-    const defaultDataSource = category.dataSources[0];
-    return (
-      <UISref to={defaultDataSource.sref}>
-        <a className="nav-item">
-          <span className={`horizontal middle ${isActive ? 'active' : ''}`} onClick={this.close}>
-            <NavIcon icon={category.icon}/>
-            {' ' + category.label}
-            {runningCount > 0 && <span className="badge badge-running-count">{runningCount}</span>}
-            <DataSourceNotifications tags={tags} application={application} tabName={category.label}/>
-          </span>
-        </a>
-      </UISref>
-    );
-  }
-
   private createMenuItem(dataSource: ApplicationDataSource): JSX.Element {
     const { category, application } = this.props;
     return (
@@ -139,8 +122,8 @@ export class CategoryDropdown extends React.Component<ICategoryDropdownProps, IC
   }
 
   public render() {
-    const { open } = this.state;
-    const { category } = this.props;
+    const { open, runningCount, tags } = this.state;
+    const { category, application } = this.props;
     if (category.dataSources.length === 1) {
       return this.createNonMenuEntry();
     }
@@ -155,13 +138,15 @@ export class CategoryDropdown extends React.Component<ICategoryDropdownProps, IC
         onToggle={noop} // the UiSref on .Toggle handles navigation, but the component complains if this prop is missing
         className={open ? 'open' : ''}
       >
-        <Dropdown.Toggle
-          bsStyle="link"
-          className={`horizontal middle ${isActive ? 'active' : ''}`}
-          noCaret={true}
-        >
-          {this.createMenuTitle(isActive)}
-        </Dropdown.Toggle>
+        <MenuTitle
+          bsRole="toggle"
+          isActive={isActive}
+          category={category}
+          application={application}
+          runningCount={runningCount}
+          tags={tags}
+          closeMenu={this.close}
+        />
         <Dropdown.Menu>
           {category.dataSources.map(dataSource => this.createMenuItem(dataSource))}
         </Dropdown.Menu>

app/scripts/modules/core/src/application/nav/MenuTitle.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { UISref } from '@uirouter/react';
+
+import { Application } from 'core/application';
+import { IEntityTags } from 'core/domain';
+import { DataSourceNotifications } from 'core/entityTag/notifications/DataSourceNotifications';
+
+import { NavIcon } from './NavIcon';
+import { IDataSourceCategory } from './ApplicationHeader';
+
+export interface IMenuTitleProps {
+  bsRole: string;
+  isActive: boolean;
+  category: IDataSourceCategory;
+  application: Application;
+  runningCount?: number;
+  tags?: IEntityTags[];
+  closeMenu: () => void;
+}
+
+/**
+ * The ONLY reason for this class is to avoid a TS warning driven by the Bootstrap Dropdown component checking for a
+ * child with a "bsRole" prop. At this point, it's not totally clear what using the Dropdown buys us, rather than just
+ * doing it via custom components, but there are probably reasons to keep it...
+ *
+ * This could be a SFC; however, the React Bootstrap Dropdown attempts to add a ref to the element, which throws a
+ * warning ("Stateless function components cannot be given refs. Attempts to access this ref will fail.") and it's
+ * basically the same LOC to make it a plain old Component and avoid the warning .
+ */
+export class MenuTitle extends React.Component<IMenuTitleProps> {
+
+  public render() {
+    const { category, application, runningCount, tags, isActive, closeMenu } = this.props;
+    const defaultDataSource = category.dataSources[0];
+    return (
+      <UISref to={defaultDataSource.sref}>
+        <a className={`nav-item horizontal middle ${isActive ? 'active' : ''}`}>
+            <span className={`horizontal middle ${isActive ? 'active' : ''}`} onClick={closeMenu}>
+              <NavIcon icon={category.icon}/>
+              {' ' + category.label}
+              {runningCount > 0 && <span className="badge badge-running-count">{runningCount}</span>}
+              <DataSourceNotifications tags={tags} application={application} tabName={category.label}/>
+            </span>
+        </a>
+      </UISref>
+    );
+  }
+};