Add admin tooltips to make support/debugging easier for admin users

ericallam · ericallam · commit ff6e2461d566 · 2024-05-02T14:12:16.000+01:00
diff --git a/apps/webapp/app/components/admin/debugTooltip.tsx b/apps/webapp/app/components/admin/debugTooltip.tsx
@@ -0,0 +1,27 @@
+import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/primitives/Tooltip";
+import { useHasAdminAccess } from "~/hooks/useUser";
+
+export function AdminDebugTooltip({ children }: { children: React.ReactNode }) {
+  const hasAdminAccess = useHasAdminAccess();
+
+  if (!hasAdminAccess) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <ShieldCheckIcon className="h-5 w-5" />
+        </TooltipTrigger>
+        <TooltipContent className="flex items-center gap-1">{children}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/webapp/app/hooks/useUser.ts b/apps/webapp/app/hooks/useUser.ts
@@ -26,3 +26,9 @@ export function useUser(matches?: UIMatch[]): User {
 export function useUserChanged(callback: (user: User | undefined) => void) {
   useChanged(useOptionalUser, callback);
 }
+
+export function useHasAdminAccess(matches?: UIMatch[]): boolean {
+  const user = useOptionalUser(matches);
+
+  return Boolean(user?.admin);
+}
diff --git a/apps/webapp/app/models/admin.server.ts b/apps/webapp/app/models/admin.server.ts
@@ -168,6 +168,12 @@ export async function adminGetOrganizations(userId: string, { page, search }: Se
                 mode: "insensitive",
               },
             },
+            {
+              id: {
+                contains: search,
+                mode: "insensitive",
+              },
+            },
           ],
         }
       : undefined,
