From bca9d9cf04b3068c870c4fd45ca6cfc2fb79034d Mon Sep 17 00:00:00 2001
From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Wed, 8 Mar 2017 22:10:19 -0500
Subject: [PATCH] User Management: Styling pass

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
---
 .../widgets/form_controls/formControls.scss   |  18 ++-
 .../framework/widgets/form_controls/input.jsx |  31 ++++-
 .../widgets/form_controls/selectOption.jsx    |  19 ++-
 .../src/dashboard/dashboard.jsx               | 118 ++++++++++++------
 .../src/dashboard/userMgmt.scss               |  17 ++-
 .../src/dashboard/userMgmtActions.js          |   1 +
 .../src/dashboard/userMgmtStore.js            |  34 +++--
 7 files changed, 183 insertions(+), 55 deletions(-)

diff --git a/skyquake/framework/widgets/form_controls/formControls.scss b/skyquake/framework/widgets/form_controls/formControls.scss
index fcc08def8..54d69a8bf 100644
--- a/skyquake/framework/widgets/form_controls/formControls.scss
+++ b/skyquake/framework/widgets/form_controls/formControls.scss
@@ -32,7 +32,7 @@
         color:$darker-gray;
         text-transform:uppercase;
     }
-    input, .readonly, textarea {
+    input, textarea {
         height: 35px;
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
         font-size: 1rem;
@@ -49,6 +49,7 @@
     .readonly {
         line-height: 35px;
         box-shadow:none;
+        background:none !important;
     }
     textarea {
         -ms-flex-align: stretch;
@@ -78,4 +79,19 @@
     }
 }
 
+.sqCheckBox {
+    display:-ms-flexbox;
+    display:flex;
+    label {
+        display:-ms-flexbox;
+        display:flex;
+        -ms-flex-align: center;
+        align-items: center;
+        input {
+            box-shadow: none;
+            height: auto;
+            margin: 0 0.25rem;
+        }
+    }
+}
 
diff --git a/skyquake/framework/widgets/form_controls/input.jsx b/skyquake/framework/widgets/form_controls/input.jsx
index b7582424b..370afccd9 100644
--- a/skyquake/framework/widgets/form_controls/input.jsx
+++ b/skyquake/framework/widgets/form_controls/input.jsx
@@ -59,14 +59,23 @@ export default class Input extends Component {
                                 onChange={props.onChange}
                             />
                 break;
+            case 'radiogroup':
+                inputType = buildRadioButtons(this.props);
+                break;
             default:
                 inputType = <input key={props.key} type={props.type} {...inputProperties} onChange={props.onChange} placeholder={props.placeholder}/>;
         }
+        let displayedValue;
+        if(value === null) {
+            displayedValue = null;
+        } else {
+            displayedValue = value.toString();
+        }
         let html = (
             <label className={className} style={props.style}>
               <span> { label } {isRequired}</span>
               {
-                !props.readonly ? inputType : <div className="readonly">{value}</div>
+                !props.readonly ? inputType : <div className="readonly">{displayedValue}</div>
               }
 
             </label>
@@ -76,8 +85,26 @@ export default class Input extends Component {
 }
 
 
-function buildDropDown() {
+function buildRadioButtons(props) {
+    let className = 'sqCheckBox';
+    if (props.className) {
+        className = `${className} ${props.className}`;
+    }
+    return(
+       <div className={className}>
+            {
+                props.options.map((o,i) => {
+                    return (
+                        <label key={i}>
+                            {o.label}
+                            <input type="radio" checked={props.value == o.value} value={o.value} onChange={props.onChange} />
+                        </label>
+                    )
+                })
+            }
+       </div>
 
+    )
 }
 
 Input.defaultProps = {
diff --git a/skyquake/framework/widgets/form_controls/selectOption.jsx b/skyquake/framework/widgets/form_controls/selectOption.jsx
index 81a386065..21d4a0a4d 100644
--- a/skyquake/framework/widgets/form_controls/selectOption.jsx
+++ b/skyquake/framework/widgets/form_controls/selectOption.jsx
@@ -47,11 +47,19 @@ export default class SelectOption extends React.Component {
     html = (
         <label key={this.props.key}>
             {this.props.label}
-            <select className={this.props.className} onChange={this.handleOnChange} defaultValue={JSON.stringify(defaultValue)} >
-                {
-                 options
-                }
-            </select>
+            {
+              this.props.readonly ? defaultValue
+              : (
+                  <select
+                    className={this.props.className}
+                    onChange={this.handleOnChange}
+                    defaultValue={JSON.stringify(defaultValue)}>
+                      {
+                       options
+                      }
+                  </select>
+                )
+            }
         </label>
     );
     return html;
@@ -67,6 +75,7 @@ SelectOption.defaultProps = {
     console.log(e.target.value)
     console.dir(e)
   },
+  readonly: false,
   /**
    *  Selected or default value
 ​
diff --git a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
index fdac58b40..df28d2178 100644
--- a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
@@ -72,6 +72,12 @@ class UserManagementDashboard extends React.Component {
     viewUser = (un, index) => {
         this.actions.viewUser(un, index);
     }
+    editUser = () => {
+        this.actions.editUser(false);
+    }
+    cancelEditUser = () => {
+        this.actions.editUser(true)
+    }
     closePanel = () => {
         this.actions.handleCloseUserPanel();
     }
@@ -118,11 +124,60 @@ class UserManagementDashboard extends React.Component {
         this.actions.handleHideColumns(e);
         console.log('transition end')
     }
+    disableChange = (e) => {
+        let value = e.target.value;
+        value = value.toUpperCase();
+        if (value=="TRUE") {
+            value = true;
+        } else {
+            value = false;
+        }
+        console.log(value)
+    }
     render() {
         let self = this;
         let html;
         let props = this.props;
         let state = this.state;
+        let passwordSectionHTML = null;
+        let formButtonsHTML = (
+            <ButtonGroup className="buttonGroup">
+                <Button label="EDIT" type="submit" onClick={this.editUser} />
+            </ButtonGroup>
+        );
+        if(!this.state.isReadOnly) {
+            passwordSectionHTML = ( this.state.isEdit ?
+                                        (
+                                            <FormSection title="PASSWORD CHANGE">
+                                                <Input label="OLD PASSWORD" type="password" value={state['old-password']} onChange={this.updateInput.bind(null, 'old-password')} />
+                                                <Input label="NEW PASSWORD" type="password" value={state['new-password']}  onChange={this.updateInput.bind(null, 'new-password')}/>
+                                                <Input label="REPEAT NEW PASSWORD" type="password"  value={state['confirm-password']}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
+                                            </FormSection>
+                                        ) :
+                                        (
+                                            <FormSection title="CREATE PASSWORD">
+                                                <Input label="CREATE PASSWORD" type="password" value={state.newPassword}  onChange={this.updateInput.bind(null, 'new-password')}/>
+                                                <Input label="REPEAT PASSWORD" type="password"  value={state.repeatNewPassword}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
+                                            </FormSection>
+                                        )
+                                    );
+            formButtonsHTML = (
+                                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} />
+                                    </ButtonGroup>
+                                )
+                                : (
+                                    <ButtonGroup className="buttonGroup">
+                                        <Button label="Create" type="submit" onClick={this.createUser}  />
+                                    </ButtonGroup>
+                                )
+                            )
+        }
+
         html = (
             <PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
                 <PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
@@ -171,20 +226,22 @@ class UserManagementDashboard extends React.Component {
                         {
                             this.state.isEdit ?
                                 null
-                                : <Input label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+                                : <Input  readonly={state.isReadOnly}  label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
                         }
-                            <Input label="Domain" value={state['user-domain']}  onChange={this.updateInput.bind(null, 'user-domain')}></Input>
-                            <Input label="Disabled" onChange={this.disabledChange} checked={state.disabled} type="checkbox" />
+                            <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">
+                        <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">
+                        <FormSection title="PROJECT ROLES" style={{display:'none'}}>
                             <InputCollection
                                 inital={true}
                                 type='select'
+                                readonly={state.isReadOnly}
                                 options={state.projectRolesOptions}
                                 collection={state.projectRoles}
                                 onChange={this.updateProjectRole}
@@ -192,40 +249,14 @@ class UserManagementDashboard extends React.Component {
                                 RemoveItemFn={this.removeProjectRole}
                                 />
                         </FormSection>
-                        { this.state.isEdit ?
-                            (
-                                <FormSection title="PASSWORD CHANGE">
-                                    <Input label="OLD PASSWORD" type="password" value={state['old-password']} onChange={this.updateInput.bind(null, 'old-password')} />
-                                    <Input label="NEW PASSWORD" type="password" value={state['new-password']}  onChange={this.updateInput.bind(null, 'new-password')}/>
-                                    <Input label="REPEAT NEW PASSWORD" type="password"  value={state['confirm-password']}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
-                                </FormSection>
-                            ) :
-                            (
-                                <FormSection title="CREATE PASSWORD">
-                                    <Input label="CREATE PASSWORD" type="password" value={state.newPassword}  onChange={this.updateInput.bind(null, 'new-password')}/>
-                                    <Input label="REPEAT PASSWORD" type="password"  value={state.repeatNewPassword}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
-                                </FormSection>
-                            )
-                        }
+                        {passwordSectionHTML}
 
                     </Panel>
+                        {formButtonsHTML}
 
-                        {
-                            state.isEdit ?
-                            (
-                                <ButtonGroup className="buttonGroup">
-                                    <Button label="Update" type="submit" onClick={this.updateUser} />
-                                    <Button label="Delete" onClick={this.deleteUser} />
-                                </ButtonGroup>
-                            )
-                            : (
-                                <ButtonGroup className="buttonGroup">
-                                    <Button label="Create" type="submit" onClick={this.createUser}  />
-                                </ButtonGroup>
-                            )
-                        }
                 </PanelWrapper>
 
+
             </PanelWrapper>
         );
         return html;
@@ -256,6 +287,18 @@ function isElementInView(el) {
 }
 
 
+// isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange}
+
+class isDisabled extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        let props = this.props;
+        return (<div/>)
+    }
+}
+
 /**
  * AddItemFn:
  */
@@ -267,6 +310,7 @@ class InputCollection extends React.Component {
     buildTextInput(onChange, v, i) {
         return (
             <Input
+                readonly={this.props.readonly}
                 style={{flex: '1 1'}}
                 key={i}
                 value={v}
@@ -277,6 +321,7 @@ class InputCollection extends React.Component {
     buildSelectOption(initial, options, onChange, v, i) {
         return (
             <SelectOption
+                readonly={this.props.readonly}
                 key={`${i}-${v.replace(' ', '_')}`}
                 intial={initial}
                 defaultValue={v}
@@ -306,11 +351,12 @@ class InputCollection extends React.Component {
                     return (
                         <div key={i} className={className} >
                             {inputType(v, i)}
-                            <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>
+                            {
+                                props.readonly ? null : <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>}
                         </div>
                     )
                 })}
-                <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>
+                { props.readonly ? null : <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>}
             </div>
         );
         return html;
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmt.scss b/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
index f107686e0..cf384e291 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
@@ -6,6 +6,11 @@
 @import "style/_colors.scss";
 
 .userManagement {
+        max-width: 900px;
+        -ms-flex-item-align:center;
+            -ms-grid-row-align:center;
+            align-self:center;
+
     .skyquakePanel-wrapper {
         overflow-x: hidden;
     }
@@ -64,8 +69,8 @@
     }
 
     .userAdmin {
-            -ms-flex: 0 1 450px;
-            flex: 0 1 450px;
+            -ms-flex: 1 1;
+            flex: 1 1;
             width:auto;
             opacity:1;
     }
@@ -163,12 +168,16 @@
         font-weight:bold;
     }
     &--data {
+        &:hover:not(&-active) {
+            background:$neutral-dark-1;
+        }
         &:hover, .activeUser, &-active{
             cursor:pointer;
-            background:$neutral-dark-1;
             color:white;
         }
-
+        .activeUser, &-active{
+            background: #00acee;
+        }
     }
 }
 
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js b/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js
index 8430f3550..a0a34d9b3 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js
@@ -8,6 +8,7 @@ module.exports = function(Alt) {
                                        'handleRemoveProjectItem',
                                        'handleUpdateProjectRole',
                                        'viewUser',
+                                       'editUser',
                                        'handleCloseUserPanel',
                                        'handleHideColumns',
                                        'getUsersSuccess',
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js b/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
index 419a40a84..58839957f 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
@@ -11,7 +11,7 @@ export default class UserManagementStore {
         this.registerAsync(UserManagementSource);
         this.users = [];
         this['user-name'] = '';
-        this['user-domain'] = '';
+        this['user-domain'] = 'system';
         this.disabled = false;
         this.platformRoles = {
             super_admin: false,
@@ -26,6 +26,7 @@ export default class UserManagementStore {
         this['confirm-password'] = '';
 
         this.activeIndex = null;
+        this.isReadOnly = true;
         this.userOpen = false;
         this.hideColumns = false;
         this.isEdit = false;
@@ -75,14 +76,21 @@ export default class UserManagementStore {
         let state = _.merge({
             activeIndex: userIndex,
             userOpen: true,
-            isEdit: true
+            isEdit: true,
+            isReadOnly: true
         }, ActiveUser);
         this.setState(state)
     }
+    editUser(isEdit) {
+        this.setState({
+            isReadOnly: isEdit
+        })
+    }
     handleCloseUserPanel() {
         this.setState({
             userOpen: false,
-            isEdit: false
+            isEdit: false,
+            isReadOnly: true
         })
     }
     handleHideColumns(e) {
@@ -112,7 +120,7 @@ export default class UserManagementStore {
     }
     resetUser() {
         let username = '';
-        let domain = '';
+        let domain = 'system';
         let disabled = false;
         let platformRoles = {
             super_admin: false,
@@ -149,7 +157,14 @@ export default class UserManagementStore {
         }
     }
     handleAddUser() {
-        this.setState(_.merge( this.resetUser() ,{ isEdit: false, userOpen: true, activeIndex: null }))
+        this.setState(_.merge( this.resetUser() ,
+                              {
+                                isEdit: false,
+                                userOpen: true,
+                                activeIndex: null,
+                                isReadOnly: false
+                            }
+        ))
     }
     handleCreateUser() {
 
@@ -188,9 +203,14 @@ export default class UserManagementStore {
             'user-domain': this['user-domain'],
             platformRoles: this.platformRoles,
             disabled: this.disabled,
-            projectRoles: this.projectRoles
+            projectRoles: this.projectRoles,
          });
-        let newState = {users, isEdit: true, activeIndex: users.length - 1};
+        let newState = {
+            users,
+            isEdit: true,
+            isReadOnly: true,
+            activeIndex: users.length - 1
+        };
         _.merge(newState, this.resetPassword())
         this.setState(newState);
     }
-- 
2.17.1