From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Thu, 23 Mar 2017 15:15:22 +0000 (-0400)
Subject: user mgmt, project mgmt, clean up and styling
X-Git-Url: https://osm.etsi.org/gitweb/?a=commitdiff_plain;h=8e18bc5751d4d1d584396dd1d95c47835838399a;p=osm%2FUI.git

user mgmt, project mgmt, clean up and styling

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
---

diff --git a/skyquake/framework/widgets/form_controls/input.jsx b/skyquake/framework/widgets/form_controls/input.jsx
index 370afccd9..4799dc1d6 100644
--- a/skyquake/framework/widgets/form_controls/input.jsx
+++ b/skyquake/framework/widgets/form_controls/input.jsx
@@ -17,7 +17,7 @@
  */
 import './formControls.scss';
 import SelectOption from 'widgets/form_controls/selectOption.jsx';
-
+import CircleSVG from '../../../node_modules/open-iconic/svg/media-record.svg'
 import React, {Component} from 'react';
 
 export default class Input extends Component {
@@ -71,6 +71,9 @@ export default class Input extends Component {
         } else {
             displayedValue = value.toString();
         }
+        if( props.readonly && props.type == "checkbox" ) {
+            displayedValue = <img src={CircleSVG} />
+        }
         let html = (
             <label className={className} style={props.style}>
               <span> { label } {isRequired}</span>
diff --git a/skyquake/framework/widgets/header/header.scss b/skyquake/framework/widgets/header/header.scss
index 5e1e71750..6a2e56c85 100644
--- a/skyquake/framework/widgets/header/header.scss
+++ b/skyquake/framework/widgets/header/header.scss
@@ -1,5 +1,5 @@
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -17,14 +17,20 @@
  */
 
 header.header-app-component {
-    padding: 20px 0px;
+    padding: 10px 0px;
+    display:-ms-flexbox;
     display:flex;
-    flex-direction:column;
+    -ms-flex-direction:column;
+        flex-direction:column;
     .header-app-main {
+        display:-ms-flexbox;
         display:flex;
-        flex-direction:row;
-        justify-content:space-between;
-        align-items:center;
+        -ms-flex-direction:row;
+            flex-direction:row;
+        -ms-flex-pack:justify;
+            justify-content:space-between;
+        -ms-flex-align:center;
+            align-items:center;
     }
     h1 {
         /*background: url('../../style/img/header-logo.png') no-repeat;*/
@@ -39,15 +45,19 @@ header.header-app-component {
         font-size: 1.625rem;
         font-weight: 400;
         position:relative;
-        flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
 
     }
     ul {
+            display:-ms-flexbox;
             display:flex;
         }
         li {
+            display:-ms-flexbox;
             display:flex;
-             flex:1 1 auto;
+             -ms-flex:1 1 auto;
+                 flex:1 1 auto;
              border-right:1px solid #e5e5e5;
              padding: 0 1rem;
             &:last-child {
@@ -55,12 +65,13 @@ header.header-app-component {
             }
             a {
                 cursor:pointer;
-                // padding: 0.125rem;
-                // border-bottom:1px solid black;
+                /* padding: 0.125rem;*/
+                /* border-bottom:1px solid black;*/
                 text-decoration:underline;
             }
         }
     .header-app-nav {
+        display:-ms-flexbox;
         display:flex;
         margin-left: 0.25rem;
         a,span {
@@ -81,8 +92,11 @@ header.header-app-component {
         }
     }
     nav {
+        display:-ms-flexbox;
         display:flex;
-        flex:0 1 auto;
-        align-items:center;
+        -ms-flex:0 1 auto;
+            flex:0 1 auto;
+        -ms-flex-align:center;
+            align-items:center;
     }
 }
diff --git a/skyquake/framework/widgets/panel/panel.jsx b/skyquake/framework/widgets/panel/panel.jsx
index c0780693e..03877b093 100644
--- a/skyquake/framework/widgets/panel/panel.jsx
+++ b/skyquake/framework/widgets/panel/panel.jsx
@@ -60,17 +60,22 @@ Panel.defaultProps = {
 export class PanelWrapper extends Component {
     render() {
         let wrapperClass = 'skyquakePanelWrapper';
-        let {className, ...props} = this.props;
+        let {className, column, style, ...props} = this.props;
         if(className) {
             wrapperClass = `${wrapperClass} ${className}`
         }
+        if(column) {
+            style.flexDirection = 'column';
+        }
         return (
-        <div className={wrapperClass} {...props}>
+        <div className={wrapperClass} style={style} {...props}>
             {this.props.children}
         </div>)
     }
 }
-
+PanelWrapper.defaultProps = {
+    style: {}
+}
 export default Panel;
 
 
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
index a01f1547f..77e72cf70 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
@@ -1,4 +1,4 @@
-//import a reset
+/*import a reset*/
 @import '../../style/_colors.scss';
 html, body {
     height:100%;
@@ -7,8 +7,10 @@ html, body {
 
 
 .skyquakeApp {
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
+    -ms-flex-direction: column;
+        flex-direction: column;
     height: 100%;
     background: $gray-lightest;
     h1 {
@@ -20,6 +22,7 @@ html, body {
         color: #fff!important
     }
     .skyquakeNav {
+        display: -ms-flexbox;
         display: flex;
         color:white;
         background:black;
@@ -27,17 +30,22 @@ html, body {
         z-index: 10;
         font-size:0.75rem;
         .secondaryNav {
-            flex: 1 1 auto;
+            -ms-flex: 1 1 auto;
+                flex: 1 1 auto;
+            display: -ms-flexbox;
             display: flex;
-            justify-content: flex-end;
+            -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;
-                align-items: center;
+                -ms-flex-align: center;
+                    align-items: center;
                 .oi {
                     padding-right: 0.5rem;
                 }
@@ -102,18 +110,19 @@ html, body {
     .titleBar {
         padding: 1rem 0 0;
         h1 {
-        // background: url('../../style/img/header-logo.png') no-repeat;
+        /* background: url('../../style/img/header-logo.png') no-repeat;*/
         background-size:contain;
         height: 51px;
         line-height: 51px;
         margin-left: 20px;
-        // padding-left: 100px;
+        /* padding-left: 100px;*/
         left: 0;
         font-size: 1.625rem;
         font-weight: 400;
         text-align:left;
         position:relative;
-        flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
         }
     }
     .corner-accent {
diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordView.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordView.jsx
index 224bad52d..05c6e5e53 100644
--- a/skyquake/plugins/launchpad/src/recordViewer/recordView.jsx
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordView.jsx
@@ -1,6 +1,6 @@
 
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -89,7 +89,7 @@ export default class RecordView extends React.Component {
 
     let nav = <AppHeader nav={navItems} />
     if (this.state.showRecordDetails) {
-      recordDetails = <RecordDetails isLoading={this.state.detailLoading} data={this.state.rawData} />
+    recordDetails = <RecordDetails isLoading={this.state.detailLoading} data={this.state.rawData} />
     }
     html = (
       <div className="app-body recordView">
diff --git a/skyquake/plugins/user_management/config.json b/skyquake/plugins/user_management/config.json
index 4ee344e1a..0e66f6f2b 100644
--- a/skyquake/plugins/user_management/config.json
+++ b/skyquake/plugins/user_management/config.json
@@ -14,6 +14,6 @@
         "label": "Platform Role Management",
         "route": "platform",
         "component": "./platformRoleManagement/platformRoleManagement.jsx",
-        "type": "external"
+        "type": "internal"
     }]
 }
diff --git a/skyquake/plugins/user_management/src/dashboard/dashboard.jsx b/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
index 601205059..2ff5f4991 100644
--- a/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
@@ -18,7 +18,7 @@ import Button, {ButtonGroup} from 'widgets/button/sq-button.jsx';
 import SelectOption from 'widgets/form_controls/selectOption.jsx';
 import 'widgets/form_controls/formControls.scss';
 import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
-import imgRemove from '../../node_modules/open-iconic/svg/trash.svg'
+import imgRemove from '../../node_modules/open-iconic/svg/trash.svg';
 
 class UserManagementDashboard extends React.Component {
     constructor(props) {
@@ -214,84 +214,84 @@ class UserManagementDashboard extends React.Component {
         }
 
         html = (
-            <PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'flexDirection': 'row'}} >
-                <PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
-                    <Panel title="User List" style={{marginBottom: 0}} no-corners>
-                        <div className="tableRow tableRow--header">
-                            <div className="userName">
-                                Username
-                            </div>
-                            <div>
-                                Domain
+            <PanelWrapper column>
+                <AppHeader nav={[{name: 'PLATFORM ROLE MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/platform'})}]}/>
+                <PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'flexDirection': 'row'}} >
+                    <PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
+                        <Panel title="User List" style={{marginBottom: 0}} no-corners>
+                            <div className="tableRow tableRow--header">
+                                <div className="userName">
+                                    Username
+                                </div>
+                                <div>
+                                    Domain
+                                </div>
                             </div>
-                        </div>
-                        {state.users && state.users.map((u, k) => {
-                            let platformRoles = [];
-                            for(let role in u.platformRoles) {
-                                platformRoles.push(<div>{`${role}: ${u.platformRoles[role]}`}</div>)
-                            }
-                            return (
-                                <div ref={(el) => this[`user-ref-${k}`] = el} className={`tableRow tableRow--data ${((self.state.activeIndex == k) && self.state.userOpen) ? 'tableRow--data-active' : ''}`} key={k}>
-                                    <div
-                                        className={`userName userName-header ${((self.state.activeIndex == k) && self.state.userOpen) ? 'activeUser' : ''}`}
-                                        onClick={self.viewUser.bind(null, u, k)}>
-                                        {u['user-name']}
-                                    </div>
-                                    <div>
-                                        {u['user-domain']}
-                                    </div>
+                            {state.users && state.users.map((u, k) => {
+                                let platformRoles = [];
+                                for(let role in u.platformRoles) {
+                                    platformRoles.push(<div>{`${role}: ${u.platformRoles[role]}`}</div>)
+                                }
+                                return (
+                                    <div ref={(el) => this[`user-ref-${k}`] = el} className={`tableRow tableRow--data ${((self.state.activeIndex == k) && self.state.userOpen) ? 'tableRow--data-active' : ''}`} key={k}>
+                                        <div
+                                            className={`userName userName-header ${((self.state.activeIndex == k) && self.state.userOpen) ? 'activeUser' : ''}`}
+                                            onClick={self.viewUser.bind(null, u, k)}>
+                                            {u['user-name']}
+                                        </div>
+                                        <div>
+                                            {u['user-domain']}
+                                        </div>
 
 
-                                </div>
-                            )
-                        })}
-                    </Panel>
-                    <ButtonGroup  className="buttonGroup" style={{margin: '0 0.5rem 0.5rem', background: '#ddd', paddingBottom: '0.5rem'}}>
-                        <Button label="Add User" onClick={this.addUser} />
-                    </ButtonGroup>
-                </PanelWrapper>
-                <PanelWrapper onKeyUp={this.evaluateSubmit}
-                    className={`userAdmin column`}>
-                    <Panel
-                        title={state.isEdit ? state['user-name'] : 'Create User'}
-                        style={{marginBottom: 0}}
-                        hasCloseButton={this.closePanel}
-                        no-corners>
-                        <FormSection title="USER INFO">
-                        {
-                            this.state.isEdit ?
-                                null
-                                : <Input  readonly={state.isReadOnly}  label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
-                        }
-                            <Input readonly={true} label="Domain" value={state['user-domain']}  onChange={this.updateInput.bind(null, 'user-domain')}></Input>
-
-                            <Input type="radiogroup" readonly={state.isReadOnly} label="Disabled" value={state.disabled} options={[{value: true, label: 'YES'}, {value: false, label: 'NO'}]}  onChange={this.disableChange} />
-                        </FormSection>
-                        <FormSection title="PLATFORM ROLES" style={{display:'none'}}>
-                            <Input label="Super Admin" onChange={this.platformChange.bind(null, 'super_admin')} checked={state.platformRoles.super_admin} type="checkbox" />
-                            <Input label="Platform Admin" onChange={this.platformChange.bind(null, 'platform_admin')}  checked={state.platformRoles.platform_admin} type="checkbox" />
-                            <Input label="Platform Oper" onChange={this.platformChange.bind(null, 'platform_oper')}  checked={state.platformRoles.platform_oper} type="checkbox" />
-                        </FormSection>
-                        <FormSection title="PROJECT ROLES" style={{display:'none'}}>
-                            <InputCollection
-                                inital={true}
-                                type='select'
-                                readonly={state.isReadOnly}
-                                options={state.projectRolesOptions}
-                                collection={state.projectRoles}
-                                onChange={this.updateProjectRole}
-                                AddItemFn={this.addProjectRole}
-                                RemoveItemFn={this.removeProjectRole}
-                                />
-                        </FormSection>
-                        {passwordSectionHTML}
+                                    </div>
+                                )
+                            })}
+                        </Panel>
+                        <ButtonGroup  className="buttonGroup" style={{margin: '0 0.5rem 0.5rem', background: '#ddd', paddingBottom: '0.5rem'}}>
+                            <Button label="Add User" onClick={this.addUser} />
+                        </ButtonGroup>
+                    </PanelWrapper>
+                    <PanelWrapper onKeyUp={this.evaluateSubmit}
+                        className={`userAdmin column`}>
+                        <Panel
+                            title={state.isEdit ? state['user-name'] : 'Create User'}
+                            style={{marginBottom: 0}}
+                            hasCloseButton={this.closePanel}
+                            no-corners>
+                            <FormSection title="USER INFO">
+                            {
+                                this.state.isEdit ?
+                                    null
+                                    : <Input  readonly={state.isReadOnly}  label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+                            }
+                                <Input readonly={true} label="Domain" value={state['user-domain']}  onChange={this.updateInput.bind(null, 'user-domain')}></Input>
 
-                    </Panel>
-                        {formButtonsHTML}
+                                <Input type="radiogroup" readonly={state.isReadOnly} label="Disabled" value={state.disabled} options={[{value: true, label: 'YES'}, {value: false, label: 'NO'}]}  onChange={this.disableChange} />
+                            </FormSection>
+                            <FormSection title="PLATFORM ROLES" style={{display:'none'}}>
+                                <Input label="Super Admin" onChange={this.platformChange.bind(null, 'super_admin')} checked={state.platformRoles.super_admin} type="checkbox" />
+                                <Input label="Platform Admin" onChange={this.platformChange.bind(null, 'platform_admin')}  checked={state.platformRoles.platform_admin} type="checkbox" />
+                                <Input label="Platform Oper" onChange={this.platformChange.bind(null, 'platform_oper')}  checked={state.platformRoles.platform_oper} type="checkbox" />
+                            </FormSection>
+                            <FormSection title="PROJECT ROLES" style={{display:'none'}}>
+                                <InputCollection
+                                    inital={true}
+                                    type='select'
+                                    readonly={state.isReadOnly}
+                                    options={state.projectRolesOptions}
+                                    collection={state.projectRoles}
+                                    onChange={this.updateProjectRole}
+                                    AddItemFn={this.addProjectRole}
+                                    RemoveItemFn={this.removeProjectRole}
+                                    />
+                            </FormSection>
+                            {passwordSectionHTML}
 
+                        </Panel>
+                            {formButtonsHTML}
+                    </PanelWrapper>
                 </PanelWrapper>
-
-
             </PanelWrapper>
         );
         return html;
diff --git a/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js b/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js
index 2f922a995..7bccc6658 100644
--- a/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js
+++ b/skyquake/plugins/user_management/src/dashboard/userMgmtSource.js
@@ -34,6 +34,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);
                 });
               });
           },
@@ -58,6 +63,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);
                 });
             });
           },
