Add demo for UserProfileNavigator and fix issue

demo/demoApp.jsx

@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography';
 import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
 import DemoAttributeEditor from '../src/components/AttributeEditor/demo';
 import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';
+import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/demo';
 
 
 export default class demoApp extends Component {
@@ -30,6 +31,10 @@ export default class demoApp extends Component {
                 component: <DemoConfirmDialog/>,
                 title: 'ConfirmDialog',
             },
+            {
+                component: <DemoUserProfileNavigator/>,
+                title: 'UserProfileNavigator',
+            },
         ];
 
         return (

demo/static/gme-dist/webgme.classes.build.js

@@ -503,6 +503,14 @@
                 // Constraint Checking
                 META_RULES_RESULT: 'META_RULES_RESULT',
                 CONSTRAINT_RESULT: 'CONSTRAINT_RESULT'
+            },
+            gmeConfig: {
+                authentication: {
+                    enable: false
+                },
+                client: {
+                    mountedPath: '',
+                }
             }
         };
     };

package-lock.json

@@ -3104,14 +3104,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3126,20 +3124,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3256,8 +3251,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3269,7 +3263,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3284,7 +3277,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3292,14 +3284,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3318,7 +3308,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3399,8 +3388,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3412,7 +3400,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3534,7 +3521,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

src/components/UserProfileNavigator/UserProfileNavigator.jsx

@@ -22,7 +22,8 @@ export default class UserProfileNavigator extends Component {
     };
 
     openMenu = (event) => {
-        this.setState({anchorEl: event.currentTarget});
+        const {enable} = this.props.gmeClient.gmeConfig.authentication;
+        this.setState({anchorEl: enable ? event.currentTarget : null});
     };
 
     closeMenu = () => {
@@ -33,7 +34,7 @@ export default class UserProfileNavigator extends Component {
         const {gmeClient} = this.props;
         const tempAnchor = window.document.createElement('a');
         tempAnchor.target = '_self';
-        tempAnchor.href = `${gmeClient.mountedPath || ''}/profile/home`;
+        tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/profile/home`;
         window.document.body.appendChild(tempAnchor);
         tempAnchor.click();
     };
@@ -42,7 +43,7 @@ export default class UserProfileNavigator extends Component {
         const {gmeClient} = this.props;
         const tempAnchor = window.document.createElement('a');
         tempAnchor.target = '_self';
-        tempAnchor.href = `${gmeClient.mountedPath || ''}/logout`;
+        tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/logout`;
         window.document.body.appendChild(tempAnchor);
         window.document.cookie = `${gmeClient.gmeConfig.authentication.jwt.cookieId}\
 =; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
@@ -53,7 +54,7 @@ export default class UserProfileNavigator extends Component {
 
     render() {
         const {anchorEl} = this.state;
-        const {userInfo, color} = this.props;
+        const {userInfo, color, gmeClient} = this.props;
 
         if (userInfo === null) {
             return null;
@@ -61,9 +62,18 @@ export default class UserProfileNavigator extends Component {
 
         return (
             <div>
-                <Button size="small" onClick={this.openMenu} style={{width: '100%', color}}>
+                <Button size="small"
+                        onClick={this.openMenu}
+                        style={{width: '100%', color}}>
                     <AccountCircle/>
-                    <span style={{marginLeft: 5, fontSize: 16}}> {userInfo.displayName || userInfo._id}</span>
+                    <span
+                        title={userInfo.displayName || userInfo._id}
+                        style={{
+                        marginLeft: 5,
+                        fontSize: 16,
+                        textOverflow: 'ellipsis',
+                        overflowX: 'auto',
+                    }}> {userInfo.displayName || userInfo._id}</span>
                 </Button>
                 <Menu
                     id="simple-menu"

src/components/UserProfileNavigator/demo.jsx

+import React, {Component} from 'react';
+
+import UserProfileNavigator from './index'
+
+export default class DemoUserProfileNavigator extends Component {
+    constructor(props) {
+        super(props);
+        this.gmeClient = new window.GME.classes.Client(window.GME.gmeConfig);
+        this.gmeClient2 = new window.GME.classes.Client(window.GME.gmeConfig);
+
+        this.gmeClient2.gmeConfig.authentication.enable = true;
+    }
+
+    render() {
+        const userInfo = {
+            _id: 'demo',
+        };
+
+        const userInfo2 = {
+            _id: 'ALongNameToEnsureItIsCropped',
+        };
+
+        const userInfo3 = {
+            _id: 'ALongNameShownInLargerWidget',
+        };
+
+        return (
+            <div style={{width: '20%'}}>
+                <div style={{width: '50%'}}>
+                <UserProfileNavigator
+                    gmeClient={this.gmeClient}
+                    userInfo={userInfo}
+                    color={'lightblue'}
+                />
+                </div>
+                <div style={{width: '50%'}}>
+                    <UserProfileNavigator
+                        gmeClient={this.gmeClient2}
+                        userInfo={userInfo2}
+                    />
+                </div>
+                <div style={{width: '100%'}}>
+                    <UserProfileNavigator
+                        gmeClient={this.gmeClient2}
+                        userInfo={userInfo3}
+                        color={'grey'}
+                    />
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file