mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-01 23:59:09 +00:00
🚧 WIP
This commit is contained in:
@@ -1,17 +1,15 @@
|
||||
import { verifySession } from "@app/lib/auth/verifySession";
|
||||
import UserProvider from "@app/providers/UserProvider";
|
||||
import { cache } from "react";
|
||||
import MemberResourcesPortal from "../../components/MemberResourcesPortal";
|
||||
import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
|
||||
import { internal } from "@app/lib/api";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Layout } from "@app/components/Layout";
|
||||
import { ListUserOrgsResponse } from "@server/routers/org";
|
||||
import MemberResourcesPortal from "@app/components/MemberResourcesPortal";
|
||||
import { internal } from "@app/lib/api";
|
||||
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||
import { verifySession } from "@app/lib/auth/verifySession";
|
||||
import { pullEnv } from "@app/lib/pullEnv";
|
||||
import EnvProvider from "@app/providers/EnvProvider";
|
||||
import { orgLangingNavItems } from "@app/app/navigation";
|
||||
import UserProvider from "@app/providers/UserProvider";
|
||||
import { ListUserOrgsResponse } from "@server/routers/org";
|
||||
import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cache } from "react";
|
||||
|
||||
type OrgPageProps = {
|
||||
params: Promise<{ orgId: string }>;
|
||||
|
||||
@@ -95,16 +95,16 @@ export default async function RootLayout({
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
)}
|
||||
<TanstackQueryProvider>
|
||||
<NextIntlClientProvider>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<ThemeDataProvider colors={loadBrandingColors()}>
|
||||
<EnvProvider env={pullEnv()}>
|
||||
<NextIntlClientProvider>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<ThemeDataProvider colors={loadBrandingColors()}>
|
||||
<EnvProvider env={env}>
|
||||
<TanstackQueryProvider>
|
||||
<LicenseStatusProvider
|
||||
licenseStatus={licenseStatus}
|
||||
>
|
||||
@@ -124,11 +124,11 @@ export default async function RootLayout({
|
||||
</SupportStatusProvider>
|
||||
</LicenseStatusProvider>
|
||||
<Toaster />
|
||||
</EnvProvider>
|
||||
</ThemeDataProvider>
|
||||
</ThemeProvider>
|
||||
</NextIntlClientProvider>
|
||||
</TanstackQueryProvider>
|
||||
</TanstackQueryProvider>
|
||||
</EnvProvider>
|
||||
</ThemeDataProvider>
|
||||
</ThemeProvider>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -55,7 +55,7 @@ import CreateInternalResourceDialog from "@app/components/CreateInternalResource
|
||||
import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog";
|
||||
import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
|
||||
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
|
||||
import { siteQueries } from "@app/lib/queries";
|
||||
import { orgQueries, siteQueries } from "@app/lib/queries";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export type TargetHealth = {
|
||||
@@ -135,9 +135,7 @@ export default function ClientResourcesTable({
|
||||
useState<InternalResourceRow | null>();
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
|
||||
const { data: sites = [] } = useQuery(
|
||||
siteQueries.listPerOrg({ orgId, api })
|
||||
);
|
||||
const { data: sites = [] } = useQuery(orgQueries.sites({ orgId, api }));
|
||||
|
||||
const [internalSorting, setInternalSorting] = useState<SortingState>(
|
||||
defaultSort ? [defaultSort] : []
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@app/components/ui/select";
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import { Tag, TagInput } from "@app/components/tags/tag-input";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
@@ -18,15 +19,6 @@ import {
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from "@app/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger
|
||||
} from "@app/components/ui/popover";
|
||||
import { Check, ChevronsUpDown } from "lucide-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -36,29 +28,36 @@ import {
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger
|
||||
} from "@app/components/ui/popover";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@app/components/ui/select";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { ListSitesResponse } from "@server/routers/site";
|
||||
import { ListRolesResponse } from "@server/routers/role";
|
||||
import { ListUsersResponse } from "@server/routers/user";
|
||||
import { ListClientsResponse } from "@server/routers/client/listClients";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { Tag, TagInput } from "@app/components/tags/tag-input";
|
||||
import { Separator } from "@app/components/ui/separator";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { orgQueries } from "@app/lib/queries";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { ListClientsResponse } from "@server/routers/client/listClients";
|
||||
import { ListSitesResponse } from "@server/routers/site";
|
||||
import { ListUsersResponse } from "@server/routers/user";
|
||||
import { UserType } from "@server/types/UserTypes";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { Check, ChevronsUpDown } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
type Site = ListSitesResponse["sites"][0];
|
||||
|
||||
@@ -167,15 +166,38 @@ export default function CreateInternalResourceDialog({
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
|
||||
const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(
|
||||
[]
|
||||
const { data: rolesResponse = [] } = useQuery(orgQueries.roles({ orgId }));
|
||||
const { data: usersResponse = [] } = useQuery(orgQueries.users({ orgId }));
|
||||
const { data: clientsResponse = [] } = useQuery(
|
||||
orgQueries.clients({
|
||||
orgId,
|
||||
filters: {
|
||||
filter: "machine"
|
||||
}
|
||||
})
|
||||
);
|
||||
const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>(
|
||||
[]
|
||||
);
|
||||
const [allClients, setAllClients] = useState<
|
||||
{ id: string; text: string }[]
|
||||
>([]);
|
||||
|
||||
const allRoles = rolesResponse
|
||||
.map((role) => ({
|
||||
id: role.roleId.toString(),
|
||||
text: role.name
|
||||
}))
|
||||
.filter((role) => role.text !== "Admin");
|
||||
|
||||
const allUsers = usersResponse.map((user) => ({
|
||||
id: user.id.toString(),
|
||||
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
|
||||
}));
|
||||
|
||||
const allClients = clientsResponse
|
||||
.filter((client) => !client.userId)
|
||||
.map((client) => ({
|
||||
id: client.clientId.toString(),
|
||||
text: client.name
|
||||
}));
|
||||
|
||||
const hasMachineClients = allClients.length > 0;
|
||||
|
||||
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
@@ -185,7 +207,6 @@ export default function CreateInternalResourceDialog({
|
||||
const [activeClientsTagIndex, setActiveClientsTagIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
const [hasMachineClients, setHasMachineClients] = useState(false);
|
||||
|
||||
const availableSites = sites.filter(
|
||||
(site) => site.type === "newt" && site.subnet
|
||||
@@ -228,60 +249,6 @@ export default function CreateInternalResourceDialog({
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRolesUsersAndClients = async () => {
|
||||
try {
|
||||
const [rolesResponse, usersResponse, clientsResponse] =
|
||||
await Promise.all([
|
||||
api.get<AxiosResponse<ListRolesResponse>>(
|
||||
`/org/${orgId}/roles`
|
||||
),
|
||||
api.get<AxiosResponse<ListUsersResponse>>(
|
||||
`/org/${orgId}/users`
|
||||
),
|
||||
api.get<AxiosResponse<ListClientsResponse>>(
|
||||
`/org/${orgId}/clients?filter=machine&limit=1000`
|
||||
)
|
||||
]);
|
||||
|
||||
setAllRoles(
|
||||
rolesResponse.data.data.roles
|
||||
.map((role) => ({
|
||||
id: role.roleId.toString(),
|
||||
text: role.name
|
||||
}))
|
||||
.filter((role) => role.text !== "Admin")
|
||||
);
|
||||
|
||||
setAllUsers(
|
||||
usersResponse.data.data.users.map((user) => ({
|
||||
id: user.id.toString(),
|
||||
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
|
||||
}))
|
||||
);
|
||||
|
||||
const machineClients = clientsResponse.data.data.clients
|
||||
.filter((client) => !client.userId)
|
||||
.map((client) => ({
|
||||
id: client.clientId.toString(),
|
||||
text: client.name
|
||||
}));
|
||||
|
||||
setAllClients(machineClients);
|
||||
setHasMachineClients(machineClients.length > 0);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Error fetching roles, users, and clients:",
|
||||
error
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (open) {
|
||||
fetchRolesUsersAndClients();
|
||||
}
|
||||
}, [open, orgId]);
|
||||
|
||||
const handleSubmit = async (data: FormData) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
|
||||
@@ -45,6 +45,8 @@ 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 { orgQueries, resourceQueries } from "@app/lib/queries";
|
||||
|
||||
type InternalResourceData = {
|
||||
id: number;
|
||||
@@ -155,15 +157,43 @@ export default function EditInternalResourceDialog({
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
|
||||
const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(
|
||||
[]
|
||||
const { data: rolesResponse = [] } = useQuery(orgQueries.roles({ orgId }));
|
||||
|
||||
const allRoles = rolesResponse
|
||||
.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 [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>(
|
||||
[]
|
||||
const { data: clientsResponse = [] } = useQuery(
|
||||
orgQueries.clients({
|
||||
orgId,
|
||||
filters: {
|
||||
filter: "machine"
|
||||
}
|
||||
})
|
||||
);
|
||||
const [allClients, setAllClients] = useState<
|
||||
{ id: string; text: string }[]
|
||||
>([]);
|
||||
|
||||
const allUsers = usersResponse.map((user) => ({
|
||||
id: user.id.toString(),
|
||||
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
|
||||
}));
|
||||
|
||||
const allClients = clientsResponse
|
||||
.filter((client) => !client.userId)
|
||||
.map((client) => ({
|
||||
id: client.clientId.toString(),
|
||||
text: client.name
|
||||
}));
|
||||
|
||||
const hasMachineClients =
|
||||
allClients.length > 0 || existingClients.length > 0;
|
||||
|
||||
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
@@ -174,7 +204,6 @@ export default function EditInternalResourceDialog({
|
||||
number | null
|
||||
>(null);
|
||||
const [loadingRolesUsers, setLoadingRolesUsers] = useState(false);
|
||||
const [hasMachineClients, setHasMachineClients] = useState(false);
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
@@ -194,136 +223,116 @@ 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`
|
||||
)
|
||||
]);
|
||||
// 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;
|
||||
}
|
||||
// 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")
|
||||
);
|
||||
// // 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(
|
||||
// "roles",
|
||||
// resourceRolesResponse.data.data.roles
|
||||
// .map((i) => ({
|
||||
// id: i.roleId.toString(),
|
||||
// text: i.name
|
||||
// }))
|
||||
// .filter((role) => role.text !== "Admin")
|
||||
// );
|
||||
|
||||
setAllUsers(
|
||||
usersResponse.data.data.users.map((user) => ({
|
||||
id: user.id.toString(),
|
||||
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
|
||||
}))
|
||||
);
|
||||
// form.setValue(
|
||||
// "users",
|
||||
// resourceUsersResponse.data.data.users.map((i) => ({
|
||||
// id: i.userId.toString(),
|
||||
// text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
|
||||
// }))
|
||||
// );
|
||||
|
||||
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
|
||||
// }));
|
||||
|
||||
const machineClients = clientsResponse.data.data.clients
|
||||
.filter((client) => !client.userId)
|
||||
.map((client) => ({
|
||||
id: client.clientId.toString(),
|
||||
text: client.name
|
||||
}));
|
||||
// setAllClients(machineClients);
|
||||
|
||||
setAllClients(machineClients);
|
||||
// const existingClients =
|
||||
// resourceClientsResponse.data.data.clients.map(
|
||||
// (c: { clientId: number; name: string }) => ({
|
||||
// id: c.clientId.toString(),
|
||||
// text: c.name
|
||||
// })
|
||||
// );
|
||||
|
||||
const existingClients =
|
||||
resourceClientsResponse.data.data.clients.map(
|
||||
(c: { clientId: number; name: string }) => ({
|
||||
id: c.clientId.toString(),
|
||||
text: c.name
|
||||
})
|
||||
);
|
||||
// form.setValue("clients", existingClients);
|
||||
|
||||
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);
|
||||
// }
|
||||
// };
|
||||
|
||||
// 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) {
|
||||
form.reset({
|
||||
name: resource.name,
|
||||
mode: resource.mode || "host",
|
||||
// protocol: (resource.protocol as "tcp" | "udp" | null | undefined) ?? undefined,
|
||||
// proxyPort: resource.proxyPort ?? undefined,
|
||||
destination: resource.destination || "",
|
||||
// destinationPort: resource.destinationPort ?? undefined,
|
||||
alias: resource.alias ?? null,
|
||||
roles: [],
|
||||
users: [],
|
||||
clients: []
|
||||
});
|
||||
fetchRolesAndUsers();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, resource]);
|
||||
// useEffect(() => {
|
||||
// if (open) {
|
||||
// fetchRolesAndUsers();
|
||||
// }
|
||||
// }, [open, resource]);
|
||||
|
||||
const handleSubmit = async (data: FormData) => {
|
||||
setIsSubmitting(true);
|
||||
@@ -391,7 +400,27 @@ export default function EditInternalResourceDialog({
|
||||
};
|
||||
|
||||
return (
|
||||
<Credenza open={open} onOpenChange={setOpen}>
|
||||
<Credenza
|
||||
open={open}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
// reset only on close
|
||||
form.reset({
|
||||
name: resource.name,
|
||||
mode: resource.mode || "host",
|
||||
// protocol: (resource.protocol as "tcp" | "udp" | null | undefined) ?? undefined,
|
||||
// proxyPort: resource.proxyPort ?? undefined,
|
||||
destination: resource.destination || "",
|
||||
// destinationPort: resource.destinationPort ?? undefined,
|
||||
alias: resource.alias ?? null,
|
||||
roles: [],
|
||||
users: [],
|
||||
clients: []
|
||||
});
|
||||
}
|
||||
setOpen(open);
|
||||
}}
|
||||
>
|
||||
<CredenzaContent className="max-w-2xl">
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>
|
||||
|
||||
@@ -3,19 +3,29 @@ import * as React from "react";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import { QueryClient } from "@tanstack/react-query";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { createApiClient } from "@app/lib/api";
|
||||
import { durationToMs } from "@app/lib/durationToMs";
|
||||
|
||||
export type ReactQueryProviderProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function TanstackQueryProvider({ children }: ReactQueryProviderProps) {
|
||||
const api = createApiClient(useEnvContext());
|
||||
const [queryClient] = React.useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: 2, // retry twice by default
|
||||
staleTime: 5 * 60 * 1_000 // 5 minutes
|
||||
staleTime: durationToMs(5, "minutes"),
|
||||
meta: {
|
||||
api
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
meta: { api }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
import { keepPreviousData, queryOptions } from "@tanstack/react-query";
|
||||
import { durationToMs } from "./durationToMs";
|
||||
import { build } from "@server/build";
|
||||
import { remote } from "./api";
|
||||
import type ResponseT from "@server/types/Response";
|
||||
import type { ListClientsResponse } from "@server/routers/client";
|
||||
import type { ListRolesResponse } from "@server/routers/role";
|
||||
import type { ListSitesResponse } from "@server/routers/site";
|
||||
import type { AxiosInstance, AxiosResponse } from "axios";
|
||||
import type {
|
||||
ListSiteResourceRolesResponse,
|
||||
ListSiteResourceUsersResponse
|
||||
} from "@server/routers/siteResource";
|
||||
import type { ListUsersResponse } from "@server/routers/user";
|
||||
import type ResponseT from "@server/types/Response";
|
||||
import { keepPreviousData, queryOptions } from "@tanstack/react-query";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import z from "zod";
|
||||
import { remote } from "./api";
|
||||
import { durationToMs } from "./durationToMs";
|
||||
|
||||
export type ProductUpdate = {
|
||||
link: string | null;
|
||||
@@ -68,15 +76,89 @@ export const productUpdatesQueries = {
|
||||
})
|
||||
};
|
||||
|
||||
export const siteQueries = {
|
||||
listPerOrg: ({ orgId, api }: { orgId: string; api: AxiosInstance }) =>
|
||||
export const clientFilterSchema = z.object({
|
||||
filter: z.enum(["machine", "user"]),
|
||||
limit: z.int().prefault(1000).optional()
|
||||
});
|
||||
|
||||
export const orgQueries = {
|
||||
clients: ({
|
||||
orgId,
|
||||
filters
|
||||
}: {
|
||||
orgId: string;
|
||||
filters: z.infer<typeof clientFilterSchema>;
|
||||
}) =>
|
||||
queryOptions({
|
||||
queryKey: ["SITE_PER_ORG", orgId] as const,
|
||||
queryFn: async ({ signal }) => {
|
||||
const res = await api.get<AxiosResponse<ListSitesResponse>>(
|
||||
`/org/${orgId}/sites`
|
||||
);
|
||||
queryKey: ["ORG", orgId, "CLIENTS", filters] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const sp = new URLSearchParams({
|
||||
...filters,
|
||||
limit: (filters.limit ?? 1000).toString()
|
||||
});
|
||||
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListClientsResponse>
|
||||
>(`/org/${orgId}/clients?${sp.toString()}`, { signal });
|
||||
|
||||
return res.data.data.clients;
|
||||
}
|
||||
}),
|
||||
users: ({ orgId }: { orgId: string }) =>
|
||||
queryOptions({
|
||||
queryKey: ["ORG", orgId, "USERS"] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListUsersResponse>
|
||||
>(`/org/${orgId}/users`, { signal });
|
||||
|
||||
return res.data.data.users;
|
||||
}
|
||||
}),
|
||||
roles: ({ orgId }: { orgId: string }) =>
|
||||
queryOptions({
|
||||
queryKey: ["ORG", orgId, "ROLES"] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListRolesResponse>
|
||||
>(`/org/${orgId}/roles`, { signal });
|
||||
|
||||
return res.data.data.roles;
|
||||
}
|
||||
}),
|
||||
|
||||
sites: ({ orgId }: { orgId: string }) =>
|
||||
queryOptions({
|
||||
queryKey: ["ORG", orgId, "SITES"] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListSitesResponse>
|
||||
>(`/org/${orgId}/sites`, { signal });
|
||||
return res.data.data.sites;
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
export const resourceQueries = {
|
||||
resourceUsers: ({ resourceId }: { resourceId: number }) =>
|
||||
queryOptions({
|
||||
queryKey: ["RESOURCES", resourceId, "USERS"] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListSiteResourceUsersResponse>
|
||||
>(`/site-resource/${resourceId}/users`, { signal });
|
||||
return res.data.data.users;
|
||||
}
|
||||
}),
|
||||
resourceRoles: ({ resourceId }: { resourceId: number }) =>
|
||||
queryOptions({
|
||||
queryKey: ["RESOURCES", resourceId, "ROLES"] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListSiteResourceRolesResponse>
|
||||
>(`/site-resource/${resourceId}/roles`, { signal });
|
||||
|
||||
return res.data.data.roles;
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
13
src/types/tanstack-query.d.ts
vendored
Normal file
13
src/types/tanstack-query.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
import "@tanstack/react-query";
|
||||
import type { AxiosInstance } from "axios";
|
||||
|
||||
interface Meta extends Record<string, unknown> {
|
||||
api: AxiosInstance;
|
||||
}
|
||||
|
||||
declare module "@tanstack/react-query" {
|
||||
interface Register {
|
||||
queryMeta: Meta;
|
||||
mutationMeta: Meta;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user