diff --git a/public/app/features/admin/Users/OrgUsersTable.tsx b/public/app/features/admin/Users/OrgUsersTable.tsx index 34a58210fab..174a881c457 100644 --- a/public/app/features/admin/Users/OrgUsersTable.tsx +++ b/public/app/features/admin/Users/OrgUsersTable.tsx @@ -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}?`} diff --git a/public/app/features/admin/Users/TableWrapper.tsx b/public/app/features/admin/Users/TableWrapper.tsx deleted file mode 100644 index ea3fd28809d..00000000000 --- a/public/app/features/admin/Users/TableWrapper.tsx +++ /dev/null @@ -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), - }, - }), -}); diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx index 4211a462ec1..fe57446c476 100644 --- a/public/app/features/teams/TeamList.tsx +++ b/public/app/features/teams/TeamList.tsx @@ -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> </> )}