feat: copy id for api visibility (#1250)

* chore: add copy id buttons

* fix: order

* feat: tooltip

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/layout.tsx

···
 
 import { Header } from "@/components/dashboard/header";
 import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout";
+import { CopyButton } from "@/components/layout/header/copy-button";
 import { JobTypeIconWithTooltip } from "@/components/monitor/job-type-icon-with-tooltip";
 import { NotificationIconWithTooltip } from "@/components/monitor/notification-icon-with-tooltip";
 import { StatusDotWithTooltip } from "@/components/monitor/status-dot-with-tooltip";
···
             />
           </div>
         }
+        actions={<CopyButton key="copy" id={monitor.id} />}
       />
       {children}
     </AppPageWithSidebarLayout>

apps/web/src/app/app/[workspaceSlug]/(dashboard)/notifications/[id]/layout.tsx

···
 
 import { Header } from "@/components/dashboard/header";
 import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout";
+import { CopyButton } from "@/components/layout/header/copy-button";
 import { api } from "@/trpc/server";
 
 export default async function Layout(props: {
···
       <Header
         title={notification.name}
         description={<span className="font-mono">{notification.provider}</span>}
+        actions={<CopyButton key="copy" id={notification.id} />}
       />
       {children}
     </AppPageWithSidebarLayout>

apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-pages/[id]/layout.tsx

···
 import { getBaseUrl } from "@/app/status-page/[domain]/utils";
 import { Header } from "@/components/dashboard/header";
 import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout";
+import { CopyButton } from "@/components/layout/header/copy-button";
 import { api } from "@/trpc/server";
 
 export default async function Layout(props: {
···
       <Header
         title={page.title}
         description={page.description}
-        actions={
-          <Button variant="outline" asChild>
+        actions={[
+          <CopyButton key="copy" id={page.id} />,
+          <Button key="visit" variant="outline" asChild>
             <Link
               target="_blank"
               href={getBaseUrl({
···
             >
               Visit
             </Link>
-          </Button>
-        }
+          </Button>,
+        ]}
       />
       {children}
     </AppPageWithSidebarLayout>

apps/web/src/components/data-table/maintenance/data-table-row-actions.tsx

···
 } from "@openstatus/ui";
 
 import { LoadingAnimation } from "@/components/loading-animation";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 import { toastAction } from "@/lib/toast";
 import { api } from "@/trpc/client";
 
···
   const router = useRouter();
   const [alertOpen, setAlertOpen] = React.useState(false);
   const [isPending, startTransition] = React.useTransition();
+  const { copy } = useCopyToClipboard();
 
   async function onDelete() {
     startTransition(async () => {
···
           <Link href={`./maintenances/${maintenance.id}/edit`}>
             <DropdownMenuItem>Edit</DropdownMenuItem>
           </Link>
+          <DropdownMenuItem
+            onClick={() =>
+              copy(`${maintenance.id}`, {
+                withToast: `Copied ID '${maintenance.id}'`,
+              })
+            }
+          >
+            Copy ID
+          </DropdownMenuItem>
           <AlertDialogTrigger asChild>
             <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background">
               Delete

apps/web/src/components/data-table/monitor/data-table-row-actions.tsx

···
 import { api } from "@/trpc/client";
 
 import type { TCPResponse } from "@/app/api/checker/test/tcp/schema";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 
 interface DataTableRowActionsProps<TData> {
   row: Row<TData>;
···
   const router = useRouter();
   const [alertOpen, setAlertOpen] = useState(false);
   const [isPending, startTransition] = useTransition();
+  const { copy } = useCopyToClipboard();
 
   async function onDelete() {
     startTransition(async () => {
···
             Clone
           </DropdownMenuItem>
           <DropdownMenuItem onClick={onTest}>Test</DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() =>
+              copy(`${monitor.id}`, {
+                withToast: `Copied ID '${monitor.id}'`,
+              })
+            }
+          >
+            Copy ID
+          </DropdownMenuItem>
           <DropdownMenuSeparator />
           <AlertDialogTrigger asChild>
             <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background">

apps/web/src/components/data-table/notification/data-table-row-actions.tsx

···
 } from "@openstatus/ui";
 
 import { LoadingAnimation } from "@/components/loading-animation";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 import { toastAction } from "@/lib/toast";
 import { api } from "@/trpc/client";
 
···
   const router = useRouter();
   const [alertOpen, setAlertOpen] = React.useState(false);
   const [isPending, startTransition] = React.useTransition();
+  const { copy } = useCopyToClipboard();
 
   async function onDelete() {
     startTransition(async () => {
···
           <Link href={`./notifications/${notification.id}/edit`}>
             <DropdownMenuItem>Edit</DropdownMenuItem>
           </Link>
+          <DropdownMenuItem
+            onClick={() =>
+              copy(`${notification.id}`, {
+                withToast: `Copied ID '${notification.id}'`,
+              })
+            }
+          >
+            Copy ID
+          </DropdownMenuItem>
           <DropdownMenuSeparator />
           <AlertDialogTrigger asChild>
             <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background">

apps/web/src/components/data-table/status-page/data-table-row-actions.tsx

···
             >
               <DropdownMenuItem>Visit</DropdownMenuItem>
             </Link>
+            <DropdownMenuItem
+              onClick={() =>
+                copy(`${page.id}`, {
+                  withToast: `Copied ID '${page.id}'`,
+                })
+              }
+            >
+              Copy ID
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
             <Link href={`./status-pages/${page.id}/reports/new`}>
               <DropdownMenuItem>Create Report</DropdownMenuItem>

apps/web/src/components/data-table/status-report/data-table-row-actions.tsx

···
 } from "@openstatus/ui";
 
 import { LoadingAnimation } from "@/components/loading-animation";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 import { toastAction } from "@/lib/toast";
 import { api } from "@/trpc/client";
 
···
   const router = useRouter();
   const [alertOpen, setAlertOpen] = React.useState(false);
   const [isPending, startTransition] = React.useTransition();
+  const { copy } = useCopyToClipboard();
 
   async function onDelete() {
     startTransition(async () => {
···
           <Link href={`./reports/${statusReport.id}/overview`}>
             <DropdownMenuItem>View</DropdownMenuItem>
           </Link>
+          <DropdownMenuItem
+            onClick={() =>
+              copy(`${statusReport.id}`, {
+                withToast: `Copied ID '${statusReport.id}'`,
+              })
+            }
+          >
+            Copy ID
+          </DropdownMenuItem>
           <AlertDialogTrigger asChild>
             <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background">
               Delete

apps/web/src/components/layout/header/copy-button.tsx

···
+"use client";
+
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+import {
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@openstatus/ui";
+import { Copy } from "lucide-react";
+
+export function CopyButton({ id }: { id: string | number }) {
+  const { copy } = useCopyToClipboard();
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            className="font-mono"
+            onClick={() => {
+              copy(`${id}`, {
+                withToast: `Copied ID '${id}'`,
+              });
+            }}
+          >
+            <Copy className="h-4 w-4 mr-2 text-muted-foreground" />
+            {id}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Copy ID for API usage</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

apps/web/src/hooks/use-copy-to-clipboard.ts

···
       {
         timeout = 3000,
         withToast = false,
-      }: { timeout?: number; withToast?: boolean },
+      }: { timeout?: number; withToast?: boolean | string },
     ) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
···
         }
 
         if (withToast) {
-          toast.success("Copied to clipboard");
+          if (typeof withToast === "string") {
+            toast.success(withToast);
+          } else {
+            toast.success("Copied to clipboard");
+          }
         }
 
         return true;