feat: [UIE-10182, UIE-10168] - IAM Delegations: notifications and error state

packages/manager/.changeset/pr-13374-added-1770371099610.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+IAM Delegations: notifications and error state for tables ([#13374](https://github.com/linode/manager/pull/13374))

packages/manager/src/features/IAM/Roles/Defaults/DefaultEntityAccess.test.tsx

@@ -3,7 +3,10 @@ import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { NO_ASSIGNED_DEFAULT_ENTITIES_TEXT } from '../../Shared/constants';
+import {
+  ERROR_STATE_TEXT,
+  NO_ASSIGNED_DEFAULT_ENTITIES_TEXT,
+} from '../../Shared/constants';
 import { DefaultEntityAccess } from './DefaultEntityAccess';
 
 const queryMocks = vi.hoisted(() => ({
@@ -77,4 +80,16 @@ describe('DefaultEntityAccess', () => {
 
     expect(screen.getByText(NO_ASSIGNED_DEFAULT_ENTITIES_TEXT)).toBeVisible();
   });
+
+  it('should show error state when api fails', () => {
+    queryMocks.useGetDefaultDelegationAccessQuery.mockReturnValue({
+      data: null,
+      error: [{ reason: 'An unexpected error occurred' }],
+      isLoading: false,
+      status: 'error',
+    });
+
+    renderWithTheme(<DefaultEntityAccess />);
+    expect(screen.getByText(ERROR_STATE_TEXT)).toBeVisible();
+  });
 });

packages/manager/src/features/IAM/Roles/Defaults/DefaultEntityAccess.tsx

@@ -1,14 +1,26 @@
 import { useGetDefaultDelegationAccessQuery } from '@linode/queries';
-import { CircleProgress, Paper, Stack, Typography } from '@linode/ui';
+import {
+  CircleProgress,
+  ErrorState,
+  Paper,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import * as React from 'react';
 
 import { AssignedEntitiesTable } from '../../Shared/AssignedEntitiesTable/AssignedEntitiesTable';
-import { NO_ASSIGNED_DEFAULT_ENTITIES_TEXT } from '../../Shared/constants';
+import {
+  ERROR_STATE_TEXT,
+  NO_ASSIGNED_DEFAULT_ENTITIES_TEXT,
+} from '../../Shared/constants';
 import { NoAssignedRoles } from '../../Shared/NoAssignedRoles/NoAssignedRoles';
 
 export const DefaultEntityAccess = () => {
-  const { data: defaultAccess, isLoading: defaultAccessLoading } =
-    useGetDefaultDelegationAccessQuery({ enabled: true });
+  const {
+    data: defaultAccess,
+    isLoading: defaultAccessLoading,
+    error,
+  } = useGetDefaultDelegationAccessQuery({ enabled: true });
 
   const hasAssignedEntities = defaultAccess
     ? defaultAccess.entity_access.length > 0
@@ -18,6 +30,10 @@ export const DefaultEntityAccess = () => {
     return <CircleProgress />;
   }
 
+  if (error) {
+    return <ErrorState errorText={ERROR_STATE_TEXT} />;
+  }
+
   return (
     <Paper>
       {hasAssignedEntities ? (

packages/manager/src/features/IAM/Roles/Defaults/DefaultRoles.test.tsx

@@ -3,7 +3,10 @@ import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { NO_ASSIGNED_DEFAULT_ROLES_TEXT } from '../../Shared/constants';
+import {
+  ERROR_STATE_TEXT,
+  NO_ASSIGNED_DEFAULT_ROLES_TEXT,
+} from '../../Shared/constants';
 import { DefaultRoles } from './DefaultRoles';
 
 const loadingTestId = 'circle-progress';
@@ -69,4 +72,16 @@ describe('DefaultRoles', () => {
     expect(screen.getByText(NO_ASSIGNED_DEFAULT_ROLES_TEXT)).toBeVisible();
     expect(screen.getByText('Add New Default Roles')).toBeVisible();
   });
+
+  it('should show error state when api fails', () => {
+    queryMocks.useGetDefaultDelegationAccessQuery.mockReturnValue({
+      data: null,
+      error: [{ reason: 'An unexpected error occurred' }],
+      isLoading: false,
+      status: 'error',
+    });
+
+    renderWithTheme(<DefaultRoles />);
+    expect(screen.getByText(ERROR_STATE_TEXT)).toBeVisible();
+  });
 });

packages/manager/src/features/IAM/Roles/Defaults/DefaultRoles.tsx

@@ -1,14 +1,20 @@
 import { useGetDefaultDelegationAccessQuery } from '@linode/queries';
-import { CircleProgress, Paper, Typography } from '@linode/ui';
+import { CircleProgress, ErrorState, Paper, Typography } from '@linode/ui';
 import * as React from 'react';
 
 import { AssignedRolesTable } from '../../Shared/AssignedRolesTable/AssignedRolesTable';
-import { NO_ASSIGNED_DEFAULT_ROLES_TEXT } from '../../Shared/constants';
+import {
+  ERROR_STATE_TEXT,
+  NO_ASSIGNED_DEFAULT_ROLES_TEXT,
+} from '../../Shared/constants';
 import { NoAssignedRoles } from '../../Shared/NoAssignedRoles/NoAssignedRoles';
 
 export const DefaultRoles = () => {
-  const { data: defaultRolesData, isLoading: defaultRolesLoading } =
-    useGetDefaultDelegationAccessQuery({ enabled: true });
+  const {
+    data: defaultRolesData,
+    isLoading: defaultRolesLoading,
+    error,
+  } = useGetDefaultDelegationAccessQuery({ enabled: true });
   const hasAssignedRoles = defaultRolesData
     ? defaultRolesData.account_access.length > 0 ||
       defaultRolesData.entity_access.length > 0
@@ -17,6 +23,11 @@ export const DefaultRoles = () => {
   if (defaultRolesLoading) {
     return <CircleProgress />;
   }
+
+  if (error) {
+    return <ErrorState errorText={ERROR_STATE_TEXT} />;
+  }
+
   return (
     <Paper>
       {hasAssignedRoles ? (

packages/manager/src/features/IAM/Shared/AssignedRolesTable/ChangeRoleDrawer.tsx

@@ -14,6 +14,7 @@ import {
 } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import { useParams } from '@tanstack/react-router';
+import { enqueueSnackbar } from 'notistack';
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
@@ -147,6 +148,8 @@ export const ChangeRoleDrawer = ({ mode, onClose, open, role }: Props) => {
 
       await mutationFn(updatedUserRoles);
 
+      enqueueSnackbar(`Role changed.`, { variant: 'success' });
+
       handleClose();
     } catch (errors) {
       setError('root', {

packages/manager/src/features/IAM/Shared/AssignedRolesTable/UpdateEntitiesDrawer.tsx

@@ -7,6 +7,7 @@ import {
 import { ActionsPanel, Drawer, Notice, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import { useParams } from '@tanstack/react-router';
+import { enqueueSnackbar } from 'notistack';
 import React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 
@@ -113,6 +114,8 @@ export const UpdateEntitiesDrawer = ({ onClose, open, role }: Props) => {
         entity_access: entityAccess,
       });
 
+      enqueueSnackbar(`List of entities updated.`, { variant: 'success' });
+
       handleClose();
     } catch (errors) {
       for (const error of errors) {