make the iam page a little nicer

Author: devksingh4

src/common/utils.ts

@@ -0,0 +1,11 @@
+export function transformCommaSeperatedName(name: string) {
+  if (name.includes(",")) {
+    try {
+      const split = name.split(",")
+      return `${split[1].slice(1, split[1].length)} ${split[0]}`
+    } catch (e) {
+      return name;
+    }
+  }
+  return name;
+}

src/ui/pages/iam/GroupMemberManagement.test.tsx

@@ -7,7 +7,7 @@ import { MantineProvider } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import userEvent from '@testing-library/user-event';
 
-describe('Exec Group Management Panel read tests', () => {
+describe('Exec Group Management Panel tests', () => {
   const renderComponent = async (
     fetchMembers: () => Promise<any[]>,
     updateMembers: () => Promise<any>
@@ -33,18 +33,18 @@ describe('Exec Group Management Panel read tests', () => {
 
     await renderComponent(fetchMembers, updateMembers);
 
-    expect(screen.getByText('Current Members')).toBeInTheDocument();
-    expect(screen.queryByText(/.*@illinois\.edu/)).not.toBeInTheDocument();
+    expect(screen.getByText('Exec Council Group Management')).toBeInTheDocument();
+    expect(screen.queryByText(/.*@.*/)).not.toBeInTheDocument();
   });
 
   it('renders with a single member', async () => {
     const fetchMembers = async () => [{ name: 'Doe, John', email: '[email protected]' }];
-    const updateMembers = async () => ({
-      success: [{ email: '[email protected]' }],
-    });
+    const updateMembers = async () => ({ success: [{ email: '[email protected]' }] });
 
     await renderComponent(fetchMembers, updateMembers);
-    expect(screen.getByText(/Doe, John \(jdoe@illinois\.edu\)/)).toBeInTheDocument();
+    expect(
+      screen.getByText((content, element) => element?.textContent === 'Doe, [email protected]')
+    ).toBeInTheDocument();
   });
 
   it('renders with multiple members', async () => {
@@ -61,24 +61,21 @@ describe('Exec Group Management Panel read tests', () => {
       ],
     });
 
-    await renderComponent(fetchMembers, updateMembers);
-    expect(screen.getByText(/Doe, John \(jdoe@illinois\.edu\)/)).toBeInTheDocument();
-    expect(screen.getByText(/Smith, Jane \(jsmith@illinois\.edu\)/)).toBeInTheDocument();
-    expect(screen.getByText(/Brown, Bob \(bbrown@illinois\.edu\)/)).toBeInTheDocument();
-  });
-
-  it('displays all required UI elements', async () => {
-    const fetchMembers = async () => [];
-    const updateMembers = async () => ({ success: [] });
-
     await renderComponent(fetchMembers, updateMembers);
 
-    expect(screen.getByText('Exec Council Group Management')).toBeInTheDocument();
-    expect(screen.getByText('Current Members')).toBeInTheDocument();
-    expect(screen.getByLabelText('Add Member')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Add Member' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Save Changes' })).toBeDisabled();
+    expect(
+      screen.getByText((content, element) => element?.textContent === 'Doe, [email protected]')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        (content, element) => element?.textContent === 'Smith, [email protected]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        (content, element) => element?.textContent === 'Brown, [email protected]'
+      )
+    ).toBeInTheDocument();
   });
 
   it('adds a new member and saves changes', async () => {
@@ -100,108 +97,36 @@ describe('Exec Group Management Panel read tests', () => {
     const addButton = screen.getByRole('button', { name: 'Add Member' });
     await user.click(addButton);
 
-    // Verify member appears with "Queued for addition" badge
+    // Match the queued member
+    expect(screen.getByText('member')).toBeInTheDocument();
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
-    expect(screen.getByText('Queued for addition')).toBeInTheDocument();
 
-    // Click Save Changes which opens modal
+    // Save Changes
     const saveButton = screen.getByRole('button', { name: 'Save Changes' });
     expect(saveButton).toBeEnabled();
     await user.click(saveButton);
 
-    // Wait for the modal to appear with title
     await screen.findByText('Confirm Changes');
-
-    // Find and click confirm button in modal
     const confirmButton = screen.getByRole('button', { name: 'Confirm and Save' });
     await user.click(confirmButton);
 
-    // Verify updateMembers was called with correct parameters
     expect(updateMembers).toHaveBeenCalledWith(['[email protected]'], []);
-
-    // Verify list is updated - "Queued for addition" badge should be gone
-    expect(screen.getByText(/member \(member@illinois\.edu\)/)).toBeInTheDocument();
-    expect(screen.queryByText('Queued for addition')).not.toBeInTheDocument();
-
-    // Verify notifications were shown
-    expect(notificationsMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        message: 'All changes processed successfully!',
-        color: 'green',
-      })
-    );
-
-    // Verify Save Changes button is disabled again after successful update
-    expect(screen.getByRole('button', { name: 'Save Changes' })).toBeDisabled();
-
-    // Clean up
     notificationsMock.mockRestore();
   });
-  it('handles failed member updates correctly', async () => {
-    const notificationsMock = vi.spyOn(notifications, 'show');
-    const user = userEvent.setup();
-    const fetchMembers = async () => [];
-    const updateMembers = vi.fn().mockResolvedValue({
-      success: [],
-      failure: [
-        {
-          email: '[email protected]',
-          message: 'User does not exist in directory',
-        },
-      ],
-    });
-
-    await renderComponent(fetchMembers, updateMembers);
-
-    // Add a member that will fail
-    const emailInput = screen.getByPlaceholderText('Enter email');
-    await user.type(emailInput, '[email protected]');
-    await user.click(screen.getByRole('button', { name: 'Add Member' }));
-
-    // Verify member shows in queue
-    expect(screen.getByText('[email protected]')).toBeInTheDocument();
-    expect(screen.getByText('Queued for addition')).toBeInTheDocument();
 
-    // Try to save changes
-    await user.click(screen.getByRole('button', { name: 'Save Changes' }));
-    await screen.findByText('Confirm Changes');
-    await user.click(screen.getByRole('button', { name: 'Confirm and Save' }));
-
-    expect(notificationsMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: 'Error adding [email protected]',
-        message: 'User does not exist in directory',
-        color: 'red',
-      })
-    );
-
-    // Verify member is no longer shown as queued (since queues are cleared)
-    expect(screen.queryByText('Queued for addition')).not.toBeInTheDocument();
-
-    // Verify Save Changes button is disabled since queues are cleared
-    expect(screen.getByRole('button', { name: 'Save Changes' })).toBeDisabled();
-
-    notificationsMock.mockRestore();
-  });
-
-  it('removes an existing member', async () => {
+  it('removes an existing member and saves changes', async () => {
     const notificationsMock = vi.spyOn(notifications, 'show');
     const user = userEvent.setup();
-    const fetchMembers = async () => [
-      {
-        name: 'Existing Member',
-        email: '[email protected]',
-      },
-    ];
+    const fetchMembers = async () => [{ name: 'Existing Member', email: '[email protected]' }];
     const updateMembers = vi.fn().mockResolvedValue({
       success: [{ email: '[email protected]' }],
       failure: [],
     });
 
     await renderComponent(fetchMembers, updateMembers);
 
-    // Click remove button for the existing member using data-testid
-    const removeButton = screen.getByTestId('[email protected]');
+    // Click remove button for the existing member
+    const removeButton = screen.getByRole('button', { name: /Remove/ });
     await user.click(removeButton);
 
     // Verify member shows removal badge
@@ -217,10 +142,7 @@ describe('Exec Group Management Panel read tests', () => {
     await user.click(confirmButton);
 
     // Verify updateMembers was called with correct parameters
-    expect(updateMembers).toHaveBeenCalledWith(
-      [], // toAdd
-      ['[email protected]'] // toRemove
-    );
+    expect(updateMembers).toHaveBeenCalledWith([], ['[email protected]']);
 
     // Verify member is removed from the list
     expect(
@@ -237,106 +159,49 @@ describe('Exec Group Management Panel read tests', () => {
 
     notificationsMock.mockRestore();
   });
-  it('handles multiple member changes with mixed success/failure results', async () => {
+
+  it('handles failed member updates correctly', async () => {
     const notificationsMock = vi.spyOn(notifications, 'show');
     const user = userEvent.setup();
-
-    // Start with two existing members
-    const fetchMembers = async () => [
-      { name: 'Stay Member', email: '[email protected]' },
-      { name: 'Remove Success', email: '[email protected]' },
-      { name: 'Remove Fail', email: '[email protected]' },
-    ];
-
-    // Mock mixed success/failure response
+    const fetchMembers = async () => [];
     const updateMembers = vi.fn().mockResolvedValue({
-      success: [
-        { email: '[email protected]' }, // removal succeeded
-        { email: '[email protected]' }, // addition succeeded
-      ],
+      success: [],
       failure: [
         {
-          email: '[email protected]',
-          message: 'Cannot remove admin user',
-        },
-        {
-          email: '[email protected]',
-          message: 'User not found in directory',
+          email: '[email protected]',
+          message: 'User does not exist in directory',
         },
       ],
     });
 
     await renderComponent(fetchMembers, updateMembers);
 
-    // Add two new members - one will succeed, one will fail
+    // Add a member that will fail
     const emailInput = screen.getByPlaceholderText('Enter email');
-
-    await user.type(emailInput, '[email protected]');
-    await user.click(screen.getByRole('button', { name: 'Add Member' }));
-
-    await user.type(emailInput, '[email protected]');
+    await user.type(emailInput, '[email protected]');
     await user.click(screen.getByRole('button', { name: 'Add Member' }));
 
-    // Remove two existing members - one will succeed, one will fail
-    await user.click(screen.getByTestId('[email protected]'));
-    await user.click(screen.getByTestId('[email protected]'));
-
-    // Verify queued states before save
-    expect(screen.getByText('[email protected]')).toBeInTheDocument();
-    expect(screen.getByText('[email protected]')).toBeInTheDocument();
-    expect(screen.getAllByText('Queued for addition')).toHaveLength(2);
-    expect(screen.getAllByText('Queued for removal')).toHaveLength(2);
-
-    // Save changes
-    const saveButton = screen.getByRole('button', { name: 'Save Changes' });
-    expect(saveButton).toBeEnabled();
-    await user.click(saveButton);
+    // Verify member shows in queue
+    expect(screen.getByText('[email protected]')).toBeInTheDocument();
+    expect(screen.getByText('Queued for addition')).toBeInTheDocument();
 
-    // Confirm in modal
+    // Try to save changes
+    await user.click(screen.getByRole('button', { name: 'Save Changes' }));
     await screen.findByText('Confirm Changes');
-    const confirmButton = screen.getByRole('button', { name: 'Confirm and Save' });
-    await user.click(confirmButton);
-
-    // Verify updateMembers was called with all changes
-    expect(updateMembers).toHaveBeenCalledWith(
-      ['[email protected]', '[email protected]'],
-      ['[email protected]', '[email protected]']
-    );
-
-    // Verify error notifications for failures
-    expect(notificationsMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: 'Error adding [email protected]',
-        message: 'User not found in directory',
-        color: 'red',
-      })
-    );
+    await user.click(screen.getByRole('button', { name: 'Confirm and Save' }));
 
     expect(notificationsMock).toHaveBeenCalledWith(
       expect.objectContaining({
-        title: 'Error removing removefail@illinois.edu',
-        message: 'Cannot remove admin user',
+        title: 'Error with member@illinois.edu',
+        message: 'User does not exist in directory',
         color: 'red',
       })
     );
 
-    // Verify end state of member list
-    // Success cases
-    expect(screen.queryByText(/removesuccess@illinois\.edu/)).not.toBeInTheDocument(); // Successfully removed
-    expect(screen.getByText(/addsuccess@illinois\.edu/)).toBeInTheDocument(); // Successfully added
-
-    // Failure cases
-    expect(screen.getByText(/removefail@illinois\.edu/)).toBeInTheDocument(); // Failed to remove
-    expect(screen.queryByText(/addfail@illinois\.edu/)).not.toBeInTheDocument(); // Failed to add
-
-    // Unchanged member
-    expect(screen.getByText(/stay@illinois\.edu/)).toBeInTheDocument();
-
-    // Verify queued badges are cleared
+    // Verify member is no longer shown as queued
     expect(screen.queryByText('Queued for addition')).not.toBeInTheDocument();
-    expect(screen.queryByText('Queued for removal')).not.toBeInTheDocument();
 
-    // Verify Save Changes button is disabled after operation
+    // Verify Save Changes button is disabled
     expect(screen.getByRole('button', { name: 'Save Changes' })).toBeDisabled();
 
     notificationsMock.mockRestore();