Cache admin deletion (#709)

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

app/routes/cache.admin.tsx

@@ -35,6 +35,29 @@ import {
 import { requireAdminUser } from '#app/utils/session.server.ts'
 import { type Route } from './+types/cache.admin'
 
+const deleteAllMatchingIntent = 'delete-all-matching-cache-values'
+const defaultCacheKeysLimit = 100
+const maxCacheKeysLimit = 10_000
+
+function sanitizeCacheKeysLimit(limit: number) {
+	if (!Number.isFinite(limit)) return defaultCacheKeysLimit
+	return Math.min(maxCacheKeysLimit, Math.max(1, Math.floor(limit)))
+}
+
+async function getMatchingCacheKeys({
+	query,
+	limit,
+}: {
+	query: string | null
+	limit: number
+}) {
+	const sanitizedLimit = sanitizeCacheKeysLimit(limit)
+	if (typeof query === 'string') {
+		return searchCacheKeys(query, sanitizedLimit)
+	}
+	return getAllCacheKeys(sanitizedLimit)
+}
+
 export async function loader({ request }: Route.LoaderArgs) {
 	await requireAdminUser(request)
 	const searchParams = new URL(request.url).searchParams
@@ -47,27 +70,43 @@ export async function loader({ request }: Route.LoaderArgs) {
 	const instances = await getAllInstances()
 	await ensureInstance(instance)
 
-	let cacheKeys: { sqlite: Array<string>; lru: Array<string> }
-	if (typeof query === 'string') {
-		cacheKeys = await searchCacheKeys(query, limit)
-	} else {
-		cacheKeys = await getAllCacheKeys(limit)
-	}
+	const cacheKeys = await getMatchingCacheKeys({ query, limit })
 	return json({ cacheKeys, instance, instances, currentInstanceInfo })
 }
 
 export async function action({ request }: Route.ActionArgs) {
 	await requireAdminUser(request)
+	const searchParams = new URL(request.url).searchParams
 	const formData = await request.formData()
-	const key = formData.get('cacheKey')
-	const { currentInstance } = await getInstanceInfo()
+	const { currentInstance, currentIsPrimary, primaryInstance } =
+		await getInstanceInfo()
 	const instance = formData.get('instance') ?? currentInstance
+	invariantResponse(typeof instance === 'string', 'instance must be a string')
+	await ensureInstance(instance)
+
+	const intent = formData.get('intent')
+	if (intent === deleteAllMatchingIntent) {
+		invariantResponse(
+			currentIsPrimary,
+			`Bulk delete must run on the primary instance (${primaryInstance})`,
+		)
+		const query = searchParams.get('query')
+		const limit = Number(searchParams.get('limit') ?? 100)
+		const { sqlite, lru } = await getMatchingCacheKeys({ query, limit })
+		for (const cacheKey of sqlite) {
+			await cache.delete(cacheKey)
+		}
+		for (const cacheKey of lru) {
+			lruCache.delete(cacheKey)
+		}
+		return json({ success: true })
+	}
+
+	const key = formData.get('cacheKey')
 	const type = formData.get('type')
 
 	invariantResponse(typeof key === 'string', 'cacheKey must be a string')
 	invariantResponse(typeof type === 'string', 'type must be a string')
-	invariantResponse(typeof instance === 'string', 'instance must be a string')
-	await ensureInstance(instance)
 
 	switch (type) {
 		case 'sqlite': {
@@ -93,6 +132,8 @@ export default function CacheAdminRoute({
 	const query = searchParams.get('query') ?? ''
 	const limit = searchParams.get('limit') ?? '100'
 	const instance = searchParams.get('instance') ?? data.instance
+	const matchingCacheValuesCount =
+		data.cacheKeys.sqlite.length + data.cacheKeys.lru.length
 
 	const handleFormChange = useDebounce((form: HTMLFormElement) => {
 		void submit(form)
@@ -124,7 +165,7 @@ export default function CacheAdminRoute({
 						/>
 						<div className="absolute top-0 right-2 flex h-full w-14 items-center justify-between text-lg font-medium text-slate-500">
 							<span title="Total results shown">
-								{data.cacheKeys.sqlite.length + data.cacheKeys.lru.length}
+								{matchingCacheValuesCount}
 							</span>
 						</div>
 					</div>
@@ -170,6 +211,11 @@ export default function CacheAdminRoute({
 				</div>
 			</Form>
 			<Spacer size="2xs" />
+			<DeleteAllMatchingCacheValuesButton
+				instance={instance}
+				matchingCacheValuesCount={matchingCacheValuesCount}
+			/>
+			<Spacer size="2xs" />
 			<div className="flex flex-col gap-4">
 				<H3>LRU Cache:</H3>
 				{data.cacheKeys.lru.map((key) => (
@@ -197,6 +243,38 @@ export default function CacheAdminRoute({
 	)
 }
 
+function DeleteAllMatchingCacheValuesButton({
+	instance,
+	matchingCacheValuesCount,
+}: {
+	instance: string
+	matchingCacheValuesCount: number
+}) {
+	const fetcher = useFetcher()
+	const dc = useDoubleCheck()
+	if (matchingCacheValuesCount === 0) return null
+	const isDeleting = fetcher.state !== 'idle'
+
+	return (
+		<fetcher.Form method="POST">
+			<input type="hidden" name="intent" value={deleteAllMatchingIntent} />
+			<input type="hidden" name="instance" value={instance} />
+			<Button
+				size="small"
+				variant="danger"
+				disabled={isDeleting}
+				{...dc.getButtonProps({ type: 'submit' })}
+			>
+				{isDeleting
+					? `deleting ${matchingCacheValuesCount} matching cache values...`
+					: dc.doubleCheck
+						? `you sure? delete all ${matchingCacheValuesCount} matching cache values`
+						: `delete all ${matchingCacheValuesCount} matching cache values`}
+			</Button>
+		</fetcher.Form>
+	)
+}
+
 function CacheKeyRow({
 	cacheKey,
 	instance,