From 6abc80aa7a62fee88330ba34401239406ef8c5af Mon Sep 17 00:00:00 2001
From: Milo Schwartz <mschwartz10612@gmail.com>
Date: Sun, 24 Nov 2024 23:07:09 -0500
Subject: [PATCH] add border to tables and fix acesss page title spacing

---
 .../components/AccessPageHeaderAndNav.tsx     | 17 ++++------
 .../roles/components/RolesDataTable.tsx       |  6 ++--
 .../users/components/UsersDataTable.tsx       |  2 +-
 .../[resourceId]/authentication/page.tsx      |  4 +--
 .../[resourceId]/connectivity/page.tsx        |  2 +-
 .../components/CreateResourceForm.tsx         | 32 ++++++++++---------
 .../components/ResourcesDataTable.tsx         |  6 ++--
 .../sites/components/SitesDataTable.tsx       |  2 +-
 src/app/[orgId]/settings/sites/page.tsx       |  2 +-
 9 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx b/src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx
index dfae7275..c6ff586c 100644
--- a/src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx
+++ b/src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { SidebarSettings } from "@app/components/SidebarSettings";
 
 type AccessPageHeaderAndNavProps = {
@@ -22,16 +23,12 @@ export default function AccessPageHeaderAndNav({
 
     return (
         <>
-            {" "}
-            <div className="space-y-0.5 select-none mb-6">
-                <h2 className="text-2xl font-bold tracking-tight">
-                    Users & Roles
-                </h2>
-                <p className="text-muted-foreground">
-                    Invite users and add them to roles to manage access to your
-                    organization
-                </p>
-            </div>
+            <SettingsSectionTitle
+                title="Users & Roles"
+                description="Invite users and add them to roles to manage access to your
+            organization"
+            />
+
             <SidebarSettings sidebarNavItems={sidebarNavItems}>
                 {children}
             </SidebarSettings>
diff --git a/src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx b/src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx
index 26abf881..6f004c4b 100644
--- a/src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx
+++ b/src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx
@@ -84,7 +84,7 @@ export function RolesDataTable<TData, TValue>({
                     <Plus className="mr-2 h-4 w-4" /> Add Role
                 </Button>
             </div>
-            <div>
+            <div className="border rounded-md">
                 <Table>
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
@@ -97,7 +97,7 @@ export function RolesDataTable<TData, TValue>({
                                                 : flexRender(
                                                       header.column.columnDef
                                                           .header,
-                                                      header.getContext()
+                                                      header.getContext(),
                                                   )}
                                         </TableHead>
                                     );
@@ -118,7 +118,7 @@ export function RolesDataTable<TData, TValue>({
                                         <TableCell key={cell.id}>
                                             {flexRender(
                                                 cell.column.columnDef.cell,
-                                                cell.getContext()
+                                                cell.getContext(),
                                             )}
                                         </TableCell>
                                     ))}
diff --git a/src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx b/src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx
index f9e1e265..b70ee7c4 100644
--- a/src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx
+++ b/src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx
@@ -85,7 +85,7 @@ export function UsersDataTable<TData, TValue>({
                     <Plus className="mr-2 h-4 w-4" /> Invite User
                 </Button>
             </div>
-            <div>
+            <div className="border rounded-md">
                 <Table>
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
index e1eaa509..c7e60ce6 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
@@ -305,7 +305,7 @@ export default function ResourceAuthenticationPage() {
                 />
             )}
 
-            <div className="space-y-12">
+            <div className="space-y-12 lg:max-w-2xl">
                 <section className="space-y-8">
                     <SettingsSectionTitle
                         title="Users & Roles"
@@ -460,7 +460,7 @@ export default function ResourceAuthenticationPage() {
 
                 <Separator />
 
-                <section className="space-y-8 lg:max-w-2xl">
+                <section className="space-y-8">
                     <SettingsSectionTitle
                         title="Authentication Methods"
                         description="Allow anyone to access the resource via the below methods"
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
index 2917cffe..1d8aa2eb 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
@@ -368,7 +368,7 @@ export default function ReverseProxyTargets(props: {
                     </div>
                 </section>
 
-                <hr />
+                <hr className="lg:max-w-2xl"/>
 
                 <section className="space-y-8">
                     <SettingsSectionTitle
diff --git a/src/app/[orgId]/settings/resources/components/CreateResourceForm.tsx b/src/app/[orgId]/settings/resources/components/CreateResourceForm.tsx
index bb3b1c6e..18a54497 100644
--- a/src/app/[orgId]/settings/resources/components/CreateResourceForm.tsx
+++ b/src/app/[orgId]/settings/resources/components/CreateResourceForm.tsx
@@ -59,11 +59,6 @@ const accountFormSchema = z.object({
 
 type AccountFormValues = z.infer<typeof accountFormSchema>;
 
-const defaultValues: Partial<AccountFormValues> = {
-    subdomain: "",
-    name: "My Resource",
-};
-
 type CreateResourceFormProps = {
     open: boolean;
     setOpen: (open: boolean) => void;
@@ -88,7 +83,10 @@ export default function CreateResourceForm({
 
     const form = useForm<AccountFormValues>({
         resolver: zodResolver(accountFormSchema),
-        defaultValues,
+        defaultValues: {
+            subdomain: "",
+            name: "My Resource",
+        },
     });
 
     useEffect(() => {
@@ -98,9 +96,13 @@ export default function CreateResourceForm({
 
         const fetchSites = async () => {
             const res = await api.get<AxiosResponse<ListSitesResponse>>(
-                `/org/${orgId}/sites/`
+                `/org/${orgId}/sites/`,
             );
             setSites(res.data.data.sites);
+
+            if (res.data.data.sites.length > 0) {
+                form.setValue("siteId", res.data.data.sites[0].siteId);
+            }
         };
 
         fetchSites();
@@ -116,7 +118,7 @@ export default function CreateResourceForm({
                     name: data.name,
                     subdomain: data.subdomain,
                     // subdomain: data.subdomain,
-                }
+                },
             )
             .catch((e) => {
                 toast({
@@ -124,7 +126,7 @@ export default function CreateResourceForm({
                     title: "Error creating resource",
                     description: formatAxiosError(
                         e,
-                        "An error occurred when creating the resource"
+                        "An error occurred when creating the resource",
                     ),
                 });
             });
@@ -196,7 +198,7 @@ export default function CreateResourceForm({
                                                     onChange={(value) =>
                                                         form.setValue(
                                                             "subdomain",
-                                                            value
+                                                            value,
                                                         )
                                                     }
                                                 />
@@ -225,14 +227,14 @@ export default function CreateResourceForm({
                                                             className={cn(
                                                                 "w-[350px] justify-between",
                                                                 !field.value &&
-                                                                    "text-muted-foreground"
+                                                                    "text-muted-foreground",
                                                             )}
                                                         >
                                                             {field.value
                                                                 ? sites.find(
                                                                       (site) =>
                                                                           site.siteId ===
-                                                                          field.value
+                                                                          field.value,
                                                                   )?.name
                                                                 : "Select site"}
                                                             <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -259,7 +261,7 @@ export default function CreateResourceForm({
                                                                             onSelect={() => {
                                                                                 form.setValue(
                                                                                     "siteId",
-                                                                                    site.siteId
+                                                                                    site.siteId,
                                                                                 );
                                                                             }}
                                                                         >
@@ -269,14 +271,14 @@ export default function CreateResourceForm({
                                                                                     site.siteId ===
                                                                                         field.value
                                                                                         ? "opacity-100"
-                                                                                        : "opacity-0"
+                                                                                        : "opacity-0",
                                                                                 )}
                                                                             />
                                                                             {
                                                                                 site.name
                                                                             }
                                                                         </CommandItem>
-                                                                    )
+                                                                    ),
                                                                 )}
                                                             </CommandGroup>
                                                         </CommandList>
diff --git a/src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx b/src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx
index 2d065b24..56413dfa 100644
--- a/src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx
+++ b/src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx
@@ -85,7 +85,7 @@ export function ResourcesDataTable<TData, TValue>({
                     <Plus className="mr-2 h-4 w-4" /> Add Resource
                 </Button>
             </div>
-            <div>
+            <div className="border rounded-md">
                 <Table>
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
@@ -98,7 +98,7 @@ export function ResourcesDataTable<TData, TValue>({
                                                 : flexRender(
                                                       header.column.columnDef
                                                           .header,
-                                                      header.getContext()
+                                                      header.getContext(),
                                                   )}
                                         </TableHead>
                                     );
@@ -119,7 +119,7 @@ export function ResourcesDataTable<TData, TValue>({
                                         <TableCell key={cell.id}>
                                             {flexRender(
                                                 cell.column.columnDef.cell,
-                                                cell.getContext()
+                                                cell.getContext(),
                                             )}
                                         </TableCell>
                                     ))}
diff --git a/src/app/[orgId]/settings/sites/components/SitesDataTable.tsx b/src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
index cb4fc120..0a441fd2 100644
--- a/src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
+++ b/src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
@@ -85,7 +85,7 @@ export function SitesDataTable<TData, TValue>({
                     <Plus className="mr-2 h-4 w-4" /> Add Site
                 </Button>
             </div>
-            <div>
+            <div className="border rounded-md">
                 <Table>
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
diff --git a/src/app/[orgId]/settings/sites/page.tsx b/src/app/[orgId]/settings/sites/page.tsx
index 6d5455c7..63c1d7b5 100644
--- a/src/app/[orgId]/settings/sites/page.tsx
+++ b/src/app/[orgId]/settings/sites/page.tsx
@@ -48,7 +48,7 @@ export default async function SitesPage(props: SitesPageProps) {
         <>
             <SettingsSectionTitle
                 title="Manage Sites"
-                description="Manage your existing sites here or create a new one."
+                description="Allow connectivity to your network through secure tunnels"
             />
 
             <SitesTable sites={siteRows} orgId={params.orgId} />