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

Refactor: separate tables (2)
2026-02-08 05:56:38 +00:00 · 2025-12-03 17:31:46 -08:00
parent 8eec122114 79ccbc8e92
commit 23ab76ae08
12 changed files with 224 additions and 256 deletions
--- a/src/app/[orgId]/settings/clients/machine/[clientId]/credentials/page.tsx
+++ b/src/app/[orgId]/settings/clients/machine/[clientId]/credentials/page.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
 import {
    SettingsContainer,
    SettingsSection,
@@ -10,18 +10,23 @@ import {
    SettingsSectionTitle
 } from "@app/components/Settings";
 import { Button } from "@app/components/ui/button";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { toast } from "@app/hooks/useToast";
-import { useParams, useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { PickClientDefaultsResponse } from "@server/routers/client";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "@app/components/ui/tooltip";
 import { useClientContext } from "@app/hooks/useClientContext";
-import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
-import { build } from "@server/build";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@app/components/ui/tooltip";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { build } from "@server/build";
+import { PickClientDefaultsResponse } from "@server/routers/client";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";

 export default function CredentialsPage() {
    const { env } = useEnvContext();
@@ -32,7 +37,8 @@ export default function CredentialsPage() {
    const { client } = useClientContext();

    const [modalOpen, setModalOpen] = useState(false);
-    const [clientDefaults, setClientDefaults] = useState<PickClientDefaultsResponse | null>(null);
+    const [clientDefaults, setClientDefaults] =
+        useState<PickClientDefaultsResponse | null>(null);

    const { licenseStatus, isUnlocked } = useLicenseStatusContext();
    const subscription = useSubscriptionStatusContext();
@@ -44,18 +50,19 @@ export default function CredentialsPage() {
        return isEnterpriseNotLicensed || isSaasNotSubscribed;
    };

-
    const handleConfirmRegenerate = async () => {
-
        const res = await api.get(`/org/${orgId}/pick-client-defaults`);
        if (res && res.status === 200) {
            const data = res.data.data;
            setClientDefaults(data);

-            await api.post(`/re-key/${client?.clientId}/regenerate-client-secret`, {
-                olmId: data.olmId,
-                secret: data.olmSecret,
-            });
+            await api.post(
+                `/re-key/${client?.clientId}/regenerate-client-secret`,
+                {
+                    olmId: data.olmId,
+                    secret: data.olmSecret
+                }
+            );

            toast({
                title: t("credentialsSaved"),
@@ -95,7 +102,8 @@ export default function CredentialsPage() {
                                <div className="inline-block">
                                    <Button
                                        onClick={() => setModalOpen(true)}
-                                        disabled={isSecurityFeatureDisabled()}>
+                                        disabled={isSecurityFeatureDisabled()}
+                                    >
                                        {t("regeneratecredentials")}
                                    </Button>
                                </div>
@@ -121,4 +129,4 @@ export default function CredentialsPage() {
            />
        </SettingsContainer>
    );
-}
+}
--- a/src/app/[orgId]/settings/clients/machine/[clientId]/general/page.tsx
+++ b/src/app/[orgId]/settings/clients/machine/[clientId]/general/page.tsx
@@ -1,40 +1,37 @@
 "use client";

-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
    Form,
    FormControl,
-    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { useClientContext } from "@app/hooks/useClientContext";
-import { useForm } from "react-hook-form";
-import { toast } from "@app/hooks/useToast";
-import { useRouter } from "next/navigation";
 import {
    SettingsContainer,
    SettingsSection,
-    SettingsSectionHeader,
-    SettingsSectionTitle,
-    SettingsSectionDescription,
    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
    SettingsSectionForm,
-    SettingsSectionFooter
+    SettingsSectionHeader,
+    SettingsSectionTitle
 } from "@app/components/Settings";
-import { formatAxiosError } from "@app/lib/api";
-import { createApiClient } from "@app/lib/api";
+import { useClientContext } from "@app/hooks/useClientContext";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useEffect, useState } from "react";
-import { Tag, TagInput } from "@app/components/tags/tag-input";
-import { AxiosResponse } from "axios";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { ListSitesResponse } from "@server/routers/site";
+import { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";

 const GeneralFormSchema = z.object({
    name: z.string().nonempty("Name is required")
--- a/src/app/[orgId]/settings/clients/machine/[clientId]/layout.tsx
+++ b/src/app/[orgId]/settings/clients/machine/[clientId]/layout.tsx
@@ -1,19 +1,19 @@
-import { internal } from "@app/lib/api";
-import { AxiosResponse } from "axios";
-import { authCookieHeader } from "@app/lib/api/cookies";
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { GetClientResponse } from "@server/routers/client";
-import ClientInfoCard from "../../../../../components/ClientInfoCard";
-import ClientProvider from "@app/providers/ClientProvider";
-import { redirect } from "next/navigation";
+import ClientInfoCard from "@app/components/ClientInfoCard";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
-import { getTranslations } from "next-intl/server";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import ClientProvider from "@app/providers/ClientProvider";
 import { build } from "@server/build";
+import { GetClientResponse } from "@server/routers/client";
+import { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";

 type SettingsLayoutProps = {
    children: React.ReactNode;
    params: Promise<{ clientId: number | string; orgId: string }>;
-}
+};

 export default async function SettingsLayout(props: SettingsLayoutProps) {
    const params = await props.params;
@@ -36,16 +36,17 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {

    const navItems = [
        {
-            title: t('general'),
-            href: `/{orgId}/settings/clients/{clientId}/general`
+            title: t("general"),
+            href: `/{orgId}/settings/clients/machine/{clientId}/general`
        },
-        ...(build === 'enterprise'
-            ? [{
-                title: t('credentials'),
-                href: `/{orgId}/settings/clients/{clientId}/credentials`
-            },
-            ]
-            : []),
+        ...(build === "enterprise"
+            ? [
+                  {
+                      title: t("credentials"),
+                      href: `/{orgId}/settings/clients/machine/{clientId}/credentials`
+                  }
+              ]
+            : [])
    ];

    return (
@@ -58,9 +59,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
            <ClientProvider client={client}>
                <div className="space-y-6">
                    <ClientInfoCard />
-                    <HorizontalTabs items={navItems}>
-                        {children}
-                    </HorizontalTabs>
+                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
                </div>
            </ClientProvider>
        </>
--- a/src/app/[orgId]/settings/clients/machine/[clientId]/page.tsx
+++ b/src/app/[orgId]/settings/clients/machine/[clientId]/page.tsx
@@ -4,5 +4,7 @@ export default async function ClientPage(props: {
    params: Promise<{ orgId: string; clientId: number | string }>;
 }) {
    const params = await props.params;
-    redirect(`/${params.orgId}/settings/clients/${params.clientId}/general`);
+    redirect(
+        `/${params.orgId}/settings/clients/machine/${params.clientId}/general`
+    );
 }
--- a/src/app/[orgId]/settings/clients/machine/create/page.tsx
+++ b/src/app/[orgId]/settings/clients/machine/create/page.tsx
--- a/src/app/[orgId]/settings/resources/proxy/create/page.tsx
+++ b/src/app/[orgId]/settings/resources/proxy/create/page.tsx
--- a/src/components/EditInternalResourceDialog.tsx
+++ b/src/components/EditInternalResourceDialog.tsx
@@ -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
--- a/src/components/MachineClientsTable.tsx
+++ b/src/components/MachineClientsTable.tsx
@@ -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}
--- a/src/components/ProxyResourcesTable.tsx
+++ b/src/components/ProxyResourcesTable.tsx
@@ -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}
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -3,6 +3,7 @@ import type { ListClientsResponse } from "@server/routers/client";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
 import type {
+    ListSiteResourceClientsResponse,
    ListSiteResourceRolesResponse,
    ListSiteResourceUsersResponse
 } from "@server/routers/siteResource";
@@ -160,5 +161,16 @@ export const resourceQueries = {

                return res.data.data.roles;
            }
+        }),
+    resourceClients: ({ resourceId }: { resourceId: number }) =>
+        queryOptions({
+            queryKey: ["RESOURCES", resourceId, "ROLES"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListSiteResourceClientsResponse>
+                >(`/site-resource/${resourceId}/clients`, { signal });
+
+                return res.data.data.clients;
+            }
        })
 };