upcoming: [M3-7835] - Adjust user table column count (#10252)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

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))

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,13 +24,16 @@ import { UsersLandingTableHead } from './UsersLandingTableHead';
 import type { Filter } from '@linode/api-v4';
 
 export const UsersLanding = () => {
+  const theme = useTheme();
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
     false
   );
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
   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 = () => {
             <UsersLandingTableBody
               error={proxyUserError}
               isLoading={isLoadingProxyUser}
-              numCols={4}
+              numCols={proxyNumCols}
               onDelete={handleDelete}
               users={proxyUser?.data}
             />

packages/manager/src/features/Users/UsersLandingProxyTableHead.tsx

@@ -14,7 +14,11 @@ interface Props {
 
 export const UsersLandingProxyTableHead = ({ order }: Props) => {
   return (
-    <TableHead>
+    <TableHead
+      sx={{
+        whiteSpace: 'nowrap',
+      }}
+    >
       <TableRow>
         <TableSortCell
           active={order.orderBy === 'username'}

packages/manager/src/features/Users/UsersLandingTableBody.tsx

@@ -19,13 +19,7 @@ export const UsersLandingTableBody = (props: Props) => {
   const { error, isLoading, numCols, onDelete, users } = props;
 
   if (isLoading) {
-    return (
-      <TableRowLoading
-        columns={numCols}
-        responsive={{ 1: { smDown: true }, 3: { lgDown: true } }}
-        rows={1}
-      />
-    );
+    return <TableRowLoading columns={numCols} rows={1} />;
   }
 
   if (error) {

packages/manager/src/features/Users/UsersLandingTableHead.tsx

@@ -24,7 +24,11 @@ export const UsersLandingTableHead = ({
   showChildAccountAccessCol,
 }: Props) => {
   return (
-    <TableHead>
+    <TableHead
+      sx={{
+        whiteSpace: 'nowrap',
+      }}
+    >
       <TableRow>
         <TableSortCell
           active={order.orderBy === 'username'}