@@ -85,6 +95,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);
               });
             });
           },
@@ -113,6 +128,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/user_management/src/platformRoleManagement/platformRoleManagement.jsx b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagement.jsx
index 39ca9efa8..761ce0dbf 100644
--- a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagement.jsx
+++ b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagement.jsx
@@ -201,98 +201,96 @@ class PlatformRoleManagement extends React.Component {
                                 )
                                 : (
                                     <ButtonGroup className="buttonGroup">
-                                        <Button label="Create" type="submit" onClick={this.updatePlatform}  />
+                                        <Button label="Edit" type="submit" onClick={this.updatePlatform}  />
                                     </ButtonGroup>
                                 )
                             )
         }
 
         html = (
-            <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
-                <PanelWrapper onKeyUp={this.evaluateSubmit}
-                    className={`ProjectAdmin column`}>
-                    <Panel
-                        title={state.isEdit ? state['name'] : 'Create Project'}
-                        style={{marginBottom: 0}}
-                        hasCloseButton={this.closePanel}
-                        no-corners>
-                        <FormSection title="USER ROLES">
+            <PanelWrapper column>
+                <AppHeader nav={[{name: 'USER MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/'})}]}/>
+                <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
+                    <PanelWrapper onKeyUp={this.evaluateSubmit}
+                        className={`ProjectAdmin column`}>
+                        <Panel
+                            title="Manage Roles"
+                            style={{marginBottom: 0}}
+                            no-corners>
+                            <FormSection title="USER ROLES">
 
