ui: use correct group in correct environment, and fix error notifications for partial errors

Author: devksingh4

src/common/config.ts

@@ -9,9 +9,6 @@ type ValueOrArray<T> = T | ArrayOfValueOrArray<T>;
 type GroupRoleMapping = Record<string, readonly AppRoles[]>;
 type AzureRoleMapping = Record<string, readonly AppRoles[]>;
 type UserRoleMapping = Record<string, readonly AppRoles[]>;
-type KnownGroupMappings = {
-  Exec: string;
-}
 
 export type ConfigType = {
   GroupRoleMapping: GroupRoleMapping;

src/ui/config.ts

@@ -1,3 +1,5 @@
+import { execCouncilGroupId, execCouncilTestingGroupId } from '@common/config';
+
 export const runEnvironments = ['dev', 'prod', 'local-dev'] as const;
 // local dev should be used when you want to test against a local instance of the API
 
@@ -9,6 +11,9 @@ export type ValidService = ValidServices;
 export type ConfigType = {
   AadValidClientId: string;
   ServiceConfiguration: Record<ValidServices, ServiceConfiguration>;
+  KnownGroupMappings: {
+    Exec: string;
+  };
 };
 
 export type ServiceConfiguration = {
@@ -45,6 +50,9 @@ const environmentConfig: EnvironmentConfigType = {
         baseEndpoint: 'https://merchapi.acm.illinois.edu',
       },
     },
+    KnownGroupMappings: {
+      Exec: execCouncilTestingGroupId,
+    },
   },
   dev: {
     AadValidClientId: 'd1978c23-6455-426a-be4d-528b2d2e4026',
@@ -65,6 +73,9 @@ const environmentConfig: EnvironmentConfigType = {
         baseEndpoint: 'https://merchapi.acm.illinois.edu',
       },
     },
+    KnownGroupMappings: {
+      Exec: execCouncilTestingGroupId,
+    },
   },
   prod: {
     AadValidClientId: '43fee67e-e383-4071-9233-ef33110e9386',
@@ -85,6 +96,9 @@ const environmentConfig: EnvironmentConfigType = {
         baseEndpoint: 'https://merchapi.acm.illinois.edu',
       },
     },
+    KnownGroupMappings: {
+      Exec: execCouncilGroupId,
+    },
   },
 } as const;
 

src/ui/pages/iam/GroupMemberManagement.tsx

@@ -70,25 +70,62 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
     setIsLoading(true);
     try {
       const response = await updateMembers(toAdd, toRemove);
-      if (response.success) {
-        setMembers((prev) =>
-          prev
-            .filter((member) => !toRemove.includes(member.email))
-            .concat(toAdd.map((email) => ({ name: '', email })))
-        );
-        setToAdd([]);
-        setToRemove([]);
+      let { success, failure } = response;
+      if (!success) {
+        success = [];
+      }
+      if (!failure) {
+        failure = [];
       }
 
-      notifications.show({
-        title: 'Success',
-        message: 'Changes saved successfully!',
-        color: 'green',
-      });
+      const successfulAdds = success.filter((entry) => toAdd.includes(entry.email));
+      const successfulRemoves = success.filter((entry) => toRemove.includes(entry.email));
+      const failedAdds = failure.filter(({ email }) => toAdd.includes(email));
+      const failedRemoves = failure.filter(({ email }) => toRemove.includes(email));
+
+      setMembers((prev) =>
+        prev
+          .filter((member) => !successfulRemoves.some((remove) => remove.email === member.email))
+          .concat(successfulAdds.map(({ email }) => ({ name: email.split('@')[0], email })))
+      );
+
+      setToAdd([]);
+      setToRemove([]);
+
+      if (failure.length === 0) {
+        notifications.show({
+          title: 'Success',
+          message: 'All changes processed successfully!',
+          color: 'green',
+        });
+      } else {
+        failedAdds.forEach(({ email, message }) => {
+          notifications.show({
+            title: `Error adding ${email}`,
+            message,
+            color: 'red',
+          });
+        });
+
+        failedRemoves.forEach(({ email, message }) => {
+          notifications.show({
+            title: `Error removing ${email}`,
+            message,
+            color: 'red',
+          });
+        });
+        const allSuccess = successfulAdds.concat(successfulRemoves);
+        allSuccess.forEach(({ email }) => {
+          notifications.show({
+            message: `Successfully modified ${email}`,
+            color: 'green',
+          });
+        });
+      }
     } catch (error) {
       notifications.show({
         title: 'Error',
-        message: 'Failed to save changes.',
+        message: 'Failed to save changes due to an unexpected error.',
         color: 'red',
       });
     } finally {
@@ -99,7 +136,7 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
   return (
     <Box p="md">
       <Text fw={500} mb={4}>
-        Exec Group Management
+        Exec Council Group Management
       </Text>
 
       {/* Member List */}
@@ -117,7 +154,7 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
                       {member.name} ({member.email})
                     </Text>
                     {toRemove.includes(member.email) && (
-                      <Badge color="green" size="sm">
+                      <Badge color="red" size="sm">
                         Queued for removal
                       </Badge>
                     )}
@@ -137,7 +174,7 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
                 <Group justify="space-between">
                   <Box>
                     <Text size="sm">{member}</Text>
-                    <Badge color="red" size="sm">
+                    <Badge color="green" size="sm">
                       Queued for addition
                     </Badge>
                   </Box>

src/ui/pages/iam/ManageIam.page.tsx

@@ -5,15 +5,16 @@ import { useApi } from '@ui/util/api';
 import { AppRoles } from '@common/roles';
 import UserInvitePanel from './UserInvitePanel';
 import GroupMemberManagement from './GroupMemberManagement';
-import { execCouncilGroupId } from '@common/config';
 import {
   EntraActionResponse,
   GroupMemberGetResponse,
   GroupModificationPatchRequest,
 } from '@common/types/iam';
+import { getRunEnvironmentConfig } from '@ui/config';
 
 export const ManageIamPage = () => {
   const api = useApi('core');
+  const groupId = getRunEnvironmentConfig().KnownGroupMappings.Exec;
 
   const handleInviteSubmit = async (emailList: string[]) => {
     try {
@@ -35,7 +36,7 @@ export const ManageIamPage = () => {
 
   const getExecMembers = async () => {
     try {
-      const response = await api.get(`/api/v1/iam/groups/${execCouncilGroupId}`);
+      const response = await api.get(`/api/v1/iam/groups/${groupId}`);
       return response.data as GroupMemberGetResponse;
     } catch (error: any) {
       console.error('Failed to get users:', error);
@@ -46,7 +47,7 @@ export const ManageIamPage = () => {
   const updateExecMembers = async (toAdd: string[], toRemove: string[]) => {
     const allMembers = toAdd.concat(toRemove);
     try {
-      const response = await api.patch(`/api/v1/iam/groups/${execCouncilGroupId}`, {
+      const response = await api.patch(`/api/v1/iam/groups/${groupId}`, {
         remove: toRemove,
         add: toAdd,
       } as GroupModificationPatchRequest);