♻️ separate client & proxy resources tables

messages/en-US.json

@@ -144,8 +144,10 @@
     "expires": "Expires",
     "never": "Never",
     "shareErrorSelectResource": "Please select a resource",
-    "resourceTitle": "Manage Resources",
-    "resourceDescription": "Access resources on sites publically or privately",
+    "proxyResourceTitle": "Manage Proxy Resources",
+    "proxyResourceDescription": "Access web resources on sites",
+    "clientResourceTitle": "Manage Client Resources",
+    "clientResourceDescription": "Access Internal resources on sites",
     "resourcesSearch": "Search resources...",
     "resourceAdd": "Add Resource",
     "resourceErrorDelte": "Error deleting resource",
@@ -2184,7 +2186,7 @@
     "generatedcredentials": "Generated Credentials",
     "copyandsavethesecredentials": "Copy and save these credentials",
     "copyandsavethesecredentialsdescription": "These credentials will not be shown again after you leave this page. Save them securely now.",
-    "credentialsSaved" : "Credentials Saved",
+    "credentialsSaved": "Credentials Saved",
     "credentialsSavedDescription": "Credentials have been regenerated and saved successfully.",
     "credentialsSaveError": "Credentials Save Error",
     "credentialsSaveErrorDescription": "An error occurred while regenerating and saving the credentials.",

src/app/[orgId]/settings/resources/client/page.tsx

@@ -1,11 +1,10 @@
 import ClientResourcesTable from "@app/components/ClientResourcesTable";
-import type { InternalResourceRow } from "@app/components/ProxyResourcesTable";
+import type { InternalResourceRow } from "@app/components/ClientResourcesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { pullEnv } from "@app/lib/pullEnv";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
 import OrgProvider from "@app/providers/OrgProvider";
-import type { GetOrgResponse } from "@server/routers/org";
 import type { ListResourcesResponse } from "@server/routers/resource";
 import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
 import type { AxiosResponse } from "axios";
@@ -22,17 +21,8 @@ export default async function ClientResourcesPage(
     props: ClientResourcesPageProps
 ) {
     const params = await props.params;
-    const searchParams = await props.searchParams;
     const t = await getTranslations();
 
-    const env = pullEnv();
-
-    // Default to 'proxy' view, or use the query param if provided
-    let defaultView: "proxy" | "internal" = "proxy";
-    if (env.flags.enableClients) {
-        defaultView = searchParams.view === "internal" ? "internal" : "proxy";
-    }
-
     let resources: ListResourcesResponse["resources"] = [];
     try {
         const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
@@ -52,13 +42,7 @@ export default async function ClientResourcesPage(
 
     let org = null;
     try {
-        const getOrg = cache(async () =>
-            internal.get<AxiosResponse<GetOrgResponse>>(
-                `/org/${params.orgId}`,
-                await authCookieHeader()
-            )
-        );
-        const res = await getOrg();
+        const res = await getCachedOrg(params.orgId);
         org = res.data.data;
     } catch {
         redirect(`/${params.orgId}/settings/resources`);
@@ -90,18 +74,14 @@ export default async function ClientResourcesPage(
     return (
         <>
             <SettingsSectionTitle
-                title={t("resourceTitle")}
-                description={t("resourceDescription")}
+                title={t("clientResourceTitle")}
+                description={t("clientResourceDescription")}
             />
 
             <OrgProvider org={org}>
                 <ClientResourcesTable
-                    resources={[]}
                     internalResources={internalResourceRows}
                     orgId={params.orgId}
-                    defaultView={
-                        env.flags.enableClients ? defaultView : "proxy"
-                    }
                     defaultSort={{
                         id: "name",
                         desc: false

src/app/[orgId]/settings/resources/proxy/page.tsx

@@ -3,7 +3,6 @@ import ProxyResourcesTable from "@app/components/ProxyResourcesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { pullEnv } from "@app/lib/pullEnv";
 import OrgProvider from "@app/providers/OrgProvider";
 import type { GetOrgResponse } from "@server/routers/org";
 import type { ListResourcesResponse } from "@server/routers/resource";
@@ -23,17 +22,8 @@ export default async function ProxyResourcesPage(
     props: ProxyResourcesPageProps
 ) {
     const params = await props.params;
-    const searchParams = await props.searchParams;
     const t = await getTranslations();
 
-    const env = pullEnv();
-
-    // Default to 'proxy' view, or use the query param if provided
-    let defaultView: "proxy" | "internal" = "proxy";
-    if (env.flags.enableClients) {
-        defaultView = searchParams.view === "internal" ? "internal" : "proxy";
-    }
-
     let resources: ListResourcesResponse["resources"] = [];
     try {
         const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
@@ -103,8 +93,8 @@ export default async function ProxyResourcesPage(
     return (
         <>
             <SettingsSectionTitle
-                title={t("resourceTitle")}
-                description={t("resourceDescription")}
+                title={t("proxyResourceTitle")}
+                description={t("proxyResourceDescription")}
             />
 
             <OrgProvider org={org}>

src/lib/queries.ts

@@ -3,6 +3,8 @@ import { durationToMs } from "./durationToMs";
 import { build } from "@server/build";
 import { remote } from "./api";
 import type ResponseT from "@server/types/Response";
+import type { ListSitesResponse } from "@server/routers/site";
+import type { AxiosInstance, AxiosResponse } from "axios";
 
 export type ProductUpdate = {
     link: string | null;
@@ -65,3 +67,16 @@ export const productUpdatesQueries = {
             // because we don't need to listen for new versions there
         })
 };
+
+export const siteQueries = {
+    listPerOrg: ({ orgId, api }: { orgId: string; api: AxiosInstance }) =>
+        queryOptions({
+            queryKey: ["SITE_PER_ORG", orgId] as const,
+            queryFn: async ({ signal }) => {
+                const res = await api.get<AxiosResponse<ListSitesResponse>>(
+                    `/org/${orgId}/sites`
+                );
+                return res.data.data.sites;
+            }
+        })
+};