Add last used info to Reroll Confirmation Dialog

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx

@@ -3,6 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { type Key, and, db, eq, isNull, schema } from "@/lib/db";
+import { getLastUsed } from "@/lib/tinybird";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
@@ -42,6 +43,10 @@ export default async function SettingsPage(props: Props) {
     return notFound();
   }
 
+  const lastUsed = await getLastUsed({ keyId: key.id }).then(
+    (res) => res.data.at(0)?.lastUsed ?? 0,
+  );
+
   return (
     <div className="mb-20 flex flex-col gap-8 ">
       <Link
@@ -72,7 +77,11 @@ export default async function SettingsPage(props: Props) {
           </Code>
         </CardContent>
       </Card>
-      <RerollKey apiId={props.params.apiId} apiKey={key as unknown as Key & { roles: [] }} />
+      <RerollKey
+        apiId={props.params.apiId}
+        apiKey={key as unknown as Key & { roles: [] }}
+        lastUsed={lastUsed}
+      />
       <DeleteKey apiKey={key} keyAuthId={key.keyAuthId} />
     </div>
   );

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/reroll-confirmation-dialog.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,9 +14,10 @@ type Props = {
   open: boolean;
   setOpen: (open: boolean) => void;
   onClick: () => void;
+  lastUsed: number;
 };
 
-export function RerollConfirmationDialog({ open, setOpen, onClick }: Props) {
+export function RerollConfirmationDialog({ open, setOpen, onClick, lastUsed }: Props) {
   return (
     <Dialog open={open} onOpenChange={(o: boolean) => setOpen(o)}>
       <DialogContent className="border-alert">
@@ -26,6 +28,12 @@ export function RerollConfirmationDialog({ open, setOpen, onClick }: Props) {
           </DialogDescription>
         </DialogHeader>
 
+        <p className="text-sm text-content mt-1 mb-2">
+          {lastUsed
+            ? `This key was used for the last time on ${new Date(lastUsed).toString()}`
+            : "This key was never used."}
+        </p>
+
         <Alert variant="alert">
           <AlertTitle>Warning</AlertTitle>
           <AlertDescription>This action is not reversible. Please be certain.</AlertDescription>

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/reroll-key.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -35,6 +34,7 @@ type Props = {
   apiKey: Key & {
     roles: [];
   };
+  lastUsed: number;
 };
 
 const EXPIRATION_OPTIONS = [
@@ -51,7 +51,7 @@ const formSchema = z.object({
   expiresIn: z.coerce.string(),
 });
 
-export const RerollKey: React.FC<Props> = ({ apiKey, apiId }: Props) => {
+export const RerollKey: React.FC<Props> = ({ apiKey, apiId, lastUsed }: Props) => {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     reValidateMode: "onBlur",
@@ -144,6 +144,7 @@ export const RerollKey: React.FC<Props> = ({ apiKey, apiId }: Props) => {
         open={confirmatioDialogOpen}
         setOpen={setConfirmationDialogOpen}
         onClick={confirmationSubmit}
+        lastUsed={lastUsed}
       />
       <RerollNewKeyDialog newKey={createKey.data} apiId={apiId} keyAuthId={apiKey.keyAuthId} />
       <Form {...form}>

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/reroll-new-key-dialog.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";