refactor(webapp): generalize admin rate-limit section for reuse

Author: isshaddad

apps/webapp/app/components/admin/backOffice/ApiRateLimitSection.server.ts

@@ -0,0 +1,55 @@
+import { prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { logger } from "~/services/logger.server";
+import { type Duration } from "~/services/rateLimiter.server";
+import { API_RATE_LIMIT_INTENT } from "./ApiRateLimitSection";
+import {
+  handleRateLimitAction,
+  resolveEffectiveRateLimit,
+  type RateLimitActionResult,
+  type RateLimitDomain,
+} from "./RateLimitSection.server";
+import type { EffectiveRateLimit } from "./RateLimitSection";
+
+export const apiRateLimitDomain: RateLimitDomain = {
+  intent: API_RATE_LIMIT_INTENT,
+  systemDefault: () => ({
+    type: "tokenBucket",
+    refillRate: env.API_RATE_LIMIT_REFILL_RATE,
+    interval: env.API_RATE_LIMIT_REFILL_INTERVAL as Duration,
+    maxTokens: env.API_RATE_LIMIT_MAX,
+  }),
+  apply: async (orgId, next, adminUserId) => {
+    const existing = await prisma.organization.findFirst({
+      where: { id: orgId },
+      select: { apiRateLimiterConfig: true },
+    });
+    if (!existing) {
+      throw new Response(null, { status: 404 });
+    }
+    await prisma.organization.update({
+      where: { id: orgId },
+      data: { apiRateLimiterConfig: next as any },
+    });
+    logger.info("admin.backOffice.apiRateLimit", {
+      adminUserId,
+      orgId,
+      previous: existing.apiRateLimiterConfig,
+      next,
+    });
+  },
+};
+
+export function resolveEffectiveApiRateLimit(
+  override: unknown
+): EffectiveRateLimit {
+  return resolveEffectiveRateLimit(override, apiRateLimitDomain);
+}
+
+export function handleApiRateLimitAction(
+  formData: FormData,
+  orgId: string,
+  adminUserId: string
+): Promise<RateLimitActionResult> {
+  return handleRateLimitAction(formData, orgId, adminUserId, apiRateLimitDomain);
+}

apps/webapp/app/components/admin/backOffice/ApiRateLimitSection.tsx

@@ -0,0 +1,26 @@
+import {
+  RateLimitSection,
+  type EffectiveRateLimit,
+} from "./RateLimitSection";
+
+export const API_RATE_LIMIT_INTENT = "set-rate-limit";
+export const API_RATE_LIMIT_SAVED_VALUE = "rate-limit";
+
+type FieldErrors = Record<string, string[] | undefined> | null;
+
+type Props = {
+  effective: EffectiveRateLimit;
+  errors: FieldErrors;
+  savedJustNow: boolean;
+  isSubmitting: boolean;
+};
+
+export function ApiRateLimitSection(props: Props) {
+  return (
+    <RateLimitSection
+      title="API rate limit"
+      intent={API_RATE_LIMIT_INTENT}
+      {...props}
+    />
+  );
+}

apps/webapp/app/components/admin/backOffice/RateLimitSection.server.ts

@@ -1,76 +1,66 @@
 import { z } from "zod";
-import { prisma } from "~/db.server";
-import { env } from "~/env.server";
 import {
   RateLimitTokenBucketConfig,
   RateLimiterConfig,
 } from "~/services/authorizationRateLimitMiddleware.server";
-import { logger } from "~/services/logger.server";
-import { type Duration } from "~/services/rateLimiter.server";
 import {
   parseDurationToMs,
-  RATE_LIMIT_INTENT,
   type EffectiveRateLimit,
 } from "./RateLimitSection";
 
-function systemDefaultRateLimit() {
-  return {
-    type: "tokenBucket" as const,
-    refillRate: env.API_RATE_LIMIT_REFILL_RATE,
-    interval: env.API_RATE_LIMIT_REFILL_INTERVAL as Duration,
-    maxTokens: env.API_RATE_LIMIT_MAX,
-  };
-}
+export type RateLimitDomain = {
+  intent: string;
+  systemDefault: () => RateLimiterConfig;
+  apply: (
+    orgId: string,
+    next: RateLimitTokenBucketConfig,
+    adminUserId: string
+  ) => Promise<void>;
+};
 
 export function resolveEffectiveRateLimit(
-  override: unknown
+  override: unknown,
+  domain: RateLimitDomain
 ): EffectiveRateLimit {
   if (override == null) {
-    return { source: "default", config: systemDefaultRateLimit() };
+    return { source: "default", config: domain.systemDefault() };
   }
   const parsed = RateLimiterConfig.safeParse(override);
   if (parsed.success) {
     return { source: "override", config: parsed.data };
   }
   // Column holds malformed JSON — fall back silently. Admin must investigate
   // at the DB level; this UI can't recover it.
-  return { source: "default", config: systemDefaultRateLimit() };
+  return { source: "default", config: domain.systemDefault() };
 }
 
-const SetRateLimitSchema = z.object({
-  intent: z.literal(RATE_LIMIT_INTENT),
-  refillRate: z.coerce.number().int().min(1),
-  interval: z
-    .string()
-    .trim()
-    .refine((v) => parseDurationToMs(v) > 0, {
-      message: "Must be a duration like 10s, 1m, 500ms.",
-    }),
-  maxTokens: z.coerce.number().int().min(1),
-});
-
 export type RateLimitActionResult =
   | { ok: true }
   | { ok: false; errors: Record<string, string[] | undefined> };
 
 export async function handleRateLimitAction(
   formData: FormData,
   orgId: string,
-  adminUserId: string
+  adminUserId: string,
+  domain: RateLimitDomain
 ): Promise<RateLimitActionResult> {
-  const submission = SetRateLimitSchema.safeParse(Object.fromEntries(formData));
+  const schema = z.object({
+    intent: z.literal(domain.intent),
+    refillRate: z.coerce.number().int().min(1),
+    interval: z
+      .string()
+      .trim()
+      .refine((v) => parseDurationToMs(v) > 0, {
+        message: "Must be a duration like 10s, 1m, 500ms.",
+      }),
+    maxTokens: z.coerce.number().int().min(1),
+  });
+
+  const submission = schema.safeParse(Object.fromEntries(formData));
   if (!submission.success) {
     return { ok: false, errors: submission.error.flatten().fieldErrors };
   }
 
-  const existing = await prisma.organization.findFirst({
-    where: { id: orgId },
-    select: { apiRateLimiterConfig: true },
-  });
-  if (!existing) {
-    throw new Response(null, { status: 404 });
-  }
-
   const built = RateLimitTokenBucketConfig.safeParse({
     type: "tokenBucket",
     refillRate: submission.data.refillRate,
@@ -81,17 +71,6 @@ export async function handleRateLimitAction(
     return { ok: false, errors: built.error.flatten().fieldErrors };
   }
 
-  await prisma.organization.update({
-    where: { id: orgId },
-    data: { apiRateLimiterConfig: built.data as any },
-  });
-
-  logger.info("admin.backOffice.rateLimit", {
-    adminUserId,
-    orgId,
-    previous: existing.apiRateLimiterConfig,
-    next: built.data,
-  });
-
+  await domain.apply(orgId, built.data, adminUserId);
   return { ok: true };
 }

apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx

@@ -8,9 +8,6 @@ import { Label } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
 
-export const RATE_LIMIT_INTENT = "set-rate-limit";
-export const RATE_LIMIT_SAVED_VALUE = "rate-limit";
-
 // Local shape mirrors the server-side discriminated union just enough for this
 // view. Decoupled from the .server module so the component stays client-safe.
 export type RateLimitConfig =
@@ -34,13 +31,17 @@ export type EffectiveRateLimit = {
 type FieldErrors = Record<string, string[] | undefined> | null;
 
 type Props = {
+  title: string;
+  intent: string;
   effective: EffectiveRateLimit;
   errors: FieldErrors;
   savedJustNow: boolean;
   isSubmitting: boolean;
 };
 
 export function RateLimitSection({
+  title,
+  intent,
   effective,
   errors,
   savedJustNow,
@@ -96,7 +97,7 @@ export function RateLimitSection({
   return (
     <section className="flex flex-col gap-3 rounded-md border border-charcoal-700 bg-charcoal-800 p-4">
       <div className="flex items-center justify-between">
-        <Header2>API rate limit</Header2>
+        <Header2>{title}</Header2>
         {!isEditing && (
           <Button
             variant="tertiary/small"
@@ -175,7 +176,7 @@ export function RateLimitSection({
         </>
       ) : (
         <Form method="post" className="flex flex-col gap-3 pt-2">
-          <input type="hidden" name="intent" value={RATE_LIMIT_INTENT} />
+          <input type="hidden" name="intent" value={intent} />
 
           <div className="flex flex-col gap-1">
             <Label>Refill rate (tokens per interval)</Label>