From 96d6ad8142c0b3588242b3093b2c2da23550a16a Mon Sep 17 00:00:00 2001 From: Owen Date: Tue, 1 Apr 2025 10:13:20 -0400 Subject: [PATCH] Create clients working again --- server/routers/client/createClient.ts | 2 +- server/routers/external.ts | 4 +- .../[orgId]/settings/clients/ClientsTable.tsx | 56 ++++---- .../settings/clients/CreateClientsForm.tsx | 121 ++++++++++-------- .../settings/clients/CreateClientsModal.tsx | 2 +- src/components/ui/scroll-area.tsx | 2 +- 6 files changed, 101 insertions(+), 86 deletions(-) diff --git a/server/routers/client/createClient.ts b/server/routers/client/createClient.ts index 8bc2af49..a86fcff7 100644 --- a/server/routers/client/createClient.ts +++ b/server/routers/client/createClient.ts @@ -30,7 +30,7 @@ const createClientParamsSchema = z const createClientSchema = z .object({ name: z.string().min(1).max(255), - siteIds: z.array(z.string().transform(Number).pipe(z.number())), + siteIds: z.array(z.number().int().positive()), olmId: z.string(), secret: z.string(), type: z.enum(["olm"]) diff --git a/server/routers/external.ts b/server/routers/external.ts index 5001daf5..5601b63a 100644 --- a/server/routers/external.ts +++ b/server/routers/external.ts @@ -102,8 +102,8 @@ authenticated.get( ); authenticated.get( - "/pick-client-defaults", - verifySiteAccess, + "/org/:orgId/pick-client-defaults", + verifyOrgAccess, verifyUserHasAction(ActionsEnum.createClient), client.pickClientDefaults ); diff --git a/src/app/[orgId]/settings/clients/ClientsTable.tsx b/src/app/[orgId]/settings/clients/ClientsTable.tsx index c7af53e3..7b829efb 100644 --- a/src/app/[orgId]/settings/clients/ClientsTable.tsx +++ b/src/app/[orgId]/settings/clients/ClientsTable.tsx @@ -29,8 +29,6 @@ import CreateClientFormModal from "./CreateClientsModal"; export type ClientRow = { id: number; - siteId: string; - siteName: string; name: string; mbIn: string; mbOut: string; @@ -128,33 +126,33 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) { ); } }, - { - accessorKey: "siteName", - header: ({ column }) => { - return ( - - ); - }, - cell: ({ row }) => { - const r = row.original; - return ( - - - - ); - } - }, + // { + // accessorKey: "siteName", + // header: ({ column }) => { + // return ( + // + // ); + // }, + // cell: ({ row }) => { + // const r = row.original; + // return ( + // + // + // + // ); + // } + // }, { accessorKey: "online", header: ({ column }) => { diff --git a/src/app/[orgId]/settings/clients/CreateClientsForm.tsx b/src/app/[orgId]/settings/clients/CreateClientsForm.tsx index 77275471..e3183c49 100644 --- a/src/app/[orgId]/settings/clients/CreateClientsForm.tsx +++ b/src/app/[orgId]/settings/clients/CreateClientsForm.tsx @@ -57,8 +57,8 @@ const createClientFormSchema = z.object({ .max(30, { message: "Name must not be longer than 30 characters." }), - siteIds: z.array(z.number()).min(1, { - message: "Select at least one site." + siteIds: z.array(z.number()).min(1, { + message: "Select at least one site." }) }); @@ -88,11 +88,12 @@ export default function CreateClientForm({ const [sites, setSites] = useState([]); const [isLoading, setIsLoading] = useState(false); const [isChecked, setIsChecked] = useState(false); - const [isOpen, setIsOpen] = useState(false); const [clientDefaults, setClientDefaults] = useState(null); const [olmCommand, setOlmCommand] = useState(null); - const [selectedSites, setSelectedSites] = useState>([]); + const [selectedSites, setSelectedSites] = useState< + Array<{ id: number; name: string }> + >([]); const handleCheckboxChange = (checked: boolean) => { setIsChecked(checked); @@ -108,7 +109,10 @@ export default function CreateClientForm({ useEffect(() => { // Update form value when selectedSites changes - form.setValue('siteIds', selectedSites.map(site => site.id)); + form.setValue( + "siteIds", + selectedSites.map((site) => site.id) + ); }, [selectedSites, form]); useEffect(() => { @@ -132,38 +136,39 @@ export default function CreateClientForm({ setSites(sites); }; + const fetchDefaults = async () => { + api.get(`/org/${orgId}/pick-client-defaults`) + .catch((e) => { + toast({ + variant: "destructive", + title: `Error fetching client defaults`, + description: formatAxiosError(e) + }); + }) + .then((res) => { + if (res && res.status === 200) { + const data = res.data.data; + setClientDefaults(data); + const olmConfig = `olm --id ${data?.olmId} --secret ${data?.olmSecret} --endpoint ${env.app.dashboardUrl}`; + setOlmCommand(olmConfig); + } + }); + }; fetchSites(); + fetchDefaults(); }, [open]); - useEffect(() => { - if (selectedSites.length === 0) return; - - api.get(`/pick-client-defaults`) - .catch((e) => { - toast({ - variant: "destructive", - title: `Error fetching client defaults`, - description: formatAxiosError(e) - }); - }) - .then((res) => { - if (res && res.status === 200) { - const data = res.data.data; - setClientDefaults(data); - const olmConfig = `olm --id ${data?.olmId} --secret ${data?.olmSecret} --endpoint ${env.app.dashboardUrl}`; - setOlmCommand(olmConfig); - } - }); - }, [selectedSites]); - const addSite = (siteId: number, siteName: string) => { - if (!selectedSites.some(site => site.id === siteId)) { - setSelectedSites([...selectedSites, { id: siteId, name: siteName }]); + if (!selectedSites.some((site) => site.id === siteId)) { + setSelectedSites([ + ...selectedSites, + { id: siteId, name: siteName } + ]); } }; const removeSite = (siteId: number) => { - setSelectedSites(selectedSites.filter(site => site.id !== siteId)); + setSelectedSites(selectedSites.filter((site) => site.id !== siteId)); }; async function onSubmit(data: CreateClientFormValues) { @@ -190,10 +195,9 @@ export default function CreateClientForm({ } as CreateClientBody; const res = await api - .put>( - `/org/${orgId}/client`, - payload - ) + .put< + AxiosResponse + >(`/org/${orgId}/client`, payload) .catch((e) => { toast({ variant: "destructive", @@ -205,14 +209,8 @@ export default function CreateClientForm({ if (res && res.status === 201) { const data = res.data.data; - // For now we'll just use the first site for display purposes - // The actual client will be associated with all selected sites - const firstSite = sites.find((site) => site.siteId === selectedSites[0]?.id); - onCreate?.({ name: data.name, - siteId: firstSite?.niceId || "", - siteName: firstSite?.name || "", id: data.clientId, mbIn: "0 MB", mbOut: "0 MB", @@ -265,12 +263,13 @@ export default function CreateClientForm({ role="combobox" className={cn( "justify-between", - selectedSites.length === 0 && + selectedSites.length === + 0 && "text-muted-foreground" )} > {selectedSites.length > 0 - ? `${selectedSites.length} site${selectedSites.length !== 1 ? 's' : ''} selected` + ? `${selectedSites.length} site${selectedSites.length !== 1 ? "s" : ""} selected` : "Select sites"} @@ -288,15 +287,26 @@ export default function CreateClientForm({ {sites.map((site) => ( { - addSite(site.siteId, site.name); + addSite( + site.siteId, + site.name + ); }} > s.id === site.siteId) + selectedSites.some( + ( + s + ) => + s.id === + site.siteId + ) ? "opacity-100" : "opacity-0" )} @@ -310,15 +320,20 @@ export default function CreateClientForm({ - + {selectedSites.length > 0 && (
- {selectedSites.map(site => ( - + {selectedSites.map((site) => ( + {site.name} -
)} - + - The client will have connectivity to the selected sites. The sites must be configured to accept client connections. + The client will have connectivity to the + selected sites. The sites must be configured + to accept client connections. @@ -370,4 +387,4 @@ export default function CreateClientForm({ ); -} \ No newline at end of file +} diff --git a/src/app/[orgId]/settings/clients/CreateClientsModal.tsx b/src/app/[orgId]/settings/clients/CreateClientsModal.tsx index 450e655f..a8921cb1 100644 --- a/src/app/[orgId]/settings/clients/CreateClientsModal.tsx +++ b/src/app/[orgId]/settings/clients/CreateClientsModal.tsx @@ -60,7 +60,7 @@ export default function CreateClientFormModal({