Editable table data

packages/api/src/root.ts

@@ -11,6 +11,7 @@ import { providersRouter } from "./routers/providers";
 import { defsRouter } from "./routers/defs";
 import { teamsRouter } from "./routers/teams";
 import { tablesRouter } from "./routers/tables";
+import { usersRouter } from "./routers/users";
 
 export function appRouter(
   store: Store,
@@ -43,6 +44,7 @@ export function appRouter(
       infura: infuraKey,
       quickNode: quickNodeKey,
     }),
+    users: usersRouter(store),
   });
 }
 

packages/api/src/routers/users.ts

@@ -0,0 +1,21 @@
+import { type Store } from "@tableland/studio-store";
+import { z } from "zod";
+import { createTRPCRouter, publicProcedure } from "../trpc";
+
+export function usersRouter(store: Store) {
+  return createTRPCRouter({
+    usersForAddresses: publicProcedure
+      .input(z.object({ addresses: z.array(z.string().trim()).min(1) }))
+      .query(async ({ input }) => {
+        const users = await store.users.usersForAddresses(input.addresses);
+        const res = users.reduce<Map<string, (typeof users)[number]>>(
+          (acc, item) => {
+            acc.set(item.user.address, item);
+            return acc;
+          },
+          new Map<string, (typeof users)[number]>(),
+        );
+        return res;
+      }),
+  });
+}

packages/store/src/api/users.ts

@@ -1,8 +1,9 @@
-import { eq } from "drizzle-orm";
+import { eq, inArray } from "drizzle-orm";
 import { type DrizzleD1Database } from "drizzle-orm/d1";
 import * as schema from "../schema/index.js";
 
 const users = schema.users;
+const teams = schema.teams;
 
 export function initUsers(db: DrizzleD1Database<typeof schema>) {
   return {
@@ -16,5 +17,18 @@ export function initUsers(db: DrizzleD1Database<typeof schema>) {
 
       return user?.teamId;
     },
+
+    usersForAddresses: async function (addresses: string[]) {
+      const res = await db
+        .select({
+          user: users,
+          team: teams,
+        })
+        .from(users)
+        .innerJoin(teams, eq(users.teamId, teams.id))
+        .where(inArray(users.address, addresses))
+        .all();
+      return res;
+    },
   };
 }

packages/web/app/[team]/[project]/[env]/[table]/page.tsx

@@ -14,6 +14,10 @@ import {
 } from "@/lib/api-helpers";
 import DefDetails from "@/components/def-details";
 import TableWrapper from "@/components/table-wrapper";
