(web) address change requests for console

Author: joewagner

package-lock.json

@@ -1,5 +1,6 @@
 import { randomUUID } from "crypto";
 import { type Database } from "@tableland/sdk";
+import { restrictedDefSlugs } from "@tableland/studio-validators";
 import { and, eq, ne } from "drizzle-orm";
 import { type DrizzleD1Database } from "drizzle-orm/d1";
 import { type Schema } from "../custom-types/index.js";
@@ -20,14 +21,17 @@ export function initDefs(db: DrizzleD1Database<typeof schema>, tbl: Database) {
       name: string,
       defId?: string,
     ) {
+      const slug = slugify(name);
+      if (restrictedDefSlugs.includes(slug)) return false;
+
       const res = await db
         .select()
         .from(projectDefs)
         .innerJoin(defs, eq(projectDefs.defId, defs.id))
         .where(
           and(
             eq(projectDefs.projectId, projectId),
-            eq(defs.name, slugify(name)),
+            eq(defs.name, slug),
             defId ? ne(defs.id, defId) : undefined,
           ),
         )

packages/store/src/api/defs.ts

@@ -1,5 +1,6 @@
 import { randomUUID } from "crypto";
 import { type Database } from "@tableland/sdk";
+import { restrictedEnvSlugs } from "@tableland/studio-validators";
 import { eq, and, ne } from "drizzle-orm";
 import { type DrizzleD1Database } from "drizzle-orm/d1";
 import * as schema from "../schema/index.js";
@@ -22,13 +23,16 @@ export function initEnvironments(
       name: string,
       envId?: string,
     ) {
+      const slug = slugify(name);
+      if (restrictedEnvSlugs.includes(slug)) return false;
+
       const res = await db
         .select()
         .from(environments)
         .where(
           and(
             eq(environments.projectId, projectId),
-            eq(environments.slug, slugify(name)),
+            eq(environments.slug, slug),
             envId ? ne(environments.id, envId) : undefined,
           ),
         )

packages/store/src/api/environments.ts

@@ -1,5 +1,6 @@
 import { randomUUID } from "crypto";
 import { type Database } from "@tableland/sdk";
+import { restrictedProjectSlugs } from "@tableland/studio-validators";
 import { and, desc, eq, inArray, isNotNull, ne } from "drizzle-orm";
 import { type DrizzleD1Database } from "drizzle-orm/d1";
 import * as schema from "../schema/index.js";
@@ -24,14 +25,17 @@ export function initProjects(
       name: string,
       projectId?: string,
     ) {
+      const slug = slugify(name);
+      if (restrictedProjectSlugs.includes(slug)) return false;
+
       const res = await db
         .select()
         .from(projects)
         .innerJoin(teamProjects, eq(projects.id, teamProjects.projectId))
         .where(
           and(
             eq(teamProjects.teamId, teamId),
-            eq(projects.slug, slugify(name)),
+            eq(projects.slug, slug),
             projectId ? ne(projects.id, projectId) : undefined,
           ),
         )

packages/store/src/api/projects.ts

@@ -1,5 +1,6 @@
 import { randomUUID } from "crypto";
 import { type Database } from "@tableland/sdk";
+import { restrictedTeamSlugs } from "@tableland/studio-validators";
 import { and, asc, eq, ne, inArray } from "drizzle-orm";
 import { type DrizzleD1Database } from "drizzle-orm/d1";
 import { sealData } from "iron-session";
@@ -27,6 +28,9 @@ export function initTeams(
 ) {
   return {
     nameAvailable: async function (name: string, teamId?: string) {
+      const slug = slugify(name);
+      if (restrictedTeamSlugs.includes(slug)) return false;
+
       const res = await db
         .select()
         .from(teams)

packages/store/src/api/teams.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/common.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/index.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/validators/src/restricted-slugs.ts

@@ -1,4 +1,3 @@
-import { TRPCError } from "@trpc/server";
 import { Console } from "@/components/console";
 import {
   environmentBySlug,
@@ -15,12 +14,6 @@ export default async function ConsolePage({
   const project = await projectBySlug(params.project, team.id);
   const environment = await environmentBySlug(project.id, params.env);
 
-  if (!environment) {
-    throw new TRPCError({
-      code: "NOT_FOUND",
-    });
-  }
-
   return (
     <main className="flex-1 p-4">
       <Console environmentId={environment.id} />

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

@@ -12,7 +12,7 @@ import {
   useParams,
   useRouter,
   useSelectedLayoutSegment,
-  usePathname,
+  useSelectedLayoutSegments,
 } from "next/navigation";
 import { skipToken } from "@tanstack/react-query";
 import { useState } from "react";
@@ -42,15 +42,14 @@ export function Sidebar() {
   }>();
 
   const router = useRouter();
-  // TODO: not sure how we are supposed to distinguish between an environment
-  //   named "console" and the console for an environment. inspecting the url
-  //   length like this seems wrong.
-  const pathParts = usePathname().split("/");
-
-  // 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";
+
   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);
 
@@ -146,8 +145,6 @@ export function Sidebar() {
             !defSlug && !!envSlug && !isConsole && envSlug === env?.slug
           }
         />
-      </SidebarSection>
-      <SidebarSection>
         <SidebarLink
           icon={Terminal}
           title="Console"

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

@@ -57,7 +57,6 @@
     "keccak": "^3.0.3",
     "lucide-react": "^0.354.0",
     "next": "^14.2.3",
-    "prismjs": "^1.28.0",
     "react": "^18.3.1",
     "react-simple-code-editor": "0.13.1",
     "react-dom": "^18.3.1",