upcoming: [M3-7455] - Add child account access column and disable button when account has child accounts

packages/manager/.changeset/pr-10012-upcoming-features-1703090453195.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add child account access column and disable delete account button when account has child accounts ([#10012](https://github.com/linode/manager/pull/10012))

packages/manager/src/features/Account/CloseAccountSetting.tsx

@@ -3,18 +3,36 @@ import * as React from 'react';
 
 import { Accordion } from 'src/components/Accordion';
 import { Button } from 'src/components/Button/Button';
+import { Notice } from 'src/components/Notice/Notice';
+import { useFlags } from 'src/hooks/useFlags';
+import { useChildAccounts } from 'src/queries/account';
 
 import CloseAccountDialog from './CloseAccountDialog';
 
 const CloseAccountSetting = () => {
   const [dialogOpen, setDialogOpen] = React.useState<boolean>(false);
 
+  const { data: childAccounts } = useChildAccounts({});
+  const flags = useFlags();
+  const closeAccountDisabled = flags.parentChildAccountAccess
+    ? Boolean(childAccounts?.data?.length)
+    : false;
+
   return (
     <>
       <Accordion defaultExpanded={true} heading="Close Account">
         <Grid container direction="column">
           <Grid>
-            <Button buttonType="outlined" onClick={() => setDialogOpen(true)}>
+            {closeAccountDisabled && (
+              <Notice spacingBottom={20} variant="info">
+                Remove child accounts before closing the account.
+              </Notice>
+            )}
+            <Button
+              buttonType="outlined"
+              disabled={closeAccountDisabled}
+              onClick={() => setDialogOpen(true)}
+            >
               Close Account
             </Button>
           </Grid>

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

@@ -1,15 +1,17 @@
-import { Stack } from 'src/components/Stack';
 import React from 'react';
 
 import { Box } from 'src/components/Box';
 import { Chip } from 'src/components/Chip';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { GravatarByEmail } from 'src/components/GravatarByEmail';
 import { Hidden } from 'src/components/Hidden';
+import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
+import { useFlags } from 'src/hooks/useFlags';
+import { useAccountUserGrants } from 'src/queries/accountUsers';
 import { capitalize } from 'src/utilities/capitalize';
 
 import { UsersActionMenu } from './UsersActionMenu';
@@ -22,6 +24,8 @@ interface Props {
 }
 
 export const UserRow = ({ onDelete, user }: Props) => {
+  const flags = useFlags();
+  const { data: grants } = useAccountUserGrants(user.username);
   return (
     <TableRow ariaLabel={`User ${user.username}`} key={user.username}>
       <TableCell>
@@ -36,6 +40,11 @@ export const UserRow = ({ onDelete, user }: Props) => {
         <TableCell>{user.email}</TableCell>
       </Hidden>
       <TableCell>{user.restricted ? 'Limited' : 'Full'}</TableCell>
+      {flags.parentChildAccountAccess && (
+        <TableCell>
+          {grants?.global.child_account_access ? 'Enabled' : 'Disabled'}
+        </TableCell>
+      )}
       <Hidden lgDown>
         <TableCell>
           <LastLogin last_login={user.last_login} />

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

@@ -14,6 +14,7 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { TableSortCell } from 'src/components/TableSortCell';
+import { useFlags } from 'src/hooks/useFlags';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/accountUsers';
@@ -24,6 +25,7 @@ import { UserDeleteConfirmationDialog } from './UserDeleteConfirmationDialog';
 import { UserRow } from './UserRow';
 
 export const UsersLanding = () => {
+  const flags = useFlags();
   const { data: profile } = useProfile();
 
   const pagination = usePagination(1, 'account-users');
@@ -115,6 +117,9 @@ export const UsersLanding = () => {
               </TableSortCell>
             </Hidden>
             <TableCell>Account Access</TableCell>
+            {flags.parentChildAccountAccess && (
+              <TableCell>Child Account Access</TableCell>
+            )}
             <Hidden lgDown>
               <TableCell>Last Login</TableCell>
             </Hidden>

packages/manager/src/queries/accountUsers.ts

@@ -1,4 +1,9 @@
-import { deleteUser, getUser, getUsers } from '@linode/api-v4/lib/account';
+import {
+  deleteUser,
+  getGrants,
+  getUser,
+  getUsers,
+} from '@linode/api-v4/lib/account';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import { useProfile } from 'src/queries/profile';
@@ -8,6 +13,7 @@ import { queryKey } from './account';
 import type {
   APIError,
   Filter,
+  Grants,
   Params,
   ResourcePage,
   User,
@@ -35,6 +41,13 @@ export const useAccountUser = (username: string) => {
   );
 };
 
+export const useAccountUserGrants = (username: string) => {
+  return useQuery<Grants, APIError[]>(
+    [queryKey, 'users', 'grants', username],
+    () => getGrants(username)
+  );
+};
+
 export const useAccountUserDeleteMutation = (username: string) => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(() => deleteUser(username), {