From abf00ef39ee93f2a7ff05a4432eb3a50a88a487e Mon Sep 17 00:00:00 2001
From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Tue, 28 Mar 2017 16:12:23 -0400
Subject: [PATCH] Project UI updates and bug fixes

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
---
 .../framework/core/modules/api/sessions.js    |   7 +-
 .../core/modules/api/userManagementAPI.js     |  28 ++++-
 .../core/modules/routes/userManagement.js     |   7 ++
 .../widgets/form_controls/selectOption.jsx    |   6 +-
 .../skyquake_container/skyquakeApp.scss       |  90 +--------------
 .../skyquake_container/skyquakeContainer.jsx  |   5 +-
 .../skyquakeContainerActions.js               |   6 +-
 .../skyquakeContainerSource.js                |  50 +++++++++
 .../skyquakeContainerStore.js                 |  29 +++++
 .../skyquakeNav.jsx                           |  50 ++++++++-
 .../widgets/skyquake_nav/skyquakeNav.scss     | 104 ++++++++++++++++++
 .../src/dashboard/dashboard.jsx               |  16 ++-
 .../src/dashboard/projectMgmtSource.js        |  27 ++++-
 .../src/dashboard/projectMgmtStore.js         |  19 +---
 .../src/dashboard/dashboard.jsx               |   2 +-
 .../src/dashboard/userMgmtSource.js           |   2 +-
 .../platformRoleManagementSource.js           |   2 +-
 .../platformRoleManagementStore.js            |  14 +--
 18 files changed, 323 insertions(+), 141 deletions(-)
 rename skyquake/framework/widgets/{skyquake_container => skyquake_nav}/skyquakeNav.jsx (85%)
 create mode 100644 skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss

