FEATURE: Add pagination to API keys page (#14777)

app/assets/javascripts/admin/addon/controllers/admin-api-keys-index.js

@@ -1,14 +1,39 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default Controller.extend({
-  actions: {
+  loading: false,
+
+  @action
   revokeKey(key) {
     key.revoke().catch(popupAjaxError);
   },
 
+  @action
   undoRevokeKey(key) {
     key.undoRevoke().catch(popupAjaxError);
   },
+
+  @action
+  loadMore() {
+    if (this.loading || this.model.loaded) {
+      return;
+    }
+
+    const limit = 50;
+
+    this.set("loading", true);
+    this.store
+      .findAll("api-key", { offset: this.model.length, limit })
+      .then((keys) => {
+        this.model.addObjects(keys);
+        if (keys.length < limit) {
+          this.model.set("loaded", true);
+        }
+      })
+      .finally(() => {
+        this.set("loading", false);
+      });
   },
 });

app/assets/javascripts/admin/addon/templates/api-keys-index.hbs

@@ -5,6 +5,7 @@
   label="admin.api.new_key"}}
 
 {{#if model}}
+  {{#load-more selector=".api-keys tr" action=(action "loadMore")}}
     <table class="api-keys grid">
       <thead>
         <th>{{i18n "admin.api.key"}}</th>
@@ -66,6 +67,9 @@
         {{/each}}
       </tbody>
     </table>
+  {{/load-more}}
+
+  {{conditional-loading-spinner condition=loading}}
 {{else}}
   <p>{{i18n "admin.api.none"}}</p>
 {{/if}}

app/controllers/admin/api_controller.rb

@@ -5,18 +5,22 @@ class Admin::ApiController < Admin::AdminController
   # If we used "api_key", then our user provider would try to use the value for authentication
 
   def index
+    offset = (params[:offset] || 0).to_i
+    limit = (params[:limit] || 50).to_i.clamp(1, 50)
+
     keys = ApiKey
       .where(hidden: false)
       .includes(:user, :api_key_scopes)
+      # Sort revoked keys by revoked_at and active keys by created_at
+      .order("revoked_at DESC NULLS FIRST, created_at DESC")
+      .offset(offset)
+      .limit(limit)
 
-    # Put active keys first
+    render_json_dump(
-    # Sort active keys by created_at, sort revoked keys by revoked_at
+      keys: serialize_data(keys, ApiKeySerializer),
-    keys = keys.order(<<~SQL)
+      offset: offset,
-      CASE WHEN revoked_at IS NULL THEN 0 ELSE 1 END,
+      limit: limit
-      COALESCE(revoked_at, created_at) DESC
+    )
-    SQL
-
-    render_serialized(keys.to_a, ApiKeySerializer, root: 'keys')
   end
 
   def show

spec/requests/admin/api_controller_spec.rb

@@ -12,6 +12,7 @@ describe Admin::ApiController do
 
   fab!(:key1, refind: false) { Fabricate(:api_key, description: "my key") }
   fab!(:key2, refind: false) { Fabricate(:api_key, user: admin) }
+  fab!(:key3, refind: false) { Fabricate(:api_key, user: admin) }
 
   context "as an admin" do
     before do
@@ -22,7 +23,21 @@ describe Admin::ApiController do
       it "succeeds" do
         get "/admin/api/keys.json"
         expect(response.status).to eq(200)
-        expect(response.parsed_body["keys"].length).to eq(2)
+        expect(response.parsed_body["keys"].length).to eq(3)
+      end
+
+      it "can paginate results" do
+        get "/admin/api/keys.json?offset=0&limit=2"
+        expect(response.status).to eq(200)
+        expect(response.parsed_body["keys"].map { |x| x["id"] }).to contain_exactly(key3.id, key2.id)
+
+        get "/admin/api/keys.json?offset=1&limit=2"
+        expect(response.status).to eq(200)
+        expect(response.parsed_body["keys"].map { |x| x["id"] }).to contain_exactly(key2.id, key1.id)
+
+        get "/admin/api/keys.json?offset=2&limit=2"
+        expect(response.status).to eq(200)
+        expect(response.parsed_body["keys"].map { |x| x["id"] }).to contain_exactly(key1.id)
       end
     end
 
@@ -246,7 +261,7 @@ describe Admin::ApiController do
       }
       expect(response.status).to eq(404)
 
-      expect(ApiKey.count).to eq(2)
+      expect(ApiKey.count).to eq(3)
     end
   end
 end