solved merge conflicts

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -15,6 +15,7 @@ import {
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
+  useProjectPermission,
   useSubscription,
   useWorkspace
 } from "@app/context";
@@ -25,6 +26,7 @@ import {
 } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
+import { AssumePrivilegeModeBanner } from "./components/AssumePrivilegeModeBanner";
 import { ProjectSelect } from "./components/ProjectSelect";
 
 // This is a generic layout shared by all types of projects.
@@ -35,6 +37,7 @@ export const ProjectLayout = () => {
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
   const { t } = useTranslation();
+  const { assumedPrivilegeDetails } = useProjectPermission();
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
   const { subscription } = useSubscription();
@@ -68,6 +71,7 @@ export const ProjectLayout = () => {
   return (
     <>
       <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+        {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <motion.div
             key="menu-project-items"

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

@@ -0,0 +1,49 @@
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button } 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 { assumedPrivilegeDetails } = useProjectPermission();
+
+  if (!assumedPrivilegeDetails) return null;
+
+  return (
+    <div className="z-10 -mx-4 flex items-center justify-center gap-2 rounded border border-mineshaft-600 bg-primary-400 p-2 text-mineshaft-800 shadow">
+      <div>
+        <FontAwesomeIcon icon={faInfoCircle} className="mr-2" />
+        You are currently viewing the project with privileges of{" "}
+        <b>
+          {assumedPrivilegeDetails?.actorType === ActorType.IDENTITY ? "identity" : "user"}{" "}
+          {assumedPrivilegeDetails?.actorName}
+        </b>
+      </div>
+      <div>
+        <Button
+          size="xs"
+          variant="outline_bg"
+          className="hover:bg-mineshaft-500"
+          onClick={() => {
+            exitAssumePrivilegeMode.mutate(
+              {
+                projectId: currentWorkspace.id
+              },
+              {
+                onSuccess: () => {
+                  window.location.href = `/${currentWorkspace.type}/${currentWorkspace.id}/overview`;
+                }
+              }
+            );
+          }}
+        >
+          Click to exit
+        </Button>
+      </div>
+    </div>
+  );
+};

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

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