@imposium-hub/components 1.45.5 → 1.46.0

package/src/components/header/Header.tsx

@@ -2,54 +2,54 @@ import * as React from 'react';
 import ImposiumDropdown from '../dropdown/Dropdown';
 import ServiceIcon from '../service-icon/ServiceIcon';
 import { string2HexCode, parameterizeServiceUrl } from '../../Util';
-import { ICON_CHEVRON_DOWN, ICON_CHEVRON_UP, ICON_HELP} from '../../constants/icons';
+import { ICON_CHEVRON_DOWN, ICON_CHEVRON_UP, ICON_HELP } from '../../constants/icons';
 
 export interface IHeaderProps {
-    email? : string;
-    accessData : any;
-    activeOrganization : string;
-    activeStory? : string;
-    hideStoryPicker? : boolean;
-    onOrganizationChange? : (orgId : any) => any;
-    onStoryChange? : (story : any) => any;
-    logout : (...args) => any;
+    email?: string;
+    accessData: any;
+    activeOrganization: string;
+    activeStory?: string;
+    hideStoryPicker?: boolean;
+    onOrganizationChange?: (orgId: any) => any;
+    onStoryChange?: (story: any) => any;
+    logout: (...args) => any;
 }
 
 export interface IHeaderState {
-    inactiveOrganizations : any[];
-    servicesByOrganization : any[];
-    activeServiceBlob : any;
-    activeOrganizationBlob : any;
-    showAccountDropdown : boolean;
-    showStoriesDropdown : boolean;
-    showServiceDropdown : boolean;
-    dropdownToggleColor : string;
-    activeFirstChar : string;
+    inactiveOrganizations: any[];
+    servicesByOrganization: any[];
+    activeServiceBlob: any;
+    activeOrganizationBlob: any;
+    showAccountDropdown: boolean;
+    showStoriesDropdown: boolean;
+    showServiceDropdown: boolean;
+    dropdownToggleColor: string;
+    activeFirstChar: string;
 }
 
 export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
