fix: disable save button when workspace name is empty

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx

@@ -11,7 +11,7 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
-import { and, db, eq, isNull, schema } from "@/lib/db";
+import { and, db, eq, isNull, Role, schema } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
 import {
   getLastUsed,
@@ -25,6 +25,9 @@ import ms from "ms";
 import { notFound } from "next/navigation";
 import { Chart } from "./chart";
 import { VerificationTable } from "./verification-table";
+import RolePermissionsTree from "./permission-list";
+import { NestedPermissions } from "@/app/(app)/authorization/roles/[roleId]/tree";
+import PermissionTree from "./permission-list";
 
 export default async function APIKeyDetailPage(props: {
   params: {
@@ -71,6 +74,8 @@ export default async function APIKeyDetailPage(props: {
       },
     },
   });
+
+
   if (!key || key.workspace.tenantId !== tenantId) {
     return notFound();
   }
@@ -155,6 +160,41 @@ export default async function APIKeyDetailPage(props: {
     }
   }
 
+  const roleTee = key.workspace.roles.map((role) => {
+
+    const nested: NestedPermissions = {};
+    for (const permission of key.workspace.permissions) {
+      let n = nested;
+      const parts = permission.name.split(".");
+      for (let i = 0; i < parts.length; i++) {
+        const p = parts[i];
+        if (!(p in n)) {
+          n[p] = {
+            id: permission.id,
+            name: permission.name,
+            description: permission.description,
+            checked: role.permissions.some((p) => p.permissionId === permission.id),
+            part: p,
+            permissions: {},
+            path: parts.slice(0, i).join("."),
+          };
+        }
+        n = n[p].permissions;
+      }
+    }
+    let data = {
+      id: role.id,
+      name: role.name,
+      description: role.description,
+      keyId: key.id,
+      active: key.roles.some((keyRole) => keyRole.roleId === role.id),
+      nestedPermissions: nested
+    }
+    return data
+  })
+
+
+
   return (
     <div className="flex flex-col">
       <div className="flex items-center justify-between w-full">
@@ -308,7 +348,8 @@ export default async function APIKeyDetailPage(props: {
           </div>
         </div>
 
-        <Chart
+        <PermissionTree roles={roleTee} />
+        {/* <Chart
           apiId={props.params.apiId}
           key={JSON.stringify(key)}
           data={key}
@@ -320,7 +361,7 @@ export default async function APIKeyDetailPage(props: {
             ...p,
             active: transientPermissionIds.has(p.id),
           }))}
-        />
+        /> */}
       </div>
     </div>
   );

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx

@@ -0,0 +1,111 @@
+"use client"
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { RecursivePermission } from '@/app/(app)/authorization/roles/[roleId]/tree';
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { CopyButton } from '@/components/dashboard/copy-button';
+import { RoleToggle } from './role-toggle';
+import { ChevronRight } from 'lucide-react';
+
+export type NestedPermission = {
+    id: string;
+    checked: boolean;
+    description: string | null;
+    name: string;
+    part: string;
+    path: string;
+    permissions: NestedPermissions;
+};
+
+export type NestedPermissions = Record<string, NestedPermission>;
+
+export type Role = {
+    id: string;
+    name: string;
+    keyId: string
+    active: boolean
+    description: string | null;
+    nestedPermissions: NestedPermissions;
+};
+
+type PermissionTreeProps = {
+    roles: Role[];
+};
+
+
+export default function PermissionTree({ roles }: PermissionTreeProps) {
+    const [openAll, setOpenAll] = useState(false);
+    const [openRoles, setOpenRoles] = useState<string[]>([]);
+
+    useEffect(() => {
+        setOpenRoles(openAll ? roles.map(role => role.id) : []);
+    }, [openAll, roles]);
+
+    return (
+        <Card>
+            <CardHeader className="flex-row items-start justify-between">
+                <div className="flex flex-col space-y-1.5">
+                    <CardTitle>Permissions</CardTitle>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Label>{openAll ? "Collapse" : "Expand"} All Roles</Label>
+                    <Switch checked={openAll} onCheckedChange={setOpenAll} />
+                </div>
+            </CardHeader>
+
+            <CardContent className="flex flex-col gap-4">
+                {roles.map(role => {
+                    const isOpen = openRoles.includes(role.id);
+                    return (
+                        <Collapsible
+                            key={role.id}
+                            open={isOpen}
+                            onOpenChange={(open) => {
+                                setOpenRoles(prev =>
+                                    open
+                                        ? prev.includes(role.id) ? prev : [...prev, role.id]
+                                        : prev.filter(id => id !== role.id)
+                                );
+                            }}
+                        >
+                            <CollapsibleTrigger className="flex items-center gap-1 transition-all [&[data-state=open]>svg]:rotate-90 ">
+                                <Tooltip delayDuration={50}>
+                                    <TooltipTrigger className="flex items-center gap-2">
+                                        <ChevronRight className="w-4 h-4 transition-transform duration-200" />
+                                        <RoleToggle keyId={role.keyId} roleId={role.id} checked={role.active} />
+                                        <span className="text-sm">{role.name}</span>
+                                    </TooltipTrigger>
+                                    <TooltipContent side="top" align="start" avoidCollisions={true}>
+                                        <div className="flex items-center justify-start max-w-sm gap-2 text-content">
+                                            <span className="text-ellipsis overflow-hidden hover:overflow-visible">{role.name}</span>
+                                            <div>
+                                                <CopyButton value={role.name} />
+                                            </div>
+                                        </div>
+                                    </TooltipContent>
+                                </Tooltip>
+
+                            </CollapsibleTrigger>
+                            <CollapsibleContent className="pt-2 pb-4">
+                                <div className="flex flex-col gap-1 ml-4">
+                                    {Object.entries(role.nestedPermissions).map(([k, p]) => (
+                                        <RecursivePermission
+                                            key={p.id}
+                                            k={k}
+                                            {...p}
+                                            roleId={role.id}
+                                            openAll={openAll}
+                                        />
+                                    ))}
+                                </div>
+                            </CollapsibleContent>
+                        </Collapsible>
+                    );
+                })}
+            </CardContent>
+        </Card>
+    );
+}

apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx

@@ -56,7 +56,7 @@ export const Tree: React.FC<Props> = ({ nestedPermissions, role }) => {
   );
 };
 
-const RecursivePermission: React.FC<
+export const RecursivePermission: React.FC<
   NestedPermission & { k: string; roleId: string; openAll: boolean }
 > = ({ k, openAll, id, name, permissions, roleId, checked, description }) => {
   const [open, setOpen] = useState(openAll);

apps/dashboard/app/(app)/settings/general/update-workspace-name.tsx

@@ -13,9 +13,15 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 export const dynamic = "force-dynamic";
+
+const validCharactersRegex = /^[a-zA-Z0-9-_]+$/;
+
 const formSchema = z.object({
   workspaceId: z.string(),
-  name: z.string(),
+  name: z.string().min(3)
+    .refine((v) => validCharactersRegex.test(v), {
+      message: "worksapce can only contain letters, numbers, dashes and underscores",
+    }),
 });
 
 type Props = {
@@ -53,7 +59,7 @@ export const UpdateWorkspaceName: React.FC<Props> = ({ workspace }) => {
   async function onSubmit(values: z.infer<typeof formSchema>) {
     await updateName.mutateAsync(values);
   }
-
+  const isDisabled = form.formState.isLoading || !form.formState.isValid;
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -84,7 +90,7 @@ export const UpdateWorkspaceName: React.FC<Props> = ({ workspace }) => {
             <Button
               variant={updateName.isLoading ? "disabled" : "primary"}
               type="submit"
-              disabled={updateName.isLoading}
+              disabled={updateName.isLoading || isDisabled}
             >
               {updateName.isLoading ? <Loading /> : "Save"}
             </Button>

apps/dashboard/app/layout.tsx

@@ -15,6 +15,8 @@ import { ThemeProvider } from "./theme-provider";
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
+  display: 'swap',
+  adjustFontFallback: false
 });
 
 const pangea = localFont({

apps/engineering/app/layout.tsx

@@ -6,6 +6,8 @@ import "./global.css";
 
 const inter = Inter({
   subsets: ["latin"],
+  display: 'swap',
+  adjustFontFallback: false
 });
 
 export default function Layout({ children }: { children: ReactNode }) {

apps/planetfall/app/layout.tsx

@@ -2,7 +2,11 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({
+  subsets: ["latin"],
+  display: 'swap',
+  adjustFontFallback: false
+});
 
 export const metadata: Metadata = {
   title: "Create Next App",

apps/workflows/app/layout.tsx

@@ -1,7 +1,11 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({
+  subsets: ["latin"],
+  display: 'swap',
+  adjustFontFallback: false
+});
 
 export const metadata: Metadata = {
   title: "Create Next App",