feat: [UIE-8142] - IAM RBAC - Implement Roles Table (linode#12012)

* feat: [UIE-8142] - IAM RBAC - Implement Roles Table

* merged with recent changes plus small tweaks to roles table

* remove personalized package.json

* responding to some PR feedback

* fix package json

* fixed lock file

* Added changeset: Introduced the Web Component library, used table as POC

---------

Co-authored-by: cpathipa <[email protected]>

Author: rodonnel-akamai

packages/api-v4/src/iam/types.ts

@@ -15,11 +15,13 @@ export type AccountAccessRole =
   | 'account_admin'
   | 'account_linode_admin'
   | 'account_viewer'
+  | 'account_volume_admin'
   | 'firewall_creator'
   | 'linode_contributor'
   | 'linode_creator';
 
 export type EntityAccessRole =
+  | 'database_admin'
   | 'firewall_admin'
   | 'firewall_creator'
   | 'linode_contributor'

packages/manager/.changeset/pr-12012-added-1744320839894.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+UIE-8142 - implement Roles table ([#12012](https://github.com/linode/manager/pull/12012))

packages/manager/.changeset/pr-12012-added-1744837242791.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Introduced the Web Component library, used table as POC ([#12012](https://github.com/linode/manager/pull/12012))

packages/manager/package.json

@@ -45,6 +45,7 @@
     "@tanstack/react-query-devtools": "5.51.24",
     "@tanstack/react-router": "^1.111.11",
     "@xterm/xterm": "^5.5.0",
+    "akamai-cds-react-components": "0.0.1-alpha.6",
     "algoliasearch": "^4.14.3",
     "axios": "~1.8.3",
     "braintree-web": "^3.92.2",

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

@@ -0,0 +1,58 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { accountPermissionsFactory } from 'src/factories/accountPermissions';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { RolesLanding } from './Roles';
+
+const queryMocks = vi.hoisted(() => ({
+  useAccountPermissions: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('src/queries/iam/iam', async () => {
+  const actual = await vi.importActual<any>('src/queries/iam/iam');
+  return {
+    ...actual,
+    useAccountPermissions: queryMocks.useAccountPermissions,
+  };
+});
+
+vi.mock('src/features/IAM/Shared/utilities', async () => {
+  const actual = await vi.importActual<any>(
+    'src/features/IAM/Shared/utilities'
+  );
+  return {
+    ...actual,
+    mapAccountPermissionsToRoles: vi.fn(),
+  };
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('RolesLanding', () => {
+  it('renders loading state when permissions are loading', () => {
+    queryMocks.useAccountPermissions.mockReturnValue({
+      data: null,
+      isLoading: true,
+    });
+
+    renderWithTheme(<RolesLanding />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders roles table when permissions are loaded', () => {
+    const mockPermissions = accountPermissionsFactory.build();
+    queryMocks.useAccountPermissions.mockReturnValue({
+      data: mockPermissions,
+      isLoading: false,
+    });
+
+    renderWithTheme(<RolesLanding />);
+    // RolesTable has a textbox at the top
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+});

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

@@ -1,9 +1,28 @@
+import { CircleProgress, Paper } from '@linode/ui';
 import React from 'react';
 
+import { RolesTable } from 'src/features/IAM/Roles/RolesTable/RolesTable';
+import { mapAccountPermissionsToRoles } from 'src/features/IAM/Shared/utilities';
+import { useAccountPermissions } from 'src/queries/iam/iam';
+
 export const RolesLanding = () => {
+  const { data: accountPermissions, isLoading } = useAccountPermissions();
+
+  const { roles } = React.useMemo(() => {
+    if (!accountPermissions) {
+      return { roles: [] };
+    }
+    const roles = mapAccountPermissionsToRoles(accountPermissions);
+    return { roles };
+  }, [accountPermissions]);
+
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
   return (
-    <>
-      <p>Roles Table - UIE-8142 </p>
-    </>
+    <Paper sx={(theme) => ({ marginTop: theme.tokens.spacing.S16 })}>
+      <RolesTable roles={roles} />
+    </Paper>
   );
 };

packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.test.tsx

@@ -0,0 +1,94 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { RolesTable } from './RolesTable';
+
+import type { RoleMap } from '../../Shared/utilities';
+
+vi.mock('src/features/IAM/Shared/utilities', async () => {
+  const actual = await vi.importActual<any>(
+    'src/features/IAM/Shared/utilities'
+  );
+  return {
+    ...actual,
+    mapAccountPermissionsToRoles: vi.fn(),
+  };
+});
+
+const mockRoles: RoleMap[] = [
+  {
+    access: 'account_access',
+    description: 'Account volume admin',
+    entity_ids: [1],
+    entity_type: 'volume',
+    id: 'account_volume_admin',
+    name: 'account_volume_admin',
+    permissions: ['attach_volume', 'delete_volume', 'clone_volume'],
+  },
+  {
+    access: 'entity_access',
+    description: 'Firewall admin',
+    entity_ids: [1],
+    entity_type: 'firewall',
+    id: 'firewall_admin',
+    name: 'firewall_admin',
+    permissions: [],
+  },
+];
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('RolesTable', () => {
+  it('renders no roles when roles array is empty', () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <RolesTable roles={[]} />
+    );
+
+    expect(getByTestId('roles-table')).toBeInTheDocument();
+    expect(getByText('No items to display.')).toBeInTheDocument();
+  });
+
+  it('renders roles correctly when roles array is provided', () => {
+    const { getByText, getByTestId, getAllByRole } = renderWithTheme(
+      <RolesTable roles={mockRoles} />
+    );
+
+    expect(getByTestId('roles-table')).toBeInTheDocument();
+    expect(getAllByRole('combobox').length).toEqual(1);
+    expect(getByText('Account volume admin')).toBeInTheDocument();
+  });
+
+  it('filters roles to warranted results based on search input', async () => {
+    renderWithTheme(<RolesTable roles={mockRoles} />);
+    const searchInput: HTMLInputElement = screen.getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'Account' } });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('roles-table')).toBeInTheDocument();
+      expect(searchInput.value).toBe('Account');
+      // TODO - if there is a way to pierce the shadow DOM, we can check these results, but these tests fail currently
+      // expect(screen.getByText('Account')).toBeInTheDocument();
+      // expect(screen.queryByText('Database')).not.toBeInTheDocument();
+      // expect(screen.getByText('No items to display.')).not.toBeInTheDocument();
+    });
+  });
+
+  it('filters roles to no results based on search input if warranted', async () => {
+    renderWithTheme(<RolesTable roles={mockRoles} />);
+
+    const searchInput: HTMLInputElement = screen.getByPlaceholderText('Search');
+    fireEvent.change(searchInput, {
+      target: { value: 'NonsenseThatWontMatchAnything' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('roles-table')).toBeInTheDocument();
+      expect(searchInput.value).toBe('NonsenseThatWontMatchAnything');
+      expect(screen.getByText('No items to display.')).toBeInTheDocument();
+    });
+  });
+});