pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-19 19:36:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1967 from Fredkiss3/refactor/separate-tables-2

Browse Source 
Refactor: separate tables (2)
This commit is contained in:
Milo Schwartz
2025-12-03 17:31:46 -08:00
committed by GitHub
parent 8eec122114 79ccbc8e92
commit 23ab76ae08
12 changed files with 224 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
src/components/EditInternalResourceDialog.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { Button } from "@app/components/ui/button";
import { Input } from "@app/components/ui/input";
import {
@@ -45,7 +45,7 @@ import { ListClientsResponse } from "@server/routers/client/listClients";
import { Tag, TagInput } from "@app/components/tags/tag-input";
import { AxiosResponse } from "axios";
import { UserType } from "@server/types/UserTypes";
import { useQuery } from "@tanstack/react-query";
import { useQueries, useQuery } from "@tanstack/react-query";
import { orgQueries, resourceQueries } from "@app/lib/queries";
type InternalResourceData = {
@@ -157,42 +157,92 @@ export default function EditInternalResourceDialog({
type FormData = z.infer<typeof formSchema>;
const { data: rolesResponse = [] } = useQuery(orgQueries.roles({ orgId }));
const queries = useQueries({
queries: [
orgQueries.roles({ orgId }),
orgQueries.users({ orgId }),
orgQueries.clients({
orgId,
filters: {
filter: "machine"
}
}),
resourceQueries.resourceUsers({ resourceId: resource.id }),
resourceQueries.resourceRoles({ resourceId: resource.id }),
resourceQueries.resourceClients({ resourceId: resource.id })
],
combine: (results) => {
const [
rolesQuery,
usersQuery,
clientsQuery,
resourceUsersQuery,
resourceRolesQuery,
resourceClientsQuery
] = results;
const allRoles = rolesResponse
.map((role) => ({
id: role.roleId.toString(),
text: role.name
}))
.filter((role) => role.text !== "Admin");
const allRoles = (rolesQuery.data ?? [])
.map((role) => ({
id: role.roleId.toString(),
text: role.name
}))
.filter((role) => role.text !== "Admin");
const { data: usersResponse = [] } = useQuery(orgQueries.users({ orgId }));
const { data: existingClients = [] } = useQuery(
resourceQueries.resourceUsers({ resourceId: resource.id })
);
const { data: clientsResponse = [] } = useQuery(
orgQueries.clients({
orgId,
filters: {
filter: "machine"
}
})
);
const allUsers = (usersQuery.data ?? []).map((user) => ({
id: user.id.toString(),
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
}));
const allUsers = usersResponse.map((user) => ({
id: user.id.toString(),
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
}));
const machineClients = (clientsQuery.data ?? [])
.filter((client) => !client.userId)
.map((client) => ({
id: client.clientId.toString(),
text: client.name
}));
const allClients = clientsResponse
.filter((client) => !client.userId)
.map((client) => ({
id: client.clientId.toString(),
text: client.name
}));
const existingClients = (resourceClientsQuery.data ?? []).map(
(c: { clientId: number; name: string }) => ({
id: c.clientId.toString(),
text: c.name
})
);
const hasMachineClients =
allClients.length > 0 || existingClients.length > 0;
const formRoles = (resourceRolesQuery.data ?? [])
.map((i) => ({
id: i.roleId.toString(),
text: i.name
}))
.filter((role) => role.text !== "Admin");
const formUsers = (resourceUsersQuery.data ?? []).map((i) => ({
id: i.userId.toString(),
text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
}));
return {
allRoles,
allUsers,
machineClients,
existingClients,
formRoles,
formUsers,
hasMachineClients:
machineClients.length > 0 || existingClients.length > 0,
isLoading: results.some((query) => query.isLoading)
};
}
});
const {
allRoles,
allUsers,
machineClients,
existingClients,
formRoles,
formUsers,
hasMachineClients,
isLoading: loadingRolesUsers
} = queries;
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
number | null
@@ -203,7 +253,6 @@ export default function EditInternalResourceDialog({
const [activeClientsTagIndex, setActiveClientsTagIndex] = useState<
number | null
>(null);
const [loadingRolesUsers, setLoadingRolesUsers] = useState(false);
const form = useForm<FormData>({
resolver: zodResolver(formSchema),
@@ -223,117 +272,6 @@ export default function EditInternalResourceDialog({
const mode = form.watch("mode");
// const fetchRolesAndUsers = async () => {
// setLoadingRolesUsers(true);
// try {
// const [
// // rolesResponse,
// resourceRolesResponse,
// usersResponse,
// resourceUsersResponse,
// clientsResponse
// ] = await Promise.all([
// // api.get<AxiosResponse<ListRolesResponse>>(
// // `/org/${orgId}/roles`
// // ),
// api.get<AxiosResponse<ListSiteResourceRolesResponse>>(
// `/site-resource/${resource.id}/roles`
// ),
// api.get<AxiosResponse<ListUsersResponse>>(
// `/org/${orgId}/users`
// ),
// api.get<AxiosResponse<ListSiteResourceUsersResponse>>(
// `/site-resource/${resource.id}/users`
// ),
// api.get<AxiosResponse<ListClientsResponse>>(
// `/org/${orgId}/clients?filter=machine&limit=1000`
// )
// ]);
// let resourceClientsResponse: AxiosResponse<
// AxiosResponse<ListSiteResourceClientsResponse>
// >;
// try {
// resourceClientsResponse = await api.get<
// AxiosResponse<ListSiteResourceClientsResponse>
// >(`/site-resource/${resource.id}/clients`);
// } catch {
// resourceClientsResponse = {
// data: {
// data: {
// clients: []
// }
// },
// status: 200,
// statusText: "OK",
// headers: {} as any,
// config: {} as any
// } as any;
// }
// // setAllRoles(
// // rolesResponse.data.data.roles
// // .map((role) => ({
// // id: role.roleId.toString(),
// // text: role.name
// // }))
// // .filter((role) => role.text !== "Admin")
// // );
// form.setValue(
// "roles",
// resourceRolesResponse.data.data.roles
// .map((i) => ({
// id: i.roleId.toString(),
// text: i.name
// }))
// .filter((role) => role.text !== "Admin")
// );
// form.setValue(
// "users",
// resourceUsersResponse.data.data.users.map((i) => ({
// id: i.userId.toString(),
// text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
// }))
// );
// const machineClients = clientsResponse.data.data.clients
// .filter((client) => !client.userId)
// .map((client) => ({
// id: client.clientId.toString(),
// text: client.name
// }));
// setAllClients(machineClients);
// const existingClients =
// resourceClientsResponse.data.data.clients.map(
// (c: { clientId: number; name: string }) => ({
// id: c.clientId.toString(),
// text: c.name
// })
// );
// form.setValue("clients", existingClients);
// // Show clients tag input if there are machine clients OR existing client access
// setHasMachineClients(
// machineClients.length > 0 || existingClients.length > 0
// );
// } catch (error) {
// console.error("Error fetching roles, users, and clients:", error);
// } finally {
// setLoadingRolesUsers(false);
// }
// };
// useEffect(() => {
// if (open) {
// fetchRolesAndUsers();
// }
// }, [open, resource]);
const handleSubmit = async (data: FormData) => {
setIsSubmitting(true);
try {
@@ -399,6 +337,18 @@ export default function EditInternalResourceDialog({
}
};
// Set form values only once after initial load
const hasInitialized = useRef(false);
useEffect(() => {
if (!loadingRolesUsers && !hasInitialized.current) {
hasInitialized.current = true;
form.setValue("roles", formRoles);
form.setValue("users", formUsers);
form.setValue("clients", existingClients);
}
}, [loadingRolesUsers, formRoles, formUsers, existingClients, form]);
return (
<Credenza
open={open}
@@ -818,7 +768,7 @@ export default function EditInternalResourceDialog({
true
}
autocompleteOptions={
allClients
machineClients
}
allowDuplicates={
false

6
src/components/MachineClientsTable.tsx
View File

@@ -369,10 +369,10 @@ export default function MachineClientsTable({
</DropdownMenuContent>
</DropdownMenu>
<Link
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
href={`/${clientRow.orgId}/settings/clients/machine/${clientRow.id}`}
>
<Button variant={"outline"}>
Edit
{t("edit")}
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</Link>
@@ -414,7 +414,7 @@ export default function MachineClientsTable({
searchPlaceholder={t("resourcesSearch")}
searchColumn="name"
onAdd={() =>
router.push(`/${orgId}/settings/clients/create`)
router.push(`/${orgId}/settings/clients/machine/create`)
}
addButtonText={t("createClient")}
onRefresh={refreshData}

2
src/components/ProxyResourcesTable.tsx
View File

@@ -554,7 +554,7 @@ export default function ProxyResourcesTable({
searchPlaceholder={t("resourcesSearch")}
searchColumn="name"
onAdd={() =>
router.push(`/${orgId}/settings/resources/create`)
router.push(`/${orgId}/settings/resources/proxy/create`)
}
addButtonText={t("resourceAdd")}
onRefresh={refreshData}