refactor: enhance notification handling and streamline async logic across various components

frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx

@@ -62,26 +62,19 @@ const Content = ({ popUp, handlePopUpToggle }: Props) => {
   });
 
   const onFormSubmit = async ({ group, role }: FormData) => {
-    try {
-      await addGroupToWorkspaceMutateAsync({
-        projectId: currentProject?.id || "",
-        groupId: group.id,
-        role: role.slug || undefined
-      });
+    await addGroupToWorkspaceMutateAsync({
+      projectId: currentProject?.id || "",
+      groupId: group.id,
+      role: role.slug || undefined
+    });
 
-      reset();
-      handlePopUpToggle("group", false);
+    reset();
+    handlePopUpToggle("group", false);
 
-      createNotification({
-        text: "Successfully added group to project",
-        type: "success"
-      });
-    } catch {
-      createNotification({
-        text: "Failed to add group to project",
-        type: "error"
-      });
-    }
+    createNotification({
+      text: "Successfully added group to project",
+      type: "success"
+    });
   };
 
   return filteredGroupMembershipOrgs.length ? (

frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx

@@ -43,28 +43,17 @@ export const GroupsSection = () => {
   };
 
   const onRemoveGroupSubmit = async (groupId: string) => {
-    try {
-      await deleteMutateAsync({
-        groupId,
-        projectId: currentProject?.id || ""
-      });
+    await deleteMutateAsync({
+      groupId,
+      projectId: currentProject?.id || ""
+    });
 
-      createNotification({
-        text: "Successfully removed identity from project",
-        type: "success"
-      });
+    createNotification({
+      text: "Successfully removed identity from project",
+      type: "success"
+    });
 
-      handlePopUpClose("deleteGroup");
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to remove group from project";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
+    handlePopUpClose("deleteGroup");
   };
 
   return (

frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx

@@ -119,28 +119,17 @@ export const IdentityTab = withProjectPermission(
     ] as const);
 
     const onRemoveIdentitySubmit = async (identityId: string) => {
-      try {
-        await deleteMutateAsync({
-          identityId,
-          projectId
-        });
+      await deleteMutateAsync({
+        identityId,
+        projectId
+      });
 
-        createNotification({
-          text: "Successfully removed identity from project",
-          type: "success"
-        });
+      createNotification({
+        text: "Successfully removed identity from project",
+        type: "success"
+      });
 
-        handlePopUpClose("deleteIdentity");
-      } catch (err) {
-        console.error(err);
-        const error = err as any;
-        const text = error?.response?.data?.message ?? "Failed to remove identity from project";
-
-        createNotification({
-          text,
-          type: "error"
-        });
-      }
+      handlePopUpClose("deleteIdentity");
     };
 
     const handleSort = (column: ProjectIdentityOrderBy) => {

frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/IdentityModal.tsx

@@ -104,40 +104,29 @@ const Content = ({ popUp, handlePopUpToggle }: Props) => {
   });
 
   const onFormSubmit = async ({ identity, role }: FormData) => {
-    try {
-      await addIdentityToWorkspaceMutateAsync({
-        projectId,
-        identityId: identity.id,
-        role: role.slug || undefined
-      });
+    await addIdentityToWorkspaceMutateAsync({
+      projectId,
+      identityId: identity.id,
+      role: role.slug || undefined
+    });
 
-      createNotification({
-        text: "Successfully added identity to project",
-        type: "success"
-      });
+    createNotification({
+      text: "Successfully added identity to project",
+      type: "success"
+    });
 
-      const nextAvailableMembership = filteredIdentityMembershipOrgs.filter(
-        (membership) => membership.identity.id !== identity.id
-      )[0];
+    const nextAvailableMembership = filteredIdentityMembershipOrgs.filter(
+      (membership) => membership.identity.id !== identity.id
+    )[0];
 
-      // prevents combobox from displaying previously added identity
-      reset({
-        identity: {
-          name: nextAvailableMembership?.identity.name,
-          id: nextAvailableMembership?.identity.id
-        }
-      });
-      handlePopUpToggle("identity", false);
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to add identity to project";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
+    // prevents combobox from displaying previously added identity
+    reset({
+      identity: {
+        name: nextAvailableMembership?.identity.name,
+        id: nextAvailableMembership?.identity.id
+      }
+    });
+    handlePopUpToggle("identity", false);
   };
 
   if (isMembershipsLoading || isRolesLoading)

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/AddMemberModal.tsx

@@ -110,65 +110,56 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
 
     if (!selectedMembers) return;
 
-    try {
-      if (currentProject.version === ProjectVersion.V1) {
+    if (currentProject.version === ProjectVersion.V1) {
+      createNotification({
+        type: "error",
+        text: "Please upgrade your project to invite new members to the project."
+      });
+    } else {
+      const inviteeEmails = selectedMembers
+        .map((member) => {
+          if (!member) return null;
+
+          if (member.user.username) {
+            return member.user.username;
+          }
+
+          if (member.user.email) {
+            return member.user.email;
+          }
+
+          return null;
+        })
+        .filter(Boolean) as string[];
+
+      if (inviteeEmails.length !== selectedMembers.length) {
         createNotification({
-          type: "error",
-          text: "Please upgrade your project to invite new members to the project."
+          text: "Failed to add users to project. One or more users were invalid.",
+          type: "error"
+        });
+        return;
+      }
+
+      if (newInvitees.length) {
+        await addMemberToOrg({
+          inviteeEmails: newInvitees,
+          organizationId: orgId,
+          organizationRoleSlug: ProjectMembershipRole.Member // only applies to new invites
+        });
+      }
+      if (newInvitees.length || inviteeEmails.length) {
+        await addUserToProject({
+          usernames: [...inviteeEmails, ...newInvitees],
+          orgId,
+          projectId: currentProject.id,
+          roleSlugs: projectRoleSlugs.map((role) => role.slug)
         });
-      } else {
-        const inviteeEmails = selectedMembers
-          .map((member) => {
-            if (!member) return null;
-
-            if (member.user.username) {
-              return member.user.username;
-            }
-
-            if (member.user.email) {
-              return member.user.email;
-            }
-
-            return null;
-          })
-          .filter(Boolean) as string[];
-
-        if (inviteeEmails.length !== selectedMembers.length) {
-          createNotification({
-            text: "Failed to add users to project. One or more users were invalid.",
-            type: "error"
-          });
-          return;
-        }
-
-        if (newInvitees.length) {
-          await addMemberToOrg({
-            inviteeEmails: newInvitees,
-            organizationId: orgId,
-            organizationRoleSlug: ProjectMembershipRole.Member // only applies to new invites
-          });
-        }
-        if (newInvitees.length || inviteeEmails.length) {
-          await addUserToProject({
-            usernames: [...inviteeEmails, ...newInvitees],
-            orgId,
-            projectId: currentProject.id,
-            roleSlugs: projectRoleSlugs.map((role) => role.slug)
-          });
-        }
       }
-      createNotification({
-        text: "Successfully added user to the project",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to add user to project",
-        type: "error"
-      });
-      return;
     }
+    createNotification({
+      text: "Successfully added user to the project",
+      type: "success"
+    });
     handlePopUpToggle("addMember", false);
     reset();
   };

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx

@@ -182,21 +182,14 @@ export const SpecificPrivilegeSecretForm = ({
     }
 
     if (deleteUserPrivilege.isPending) return;
-    try {
-      await deleteUserPrivilege.mutateAsync({
-        privilegeId: privilege.id,
-        projectMembershipId: privilege.projectMembershipId
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully deleted privilege"
-      });
-    } catch {
-      createNotification({
-        type: "error",
-        text: "Failed to delete privilege"
-      });
-    }
+    await deleteUserPrivilege.mutateAsync({
+      privilegeId: privilege.id,
+      projectMembershipId: privilege.projectMembershipId
+    });
+    createNotification({
+      type: "success",
+      text: "Successfully deleted privilege"
+    });
   };
 
   // This is used for requesting access additional privileges, not directly creating a privilege!

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx

@@ -35,23 +35,15 @@ export const MembersSection = () => {
     if (!currentOrg?.id) return;
     if (!currentProject?.id) return;
 
-    try {
-      await removeUserFromWorkspace({
-        projectId: currentProject.id,
-        usernames: [username],
-        orgId: currentOrg.id
-      });
-      createNotification({
-        text: "Successfully removed user from project",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to remove user from the project",
-        type: "error"
-      });
-    }
+    await removeUserFromWorkspace({
+      projectId: currentProject.id,
+      usernames: [username],
+      orgId: currentOrg.id
+    });
+    createNotification({
+      text: "Successfully removed user from project",
+      type: "success"
+    });
     handlePopUpClose("removeMember");
   };
 

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { faCheck, faCopy, faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AxiosError } from "axios";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
@@ -110,45 +109,29 @@ const ServiceTokenForm = () => {
   };
 
   const onFormSubmit = async ({ name, scopes, expiresIn, permissions }: FormData) => {
-    try {
-      if (!currentProject?.id) return;
+    if (!currentProject?.id) return;
 
-      const randomBytes = crypto.randomBytes(16).toString("hex");
+    const randomBytes = crypto.randomBytes(16).toString("hex");
 
-      const { serviceToken } = await createServiceToken.mutateAsync({
-        encryptedKey: "",
-        iv: "",
-        tag: "",
-        scopes,
-        expiresIn: Number(expiresIn),
-        name,
-        workspaceId: currentProject.id,
-        randomBytes,
-        permissions: Object.entries(permissions)
-          .filter(([, permissionsValue]) => permissionsValue)
-          .map(([permissionsKey]) => permissionsKey)
-      });
+    const { serviceToken } = await createServiceToken.mutateAsync({
+      encryptedKey: "",
+      iv: "",
+      tag: "",
+      scopes,
+      expiresIn: Number(expiresIn),
+      name,
+      workspaceId: currentProject.id,
+      randomBytes,
+      permissions: Object.entries(permissions)
+        .filter(([, permissionsValue]) => permissionsValue)
+        .map(([permissionsKey]) => permissionsKey)
+    });
 
-      setToken(serviceToken);
-      createNotification({
-        text: "Successfully created a service token",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      const axiosError = err as AxiosError;
-      if (axiosError?.response?.status === 401) {
-        createNotification({
-          text: "You do not have access to the selected environment/path",
-          type: "error"
-        });
-      } else {
-        createNotification({
-          text: "Failed to create a service token",
-          type: "error"
-        });
-      }
-    }
+    setToken(serviceToken);
+    createNotification({
+      text: "Successfully created a service token",
+      type: "success"
+    });
   };
 
   return !hasServiceToken ? (

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -28,23 +28,15 @@ export const ServiceTokenSection = withProjectPermission(
     ] as const);
 
     const onDeleteApproved = async () => {
-      try {
-        deleteServiceToken.mutateAsync(
-          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id
-        );
-        createNotification({
-          text: "Successfully deleted service token",
-          type: "success"
-        });
+      await deleteServiceToken.mutateAsync(
+        (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id
+      );
+      createNotification({
+        text: "Successfully deleted service token",
+        type: "success"
+      });
 
-        handlePopUpClose("deleteAPITokenConfirmation");
-      } catch (err) {
-        console.error(err);
-        createNotification({
-          text: "Failed to delete service token",
-          type: "error"
-        });
-      }
+      handlePopUpClose("deleteAPITokenConfirmation");
     };
 
     return (

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupDetailsSection.tsx

@@ -35,38 +35,27 @@ export const GroupDetailsSection = ({ groupMembership }: Props) => {
   const navigate = useNavigate();
 
   const onRemoveGroupSubmit = async () => {
-    try {
-      await deleteMutateAsync({
-        groupId: groupMembership.group.id,
+    await deleteMutateAsync({
+      groupId: groupMembership.group.id,
+      projectId: currentProject.id
+    });
+
+    createNotification({
+      text: "Successfully removed group from project",
+      type: "success"
+    });
+
+    navigate({
+      to: `${getProjectBaseURL(currentProject.type)}/access-management`,
+      params: {
         projectId: currentProject.id
-      });
+      },
+      search: {
+        selectedTab: "groups"
+      }
+    });
 
-      createNotification({
-        text: "Successfully removed group from project",
-        type: "success"
-      });
-
-      navigate({
-        to: `${getProjectBaseURL(currentProject.type)}/access-management`,
-        params: {
-          projectId: currentProject.id
-        },
-        search: {
-          selectedTab: "groups"
-        }
-      });
-
-      handlePopUpClose("deleteGroup");
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to remove group from project";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
+    handlePopUpClose("deleteGroup");
   };
 
   return (

frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -76,35 +76,24 @@ const Page = () => {
   };
 
   const onRemoveIdentitySubmit = async () => {
-    try {
-      await deleteMutateAsync({
-        identityId,
+    await deleteMutateAsync({
+      identityId,
+      projectId
+    });
+    createNotification({
+      text: "Successfully removed identity from project",
+      type: "success"
+    });
+    handlePopUpClose("deleteIdentity");
+    navigate({
+      to: `${getProjectBaseURL(currentProject.type)}/access-management` as const,
+      params: {
         projectId
-      });
-      createNotification({
-        text: "Successfully removed identity from project",
-        type: "success"
-      });
-      handlePopUpClose("deleteIdentity");
-      navigate({
-        to: `${getProjectBaseURL(currentProject.type)}/access-management` as const,
-        params: {
-          projectId
-        },
-        search: {
-          selectedTab: "identities"
-        }
-      });
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to remove identity from project";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
+      },
+      search: {
+        selectedTab: "identities"
+      }
+    });
   };
 
   if (isMembershipDetailsLoading) {

frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx

@@ -83,29 +83,21 @@ export const Page = () => {
   const handleRemoveUser = async () => {
     if (!currentOrg?.id || !currentProject?.id || !membershipDetails?.user?.username) return;
 
-    try {
-      await removeUserFromWorkspace({
-        projectId,
-        usernames: [membershipDetails?.user?.username],
-        orgId: currentOrg.id
-      });
-      createNotification({
-        text: "Successfully removed user from project",
-        type: "success"
-      });
-      navigate({
-        to: `${getProjectBaseURL(currentProject.type)}/access-management` as const,
-        params: {
-          projectId: currentProject.id
-        }
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to remove user from the project",
-        type: "error"
-      });
-    }
+    await removeUserFromWorkspace({
+      projectId,
+      usernames: [membershipDetails?.user?.username],
+      orgId: currentOrg.id
+    });
+    createNotification({
+      text: "Successfully removed user from project",
+      type: "success"
+    });
+    navigate({
+      to: `${getProjectBaseURL(currentProject.type)}/access-management` as const,
+      params: {
+        projectId: currentProject.id
+      }
+    });
     handlePopUpClose("removeMember");
   };
 

frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx

@@ -53,38 +53,27 @@ const Page = () => {
   ] as const);
 
   const onDeleteRoleSubmit = async () => {
-    try {
-      if (!currentProject?.slug || !data?.id) return;
+    if (!currentProject?.slug || !data?.id) return;
 
-      await deleteProjectRole({
-        projectId,
-        id: data.id
-      });
+    await deleteProjectRole({
+      projectId,
+      id: data.id
+    });
 
-      createNotification({
-        text: "Successfully deleted project role",
-        type: "success"
-      });
-      handlePopUpClose("deleteRole");
-      navigate({
-        to: `${getProjectBaseURL(currentProject.type)}/access-management` as const,
-        params: {
-          projectId
-        },
-        search: {
-          selectedTab: ProjectAccessControlTabs.Roles
-        }
-      });
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to delete project role";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
+    createNotification({
+      text: "Successfully deleted project role",
+      type: "success"
+    });
+    handlePopUpClose("deleteRole");
+    navigate({
+      to: `${getProjectBaseURL(currentProject.type)}/access-management` as const,
+      params: {
+        projectId
+      },
+      search: {
+        selectedTab: ProjectAccessControlTabs.Roles
+      }
+    });
   };
 
   const isCustomRole = !Object.values(ProjectMembershipRole).includes(

frontend/src/pages/project/RoleDetailsBySlugPage/components/RoleModal.tsx

@@ -76,63 +76,54 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
   }, [role]);
 
   const onFormSubmit = async ({ name, description, slug }: FormData) => {
-    try {
-      if (!projectId) return;
+    if (!projectId) return;
 
-      if (role) {
-        // update
-        await updateProjectRole({
-          id: role.id,
-          projectId,
-          name,
-          description,
-          slug
-        });
-
-        handlePopUpToggle("role", false);
-        if (slug) {
-          navigate({
-            to: `${getProjectBaseURL(currentProject.type)}/roles/$roleSlug` as const,
-            params: {
-              roleSlug: slug,
-              projectId
-            }
-          });
-        }
-      } else {
-        // create
-        const newRole = await createProjectRole({
-          projectId,
-          name,
-          description,
-          slug,
-          permissions: []
-        });
+    if (role) {
+      // update
+      await updateProjectRole({
+        id: role.id,
+        projectId,
+        name,
+        description,
+        slug
+      });
 
+      handlePopUpToggle("role", false);
+      if (slug) {
         navigate({
           to: `${getProjectBaseURL(currentProject.type)}/roles/$roleSlug` as const,
           params: {
-            roleSlug: newRole.slug,
+            roleSlug: slug,
             projectId
           }
         });
-        handlePopUpToggle("role", false);
       }
-
-      createNotification({
-        text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
-        type: "success"
+    } else {
+      // create
+      const newRole = await createProjectRole({
+        projectId,
+        name,
+        description,
+        slug,
+        permissions: []
       });
 
-      reset();
-    } catch {
-      const text = `Failed to ${popUp?.role?.data ? "update" : "create"} role`;
-
-      createNotification({
-        text,
-        type: "error"
+      navigate({
+        to: `${getProjectBaseURL(currentProject.type)}/roles/$roleSlug` as const,
+        params: {
+          roleSlug: newRole.slug,
+          projectId
+        }
       });
+      handlePopUpToggle("role", false);
     }
+
+    createNotification({
+      text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
+      type: "success"
+    });
+
+    reset();
   };
 
   return (

frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx

@@ -10,24 +10,16 @@ export const DeleteProjectProtection = () => {
   const { mutateAsync } = useUpdateProject();
 
   const handleToggleDeleteProjectProtection = async (state: boolean) => {
-    try {
-      await mutateAsync({
-        projectId,
-        hasDeleteProtection: state
-      });
+    await mutateAsync({
+      projectId,
+      hasDeleteProtection: state
+    });
 
-      const text = `Successfully ${state ? "enabled" : "disabled"} delete protection`;
-      createNotification({
-        text,
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to update delete protection",
-        type: "error"
-      });
-    }
+    const text = `Successfully ${state ? "enabled" : "disabled"} delete protection`;
+    createNotification({
+      text,
+      type: "success"
+    });
   };
 
   return (

frontend/src/pages/project/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -68,12 +68,6 @@ export const DeleteProjectSection = () => {
         to: "/organization/projects"
       });
       handlePopUpClose("deleteWorkspace");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete project",
-        type: "error"
-      });
     } finally {
       setIsDeleting.off();
     }
@@ -118,12 +112,6 @@ export const DeleteProjectSection = () => {
       navigate({
         to: "/organization/projects"
       });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to leave project",
-        type: "error"
-      });
     } finally {
       setIsLeaving.off();
     }