Role picker: Remove unnecessary table wrapper (#77707)

This commit is contained in:
Alexander Zobnin 2023-11-06 15:33:58 +01:00 committed by GitHub
parent b6e2db7d91
commit a558d287a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 60 deletions

View File

@ -26,8 +26,6 @@ import { AccessControlAction, OrgUser, Role } from 'app/types';
import { OrgRolePicker } from '../OrgRolePicker';
import { TableWrapper } from './TableWrapper';
type Cell<T extends keyof OrgUser = keyof OrgUser> = CellProps<OrgUser, OrgUser[T]>;
const disabledRoleMessage = `This user's role is not editable because it is synchronized from your auth provider.
@ -220,17 +218,10 @@ export const OrgUsersTable = ({
return (
<Stack gap={2} data-testid={selectors.container}>
<TableWrapper>
<InteractiveTable
columns={columns}
data={users}
getRowId={(user) => String(user.userId)}
fetchData={fetchData}
/>
<Stack justifyContent="flex-end">
<Pagination onNavigate={changePage} currentPage={page} numberOfPages={totalPages} hideWhenSinglePage={true} />
</Stack>
</TableWrapper>
<InteractiveTable columns={columns} data={users} getRowId={(user) => String(user.userId)} fetchData={fetchData} />
<Stack justifyContent="flex-end">
<Pagination onNavigate={changePage} currentPage={page} numberOfPages={totalPages} hideWhenSinglePage={true} />
</Stack>
{Boolean(userToRemove) && (
<ConfirmModal
body={`Are you sure you want to delete user ${userToRemove?.login}?`}

View File

@ -1,30 +0,0 @@
import { css } from '@emotion/css';
import React, { PropsWithChildren } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
/**
* A wrapper component for interactive tables using RolePicker to enable overflow.
* Should be removed when the RolePicker component uses portals to render its menu
*/
export const TableWrapper = ({ children }: PropsWithChildren) => {
const styles = useStyles2(getStyles);
return <div className={styles.wrapper}>{children}</div>;
};
const getStyles = (theme: GrafanaTheme2) => ({
// Enable RolePicker overflow
wrapper: css({
display: 'flex',
flexDirection: 'column',
overflowX: 'auto',
overflowY: 'hidden',
minHeight: '100vh',
width: '100%',
'& > div': {
overflowX: 'unset',
marginBottom: theme.spacing(2),
},
}),
});

View File

@ -22,7 +22,6 @@ import { contextSrv } from 'app/core/services/context_srv';
import { AccessControlAction, Role, StoreState, Team } from 'app/types';
import { TeamRolePicker } from '../../core/components/RolePicker/TeamRolePicker';
import { TableWrapper } from '../admin/Users/TableWrapper';
import { deleteTeam, loadTeams, changePage, changeQuery, changeSort } from './state/actions';
@ -173,22 +172,15 @@ export const TeamList = ({
</LinkButton>
</div>
<Stack gap={2}>
<TableWrapper>
<InteractiveTable
columns={columns}
data={teams}
getRowId={(team) => String(team.id)}
fetchData={changeSort}
/>
<Stack justifyContent="flex-end">
<Pagination
hideWhenSinglePage
currentPage={page}
numberOfPages={totalPages}
onNavigate={changePage}
/>
</Stack>
</TableWrapper>
<InteractiveTable
columns={columns}
data={teams}
getRowId={(team) => String(team.id)}
fetchData={changeSort}
/>
<Stack justifyContent="flex-end">
<Pagination hideWhenSinglePage currentPage={page} numberOfPages={totalPages} onNavigate={changePage} />
</Stack>
</Stack>
</>
)}