Add pagination to namespace list view

changelog/13195.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added client side paging for namespace list view
+```

ui/app/adapters/namespace.js

@@ -31,4 +31,9 @@ export default ApplicationAdapter.extend({
     }
     return this._super(...arguments);
   },
+  query() {
+    return this.ajax(`/${this.urlPrefix()}/namespaces?list=true`).then(resp => {
+      return resp;
+    });
+  },
 });

ui/app/controllers/vault/cluster/access/namespaces/index.js

@@ -9,6 +9,7 @@ export default Controller.extend({
     refreshNamespaceList() {
       // fetch new namespaces for the namespace picker
       this.namespaceService.findNamespacesForUser.perform();
+      this.send('reload');
     },
   },
 });

ui/app/routes/vault/cluster/access/namespaces/index.js

@@ -3,21 +3,74 @@ import Route from '@ember/routing/route';
 import UnloadModel from 'vault/mixins/unload-model-route';
 
 export default Route.extend(UnloadModel, {
+  queryParams: {
+    page: {
+      refreshModel: true,
+    },
+  },
   version: service(),
   beforeModel() {
     this.store.unloadAll('namespace');
     return this.version.fetchFeatures().then(() => {
       return this._super(...arguments);
     });
   },
-  model() {
-    return this.version.hasNamespaces
-      ? this.store.findAll('namespace').catch(e => {
-          if (e.httpStatus === 404) {
+
+  model(params) {
+    if (this.version.hasNamespaces) {
+      return this.store
+        .lazyPaginatedQuery('namespace', {
+          responsePath: 'data.keys',
+          page: Number(params?.page) || 1,
+        })
+        .then(model => {
+          return model;
+        })
+        .catch(err => {
+          if (err.httpStatus === 404) {
             return [];
+          } else {
+            throw err;
           }
-          throw e;
-        })
-      : null;
+        });
+    }
+    return null;
+  },
+
+  setupController(controller, model) {
+    const has404 = this.has404;
+    controller.set('hasModel', true);
+    controller.setProperties({
+      model: model,
+      has404,
+    });
+    if (!has404) {
+      controller.setProperties({
+        page: Number(model?.meta?.currentPage) || 1,
+      });
+    }
+  },
+  actions: {
+    error(error, transition) {
+      /* eslint-disable-next-line ember/no-controller-access-in-routes */
+      const hasModel = this.controllerFor(this.routeName).get('hasModel');
+      if (hasModel && error.httpStatus === 404) {
+        this.set('has404', true);
+        transition.abort();
+      } else {
+        return true;
+      }
+    },
+    willTransition(transition) {
+      window.scrollTo(0, 0);
+      if (!transition || transition.targetName !== this.routeName) {
+        this.store.clearAllDatasets();
+      }
+      return true;
+    },
+    reload() {
+      this.store.clearAllDatasets();
+      this.refresh();
+    },
   },
 });

ui/app/templates/vault/cluster/access/namespaces/index.hbs

@@ -18,7 +18,7 @@
     </ToolbarActions>
   </Toolbar>
 
-  <ListView @items={{model}} @itemNoun="namespace" as |list|>
+  <ListView @items={{model}} @itemNoun="namespace" @paginationRouteName="vault.cluster.access.namespaces" as |list|>
     {{#if list.empty}}
       <list.empty>
         <LinkTo @route="vault.cluster.access.namespaces.create">