stitch-ui/src/nav/components/TopNav.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable jsx-a11y/href-no-hash */
import React from "react";
import DropdownMenu from "react-dd-menu";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { RootAdminUserImpersonator } from "../../admin";
import { isGlobalUser } from "../../admin/util";

let gitRev = "";
if (process.env.GIT_REV) {
  gitRev = process.env.GIT_REV;
}

const mapStateToProps = state => {
  const { settings, client, userProfile } = state.base;
  const { app } = state.app.root;
  const globalUser = isGlobalUser(userProfile);
  return { client, isGlobalUser: globalUser, app, settings, userProfile };
};

class TopNav extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isDropdownOpen: false };
  }
  render() {
    let userDropdown = null;
    const profile = this.props.userProfile;

    // If user is provided, populate top-right dropdown, otherwise exclude it.
    if (profile) {
      const menuOptions = {
        isOpen: this.state.isDropdownOpen,
        close: () => {
          this.setState({ isOpen: false });
        },
        toggle: (
          <a
            href="#"
            className="dropdown-link"
            onClick={() => {
              this.setState({ isDropdownOpen: !this.state.isDropdownOpen });
            }}
          >
            {(profile.data || {}).name || "Unknown"}
          </a>
        ),
        align: "right"
      };
      userDropdown = (
        <div className="topnav-profile">
          <DropdownMenu {...menuOptions}>
            <li>
              <Link to="/profile">Profile</Link>
            </li>
            <li>
              <Link to="/logout/">Log out</Link>
            </li>
          </DropdownMenu>
        </div>
      );
    }

    return (
      <div className="topnav">
        {this.props.app &&
          <Link
            to={`/groups/${this.props.app.groupId}/apps/${this.props.app._id}`}
          >
            <div className="topnav-logo" />
          </Link>}

        <RootAdminUserImpersonator client={this.props.client} />
        {this.props.isGlobalUser &&
          <div className="topnav-admin">
            <Link to="/admin">Admin</Link>
          </div>}
        {!this.props.settings.cloudUIBaseUrl && userDropdown}
        {gitRev &&
          <div className="topnav-git-rev">
            <a href={`https://github.com/10gen/stitch/commit/${gitRev}`}>
              {gitRev.substring(0, 7)}
            </a>
          </div>}
      </div>
    );
  }
}

export default connect(mapStateToProps)(TopNav);