User Management Dashboard:

User info row striping
Added status colum to user table
Edit mode shows only editable things
Update button moved to right hand side
Added cancel button to create user

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 9b5e685..df07597 100644 (file)
--- a/skyquake/framework/widgets/form_controls/input.jsx
+++ b/skyquake/framework/widgets/form_controls/input.jsx
@@ -95,9 +95,6 @@ export default class Input extends Component {
 
 function buildRadioButtons(props) {
     let className = 'sqCheckBox';
-    if (props.className) {
-        className = `${className} ${props.className}`;
-    }
     return(
        <div className={className}>
             {

diff --git a/skyquake/plugins/user_management/src/dashboard/dashboard.jsx b/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
index 30ee04d..7af0614 100644 (file)
--- a/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
@@ -224,13 +224,14 @@ class UserManagementDashboard extends React.Component {
                                 state.isEdit ?
                                 (
                                     <ButtonGroup className="buttonGroup">
-                                        <Button label="Update" type="submit" onClick={this.updateUser} />
                                         <Button label="Delete" onClick={this.deleteUser} />
                                         <Button label="Cancel" onClick={this.cancelEditUser} />
+                                        <Button label="Update" type="submit" onClick={this.updateUser} />
                                     </ButtonGroup>
                                 )
                                 : (
                                     <ButtonGroup className="buttonGroup">
+                                        <Button label="Cancel" onClick={this.closePanel} />
                                         <Button label="Create" type="submit" onClick={this.createUser}  />
                                     </ButtonGroup>
                                 )
@@ -251,6 +252,9 @@ class UserManagementDashboard extends React.Component {
                                 <div>
                                     Domain
                                 </div>
+                                <div>
+                                    Status
+                                </div>
                             </div>
                             {state.users && state.users.map((u, k) => {
                                 let platformRoles = [];
@@ -269,6 +273,9 @@ class UserManagementDashboard extends React.Component {
                                         <div>
                                             {u['user-domain']}
                                         </div>
+                                        <div>
+                                            {u['disabled'] ? "DISABLED" : "ENABLED"}
+                                        </div>
 
 
                                     </div>
@@ -288,14 +295,18 @@ class UserManagementDashboard extends React.Component {
                             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
+                            <FormSection title="USER INFO" className="userInfo">
+                            {
+                                (!state.isEditUser ||  state.isReadOnly) ?
+                                <Input className="userInfo-section" readonly={state.isReadOnly || this.state.isEdit}  label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+                                : null
+                            }
+                            {
+                                (!state.isEditUser ||  state.isReadOnly) ?
+                                <Input className="userInfo-section" readonly={true} label="Domain" value={state['user-domain']}  onChange={this.updateInput.bind(null, 'user-domain')}></Input>
+                                : null
+                            }
+                                <Input className="userInfo-section"
                                     type="radiogroup"
                                     onChange={this.disableChange}
                                     label="STATUS"

diff --git a/skyquake/plugins/user_management/src/dashboard/userMgmt.scss b/skyquake/plugins/user_management/src/dashboard/userMgmt.scss
index f503b05..92df47b 100644 (file)
--- a/skyquake/plugins/user_management/src/dashboard/userMgmt.scss
+++ b/skyquake/plugins/user_management/src/dashboard/userMgmt.scss
@@ -64,7 +64,15 @@
         }
 
     }
-
+    .userInfo {
+        &-section {
+            padding: 0.5rem;
+            margin-bottom: 0;
+            &:nth-child(even) {
+                background:$neutral-dark-0;
+            }
+        }
+    }
     .userAdmin {
             -ms-flex: 1 1;
             flex: 1 1;

diff --git a/skyquake/plugins/user_management/src/dashboard/userMgmtStore.js b/skyquake/plugins/user_management/src/dashboard/userMgmtStore.js
index 9654b4a..b68c72c 100644 (file)
--- a/skyquake/plugins/user_management/src/dashboard/userMgmtStore.js
+++ b/skyquake/plugins/user_management/src/dashboard/userMgmtStore.js
@@ -29,7 +29,9 @@ export default class UserManagementStore {
         this.isReadOnly = true;
         this.userOpen = false;
         this.hideColumns = false;
+        //There is probably a better way of handling the view/edit/readonly matrix conditions for some of these inputs. Should definitely revist
         this.isEdit = false;
+        this.isEditUser = false;
         // this.exportPublicMethods({})
     }
     /**
@@ -84,6 +86,7 @@ export default class UserManagementStore {
     }
     editUser(isEdit) {
         this.setState({
+            isEditUser: !isEdit,
             isReadOnly: isEdit
         })
     }