diff --git a/apps/webapp/app/presenters/v3/RunPresenter.server.ts b/apps/webapp/app/presenters/v3/RunPresenter.server.ts
@@ -38,6 +38,7 @@ export class RunPresenter {
             id: true,
             type: true,
             slug: true,
+            organizationId: true,
             orgMember: {
               select: {
                 user: {
@@ -66,9 +67,13 @@ export class RunPresenter {
     if (!traceSummary) {
       return {
         run: {
+          id: run.id,
           number: run.number,
           friendlyId: run.friendlyId,
+          traceId: run.traceId,
           environment: {
+            id: run.runtimeEnvironment.id,
+            organizationId: run.runtimeEnvironment.organizationId,
             type: run.runtimeEnvironment.type,
             slug: run.runtimeEnvironment.slug,
             userId: run.runtimeEnvironment.orgMember?.user.id,
@@ -118,9 +123,13 @@ export class RunPresenter {
 
     return {
       run: {
+        id: run.id,
         number: run.number,
         friendlyId: run.friendlyId,
+        traceId: run.traceId,
         environment: {
+          id: run.runtimeEnvironment.id,
+          organizationId: run.runtimeEnvironment.organizationId,
           type: run.runtimeEnvironment.type,
           slug: run.runtimeEnvironment.slug,
           userId: run.runtimeEnvironment.orgMember?.user.id,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -9,6 +9,7 @@ import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { Feedback } from "~/components/Feedback";
 import { InitCommandV3, TriggerDevStepV3, TriggerLoginStepV3 } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -17,8 +18,9 @@ import { Callout } from "~/components/primitives/Callout";
 import { formatDateTime } from "~/components/primitives/DateTime";
 import { Header1, Header2, Header3 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
 import { Spinner } from "~/components/primitives/Spinner";
 import { StepNumber } from "~/components/primitives/StepNumber";
 import {
@@ -125,6 +127,25 @@ export default function Page() {
     <PageContainer>
       <NavBar>
         <PageTitle title="Tasks" />
+        <PageAccessories>
+          <AdminDebugTooltip>
+            <PropertyTable>
+              {tasks.map((task) => (
+                <Property label={task.exportName} key={task.slug}>
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">
+                      {task.environments
+                        .map((e) =>
+                          e.userName ? `${e.userName}/${e.id}` : `${e.type.slice(0, 3)}/${e.id}`
+                        )
+                        .join(", ")}
+                    </Paragraph>
+                  </div>
+                </Property>
+              ))}
+            </PropertyTable>
+          </AdminDebugTooltip>
+        </PageAccessories>
       </NavBar>
       <PageBody>
         <div className={cn("grid h-full grid-rows-1")}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
@@ -1,7 +1,8 @@
-import { BookOpenIcon } from "@heroicons/react/20/solid";
+import { BookOpenIcon, LightBulbIcon, ShieldCheckIcon } from "@heroicons/react/20/solid";
 import { Form } from "@remix-run/react";
 import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel";
 import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -10,8 +11,9 @@ import { Callout } from "~/components/primitives/Callout";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Header3 } from "~/components/primitives/Headers";
-import { PageAccessories, NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
 import {
   Table,
   TableBody,
@@ -24,7 +26,6 @@ import {
 import { TextLink } from "~/components/primitives/TextLink";
 import { prisma } from "~/db.server";
 import { useFeatures } from "~/hooks/useFeatures";
-import { useProject } from "~/hooks/useProject";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { createEnvironment } from "~/models/organization.server";
 import { ApiKeysPresenter } from "~/presenters/v3/ApiKeysPresenter.server";
@@ -132,6 +133,18 @@ export default function Page() {
       <NavBar>
         <PageTitle title="API keys" />
         <PageAccessories>
+          <AdminDebugTooltip>
+            <PropertyTable>
+              {environments.map((environment) => (
+                <Property label={environment.slug} key={environment.id}>
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">{environment.id}</Paragraph>
+                  </div>
+                </Property>
+              ))}
+            </PropertyTable>
+          </AdminDebugTooltip>
+
           <LinkButton
             variant={"minimal/small"}
             LeadingIcon={BookOpenIcon}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
@@ -67,6 +67,8 @@ import {
   v3RunsPath,
 } from "~/utils/pathBuilder";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -116,6 +118,33 @@ export default function Page() {
             title={`Run #${run.number}`}
           />
           <PageAccessories>
+            <AdminDebugTooltip>
+              <PropertyTable>
+                <Property label="ID">
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">{run.id}</Paragraph>
+                  </div>
+                </Property>
+                <Property label="Trace ID">
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">{run.traceId}</Paragraph>
+                  </div>
+                </Property>
+                <Property label="Env ID">
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">{run.environment.id}</Paragraph>
+                  </div>
+                </Property>
+                <Property label="Org ID">
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">
+                      {run.environment.organizationId}
+                    </Paragraph>
+                  </div>
+                </Property>
+              </PropertyTable>
+            </AdminDebugTooltip>
+
             <EnvironmentLabel
               size="large"
               environment={run.environment}
@@ -165,6 +194,33 @@ export default function Page() {
           title={`Run #${run.number}`}
         />
         <PageAccessories>
+          <AdminDebugTooltip>
+            <PropertyTable>
+              <Property label="ID">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">{run.id}</Paragraph>
+                </div>
+              </Property>
+              <Property label="Trace ID">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">{run.traceId}</Paragraph>
+                </div>
+              </Property>
+              <Property label="Env ID">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">{run.environment.id}</Paragraph>
+                </div>
+              </Property>
+              <Property label="Org ID">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">
+                    {run.environment.organizationId}
+                  </Paragraph>
+                </div>
+              </Property>
+            </PropertyTable>
+          </AdminDebugTooltip>
+
           <EnvironmentLabel size="large" environment={run.environment} userName={usernameForEnv} />
         </PageAccessories>
       </NavBar>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
@@ -4,6 +4,7 @@ import { Outlet, useLocation, useParams } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { BlankstateInstructions } from "~/components/BlankstateInstructions";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -12,6 +13,7 @@ import { DateTime } from "~/components/primitives/DateTime";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
 import {
   ResizableHandle,
   ResizablePanel,
@@ -93,6 +95,18 @@ export default function Page() {
       <NavBar>
         <PageTitle title="Schedules" />
         <PageAccessories>
+          <AdminDebugTooltip>
+            <PropertyTable>
+              {schedules.map((schedule) => (
+                <Property label={schedule.friendlyId} key={schedule.id}>
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">{schedule.id}</Paragraph>
+                  </div>
+                </Property>
+              ))}
+            </PropertyTable>
+          </AdminDebugTooltip>
+
           <LinkButton
             LeadingIcon={PlusIcon}
             to={`${v3NewSchedulePath(organization, project)}${location.search}`}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx
@@ -3,6 +3,7 @@ import { parse } from "@conform-to/zod";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { ActionFunction, json } from "@remix-run/server-runtime";
 import { z } from "zod";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Button } from "~/components/primitives/Buttons";
@@ -14,7 +15,9 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
 import { prisma } from "~/db.server";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -110,6 +113,23 @@ export default function Page() {
     <PageContainer>
       <NavBar>
         <PageTitle title={`${project.name} project settings`} />
+
+        <PageAccessories>
+          <AdminDebugTooltip>
+            <PropertyTable>
+              <Property label="ID">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">{project.id}</Paragraph>
+                </div>
+              </Property>
+              <Property label="Org ID">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">{project.organizationId}</Paragraph>
+                </div>
+              </Property>
+            </PropertyTable>
+          </AdminDebugTooltip>
+        </PageAccessories>
       </NavBar>
 
       <PageBody>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx
@@ -8,6 +8,7 @@ import { UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-type
 import invariant from "tiny-invariant";
 import { z } from "zod";
 import { UserAvatar } from "~/components/UserProfilePhoto";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import {
   Alert,
@@ -23,8 +24,9 @@ import { Button, ButtonContent, LinkButton } from "~/components/primitives/Butto
 import { DateTime } from "~/components/primitives/DateTime";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useUser } from "~/hooks/useUser";
@@ -107,6 +109,28 @@ export default function Page() {
     <PageContainer>
       <NavBar>
         <PageTitle title="Team" />
+
+        <PageAccessories>
+          <AdminDebugTooltip>
+            <PropertyTable>
+              <Property label="Org ID">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">{organization.id}</Paragraph>
+                </div>
+              </Property>
+
+              {members.map((member) => (
+                <Property label={member.user.name} key={member.id}>
+                  <div className="flex items-center gap-2">
+                    <Paragraph variant="extra-small/bright/mono">
+                      {member.user.email} - {member.user.id}
+                    </Paragraph>
+                  </div>
+                </Property>
+              ))}
+            </PropertyTable>
+          </AdminDebugTooltip>
+        </PageAccessories>
       </NavBar>
       <PageBody>
         <Header2>Members</Header2>
diff --git a/apps/webapp/app/routes/_app/route.tsx b/apps/webapp/app/routes/_app/route.tsx
@@ -15,9 +15,12 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     return redirect(confirmBasicDetailsPath());
   }
 
-  return typedjson({
-    headers: [["Set-Cookie", await commitSession(await clearRedirectTo(request))]],
-  });
+  return typedjson(
+    {},
+    {
+      headers: { "Set-Cookie": await commitSession(await clearRedirectTo(request)) },
+    }
+  );
 };
 
 export default function App() {
diff --git a/apps/webapp/app/routes/admin.orgs.tsx b/apps/webapp/app/routes/admin.orgs.tsx
