From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Wed, 8 Mar 2017 14:41:23 +0000 (-0500)
Subject: User Management: Create and delete. Styling and enter key
X-Git-Url: https://osm.etsi.org/gitweb/?a=commitdiff_plain;h=939003042b55d4d24dfbb11daac75821f65c04dc;p=osm%2FUI.git

User Management: Create and delete. Styling and enter key

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

diff --git a/skyquake/framework/style/_colors.scss b/skyquake/framework/style/_colors.scss
index 353a10332..24a4475f6 100644
--- a/skyquake/framework/style/_colors.scss
+++ b/skyquake/framework/style/_colors.scss
@@ -66,8 +66,8 @@ $neutral-light-3: hsl(360, 100%, 50%);
 $neutral-light-4: hsl(360, 100%, 50%);
 $neutral-light-5: hsl(360, 100%, 50%);
 
-$neutral-dark-1: hsl(360, 100%, 50%);
-$neutral-dark-2: hsl(360, 100%, 50%);
+$neutral-dark-1: hsl(0, 0%, 63.7%);
+$neutral-dark-2: hsl(0, 0%, 56.7%);
 $neutral-dark-3: hsl(0, 0%, 49.7%);
 $neutral-dark-4: hsl(0, 0%, 42.7%);
 $neutral-dark-5: hsl(0, 0%, 35.7%);
diff --git a/skyquake/framework/widgets/button/button.scss b/skyquake/framework/widgets/button/button.scss
index e4eb7a4a3..043a769ac 100644
--- a/skyquake/framework/widgets/button/button.scss
+++ b/skyquake/framework/widgets/button/button.scss
@@ -111,7 +111,8 @@ button{
   /* Focus */
   &:focus {
     /* box-shadow: $focus-shadow;*/
-    border: 1px solid red;
+    border: 1px solid;
+    border-color: darken($normalHoverBackground, 10%);
   }
 
   /* SIZES
diff --git a/skyquake/framework/widgets/panel/panel.jsx b/skyquake/framework/widgets/panel/panel.jsx
index b26b1b122..c0780693e 100644
--- a/skyquake/framework/widgets/panel/panel.jsx
+++ b/skyquake/framework/widgets/panel/panel.jsx
@@ -59,8 +59,13 @@ Panel.defaultProps = {
 
 export class PanelWrapper extends Component {
     render() {
+        let wrapperClass = 'skyquakePanelWrapper';
+        let {className, ...props} = this.props;
+        if(className) {
+            wrapperClass = `${wrapperClass} ${className}`
+        }
         return (
-        <div className={'skyquakePanelWrapper ' + this.props.className} style={this.props.style}>
+        <div className={wrapperClass} {...props}>
             {this.props.children}
         </div>)
     }
diff --git a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
index b5924ae08..2f3bf5b3a 100644
--- a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
@@ -100,7 +100,17 @@ class UserManagementDashboard extends React.Component {
             });
         }
     }
-
+     evaluateSubmit = (e) => {
+        if (e.keyCode == 13) {
+            if (this.props.isEdit) {
+                this.updateUser(e);
+            } else {
+                this.createUser(e);
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
     onTransitionEnd = (e) => {
         this.actions.handleHideColumns(e);
         console.log('transition end')
@@ -122,13 +132,13 @@ class UserManagementDashboard extends React.Component {
                                 Domain
                             </div>
                         </div>
-                        {state.users.map((u, k) => {
+                        {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 className={`tableRow tableRow--data ${((self.state.activeIndex == k) && !self.state.userOpen) ? 'tableRow--data-active' : ''}`} key={k}>
+                                <div 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)}>
@@ -147,7 +157,7 @@ class UserManagementDashboard extends React.Component {
                         <Button label="Add User" onClick={this.addUser} />
                     </ButtonGroup>
                 </PanelWrapper>
-                <PanelWrapper
+                <PanelWrapper onKeyUp={this.evaluateSubmit}
                     className={`userAdmin column`}>
                     <Panel
                         title={state.isEdit ? state['user-name'] : 'Create User'}
@@ -201,17 +211,16 @@ class UserManagementDashboard extends React.Component {
                             state.isEdit ?
                             (
                                 <ButtonGroup className="buttonGroup">
-                                    <Button label="Update" onClick={this.updateUser} />
+                                    <Button label="Update" type="submit" onClick={this.updateUser} />
                                     <Button label="Delete" onClick={this.deleteUser} />
                                 </ButtonGroup>
                             )
                             : (
                                 <ButtonGroup className="buttonGroup">
-                                    <Button label="Create" onClick={this.createUser}  />
+                                    <Button label="Create" type="submit" onClick={this.createUser}  />
                                 </ButtonGroup>
                             )
                         }
-
                 </PanelWrapper>
 
             </PanelWrapper>
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmt.scss b/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
index 127172930..f107686e0 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
@@ -151,7 +151,9 @@
     display:-ms-flexbox;
     display:flex;
     -ms-flex-wrap: nowrap;
-        flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    padding: 0.25rem;
+    margin: .125rem 0;
     >div {
         padding:0.25rem 1rem 0.25rem 0;
         -ms-flex: 1 1 33%;
@@ -161,11 +163,12 @@
         font-weight:bold;
     }
     &--data {
-        &:hover, .activeUser{
+        &:hover, .activeUser, &-active{
             cursor:pointer;
-            background:$neutral-dark-3;
+            background:$neutral-dark-1;
             color:white;
         }
+
     }
 }
 
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js b/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
index 2293aca8b..407d9d2d4 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
@@ -164,7 +164,7 @@ export default class UserManagementStore {
     }
     updateUserSuccess() {
         this.alt.actions.global.hideScreenLoader.defer();
-        let users = this.users;
+        let users = this.users || [];
         users[this.activeIndex] = {
             'user-name': this['user-name'],
             'user-domain': this['user-domain'],
@@ -182,7 +182,7 @@ export default class UserManagementStore {
     }
     createUserSuccess() {
         this.alt.actions.global.hideScreenLoader.defer();
-        let users = this.users;
+        let users = this.users || [];
         users.push({
             'user-name': this['user-name'],
             'user-domain': this['user-domain'],