feat: [UIE-8729] - IAM RBAC: fix not found state for tabs

packages/manager/.changeset/pr-12094-upcoming-features-1745417550636.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: Add a 'Not Found' state for tabs if the user doesn't exist ([#12094](https://github.com/linode/manager/pull/12094))

packages/manager/src/features/IAM/Users/UserDetails/UserProfile.tsx

@@ -1,10 +1,10 @@
+import { useAccountUser } from '@linode/queries';
 import { CircleProgress, ErrorState, Stack } from '@linode/ui';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { NotFound } from 'src/components/NotFound';
-import { useAccountUser } from '@linode/queries';
 import { useAccountUserPermissions } from 'src/queries/iam/iam';
 
 import { DeleteUserPanel } from './DeleteUserPanel';
@@ -33,7 +33,10 @@ export const UserProfile = () => {
   return (
     <>
       <DocumentTitleSegment segment={`${username} - Profile`} />
-      <Stack spacing={2} sx={(theme) => ({ marginTop: theme.spacing(2) })}>
+      <Stack
+        spacing={2}
+        sx={(theme) => ({ marginTop: theme.tokens.spacing.S16 })}
+      >
         <UserDetailsPanel assignedRoles={assignedRoles} user={user} />
         <UsernamePanel user={user} />
         <UserEmailPanel user={user} />

packages/manager/src/features/IAM/Users/UserEntities/UserEntities.tsx

@@ -1,4 +1,11 @@
-import { CircleProgress, Paper, Stack, Typography } from '@linode/ui';
+import { useAccountUser } from '@linode/queries';
+import {
+  CircleProgress,
+  ErrorState,
+  Paper,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import { isEmpty } from 'ramda';
 import React from 'react';
 import { useParams } from 'react-router-dom';
@@ -15,6 +22,7 @@ export const UserEntities = () => {
   const { data: assignedRoles, isLoading } = useAccountUserPermissions(
     username ?? ''
   );
+  const { error } = useAccountUser(username ?? '');
 
   const hasAssignedRoles = assignedRoles
     ? !isEmpty(assignedRoles.entity_access)
@@ -24,6 +32,10 @@ export const UserEntities = () => {
     return <CircleProgress />;
   }
 
+  if (error) {
+    return <ErrorState errorText={error[0].reason} />;
+  }
+
   return (
     <>
       <DocumentTitleSegment segment={`${username} - User Entities`} />

packages/manager/src/features/IAM/Users/UserRoles/UserRoles.tsx

@@ -1,4 +1,12 @@
-import { Button, CircleProgress, Paper, Stack, Typography } from '@linode/ui';
+import { useAccountUser } from '@linode/queries';
+import {
+  Button,
+  CircleProgress,
+  ErrorState,
+  Paper,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import { isEmpty } from 'ramda';
 import React from 'react';
 import { useParams } from 'react-router-dom';
@@ -17,6 +25,8 @@ export const UserRoles = () => {
   const { data: assignedRoles, isLoading } = useAccountUserPermissions(
     username ?? ''
   );
+  const { error } = useAccountUser(username ?? '');
+
   const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
 
   const hasAssignedRoles = assignedRoles
@@ -28,6 +38,10 @@ export const UserRoles = () => {
     return <CircleProgress />;
   }
 
+  if (error) {
+    return <ErrorState errorText={error[0].reason} />;
+  }
+
   return (
     <>
       <DocumentTitleSegment segment={`${username} - User Roles`} />