Removed all-tags load when accessing tags screen

ref https://linear.app/ghost/issue/PROD-1605/

- switched from performing an all-tags fetch with a `peekAll` for the tags screen model to using `InfinityModel`
  - set up to cache for 5 minutes so there are no unnecessary queries when switching between filters or to/from the create/edit tag screens
  - updated the `vertical-collection` usage to trigger the infinity model to load more when the end is reached
- updated tags filter to exclude deleted entries so there's no need to refresh after deleting a tag
- updated new tag controller to push the tag onto the infinity model (shared instance stored on the `tags-manager` service) so there's no need to refresh after adding a tag

Author: kevinansfield

ghost/admin/app/controllers/tag.js

@@ -9,6 +9,8 @@ export default class TagController extends Controller {
     @service modals;
     @service notifications;
     @service router;
+    @service tagsManager;
+
     @inject config;
 
     get tag() {
@@ -45,6 +47,8 @@ export default class TagController extends Controller {
             }
             yield tag.save();
 
+            this.tagsManager.tagsScreenInfinityModel?.pushObjects([tag]);
+
             // replace 'new' route with 'tag' route
             this.replaceRoute('tag', tag);
 

ghost/admin/app/controllers/tags.js

@@ -4,7 +4,9 @@ import {inject as service} from '@ember/service';
 import {tracked} from '@glimmer/tracking';
 
 export default class TagsController extends Controller {
+    @service infinity;
     @service router;
+    @service tagsManager;
 
     queryParams = ['type'];
     @tracked type = 'public';
@@ -15,15 +17,12 @@ export default class TagsController extends Controller {
 
     get filteredTags() {
         return this.tags.filter((tag) => {
-            return (!tag.isNew && (!this.type || tag.visibility === this.type));
+            return (!tag.isNew && !tag.isDestroyed && !tag.isDestroying && !tag.isDeleted && (!this.type || tag.visibility === this.type));
         });
     }
 
     get sortedTags() {
-        return this.filteredTags.sort((tagA, tagB) => {
-            // ignorePunctuation means the # in internal tag names is ignored
-            return tagA.name.localeCompare(tagB.name, undefined, {ignorePunctuation: true});
-        });
+        return this.tagsManager.sortTags(this.filteredTags);
     }
 
     @action
@@ -35,4 +34,9 @@ export default class TagsController extends Controller {
     newTag() {
         this.router.transitionTo('tag.new');
     }
+
+    @action
+    loadMoreTags() {
+        this.infinity.infinityLoad(this.model);
+    }
 }

ghost/admin/app/routes/tags.js

@@ -1,6 +1,12 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
+import {inject as service} from '@ember/service';
+
+const CACHE_TIME = 1000 * 60 * 5; // 5 minutes
 
 export default class TagsRoute extends AuthenticatedRoute {
+    @service infinity;
+    @service tagsManager;
+
     queryParams = {
         type: {
             refreshModel: true,
@@ -17,22 +23,37 @@ export default class TagsRoute extends AuthenticatedRoute {
         }
     }
 
-    // set model to a live array so all tags are shown and created/deleted tags
-    // are automatically added/removed. Also load all tags in the background,
-    // pausing to show the loading spinner if no tags have been loaded yet
-    model() {
-        let promise = this.store.query('tag', {limit: 'all', include: 'count.posts'});
-        let tags = this.store.peekAll('tag');
-        if (this.store.peekAll('tag').get('length') === 0) {
-            return promise.then(() => tags);
-        } else {
-            return tags;
-        }
+    model(params) {
+        const filterParams = {
+            visibility: params.type
+        };
+
+        const paginationParams = {
+            perPage: 100,
+            perPageParam: 'limit',
+            totalPagesParam: 'meta.pagination.pages',
+            order: 'name asc',
+            include: 'count.posts'
+        };
+
+        this.tagsManager.tagsScreenInfinityModel = this.infinity.model('tag', {
+            ...paginationParams,
+            filter: this._filterString({...filterParams}),
+            infinityCache: CACHE_TIME
+        });
+
+        return this.tagsManager.tagsScreenInfinityModel;
     }
 
     buildRouteInfoMetadata() {
         return {
             titleToken: 'Tags'
         };
     }
+
+    _filterString(filter) {
+        return Object.entries(filter).map(([key, value]) => {
+            return `${key}:${value}`;
+        }).join(',');
+    }
 }

ghost/admin/app/services/tags-manager.js

@@ -1,9 +1,12 @@
 import Service, {inject as service} from '@ember/service';
 import {task, timeout} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
 
 export default class TagsManagerService extends Service {
     @service store;
 
+    @tracked tagsScreenInfinityModel = null;
+
     _loadedTags = this.store.peekAll('tag');
 
     get loadedTags() {

ghost/admin/app/templates/tags.hbs

@@ -19,7 +19,14 @@
                     <div class="gh-list-header gh-list-cellwidth-10">No. of posts</div>
                     <div class="gh-list-header gh-list-cellwidth-10"></div>
                 </li>
-                <VerticalCollection @items={{this.sortedTags}} @key="id" @containerSelector=".gh-main" @estimateHeight={{60}} @bufferSize={{20}} as |tag|>
+                <VerticalCollection
+                    @items={{this.sortedTags}}
+                    @key="id"
+                    @containerSelector=".gh-main"
+                    @estimateHeight={{60}}
+                    @bufferSize={{20}}
+                    @lastReached={{this.loadMoreTags}}
+                as |tag|>
                     <Tags::ListItem @tag={{tag}} data-test-tag={{tag.id}} />
                 </VerticalCollection>
             {{else}}