-                        <table>
-                            <thead>
-                                <tr>
-                                    {!state.isReadOnly ? <td></td> : null}
-                                    <td>User Name</td>
-                                    {
-                                        state.roles.map((r,i) => {
-                                            return <td key={i}>{r}</td>
-                                        })
-                                    }
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {
-                            state.platformUsers.map((u,i)=> {
-                                let userRoles = u.role && u.role.map((r) => {
-                                    return r.role;
-                                }) || [];
-                                return (
-                                    <tr key={i}>
-                                        {!state.isReadOnly ? <td><span
-                                                                    className="removeInput"
-                                                                    onClick={self.removeUserFromProject.bind(self, u)}
-                                                                >
-                                                                    <img src={imgRemove} />
-
-                                                                </span></td> : null}
-                                        <td>
-                                            {u['user-name']}
-                                        </td>
+                            <table>
+                                <thead>
+                                    <tr>
+                                        {!state.isReadOnly ? <td></td> : null}
+                                        <td>User Name</td>
                                         {
-                                            state.roles.map((r,j) => {
-                                                return <td key={j}><Input type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
+                                            state.roles.map((r,i) => {
+                                                return <td key={i}>{r}</td>
                                             })
                                         }
                                     </tr>
-                                )
-                            })
-                        }
-                            </tbody>
-                        </table>
-                            {
-                                !state.isReadOnly ?
-                                    <div className="tableRow tableRow--header">
-                                        <div>
-                                            <div className="addUser">
-                                                <SelectOption
-                                                    onChange={this.actions.handleSelectedUser}
-                                                    defaultValue={state.selectedUser}
-                                                    initial={true}
-                                                    options={state.users && state.users.filter((u) => {
-                                                        return platformUsers.indexOf(u['user-name']) == -1
-                                                    }).map((u) => {
-                                                        return {
-                                                            label: u['user-name'],
-                                                            value: u
-                                                        }
-                                                    })}
-                                                />
-                                                <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
-                                                    Add User
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div> : null
-                            }
+                                </thead>
+                                <tbody>
+                                    {
+                                state.platformUsers.map((u,i)=> {
+                                    let userRoles = u.role && u.role.map((r) => {
+                                        return r.role;
+                                    }) || [];
+                                    return (
+                                        <tr key={i}>
+                                            {!state.isReadOnly ? <td><span
+                                                                        className="removeInput"
+                                                                        onClick={self.removeUserFromProject.bind(self, u)}
+                                                                    >
+                                                                        <img src={imgRemove} />
 
-                        </FormSection>
+                                                                    </span></td> : null}
+                                            <td>
+                                                {u['user-name']}
+                                            </td>
+                                            {
+                                                state.roles.map((r,j) => {
+                                                    return <td key={j}><Input readonly={state.isReadOnly} type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
+                                                })
+                                            }
+                                        </tr>
+                                    )
+                                })
+                            }
+                                </tbody>
+                            </table>
+                                {
+                                    !state.isReadOnly ?
+                                        <div className="tableRow tableRow--header">
+                                            <div>
+                                                <div className="addUser">
+                                                    <SelectOption
+                                                        onChange={this.actions.handleSelectedUser}
+                                                        defaultValue={state.selectedUser}
+                                                        initial={true}
+                                                        options={state.users && state.users.filter((u) => {
+                                                            return platformUsers.indexOf(u['user-name']) == -1
+                                                        }).map((u) => {
+                                                            return {
+                                                                label: u['user-name'],
+                                                                value: u
+                                                            }
+                                                        })}
+                                                    />
+                                                    <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
+                                                        Add User
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div> : null
+                                }
 
-                    </Panel>
+                            </FormSection>
+                        </Panel>
                         {formButtonsHTML}
-
+                    </PanelWrapper>
                 </PanelWrapper>
-
-
             </PanelWrapper>
         );
         return html;
diff --git a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js
index 202462203..0327e86e2 100644
--- a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js
+++ b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementSource.js
@@ -36,6 +36,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);
                 });
               });
           },
@@ -62,6 +67,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);
                 });
               });
           },
@@ -86,6 +96,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);
                 });
             });
           },
@@ -112,6 +127,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);
               });
             });
           },
@@ -140,6 +160,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/user_management/src/platformRoleManagement/platformRoleManagementStore.js b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementStore.js
index 89f77b2df..38dd1cee0 100644
--- a/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementStore.js
+++ b/skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagementStore.js
@@ -225,7 +225,7 @@ export default class PlatformRoleManagementStore {
     }
     getPlatformSuccess(platform) {
         this.alt.actions.global.hideScreenLoader.defer();
-        let platformUsers = platform.user
+        let platformUsers = platform && platform.user || [];
         let state = _.merge({
             platform: platform,
             projectOpen: true,