+import {
+  getRegistryRecord,
+  type RegistryRecord,
+} from "@/lib/validator-queries";
 
 export default async function Deployments({
   params,
@@ -37,6 +41,14 @@ export default async function Deployments({
     }
   }
 
+  let registryRecord: RegistryRecord | undefined;
+  if (deployment) {
+    registryRecord = await cache(getRegistryRecord)(
+      deployment.chainId,
+      deployment.tableId,
+    );
+  }
+
   const isAuthorized = await cache(api.teams.isAuthorized)({ teamId: team.id });
 
   return (
@@ -59,6 +71,7 @@ export default async function Deployments({
             tableName={deployment.tableName}
             chainId={deployment.chainId}
             tableId={deployment.tableId}
+            owner={registryRecord?.controller}
             createdAt={new Date(deployment.createdAt)}
             schema={def.schema}
             environment={env}

packages/web/app/_components/latest-tables.tsx

@@ -9,10 +9,15 @@ import ChainSelector from "@/components/chain-selector";
 import { TimeSince } from "@/components/time";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
-import { type Table, getLatestTables } from "@/lib/validator-queries";
+import { type RegistryRecord, getLatestTables } from "@/lib/validator-queries";
 
-export function LatestTables({ initialData }: { initialData: Table[] }) {
-  const [latestTables, setLatestTables] = useState<Table[]>(initialData);
+export function LatestTables({
+  initialData,
+}: {
+  initialData: RegistryRecord[];
+}) {
+  const [latestTables, setLatestTables] =
+    useState<RegistryRecord[]>(initialData);
   const [selectedChain, setSelectedChain] = useState<
     number | "mainnets" | "testnets"
   >("testnets");

packages/web/app/page.tsx

@@ -24,7 +24,10 @@ import { getLatestTables, getPopularTables } from "@/lib/validator-queries";
 import { api } from "@/trpc/server";
 
 export default async function Page() {
-  const session = await getSession({ headers: headers(), cookies: cookies() });
+  const session = await cache(getSession)({
+    headers: headers(),
+    cookies: cookies(),
+  });
 
   let teams: RouterOutputs["teams"]["userTeams"] = [];
   if (session.auth) {

packages/web/app/table/[name]/page.tsx

@@ -2,9 +2,11 @@ import { type Table as TblTable, Validator, helpers } from "@tableland/sdk";
 import { getSession } from "@tableland/studio-api";
 import { cookies, headers } from "next/headers";
 import { unescapeSchema } from "@tableland/studio-store";
+import { cache } from "react";
 import Table from "@/components/table";
 import TableWrapper from "@/components/table-wrapper";
 import { ensureError } from "@/lib/ensure-error";
+import { getRegistryRecord } from "@/lib/validator-queries";
 
 export default async function TablePage({
   params,
@@ -51,6 +53,8 @@ export default async function TablePage({
     );
   }
 
+  const registryRecord = await cache(getRegistryRecord)(chainId, tableId);
+
   const schema = unescapeSchema(tablelandTable.schema);
 
   const createdAttr = tablelandTable.attributes?.find(
@@ -80,6 +84,7 @@ export default async function TablePage({
           schema={schema}
           tableName={params.name}
           tableId={tableId}
+          owner={registryRecord.controller}
         />
       </TableWrapper>
     </main>

packages/web/components/acl.tsx

@@ -0,0 +1,130 @@
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+  type Cell,
+} from "@tanstack/react-table";
+import { type RouterOutputs } from "@tableland/studio-api";
+import { useEffect, useState } from "react";
+import { Check } from "lucide-react";
+import Link from "next/link";
+import { DataTable } from "./data-table";
+import HashDisplay from "./hash-display";
+import { type ACLItem } from "@/lib/validator-queries";
+
+type UserValue =
+  RouterOutputs["users"]["usersForAddresses"] extends Map<any, infer I>
+    ? I
+    : never;
+
+type TableRowData = ACLItem &
+  Partial<UserValue> & {
+    isOwner: boolean;
+  };
+
+interface Props {
+  acl: ACLItem[];
+  authorizedStudioUsers: RouterOutputs["users"]["usersForAddresses"];
+  owner: string;
+}
+
+export default function ACL({ acl, authorizedStudioUsers, owner }: Props) {
+  const data: TableRowData[] = acl.map((item) => {
+    const studioUser = authorizedStudioUsers.get(item.controller);
+    const isOwner = item.controller === owner;
+    return {
+      ...item,
+      ...studioUser,
+      isOwner,
+    };
+  });
+
+  const columns: Array<ColumnDef<TableRowData>> = [
+    {
+      accessorKey: "controller",
+      header: "Address",
+      cell: AddressCell,
+    },
+    {
+      accessorFn: (row) => row.team?.name ?? "",
+      header: "Studio User",
+      cell: UserCell,
+    },
+    {
+      accessorKey: "isOwner",
+      header: "Table Owner",
+      cell: BoolCell,
+    },
+    {
+      accessorKey: "privileges.insert",
+      header: "Insert",
+      cell: BoolCell,
+    },
+    {
+      accessorKey: "privileges.update",
+      header: "Update",
+      cell: BoolCell,
+    },
+    {
+      accessorKey: "privileges.delete",
+      header: "Delete",
+      cell: BoolCell,
+    },
+  ];
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  return <DataTable table={table} />;
+}
+
+function AddressCell({
+  getValue,
+}: ReturnType<Cell<TableRowData, unknown>["getContext"]>) {
+  const initialValue = getValue<string>();
+
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return (
+    <HashDisplay hash={value} copy className="justify-start text-foreground" />
+  );
+}
+
+function BoolCell({
+  getValue,
+}: ReturnType<Cell<TableRowData, unknown>["getContext"]>) {
+  const initialValue = getValue<boolean>();
+
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return value ? <Check /> : null;
+}
+
+function UserCell({
+  getValue,
+  row,
+}: ReturnType<Cell<TableRowData, unknown>["getContext"]>) {
+  const initialValue = getValue<string>();
+
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return row.original.team ? (
+    <Link href={`/${row.original.team.slug}`}>{value}</Link>
+  ) : (
+    <span>{value}</span>
+  );
+}

packages/web/components/console.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Database, helpers } from "@tableland/sdk";
 import { studioAliases, getBaseUrl } from "@tableland/studio-client";
 import { init } from "@tableland/sqlparser";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { CodeEditor } from "./code-editor";
 import { DataTable } from "./data-table";
 import { cn, objectToTableData } from "@/lib/utils";
@@ -82,7 +83,7 @@ export function Console({ environmentId }: { environmentId: string }) {
           tab.error = null;
           tab.messages = [];
           tab.columns = columns;
-          tab.results = data.results;
+          tab.results = objectToTableData(data.results);
 
           // if there is a transactionHash it means that this is the response from a mutation
           // the template rendering logic will key off the existence of messages
@@ -218,11 +219,7 @@ export function Console({ environmentId }: { environmentId: string }) {
                 loading={loading}
               />
 
-              <ResultSetPane
-                tab={tab}
-                results={tab.results}
-                loading={loading}
-              />
+              <ResultSetPane tab={tab} loading={loading} />
             </div>
           );
         })}
@@ -362,7 +359,12 @@ function TabLabel(props: {
 
 function ResultSetPane(props: any): React.JSX.Element {
   const { tab } = props;
-  const formattedData = objectToTableData(tab.results);
+
+  const table = useReactTable({
+    data: tab.results,
+    columns: tab.columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
 
   return (
     <div className="table-results">
@@ -379,9 +381,7 @@ function ResultSetPane(props: any): React.JSX.Element {
           })}
         </div>
       )}
-      {!tab.error && !tab.messages?.length && (
-        <DataTable columns={tab.columns} data={formattedData} />
-      )}
+      {!tab.error && !tab.messages?.length && <DataTable table={table} />}
     </div>
   );
 }