Editable table data #295

asutula · 2024-07-03T15:52:39Z

Title says it all. This also leverages and displays new data related to table owner and ACL.

vercel · 2024-07-03T15:52:42Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 18, 2024 5:52pm

asutula · 2024-07-15T16:15:31Z

packages/web/components/console.tsx


  const table = useReactTable({
-    data,
+    data: tab.results,
    columns: tab.columns,


The react table lib needs the data as some sort of reactive state (prop, state, memo, etc). If you give it another object derived from some reactive state, like we were, you get that freeze up. I'm not sure what's it's doing internally that results in this behavior, but I was able to verify it using a simplified version of the console code I wrote and then made sure that fix worked here.

This wasn't a problem previously because previous to my branch here, the data was passed as a prop to the DataTable component which internally passed that data prop to useReactTable. We now must call useReactTable outside DataTable and pass the resulting table into DataTable as a prop.

asutula · 2024-07-15T16:23:17Z

packages/api/src/routers/users.ts

+    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;
+      }),


Added this new users router with this function that, given a list of addresses, returns a map of Studio accounts (keyed by address). If an address in the input doesn't correspond to a Studio user, there will be no entry in the map for it. You'll see the store package implementaiton as well.

asutula · 2024-07-15T16:26:11Z

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

+    registryRecord = await cache(getRegistryRecord)(
+      deployment.chainId,
+      deployment.tableId,
+    );


I added a card to show the table owner to the table page. This required a new validator query that reads information about the registry. This data is also used deeper into the view hierarchy for ACL related stuff.

asutula · 2024-07-15T16:27:08Z

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

