(web) add a console component that allows running sql in the context of an env #293

joewagner · 2024-06-28T14:31:59Z

No description provided.

vercel · 2024-06-28T14:32:02Z

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 3, 2024 8:00pm

joewagner · 2024-06-28T14:44:48Z

packages/web/app/[team]/[project]/_components/sidebar.tsx

+
+  // splitting on "/" means there is always an empty string as the first
+  // element in the Array since pathname always starts with /
+  const isConsole = pathParts.length === 5 && pathParts.pop() === "console";


@asutula curious if you have any thoughts what to do here?

The url /joe/foo/default/console could be a table page or the console page (or really any url with 4 parts). We could refactor our url scheme to allow for unique page urls regardless of name, or add console as a reserved word. Using a reserved word feels wrong to me. If we do that it would mean that anyone with an already existing def called console would have a broken project.

I do have a suggestion that is a bit cleaner:

You can rely on the values returned by useParams above to distinguish between the console part of the route and any table name. If the user is visiting the console page, defSlug will be undefined. So this give us most of the information we need to make sure we're not viewing a table (def), but we still need to distinguish between the overview page and console page which both match the case !!envSlug && !defSlug. We can use the hook useSelectedLayoutSegments to get a nice array of url segments below the layout without needing to split the pathname string on / etc (as you complain about below). So the final calculation of isConsole would be:

const isConsole = !!envSlug && !defSlug && selectedLayoutSegments.slice(-1)[0] === "console";

We should, for now at least, just go with the restricted slug approach. There is no table def named console yet (I checked using your console!), so we can implement that restriction with no problem currently.

We can use the hook useSelectedLayoutSegments to get a nice array of url segments below the layout without needing to split the pathname string on / etc (as you complain about below). So the final calculation of isConsole would be:

const isConsole = !!envSlug && !defSlug && selectedLayoutSegments.slice(-1)[0] === "console";

The useSelectedSegments hook works well, I'll switch to that.

We should, for now at least, just go with the restricted slug approach. There is no table def named console yet (I checked using your console!), so we can implement that restriction with no problem currently.

I'll set it up so that "console" is a reserved word within the context of defs. A similar problem exists if you create an environment called "settings". should I work on fixing that here, or leave it for another PR?

packages/web/app/[team]/[project]/_components/sidebar.tsx

joewagner · 2024-07-01T20:43:33Z

packages/web/components/code-editor.tsx

