feat: added missing remove identity, user handler, changed title to duration for access type

backend/src/server/routes/v1/project-membership-router.ts

@@ -39,7 +39,8 @@ export const registerProjectMembershipRouter = async (server: FastifyZodProvider
               email: true,
               firstName: true,
               lastName: true,
-              id: true
+              id: true,
+              username: true
             }).merge(UserEncryptionKeysSchema.pick({ publicKey: true })),
             roles: z.array(
               z.object({
@@ -98,7 +99,8 @@ export const registerProjectMembershipRouter = async (server: FastifyZodProvider
               email: true,
               firstName: true,
               lastName: true,
-              id: true
+              id: true,
+              username: true
             }).merge(UserEncryptionKeysSchema.pick({ publicKey: true })),
             roles: z.array(
               z.object({

frontend/src/views/Project/IdentityDetailsPage/IdentityDetailPage.tsx

@@ -3,11 +3,16 @@ import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, EmptyState, Spinner } from "@app/components/v2";
+import { Button, DeleteActionModal, EmptyState, Spinner } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
-import { useGetWorkspaceIdentityMembershipDetails } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks";
+import {
+  useDeleteIdentityFromWorkspace,
+  useGetWorkspaceIdentityMembershipDetails
+} from "@app/hooks/api";
 
 import { IdentityProjectAdditionalPrivilegeSection } from "./components/IdentityProjectAdditionalPrivilegeSection";
 import { IdentityRoleDetailsSection } from "./components/IdentityRoleDetailsSection";
@@ -23,6 +28,38 @@ export const IdentityDetailsPage = withProjectPermission(
     const { data: identityMembershipDetails, isLoading: isMembershipDetailsLoading } =
       useGetWorkspaceIdentityMembershipDetails(workspaceId, identityId);
 
+    const { mutateAsync: deleteMutateAsync, isLoading: isDeletingIdentity } =
+      useDeleteIdentityFromWorkspace();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "deleteIdentity",
+      "upgradePlan"
+    ] as const);
+
+    const onRemoveIdentitySubmit = async () => {
+      try {
+        await deleteMutateAsync({
+          identityId,
+          workspaceId
+        });
+        createNotification({
+          text: "Successfully removed identity from project",
+          type: "success"
+        });
+        handlePopUpClose("deleteIdentity");
+        router.push(`/project/${workspaceId}/members?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"
+        });
+      }
+    };
+
     if (isMembershipDetailsLoading) {
       return (
         <div className="flex w-full items-center justify-center p-24">
@@ -67,6 +104,8 @@ export const IdentityDetailsPage = withProjectPermission(
                           variant="outline_bg"
                           size="xs"
                           isDisabled={!isAllowed}
+                          isLoading={isDeletingIdentity}
+                          onClick={() => handlePopUpOpen("deleteIdentity")}
                         >
                           Remove Identity
                         </Button>
@@ -98,6 +137,13 @@ export const IdentityDetailsPage = withProjectPermission(
             <IdentityProjectAdditionalPrivilegeSection
               identityMembershipDetails={identityMembershipDetails}
             />
+            <DeleteActionModal
+              isOpen={popUp.deleteIdentity.isOpen}
+              title={`Are you sure want to remove ${identityMembershipDetails?.identity?.name} from the project?`}
+              onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+              deleteKey="remove"
+              onDeleteApproved={() => onRemoveIdentitySubmit()}
+            />
           </>
         ) : (
           <EmptyState title="Error: Unable to find the identity." className="py-12" />

frontend/src/views/Project/IdentityDetailsPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx

@@ -274,7 +274,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
               <Popover>
                 <PopoverTrigger disabled={isIdentityEditDisabled} asChild>
                   <div className="w-full max-w-md flex-grow">
-                    <FormLabel label="Access Type" />
+                    <FormLabel label="Duration" />
                     <Tooltip content={toolTipText}>
                       <Button
                         variant="outline_bg"

frontend/src/views/Project/IdentityDetailsPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeSection.tsx

@@ -128,7 +128,7 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
                   <THead>
                     <Tr>
                       <Th>Name</Th>
-                      <Th>Type</Th>
+                      <Th>Duration</Th>
                       <Th className="w-5" />
                     </Tr>
                   </THead>

frontend/src/views/Project/IdentityDetailsPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx

@@ -95,7 +95,7 @@ export const IdentityRoleDetailsSection = ({
             <THead>
               <Tr>
                 <Th>Role</Th>
-                <Th>Type</Th>
+                <Th>Duration</Th>
                 <Th className="w-5" />
               </Tr>
             </THead>

frontend/src/views/Project/MemberDetailsPage/MemberDetailPage.tsx

@@ -3,11 +3,24 @@ import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, EmptyState, Spinner } from "@app/components/v2";
+import {
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  Spinner,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization,
+  useWorkspace
+} from "@app/context";
 import { withProjectPermission } from "@app/hoc";
-import { useGetWorkspaceUserDetails } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks";
+import { useDeleteUserFromWorkspace, useGetWorkspaceUserDetails } from "@app/hooks/api";
 
 import { MemberProjectAdditionalPrivilegeSection } from "./components/MemberProjectAdditionalPrivilegeSection";
 import { MemberRoleDetailsSection } from "./components/MemberRoleDetailsSection";
@@ -15,6 +28,7 @@ import { MemberRoleDetailsSection } from "./components/MemberRoleDetailsSection"
 export const MemberDetailsPage = withProjectPermission(
   () => {
     const router = useRouter();
+    const { currentOrg } = useOrganization();
     const { currentWorkspace } = useWorkspace();
 
     const workspaceId = currentWorkspace?.id || "";
@@ -23,6 +37,38 @@ export const MemberDetailsPage = withProjectPermission(
     const { data: membershipDetails, isLoading: isMembershipDetailsLoading } =
       useGetWorkspaceUserDetails(workspaceId, membershipId);
 
+    const { mutateAsync: removeUserFromWorkspace, isLoading: isRemovingUserFromWorkspace } =
+      useDeleteUserFromWorkspace();
+
+    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+      "removeMember",
+      "upgradePlan"
+    ] as const);
+
+    const handleRemoveUser = async () => {
+      if (!currentOrg?.id || !currentWorkspace?.id || !membershipDetails?.user?.username) return;
+
+      try {
+        await removeUserFromWorkspace({
+          workspaceId: currentWorkspace.id,
+          usernames: [membershipDetails?.user?.username],
+          orgId: currentOrg.id
+        });
+        createNotification({
+          text: "Successfully removed user from project",
+          type: "success"
+        });
+        router.push(`/project/${currentWorkspace?.id}/members`);
+      } catch (error) {
+        console.error(error);
+        createNotification({
+          text: "Failed to remove user from the project",
+          type: "error"
+        });
+      }
+      handlePopUpClose("removeMember");
+    };
+
     if (isMembershipDetailsLoading) {
       return (
         <div className="flex w-full items-center justify-center p-24">
@@ -65,6 +111,8 @@ export const MemberDetailsPage = withProjectPermission(
                           variant="outline_bg"
                           size="xs"
                           isDisabled={!isAllowed}
+                          isLoading={isRemovingUserFromWorkspace}
+                          onClick={() => handlePopUpOpen("removeMember")}
                         >
                           Remove User
                         </Button>
@@ -100,8 +148,26 @@ export const MemberDetailsPage = withProjectPermission(
             <MemberRoleDetailsSection
               membershipDetails={membershipDetails}
               isMembershipDetailsLoading={isMembershipDetailsLoading}
+              onOpenUpgradeModal={() =>
+                handlePopUpOpen("upgradePlan", {
+                  description:
+                    "You can assign custom roles to members if you upgrade your Infisical plan."
+                })
+              }
             />
             <MemberProjectAdditionalPrivilegeSection membershipDetails={membershipDetails} />
+            <DeleteActionModal
+              isOpen={popUp.removeMember.isOpen}
+              deleteKey="remove"
+              title="Do you want to remove this user from the project?"
+              onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
+              onDeleteApproved={handleRemoveUser}
+            />
+            <UpgradePlanModal
+              isOpen={popUp.upgradePlan.isOpen}
+              onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+              text={(popUp.upgradePlan?.data as { description: string })?.description}
+            />
           </>
         ) : (
           <EmptyState title="Error: Unable to find the user." className="py-12" />

frontend/src/views/Project/MemberDetailsPage/components/MemberProjectAdditionalPrivilegeSection/MemberProjectAdditionalPrivilegeSection.tsx

@@ -137,7 +137,7 @@ export const MemberProjectAdditionalPrivilegeSection = ({ membershipDetails }: P
                   <THead>
                     <Tr>
                       <Th>Name</Th>
-                      <Th>Type</Th>
+                      <Th>Duration</Th>
                       <Th className="w-5" />
                     </Tr>
                   </THead>

frontend/src/views/Project/MemberDetailsPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx

@@ -272,7 +272,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
               <Popover>
                 <PopoverTrigger disabled={isMemberEditDisabled} asChild>
                   <div className="w-full max-w-md flex-grow">
-                    <FormLabel label="Access Type" />
+                    <FormLabel label="Duration" />
                     <Tooltip content={toolTipText}>
                       <Button
                         variant="outline_bg"

frontend/src/views/Project/MemberDetailsPage/components/MemberRoleDetailsSection/MemberRoleDetailsSection.tsx

@@ -39,11 +39,13 @@ import { MemberRoleModify } from "./MemberRoleModify";
 type Props = {
   membershipDetails: TWorkspaceUser;
   isMembershipDetailsLoading?: boolean;
+  onOpenUpgradeModal: () => void;
 };
 
 export const MemberRoleDetailsSection = ({
   membershipDetails,
-  isMembershipDetailsLoading
+  isMembershipDetailsLoading,
+  onOpenUpgradeModal
 }: Props) => {
   const { user } = useUser();
   const userId = user?.id;
@@ -106,7 +108,7 @@ export const MemberRoleDetailsSection = ({
             <THead>
               <Tr>
                 <Th>Role</Th>
-                <Th>Type</Th>
+                <Th>Duration</Th>
                 <Th className="w-5" />
               </Tr>
             </THead>
@@ -213,7 +215,7 @@ export const MemberRoleDetailsSection = ({
           title="Roles"
           subTitle="Select one or more of the pre-defined or custom roles to configure project permissions."
         >
-          <MemberRoleModify projectMember={membershipDetails} onOpenUpgradeModal={() => {}} />
+          <MemberRoleModify projectMember={membershipDetails}  onOpenUpgradeModal={onOpenUpgradeModal} />
         </ModalContent>
       </Modal>
     </div>