Console refresh #301

asutula · 2024-07-19T22:37:00Z

In the process of hunting down our data table bug, I started writing a stripped down version of the console that used typescript very thoroughly, and had a more simple view hierarchy. This made it easier to hunt down that bug. Turned out it was a good starting place for an updated console that is more consistent with our visual style. Adds support for multiple mutating statements.

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

vercel · 2024-07-19T22:37:03Z

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 30, 2024 4:14pm

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

asutula · 2024-07-30T04:09:16Z

packages/web/app/[team]/(team)/layout.tsx

@@ -7,7 +7,7 @@ export default async function LayoutTeam({
 }) {
  return (
    <div className="flex flex-1">
-      <div className="sticky top-[3.5rem] h-[calc(100vh-3.55rem)] w-52 flex-shrink-0 overflow-y-auto overflow-x-hidden bg-card">
+      <div className="sticky top-[3.507rem] h-[calc(100vh-3.507rem)] w-52 flex-shrink-0 overflow-y-auto overflow-x-hidden bg-card">


Unreleated. Just finding the right magic number for our header height so things that sit below it are positioned properly.

asutula · 2024-07-30T04:09:47Z

packages/api/src/routers/users.ts

+    userForAddress: publicProcedure
+      .input(z.object({ address: z.string().trim().min(1) }))
+      .query(async ({ input }) => {
+        const res = await store.users.userForAddress(input.address);
+        return res;
+      }),


Just a new API, and you'll see the store support for it as well.

asutula · 2024-07-30T04:10:46Z

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

+const ConsoleTabs = dynamic(
+  async () => await import("@/components/console-tabs"),
+  {
+    ssr: false,
+  },
+);


The console tabs data are stored in local storage, so we can't have them rendered on the server at all, or we'll get a hydration mismatch error. This NextJS helper is a nice way of doing that.

asutula · 2024-07-30T04:11:55Z

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


  return (
-    <main className="flex-1 p-4">
-      <Console environmentId={environment.id} />
+    <main className="flex min-h-[calc(100vh-3.507rem)] p-4">


For a console interface, I want to to always take up at least all the available screen height. Required using this magic number to account for the height of our sticky header.

asutula · 2024-07-30T04:12:39Z

packages/web/app/prism.css

Switched to an easier to use/cleaner code editing component that doesn't require this external css and js.

asutula · 2024-07-30T16:36:37Z

packages/web/components/table-details.tsx

Updated to use the new WalletStatus component to display the connect wallet status.

asutula · 2024-07-30T16:37:41Z

packages/web/components/wallet-status.tsx

New component that displays the currently connect wallet address as well as other information related to it. We can use this anywhere we support on chain interactions (editing table data, deploying tables, console, etc).

asutula · 2024-07-30T16:38:14Z

packages/web/lib/parse-table-name.tsx

Just a helper to do the thing we always need to do. We should put this in a shared package at some point.

asutula · 2024-07-30T16:38:58Z

packages/web/lib/use-account-permissions.ts

A custom hook that returns the table permissions for whatever the connected account is.

asutula · 2024-07-30T16:39:40Z

packages/web/lib/use-account.ts

A custom hook that wraps the wagmi useAccount to make it easier to use and deal with the hydration mismatch error caused by the wagmi version.

joewagner

Nicely done! Lot's of great improvements here

* (nonce) ensure incrby does not remove ttl (#303) * Console refresh (#301) * wip on new console Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * better layout for console and data table Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * more query validation, multiple statement support Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * remove old files Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * remove old code editor and deps Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * layout fix Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * working tabs Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * support esc key to cancel edit tab name Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * persisted tab data Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * shared wallet status component and supporting changes Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * little css cleanup Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * store tab data per project Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * combining conditional logic Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> --------- Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> Co-authored-by: Aaron Sutula <asutula@users.noreply.github.com> * native mode as project setting, scope tab results to env Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * support native mode in studio aliases Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * cli fix Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * add native_mode columns to cli tests Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> --------- Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> Co-authored-by: Joe Wagner <joewagner@users.noreply.github.com> Co-authored-by: Aaron Sutula <asutula@users.noreply.github.com>

* Native mode (#308) * (nonce) ensure incrby does not remove ttl (#303) * Console refresh (#301) * wip on new console Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * better layout for console and data table Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * more query validation, multiple statement support Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * remove old files Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * remove old code editor and deps Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * layout fix Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * working tabs Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * support esc key to cancel edit tab name Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * persisted tab data Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * shared wallet status component and supporting changes Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * little css cleanup Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * store tab data per project Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * combining conditional logic Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> --------- Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> Co-authored-by: Aaron Sutula <asutula@users.noreply.github.com> * native mode as project setting, scope tab results to env Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * support native mode in studio aliases Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * cli fix Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * add native_mode columns to cli tests Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> --------- Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> Co-authored-by: Joe Wagner <joewagner@users.noreply.github.com> Co-authored-by: Aaron Sutula <asutula@users.noreply.github.com> * try out trpc utils invalidate Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> * fix missing nativeMode form value Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> --------- Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com> Co-authored-by: Aaron Sutula <528969+asutula@users.noreply.github.com> Co-authored-by: Aaron Sutula <asutula@users.noreply.github.com>

asutula added 5 commits July 18, 2024 21:34

wip on new console

f49512d

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

better layout for console and data table

528da35

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

more query validation, multiple statement support

9328d6c

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

remove old files

9083d2d

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

remove old code editor and deps

b5d2639

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

asutula temporarily deployed to staging July 19, 2024 22:37 — with GitHub Actions Inactive

layout fix

a8abc5b

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

asutula temporarily deployed to staging July 19, 2024 23:09 — with GitHub Actions Inactive

vercel bot deployed to Preview July 19, 2024 23:11 View deployment

working tabs

8ff7baa

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

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

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

support esc key to cancel edit tab name

9124eac

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

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

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

persisted tab data

356371b

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

asutula temporarily deployed to staging July 24, 2024 14:46 — with GitHub Actions Inactive

vercel bot deployed to Preview July 24, 2024 14:48 View deployment

shared wallet status component and supporting changes

53a1d0d

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

asutula temporarily deployed to staging July 28, 2024 04:59 — with GitHub Actions Inactive

vercel bot deployed to Preview July 28, 2024 05:02 View deployment

little css cleanup

f5653e0

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

asutula temporarily deployed to staging July 28, 2024 05:07 — with GitHub Actions Inactive

vercel bot deployed to Preview July 28, 2024 05:09 View deployment

store tab data per project

3a39b17

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

asutula temporarily deployed to staging July 30, 2024 04:20 — with GitHub Actions Inactive

vercel bot deployed to Preview July 30, 2024 04:22 View deployment

combining conditional logic

e32905e

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

asutula temporarily deployed to staging July 30, 2024 16:12 — with GitHub Actions Inactive

vercel bot deployed to Preview July 30, 2024 16:14 View deployment

asutula commented Jul 30, 2024

View reviewed changes

asutula marked this pull request as ready for review July 30, 2024 16:39

asutula requested a review from joewagner July 30, 2024 16:40

joewagner approved these changes Jul 30, 2024

View reviewed changes

asutula merged commit 81018c1 into main Jul 30, 2024
4 checks passed

asutula deleted the asutula/console-v2 branch July 30, 2024 17:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Console refresh #301

Console refresh #301

asutula commented Jul 19, 2024

vercel bot commented Jul 19, 2024 •

edited

Loading

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

asutula Jul 30, 2024

joewagner left a comment

Console refresh #301

Console refresh #301

Conversation

asutula commented Jul 19, 2024

vercel bot commented Jul 19, 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

joewagner left a comment

Choose a reason for hiding this comment

vercel bot commented Jul 19, 2024 •

edited

Loading