IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

OrgUsersTable: Fix RolePicker overflow (#75541)

Browse Source 
* OrgUsersTable: Fix RolePicker overflow

* Remove redundant styles
This commit is contained in:
Alex Khomenko
2023-09-27 17:24:58 +03:00
committed by GitHub
parent e82e1593d8
commit 13321788e8
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/features/admin/Users/OrgUsersTable.tsx
View File

@@ -62,6 +62,7 @@ export const OrgUsersTable = ({ users, orgId, onRoleChange, onRemoveUser, change
const [userToRemove, setUserToRemove] = useState<OrgUser | null>(null); const [userToRemove, setUserToRemove] = useState<OrgUser | null>(null);
const [roleOptions, setRoleOptions] = useState<Role[]>([]); const [roleOptions, setRoleOptions] = useState<Role[]>([]);
const enableSort = totalPages === 1; const enableSort = totalPages === 1;
const styles = useStyles2(getStyles);
useEffect(() => { useEffect(() => {
async function fetchOptions() { async function fetchOptions() {
@@ -179,10 +180,12 @@ export const OrgUsersTable = ({ users, orgId, onRoleChange, onRemoveUser, change
return ( return (
<VerticalGroup spacing="md" data-testid={selectors.container}> <VerticalGroup spacing="md" data-testid={selectors.container}>
<InteractiveTable columns={columns} data={users} getRowId={(user) => String(user.userId)} /> <div className={styles.wrapper}>
<HorizontalGroup justify="flex-end"> <InteractiveTable columns={columns} data={users} getRowId={(user) => String(user.userId)} />
<Pagination onNavigate={changePage} currentPage={page} numberOfPages={totalPages} hideWhenSinglePage={true} /> <HorizontalGroup justify="flex-end" height={'auto'}>
</HorizontalGroup> <Pagination onNavigate={changePage} currentPage={page} numberOfPages={totalPages} hideWhenSinglePage={true} />
</HorizontalGroup>
</div>
{Boolean(userToRemove) && ( {Boolean(userToRemove) && (
<ConfirmModal <ConfirmModal
body={`Are you sure you want to delete user ${userToRemove?.login}?`} body={`Are you sure you want to delete user ${userToRemove?.login}?`}
@@ -227,4 +230,17 @@ const getStyles = (theme: GrafanaTheme2) => ({
icon: css({ icon: css({
marginLeft: theme.spacing(1), marginLeft: theme.spacing(1),
}), }),
// Enable RolePicker overflow
wrapper: css({
display: 'flex',
flexDirection: 'column',
overflowX: 'auto',
overflowY: 'hidden',
minHeight: '100vh',
width: '100%',
'& > div': {
overflowX: 'unset',
marginBottom: theme.spacing(2),
},
}),
}); });