From 551531b89919d8d4da62bc7af4f180f7f6ef5c97 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Mon, 4 Mar 2024 13:23:24 -0500 Subject: [PATCH 1/5] fix: [M3-7835] - Adjust user table column count --- .../src/features/Users/UsersLanding.tsx | 19 ++++++++++++++++--- .../Users/UsersLandingProxyTableHead.tsx | 6 +++++- .../features/Users/UsersLandingTableBody.tsx | 8 +------- .../features/Users/UsersLandingTableHead.tsx | 6 +++++- 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index c218a8fde6f..d2599da0203 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(); @@ -56,7 +61,7 @@ export const UsersLanding = () => { error: proxyUserError, isLoading: isLoadingProxyUser, } = useAccountUsers({ - enabled: flags.parentChildAccountAccess, + enabled: flags.parentChildAccountAccess && !profile?.restricted, filters: { user_type: 'proxy' }, }); @@ -66,7 +71,15 @@ export const UsersLanding = () => { flags.parentChildAccountAccess && profile?.user_type === 'parent' ); - const numCols = showChildAccountAccessCol ? 6 : 5; + const numCols = matchesLgUp + ? showChildAccountAccessCol + ? 6 + : 5 + : matchesSmDown + ? 3 + : 4; + + const proxyNumCols = matchesLgUp ? 4 : numCols; const handleDelete = (username: string) => { setIsDeleteDialogOpen(true); @@ -97,7 +110,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 ( - + Date: Mon, 4 Mar 2024 14:44:37 -0500 Subject: [PATCH 2/5] fix: [M3-7835] - Adjust user table column count --- .../.changeset/pr-10252-upcoming-features-1709581147040.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10252-upcoming-features-1709581147040.md 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)) From 99fd19cc48578b1b84b0319bffffc48d228087a5 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Mon, 4 Mar 2024 16:52:34 -0500 Subject: [PATCH 3/5] Minor update --- packages/manager/src/features/Users/UsersLanding.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index d2599da0203..37d28efdd85 100644 --- a/packages/manager/src/features/Users/UsersLanding.tsx +++ b/packages/manager/src/features/Users/UsersLanding.tsx @@ -56,17 +56,17 @@ export const UsersLanding = () => { }, }); + const isRestrictedUser = profile?.restricted; + const { data: proxyUser, error: proxyUserError, isLoading: isLoadingProxyUser, } = useAccountUsers({ - enabled: flags.parentChildAccountAccess && !profile?.restricted, + enabled: flags.parentChildAccountAccess && !isRestrictedUser, filters: { user_type: 'proxy' }, }); - const isRestrictedUser = profile?.restricted; - const showChildAccountAccessCol = Boolean( flags.parentChildAccountAccess && profile?.user_type === 'parent' ); From bc97769b98e09c615a425066845ae74064ec6194 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Mon, 4 Mar 2024 16:54:31 -0500 Subject: [PATCH 4/5] Only run proxy table query if there's a possibility to show it --- packages/manager/src/features/Users/UsersLanding.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index 37d28efdd85..4a04125a3af 100644 --- a/packages/manager/src/features/Users/UsersLanding.tsx +++ b/packages/manager/src/features/Users/UsersLanding.tsx @@ -63,7 +63,8 @@ export const UsersLanding = () => { error: proxyUserError, isLoading: isLoadingProxyUser, } = useAccountUsers({ - enabled: flags.parentChildAccountAccess && !isRestrictedUser, + enabled: + flags.parentChildAccountAccess && showProxyUserTable && !isRestrictedUser, filters: { user_type: 'proxy' }, }); From bb3122f73ccc35f00acbf7b0c040b019cafd5bd5 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Mon, 4 Mar 2024 16:59:32 -0500 Subject: [PATCH 5/5] Add some code comments --- packages/manager/src/features/Users/UsersLanding.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index 4a04125a3af..d3cf29dff1b 100644 --- a/packages/manager/src/features/Users/UsersLanding.tsx +++ b/packages/manager/src/features/Users/UsersLanding.tsx @@ -72,6 +72,7 @@ export const UsersLanding = () => { flags.parentChildAccountAccess && profile?.user_type === 'parent' ); + // Parent/Child accounts include additional "child account access" column. const numCols = matchesLgUp ? showChildAccountAccessCol ? 6 @@ -80,6 +81,7 @@ export const UsersLanding = () => { ? 3 : 4; + // "last login" column omitted for proxy table. const proxyNumCols = matchesLgUp ? 4 : numCols; const handleDelete = (username: string) => {