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
--- a/skyquake/framework/widgets/form_controls/input.jsx
+++ b/skyquake/framework/widgets/form_controls/input.jsx
@@ -95,9 +95,6 @@
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
--- a/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user_management/src/dashboard/dashboard.jsx
@@ -224,13 +224,14 @@
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 @@
<div>
Domain
</div>
+ <div>
+ Status
+ </div>
</div>
{state.users && state.users.map((u, k) => {
let platformRoles = [];
@@ -269,6 +273,9 @@
<div>
{u['user-domain']}
</div>
+ <div>
+ {u['disabled'] ? "DISABLED" : "ENABLED"}
+ </div>
</div>
@@ -288,14 +295,18 @@
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..92df47b1 100644
--- 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
--- a/skyquake/plugins/user_management/src/dashboard/userMgmtStore.js
+++ b/skyquake/plugins/user_management/src/dashboard/userMgmtStore.js
@@ -29,7 +29,9 @@
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 @@
}
editUser(isEdit) {
this.setState({
+ isEditUser: !isEdit,
isReadOnly: isEdit
})
}