v2-improvement: select the first group by default and render the selected on by default (#5197)

* select default group on mount

* typo
This commit is contained in:
Arpit 2023-01-05 11:41:59 +05:30 committed by GitHub
parent 337cdfc99f
commit 9fb58c938c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions

View file

@ -43,6 +43,7 @@ class ManageGroupPermissionsComponent extends React.Component {
this.setState({
groups: data.group_permissions,
isLoading: false,
selectedGroupPermissionId: data.group_permissions[0].id,
});
})
.catch(({ error }) => {
@ -328,9 +329,14 @@ class ManageGroupPermissionsComponent extends React.Component {
))}
</tbody>
) : (
<tbody>
<tbody className="user-group-table ">
{groups.map((permissionGroup) => (
<tr key={permissionGroup.id}>
<tr
key={permissionGroup.id}
className={`${this.props.darkMode ? 'dark' : ''} ${
this.state.selectedGroupPermissionId === permissionGroup.id ? 'selected-row' : ''
}`}
>
<td onClick={() => this.setState({ selectedGroupPermissionId: permissionGroup.id })}>
{this.humanizeifDefaultGroupName(permissionGroup.group)}
</td>
@ -350,6 +356,7 @@ class ManageGroupPermissionsComponent extends React.Component {
</div>
)}
</td>
<td className="col-auto"></td>
</tr>
))}
</tbody>

View file

@ -7330,3 +7330,12 @@ tbody {
}
}
.user-group-table {
.selected-row {
background-color: #ECEEF0;
}
.selected-row.dark {
background-color: #232E3C;
}
}