Merge pull request #2553 from LaurenceJJones/explore/static-org-dropdown

enhance(sidebar): make mobile org selector sticky

docker-compose.example.yml

@@ -4,6 +4,12 @@ services:
     image: fosrl/pangolin:latest
     container_name: pangolin
     restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          memory: 1g
+        reservations:
+          memory: 256m
     volumes:
       - ./config:/app/config
     healthcheck:

install/config/docker-compose.yml

@@ -4,6 +4,12 @@ services:
     image: docker.io/fosrl/pangolin:{{if .IsEnterprise}}ee-{{end}}{{.PangolinVersion}}
     container_name: pangolin
     restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          memory: 1g
+        reservations:
+          memory: 256m
     volumes:
       - ./config:/app/config
     healthcheck:

messages/en-US.json

@@ -1102,6 +1102,12 @@
     "actionGetUser": "Get User",
     "actionGetOrgUser": "Get Organization User",
     "actionListOrgDomains": "List Organization Domains",
+    "actionGetDomain": "Get Domain",
+    "actionCreateOrgDomain": "Create Domain",
+    "actionUpdateOrgDomain": "Update Domain",
+    "actionDeleteOrgDomain": "Delete Domain",
+    "actionGetDNSRecords": "Get DNS Records",
+    "actionRestartOrgDomain": "Restart Domain",
     "actionCreateSite": "Create Site",
     "actionDeleteSite": "Delete Site",
     "actionGetSite": "Get Site",

server/middlewares/integration/index.ts

@@ -14,3 +14,4 @@ export * from "./verifyApiKeyApiKeyAccess";
 export * from "./verifyApiKeyClientAccess";
 export * from "./verifyApiKeySiteResourceAccess";
 export * from "./verifyApiKeyIdpAccess";
+export * from "./verifyApiKeyDomainAccess";

server/middlewares/integration/verifyApiKeyDomainAccess.ts