diff --git a/skyquake/framework/core/modules/api/sessions.js b/skyquake/framework/core/modules/api/sessions.js
index b60950390..0ce030089 100644
--- a/skyquake/framework/core/modules/api/sessions.js
+++ b/skyquake/framework/core/modules/api/sessions.js
@@ -1,5 +1,5 @@
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -109,7 +109,10 @@ sessionsAPI.create = function(req, res) {
 
             req.session.authorization = authorization_header_string;
             req.session.loggedIn = true;
-
+            req.session.userdata = {
+                username: username,
+                // project: req.session.projectId
+            };
             var successMsg = 'User =>' + username + ' successfully logged in.';
             successMsg += req.session.projectId ? 'Project =>' + req.session.projectId + ' set as default.' : '';
 
diff --git a/skyquake/framework/core/modules/api/userManagementAPI.js b/skyquake/framework/core/modules/api/userManagementAPI.js
index e88a5dca7..19bb85447 100644
--- a/skyquake/framework/core/modules/api/userManagementAPI.js
+++ b/skyquake/framework/core/modules/api/userManagementAPI.js
@@ -33,7 +33,7 @@ UserManagement.get = function(req) {
     return new Promise(function(resolve, reject) {
         Promise.all([
             rp({
-                uri: utils.confdPort(api_server) + '/api/operational/user-config/users',
+                uri: utils.confdPort(api_server) + '/api/operational/user-config/user',
                 method: 'GET',
                 headers: _.extend({}, constants.HTTP_HEADERS.accept.data, {
                     'Authorization': req.session && req.session.authorization
@@ -46,7 +46,7 @@ UserManagement.get = function(req) {
             var response = {};
             response['data'] = {};
             if (result[0].body) {
-                response['data']['users'] = JSON.parse(result[0].body)['rw-user:users'];
+                response['data']['user'] = JSON.parse(result[0].body)['rw-user:user'];
             }
             response.statusCode = constants.HTTP_RESPONSE_CODES.SUCCESS.OK
 
@@ -62,12 +62,30 @@ UserManagement.get = function(req) {
         });
     });
 };
+
+UserManagement.getProfile = function(req) {
+    var self = this;
+    var api_server = req.query['api_server'];
+    return new Promise(function(resolve, reject) {
+        var response = {};
+            response['data'] = {
+            userId: req.session.userdata.username,
+            projectId: req.session.projectId
+        };
+            // if (result[0].body) {
+            //     response['data']['users'] = JSON.parse(result[0].body)['rw-user:users'];
+            // }
+        response.statusCode = constants.HTTP_RESPONSE_CODES.SUCCESS.OK
+
+        resolve(response);
+    });
+};
 UserManagement.create = function(req) {
     var self = this;
     var api_server = req.query['api_server'];
     var data = req.body;
     data = {
-        "users":[data]
+        "user":[data]
     }
     return new Promise(function(resolve, reject) {
         Promise.all([
@@ -107,7 +125,7 @@ UserManagement.update = function(req) {
     var api_server = req.query['api_server'];
     var bodyData = req.body;
     data = {
-        "users":[bodyData]
+        "user":[bodyData]
     }
     var updateTasks = [];
     if(bodyData.hasOwnProperty('old-password')) {
@@ -174,7 +192,7 @@ UserManagement.delete = function(req) {
     var domain = req.params.domain;
     var api_server = req.query["api_server"];
     var requestHeaders = {};
-    var url = `${utils.confdPort(api_server)}/api/config/user-config/users/${username},${domain}`
+    var url = `${utils.confdPort(api_server)}/api/config/user-config/user/${username},${domain}`
     return new Promise(function(resolve, reject) {
         _.extend(requestHeaders,
             constants.HTTP_HEADERS.accept.data,
diff --git a/skyquake/framework/core/modules/routes/userManagement.js b/skyquake/framework/core/modules/routes/userManagement.js
index 11fb8b1c9..4e272d058 100644
--- a/skyquake/framework/core/modules/routes/userManagement.js
+++ b/skyquake/framework/core/modules/routes/userManagement.js
@@ -43,6 +43,13 @@ Router.get('/user', cors(), function(req, res) {
         utils.sendErrorResponse(error, res);
     });
 });
+Router.get('/user-profile', cors(), function(req, res) {
+    UserManagementAPI.getProfile(req).then(function(response) {
+        utils.sendSuccessResponse(response, res);
+    }, function(error) {
+        utils.sendErrorResponse(error, res);
+    });
+});
 Router.post('/user', cors(), function(req, res) {
     UserManagementAPI.create(req).then(function(response) {
         utils.sendSuccessResponse(response, res);
diff --git a/skyquake/framework/widgets/form_controls/selectOption.jsx b/skyquake/framework/widgets/form_controls/selectOption.jsx
index 1e02f15da..397963e3a 100644
--- a/skyquake/framework/widgets/form_controls/selectOption.jsx
+++ b/skyquake/framework/widgets/form_controls/selectOption.jsx
@@ -28,7 +28,7 @@ export default class SelectOption extends React.Component {
   render() {
     let html;
     let defaultValue = this.props.defaultValue;
-    let options =  this.props.options.map(function(op, i) {
+    let options =  this.props.options && this.props.options.map(function(op, i) {
     let value;
     let label;
     if(typeof(op) == 'object') {
@@ -40,12 +40,12 @@ export default class SelectOption extends React.Component {
     }
 
       return <option key={i} value={JSON.stringify(value)}>{label}</option>
-    });
+    }) || [];
     if (this.props.initial) {
       options.unshift(<option key='blank' value={JSON.stringify(this.props.defaultValue)}></option>);
     }
     html = (
-        <label key={this.props.key}>
+        <label key={this.props.key} className={this.props.className}>
             {this.props.label}
             {
               this.props.readonly ? defaultValue
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
index 77e72cf70..b2493a3bd 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
@@ -16,95 +16,7 @@ html, body {
     h1 {
         text-transform: uppercase;
     }
-    .active {
-        background-color: $brand-blue!important;
-        border-color: $brand-blue!important;
-        color: #fff!important
-    }
-    .skyquakeNav {
-        display: -ms-flexbox;
-        display: flex;
-        color:white;
-        background:black;
-        position:relative;
-        z-index: 10;
-        font-size:0.75rem;
-        .secondaryNav {
-            -ms-flex: 1 1 auto;
-                flex: 1 1 auto;
-            display: -ms-flexbox;
-            display: flex;
-            -ms-flex-pack: end;
-                justify-content: flex-end;
-        }
-        .app {
-            position:relative;
-            h2 {
-                font-size:0.75rem;
-                border-right: 1px solid black;
-                display: -ms-flexbox;
-                display: flex;
-                -ms-flex-align: center;
-                    align-items: center;
-                .oi {
-                    padding-right: 0.5rem;
-                }
-            }
-            .menu {
-                position:absolute;
-                display:none;
-                z-index:2;
-                width: 100%;
-            }
-            &:first-child{
-                h2 {
-                    border-left: 1px solid black;
-                }
-            }
-            &:hover {
-                a {
-                    color:$brand-blue-light;
-                    cursor:pointer;
-                }
-                .menu {
-                    display:block;
-                    background:black;
-                    a {
-                        color:white;
-                    }
-                    li:hover {
-                        a {
-                            color:$brand-blue-light;
-                        }
-                    }
-                }
-            }
-            &.active {
-                color:white;
-                background:black;
-                a {
-                    color:white;
-                }
-            }
-        }
-        a{
-            display:block;
-            padding:0.5rem 1rem;
-            text-decoration:none;
-            text-transform:uppercase;
-            color:white;
-        }
-        &:before {
-            content: '';
-            height:1.85rem;
-            width:5.5rem;
-            /*margin:0 1rem;*/
-            /*padding:0 0.125rem;*/
-            /*background: url('../../style/img/svg/riftio_logo_white.svg') no-repeat center center;*/
-            background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
-            background-size: contain;
-        }
-    }
+
     .skyquakeContainerWrapper {
     }
     .titleBar {
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx
index 558cc620b..b8d768c2a 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx
@@ -18,7 +18,7 @@
 import React from 'react';
 import AltContainer from 'alt-container';
 import Alt from './skyquakeAltInstance.js';
-import SkyquakeNav from './skyquakeNav.jsx';
+import SkyquakeNav from '../skyquake_nav/skyquakeNav.jsx';
 import EventCenter from './eventCenter.jsx';
 import SkyquakeContainerActions from './skyquakeContainerActions.js'
 import SkyquakeContainerStore from './skyquakeContainerStore.js';
@@ -111,7 +111,8 @@ export default class skyquakeContainer extends React.Component {
                         <ScreenLoader show={displayScreenLoader}/>
                         <SkyquakeNav nav={this.state.nav}
                             currentPlugin={this.state.currentPlugin}
-                            store={SkyquakeContainerStore} />
+                            store={SkyquakeContainerStore}
+                            projects={this.state.projects} />
                         <div className="titleBar">
                             <h1>{(this.state.nav.name ? this.state.nav.name.replace('_', ' ').replace('-', ' ') : this.state.currentPlugin && this.state.currentPlugin.replace('_', ' ').replace('-', ' ')) + tag}</h1>
                         </div>
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js
index 773978bc9..c03ae6f71 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerActions.js
@@ -1,5 +1,5 @@
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -29,5 +29,7 @@ export default Alt.generateActions(
     'hideNotification',
     //Screen Loader
     'showScreenLoader',
-    'hideScreenLoader'
+    'hideScreenLoader',
+    'openProjectSocketSuccess',
+    'getUserProfileSuccess'
 );
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js
index ae2147a59..7ea5ffcdb 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerSource.js
@@ -113,6 +113,56 @@ export default {
             success: SkyquakeContainerActions.openNotificationsSocketSuccess,
             error: SkyquakeContainerActions.openNotificationsSocketError
         }
+    },
+    openProjectSocket() {
+            return {
+                remote: function(state) {
+                    return new Promise(function(resolve, reject) {
+                        //If socket connection already exists, eat the request.
+                        if(state.socket) {
+                            return resolve(false);
+                        }
+                        $.ajax({
+                            url: '/socket-polling',
+                            type: 'POST',
+                            beforeSend: Utils.addAuthorizationStub,
+                            data: {
+                                url: '/project?api_server=' + API_SERVER
+                            },
+                            success: function(data, textStatus, jqXHR) {
+                                Utils.checkAndResolveSocketRequest(data, resolve, reject);
+                            }
+                            })
+                        .fail(function(xhr){
+                            //Authentication and the handling of fail states should be wrapped up into a connection class.
+                            Utils.checkAuthentication(xhr.status);
+                        });;
+                    });
+                },
+            success: SkyquakeContainerActions.openProjectSocketSuccess
+        }
+    },
+
+    getUserProfile() {
+        return {
+            remote: function(state, recordID) {
+                return new Promise(function(resolve, reject) {
+                    $.ajax({
+                        url: '/user-profile?api_server=' + API_SERVER,
+                        type: 'GET',
+                        beforeSend: Utils.addAuthorizationStub,
+                        success: function(data) {
+                            resolve(data);
+                        }
+                    }).fail(function(xhr) {
+                        //Authentication and the handling of fail states should be wrapped up into a connection class.
+                        Utils.checkAuthentication(xhr.status);
+                    });;
+                });
+            },
+            success: SkyquakeContainerActions.getUserProfileSuccess
+        }
     }
+
 }
 
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js b/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js
index d1a8a9e28..07010cde5 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainerStore.js
@@ -20,6 +20,7 @@
 import Alt from './skyquakeAltInstance.js';
 import SkyquakeContainerSource from './skyquakeContainerSource.js';
 import SkyquakeContainerActions from './skyquakeContainerActions';
+let Utils = require('utils/utils.js');
 import _ from 'lodash';
 //Temporary, until api server is on same port as webserver
 var rw = require('utils/rw.js');
@@ -32,6 +33,8 @@ class SkyquakeContainerStore {
         this.nav = {};
         this.notifications = [];
         this.socket = null;
+        this.projects = [];
+        this.user = {};
         //Notification defaults
         this.notificationMessage = '';
         this.displayNotification = false;
@@ -161,6 +164,32 @@ class SkyquakeContainerStore {
         })
     }
 
+    openProjectSocketSuccess = (connection) => {
+        var self = this;
+        var ws = window.multiplexer.channel(connection);
+        if (!connection) return;
+        self.setState({
+            socket: ws.ws,
+            channelId: connection
+        });
+        ws.onmessage = function(socket) {
+            try {
+                var data = JSON.parse(socket.data);
+                Utils.checkAuthentication(data.statusCode, function() {
+                    self.closeSocket();
+                });
+
+                self.setState({
+                    projects: data.project
+                });
+            } catch(e) {
+                console.log('HIT an exception in openProjectSocketSuccess', e);
+            }
+        };
+    }
+    getUserProfileSuccess = (user) => {
+        this.setState({user})
+    }
     //Notifications
     showNotification = (data) => {
         let state = {
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeNav.jsx b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx
similarity index 85%
rename from skyquake/framework/widgets/skyquake_container/skyquakeNav.jsx
rename to skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx
index 73a2f021e..01158c7f0 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeNav.jsx
+++ b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx
@@ -1,5 +1,5 @@
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,6 +22,10 @@ import Utils from 'utils/utils.js';
 import Crouton from 'react-crouton';
 import 'style/common.scss';
 
+import './skyquakeNav.scss';
+import SelectOption from '../form_controls/selectOption.jsx';
+import {FormSection} from '../form_controls/formControls.jsx';
+
 //Temporary, until api server is on same port as webserver
 var rw = require('utils/rw.js');
 var API_SERVER = rw.getSearchParams(window.location).api_server;
@@ -49,6 +53,36 @@ class LogoutAppMenuItem extends React.Component {
 }
 
 
+class UserNav extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    selectProject(e) {
+        let value = JSON.parse(e.currentTarget.value)
+        console.log('selected project', value)
+    }
+    render() {
+        let projects = this.props.projects.map((p,i) => {
+            return {
+                label: p.name,
+                value: p
+            }
+        })
+        return (
+            <div className="userSection">
+                Project:
+                <SelectOption options={projects} onChange={this.selectProject} className="projectSelect"/>
+            </div>
+        )
+    }
+}
+
+UserNav.defaultProps = {
+    projects: [
+
+    ]
+}
+
 //
 // Exported classes and functions
 //
@@ -64,6 +98,10 @@ export default class skyquakeNav extends React.Component {
         this.state.validateErrorEvent = 0;
         this.state.validateErrorMsg = '';
     }
+    componentDidMount() {
+        this.props.store.openProjectSocket();
+        this.props.store.getUserProfile();
+    }
     validateError = (msg) => {
         this.setState({
             validateErrorEvent: true,
@@ -90,7 +128,7 @@ export default class skyquakeNav extends React.Component {
                 <div>
                 {this.returnCrouton()}
             <nav className="skyquakeNav">
-                {buildNav.call(this, this.props.nav, this.props.currentPlugin)}
+                {buildNav.call(this, this.props.nav, this.props.currentPlugin, this.props)}
             </nav>
 
             </div>
@@ -156,12 +194,15 @@ export function returnLinkItem(link) {
     return ref;
 }
 
+
+
+
 /**
  * Constructs nav for each plugin, along with available subnavs
  * @param  {array} nav List returned from /nav endpoint.
  * @return {array}     List of constructed nav element for each plugin
  */
-export function buildNav(nav, currentPlugin) {
+export function buildNav(nav, currentPlugin, props) {
     let navList = [];
     let navListHTML = [];
     let secondaryNav = [];
@@ -169,7 +210,8 @@ export function buildNav(nav, currentPlugin) {
     self.hasSubNav = {};
     let secondaryNavHTML = (
         <div className="secondaryNav" key="secondaryNav">
-        {secondaryNav}
+            {secondaryNav}
+            <UserNav projects={props.projects}/>
             <LogoutAppMenuItem />
         </div>
     )
diff --git a/skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss
new file mode 100644
index 000000000..76df1ab16
--- /dev/null
+++ b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss
@@ -0,0 +1,104 @@
+@import '../../style/_colors.scss';
+.active {
+        background-color: $brand-blue!important;
+        border-color: $brand-blue!important;
+        color: #fff!important
+    }
+    .skyquakeNav {
+        display: -ms-flexbox;
+        display: flex;
+        color:white;
+        background:black;
+        position:relative;
+        z-index: 10;
+        font-size:0.75rem;
+        .secondaryNav {
+            -ms-flex: 1 1 auto;
+                flex: 1 1 auto;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-pack: end;
+                justify-content: flex-end;
+        }
+        .app {
+            position:relative;
+            display:-ms-flexbox;
+            display:flex;
+            h2 {
+                font-size:0.75rem;
+                border-right: 1px solid black;
+                display: -ms-flexbox;
+                display: flex;
+                -ms-flex-align: center;
+                    align-items: center;
+                .oi {
+                    padding-right: 0.5rem;
+                }
+            }
+            .menu {
+                position:absolute;
+                display:none;
+                z-index:2;
+                width: 100%;
+            }
+            &:first-child{
+                h2 {
+                    border-left: 1px solid black;
+                }
+            }
+            &:hover {
+                a {
+                    color:$brand-blue-light;
+                    cursor:pointer;
+                }
+                .menu {
+                    display:block;
+                    background:black;
+                    a {
+                        color:white;
+                    }
+                    li:hover {
+                        a {
+                            color:$brand-blue-light;
+                        }
+                    }
+                }
+            }
+            &.active {
+                color:white;
+                background:black;
+                a {
+                    color:white;
+                }
+            }
+        }
+        a{
+            display:block;
+            padding:0.5rem 1rem;
+            text-decoration:none;
+            text-transform:uppercase;
+            color:white;
+        }
+        &:before {
+            content: '';
+            min-width: 5.5rem;
+            margin: 0.125rem 1rem;
+            background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
+            background-size: contain;
+        }
+        .userSection {
+            display:-ms-flexbox;
+            display:flex;
+            -ms-flex-align:center;
+            align-items:center;
+            padding-left: 1rem;
+            text-transform:uppercase;
+            border-left:1px solid white;
+            .projectSelect {
+                padding-left: 0.5rem;
+                font-size: 1rem;
+                min-width: 75%;
+                height: 25px;
+            }
+        }
+    }
diff --git a/skyquake/plugins/project_management/src/dashboard/dashboard.jsx b/skyquake/plugins/project_management/src/dashboard/dashboard.jsx
index 71921a7ce..8cda80269 100644
--- a/skyquake/plugins/project_management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/project_management/src/dashboard/dashboard.jsx
@@ -94,9 +94,10 @@ class ProjectManagementDashboard extends React.Component {
         let self = this;
         e.preventDefault();
         e.stopPropagation();
-        let projectUsers = self.state.projectUsers;
-        let cleanUsers = this.cleanUsers(projectUsers);
         let projectName = self.state['name'];
+        let projectUsers = self.state.projectUsers;
+        let cleanUsers = this.cleanUsers(projectUsers, projectName);
+
 
         this.Store.createProject({
             'name': projectName,
@@ -111,9 +112,10 @@ class ProjectManagementDashboard extends React.Component {
         let self = this;
         e.preventDefault();
         e.stopPropagation();
+         let projectName = self.state['name'];
         let projectUsers = self.state.projectUsers;
-        let cleanUsers = this.cleanUsers(projectUsers);
-        let projectName = self.state['name'];
+        let cleanUsers = this.cleanUsers(projectUsers, projectName);
+
 
         this.Store.updateProject(_.merge({
             'name': projectName,
@@ -124,7 +126,7 @@ class ProjectManagementDashboard extends React.Component {
             }
         }));
     }
-    cleanUsers(projectUsers) {
+    cleanUsers(projectUsers, projectName) {
         let cleanUsers = [];
         //Remove null values from role
         projectUsers.map((u) => {
@@ -132,8 +134,10 @@ class ProjectManagementDashboard extends React.Component {
            u.role && u.role.map((r,i) => {
              let role = {};
              //you may add a user without a role or a keys, but if one is present then the other must be as well.
-            if(!r.role || ( !r || ((r.role || r['keys']) && (!r.role || !r['keys'])))) {
+            if(!r.role ) {
             } else {
+                delete r.keys;
+                    // r.keys = projectName;
                     cleanRoles.push(r)
             }
            });
diff --git a/skyquake/plugins/project_management/src/dashboard/projectMgmtSource.js b/skyquake/plugins/project_management/src/dashboard/projectMgmtSource.js
index ce0c984fe..55646e885 100644
--- a/skyquake/plugins/project_management/src/dashboard/projectMgmtSource.js
+++ b/skyquake/plugins/project_management/src/dashboard/projectMgmtSource.js
@@ -25,11 +25,16 @@ module.exports = function(Alt) {
                   type: 'GET',
                   beforeSend: Utils.addAuthorizationStub,
                   success: function(data, textStatus, jqXHR) {
-                    resolve(data.users);
+                    resolve(data.user);
                   }
                 }).fail(function(xhr){
                   //Authentication and the handling of fail states should be wrapped up into a connection class.
                   Utils.checkAuthentication(xhr.status);
+                  let msg = xhr.responseText;
+                  if(xhr.errorMessage) {
+                    msg = xhr.errorMessage
+                  }
+                  reject(msg);
                 });
               });
           },
@@ -53,6 +58,11 @@ module.exports = function(Alt) {
                 }).fail(function(xhr){
                   //Authentication and the handling of fail states should be wrapped up into a connection class.
                   Utils.checkAuthentication(xhr.status);
+                  let msg = xhr.responseText;
+                  if(xhr.errorMessage) {
+                    msg = xhr.errorMessage
+                  }
+                  reject(msg);
                 });
               });
           },
@@ -77,6 +87,11 @@ module.exports = function(Alt) {
                 }).fail(function(xhr){
                   //Authentication and the handling of fail states should be wrapped up into a connection class.
                   Utils.checkAuthentication(xhr.status);
+                  let msg = xhr.responseText;
+                  if(xhr.errorMessage) {
+                    msg = xhr.errorMessage
+                  }
+                  reject(msg);
                 });
             });
           },
@@ -100,6 +115,11 @@ module.exports = function(Alt) {
               }).fail(function(xhr){
                 //Authentication and the handling of fail states should be wrapped up into a connection class.
                 Utils.checkAuthentication(xhr.status);
+                let msg = xhr.responseText;
+                if(xhr.errorMessage) {
+                  msg = xhr.errorMessage
+                }
+                reject(msg);
               });
             });
           },
@@ -125,6 +145,11 @@ module.exports = function(Alt) {
                 }).fail(function(xhr){
                   //Authentication and the handling of fail states should be wrapped up into a connection class.
                   Utils.checkAuthentication(xhr.status);
+                  let msg = xhr.responseText;
+                  if(xhr.errorMessage) {
+                    msg = xhr.errorMessage
+                  }
+                  reject(msg);
                 });
               });
             },
diff --git a/skyquake/plugins/project_management/src/dashboard/projectMgmtStore.js b/skyquake/plugins/project_management/src/dashboard/projectMgmtStore.js
index 1cb2088f0..17a5a5960 100644
--- a/skyquake/plugins/project_management/src/dashboard/projectMgmtStore.js
+++ b/skyquake/plugins/project_management/src/dashboard/projectMgmtStore.js
@@ -15,7 +15,7 @@ export default class ProjectManagementStore {
         this.projectUsers = [];
         this.selectedUser = null;
         this.selectedRole = null;
-        this.roles = ['rw-rbac-platform:platform-admin', 'rw-rbac-platform:platform-oper', 'rw-rbac-platform:super-admin'
+        this.roles = ['rw-project:project-admin', 'rw-project:project-oper', 'rw-project:project-create'
         // ,'some_other_role', 'yet_another_role', 'operator_role', 'some_other_role', 'yet_another_role'
         ];
         this.users = [];
@@ -147,17 +147,17 @@ export default class ProjectManagementStore {
         });
     }
     handleAddUser(e) {
+        let self = this;
         let u = JSON.parse(this.selectedUser);
         let r = this.selectedRole;
         let projectUsers = this.projectUsers;
-        let keys = ',';
         console.log('adding user')
         projectUsers.push({
           'user-name': u['user-name'],
           'user-domain': u['user-domain'],
           "role":[{
                       "role": r,
-                      "keys": keys
+                      "keys": self.name
             }
           ]
         })
@@ -168,16 +168,14 @@ export default class ProjectManagementStore {
         let {userIndex, roleIndex, checked} = data;
         let projectUsers = this.projectUsers;
         let selectedRole = self.roles[roleIndex];
-        let keys = ',';
         if(checked) {
             if(!projectUsers[userIndex].role) projectUsers[userIndex].role = [];
             projectUsers[userIndex].role.push({
-                role: self.roles[roleIndex],
-                keys: keys
+                role: self.roles[roleIndex]
             })
         } else {
             let role = projectUsers[userIndex].role;
-            let roleIndex = _.findIndex(role, {role:selectedRole, keys: keys})
+            let roleIndex = _.findIndex(role, {role:selectedRole})
             projectUsers[userIndex].role.splice(roleIndex, 1)
         }
        self.setState({projectUsers});
@@ -186,9 +184,7 @@ export default class ProjectManagementStore {
     handleUpdateUserRoleInProject(data) {
         let {userIndex, roleIndex, value} = data;
         let projectUsers = this.projectUsers;
-        let keys = ',';
         projectUsers[userIndex].role[roleIndex].role = value;
-        projectUsers[userIndex].role[roleIndex]['keys'] = keys;
 
     }
     addRoleToUserInProject(userIndex) {
@@ -196,11 +192,8 @@ export default class ProjectManagementStore {
         if(!projectUsers[userIndex].role) {
             projectUsers[userIndex].role = [];
         }
-        let keys = ',';
         projectUsers[userIndex].role.push({
-              'role': null,
-              //temp until we get actual keys
-              'keys' : keys
+              'role': null
             });
         this.setState({
             projectUsers
diff --git a/skyquake/plugins/user_management/src/dashboard/dashboard.jsx b/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
index 0275831a6..f946cbb22 100644
--- a/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
@@ -79,7 +79,7 @@ class UserManagementDashboard extends React.Component {
     cancelEditUser = () => {
         this.actions.editUser(true)
     }
-    closePanel = () => {
+    osePanel = () => {
         this.actions.handleCloseUserPanel();
     }
     // updateUser = (e) => {
diff --git a/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js b/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js
index a5c62429c..08460ba09 100644
--- a/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js
+++ b/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js
@@ -25,7 +25,7 @@ module.exports = function(Alt) {
                   type: 'GET',
                   beforeSend: Utils.addAuthorizationStub,
                   success: function(data, textStatus, jqXHR) {
-                    resolve(data.users);
+                    resolve(data.user);
                   }
                 }).fail(function(xhr){
                   //Authentication and the handling of fail states should be wrapped up into a connection class.
diff --git a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js
index ad6e818ee..2e1f3c0e8 100644
--- a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js
+++ b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js
@@ -25,7 +25,7 @@ module.exports = function(Alt) {
                   type: 'GET',
                   beforeSend: Utils.addAuthorizationStub,
                   success: function(data, textStatus, jqXHR) {
-                    resolve(data.users);
+                    resolve(data.user);
                   }
                 }).fail(function(xhr){
                   //Authentication and the handling of fail states should be wrapped up into a connection class.
diff --git a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementStore.js b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementStore.js
index 38dd1cee0..326f13a0f 100644
--- a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementStore.js
+++ b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementStore.js
@@ -150,14 +150,12 @@ export default class PlatformRoleManagementStore {
         let u = JSON.parse(this.selectedUser);
         let r = this.selectedRole;
         let platformUsers = this.platformUsers;
-        let keys = ","
         console.log('adding user')
         platformUsers.push({
           'user-name': u['user-name'],
           'user-domain': u['user-domain'],
           "role":[{
-                      "role": r,
-                      "keys": keys
+                      "role": r
             }
           ]
         })
@@ -168,16 +166,13 @@ export default class PlatformRoleManagementStore {
         let {userIndex, roleIndex, checked} = data;
         let platformUsers = this.platformUsers;
         let selectedRole = self.roles[roleIndex];
-        let keys = ","
         if(checked) {
             if(!platformUsers[userIndex].role) platformUsers[userIndex].role = [];
             platformUsers[userIndex].role.push({
-                role: selectedRole,
-                keys: keys
+                role: selectedRole
             })
         } else {
             let role = platformUsers[userIndex].role;
-            let roleIndex = _.findIndex(role, {role:selectedRole, keys: keys})
             platformUsers[userIndex].role.splice(roleIndex, 1)
         }
        self.setState({platformUsers});
@@ -187,7 +182,6 @@ export default class PlatformRoleManagementStore {
         let {userIndex, roleIndex, value} = data;
         let platformUsers = this.platformUsers;
         platformUsers[userIndex].role[roleIndex].role = value;
-        platformUsers[userIndex].role[roleIndex]['keys'] = value;
 
     }
     addRoleToUserInProject(userIndex) {
@@ -196,9 +190,7 @@ export default class PlatformRoleManagementStore {
             platformUsers[userIndex].role = [];
         }
         platformUsers[userIndex].role.push({
-              'role': null,
-              //temp until we get actual keys
-              'keys' : ','
+              'role': null
             });
         this.setState({
             platformUsers
-- 
2.25.1