feat: support tier and env deep links in rate limits table and add Talos RL Limits (#2624)

Author: tricky42

docs/guides/rate-limits-project.mdx

@@ -42,7 +42,8 @@ You will see two rate limits for each bucket:
 In the **Project rate limit table** below:
 
 1. Select your subscription tier from the **Tier** dropdown. Options are Developer, Production, Growth, or Enterprise.
-2. Select your project environment from the **Environment** dropdown. Options are Production, Staging, or Development.
+2. Select your project environment from the **Environment** dropdown. Options are Production, Staging, or Development. The
+   Developer tier only supports Development environments.
 3. To search by API path, enter the API path into the **Search API path** box. The endpoint appears highlighted. Look to see which
    bucket it belongs to for its rate limit.
 

src/components/RateLimitsTable/index.tsx

@@ -2,14 +2,40 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import useBaseUrl from "@docusaurus/useBaseUrl"
-import React, { useMemo, useState, useEffect } from "react"
+import React, { useMemo, useRef, useState, useEffect } from "react"
 import type { Env, RateLimitsData, Tier } from "./types"
 
 const TIERS: Tier[] = ["Developer", "Production", "Growth", "Enterprise"]
 const ENVS: Env[] = ["Development", "Staging", "Production"]
 const SEARCH_DEBOUNCE_MS = 250
 const HIDDEN_METHODS = ["OPTIONS", "HEAD"]
 
+function matchParam<T extends string>(
+  value: string | null,
+  allowed: readonly T[],
+): T | undefined {
+  if (!value) return undefined
+  return allowed.find((a) => a.toLowerCase() === value.toLowerCase())
+}
+
+function allowedEnvsForTier(tier: Tier): Env[] {
+  // The Developer tier only has Development projects.
+  return tier === "Developer" ? ["Development"] : ENVS
+}
+
+function coerceEnv(tier: Tier, env: Env): Env {
+  const allowed = allowedEnvsForTier(tier)
+  return allowed.includes(env) ? env : allowed[0]
+}
+
+function writeUrlParams(params: { tier?: Tier; env?: Env }): void {
+  if (typeof window === "undefined") return
+  const url = new URL(window.location.href)
+  if (params.tier) url.searchParams.set("tier", params.tier)
+  if (params.env) url.searchParams.set("env", params.env)
+  window.history.replaceState(window.history.state, "", url.toString())
+}
+
 function useRateLimitsData(): {
   data: RateLimitsData | null
   loading: boolean
@@ -50,9 +76,15 @@ export default function RateLimitsTable({
 }: RateLimitsTableProps): React.ReactElement {
   const { data, loading, error } = useRateLimitsData()
   const [tier, setTier] = useState<Tier>(initialTier)
-  const [env, setEnv] = useState<Env>(initialEnv)
+  const [env, setEnv] = useState<Env>(() => coerceEnv(initialTier, initialEnv))
   const [pathSearch, setPathSearch] = useState("")
   const [pathSearchDebounced, setPathSearchDebounced] = useState("")
+  // True once the tier/env selection came from the URL or the user; props
+  // must not override it anymore.
+  const tierPinned = useRef(false)
+  const envPinned = useRef(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const scrollPending = useRef(false)
 
   useEffect(() => {
     const t = setTimeout(
@@ -63,10 +95,48 @@ export default function RateLimitsTable({
   }, [pathSearch])
 
   React.useEffect(() => {
-    setTier(initialTier)
-    setEnv(initialEnv)
+    if (!tierPinned.current) setTier(initialTier)
+    if (!envPinned.current)
+      setEnv(coerceEnv(tierPinned.current ? tier : initialTier, initialEnv))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialTier, initialEnv])
 
+  // Apply ?tier= and ?env= after mount; window is unavailable during SSR and
+  // the first client render must match the pre-rendered HTML.
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const tierParam = matchParam(params.get("tier"), TIERS)
+    const envParam = matchParam(params.get("env"), ENVS)
+    if (tierParam) {
+      tierPinned.current = true
+      setTier(tierParam)
+    }
+    const nextEnv = coerceEnv(tierParam ?? initialTier, envParam ?? env)
+    if (envParam || nextEnv !== env) {
+      envPinned.current = true
+      setEnv(nextEnv)
+    }
+    // Deep links should land on the table; an explicit hash wins.
+    if ((tierParam || envParam) && !window.location.hash) {
+      scrollPending.current = true
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Scroll once the table has rendered, so the target has its final position.
+  useEffect(() => {
+    if (!loading && scrollPending.current) {
+      scrollPending.current = false
+      const reducedMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches
+      containerRef.current?.scrollIntoView({
+        behavior: reducedMotion ? "auto" : "smooth",
+        block: "start",
+      })
+    }
+  }, [loading])
+
   const filteredThresholds = useMemo(() => {
     if (!data) return []
     return data.thresholds.filter((t) => t.tier === tier && t.env === env)
@@ -134,13 +204,31 @@ export default function RateLimitsTable({
   }
 
   return (
-    <div className="rate-limits-table">
+    <div
+      ref={containerRef}
+      className="rate-limits-table"
+      // Keep the sticky navbar and the table heading above visible when
+      // deep links scroll to the table.
+      style={{ scrollMarginTop: "calc(var(--ifm-navbar-height, 60px) + 4rem)" }}
+    >
       <div className="flex flex-wrap gap-4 mb-6">
         <label className="flex items-center gap-2">
           <span>Tier:</span>
           <select
             value={tier}
-            onChange={(e) => setTier(e.target.value as Tier)}
+            onChange={(e) => {
+              const next = e.target.value as Tier
+              tierPinned.current = true
+              setTier(next)
+              const nextEnv = coerceEnv(next, env)
+              if (nextEnv !== env) {
+                envPinned.current = true
+                setEnv(nextEnv)
+                writeUrlParams({ tier: next, env: nextEnv })
+              } else {
+                writeUrlParams({ tier: next })
+              }
+            }}
             aria-label="Subscription tier"
             className="rounded border px-2 py-1 bg-[var(--ifm-background-surface-color)] text-[var(--ifm-font-color-base)] border-[var(--ifm-color-emphasis-300)]"
           >
@@ -155,11 +243,16 @@ export default function RateLimitsTable({
           <span>Environment:</span>
           <select
             value={env}
-            onChange={(e) => setEnv(e.target.value as Env)}
+            onChange={(e) => {
+              const next = e.target.value as Env
+              envPinned.current = true
+              setEnv(next)
+              writeUrlParams({ env: next })
+            }}
             aria-label="Project environment"
             className="rounded border px-2 py-1 bg-[var(--ifm-background-surface-color)] text-[var(--ifm-font-color-base)] border-[var(--ifm-color-emphasis-300)]"
           >
-            {ENVS.map((e) => (
+            {allowedEnvsForTier(tier).map((e) => (
               <option key={e} value={e}>
                 {e}
               </option>

src/lib/rate-limits/csv-provider.ts

@@ -107,6 +107,11 @@ export function createCsvProvider(
           }
         })
       result = dedupeThresholds(result)
+      // The Developer tier only has Development projects; the CSV export
+      // still contains the other combinations, so drop them here.
+      result = result.filter(
+        (r) => r.tier !== "Developer" || r.env === "Development",
+      )
       if (options?.tier) result = result.filter((r) => r.tier === options.tier)
       if (options?.env) result = result.filter((r) => r.env === options.env)
       if (options?.bucket)

src/lib/rate-limits/data/bucket-to-endpoints.csv

@@ -216,3 +216,20 @@ POST,/saml/api/oauth/authorize,polis-public-medium
 GET,/saml/api/oauth/oidc,polis-public-medium
 POST,/saml/api/oauth/saml,polis-public-medium
 PATCH,/api/v1/dsync/{directoryId},polis-public-medium
+POST,/v2alpha1/admin/issuedApiKeys,talos-admin-low
+PATCH,/v2alpha1/admin/issuedApiKeys/{name},talos-admin-low
+POST,/v2alpha1/admin/issuedApiKeys/{name}:rotate,talos-admin-low
+POST,/v2alpha1/admin/importedApiKeys,talos-admin-low
+POST,/v2alpha1/admin/importedApiKeys:batchImport,talos-admin-low
+PATCH,/v2alpha1/admin/importedApiKeys/{name},talos-admin-low
+DELETE,/v2alpha1/admin/importedApiKeys/{name},talos-admin-low
+POST,/v2alpha1/admin/apiKeys/{name}:revoke,talos-admin-low
+POST,/v2alpha1/admin/apiKeys:derive,talos-admin-medium
+GET,/v2alpha1/admin/issuedApiKeys,talos-admin-medium
+GET,/v2alpha1/admin/issuedApiKeys/{name},talos-admin-medium
+GET,/v2alpha1/admin/importedApiKeys,talos-admin-medium
+GET,/v2alpha1/admin/importedApiKeys/{name},talos-admin-medium
+POST,/v2alpha1/admin/apiKeys:verify,talos-admin-high
+POST,/v2alpha1/admin/apiKeys:batchVerify,talos-admin-high
+POST,/v2alpha1/apiKeys:selfRevoke,talos-public-low
+GET,/v2alpha1/derivedKeys/jwks.json,talos-public-high

src/lib/rate-limits/data/bucket-to-threshold.csv

@@ -203,3 +203,63 @@ polis-public-medium,Growth,stage,40,5
 polis-public-medium,Production,dev,40,5
 polis-public-medium,Production,prod,60,5
 polis-public-medium,Production,stage,40,5
+talos-admin-high,Develop,dev,80,5
+talos-admin-high,Develop,prod,80,5
+talos-admin-high,Develop,stage,80,5
+talos-admin-high,Enterprise,dev,175,8
+talos-admin-high,Enterprise,prod,2500,101
+talos-admin-high,Enterprise,stage,175,8
+talos-admin-high,Growth,dev,175,8
+talos-admin-high,Growth,prod,1000,41
+talos-admin-high,Growth,stage,175,8
+talos-admin-high,Production,dev,175,8
+talos-admin-high,Production,prod,250,11
+talos-admin-high,Production,stage,175,8
+talos-admin-low,Develop,dev,15,5
+talos-admin-low,Develop,prod,15,5
+talos-admin-low,Develop,stage,15,5
+talos-admin-low,Enterprise,dev,30,5
+talos-admin-low,Enterprise,prod,200,9
+talos-admin-low,Enterprise,stage,30,5
+talos-admin-low,Growth,dev,30,5
+talos-admin-low,Growth,prod,100,5
+talos-admin-low,Growth,stage,30,5
+talos-admin-low,Production,dev,30,5
+talos-admin-low,Production,prod,35,5
+talos-admin-low,Production,stage,30,5
+talos-admin-medium,Develop,dev,30,5
+talos-admin-medium,Develop,prod,30,5
+talos-admin-medium,Develop,stage,30,5
+talos-admin-medium,Enterprise,dev,60,5
+talos-admin-medium,Enterprise,prod,500,21
+talos-admin-medium,Enterprise,stage,60,5
+talos-admin-medium,Growth,dev,60,5
+talos-admin-medium,Growth,prod,250,11
+talos-admin-medium,Growth,stage,60,5
+talos-admin-medium,Production,dev,60,5
+talos-admin-medium,Production,prod,90,5
+talos-admin-medium,Production,stage,60,5
+talos-public-high,Develop,dev,60,5
+talos-public-high,Develop,prod,60,5
+talos-public-high,Develop,stage,60,5
+talos-public-high,Enterprise,dev,125,6
+talos-public-high,Enterprise,prod,800,33
+talos-public-high,Enterprise,stage,125,6
+talos-public-high,Growth,dev,125,6
+talos-public-high,Growth,prod,400,17
+talos-public-high,Growth,stage,125,6
+talos-public-high,Production,dev,125,6
+talos-public-high,Production,prod,200,9
+talos-public-high,Production,stage,125,6
+talos-public-low,Develop,dev,15,5
+talos-public-low,Develop,prod,15,5
+talos-public-low,Develop,stage,15,5
+talos-public-low,Enterprise,dev,30,5
+talos-public-low,Enterprise,prod,200,9
+talos-public-low,Enterprise,stage,30,5
+talos-public-low,Growth,dev,30,5
+talos-public-low,Growth,prod,100,5
+talos-public-low,Growth,stage,30,5
+talos-public-low,Production,dev,30,5
+talos-public-low,Production,prod,45,5
+talos-public-low,Production,stage,30,5