diff --git a/packages/manager/.changeset/pr-10252-upcoming-features-1709581147040.md b/packages/manager/.changeset/pr-10252-upcoming-features-1709581147040.md new file mode 100644 index 00000000000..e2cee56370c --- /dev/null +++ b/packages/manager/.changeset/pr-10252-upcoming-features-1709581147040.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Adjust user table column count for parent/child ([#10252](https://github.com/linode/manager/pull/10252)) diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index c218a8fde6f..d3cf29dff1b 100644 --- a/packages/manager/src/features/Users/UsersLanding.tsx +++ b/packages/manager/src/features/Users/UsersLanding.tsx @@ -1,3 +1,5 @@ +import { useTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; import AddNewLink from 'src/components/AddNewLink'; @@ -22,6 +24,7 @@ import { UsersLandingTableHead } from './UsersLandingTableHead'; import type { Filter } from '@linode/api-v4'; export const UsersLanding = () => { + const theme = useTheme(); const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState( false ); @@ -29,6 +32,8 @@ export const UsersLanding = () => { const [selectedUsername, setSelectedUsername] = React.useState(''); const flags = useFlags(); const { data: profile } = useProfile(); + const matchesSmDown = useMediaQuery(theme.breakpoints.down('sm')); + const matchesLgUp = useMediaQuery(theme.breakpoints.up('lg')); const pagination = usePagination(1, 'account-users'); const order = useOrder(); @@ -51,22 +56,33 @@ export const UsersLanding = () => { }, }); + const isRestrictedUser = profile?.restricted; + const { data: proxyUser, error: proxyUserError, isLoading: isLoadingProxyUser, } = useAccountUsers({ - enabled: flags.parentChildAccountAccess, + enabled: + flags.parentChildAccountAccess && showProxyUserTable && !isRestrictedUser, filters: { user_type: 'proxy' }, }); - const isRestrictedUser = profile?.restricted; - const showChildAccountAccessCol = Boolean( flags.parentChildAccountAccess && profile?.user_type === 'parent' ); - const numCols = showChildAccountAccessCol ? 6 : 5; + // Parent/Child accounts include additional "child account access" column. + const numCols = matchesLgUp + ? showChildAccountAccessCol + ? 6 + : 5 + : matchesSmDown + ? 3 + : 4; + + // "last login" column omitted for proxy table. + const proxyNumCols = matchesLgUp ? 4 : numCols; const handleDelete = (username: string) => { setIsDeleteDialogOpen(true); @@ -97,7 +113,7 @@ export const UsersLanding = () => { diff --git a/packages/manager/src/features/Users/UsersLandingProxyTableHead.tsx b/packages/manager/src/features/Users/UsersLandingProxyTableHead.tsx index 7b7c5a1f843..908050854fe 100644 --- a/packages/manager/src/features/Users/UsersLandingProxyTableHead.tsx +++ b/packages/manager/src/features/Users/UsersLandingProxyTableHead.tsx @@ -14,7 +14,11 @@ interface Props { export const UsersLandingProxyTableHead = ({ order }: Props) => { return ( - + { const { error, isLoading, numCols, onDelete, users } = props; if (isLoading) { - return ( - - ); + return ; } if (error) { diff --git a/packages/manager/src/features/Users/UsersLandingTableHead.tsx b/packages/manager/src/features/Users/UsersLandingTableHead.tsx index 5ee1a76e047..e78904852fb 100644 --- a/packages/manager/src/features/Users/UsersLandingTableHead.tsx +++ b/packages/manager/src/features/Users/UsersLandingTableHead.tsx @@ -24,7 +24,11 @@ export const UsersLandingTableHead = ({ showChildAccountAccessCol, }: Props) => { return ( - +