feat: implemented user role impersonation

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -11,7 +11,7 @@ import {
   MenuItem,
   TBreadcrumbFormat
 } from "@app/components/v2";
-import { useSubscription, useWorkspace } from "@app/context";
+import { useProjectPermission, useSubscription, useWorkspace } from "@app/context";
 import {
   useGetAccessRequestsCount,
   useGetSecretApprovalRequestCount,
@@ -20,6 +20,7 @@ import {
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { ProjectSelect } from "./components/ProjectSelect";
+import { AssumePrivilegeModeBanner } from "./components/AssumePrivilegeModeBanner";
 
 // This is a generic layout shared by all types of projects.
 // If the product layout differs significantly, create a new layout as needed.
@@ -29,6 +30,7 @@ export const ProjectLayout = () => {
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
   const { t } = useTranslation();
+  const { impersonation } = useProjectPermission();
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
 
@@ -267,6 +269,7 @@ export const ProjectLayout = () => {
           </div>
         </div>
       </div>
+      {impersonation && <AssumePrivilegeModeBanner />}
       <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">

frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx

@@ -0,0 +1,68 @@
+import { faIdCard, faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@app/components/v2";
+import { useProjectPermission, useWorkspace } from "@app/context";
+import { useRemoveAssumeProjectPrivilege } from "@app/hooks/api";
+import { ActorType } from "@app/hooks/api/auditLogs/enums";
+
+export const AssumePrivilegeModeBanner = () => {
+  const { currentWorkspace } = useWorkspace();
+  const exitAssumePrivilegeMode = useRemoveAssumeProjectPrivilege();
+  const { impersonation } = useProjectPermission();
+
+  if (!impersonation) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex items-center gap-2 rounded border border-mineshaft-600 bg-mineshaft-800 p-2 shadow">
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <Button
+            leftIcon={
+              <FontAwesomeIcon
+                icon={impersonation?.actorType === ActorType.USER ? faUser : faIdCard}
+              />
+            }
+            onClick={() => {
+              exitAssumePrivilegeMode.mutate(
+                {
+                  projectId: currentWorkspace.id
+                },
+                {
+                  onSuccess: () => {
+                    window.location.href = `/${currentWorkspace.type}/${currentWorkspace.id}/overview`;
+                  }
+                }
+              );
+            }}
+          >
+            Exit Assume Privilege Mode
+          </Button>
+        </HoverCardTrigger>
+        <HoverCardContent
+          className="bg-mineshaft-800 pt-4"
+          sideOffset={10}
+          style={{ width: "360px" }}
+        >
+          <div className="flex gap-2">
+            <div className="flex px-2 pt-2">
+              <FontAwesomeIcon
+                className="text-3xl text-mineshaft-400"
+                icon={impersonation?.actorType === ActorType.USER ? faUser : faIdCard}
+              />
+            </div>
+            <div className="mb-4">
+              <div className="text-lg">{impersonation?.actorName}</div>
+              {impersonation?.actorEmail && (
+                <div className="text-xs">{impersonation?.actorEmail}</div>
+              )}
+              {impersonation?.actorType === ActorType.IDENTITY && (
+                <div className="text-xs">{impersonation?.actorId}</div>
+              )}
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  );
+};

frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/index.tsx

@@ -0,0 +1 @@
+export { AssumePrivilegeModeBanner } from "./AssumePrivilegeModeBanner";