fix data tab not showing models

app/controllers/model-types.js

@@ -1,7 +1,5 @@
-/* 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 { inject as service } from '@ember/service';
 
 const HIDE_EMPTY_MODELS_KEY = 'are-model-types-hidden';
@@ -14,12 +12,6 @@ export default class ModelTypesController extends Controller {
 
   navWidth = 180;
 
-  constructor() {
-    super(...arguments);
-    this.sortByNameProp = ['name'];
-    this.sortByDescCountProp = ['count:desc'];
-  }
-
   get hideEmptyModelTypes() {
     return getStoredPropertyValue(this.storage, HIDE_EMPTY_MODELS_KEY);
   }
@@ -36,13 +28,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) => a.name.localeCompare(b.name));
+  }
 
-  @sort('filtered', 'sortByDescCountProp')
-  sortByDescCount;
+  get sortByDescCount() {
+    return this.filtered.toSorted((a, b) => 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,7 @@ 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';
 
 /**
  * Service that wraps either the LocalStorageService or
@@ -12,14 +13,26 @@ 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 trackedBackend = {
+    setItem: (k: keyof object, v: string) => {
+      this.backend.setItem(k, v);
+      this.trackedBackend = { ...this.trackedBackend };
+    },
+    removeItem: (k: keyof object) => {
+      this.backend.removeItem(k);
+      this.trackedBackend = { ...this.trackedBackend };
+    },
+    getItem: (k: keyof object) => this.backend.getItem(k),
+    keys: () => this.backend.keys(),
+  };
 
   /**
    * Reads a stored object for a give key, if any.
    *
    * @return {Option<String>} The value, if found
    */
   getItem(key: keyof object) {
-    const serialized = this.backend.getItem(key);
+    const serialized = this.trackedBackend.getItem(key);
 
     if (serialized === null) {
       // Actual `null` values would have been serialized as `"null"`
@@ -37,15 +50,15 @@ export default class StorageService extends Service {
       this.removeItem(key);
     } else {
       const serialized = JSON.stringify(value);
-      this.backend.setItem(key, serialized);
+      this.trackedBackend.setItem(key, serialized);
     }
   }
 
   /**
    * Deletes the stored string for a given key.
    */
   removeItem(key: keyof object) {
-    this.backend.removeItem(key);
+    this.trackedBackend.removeItem(key);
   }
 
   /**
@@ -54,6 +67,6 @@ export default class StorageService extends Service {
    * @return {Array<String>} The array of keys
    */
   keys() {
-    return this.backend.keys();
+    return this.trackedBackend.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