From 61d5b50bf00eb7ffdae5f59289fa551e2b385f53 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 5 Jun 2024 13:24:52 +0200
Subject: [PATCH] fix: paginate listTokens page

---
 backend/windmill-api/openapi.yaml             |  2 ++
 .../src/lib/components/UserSettings.svelte    | 25 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index 019b2f67df..ee7f19cb67 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -2172,6 +2172,8 @@ paths:
           in: query
           schema:
             type: boolean
+        - $ref: "#/components/parameters/Page"
+        - $ref: "#/components/parameters/PerPage"
       responses:
         "200":
           description: truncated token
diff --git a/frontend/src/lib/components/UserSettings.svelte b/frontend/src/lib/components/UserSettings.svelte
index 1c9ff2645b..0991e82de8 100644
--- a/frontend/src/lib/components/UserSettings.svelte
+++ b/frontend/src/lib/components/UserSettings.svelte
@@ -86,8 +86,9 @@
 		displayCreateToken = false
 	}
 
+	let tokenPage = 1
 	async function listTokens(): Promise<void> {
-		tokens = await UserService.listTokens({ excludeEphemeral: true })
+		tokens = await UserService.listTokens({ excludeEphemeral: true, page: tokenPage, perPage: 100 })
 	}
 
 	async function deleteToken(tokenPrefix: string) {
@@ -343,6 +344,28 @@
 							{/if}
 						</tbody>
 					</TableCustom>
+					<div class="flex flex-row-reverse gap-2 w-full">
+						{#if tokens?.length == 100}
+							<button
+								class=" p-1 underline text-sm whitespace-nowrap text-center"
+								on:click={() => {
+									tokenPage += 1
+									listTokens()
+								}}
+								>Next
+							</button>
+						{/if}
+						{#if tokenPage > 1}
+							<button
+								class="p-1 underline text-sm whitespace-nowrap text-center"
+								on:click={() => {
+									tokenPage -= 1
+									listTokens()
+								}}
+								>Previous
+							</button>
+						{/if}
+					</div>
 				</div>
 			</div>
 		</div>