@@ -0,0 +1,90 @@
+import { Request, Response, NextFunction } from "express";
+import { db, domains, orgDomains, apiKeyOrg } from "@server/db";
+import { and, eq } from "drizzle-orm";
+import createHttpError from "http-errors";
+import HttpCode from "@server/types/HttpCode";
+
+export async function verifyApiKeyDomainAccess(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const apiKey = req.apiKey;
+        const domainId =
+            req.params.domainId || req.body.domainId || req.query.domainId;
+        const orgId = req.params.orgId;
+
+        if (!apiKey) {
+            return next(
+                createHttpError(HttpCode.UNAUTHORIZED, "Key not authenticated")
+            );
+        }
+
+        if (!domainId) {
+            return next(
+                createHttpError(HttpCode.BAD_REQUEST, "Invalid domain ID")
+            );
+        }
+
+        if (apiKey.isRoot) {
+            // Root keys can access any domain in any org
+            return next();
+        }
+
+        // Verify domain exists and belongs to the organization
+        const [domain] = await db
+            .select()
+            .from(domains)
+            .innerJoin(orgDomains, eq(orgDomains.domainId, domains.domainId))
+            .where(
+                and(
+                    eq(orgDomains.domainId, domainId),
+                    eq(orgDomains.orgId, orgId)
+                )
+            )
+            .limit(1);
+
+        if (!domain) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Domain with ID ${domainId} not found in organization ${orgId}`
+                )
+            );
+        }
+
+        // Verify the API key has access to this organization
+        if (!req.apiKeyOrg) {
+            const apiKeyOrgRes = await db
+                .select()
+                .from(apiKeyOrg)
+                .where(
+                    and(
+                        eq(apiKeyOrg.apiKeyId, apiKey.apiKeyId),
+                        eq(apiKeyOrg.orgId, orgId)
+                    )
+                )
+                .limit(1);
+            req.apiKeyOrg = apiKeyOrgRes[0];
+        }
+
+        if (!req.apiKeyOrg) {
+            return next(
+                createHttpError(
+                    HttpCode.FORBIDDEN,
+                    "Key does not have access to this organization"
+                )
+            );
+        }
+
+        return next();
+    } catch (error) {
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Error verifying domain access"
+            )
+        );
+    }
+}

server/routers/client/listClients.ts

@@ -370,7 +370,7 @@ export async function listClients(
                     ? order === "asc"
                         ? asc(clients[sort_by])
                         : desc(clients[sort_by])
-                    : asc(clients.clientId)
+                    : asc(clients.name)
             );
 
         const [clientsList, totalCount] = await Promise.all([

server/routers/integration.ts

@@ -27,7 +27,8 @@ import {
     verifyApiKeyClientAccess,
     verifyApiKeySiteResourceAccess,
     verifyApiKeySetResourceClients,
-    verifyLimits
+    verifyLimits,
+    verifyApiKeyDomainAccess
 } from "@server/middlewares";
 import HttpCode from "@server/types/HttpCode";
 import { Router } from "express";
@@ -347,6 +348,56 @@ authenticated.get(
     domain.listDomains
 );
 
+authenticated.get(
+    "/org/:orgId/domain/:domainId",
+    verifyApiKeyOrgAccess,
+    verifyApiKeyDomainAccess,
+    verifyApiKeyHasAction(ActionsEnum.getDomain),
+    domain.getDomain
+);
+
+authenticated.put(
+    "/org/:orgId/domain",
+    verifyApiKeyOrgAccess,
+    verifyApiKeyHasAction(ActionsEnum.createOrgDomain),
+    logActionAudit(ActionsEnum.createOrgDomain),
+    domain.createOrgDomain
+);
+
+authenticated.patch(
+    "/org/:orgId/domain/:domainId",
+    verifyApiKeyOrgAccess,
+    verifyApiKeyDomainAccess,
+    verifyApiKeyHasAction(ActionsEnum.updateOrgDomain),
+    domain.updateOrgDomain
+);
+
+authenticated.delete(
+    "/org/:orgId/domain/:domainId",
+    verifyApiKeyOrgAccess,
+    verifyApiKeyDomainAccess,
+    verifyApiKeyHasAction(ActionsEnum.deleteOrgDomain),
+    logActionAudit(ActionsEnum.deleteOrgDomain),
+    domain.deleteAccountDomain
+);
+
+authenticated.get(
+    "/org/:orgId/domain/:domainId/dns-records",
+    verifyApiKeyOrgAccess,
+    verifyApiKeyDomainAccess,
+    verifyApiKeyHasAction(ActionsEnum.getDNSRecords),
+    domain.getDNSRecords
+);
+
+authenticated.post(
+    "/org/:orgId/domain/:domainId/restart",
+    verifyApiKeyOrgAccess,
+    verifyApiKeyDomainAccess,
+    verifyApiKeyHasAction(ActionsEnum.restartOrgDomain),
+    logActionAudit(ActionsEnum.restartOrgDomain),
+    domain.restartOrgDomain
+);
+
 authenticated.get(
     "/org/:orgId/invitations",
     verifyApiKeyOrgAccess,

server/routers/resource/listResources.ts

@@ -429,7 +429,7 @@ export async function listResources(
                         ? order === "asc"
                             ? asc(resources[sort_by])
                             : desc(resources[sort_by])
-                        : asc(resources.resourceId)
+                        : asc(resources.name)
                 ),
             countQuery
         ]);

server/routers/site/listSites.ts

@@ -289,7 +289,7 @@ export async function listSites(
                     ? order === "asc"
                         ? asc(sites[sort_by])
                         : desc(sites[sort_by])
-                    : asc(sites.siteId)
+                    : asc(sites.name)
             );
 
         const [totalCount, rows] = await Promise.all([

server/routers/siteResource/listAllSiteResourcesByOrg.ts

@@ -205,7 +205,7 @@ export async function listAllSiteResourcesByOrg(
                         ? order === "asc"
                             ? asc(siteResources[sort_by])
                             : desc(siteResources[sort_by])
-                        : asc(siteResources.siteResourceId)
+                        : asc(siteResources.name)
                 ),
             countQuery
         ]);

server/routers/siteResource/listSiteResources.ts

@@ -123,7 +123,7 @@ export async function listSiteResources(
                     ? order === "asc"
                         ? asc(siteResources[sort_by])
                         : desc(siteResources[sort_by])
-                    : asc(siteResources.siteResourceId)
+                    : asc(siteResources.name)
             )
             .limit(limit)
             .offset(offset);

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

@@ -89,7 +89,14 @@ import {
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { use, useActionState, useCallback, useEffect, useMemo, useState } from "react";
+import {
+    use,
+    useActionState,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState
+} from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -184,7 +191,8 @@ function ProxyResourceTargetsForm({
         setDockerStates((prev) => new Map(prev.set(siteId, dockerState)));
     };
 
-    const refreshContainersForSite = useCallback(async (siteId: number) => {
+    const refreshContainersForSite = useCallback(
+        async (siteId: number) => {
             const dockerManager = new DockerManager(api, siteId);
             const containers = await dockerManager.fetchContainers();
 
@@ -196,9 +204,12 @@ function ProxyResourceTargetsForm({
                 }
                 return newMap;
             });
-    }, [api]);
+        },
+        [api]
+    );
 
-    const getDockerStateForSite = useCallback((siteId: number): DockerState => {
+    const getDockerStateForSite = useCallback(
+        (siteId: number): DockerState => {
             return (
                 dockerStates.get(siteId) || {
                     isEnabled: false,
@@ -206,7 +217,9 @@ function ProxyResourceTargetsForm({
                     containers: []
                 }
             );
-    }, [dockerStates]);
+        },
+        [dockerStates]
+    );
 
     const [isAdvancedMode, setIsAdvancedMode] = useState(() => {
         if (typeof window !== "undefined") {
@@ -220,7 +233,9 @@ function ProxyResourceTargetsForm({
 
     const removeTarget = useCallback((targetId: number) => {
         setTargets((prevTargets) => {
-            const targetToRemove = prevTargets.find((target) => target.targetId === targetId);
+            const targetToRemove = prevTargets.find(
+                (target) => target.targetId === targetId
+            );
             if (targetToRemove && !targetToRemove.new) {
                 setTargetsToRemove((prev) => [...prev, targetId]);
             }
@@ -228,7 +243,8 @@ function ProxyResourceTargetsForm({
         });
     }, []);
 
-    const updateTarget = useCallback((targetId: number, data: Partial<LocalTarget>) => {
+    const updateTarget = useCallback(
+        (targetId: number, data: Partial<LocalTarget>) => {
             setTargets((prevTargets) => {
                 const site = sites.find((site) => site.siteId === data.siteId);
                 return prevTargets.map((target) =>
@@ -242,7 +258,9 @@ function ProxyResourceTargetsForm({
                         : target
                 );
             });
-    }, [sites]);
+        },
+        [sites]
+    );
 
     const openHealthCheckDialog = useCallback((target: LocalTarget) => {
         setSelectedTargetForHealthCheck(target);
@@ -250,7 +268,6 @@ function ProxyResourceTargetsForm({
     }, []);
 
     const columns = useMemo((): ColumnDef<LocalTarget>[] => {
-
         const priorityColumn: ColumnDef<LocalTarget> = {
             id: "priority",
             header: () => (
@@ -581,7 +598,17 @@ function ProxyResourceTargetsForm({
                 actionsColumn
             ];
         }
-    }, [isAdvancedMode, isHttp, sites, updateTarget, getDockerStateForSite, refreshContainersForSite, openHealthCheckDialog, removeTarget, t]);
+    }, [
+        isAdvancedMode,
+        isHttp,
+        sites,
+        updateTarget,
+        getDockerStateForSite,
+        refreshContainersForSite,
+        openHealthCheckDialog,
+        removeTarget,
+        t
+    ]);
 
     function addNewTarget() {
         const isHttp = resource.http;

src/components/CreateShareLinkForm.tsx

@@ -20,7 +20,7 @@ import {
 import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AxiosResponse } from "axios";
-import { useEffect, useState } from "react";
+import { useState, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import CopyTextBox from "@app/components/CopyTextBox";
@@ -39,7 +39,8 @@ import { formatAxiosError } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { ListResourcesResponse } from "@server/routers/resource";
+import { useQuery } from "@tanstack/react-query";
+import { orgQueries } from "@app/lib/queries";
 import {
     Popover,
     PopoverContent,
@@ -94,14 +95,22 @@ export default function CreateShareLinkForm({
     const [isOpen, setIsOpen] = useState(false);
     const t = useTranslations();
 
-    const [resources, setResources] = useState<
+    const { data: allResources = [] } = useQuery(
-        {
+        orgQueries.resources({ orgId: org?.org.orgId ?? "" })
-            resourceId: number;
+    );
-            name: string;
+
-            niceId: string;
+    const resources = useMemo(
-            resourceUrl: string;
+        () =>
-        }[]
+            allResources
-    >([]);
+                .filter((r) => r.http)
+                .map((r) => ({
+                    resourceId: r.resourceId,
+                    name: r.name,
+                    niceId: r.niceId,
+                    resourceUrl: `${r.ssl ? "https://" : "http://"}${toUnicode(r.fullDomain || "")}/`
+                })),
+        [allResources]
+    );
 
     const formSchema = z.object({
         resourceId: z.number({ message: t("shareErrorSelectResource") }),
@@ -130,47 +139,6 @@ export default function CreateShareLinkForm({
         }
     });
 
-    useEffect(() => {
-        if (!open) {
-            return;
-        }
-
-        async function fetchResources() {
-            const res = await api
-                .get<
-                    AxiosResponse<ListResourcesResponse>
-                >(`/org/${org?.org.orgId}/resources`)
-                .catch((e) => {
-                    console.error(e);
-                    toast({
-                        variant: "destructive",
-                        title: t("shareErrorFetchResource"),
-                        description: formatAxiosError(
-                            e,
-                            t("shareErrorFetchResourceDescription")
-                        )
-                    });
-                });
-
-            if (res?.status === 200) {
-                setResources(
-                    res.data.data.resources
-                        .filter((r) => {
-                            return r.http;
-                        })
-                        .map((r) => ({
-                            resourceId: r.resourceId,
-                            name: r.name,
-                            niceId: r.niceId,
-                            resourceUrl: `${r.ssl ? "https://" : "http://"}${toUnicode(r.fullDomain || "")}/`
-                        }))
-                );
-            }
-        }
-
-        fetchResources();
-    }, [open]);
-
     async function onSubmit(values: z.infer<typeof formSchema>) {
         setLoading(true);
 

src/components/InternalResourceForm.tsx

@@ -1230,8 +1230,12 @@ export function InternalResourceForm({
                                                 )}
                                             </FormLabel>
                                             <FormControl>
-                                            <StrategySelect<"site" | "remote">
+                                                <StrategySelect<
-                                                value={field.value ?? undefined}
+                                                    "site" | "remote"
+                                                >
+                                                    value={
+                                                        field.value ?? undefined
+                                                    }
                                                     options={[
                                                         {
                                                             id: "site",
@@ -1241,7 +1245,8 @@ export function InternalResourceForm({
                                                             description: t(
                                                                 "internalResourceAuthDaemonSiteDescription"
                                                             ),
-                                                        disabled: sshSectionDisabled
+                                                            disabled:
+                                                                sshSectionDisabled
                                                         },
                                                         {
                                                             id: "remote",
@@ -1251,11 +1256,13 @@ export function InternalResourceForm({
                                                             description: t(
                                                                 "internalResourceAuthDaemonRemoteDescription"
                                                             ),
-                                                        disabled: sshSectionDisabled
+                                                            disabled:
+                                                                sshSectionDisabled
                                                         }
                                                     ]}
                                                     onChange={(v) => {
-                                                    if (sshSectionDisabled) return;
+                                                        if (sshSectionDisabled)
+                                                            return;
                                                         field.onChange(v);
                                                         if (v === "site") {
                                                             form.setValue(
@@ -1289,10 +1296,17 @@ export function InternalResourceForm({
                                                         max={65535}
                                                         placeholder="22123"
                                                         {...field}
-                                                    disabled={sshSectionDisabled}
+                                                        disabled={
-                                                    value={field.value ?? ""}
+                                                            sshSectionDisabled
+                                                        }
+                                                        value={
+                                                            field.value ?? ""
+                                                        }
                                                         onChange={(e) => {
-                                                        if (sshSectionDisabled) return;
+                                                            if (
+                                                                sshSectionDisabled
+                                                            )
+                                                                return;
                                                             const v =
                                                                 e.target.value;
                                                             if (v === "") {
@@ -1301,12 +1315,12 @@ export function InternalResourceForm({
                                                                 );
                                                                 return;
                                                             }
-                                                        const num = parseInt(
+                                                            const num =
-                                                            v,
+                                                                parseInt(v, 10);
-                                                            10
-                                                        );
                                                             field.onChange(
-                                                            Number.isNaN(num)
+                                                                Number.isNaN(
+                                                                    num
+                                                                )
                                                                     ? null
                                                                     : num
                                                             );

src/components/LayoutMobileMenu.tsx

@@ -69,15 +69,16 @@ export function LayoutMobileMenu({
                                     <SheetDescription className="sr-only">
                                         {t("navbarDescription")}
                                     </SheetDescription>
-                                    <div className="flex-1 overflow-y-auto relative">
+                                    <div className="w-full border-b border-border">
-                                        <div className="px-1">
+                                        <div className="px-1 shrink-0">
                                             <OrgSelector
                                                 orgId={orgId}
                                                 orgs={orgs}
                                             />
                                         </div>
-                                        <div className="w-full border-b border-border" />
+                                    </div>
-                                        <div className="px-3 pt-3">
+                                    <div className="flex-1 overflow-y-auto relative">
+                                        <div className="px-3">
                                             {!isAdminPage &&
                                                 user.serverAdmin && (
                                                     <div className="mb-1">

src/components/PermissionsSelectBox.tsx

@@ -31,7 +31,6 @@ function getActionsCategories(root: boolean) {
             [t("actionListInvitations")]: "listInvitations",
             [t("actionRemoveUser")]: "removeUser",
             [t("actionListUsers")]: "listUsers",
-            [t("actionListOrgDomains")]: "listOrgDomains",
             [t("updateOrgUser")]: "updateOrgUser",
             [t("createOrgUser")]: "createOrgUser",
             [t("actionApplyBlueprint")]: "applyBlueprint",
@@ -39,6 +38,16 @@ function getActionsCategories(root: boolean) {
             [t("actionGetBlueprint")]: "getBlueprint"
         },
 
+        Domain: {
+            [t("actionListOrgDomains")]: "listOrgDomains",
+            [t("actionGetDomain")]: "getDomain",
+            [t("actionCreateOrgDomain")]: "createOrgDomain",
+            [t("actionUpdateOrgDomain")]: "updateOrgDomain",
+            [t("actionDeleteOrgDomain")]: "deleteOrgDomain",
+            [t("actionGetDNSRecords")]: "getDNSRecords",
+            [t("actionRestartOrgDomain")]: "restartOrgDomain"
+        },
+
         Site: {
             [t("actionCreateSite")]: "createSite",
             [t("actionDeleteSite")]: "deleteSite",

src/lib/queries.ts

@@ -4,7 +4,8 @@ import type { ListClientsResponse } from "@server/routers/client";
 import type { ListDomainsResponse } from "@server/routers/domain";
 import type {
     GetResourceWhitelistResponse,
-    ListResourceNamesResponse
+    ListResourceNamesResponse,
+    ListResourcesResponse
 } from "@server/routers/resource";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
@@ -90,23 +91,13 @@ export const productUpdatesQueries = {
         })
 };
 
-export const clientFilterSchema = z.object({
-    pageSize: z.int().prefault(1000).optional()
-});
-
 export const orgQueries = {
-    clients: ({
+    clients: ({ orgId }: { orgId: string }) =>
-        orgId,
-        filters
-    }: {
-        orgId: string;
-        filters?: z.infer<typeof clientFilterSchema>;
-    }) =>
         queryOptions({
-            queryKey: ["ORG", orgId, "CLIENTS", filters] as const,
+            queryKey: ["ORG", orgId, "CLIENTS"] as const,
             queryFn: async ({ signal, meta }) => {
                 const sp = new URLSearchParams({
-                    pageSize: (filters?.pageSize ?? 1000).toString()
+                    pageSize: "10000"
                 });
 
                 const res = await meta!.api.get<
@@ -143,9 +134,13 @@ export const orgQueries = {
         queryOptions({
             queryKey: ["ORG", orgId, "SITES"] as const,
             queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams({
+                    pageSize: "10000"
+                });
+
                 const res = await meta!.api.get<
                     AxiosResponse<ListSitesResponse>
-                >(`/org/${orgId}/sites`, { signal });
+                >(`/org/${orgId}/sites?${sp.toString()}`, { signal });
                 return res.data.data.sites;
             }
         }),
@@ -182,6 +177,22 @@ export const orgQueries = {
                 );
                 return res.data.data.idps;
             }
+        }),
+
+    resources: ({ orgId }: { orgId: string }) =>
+        queryOptions({
+            queryKey: ["ORG", orgId, "RESOURCES"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams({
+                    pageSize: "10000"
+                });
+
+                const res = await meta!.api.get<
+                    AxiosResponse<ListResourcesResponse>
+                >(`/org/${orgId}/resources?${sp.toString()}`, { signal });
+
+                return res.data.data.resources;
+            }
         })
 };