✨ approval feed

2026-02-16 01:46:38 +00:00 · 2026-02-10 03:20:49 +01:00
parent da514ef314
commit 3ba2cb19a9
5 changed files with 201 additions and 87 deletions
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -459,6 +459,8 @@
    "filterByApprovalState": "Filter By Approval State",
    "approvalListEmpty": "No approvals",
    "approvalState": "Approval State",
+    "approvalLoadMore": "Load more",
+    "loadingApprovals": "Loading Approvals",
    "approve": "Approve",
    "approved": "Approved",
    "denied": "Denied",
--- a/server/private/routers/approvals/listApprovals.ts
+++ b/server/private/routers/approvals/listApprovals.ts
@@ -30,7 +30,7 @@ import {
    currentFingerprint,
    type Approval
 } from "@server/db";
-import { eq, isNull, sql, not, and, desc } from "drizzle-orm";
+import { eq, isNull, sql, not, and, desc, gte, lte } from "drizzle-orm";
 import response from "@server/lib/response";
 import { getUserDeviceName } from "@server/db/names";

@@ -39,18 +39,26 @@ const paramsSchema = z.strictObject({
 });

 const querySchema = z.strictObject({
-    limit: z
-        .string()
+    limit: z.coerce
+        .number<string>() // for prettier formatting
+        .int()
+        .positive()
        .optional()
-        .default("1000")
-        .transform(Number)
-        .pipe(z.int().nonnegative()),
-    offset: z
-        .string()
+        .catch(20)
+        .default(20),
+    cursorPending: z.coerce // pending cursor
+        .number<string>()
+        .int()
+        .max(1) // 0 means non pending
+        .min(0) // 1 means pending
        .optional()
-        .default("0")
-        .transform(Number)
-        .pipe(z.int().nonnegative()),
+        .catch(undefined),
+    cursorTimestamp: z.coerce
+        .number<string>()
+        .int()
+        .positive()
+        .optional()
+        .catch(undefined),
    approvalState: z
        .enum(["pending", "approved", "denied", "all"])
        .optional()
@@ -63,13 +71,21 @@ const querySchema = z.strictObject({
        .pipe(z.number().int().positive().optional())
 });

-async function queryApprovals(
-    orgId: string,
-    limit: number,
-    offset: number,
-    approvalState: z.infer<typeof querySchema>["approvalState"],
-    clientId?: number
-) {
+async function queryApprovals({
+    orgId,
+    limit,
+    approvalState,
+    cursorPending,
+    cursorTimestamp,
+    clientId
+}: {
+    orgId: string;
+    limit: number;
+    approvalState: z.infer<typeof querySchema>["approvalState"];
+    cursorPending?: number;
+    cursorTimestamp?: number;
+    clientId?: number;
+}) {
    let state: Array<Approval["decision"]> = [];
    switch (approvalState) {
        case "pending":
@@ -85,6 +101,26 @@ async function queryApprovals(
            state = ["approved", "denied", "pending"];
    }

+    const conditions = [
+        eq(approvals.orgId, orgId),
+        sql`${approvals.decision} in ${state}`
+    ];
+
+    if (clientId) {
+        conditions.push(eq(approvals.clientId, clientId));
+    }
+
+    const pendingSortKey = sql`CASE ${approvals.decision} WHEN 'pending' THEN 1 ELSE 0 END`;
+
+    if (cursorPending != null && cursorTimestamp != null) {
+        // https://stackoverflow.com/a/79720298/10322846
+        // composite cursor, next data means (pending, timestamp) <= cursor
+        conditions.push(
+            lte(pendingSortKey, cursorPending),
+            lte(approvals.timestamp, cursorTimestamp)
+        );
+    }
+
    const res = await db
        .select({
            approvalId: approvals.approvalId,
@@ -107,7 +143,8 @@ async function queryApprovals(
            fingerprintArch: currentFingerprint.arch,
            fingerprintSerialNumber: currentFingerprint.serialNumber,
            fingerprintUsername: currentFingerprint.username,
-            fingerprintHostname: currentFingerprint.hostname
+            fingerprintHostname: currentFingerprint.hostname,
+            timestamp: approvals.timestamp
        })
        .from(approvals)
        .innerJoin(users, and(eq(approvals.userId, users.userId)))
@@ -120,22 +157,12 @@ async function queryApprovals(
        )
        .leftJoin(olms, eq(clients.clientId, olms.clientId))
        .leftJoin(currentFingerprint, eq(olms.olmId, currentFingerprint.olmId))
-        .where(
-            and(
-                eq(approvals.orgId, orgId),
-                sql`${approvals.decision} in ${state}`,
-                ...(clientId ? [eq(approvals.clientId, clientId)] : [])
-            )
-        )
-        .orderBy(
-            sql`CASE ${approvals.decision} WHEN 'pending' THEN 0 ELSE 1 END`,
-            desc(approvals.timestamp)
-        )
-        .limit(limit)
-        .offset(offset);
+        .where(and(...conditions))
+        .orderBy(desc(pendingSortKey), desc(approvals.timestamp))
+        .limit(limit + 1); // the `+1` is used for the cursor

    // Process results to format device names and build fingerprint objects
-    return res.map((approval) => {
+    const approvalsList = res.slice(0, limit).map((approval) => {
        const model = approval.deviceModel || null;
        const deviceName = approval.clientName
            ? getUserDeviceName(model, approval.clientName)
@@ -154,15 +181,15 @@ async function queryApprovals(

        const fingerprint = hasFingerprintData
            ? {
-                platform: approval.fingerprintPlatform || null,
-                osVersion: approval.fingerprintOsVersion || null,
-                kernelVersion: approval.fingerprintKernelVersion || null,
-                arch: approval.fingerprintArch || null,
-                deviceModel: approval.deviceModel || null,
-                serialNumber: approval.fingerprintSerialNumber || null,
-                username: approval.fingerprintUsername || null,
-                hostname: approval.fingerprintHostname || null
-            }
+                  platform: approval.fingerprintPlatform ?? null,
+                  osVersion: approval.fingerprintOsVersion ?? null,
+                  kernelVersion: approval.fingerprintKernelVersion ?? null,
+                  arch: approval.fingerprintArch ?? null,
+                  deviceModel: approval.deviceModel ?? null,
+                  serialNumber: approval.fingerprintSerialNumber ?? null,
+                  username: approval.fingerprintUsername ?? null,
+                  hostname: approval.fingerprintHostname ?? null
+              }
            : null;

        const {
@@ -185,11 +212,30 @@ async function queryApprovals(
            niceId: approval.niceId || null
        };
    });
+    let nextCursorPending: number | null = null;
+    let nextCursorTimestamp: number | null = null;
+    if (res.length > limit) {
+        const lastItem = res[limit];
+        nextCursorPending = lastItem.decision === "pending" ? 1 : 0;
+        nextCursorTimestamp = lastItem.timestamp;
+    }
+    return {
+        approvalsList,
+        nextCursorPending,
+        nextCursorTimestamp
+    };
 }

 export type ListApprovalsResponse = {
-    approvals: NonNullable<Awaited<ReturnType<typeof queryApprovals>>>;
-    pagination: { total: number; limit: number; offset: number };
+    approvals: NonNullable<
+        Awaited<ReturnType<typeof queryApprovals>>
+    >["approvalsList"];
+    pagination: {
+        total: number;
+        limit: number;
+        cursorPending: number | null;
+        cursorTimestamp: number | null;
+    };
 };

 export async function listApprovals(
@@ -217,7 +263,13 @@ export async function listApprovals(
                )
            );
        }
-        const { limit, offset, approvalState, clientId } = parsedQuery.data;
+        const {
+            limit,
+            cursorPending,
+            cursorTimestamp,
+            approvalState,
+            clientId
+        } = parsedQuery.data;

        const { orgId } = parsedParams.data;

@@ -234,13 +286,15 @@ export async function listApprovals(
            }
        }

-        const approvalsList = await queryApprovals(
-            orgId.toString(),
-            limit,
-            offset,
-            approvalState,
-            clientId
-        );
+        const { approvalsList, nextCursorPending, nextCursorTimestamp } =
+            await queryApprovals({
+                orgId: orgId.toString(),
+                limit,
+                cursorPending,
+                cursorTimestamp,
+                approvalState,
+                clientId
+            });

        const [{ count }] = await db
            .select({ count: sql<number>`count(*)` })
@@ -252,7 +306,8 @@ export async function listApprovals(
                pagination: {
                    total: count,
                    limit,
-                    offset
+                    cursorPending: nextCursorPending,
+                    cursorTimestamp: nextCursorTimestamp
                }
            },
            success: true,
--- a/server/routers/client/listUserDevices.ts
+++ b/server/routers/client/listUserDevices.ts
@@ -6,7 +6,6 @@ import {
    olms,
    orgs,
    roleClients,
-    sites,
    userClients,
    users
 } from "@server/db";
@@ -25,7 +24,6 @@ import {
    inArray,
    isNotNull,
    isNull,
-    not,
    or,
    sql,
    type SQL
--- a/src/components/ApprovalFeed.tsx
+++ b/src/components/ApprovalFeed.tsx
@@ -2,23 +2,25 @@
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { cn } from "@app/lib/cn";
 import { formatFingerprintInfo } from "@app/lib/formatDeviceFingerprint";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import {
    approvalFiltersSchema,
    approvalQueries,
    type ApprovalItem
 } from "@app/lib/queries";
-import { useQuery } from "@tanstack/react-query";
-import { ArrowRight, Ban, Check, LaptopMinimal, RefreshCw } from "lucide-react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Ban, Check, Loader, RefreshCw } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Fragment, useActionState } from "react";
+import { ApprovalsEmptyState } from "./ApprovalsEmptyState";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Card, CardHeader } from "./ui/card";
+import { InfoPopup } from "./ui/info-popup";
 import { Label } from "./ui/label";
 import {
    Select,
@@ -28,8 +30,6 @@ import {
    SelectValue
 } from "./ui/select";
 import { Separator } from "./ui/separator";
-import { InfoPopup } from "./ui/info-popup";
-import { ApprovalsEmptyState } from "./ApprovalsEmptyState";

 export type ApprovalFeedProps = {
    orgId: string;
@@ -50,11 +50,17 @@ export function ApprovalFeed({
        Object.fromEntries(searchParams.entries())
    );

-    const { data, isFetching, refetch } = useQuery(
-        approvalQueries.listApprovals(orgId, filters)
-    );
+    const {
+        data,
+        isFetching,
+        isLoading,
+        refetch,
+        hasNextPage,
+        fetchNextPage,
+        isFetchingNextPage
+    } = useInfiniteQuery(approvalQueries.listApprovals(orgId, filters));

-    const approvals = data?.approvals ?? [];
+    const approvals = data?.pages.flatMap((data) => data.approvals) ?? [];

    // Show empty state if no approvals are enabled for any role
    if (!hasApprovalsEnabled) {
@@ -110,13 +116,13 @@ export function ApprovalFeed({
                        onClick={() => {
                            refetch();
                        }}
-                        disabled={isFetching}
+                        disabled={isFetching || isLoading}
                        className="lg:static gap-2"
                    >
                        <RefreshCw
                            className={cn(
                                "size-4",
-                                isFetching && "animate-spin"
+                                (isFetching || isLoading) && "animate-spin"
                            )}
                        />
                        {t("refresh")}
@@ -140,13 +146,30 @@ export function ApprovalFeed({
                        ))}

                        {approvals.length === 0 && (
-                            <li className="flex justify-center items-center p-4 text-muted-foreground">
-                                {t("approvalListEmpty")}
+                            <li className="flex justify-center items-center p-4 text-muted-foreground gap-2">
+                                {isLoading
+                                    ? t("loadingApprovals")
+                                    : t("approvalListEmpty")}
+
+                                {isLoading && (
+                                    <Loader className="size-4 flex-none animate-spin" />
+                                )}
                            </li>
                        )}
                    </ul>
                </CardHeader>
            </Card>
+            {hasNextPage && (
+                <Button
+                    variant="secondary"
+                    className="self-center"
+                    size="lg"
+                    loading={isFetchingNextPage}
+                    onClick={() => fetchNextPage()}
+                >
+                    {isFetchingNextPage ? t("loading") : t("approvalLoadMore")}
+                </Button>
+            )}
        </div>
    );
 }
@@ -209,19 +232,19 @@ function ApprovalRequest({ approval, orgId, onSuccess }: ApprovalRequestProps) {
                    &nbsp;
                    {approval.type === "user_device" && (
                        <span className="inline-flex items-center gap-1">
-                                    {approval.deviceName ? (
-                                        <>
-                                            {t("requestingNewDeviceApproval")}:{" "}
-                                            {approval.niceId ? (
-                                                <Link
-                                                    href={`/${orgId}/settings/clients/user/${approval.niceId}/general`}
-                                                    className="text-primary hover:underline cursor-pointer"
-                                                >
-                                                    {approval.deviceName}
-                                                </Link>
-                                            ) : (
-                                                <span>{approval.deviceName}</span>
-                                            )}
+                            {approval.deviceName ? (
+                                <>
+                                    {t("requestingNewDeviceApproval")}:{" "}
+                                    {approval.niceId ? (
+                                        <Link
+                                            href={`/${orgId}/settings/clients/user/${approval.niceId}/general`}
+                                            className="text-primary hover:underline cursor-pointer"
+                                        >
+                                            {approval.deviceName}
+                                        </Link>
+                                    ) : (
+                                        <span>{approval.deviceName}</span>
+                                    )}
                                    {approval.fingerprint && (
                                        <InfoPopup>
                                            <div className="space-y-1 text-sm">
@@ -229,7 +252,10 @@ function ApprovalRequest({ approval, orgId, onSuccess }: ApprovalRequestProps) {
                                                    {t("deviceInformation")}
                                                </div>
                                                <div className="text-muted-foreground whitespace-pre-line">
-                                                    {formatFingerprintInfo(approval.fingerprint, t)}
+                                                    {formatFingerprintInfo(
+                                                        approval.fingerprint,
+                                                        t
+                                                    )}
                                                </div>
                                            </div>
                                        </InfoPopup>
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -16,11 +16,16 @@ import type {
 import type { ListTargetsResponse } from "@server/routers/target";
 import type { ListUsersResponse } from "@server/routers/user";
 import type ResponseT from "@server/types/Response";
-import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+import {
+    infiniteQueryOptions,
+    keepPreviousData,
+    queryOptions
+} from "@tanstack/react-query";
 import type { AxiosResponse } from "axios";
 import z from "zod";
 import { remote } from "./api";
 import { durationToMs } from "./durationToMs";
+import { wait } from "./wait";

 export type ProductUpdate = {
    link: string | null;
@@ -356,22 +361,50 @@ export const approvalQueries = {
        orgId: string,
        filters: z.infer<typeof approvalFiltersSchema>
    ) =>
-        queryOptions({
+        infiniteQueryOptions({
            queryKey: ["APPROVALS", orgId, filters] as const,
-            queryFn: async ({ signal, meta }) => {
+            queryFn: async ({ signal, pageParam, meta }) => {
                const sp = new URLSearchParams();

                if (filters.approvalState) {
                    sp.set("approvalState", filters.approvalState);
                }
+                if (pageParam) {
+                    sp.set("cursorPending", pageParam.cursorPending.toString());
+                    sp.set(
+                        "cursorTimestamp",
+                        pageParam.cursorTimestamp.toString()
+                    );
+                }

                const res = await meta!.api.get<
-                    AxiosResponse<{ approvals: ApprovalItem[] }>
+                    AxiosResponse<{
+                        approvals: ApprovalItem[];
+                        pagination: {
+                            total: number;
+                            limit: number;
+                            cursorPending: number | null;
+                            cursorTimestamp: number | null;
+                        };
+                    }>
                >(`/org/${orgId}/approvals?${sp.toString()}`, {
                    signal
                });
                return res.data.data;
-            }
+            },
+            initialPageParam: null as {
+                cursorPending: number;
+                cursorTimestamp: number;
+            } | null,
+            placeholderData: keepPreviousData,
+            getNextPageParam: ({ pagination }) =>
+                pagination.cursorPending != null &&
+                pagination.cursorTimestamp != null
+                    ? {
+                          cursorPending: pagination.cursorPending,
+                          cursorTimestamp: pagination.cursorTimestamp
+                      }
+                    : null
        }),
    pendingCount: (orgId: string) =>
        queryOptions({