-    private static readonly DEFAULT_TITLE : string = 'imposium';
-    private static readonly SERVICE_MESH_ALIAS : string = 'services';
-    private static readonly DOCS_HEADER : string = 'documentation';
-    private static readonly PRIVATE_HEADER : string = 'admin';
-    private static readonly API_DOCS_LINK_COPY : string = 'REST API';
-    private static readonly SDK_DOCS_LINK_COPY : string = 'Javascript SDK';
-    private static readonly API_DOCS_LINK : string = 'https://docs.imposium.com';
-    private static readonly SDK_DOCS_LINK : string = 'https://docs.imposium.com/js-sdk/';
-    private static readonly DEFAULT_SERVICE_TOGGLE_COPY : string = 'stories';
-    private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR : string = 'royalblue';
-    private static readonly NO_STORIES_COPY : string = 'No stories were found';
-    private static readonly LOGOUT_COPY : string = 'logout';
-    private static readonly UUID_LENGTH : number = 36;
-    private static readonly UP : JSX.Element = (ICON_CHEVRON_UP);
-    private static readonly DOWN : JSX.Element = (ICON_CHEVRON_DOWN);
-    private static readonly PRIVATE_IDS : number[] = [9, 10, 11, 12];
-
-    private readonly serviceToggleRef : any = null;
-    private readonly storyToggleRef : any = null;
-    private readonly orgsToggleRef : any = null;
-
-    constructor(p : IHeaderProps) {
+    private static readonly DEFAULT_TITLE: string = 'imposium';
+    private static readonly SERVICE_MESH_ALIAS: string = 'services';
+    private static readonly DOCS_HEADER: string = 'documentation';
+    private static readonly PRIVATE_HEADER: string = 'admin';
+    private static readonly API_DOCS_LINK_COPY: string = 'REST API';
+    private static readonly SDK_DOCS_LINK_COPY: string = 'Javascript SDK';
+    private static readonly API_DOCS_LINK: string = 'https://docs.imposium.com';
+    private static readonly SDK_DOCS_LINK: string = 'https://docs.imposium.com/js-sdk/';
+    private static readonly DEFAULT_SERVICE_TOGGLE_COPY: string = 'stories';
+    private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = 'royalblue';
+    private static readonly NO_STORIES_COPY: string = 'No stories were found';
+    private static readonly LOGOUT_COPY: string = 'logout';
+    private static readonly UUID_LENGTH: number = 36;
+    private static readonly UP: JSX.Element = ICON_CHEVRON_UP;
+    private static readonly DOWN: JSX.Element = ICON_CHEVRON_DOWN;
+    private static readonly PRIVATE_IDS: number[] = [9, 10, 11, 12];
+
+    private readonly serviceToggleRef: any = null;
+    private readonly storyToggleRef: any = null;
+    private readonly orgsToggleRef: any = null;
+
+    constructor(p: IHeaderProps) {
         super(p);
 
         this.state = {
@@ -69,17 +69,17 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         this.orgsToggleRef = React.createRef();
     }
 
-    public componentDidMount = () : void => {
-        const {accessData, activeOrganization} = this.props;
+    public componentDidMount = (): void => {
+        const { accessData, activeOrganization } = this.props;
 
         if (accessData) {
             this.parseAccessData(accessData, activeOrganization);
         }
-    }
+    };
 
-    public componentDidUpdate = (prevProps : IHeaderProps) : void => {
-        const {accessData: currAccess, activeOrganization: currActive} = this.props;
-        const {accessData: prevAccess, activeOrganization: prevActive} = prevProps;
+    public componentDidUpdate = (prevProps: IHeaderProps): void => {
+        const { accessData: currAccess, activeOrganization: currActive } = this.props;
+        const { accessData: prevAccess, activeOrganization: prevActive } = prevProps;
 
         if (currAccess && currAccess !== prevAccess) {
             this.parseAccessData(currAccess, currActive);
@@ -92,29 +92,32 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         ) {
             this.parseAccessData(currAccess, currActive);
         }
-    }
+    };
 
-    private parseAccessData = (accessData : any, activeOrganization : string) : void => {
-        const {organizations, services} = accessData;
+    private parseAccessData = (accessData: any, activeOrganization: string): void => {
+        const { organizations, services } = accessData;
 
-        const activeOrganizationBlob : any = (activeOrganization)
-            ? accessData.organizations.find((org) => (org.id === activeOrganization))
+        const activeOrganizationBlob: any = activeOrganization
+            ? accessData.organizations.find((org) => org.id === activeOrganization)
             : undefined;
 
-        const inactiveOrganizations : any[] = (organizations.length > 1)
-            ? organizations.filter((o) => (o.id !== activeOrganization))
-            : [];
+        const inactiveOrganizations: any[] =
+            organizations.length > 1
+                ? organizations.filter((o) => o.id !== activeOrganization)
+                : [];
 
-        const servicesByOrganization : any[] = (services && activeOrganizationBlob)
-            ? services.filter((s : any) => (activeOrganizationBlob.services.includes(s.id)))
-            : [];
+        const servicesByOrganization: any[] =
+            services && activeOrganizationBlob
+                ? services.filter((s: any) => activeOrganizationBlob.services.includes(s.id))
+                : [];
 
-        const activeServiceBlob : any = (servicesByOrganization.length > 1)
-            ? services.find((s : any) => (window.location.href.includes(s.url)))
-            : undefined;
+        const activeServiceBlob: any =
+            servicesByOrganization.length > 1
+                ? services.find((s: any) => window.location.href.includes(s.url))
+                : undefined;
 
-        let dropdownToggleColor : string = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
-        let activeFirstChar : string = '';
+        let dropdownToggleColor: string = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
+        let activeFirstChar: string = '';
 
         if (activeOrganizationBlob && activeOrganizationBlob.hasOwnProperty('name')) {
             dropdownToggleColor = string2HexCode(activeOrganizationBlob.name);
@@ -129,24 +132,24 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
             dropdownToggleColor,
             activeFirstChar
         });
-    }
+    };
 
-    private changeStory = (story : any) : void => {
-        const {onStoryChange} = this.props;
+    private changeStory = (story: any): void => {
+        const { onStoryChange } = this.props;
 
         if (typeof onStoryChange === 'function') {
             onStoryChange(story);
-            this.setState({showStoriesDropdown: false});
+            this.setState({ showStoriesDropdown: false });
         }
-    }
+    };
 
-    private toggleAccountDropdown = (toggle : boolean, newId : string = '') : void => {
-        const {onOrganizationChange} = this.props;
+    private toggleAccountDropdown = (toggle: boolean, newId: string = ''): void => {
+        const { onOrganizationChange } = this.props;
 
         if (toggle) {
-            this.setState({showAccountDropdown: true});
+            this.setState({ showAccountDropdown: true });
         } else {
-            this.setState({showAccountDropdown: false});
+            this.setState({ showAccountDropdown: false });
 
             // Propagate handler if supplied (more useful in react / redux flow)
             if (newId && onOrganizationChange) {
@@ -158,10 +161,12 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
                 window.location.replace(`${this.getHomeUrl()}?organization_id=${newId}`);
             }
         }
-    }
+    };
 
-    private getHomeUrl = () : string => {
-        const {location: {hostname, host}} = window;
+    private getHomeUrl = (): string => {
+        const {
+            location: { hostname, host }
+        } = window;
 
         if (hostname === 'localhost') {
             return 'http://localhost:3036';
@@ -170,113 +175,121 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         } else {
             return 'https://launchpad.imposium.com';
         }
-    }
+    };
 
-    private doLogout = () : void => {
-        this.setState({showAccountDropdown: false});
+    private doLogout = (): void => {
+        this.setState({ showAccountDropdown: false });
         this.props.logout();
-    }
-
-    private pullFirstChar = (s : string) : string => {
-        return (s) ? s.substring(0, 1) : '';
-    }
-
-    private renderDropdownChevron = (toggle : boolean) : JSX.Element => {
-        return (toggle) ? ImposiumHeader.UP : ImposiumHeader.DOWN;
-    }
-
-    private renderServiceAnchor = (s : any, activeOrganization : string, activeStory : string) : JSX.Element => (
-        <div className = 'anchor-wrapper' key = {s.id}>
-            <a href = {parameterizeServiceUrl(activeOrganization, activeStory, s.url, s.id)}>
-                <div className = 'icon-fixed'>
-                    <ServiceIcon iconName = {s.icon} color = {`#${s.color}`} />
+    };
+
+    private pullFirstChar = (s: string): string => {
+        return s ? s.substring(0, 1) : '';
+    };
+
+    private renderDropdownChevron = (toggle: boolean): JSX.Element => {
+        return toggle ? ImposiumHeader.UP : ImposiumHeader.DOWN;
+    };
+
+    private renderServiceAnchor = (
+        s: any,
+        activeOrganization: string,
+        activeStory: string
+    ): JSX.Element => (
+        <div className='anchor-wrapper' key={s.id}>
+            <a href={parameterizeServiceUrl(activeOrganization, activeStory, s.url, s.id)}>
+                <div className='icon-fixed'>
+                    <ServiceIcon iconName={s.icon} color={`#${s.color}`} />
                 </div>
                 {s.name}
             </a>
         </div>
-    )
+    );
 
     public render() {
-        const {email, accessData, activeOrganization, activeStory, hideStoryPicker} = this.props;
+        const { email, accessData, activeOrganization, activeStory, hideStoryPicker } = this.props;
 
         const {
-            showAccountDropdown, servicesByOrganization, activeServiceBlob,
-            showStoriesDropdown, inactiveOrganizations, activeOrganizationBlob,
-            activeFirstChar, dropdownToggleColor, showServiceDropdown
+            showAccountDropdown,
+            servicesByOrganization,
+            activeServiceBlob,
+            showStoriesDropdown,
+            inactiveOrganizations,
+            activeOrganizationBlob,
+            activeFirstChar,
+            dropdownToggleColor,
+            showServiceDropdown
         } = this.state;
 
-        let currentStory : any;
-        let headerBorder : any;
-        let activeService : any;
-        let serviceDropdownColor : any = {};
-        let serviceAnchors : JSX.Element[];
-        let privateAnchors : JSX.Element[];
-        let accountDropdownToggle : JSX.Element;
-        let activePanel : JSX.Element;
-        let storyToggle : JSX.Element;
-        let orgPicker : JSX.Element;
-        let storyMenuInner : JSX.Element;
-        let serviceDropdownToggle : JSX.Element;
-        let serviceDropdownMenu : JSX.Element;
+        let currentStory: any;
+        let headerBorder: any;
+        let activeService: any;
+        let serviceDropdownColor: any = {};
+        let serviceAnchors: JSX.Element[];
+        let privateAnchors: JSX.Element[];
+        let accountDropdownToggle: JSX.Element;
+        let activePanel: JSX.Element;
+        let storyToggle: JSX.Element;
+        let orgPicker: JSX.Element;
+        let storyMenuInner: JSX.Element;
+        let serviceDropdownToggle: JSX.Element;
+        let serviceDropdownMenu: JSX.Element;
 
         if (accessData) {
-            activeService = servicesByOrganization.find((s : any) => (window.location.href.includes(s.url)));
+            activeService = servicesByOrganization.find((s: any) =>
+                window.location.href.includes(s.url)
+            );
 
             if (activeService) {
-                serviceDropdownColor = {color: `#${activeService.color}`};
-                headerBorder = {borderBottom: `4px solid #${activeService.color}`};
+                serviceDropdownColor = { color: `#${activeService.color}` };
+                headerBorder = { borderBottom: `4px solid #${activeService.color}` };
             }
 
             serviceAnchors = servicesByOrganization
-                .filter((s : any) => (!s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) === -1))
-                .map((s : any) => this.renderServiceAnchor(s, activeOrganization, activeStory));
+                .filter((s: any) => !s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) === -1)
+                .map((s: any) => this.renderServiceAnchor(s, activeOrganization, activeStory));
 
             privateAnchors = servicesByOrganization
-                .filter((s : any) => (!s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) > -1))
-                .map((s : any) => this.renderServiceAnchor(s, activeOrganization, activeStory));
+                .filter((s: any) => !s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) > -1)
+                .map((s: any) => this.renderServiceAnchor(s, activeOrganization, activeStory));
 
             serviceDropdownMenu = (
-                <div className = 'service-menu'>
-                    <section className = 'service-menu-section'>
-                        <div className = 'service-menu-heading'>
+                <div className='service-menu'>
+                    <section className='service-menu-section'>
+                        <div className='service-menu-heading'>
                             {ImposiumHeader.SERVICE_MESH_ALIAS}
                         </div>
 
-                        <div className = 'service-menu-anchors'>
-                            {serviceAnchors}
-                        </div>
+                        <div className='service-menu-anchors'>{serviceAnchors}</div>
                     </section>
 
-                    {
-                        (privateAnchors.length > 0) && (
-                            <section className = 'service-menu-section'>
-                                <div className = 'service-menu-heading'>
-                                    {ImposiumHeader.PRIVATE_HEADER}
-                                </div>
-
-                                <div className = 'service-menu-anchors'>
-                                    {privateAnchors}
-                                </div>
-                            </section>
-                        )
-                    }
-
-                    <section className = 'service-menu-section'>
-                        <div className = 'service-menu-heading'>
-                            {ImposiumHeader.DOCS_HEADER}
-                        </div>
+                    {privateAnchors.length > 0 && (
+                        <section className='service-menu-section'>
+                            <div className='service-menu-heading'>
+                                {ImposiumHeader.PRIVATE_HEADER}
+                            </div>
+
+                            <div className='service-menu-anchors'>{privateAnchors}</div>
+                        </section>
+                    )}
 
-                        <div className = 'service-menu-anchors'>
-                            <div className = 'anchor-wrapper doc'>
-                                <a target = '__blank' href = {ImposiumHeader.API_DOCS_LINK}>
-                                    <div className = 'icon-fixed'><ServiceIcon iconName = 'FaCogs' /></div>
+                    <section className='service-menu-section'>
+                        <div className='service-menu-heading'>{ImposiumHeader.DOCS_HEADER}</div>
+
+                        <div className='service-menu-anchors'>
+                            <div className='anchor-wrapper doc'>
+                                <a target='__blank' href={ImposiumHeader.API_DOCS_LINK}>
+                                    <div className='icon-fixed'>
+                                        <ServiceIcon iconName='FaCogs' />
+                                    </div>
                                     {ImposiumHeader.API_DOCS_LINK_COPY}
                                 </a>
                             </div>
 
-                            <div className = 'anchor-wrapper doc'>
-                                <a target = '__blank' href = {ImposiumHeader.SDK_DOCS_LINK}>
-                                    <div className = 'icon-fixed'><ServiceIcon iconName = 'FaJsSquare' /></div>
+                            <div className='anchor-wrapper doc'>
+                                <a target='__blank' href={ImposiumHeader.SDK_DOCS_LINK}>
+                                    <div className='icon-fixed'>
+                                        <ServiceIcon iconName='FaJsSquare' />
+                                    </div>
                                     {ImposiumHeader.SDK_DOCS_LINK_COPY}
                                 </a>
                             </div>
@@ -287,25 +300,29 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
             serviceDropdownToggle = (
                 <button
-                    id = 'btn-toggle-services'
-                    className = 'btn-toggle-services'
-                    style = {serviceDropdownColor}
-                    ref = {this.serviceToggleRef}
-                    onClick = {() => this.setState({showServiceDropdown : !this.state.showServiceDropdown})}>
-
-                    <span>{(activeServiceBlob) ? activeServiceBlob.name : ImposiumHeader.SERVICE_MESH_ALIAS}</span>
+                    id='btn-toggle-services'
+                    className='btn-toggle-services'
+                    style={serviceDropdownColor}
+                    ref={this.serviceToggleRef}
+                    onClick={() =>
+                        this.setState({ showServiceDropdown: !this.state.showServiceDropdown })
+                    }>
+                    <span>
+                        {activeServiceBlob
+                            ? activeServiceBlob.name
+                            : ImposiumHeader.SERVICE_MESH_ALIAS}
+                    </span>
                     {this.renderDropdownChevron(showServiceDropdown)}
                 </button>
             );
 
             accountDropdownToggle = (
                 <button
-                    id = 'btn-toggle-orgs'
-                    className = 'btn-toggle-orgs'
-                    ref = {this.orgsToggleRef}
-                    style = {{backgroundColor: dropdownToggleColor}}
-                    onClick = {() => this.toggleAccountDropdown(!showAccountDropdown)}>
-
+                    id='btn-toggle-orgs'
+                    className='btn-toggle-orgs'
+                    ref={this.orgsToggleRef}
+                    style={{ backgroundColor: dropdownToggleColor }}
+                    onClick={() => this.toggleAccountDropdown(!showAccountDropdown)}>
                     {activeFirstChar}
                 </button>
             );
@@ -313,8 +330,10 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
         if (accessData && activeOrganizationBlob) {
             activePanel = (
-                <div className = 'orgs-menu-active-org'>
-                    <div className = 'active-first-char' style = {{backgroundColor: dropdownToggleColor}}>
+                <div className='orgs-menu-active-org'>
+                    <div
+                        className='active-first-char'
+                        style={{ backgroundColor: dropdownToggleColor }}>
                         {this.pullFirstChar(activeOrganizationBlob.name)}
                     </div>
 
@@ -324,27 +343,35 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         }
 
         if (accessData && activeOrganizationBlob && !hideStoryPicker) {
-            currentStory = activeOrganizationBlob.stories.find((s : any) => (s.id === activeStory));
+            currentStory = activeOrganizationBlob.stories.find((s: any) => s.id === activeStory);
 
             storyToggle = (
                 <button
-                    id = 'btn-toggle-story'
-                    className = 'btn-toggle-story'
-                    ref = {this.storyToggleRef}
-                    onClick = {() => {this.setState({showStoriesDropdown: !this.state.showStoriesDropdown}); }}
-                >
-                    <div className = 'story-name'>
-                        {(currentStory) ? currentStory.name : ImposiumHeader.DEFAULT_SERVICE_TOGGLE_COPY}
+                    id='btn-toggle-story'
+                    className='btn-toggle-story'
+                    ref={this.storyToggleRef}
+                    onClick={() => {
+                        this.setState({ showStoriesDropdown: !this.state.showStoriesDropdown });
+                    }}>
+                    <div className='story-name'>
+                        {currentStory
+                            ? currentStory.name
+                            : ImposiumHeader.DEFAULT_SERVICE_TOGGLE_COPY}
                     </div>
                     {this.renderDropdownChevron(showStoriesDropdown)}
                 </button>
             );
 
             if (activeOrganizationBlob.stories.length === 0) {
-                storyMenuInner = (<div className = 'no-stories-dialog'>{ImposiumHeader.NO_STORIES_COPY}</div>);
+                storyMenuInner = (
+                    <div className='no-stories-dialog'>{ImposiumHeader.NO_STORIES_COPY}</div>
+                );
             } else {
-                storyMenuInner = activeOrganizationBlob.stories.map((s : any) => (
-                    <button key = {s.id} className = 'btn-change-story' onClick = {() => this.changeStory(s)}>
+                storyMenuInner = activeOrganizationBlob.stories.map((s: any) => (
+                    <button
+                        key={s.id}
+                        className='btn-change-story'
+                        onClick={() => this.changeStory(s)}>
                         {s.name}
                     </button>
                 ));
@@ -353,14 +380,15 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
         if (showAccountDropdown) {
             orgPicker = (
-                <div className = 'orgs-menu-org-picker'>
+                <div className='orgs-menu-org-picker'>
                     {inactiveOrganizations.map((o) => (
                         <button
-                            key = {o.name}
-                            className = 'menu-item inactive-org-button'
-                            onClick = {() => this.toggleAccountDropdown(false, o.id)}>
-
-                            <div className = 'inactive-first-char' style = {{backgroundColor: string2HexCode(o.name)}}>
+                            key={o.name}
+                            className='menu-item inactive-org-button'
+                            onClick={() => this.toggleAccountDropdown(false, o.id)}>
+                            <div
+                                className='inactive-first-char'
+                                style={{ backgroundColor: string2HexCode(o.name) }}>
                                 {this.pullFirstChar(o.name)}
                             </div>
 
@@ -372,70 +400,68 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         }
 
         return (
-            <nav id = 'imposium-header' className = 'imposium-header' style = {headerBorder}>
-                <div className = 'inner-content'>
-                    <span className = 'inner-left'>
+            <nav id='imposium-header' className='imposium-header' style={headerBorder}>
+                <div className='inner-content'>
+                    <span className='inner-left'>
                         <a
-                            className = 'title'
-                            href = {parameterizeServiceUrl(activeOrganization, activeStory, this.getHomeUrl())}
-                        >
-                            <div className = 'logo' />
-                            <h1 className = 'heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
+                            className='title'
+                            href={parameterizeServiceUrl(
+                                activeOrganization,
+                                activeStory,
+                                this.getHomeUrl()
+                            )}>
+                            <div className='logo' />
+                            <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
                         </a>
 
                         {serviceDropdownToggle}
                     </span>
 
-                    <span className = 'inner-right'>
+                    <span className='inner-right'>
                         {storyToggle}
                         {accountDropdownToggle}
-                        <a href = 'https://support.imposium.com' target = '_blank'><div
-                            className = 'btn-help'>
-                            {ICON_HELP}
-                        </div></a>
+                        <a href='https://support.imposium.com' target='_blank'>
+                            <div className='btn-help'>{ICON_HELP}</div>
+                        </a>
                     </span>
                 </div>
 
                 <ImposiumDropdown
-                    key = 'services-dropdown'
-                    position = 'bottomleft'
-                    show = {showServiceDropdown}
-                    toggleRef = {this.serviceToggleRef}
-                    onOutsideClick = {() => this.setState({showServiceDropdown: false})}>
-
+                    key='services-dropdown'
+                    position='bottomleft'
+                    show={showServiceDropdown}
+                    toggleRef={this.serviceToggleRef}
+                    onOutsideClick={() => this.setState({ showServiceDropdown: false })}>
                     {serviceDropdownMenu}
                 </ImposiumDropdown>
 
                 <ImposiumDropdown
-                    key = 'stories-dropdown'
-                    position = 'bottomright'
-                    show = {showStoriesDropdown}
-                    toggleRef = {this.storyToggleRef}
-                    onOutsideClick = {() => this.setState({showStoriesDropdown: false})}>
-
-                    <div className = 'stories-menu'>{storyMenuInner}</div>
+                    key='stories-dropdown'
+                    position='bottomright'
+                    show={showStoriesDropdown}
+                    toggleRef={this.storyToggleRef}
+                    onOutsideClick={() => this.setState({ showStoriesDropdown: false })}>
+                    <div className='stories-menu'>{storyMenuInner}</div>
                 </ImposiumDropdown>
 
                 <ImposiumDropdown
-                    key = 'org-dropdown'
-                    position = 'bottomright'
-                    show = {showAccountDropdown}
-                    toggleRef = {this.orgsToggleRef}
-                    onOutsideClick = {() => this.toggleAccountDropdown(false)}>
-
-                    <div className = 'orgs-menu'>
+                    key='org-dropdown'
+                    position='bottomright'
+                    show={showAccountDropdown}
+                    toggleRef={this.orgsToggleRef}
+                    onOutsideClick={() => this.toggleAccountDropdown(false)}>
+                    <div className='orgs-menu'>
                         {activePanel}
                         {orgPicker}
 
-                        <div className = 'orgs-menu-footer'>
-                            <div className = 'email'>{email}</div>
-                            <button className = 'btn-logout' onClick = {() => this.doLogout()}>
+                        <div className='orgs-menu-footer'>
+                            <div className='email'>{email}</div>
+                            <button className='btn-logout' onClick={() => this.doLogout()}>
                                 {ImposiumHeader.LOGOUT_COPY}
                             </button>
                         </div>
                     </div>
                 </ImposiumDropdown>
-
             </nav>
         );
     }