+export function LatestTables({
+  initialData,
+}: {
+  initialData: RegistryRecord[];


Just updated the Table type name to RegistryRecord to better represent what it is and avoid using our already-overloaded word "table".

asutula · 2024-07-15T16:27:53Z

packages/web/app/page.tsx

+  const session = await cache(getSession)({
+    headers: headers(),
+    cookies: cookies(),
+  });


Unrelated update, just noticed we should be caching this call so the results are reused during a single server side rendering pass.

asutula · 2024-07-15T16:28:54Z

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

@@ -80,6 +84,7 @@ export default async function TablePage({
          schema={schema}
          tableName={params.name}
          tableId={tableId}
+          owner={registryRecord.controller}


Just querying and passing the new prop for the table owner here in the page for a Tableland table out of the context of a project.

asutula · 2024-07-15T22:05:05Z

packages/web/lib/validator-queries.ts

+export async function getTablePermissionsForAddress(
+  chainId: number,
+  tableId: string,
+  address: string,
+) {
+  const baseUrl = baseUrlForChain(chainId);
+  const validator = new Validator({ baseUrl });
+  const [res] = await validator.queryByStatement<{
+    chain_id: number;
+    controller: string;
+    created_at: number;
+    privileges: number;
+    table_id: number;
+    updated_at: number | null;
+  }>({
+    statement: `select * from system_acl
+      where chain_id = ${chainId}
+        and table_id = ${tableId}
+        and controller = '${address}'
+        limit 1`,
+  });
+  const permission: TablePermission = {
+    insert: (res.privileges & 1) > 0,
+    update: (res.privileges & 2) > 0,
+    delete: (res.privileges & 4) > 0,
+  };
+  return permission;
+}


New function to get the ACL for a single address and table. I don't think we actually use this in the end, but left it anyway.

asutula · 2024-07-15T22:05:23Z

packages/web/lib/wagmi-ethers.ts

Moved these here for shared use.

asutula · 2024-07-15T22:05:48Z

packages/web/package.json

@@ -51,6 +51,7 @@
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
+    "deep-object-diff": "^1.1.9",


This is the package I use for JSON object diffing.

asutula · 2024-07-15T22:06:39Z

packages/web/tsconfig.json

-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "types.d.ts",


Needed to add this line to pick up our type extensions for tanstack table (file below).

asutula · 2024-07-15T22:07:13Z

packages/web/types.d.ts

+declare module "@tanstack/table-core" {
+  interface TableMeta<TData extends RowData> {
+    getRowClassName: (row: Row<TData>) => string;
+    pkName?: string;
+    accountPermissions?: ACLItem;
+    pendingTxn?: boolean;
+    editRow: (row: Row<TData>) => void;
+    updateRowColumn: (
+      row: Row<TData>,
+      columnName: string,
+      value: string | number,
+    ) => void;
+    addRow: () => void;
+    deleteRow: (row: Row<TData>) => void;
+    revertRow: (row: Row<TData>) => void;
+    revertAll: () => void;
+  }
+  interface ColumnMeta {
+    columnName: string;
+    type: "number" | "string";
+  }
+}


This is how tanstack table allows you to add custom metadata types to your table and column metadata when you use typescript.

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

asutula temporarily deployed to staging July 3, 2024 15:52 — with GitHub Actions Inactive

asutula temporarily deployed to staging July 4, 2024 16:44 — with GitHub Actions Inactive

vercel bot deployed to Preview July 4, 2024 16:46 View deployment

asutula had a problem deploying to staging July 9, 2024 15:36 — with GitHub Actions Failure

vercel bot deployed to Preview July 9, 2024 15:38 View deployment

asutula force-pushed the asutula/editable-table-data branch from 59fd016 to db68e44 Compare July 9, 2024 15:51

asutula had a problem deploying to staging July 9, 2024 15:51 — with GitHub Actions Failure

asutula temporarily deployed to staging July 9, 2024 15:51 — with GitHub Actions Inactive

vercel bot deployed to Preview July 9, 2024 15:55 View deployment

asutula temporarily deployed to staging July 10, 2024 16:26 — with GitHub Actions Inactive

vercel bot deployed to Preview July 10, 2024 16:28 View deployment

asutula temporarily deployed to staging July 10, 2024 17:18 — with GitHub Actions Inactive

vercel bot deployed to Preview July 10, 2024 17:20 View deployment

asutula temporarily deployed to staging July 10, 2024 22:48 — with GitHub Actions Inactive

vercel bot deployed to Preview July 10, 2024 22:49 View deployment

asutula temporarily deployed to staging July 11, 2024 17:54 — with GitHub Actions Inactive

vercel bot deployed to Preview July 11, 2024 17:55 View deployment

asutula force-pushed the asutula/editable-table-data branch from 150c596 to 76c628d Compare July 11, 2024 17:57

asutula temporarily deployed to staging July 11, 2024 17:57 — with GitHub Actions Inactive

vercel bot deployed to Preview July 11, 2024 17:59 View deployment

asutula temporarily deployed to staging July 11, 2024 21:35 — with GitHub Actions Inactive

vercel bot deployed to Preview July 11, 2024 21:37 View deployment

asutula temporarily deployed to staging July 14, 2024 23:49 — with GitHub Actions Inactive

vercel bot deployed to Preview July 14, 2024 23:50 View deployment

asutula commented Jul 15, 2024

View reviewed changes

asutula temporarily deployed to staging July 15, 2024 20:09 — with GitHub Actions Inactive

vercel bot deployed to Preview July 15, 2024 20:11 View deployment

asutula commented Jul 15, 2024

View reviewed changes

asutula requested a review from joewagner July 15, 2024 22:07

asutula added 5 commits July 18, 2024 11:00

construct and execute sql statements working

4f76ffd

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

display table owner card

4cd70e1

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

user logo for owner card

3c7163c

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

wip on table permissions

7f14a79

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

updates to console table data display

795551f

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

vercel bot deployed to Preview July 18, 2024 17:01 View deployment

asutula added 12 commits July 18, 2024 11:02

account and permissions display, acl usage

014e7da

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

handle generating queries where there is no primary key

c49cae3

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

disable ui when txn is pending, properly reset data on router refresh

dce279b

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

acl display

2054a8b

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

return map for studio users

c8f8c29

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

fix console freezing

da26c59

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

use proper signer for table updates

3f68cdb

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

remove console log

3c26a27

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

pr feedback changes

584a0ed

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

use unique constraint in addition to pk for where clause calculation

71a2c75

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

warning ui for no unique constraint

4a9c9c1

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

handle blob columns

7ee03a7

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

asutula force-pushed the asutula/editable-table-data branch from 13bb75d to 7ee03a7 Compare July 18, 2024 17:04

asutula temporarily deployed to staging July 18, 2024 17:05 — with GitHub Actions Inactive

styling fix in hashdisplay

e639b67

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

asutula temporarily deployed to staging July 18, 2024 17:06 — with GitHub Actions Inactive

asutula requested a review from joewagner July 18, 2024 17:07

vercel bot deployed to Preview July 18, 2024 17:08 View deployment

css fix for hash display

1b69050

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>

asutula temporarily deployed to staging July 18, 2024 17:50 — with GitHub Actions Inactive

vercel bot deployed to Preview July 18, 2024 17:52 View deployment

joewagner approved these changes Jul 18, 2024

View reviewed changes

asutula merged commit 5d501ab into main Jul 18, 2024
4 checks passed

asutula deleted the asutula/editable-table-data branch July 18, 2024 18:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editable table data #295

Editable table data #295

asutula commented Jul 3, 2024 •

edited

Loading

vercel bot commented Jul 3, 2024 •

edited

Loading

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

asutula Jul 15, 2024

Editable table data #295

Editable table data #295

Conversation

asutula commented Jul 3, 2024 • edited Loading

vercel bot commented Jul 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asutula commented Jul 3, 2024 •

edited

Loading

vercel bot commented Jul 3, 2024 •

edited

Loading