feat: add rewrites and upserts for gateway.new

apps/dashboard/app/(app)/apis/create-api-button.tsx

@@ -19,18 +19,28 @@ import { Button } from "@unkey/ui";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 import type React from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 const formSchema = z.object({
   name: z.string().trim().min(3, "Name must be at least 3 characters long").max(50),
 });
 
-export const CreateApiButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+type Props = {
+  defaultOpen?: boolean;
+};
+
+export const CreateApiButton = ({
+  defaultOpen,
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & Props) => {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
 
+  const [open, setOpen] = useState(defaultOpen ?? false);
+
   const create = trpc.api.create.useMutation({
     async onSuccess(res) {
       toast.success("Your API has been created");
@@ -49,7 +59,7 @@ export const CreateApiButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButt
 
   return (
     <>
-      <Dialog>
+      <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
         <DialogTrigger asChild>
           <Button variant="primary" {...rest}>
             <Plus />

apps/dashboard/app/(app)/apis/page.tsx

@@ -12,7 +12,11 @@ import { ApiList } from "./client";
 export const dynamic = "force-dynamic";
 export const runtime = "edge";
 
-export default async function ApisOverviewPage() {
+type Props = {
+  searchParams: { new?: boolean };
+};
+
+export default async function ApisOverviewPage(props: Props) {
   const tenantId = getTenantId();
   const workspace = await db.query.workspaces.findFirst({
     where: (table, { and, eq, isNull }) =>
@@ -48,7 +52,10 @@ export default async function ApisOverviewPage() {
           <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
         </Navbar.Breadcrumbs>
         <Navbar.Actions>
-          <CreateApiButton key="createApi" />
+          <CreateApiButton
+            key="createApi"
+            defaultOpen={apis.length === 0 || props.searchParams.new}
+          />
         </Navbar.Actions>
       </Navbar>
       <PageContent>

apps/dashboard/app/(app)/gateway-new/page.tsx

@@ -0,0 +1,35 @@
+/**
+ * This route creates a shortcut for onboarding
+ *
+ * We need this for compliance of our gateway.new domain.
+ * 1. A user will enter "gateway.new" in the browser
+ * 2. Vercel will detect the host and rewrite the request to this page
+ * 3. A workspace is upserted
+ * 4. The user is redirected to create their API
+ */
+
+import { getTenantId } from "@/lib/auth";
+import { db, schema } from "@/lib/db";
+import { newId } from "@unkey/id";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+  const tenantId = getTenantId();
+
+  const ws = await db.query.workspaces.findFirst({
+    where: (table, { eq, isNull, and }) =>
+      and(eq(table.tenantId, tenantId), isNull(table.deletedAt)),
+  });
+
+  if (!ws) {
+    await db.insert(schema.workspaces).values({
+      id: newId("workspace"),
+      name: "Personal Workspace",
+      tenantId,
+      betaFeatures: {},
+      features: {},
+    });
+  }
+
+  return redirect("/apis?new=true");
+}

apps/dashboard/middleware.ts

@@ -73,6 +73,7 @@ export const config = {
     "/success",
     "/success/(.*)",
     "/auth/(.*)",
+    "/gateway-new",
     "/(api|trpc)(.*)",
     "/((?!.+\\.[\\w]+$|_next).*)",
     "/((?!_next/static|_next/image|images|favicon.ico|$).*)",

apps/dashboard/next.config.js

@@ -1,5 +1,4 @@
 /** @type {import('next').NextConfig} */
-
 const securityHeaders = [
   {
     key: "X-Frame-Options",
@@ -51,6 +50,17 @@ const nextConfig = {
       source: "/engineering/:match*",
       destination: "https://unkey-engineering.mintlify.dev/engineering/:match*",
     },
+    // Powers our gateway.new compliant domain
+    {
+      source: "/:path",
+      has: [
+        {
+          type: "host",
+          value: "gateway.new",
+        },
+      ],
+      destination: "/gateway-new",
+    },
   ],
 };