Copyable admin area table fields and autofocus search (#2280)

Author: samejr

apps/webapp/app/routes/admin._index.tsx

@@ -5,6 +5,7 @@ import { redirect } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { Header1 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { PaginationControls } from "~/components/primitives/Pagination";
@@ -69,13 +70,14 @@ export default function AdminDashboardRoute() {
         <Form className="flex items-center gap-2">
           <Input
             placeholder="Search users or orgs"
-            variant="small"
+            variant="medium"
             icon={MagnifyingGlassIcon}
             fullWidth={true}
             name="search"
             defaultValue={filters.search}
+            autoFocus
           />
-          <Button type="submit" variant="tertiary/small">
+          <Button type="submit" variant="secondary/medium">
             Search
           </Button>
         </Form>
@@ -101,7 +103,9 @@ export default function AdminDashboardRoute() {
               users.map((user) => {
                 return (
                   <TableRow key={user.id}>
-                    <TableCell>{user.email}</TableCell>
+                    <TableCell>
+                      <CopyableText value={user.email} />
+                    </TableCell>
                     <TableCell>
                       {user.orgMemberships.map((org) => (
                         <LinkButton
@@ -124,8 +128,12 @@ export default function AdminDashboardRoute() {
                         {user.displayName}
                       </a>
                     </TableCell>
-                    <TableCell>{user.id}</TableCell>
-                    <TableCell>{user.createdAt.toISOString()}</TableCell>
+                    <TableCell>
+                      <CopyableText value={user.id} />
+                    </TableCell>
+                    <TableCell>
+                      <CopyableText value={user.createdAt.toISOString()} />
+                    </TableCell>
                     <TableCell>{user.admin ? "✅" : ""}</TableCell>
                     <TableCell isSticky={true}>
                       <Form method="post" reloadDocument>

apps/webapp/app/routes/admin.orgs.tsx

@@ -4,6 +4,7 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { Input } from "~/components/primitives/Input";
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -54,13 +55,14 @@ export default function AdminDashboardRoute() {
         <Form className="flex items-center gap-2">
           <Input
             placeholder="Search users or orgs"
-            variant="small"
+            variant="medium"
             icon={MagnifyingGlassIcon}
             fullWidth={true}
             name="search"
             defaultValue={filters.search}
+            autoFocus
           />
-          <Button type="submit" variant="tertiary/small">
+          <Button type="submit" variant="secondary/medium">
             Search
           </Button>
         </Form>
@@ -87,20 +89,26 @@ export default function AdminDashboardRoute() {
               organizations.map((org) => {
                 return (
                   <TableRow key={org.id}>
-                    <TableCell>{org.title}</TableCell>
-                    <TableCell>{org.slug}</TableCell>
+                    <TableCell>
+                      <CopyableText value={org.title} />
+                    </TableCell>
+                    <TableCell>
+                      <CopyableText value={org.slug} />
+                    </TableCell>
                     <TableCell>
                       {org.members.map((member) => (
                         <LinkButton
                           key={member.user.email}
                           variant="minimal/small"
                           to={`/admin?search=${encodeURIComponent(member.user.email)}`}
                         >
-                          {member.user.email}
+                          <CopyableText value={member.user.email} />
                         </LinkButton>
                       ))}
                     </TableCell>
-                    <TableCell>{org.id}</TableCell>
+                    <TableCell>
+                      <CopyableText value={org.id} />
+                    </TableCell>
                     <TableCell>{org.v2Enabled ? "✅" : ""}</TableCell>
                     <TableCell>{org.v3Enabled ? "✅" : ""}</TableCell>
                     <TableCell>{org.deletedAt ? "☠️" : ""}</TableCell>