+        hightlightWithLineNumbers(
+          code,
+          (languages as any).sql,
+          props.hideLineNumbers,


I left the line numbers feature mostly in place, but hard coded it to hide the line numbers. If we want to show line numbers we will need to include the css the old console was using, or convert it to tailwind and add the classes.

asutula · 2024-07-02T20:21:23Z

Just saw this @joewagner. Sorry for the delay. Will answer your questions this afternoon asap.

joewagner · 2024-07-02T20:40:53Z

Just saw this @joewagner. Sorry for the delay. Will answer your questions this afternoon asap.

No worries, I think I forgot to request a review

asutula

This is awesome! So cool to see and use this. Requests some changes, then we can get this merged.

asutula · 2024-07-02T21:12:15Z

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

+  if (!environment) {
+    throw new TRPCError({
+      code: "NOT_FOUND",
+    });
+  }


You don't need this because the environmentBySlug helper does this internally.

Oh perfect!

asutula · 2024-07-02T21:41:48Z

packages/web/package.json

@@ -57,7 +57,9 @@
    "keccak": "^3.0.3",
    "lucide-react": "^0.354.0",
    "next": "^14.2.3",
+    "prismjs": "^1.28.0",


I don't see this used anywhere since it appears we just copied some source code from it into our own repo. Should we uninstall this?

Good catch. I tried to use npm and avoid including the prismjs source, but when that didn't work I forgot to remove the dep here.

asutula · 2024-07-02T21:42:39Z

packages/web/app/prism.js

Just curious why we copied this code (and the CSS) vs importing from the npm package?

Prismjs seems to be optimized to be downloaded and used in this way. The npm package only include a few types of highlighting/formatting. Since we want sql highlighting I had to download the specific theme and formatting.

asutula · 2024-07-02T22:12:17Z

packages/web/app/[team]/[project]/_components/sidebar.tsx

+
+  // splitting on "/" means there is always an empty string as the first
+  // element in the Array since pathname always starts with /
+  const isConsole = pathParts.length === 5 && pathParts.pop() === "console";


I do have a suggestion that is a bit cleaner:

You can rely on the values returned by useParams above to distinguish between the console part of the route and any table name. If the user is visiting the console page, defSlug will be undefined. So this give us most of the information we need to make sure we're not viewing a table (def), but we still need to distinguish between the overview page and console page which both match the case !!envSlug && !defSlug. We can use the hook useSelectedLayoutSegments to get a nice array of url segments below the layout without needing to split the pathname string on / etc (as you complain about below). So the final calculation of isConsole would be:

const isConsole = !!envSlug && !defSlug && selectedLayoutSegments.slice(-1)[0] === "console";

asutula · 2024-07-02T22:13:52Z

packages/web/app/[team]/[project]/_components/sidebar.tsx

+
+  // splitting on "/" means there is always an empty string as the first
+  // element in the Array since pathname always starts with /
+  const isConsole = pathParts.length === 5 && pathParts.pop() === "console";


We should, for now at least, just go with the restricted slug approach. There is no table def named console yet (I checked using your console!), so we can implement that restriction with no problem currently.

packages/web/app/[team]/[project]/_components/sidebar.tsx

asutula · 2024-07-02T22:26:29Z

packages/web/app/[team]/[project]/_components/sidebar.tsx

+        <SidebarLink
+          icon={Terminal}
+          title="Console"
+          href={`/${teamQuery.data.slug}/${projectQuery.data.slug}/${linkEnv.slug}/console`}
+          selected={isConsole}
        />


This SidebarLink should go in the SidebarSection above along with the link for Overview. You can then delete this section.

joewagner · 2024-07-03T20:03:40Z

@asutula I believe I got all the change requests in here. Have another look when you get time.

joewagner added 4 commits June 21, 2024 10:44

(web) start of porting old console to studio

a19d981

(web) console can run queries

fd3e585

(web) fixes and move console to sidebar

507242b

(web) reorder console in sidebar and cleanup

88dab41

joewagner had a problem deploying to staging June 28, 2024 14:32 — with GitHub Actions Failure

joewagner force-pushed the joe/web-console branch from 76e9ba7 to cbb37d5 Compare June 28, 2024 14:46

joewagner had a problem deploying to staging June 28, 2024 14:46 — with GitHub Actions Failure

vercel bot had a problem deploying to Preview June 28, 2024 14:47 Failure

(web) lint and build

4eab6a0

joewagner force-pushed the joe/web-console branch from cbb37d5 to 4eab6a0 Compare June 28, 2024 15:21

joewagner temporarily deployed to staging June 28, 2024 15:21 — with GitHub Actions Inactive

vercel bot deployed to Preview June 28, 2024 15:23 View deployment

joewagner temporarily deployed to staging July 1, 2024 20:10 — with GitHub Actions Inactive

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

(web) console styling and cleanup

9ec7d4f

joewagner force-pushed the joe/web-console branch from 6c443f6 to 9ec7d4f Compare July 1, 2024 21:11

joewagner temporarily deployed to staging July 1, 2024 21:11 — with GitHub Actions Inactive

joewagner commented Jul 1, 2024

View reviewed changes

joewagner marked this pull request as ready for review July 1, 2024 21:12

vercel bot deployed to Preview July 1, 2024 21:13 View deployment

joewagner requested a review from asutula July 2, 2024 20:40

asutula requested changes Jul 2, 2024

View reviewed changes

asutula reviewed Jul 2, 2024

View reviewed changes

joewagner had a problem deploying to staging July 3, 2024 17:38 — with GitHub Actions Failure

vercel bot had a problem deploying to Preview July 3, 2024 17:38 Failure

joewagner force-pushed the joe/web-console branch from fd34d60 to b91dd44 Compare July 3, 2024 17:48

joewagner had a problem deploying to staging July 3, 2024 17:48 — with GitHub Actions Failure

vercel bot had a problem deploying to Preview July 3, 2024 17:49 Failure

joewagner force-pushed the joe/web-console branch from b91dd44 to 2c82cfb Compare July 3, 2024 17:56

joewagner had a problem deploying to staging July 3, 2024 17:56 — with GitHub Actions Failure

vercel bot had a problem deploying to Preview July 3, 2024 17:57 Failure

joewagner force-pushed the joe/web-console branch from 2c82cfb to ca6e068 Compare July 3, 2024 19:43

joewagner temporarily deployed to staging July 3, 2024 19:43 — with GitHub Actions Inactive

vercel bot deployed to Preview July 3, 2024 19:45 View deployment

(web) address change requests for console

4fbd34b

joewagner force-pushed the joe/web-console branch from ca6e068 to 4fbd34b Compare July 3, 2024 19:58

joewagner temporarily deployed to staging July 3, 2024 19:58 — with GitHub Actions Inactive

vercel bot deployed to Preview July 3, 2024 20:00 View deployment

joewagner requested a review from asutula July 3, 2024 20:03

asutula approved these changes Jul 8, 2024

View reviewed changes

joewagner merged commit 685c686 into main Jul 8, 2024
4 checks passed

joewagner deleted the joe/web-console branch July 8, 2024 16:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(web) add a console component that allows running sql in the context of an env #293

(web) add a console component that allows running sql in the context of an env #293

joewagner commented Jun 28, 2024

vercel bot commented Jun 28, 2024 •

edited

Loading

joewagner Jun 28, 2024

asutula Jul 2, 2024

asutula Jul 2, 2024

joewagner Jul 3, 2024

joewagner Jul 1, 2024

asutula commented Jul 2, 2024

joewagner commented Jul 2, 2024

asutula left a comment

asutula Jul 2, 2024

joewagner Jul 2, 2024

asutula Jul 2, 2024

joewagner Jul 2, 2024

asutula Jul 2, 2024

joewagner Jul 2, 2024

asutula Jul 2, 2024

asutula Jul 2, 2024

asutula Jul 2, 2024

joewagner commented Jul 3, 2024

(web) add a console component that allows running sql in the context of an env #293

(web) add a console component that allows running sql in the context of an env #293

Conversation

joewagner commented Jun 28, 2024

vercel bot commented Jun 28, 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

asutula commented Jul 2, 2024

joewagner commented Jul 2, 2024

asutula left a 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

joewagner commented Jul 3, 2024

vercel bot commented Jun 28, 2024 •

edited

Loading