Fix the userInfo

Fix user Info window, now clicking on the user name make it appears +
attempt to add a logout

Issue-ID: CLAMP-393
Change-Id: I82686a848f7ccae95c1eab22f1923a8821ba76b1
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

5 files changed, 47 insertions, 21 deletions

diff --git a/ui-react/package.json b/ui-react/package.json
index 358152b5b..65608bed4 100644
--- a/ui-react/package.json
+++ b/ui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "onap-clamp-ui",
-  "version": "4.1.0-SNAPSHOT",
+  "version": "4.1.1-SNAPSHOT",
   "description": "ONAP Clamp Loop Designer UI",
   "author": "ONAP Clamp Team",
   "license": "Apache-2.0",
@@ -9,7 +9,7 @@
     "registry": "https://nexus3.onap.org/repository/npm.snapshot/"
   },
   "main": "index.js",
-  "proxy": "https://localhost:8080",
+  "proxy": "https://localhost:8443",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 9389ad656..fb595ded0 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -106,6 +106,7 @@ export default class LoopUI extends React.Component {
 	constructor() {
 		super();
 		this.getUser = this.getUser.bind(this);
+		this.logout = this.logout.bind(this);
 		this.updateLoopCache = this.updateLoopCache.bind(this);
 		this.loadLoop = this.loadLoop.bind(this);
 		this.closeLoop = this.closeLoop.bind(this);
@@ -120,6 +121,14 @@ export default class LoopUI extends React.Component {
 			this.setState({ userName: user })
 		});
 	}
+	
+	logout() {
+		UserService.logout().then(user => {
+			this.setState({ userName: user });
+			window.location.reload();
+		});
+		
+	}
 
 	renderMenuNavBar() {
 		return (
@@ -205,8 +214,8 @@ export default class LoopUI extends React.Component {
 		this.setState({ loopCache: new LoopCache({}), loopName: LoopUI.defaultLoopName });
 		this.props.history.push('/');
 	}
-	
- render() {
+
+	render() {
 		return (
 				<StyledMainDiv id="main_div">
 				<Route path="/operationalPolicyModal"
@@ -223,7 +232,8 @@ export default class LoopUI extends React.Component {
 				<Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
 				<Route path="/deploy" render={(routeProps) => (<DeployLoop {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
 				<Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
-					<GlobalClampStyle />
+				<Route path="/logout" render={this.logout} />
+				<GlobalClampStyle />
 					{this.renderNavBar()}
 					{this.renderLoopViewer()}
 				</StyledMainDiv>
diff --git a/ui-react/src/api/UserService.js b/ui-react/src/api/UserService.js
index be21e692a..37ec73d1a 100644
--- a/ui-react/src/api/UserService.js
+++ b/ui-react/src/api/UserService.js
@@ -47,6 +47,31 @@ export default class UserService {
 			return UserService.notLoggedUserName;
 		});
 	}
+	
+	static logout() {
+		return fetch('/restservices/clds/v1/user/logout', {
+			method: 'POST',
+			credentials: 'same-origin',
+		})
+		.then(function (response) {
+			console.debug("logout response received, status code:", response.status);
+			if (response.ok) {
+				return response.text();
+			} else {
+				console.error("logout response is nok");
+				return UserService.notLoggedUserName;
+			}
+		})
+		.then(function (data) {
+			console.info ("User disconnected:",data)
+			return data;
+		})
+		.catch(function(error) {
+			console.warn("logout error received, user set to: ",UserService.notLoggedUserName);
+			console.error("logout error:",error);
+			return UserService.notLoggedUserName;
+		});
+	}
 
 	static getUserInfo() {
 		return fetch('/restservices/clds/v1/clds/cldsInfo', {
diff --git a/ui-react/src/components/dialogs/UserInfo.js b/ui-react/src/components/dialogs/UserInfo.js
index b8d68b849..7d81b38b3 100644
--- a/ui-react/src/components/dialogs/UserInfo.js
+++ b/ui-react/src/components/dialogs/UserInfo.js
@@ -39,7 +39,6 @@ export default class UserInfo extends React.Component {
 		super(props, context);
 
 		this.handleClose = this.handleClose.bind(this);
-		this.initialValues = this.initialValues.bind(this);
 		this.renderReadTemplatePermission = this.renderReadTemplatePermission.bind(this);
 		this.renderReadModelPermission = this.renderReadModelPermission.bind(this);
 		this.renderReadToscaPermission = this.renderReadToscaPermission.bind(this);
@@ -49,23 +48,15 @@ export default class UserInfo extends React.Component {
 		this.renderUserName = this.renderUserName.bind(this);
 		this.state = {
 			show: true,
-			userInfo: {permissionReadTemplate: true,
-						permissionReadCl: true,
-						permissionReadTosca: true,
-						permissionUpdateCl: true,
-						permissionUpdateTemplate: true,
-						permissionUpdateTosca: true,
-						userName: 'admin',
-						cldsVersion: '1.0.0'
-						}
+			userInfo: {}
 		};
-
 	}
-	initialValues() {
+	componentWillMount() {
 		UserService.getUserInfo().then(userInfo => {
 			this.setState({ userInfo: userInfo })
 		});
 	}
+
 	handleClose() {
 			this.props.history.push('/');
 	}
@@ -127,7 +118,7 @@ export default class UserInfo extends React.Component {
 	}
 	render() {
 		return (
-			<ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose} onEntered={this.initialValues}>
+			<ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose}>
 				<Modal.Header closeButton>
 					<Modal.Title>User Info</Modal.Title>
 				</Modal.Header>
diff --git a/ui-react/src/index.js b/ui-react/src/index.js
index cbbdc65ef..dd83096ea 100644
--- a/ui-react/src/index.js
+++ b/ui-react/src/index.js
@@ -23,13 +23,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import OnapClamp from './OnapClamp';
-import { Route, BrowserRouter } from 'react-router-dom'
+import { Route, MemoryRouter } from 'react-router-dom'
 
 
 const routing = (
-	<BrowserRouter forceRefresh={false}>
+	<MemoryRouter forceRefresh={false}>
 		<Route path="/" component={OnapClamp}/>
-	</BrowserRouter>
+	</MemoryRouter>
 );
 
 export var mainClamp = ReactDOM.render(