add border to tables and fix acesss page title spacing

This commit is contained in:
Milo Schwartz
2024-11-24 23:07:09 -05:00
parent 93fb5e2766
commit 6abc80aa7a
9 changed files with 36 additions and 37 deletions

View File

@@ -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>

View File

@@ -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>
))}

View File

@@ -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) => (

View File

@@ -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"

View File

@@ -368,7 +368,7 @@ export default function ReverseProxyTargets(props: {
</div>
</section>
<hr />
<hr className="lg:max-w-2xl"/>
<section className="space-y-8">
<SettingsSectionTitle

View File

@@ -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>

View File

@@ -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>
))}

View File

@@ -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) => (

View File

@@ -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} />