pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-05 18:26:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

add border to tables and fix acesss page title spacing

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx
View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { SidebarSettings } from "@app/components/SidebarSettings"; import { SidebarSettings } from "@app/components/SidebarSettings";
type AccessPageHeaderAndNavProps = { type AccessPageHeaderAndNavProps = {
@@ -22,16 +23,12 @@ export default function AccessPageHeaderAndNav({
return ( return (
<> <>
{" "} <SettingsSectionTitle
<div className="space-y-0.5 select-none mb-6"> title="Users & Roles"
<h2 className="text-2xl font-bold tracking-tight"> description="Invite users and add them to roles to manage access to your
Users & Roles organization"
</h2> />
<p className="text-muted-foreground">
Invite users and add them to roles to manage access to your
organization
</p>
</div>
<SidebarSettings sidebarNavItems={sidebarNavItems}> <SidebarSettings sidebarNavItems={sidebarNavItems}>
{children} {children}
</SidebarSettings> </SidebarSettings>

6
src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx
View File

@@ -84,7 +84,7 @@ export function RolesDataTable<TData, TValue>({
<Plus className="mr-2 h-4 w-4" /> Add Role <Plus className="mr-2 h-4 w-4" /> Add Role
</Button> </Button>
</div> </div>
<div> <div className="border rounded-md">
<Table> <Table>
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
@@ -97,7 +97,7 @@ export function RolesDataTable<TData, TValue>({
: flexRender( : flexRender(
header.column.columnDef header.column.columnDef
.header, .header,
header.getContext() header.getContext(),
)} )}
</TableHead> </TableHead>
); );
@@ -118,7 +118,7 @@ export function RolesDataTable<TData, TValue>({
<TableCell key={cell.id}> <TableCell key={cell.id}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext(),
)} )}
</TableCell> </TableCell>
))} ))}

2
src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx
View File

@@ -85,7 +85,7 @@ export function UsersDataTable<TData, TValue>({
<Plus className="mr-2 h-4 w-4" /> Invite User <Plus className="mr-2 h-4 w-4" /> Invite User
</Button> </Button>
</div> </div>
<div> <div className="border rounded-md">
<Table> <Table>
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

4
src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
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"> <section className="space-y-8">
<SettingsSectionTitle <SettingsSectionTitle
title="Users & Roles" title="Users & Roles"
@@ -460,7 +460,7 @@ export default function ResourceAuthenticationPage() {
<Separator /> <Separator />
<section className="space-y-8 lg:max-w-2xl"> <section className="space-y-8">
<SettingsSectionTitle <SettingsSectionTitle
title="Authentication Methods" title="Authentication Methods"
description="Allow anyone to access the resource via the below methods" description="Allow anyone to access the resource via the below methods"

2
src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
View File

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

32
src/app/[orgId]/settings/resources/components/CreateResourceForm.tsx
View File

@@ -59,11 +59,6 @@ const accountFormSchema = z.object({
type AccountFormValues = z.infer<typeof accountFormSchema>; type AccountFormValues = z.infer<typeof accountFormSchema>;
const defaultValues: Partial<AccountFormValues> = {
subdomain: "",
name: "My Resource",
};
type CreateResourceFormProps = { type CreateResourceFormProps = {
open: boolean; open: boolean;
setOpen: (open: boolean) => void; setOpen: (open: boolean) => void;
@@ -88,7 +83,10 @@ export default function CreateResourceForm({
const form = useForm<AccountFormValues>({ const form = useForm<AccountFormValues>({
resolver: zodResolver(accountFormSchema), resolver: zodResolver(accountFormSchema),
defaultValues, defaultValues: {
subdomain: "",
name: "My Resource",
},
}); });
useEffect(() => { useEffect(() => {
@@ -98,9 +96,13 @@ export default function CreateResourceForm({
const fetchSites = async () => { const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListSitesResponse>>( const res = await api.get<AxiosResponse<ListSitesResponse>>(
`/org/${orgId}/sites/` `/org/${orgId}/sites/`,
); );
setSites(res.data.data.sites); setSites(res.data.data.sites);
if (res.data.data.sites.length > 0) {
form.setValue("siteId", res.data.data.sites[0].siteId);
}
}; };
fetchSites(); fetchSites();
@@ -116,7 +118,7 @@ export default function CreateResourceForm({
name: data.name, name: data.name,
subdomain: data.subdomain, subdomain: data.subdomain,
// subdomain: data.subdomain, // subdomain: data.subdomain,
} },
) )
.catch((e) => { .catch((e) => {
toast({ toast({
@@ -124,7 +126,7 @@ export default function CreateResourceForm({
title: "Error creating resource", title: "Error creating resource",
description: formatAxiosError( description: formatAxiosError(
e, 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) => onChange={(value) =>
form.setValue( form.setValue(
"subdomain", "subdomain",
value value,
) )
} }
/> />
@@ -225,14 +227,14 @@ export default function CreateResourceForm({
className={cn( className={cn(
"w-[350px] justify-between", "w-[350px] justify-between",
!field.value && !field.value &&
"text-muted-foreground" "text-muted-foreground",
)} )}
> >
{field.value {field.value
? sites.find( ? sites.find(
(site) => (site) =>
site.siteId === site.siteId ===
field.value field.value,
)?.name )?.name
: "Select site"} : "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -259,7 +261,7 @@ export default function CreateResourceForm({
onSelect={() => { onSelect={() => {
form.setValue( form.setValue(
"siteId", "siteId",
site.siteId site.siteId,
); );
}} }}
> >
@@ -269,14 +271,14 @@ export default function CreateResourceForm({
site.siteId === site.siteId ===
field.value field.value
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0",
)} )}
/> />
{ {
site.name site.name
} }
</CommandItem> </CommandItem>
) ),
)} )}
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>

6
src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx
View File

@@ -85,7 +85,7 @@ export function ResourcesDataTable<TData, TValue>({
<Plus className="mr-2 h-4 w-4" /> Add Resource <Plus className="mr-2 h-4 w-4" /> Add Resource
</Button> </Button>
</div> </div>
<div> <div className="border rounded-md">
<Table> <Table>
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
@@ -98,7 +98,7 @@ export function ResourcesDataTable<TData, TValue>({
: flexRender( : flexRender(
header.column.columnDef header.column.columnDef
.header, .header,
header.getContext() header.getContext(),
)} )}
</TableHead> </TableHead>
); );
@@ -119,7 +119,7 @@ export function ResourcesDataTable<TData, TValue>({
<TableCell key={cell.id}> <TableCell key={cell.id}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext(),
)} )}
</TableCell> </TableCell>
))} ))}

2
src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
View File

@@ -85,7 +85,7 @@ export function SitesDataTable<TData, TValue>({
<Plus className="mr-2 h-4 w-4" /> Add Site <Plus className="mr-2 h-4 w-4" /> Add Site
</Button> </Button>
</div> </div>
<div> <div className="border rounded-md">
<Table> <Table>
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

2
src/app/[orgId]/settings/sites/page.tsx
View File

@@ -48,7 +48,7 @@ export default async function SitesPage(props: SitesPageProps) {
<> <>
<SettingsSectionTitle <SettingsSectionTitle
title="Manage Sites" 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} /> <SitesTable sites={siteRows} orgId={params.orgId} />