Skip to content

Commit 982e7c9

Browse files
gia8789MV88
gia8789
authored and
MV88
committed
Fix #3083 - When adding a new group/user is not clear which section is opened (#3752)
* Fix #3083 User/Group tab selection in Manager page * Adding tests * Clean up commented code * Updating related tests
1 parent c3a19f4 commit 982e7c9

4 files changed

Lines changed: 53 additions & 10 deletions

File tree

‎web/client/components/manager/users/GroupDialog.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,11 @@ class GroupDialog extends React.Component {
7575
}
7676
};
7777

78+
state = {
79+
key: 1
80+
};
81+
// Only to keep the selected button, not for the modal window
82+
7883
getCurrentGroupMembers = () => {
7984
return this.props.group && (this.props.group.newUsers || this.props.group.users) || [];
8085
};
@@ -210,13 +215,13 @@ class GroupDialog extends React.Component {
210215
<span className="user-panel-title">{(this.props.group && this.props.group.groupName) || <Message msgId="usergroups.newGroup" />}</span>
211216
</span>
212217
<div role="body">
213-
<Tabs defaultActiveKey={1} key="tab-panel">
214-
<Tab eventKey={1} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle="primary"><Glyphicon glyph="1-group"/></Button>} >
218+
<Tabs defaultActiveKey={1} onSelect={ ( key) => { this.setState({key}); }} key="tab-panel">
219+
<Tab eventKey={1} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 1 ? "success" : "primary"}><Glyphicon glyph="1-group"/></Button>} >
215220
{this.renderGeneral()}
216221
{this.checkNameLenght()}
217222
{this.checkDescLenght()}
218223
</Tab>
219-
<Tab eventKey={2} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle="primary"><Glyphicon glyph="1-group-add"/></Button>} >
224+
<Tab eventKey={2} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 2 ? "success" : "primary"}><Glyphicon glyph="1-group-add"/></Button>} >
220225
{this.renderMembersTab()}
221226
</Tab>
222227
</Tabs>

‎web/client/components/manager/users/UserDialog.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ class UserDialog extends React.Component {
8080
hidePasswordFields: false
8181
};
8282

83+
state = {
84+
key: 1
85+
};
86+
// Only to keep the selected button, not for the modal window
87+
8388
getAttributeValue = (name) => {
8489
let attrs = this.props.user && this.props.user.attribute;
8590
if (attrs) {
@@ -217,14 +222,14 @@ class UserDialog extends React.Component {
217222
</button>
218223
</span>
219224
<div role="body">
220-
<Tabs defaultActiveKey={1} key="tab-panel" id="userDetails-tabs">
221-
<Tab eventKey={1} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle="primary"><Glyphicon glyph="user"/></Button>} >
225+
<Tabs defaultActiveKey={1} onSelect={ ( key) => { this.setState({key}); }} key="tab-panel" id="userDetails-tabs">
226+
<Tab eventKey={1} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 1 ? "success" : "primary"}><Glyphicon glyph="user"/></Button>} >
222227
{this.renderGeneral()}
223228
</Tab>
224-
<Tab eventKey={2} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle="primary"><Glyphicon glyph="info-sign"/></Button>} >
229+
<Tab eventKey={2} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 2 ? "success" : "primary"}><Glyphicon glyph="info-sign"/></Button>} >
225230
{this.renderAttributes()}
226231
</Tab>
227-
<Tab eventKey={3} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle="primary"><Glyphicon glyph="1-group"/></Button>} >
232+
<Tab eventKey={3} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 3 ? "success" : "primary"}><Glyphicon glyph="1-group"/></Button>} >
228233
{this.renderGroups()}
229234
</Tab>
230235
</Tabs>

‎web/client/components/manager/users/__tests__/GroupDialog-test.jsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const React = require("react");
99
const expect = require('expect');
1010
const ReactDOM = require('react-dom');
1111
const GroupDialog = require('../GroupDialog');
12+
const ReactTestUtils = require('react-dom/test-utils');
1213
const user1 = {
1314
id: 100,
1415
name: "USER2",
@@ -37,7 +38,7 @@ const group1 = {
3738
users: [user1, user2]
3839
};
3940
const users = [ user1, user2 ];
40-
describe("Test UserDialog Component", () => {
41+
describe("Test GroupDialog Component", () => {
4142
beforeEach((done) => {
4243
document.body.innerHTML = '<div id="container"></div>';
4344
setTimeout(done);
@@ -75,4 +76,17 @@ describe("Test UserDialog Component", () => {
7576
<GroupDialog show group={{...group1, newUsers: [user1]}} availableUsers={users}/>, document.getElementById("container"));
7677
expect(comp).toExist();
7778
});
79+
it('Testing selected group-dialog-tab is highlighted', () => {
80+
let comp = ReactDOM.render(
81+
<GroupDialog group={group1} />,
82+
document.getElementById("container"));
83+
84+
expect(comp).toExist();
85+
let buttons = ReactTestUtils.scryRenderedDOMComponentsWithTag(comp, "button");
86+
expect(buttons[1].className).toBe("square-button btn btn-lg btn-success");
87+
let groupGroupButton = buttons[2];
88+
ReactTestUtils.Simulate.click(groupGroupButton);
89+
expect(groupGroupButton.className).toBe("square-button btn btn-lg btn-success");
90+
expect(buttons[2].className).toBe("square-button btn btn-lg btn-success");
91+
});
7892
});

‎web/client/components/manager/users/__tests__/UserDialog-test.jsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const React = require("react");
99
const expect = require('expect');
1010
const ReactDOM = require('react-dom');
1111
const UserDialog = require('../UserDialog');
12+
const ReactTestUtils = require('react-dom/test-utils');
1213
const enabledUser = {
1314
id: 1,
1415
name: "USER1",
@@ -182,7 +183,7 @@ describe("Test UserDialog Component", () => {
182183
}} />, document.getElementById("container"));
183184
expect(comp).toExist();
184185
let domnode = ReactDOM.findDOMNode(comp);
185-
expect(domnode.getElementsByClassName("btn-primary")[3].disabled).toBe(true);
186+
expect(domnode.getElementsByClassName("btn-primary")[2].disabled).toBe(true);
186187
expect(domnode.getElementsByClassName("spinner").length).toNotBe(0);
187188
});
188189
it('displays the success style', () => {
@@ -196,6 +197,24 @@ describe("Test UserDialog Component", () => {
196197
}} />, document.getElementById("container"));
197198
expect(comp).toExist();
198199
let domnode = ReactDOM.findDOMNode(comp);
199-
expect(domnode.getElementsByClassName("btn-success").length).toBe(1);
200+
expect(domnode.getElementsByClassName("btn-success").length).toBe(2);
201+
});
202+
it('Testing selected user-dialog-tab is highlighted', () => {
203+
let comp = ReactDOM.render(
204+
<UserDialog user={{
205+
id: 1,
206+
name: "USER1",
207+
role: "USER",
208+
enabled: true,
209+
status: "saved"
210+
}} />, document.getElementById("container"));
211+
212+
expect(comp).toExist();
213+
let buttons = ReactTestUtils.scryRenderedDOMComponentsWithTag(comp, "button");
214+
expect(buttons[1].className).toBe("square-button btn btn-lg btn-success");
215+
let userGroupButton = buttons[3];
216+
ReactTestUtils.Simulate.click(userGroupButton);
217+
expect(userGroupButton.className).toBe("square-button btn btn-lg btn-success");
218+
expect(buttons[3].className).toBe("square-button btn btn-lg btn-success");
200219
});
201220
});

0 commit comments

Comments
 (0)