Added CopyableText component, used for waitpoint id in the table

Author: matt-aitken

apps/webapp/app/components/primitives/CopyableText.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useState } from "react";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { cn } from "~/utils/cn";
+
+export function CopyableText({ value, className }: { value: string; className?: string }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1500);
+    },
+    [value]
+  );
+
+  return (
+    <span
+      className={cn("group relative inline-flex h-6 items-center", className)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <span onMouseEnter={() => setIsHovered(true)}>{value}</span>
+      <span
+        onClick={copy}
+        onMouseDown={(e) => e.stopPropagation()}
+        className={cn(
+          "absolute -right-6 top-0 z-10 size-6 font-sans",
+          isHovered ? "flex" : "hidden"
+        )}
+      >
+        <SimpleTooltip
+          button={
+            <span
+              className={cn(
+                "ml-1 flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                copied
+                  ? "text-green-500"
+                  : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+              )}
+            >
+              {copied ? (
+                <ClipboardCheckIcon className="size-3.5" />
+              ) : (
+                <ClipboardIcon className="size-3.5" />
+              )}
+            </span>
+          }
+          content={copied ? "Copied!" : "Copy text"}
+          className="font-sans"
+          disableHoverableContent
+        />
+      </span>
+    </span>
+  );
+}

apps/webapp/app/presenters/v3/WaitpointTokenListPresenter.server.ts

@@ -4,7 +4,10 @@ import { type Direction } from "~/components/ListPagination";
 import { sqlDatabaseSchema } from "~/db.server";
 import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { BasePresenter } from "./basePresenter.server";
-import { type WaitpointFilterStatus } from "~/components/runs/v3/WaitpointTokenFilters";
+import {
+  type WaitpointFilterStatus,
+  type WaitpointSearchParams,
+} from "~/components/runs/v3/WaitpointTokenFilters";
 import { determineEngineVersion } from "~/v3/engineVersion.server";
 
 const DEFAULT_PAGE_SIZE = 25;
@@ -46,6 +49,7 @@ type Result =
         previous: string | undefined;
       };
       hasFilters: boolean;
+      filters: WaitpointSearchParams;
     }
   | {
       success: false;
@@ -57,6 +61,7 @@ type Result =
         previous: undefined;
       };
       hasFilters: false;
+      filters: undefined;
     };
 
 export class WaitpointTokenListPresenter extends BasePresenter {
@@ -85,6 +90,7 @@ export class WaitpointTokenListPresenter extends BasePresenter {
           previous: undefined,
         },
         hasFilters: false,
+        filters: undefined,
       };
     }
 
@@ -260,6 +266,17 @@ export class WaitpointTokenListPresenter extends BasePresenter {
         previous,
       },
       hasFilters,
+      filters: {
+        id,
+        statuses: statuses?.length ? statuses : undefined,
+        tags: tags?.length ? tags : undefined,
+        idempotencyKey,
+        period,
+        from,
+        to,
+        cursor,
+        direction,
+      },
     };
   }
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens/route.tsx

@@ -40,6 +40,7 @@ import { WaitpointTokenListPresenter } from "~/presenters/v3/WaitpointTokenListP
 import { requireUserId } from "~/services/session.server";
 import { docsPath, EnvironmentParamSchema, v3WaitpointTokenPath } from "~/utils/pathBuilder";
 import { determineEngineVersion } from "~/v3/engineVersion.server";
+import { CopyableText } from "~/components/primitives/CopyableText";
 
 export const meta: MetaFunction = () => {
   return [
@@ -102,7 +103,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 };
 
 export default function Page() {
-  const { success, tokens, pagination, hasFilters } = useTypedLoaderData<typeof loader>();
+  const { success, tokens, pagination, hasFilters, filters } = useTypedLoaderData<typeof loader>();
 
   const organization = useOrganization();
   const project = useProject();
@@ -160,7 +161,8 @@ export default function Page() {
                             organization,
                             project,
                             environment,
-                            token
+                            token,
+                            filters
                           );
 
                           return (
@@ -170,7 +172,9 @@ export default function Page() {
                                   <DateTime date={token.createdAt} />
                                 </span>
                               </TableCell>
-                              <TableCell to={path}>{token.friendlyId}</TableCell>
+                              <TableCell to={path}>
+                                <CopyableText value={token.friendlyId} className="font-mono" />
+                              </TableCell>
                               <TableCell to={path}>
                                 <WaitpointStatusCombo
                                   status={token.status}