Use org logo url (#686)

* Sets config's org logo url in site nav header

* Site nav header cleanup

* Use default image for org logo

frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx

@@ -4,6 +4,7 @@ import kolideLogo from '../../../../assets/images/kolide-logo.svg';
 
 class OrgLogoIcon extends Component {
   static propTypes = {
+    className: PropTypes.string,
     src: PropTypes.string.isRequired,
   };
 
@@ -40,12 +41,14 @@ class OrgLogoIcon extends Component {
   }
 
   render () {
+    const { className } = this.props;
     const { imageSrc } = this.state;
     const { onError } = this;
 
     return (
       <img
         alt="Organization Logo"
+        className={className}
         onError={onError}
         src={imageSrc}
       />

frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx

@@ -2,11 +2,10 @@ import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
 import configInterface from 'interfaces/config';
-import userInterface from 'interfaces/user';
 import Icon from 'components/icons/Icon';
-
-import kolideLogo from '../../../../assets/images/kolide-logo.svg';
-import UserMenu from './UserMenu';
+import OrgLogoIcon from 'components/icons/OrgLogoIcon';
+import userInterface from 'interfaces/user';
+import UserMenu from 'components/side_panels/SiteNavHeader/UserMenu';
 
 class SiteNavHeader extends Component {
   static propTypes = {
@@ -19,36 +18,47 @@ class SiteNavHeader extends Component {
   constructor (props) {
     super(props);
 
-    this.state = {
-      userMenuOpened: false,
-    };
+    this.state = { userMenuOpened: false };
   }
 
   componentDidMount = () => {
     const { document } = global;
     const { closeUserMenu } = this;
+
     document.addEventListener('mousedown', closeUserMenu, false);
   }
 
-  closeUserMenu = (evt) => {
+  setHeaderNav = (ref) => {
+    this.headerNav = ref;
+
+    return false;
+  }
+
+  closeUserMenu = ({ target }) => {
     const { headerNav } = this;
 
-    if (headerNav && !headerNav.contains(evt.target)) {
+    if (headerNav && !headerNav.contains(target)) {
       this.setState({ userMenuOpened: false });
     }
+
+    return false;
   }
 
   toggleUserMenu = (evt) => {
     evt.preventDefault();
+
     const { userMenuOpened } = this.state;
 
     this.setState({ userMenuOpened: !userMenuOpened });
+
+    return false;
   }
 
   render () {
     const {
       config: {
         org_name: orgName,
+        org_logo_url: orgLogoURL,
       },
       onLogoutUser,
       onRedirectTo,
@@ -56,7 +66,7 @@ class SiteNavHeader extends Component {
     } = this.props;
 
     const { userMenuOpened } = this.state;
-    const { toggleUserMenu } = this;
+    const { setHeaderNav, toggleUserMenu } = this;
     const { enabled, username } = user;
 
     const headerBaseClass = 'site-nav-header';
@@ -75,13 +85,9 @@ class SiteNavHeader extends Component {
 
     return (
       <header className={headerBaseClass}>
-        <button className={headerToggleClass} onClick={toggleUserMenu} ref={(r) => { this.headerNav = r; }}>
+        <button className={headerToggleClass} onClick={toggleUserMenu} ref={setHeaderNav}>
           <div className={`${headerBaseClass}__org`}>
-            <img
-              alt="Company logo"
-              src={kolideLogo}
-              className={`${headerBaseClass}__logo`}
-            />
+            <OrgLogoIcon className={`${headerBaseClass}__logo`} src={orgLogoURL} />
             <h1 className={`${headerBaseClass}__org-name`}>{orgName}</h1>
             <div className={userStatusClass} />
             <h2 className={`${headerBaseClass}__username`}>{username}</h2>