The admin tooltip now always shows basic org, project and user info

Author: matt-aitken

apps/webapp/app/components/admin/debugTooltip.tsx

@@ -1,12 +1,18 @@
+import * as Property from "~/components/primitives/PropertyTable";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "~/components/primitives/Tooltip";
-import { useIsImpersonating } from "~/hooks/useOrganizations";
-import { useHasAdminAccess } from "~/hooks/useUser";
+import {
+  useIsImpersonating,
+  useOptionalOrganization,
+  useOrganization,
+} from "~/hooks/useOrganizations";
+import { useOptionalProject, useProject } from "~/hooks/useProject";
+import { useHasAdminAccess, useUser } from "~/hooks/useUser";
 
 export function AdminDebugTooltip({ children }: { children: React.ReactNode }) {
   const hasAdminAccess = useHasAdminAccess();
@@ -22,10 +28,46 @@ export function AdminDebugTooltip({ children }: { children: React.ReactNode }) {
         <TooltipTrigger>
           <ShieldCheckIcon className="size-5" />
         </TooltipTrigger>
-        <TooltipContent className="flex max-h-[90vh] items-center gap-1 overflow-y-auto">
-          {children}
+        <TooltipContent className="max-h-[90vh] overflow-y-auto">
+          <Content>{children}</Content>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
 }
+
+function Content({ children }: { children: React.ReactNode }) {
+  const organization = useOptionalOrganization();
+  const project = useOptionalProject();
+  const user = useUser();
+
+  return (
+    <div className="flex flex-col gap-2 divide-y divide-slate-700">
+      <Property.Table>
+        <Property.Item>
+          <Property.Label>User ID</Property.Label>
+          <Property.Value>{user.id}</Property.Value>
+        </Property.Item>
+        {organization && (
+          <Property.Item>
+            <Property.Label>Org ID</Property.Label>
+            <Property.Value>{organization.id}</Property.Value>
+          </Property.Item>
+        )}
+        {project && (
+          <>
+            <Property.Item>
+              <Property.Label>Project ID</Property.Label>
+              <Property.Value>{project.id}</Property.Value>
+            </Property.Item>
+            <Property.Item>
+              <Property.Label>Project ref</Property.Label>
+              <Property.Value>{project.ref}</Property.Value>
+            </Property.Item>
+          </>
+        )}
+      </Property.Table>
+      <div className="pt-2">{children}</div>
+    </div>
+  );
+}