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

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" />