close account menu after nav to account settings

webpack/nav/__tests__/additional_menu_test.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { mount, shallow } from "enzyme";
+import { AdditionalMenu } from "../additional_menu";
+
+describe("AdditionalMenu", () => {
+  it("renders the account menu", () => {
+    const wrapper = mount(<AdditionalMenu
+      logout={jest.fn()}
+      close={jest.fn()} />);
+    const text = wrapper.text();
+    expect(text).toContain("Account Settings");
+    expect(text).toContain("Set Page to English");
+    expect(text).toContain("Documentation");
+    expect(text).toContain("Logout");
+    expect(text).toContain("VERSION");
+  });
+
+  it("closes the account menu upon nav", () => {
+    const close = jest.fn();
+    const wrapper = shallow(<AdditionalMenu
+      logout={jest.fn()}
+      close={(x) => () => close(x)} />);
+    wrapper.find("Link").first().simulate("click");
+    expect(close).toHaveBeenCalledWith("accountMenuOpen");
+  });
+
+  it("logs out", () => {
+    const logout = jest.fn();
+    const wrapper = shallow(<AdditionalMenu
+      logout={logout}
+      close={jest.fn()} />);
+    wrapper.find("a").at(1).simulate("click");
+    expect(logout).toHaveBeenCalled();
+  });
+});

webpack/nav/additional_menu.tsx

@@ -2,10 +2,11 @@ import * as React from "react";
 import { Link } from "react-router";
 import { t } from "i18next";
 import { LangToggle } from "./lang_toggle";
+import { AccountMenuProps } from "./interfaces";
 
-export const AdditionalMenu = (logout: () => void) => {
+export const AdditionalMenu = (props: AccountMenuProps) => {
   return <div className="nav-additional-menu">
-    <Link to="/app/account">
+    <Link to="/app/account" onClick={props.close("accountMenuOpen")}>
       <i className="fa fa-cog"></i>
       {t("Account Settings")}
     </Link>
@@ -17,7 +18,7 @@ export const AdditionalMenu = (logout: () => void) => {
       </a>
     </div>
     <div>
-      <a onClick={logout}>
+      <a onClick={props.logout}>
         <i className="fa fa-sign-out"></i>
         {t("Logout")}
       </a>

webpack/nav/index.tsx

@@ -21,7 +21,8 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
 
   state: NavBarState = {
     mobileMenuOpen: false,
-    tickerListOpen: false
+    tickerListOpen: false,
+    accountMenuOpen: false
   };
 
   logout = () => Session.clear();
@@ -49,7 +50,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
     updatePageInfo(pageName);
 
     const { toggle, close } = this;
-    const { mobileMenuOpen, tickerListOpen } = this.state;
+    const { mobileMenuOpen, tickerListOpen, accountMenuOpen } = this.state;
     const { logs } = this.props;
 
     return (
@@ -75,9 +76,15 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
                     <Popover
                       inline
                       interactionKind={PopoverInteractionKind.HOVER}
-                      target={<div className="nav-name">{firstName}</div>}
+                      target={
+                        <div className="nav-name"
+                          onClick={this.toggle("accountMenuOpen")}>
+                          {firstName}
+                        </div>}
                       position={Position.BOTTOM_RIGHT}
-                      content={AdditionalMenu(this.logout)} />
+                      content={AdditionalMenu({ logout: this.logout, close })}
+                      isOpen={accountMenuOpen}
+                      onClose={this.close("accountMenuOpen")} />
                     <EStopButton
                       bot={this.props.bot}
                       user={this.props.user} />

webpack/nav/interfaces.ts

@@ -19,6 +19,7 @@ export interface NavBarProps {
 export interface NavBarState {
   mobileMenuOpen: boolean;
   tickerListOpen: boolean;
+  accountMenuOpen: boolean;
 }
 
 type ToggleEventHandler = (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -37,3 +38,8 @@ export interface TickerListProps {
 export interface NavLinksProps {
   close: (property: keyof NavBarState) => ToggleEventHandler;
 }
+
+export interface AccountMenuProps {
+  close: (property: keyof NavBarState) => ToggleEventHandler;
+  logout: () => void;
+}