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

packages/validators/src/common.ts

@@ -30,4 +30,12 @@ export const defNameSchema = z
     { message: "Definition name is invalid." },
   );
 
-export const envNameSchema = z.object({ name: z.string().trim().min(1) });
+export const envNameSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1)
+    .refine((val) => !restrictedDefSlugs.includes(slugify(val)), {
+      message: "You can't use a restricted word as an environment name.",
+    }),
+});

packages/validators/src/index.ts

@@ -4,3 +4,4 @@ export * from "./validators/teams.js";
 export * from "./validators/projects.js";
 export * from "./validators/auth.js";
 export * from "./validators/tables.js";
+export * from "./restricted-slugs.js";

packages/validators/src/restricted-slugs.ts

@@ -10,10 +10,13 @@ export const restrictedTeamSlugs = [
 
 export const restrictedProjectSlugs = ["people", "settings"];
 
-export const restrictedDefSlugs = ["settings", "tables"];
+export const restrictedDefSlugs = ["settings", "tables", "console"];
+
+export const restrictedEnvSlugs = ["settings"];
 
 export const allRestrictedSlugs = [
   ...restrictedTeamSlugs,
   ...restrictedProjectSlugs,
   ...restrictedDefSlugs,
+  ...restrictedEnvSlugs,
 ];

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

@@ -0,0 +1,22 @@
+import { Console } from "@/components/console";
+import {
+  environmentBySlug,
+  projectBySlug,
+  teamBySlug,
+} from "@/lib/api-helpers";
+
+export default async function ConsolePage({
+  params,
+}: {
+  params: { team: string; project: string; env: string };
+}) {
+  const team = await teamBySlug(params.team);
+  const project = await projectBySlug(params.project, team.id);
+  const environment = await environmentBySlug(project.id, params.env);
+
+  return (
+    <main className="flex-1 p-4">
+      <Console environmentId={environment.id} />
+    </main>
+  );
+}

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

@@ -1,11 +1,18 @@
 "use client";
 
 import { type schema } from "@tableland/studio-store";
-import { Ellipsis, LayoutDashboard, Settings, Table2 } from "lucide-react";
+import {
+  Ellipsis,
+  LayoutDashboard,
+  Settings,
+  Table2,
+  Terminal,
+} from "lucide-react";
 import {
   useParams,
   useRouter,
   useSelectedLayoutSegment,
+  useSelectedLayoutSegments,
 } from "next/navigation";
 import { skipToken } from "@tanstack/react-query";
 import { useState } from "react";
@@ -33,8 +40,16 @@ export function Sidebar() {
     env?: string;
     table?: string;
   }>();
+
   const router = useRouter();
+
   const selectedLayoutSegment = useSelectedLayoutSegment();
+  const selectedLayoutSegments = useSelectedLayoutSegments();
+  const isConsole =
+    !!envSlug &&
+    !defSlug &&
+    selectedLayoutSegments.slice(-1).pop() === "console";
+
   const [newDefOpen, setNewDefOpen] = useState(false);
   const [importTableOpen, setImportTableOpen] = useState(false);
 
@@ -126,14 +141,23 @@ export function Sidebar() {
           icon={LayoutDashboard}
           title="Overview"
           href={`/${teamQuery.data.slug}/${projectQuery.data.slug}/${linkEnv.slug}`}
-          selected={!defSlug && !!envSlug && envSlug === env?.slug}
+          selected={
+            !defSlug && !!envSlug && !isConsole && envSlug === env?.slug
+          }
+        />
+        <SidebarLink
+          icon={Terminal}
+          title="Console"
+          href={`/${teamQuery.data.slug}/${projectQuery.data.slug}/${linkEnv.slug}/console`}
+          selected={isConsole}
         />
       </SidebarSection>
       <SidebarSection>
         <div className="flex items-center gap-2">
           <h3 className="text-base font-medium tracking-wide text-muted-foreground">
             Definitions
           </h3>
+
           {!!isAuthorizedQuery.data && (
             <DropdownMenu>
               <DropdownMenuTrigger className="ml-auto text-muted-foreground hover:text-foreground">

packages/web/components/code-editor.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Editor from "react-simple-code-editor";
+import { highlight, languages } from "@/app/prism.js";
+import "@/app/prism.css";
+
+const hightlightWithLineNumbers = (
+  input: any,
+  language: any,
+  hideLineNumbers: boolean,
+): any =>
+  highlight(input, language)
+    .split("\n")
+    .map(
+      (line: string, i: number) =>
+        `${
+          hideLineNumbers
+            ? ""
+            : `<span class="absolute left-0 text-right w-4 font-thin">${i + 1}</span>`
+        }${line}`,
+    )
+    .join("\n");
+
+export function CodeEditor(props: any): React.JSX.Element {
+  return (
+    <Editor
+      preClassName="language-sql"
+      value={props.code}
+      onValueChange={props.onChange}
+      highlight={(code) =>
+        hightlightWithLineNumbers(
+          code,
+          (languages as any).sql,
+          props.hideLineNumbers,
+        )
+      }
+      padding={10}
+      placeholder="SELECT * FROM YourTable;"
+      textareaId={props.hideLineNumbers ? "codeViewer" : "codeEditor"}
+      textareaClassName="ml-8"
+      className="editor language-sql"
+      disabled={props.loading}
+      style={{
+        fontFamily: '"Fira code", "Fira Mono", monospace',
+        fontSize: 18,
+        outline: 0,
+      }}
+    />
+  );
+}