fix data tab not showing models

app/controllers/model-types.js

@@ -1,7 +1,6 @@
-/* eslint-disable ember/no-computed-properties-in-native-classes */
 import Controller from '@ember/controller';
-import { action, computed } from '@ember/object';
-import { sort } from '@ember/object/computed';
+import { action } from '@ember/object';
+import { compare } from '@ember/utils';
 import { inject as service } from '@ember/service';
 
 const HIDE_EMPTY_MODELS_KEY = 'are-model-types-hidden';
@@ -16,8 +15,6 @@ export default class ModelTypesController extends Controller {
 
   constructor() {
     super(...arguments);
-    this.sortByNameProp = ['name'];
-    this.sortByDescCountProp = ['count:desc'];
   }
 
   get hideEmptyModelTypes() {
@@ -36,13 +33,14 @@ export default class ModelTypesController extends Controller {
     handleSettingProperty(this.storage, ORDER_MODELS_BY_COUNT_KEY, value);
   }
 
-  @sort('filtered', 'sortByNameProp')
-  sortByName;
+  get sortByName() {
+    return this.filtered.toSorted((a, b) => compare(a.name, b.name));
+  }
 
-  @sort('filtered', 'sortByDescCountProp')
-  sortByDescCount;
+  get sortByDescCount() {
+    return this.filtered.toSorted((a, b) => compare(b.count, a.count));
+  }
 
-  @computed('[email protected]', 'hideEmptyModelTypes')
   get filtered() {
     return this.model.filter((item) => {
       let hideEmptyModels = this.hideEmptyModelTypes;

app/services/storage.ts

@@ -2,6 +2,11 @@ import Service, { inject as service } from '@ember/service';
 import { LOCAL_STORAGE_SUPPORTED } from './storage/local';
 import type LocalStorageService from './storage/local';
 import type MemoryStorageService from './storage/memory';
+import { tracked } from '@glimmer/tracking';
+
+function consumeTracked(value: number): number {
+  return value;
+}
 
 /**
  * Service that wraps either the LocalStorageService or
@@ -12,13 +17,15 @@ import type MemoryStorageService from './storage/memory';
 export default class StorageService extends Service {
   @service(LOCAL_STORAGE_SUPPORTED ? 'storage/local' : 'storage/memory')
   declare backend: LocalStorageService | MemoryStorageService;
+  @tracked changed = 1;
 
   /**
    * Reads a stored object for a give key, if any.
    *
    * @return {Option<String>} The value, if found
    */
   getItem(key: keyof object) {
+    consumeTracked(this.changed);
     const serialized = this.backend.getItem(key);
 
     if (serialized === null) {
@@ -33,6 +40,7 @@ export default class StorageService extends Service {
    * Store a string for a given key.
    */
   setItem(key: keyof object, value: string) {
+    this.changed += 1;
     if (value === undefined) {
       this.removeItem(key);
     } else {
@@ -45,6 +53,7 @@ export default class StorageService extends Service {
    * Deletes the stored string for a given key.
    */
   removeItem(key: keyof object) {
+    this.changed += 1;
     this.backend.removeItem(key);
   }
 
@@ -54,6 +63,7 @@ export default class StorageService extends Service {
    * @return {Array<String>} The array of keys
    */
   keys() {
+    consumeTracked(this.changed);
     return this.backend.keys();
   }
 }

tests/acceptance/data-test.js

@@ -91,11 +91,16 @@ module('Data Tab', function (outer) {
     test('Model types are successfully listed and bound', async function (assert) {
       respondWith('data:getModelTypes', {
         type: 'data:modelTypesAdded',
-        modelTypes: getModelTypes(),
+        modelTypes: [],
       });
 
       await visit('/data/model-types');
 
+      await sendMessage({
+        type: 'data:modelTypesAdded',
+        modelTypes: getModelTypes(),
+      });
+
       assert.dom('.js-model-type').exists({ count: 2 });
 
       // they should be sorted alphabetically