feat: db change and new workspace slug

apps/api/src/pkg/testutil/harness.ts

@@ -254,6 +254,7 @@ export abstract class Harness {
     const unkeyWorkspace: Workspace = {
       id: newId("test"),
       name: "unkey",
+      slug: "unkey-workspace",
       orgId: newId("test"),
       plan: "enterprise",
       tier: "Enterprise",
@@ -272,6 +273,7 @@ export abstract class Harness {
     const userWorkspace: Workspace = {
       id: newId("test"),
       name: "user",
+      slug: "user-workspace",
       orgId: newId("test"),
       plan: "pro",
       tier: "Pro Max",

apps/dashboard/app/new/hooks/use-workspace-step.tsx

@@ -16,19 +16,19 @@ const workspaceSchema = z.object({
     .trim()
     .min(3, "Workspace name is required")
     .max(50, "Workspace name must be 50 characters or less"),
-  // workspaceUrl: z
-  //   .string()
-  //   .min(3, "Workspace URL is required")
-  //   .regex(
-  //     /^[a-zA-Z0-9-_]+$/,
-  //     "URL handle can only contain letters, numbers, hyphens, and underscores"
-  //   ),
+  workspaceUrl: z
+    .string()
+    .min(3, "Workspace URL is required")
+    .regex(
+      /^[a-zA-Z0-9-_]+$/,
+      "URL handle can only contain letters, numbers, hyphens, and underscores",
+    ),
 });
 
 type WorkspaceFormData = z.infer<typeof workspaceSchema>;
 
 export const useWorkspaceStep = (): OnboardingStep => {
-  // const [isSlugGenerated, setIsSlugGenerated] = useState(false);
+  const [isSlugGenerated, setIsSlugGenerated] = useState(false);
   const [workspaceCreated, setWorkspaceCreated] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
   const router = useRouter();
@@ -101,7 +101,10 @@ export const useWorkspaceStep = (): OnboardingStep => {
       // Workspace already created, just proceed
       return;
     }
-    createWorkspace.mutateAsync({ name: data.workspaceName });
+    createWorkspace.mutateAsync({
+      name: data.workspaceName,
+      slug: data.workspaceUrl,
+    });
   };
 
   const validFieldCount = Object.keys(form.getValues()).filter((field) => {
@@ -151,35 +154,32 @@ export const useWorkspaceStep = (): OnboardingStep => {
               {...form.register("workspaceName")}
               placeholder="Enter workspace name"
               label="Workspace name"
-              // onBlur={(evt) => {
-              //   if (!isSlugGenerated) {
-              //     form.setValue(
-              //       "workspaceUrl",
-              //       slugify(evt.currentTarget.value)
-              //     );
-              //     form.trigger("workspaceUrl");
-              //     setIsSlugGenerated(true);
-              //   }
-              // }}
+              onBlur={(evt) => {
+                if (!isSlugGenerated) {
+                  form.setValue("workspaceUrl", slugify(evt.currentTarget.value));
+                  form.trigger("workspaceUrl");
+                  setIsSlugGenerated(true);
+                }
+              }}
               required
               error={form.formState.errors.workspaceName?.message}
               disabled={isLoading || workspaceCreated}
             />
-            {/* <FormInput */}
-            {/*   {...form.register("workspaceUrl")} */}
-            {/*   placeholder="enter-a-handle" */}
-            {/*   label="Workspace URL handle" */}
-            {/*   required */}
-            {/*   error={form.formState.errors.workspaceUrl?.message} */}
-            {/*   prefix="app.unkey.com/" */}
-            {/* /> */}
+            <FormInput
+              {...form.register("workspaceUrl")}
+              placeholder="enter-a-handle"
+              label="Workspace URL handle"
+              required
+              error={form.formState.errors.workspaceUrl?.message}
+              prefix="app.unkey.com/"
+            />
           </div>
         </div>
       </form>
     ),
     kind: "required" as const,
     validFieldCount,
-    requiredFieldCount: 1,
+    requiredFieldCount: 2,
     buttonText: workspaceCreated ? "Continue" : "Create workspace",
     description: workspaceCreated
       ? "Workspace created successfully, continue to next step"
@@ -200,12 +200,12 @@ export const useWorkspaceStep = (): OnboardingStep => {
   };
 };
 
-// const slugify = (text: string): string => {
-//   return text
-//     .toLowerCase()
-//     .trim()
-//     .replace(/[^\w\s-]/g, "") // Remove special chars except spaces and hyphens
-//     .replace(/\s+/g, "-") // Replace spaces with hyphens
-//     .replace(/-+/g, "-") // Replace multiple hyphens with single
-//     .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
-// };
+const slugify = (text: string): string => {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "") // Remove special chars except spaces and hyphens
+    .replace(/\s+/g, "-") // Replace spaces with hyphens
+    .replace(/-+/g, "-") // Replace multiple hyphens with single
+    .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
+};

apps/dashboard/lib/trpc/routers/workspace/create.ts

@@ -12,7 +12,12 @@ export const createWorkspace = t.procedure
   .use(requireUser)
   .input(
     z.object({
-      name: z.string().min(1).max(50),
+      name: z.string().min(3).max(50),
+      slug: z
+        .string()
+        .min(3)
+        .max(64)
+        .regex(/^[a-zA-Z0-9-_]+$/),
     }),
   )
   .mutation(async ({ ctx, input }) => {
@@ -50,6 +55,7 @@ export const createWorkspace = t.procedure
       id: newId("workspace"),
       orgId: orgId,
       name: input.name,
+      slug: input.slug,
       plan: "free",
       tier: "Free",
       stripeCustomerId: null,

internal/db/drizzle/0001_legal_kat_farrell.sql

@@ -0,0 +1,3 @@
+ALTER TABLE `permissions` DROP INDEX `unique_name_per_workspace_idx`;--> statement-breakpoint
+ALTER TABLE `workspaces` ADD CONSTRAINT `workspaces_slug_unique` UNIQUE(`slug`);--> statement-breakpoint
+ALTER TABLE `workspaces` ADD `slug` varchar(256);